kd-aiot-frontend-mes/src/views/produce/components/produceOrder.vue

<template>
  <ele-pro-table
    ref="table"
    :columns="columns"
    height="320px"
    :datasource="datasource"
    :selection.sync="selection"
    @selection-change="handleSelectionChange"
    cache-key="produceOrderZ"
    highlight-current-row
    @row-click="rowClick"
    :need-page="false"
  >
    <template v-slot:toolbar>
      <div class="c_title">工单列表 </div>
    </template>

    <template v-slot:code="{ row }">
      <el-link type="primary" :underline="false">{{ row.code }}</el-link>
    </template>
  </ele-pro-table>
</template>

<script>
  import { workorderPage } from '@/api/produce/workOrder.js';

  export default {
    components: {},
    data() {
      return {
        loading: false,
        selection: []
      };
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'batchNo',
            label: '批号',
            align: 'center'
          },

          {
            prop: 'code',
            slot: 'code',
            label: '生产工单号',
            align: 'center',
          },
          {
            prop: '',
            label: '计划编号',
            align: 'center'
          },
          {
            prop: '',
            label: '计划类型',
            align: 'center'
          },

          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center'
          },

          {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',

          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
          },

          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center'
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center'
          }
        ];
      },

      taskObj() {
        return this.$store.state.user.taskObj;
      }
    },

    watch: {
      taskObj: {
        handler(val) {
          this.reload();
        },
        immediate: true,
        deep: true
      }
    },
    created() {},
    methods: {
      /* 表格数据源 */
      datasource({ page, where }) {
        return workorderPage({
          pageNum: page,
          size: 200,
          taskId: this.taskObj && this.taskObj.id,
          ...where
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      handleSelectionChange(val) {
        let ids = [];
        ids = val.map((item) => {
          return item.id;
        });
        console.log(ids);
        this.$emit('workSelect', ids);
      },

      rowClick() {}
    }
  };
</script>

<style lang="scss" scoped>
  .table {
    height: calc((100vh - 70px - 50px - 80px - 20px) / 2);
  }
</style>