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

<template>
  <div>
    <ele-pro-table
      ref="table"
      :height="internalIsFullscreen ? '400px' : '300px'"
      :columns="columns"
      width="100%"
      :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" @click="handRoute(row)" :underline="false">{{
          row.code
        }}</el-link>
      </template>

      <template v-slot:singleReport="{ row }">
        <el-tag> {{ row.singleReport == 1 ? '单个报工' : '批量报工' }}</el-tag>
      </template>

      <template v-slot:formingNum="{ row }">
        <span> {{ row.formingNum }} {{ row.unit }} </span>
      </template>

      <template v-slot:formingWeight="{ row }">
        <span> {{ row.formingNum }} {{ row.weightUnit }} </span>
      </template>
    </ele-pro-table>

    <routings
      v-if="routingShow"
      :routeObj="routeObj"
      @closeRoute="closeRoute"
    ></routings>
  </div>
</template>

<script>
  import { workorderPage2 } from '@/api/produce/workOrder.js';
  import routings from './routings.vue';
  import { isFullscreen } from 'ele-admin';
  export default {
    components: { routings },
    data() {
      return {
        loading: false,
        selection: [],

        routeObj: {},
        routingShow: false,

        internalIsFullscreen: isFullscreen() // 初始值
      };
    },
    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',
            minWidth: '110'
          },
          {
            prop: '',
            label: '计划编号',
            align: 'center'
          },
          {
            prop: '',
            label: '计划类型',
            align: 'center'
          },

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

          {
            prop: 'singleReport',
            slot: 'singleReport',
            label: '报工类型',
            align: 'center',
            width: 100
          },

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

          {
            prop: 'priority',
            label: '优先级',
            align: 'center',
            minWidth: 120
          },

          {
            prop: 'formingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'formingNum',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'formingWeight',
            label: '要求生产重量',
            slot: 'formingWeight',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'formedNum',
            label: '已生产数量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'formedWeight',
            label: '已生产重量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planCompleteTime',
            label: '计划结束时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'startTime',
            label: '实际开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ];
      },

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

    watch: {
      taskObj: {
        handler(val) {
          this.reload();
        },
        immediate: true,
        deep: true
      }
    },
    created() {},

    mounted() {
      // 添加窗口resize事件监听器
      window.addEventListener('resize', this.handleResize);
    },

    beforeDestroy() {
      // 组件销毁前移除事件监听器，防止内存泄漏
      window.removeEventListener('resize', this.handleResize);
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, where }) {
        return workorderPage2({
          pageNum: page,
          size: 200,
          workOrderId: this.$route.query.workOrderId  ? this.$route.query.workOrderId : null,
          taskId: this.taskObj && this.taskObj.id,
          ...where
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      handleSelectionChange(val) {
        let initReportValue = val[0] && val[0].singleReport;
        let allSame = true;

        val.forEach((item) => {
          if (item.singleReport !== initReportValue) {
            allSame = false;
          }
        });

        if (!allSame) {
          return this.$message.warning('请选择报工类型相同的工单');
        }

        
        let ids = [];
        ids = val.map((item) => {
          return item.id;
        });
        console.log(ids);
        this.$emit('workSelect', ids);
      },

      rowClick(e) {
        this.$emit('rowClick', e, this.taskObj.id);
      },

      handRoute(row) {
        this.routeObj = row;
        this.routingShow = true;
      },

      closeRoute() {
        this.routingShow = false;
      },

      handleResize() {
        this.internalIsFullscreen = isFullscreen();
      }
    }
  };
</script>

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