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

<template>
  <div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      height="calc(100vh - 280px)"
      width="100%"
      :datasource="datasource"
      :selection.sync="selection"
      @selection-change="handleSelectionChange"
      @cell-click="cellClick"
      highlight-current-row
      @select="cellClick"
      :need-page="false"
      @sort-change="onSortChange"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
      :row-class-name="tableRowClassName"
    >
      <!-- <template v-slot:toolbar>
        <div class="rx-bc">
          <div class="c_title">工单列表 </div>

          <div>
            <el-input
              style="width: 180px"
              clearable
              v-model="code"
              placeholder="请输入工单号"
            />
            <el-button  size="mini" type="primary" style="margin: 0 5px" @click="handleSearch">查询</el-button>
          </div>
        </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 size="mini">
          {{ row.singleReport == 1 ? '单个报工' : '批量报工' }}</el-tag
        >
      </template>

      <template v-slot:productUnitWeight="{ row }">
        <span> {{ row.productUnitWeight }}{{ row.weightUnit }}</span>
      </template>

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

      <template v-slot:sourceType="{ row }">
        <span v-if="row.sourceType == 1">生产计划</span>
        <span v-if="row.sourceType == 2">临时生产计划</span>
        <span v-if="row.sourceType == 3">受托转订单</span>
      </template>

      <template v-slot:outsourceStatus="{ row }">
        <div v-if="row.outsourceStatus">
          <span v-if="row.outsourceStatus == 1">未委外</span>
          <span v-if="row.outsourceStatus == 2">委外中</span>
          <span v-if="row.outsourceStatus == 3">完成委外</span>
        </div>
      </template>

      <template v-slot:entrustStatus="{ row }">
        <div v-if="row.entrustStatus">
          <span v-if="row.entrustStatus == 1">未请托</span>
          <span v-if="row.entrustStatus == 2">请托中</span>
          <span v-if="row.entrustStatus == 3">请托完成</span>
        </div>
      </template>

      <template v-slot:workOrderType="{ row }">
        <span v-if="row.workOrderType == 1">普通订单</span>
        <span v-if="row.workOrderType == 2">临时订单</span>
        <span v-if="row.workOrderType == 3">受托订单</span>
      </template>

      <template v-slot:status="{ row }">
        <span> {{ sumStatus(row) }}</span>
      </template>

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

      <template v-slot:formingWeight="{ row }">
        <span> {{ row.formingWeight }} {{ 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';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import {
    getList,
    removeItem,
    updateCertificateNumber
  } from '@/api/inspectionWork';

  export default {
    components: { routings },
    mixins: [tableColumnsMixin],
    emits: ['changeIsPreProductionResult'],
    props: {
      produceTaskInfo: {
        type: Object,
        default: () => {
          return null;
        }
      }
    },
    data() {
      return {
        loading: false,
        selection: [],

        routeObj: {},
        routingShow: false,

        code: '',

        internalIsFullscreen: isFullscreen(), // 初始值
        cacheKeyUrl: 'mes-145878-mes-produce',
        columnsVersion: 0
      };
    },
    computed: {
      // 表格列配置
      columns() {
        let columnsVersion = this.columnsVersion;
        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',
            showOverflowTooltip: true
          },

          {
            prop: 'code',
            slot: 'code',
            label: '生产工单号',
            align: 'center',
            minWidth: '160',
            showOverflowTooltip: true
          },
          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            minWidth: '160',
            showOverflowTooltip: true
          },

          {
            prop: 'productCode',
            label: '编码',
            align: 'center',
            minWidth: '160',
            showOverflowTooltip: true
          },
          {
            prop: 'productName',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'sourceType',
            label: '来源类型',
            slot: 'sourceType',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'workOrderType',
            label: '订单类型',
            slot: 'workOrderType',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'singleReport',
            slot: 'singleReport',
            label: '报工类型',
            align: 'center',
            filters: [
              { text: '单个报工', value: 1 },
              { text: '批量报工', value: 0 }
            ],
            filterMethod: this.filterMethod,
            width: 100
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'outsourceStatus',
            label: '委外状态',
            align: 'center',
            slot: 'outsourceStatus',
            showOverflowTooltip: true
          },
          {
            prop: 'entrustStatus',
            label: '请托状态',
            align: 'center',
            slot: 'entrustStatus',
            showOverflowTooltip: true
          },
          {
            prop: 'productionCodes',
            label: '生产编号',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'productUnitWeight',
            slot: 'productUnitWeight',
            label: '单重',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            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
          },

          {
            slot: 'taskName',
            prop: 'taskName',
            label: '工序进度',
            align: 'center',
            showOverflowTooltip: true,
            sortable: 'custom',
            minWidth: 110
          },
          {
            slot: 'status',
            prop: 'status',
            label: '最新工单状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'modelKey',
            label: '机型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            sortable: true
          },
          {
            prop: 'planCompleteTime',
            label: '计划结束时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            sortable: true
          },
          {
            prop: 'startTime',
            label: '实际开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            sortable: true
          },
          {
            prop: 'completeTime',
            label: '实际完成时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            sortable: true
          },

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

      taskObj() {
        return this.$store.state.user.taskObj;
      },
      current() {
        console.log(this.$store.state.user, 'this.$store.state.user');

        return this.$store.state.user.currentObj.id;
      }
    },

    watch: {
      taskObj: {
        handler(val) {
          console.log('123');
          this.reload();
        },
        // immediate: true,
        deep: true
      },
      current: {
        handler(val) {
          console.log('456');
          this.reload();
        },
        // immediate: true,
        deep: true
      }
    },
    created() {},

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

    beforeDestroy() {
      // 组件销毁前移除事件监听器，防止内存泄漏
      window.removeEventListener('resize', this.handleResize);
    },
    methods: {
      filterMethod(value, row, column) {
        if (value == row.singleReport) {
          return row;
        }
      },
      sumStatus(row) {
        if (row.reportStatus === 1) {
          return '已报工';
        }
        if (row.feedStatus === 1) {
          return '已投料';
        }
        // {{  row.reportStatus }}  {{  row.feedStatus }}
      },

      tableRowClassName({ row, rowIndex }) {
        if (row.outsourceStatus == 2) {
          return 'warning-row';
        }

        if (row.entrustStatus == 2) {
          return 'ent-row';
        }
      },

      /* 表格数据源 */
      datasource({ page, where }) {
        if (!this.taskObj?.id) {
          return [];
        }

        console.log(this.taskObj?.id);
        // if (this.taskObj?.id == '1916800744740663298') {
        //   return getList({
        //     pageNum: page,
        //     size: 1000
        //   });
        // } else {
        return workorderPage2({
          pageNum: page,
          size: 5000,
          workOrderId: this.$route.query.workOrderId
            ? this.$route.query.workOrderId
            : null,
          taskId: this.taskObj && this.taskObj.id,
          deviceId: this.current && this.current.deviceId,
          keyWord: this.keyWord,
          taskName: this.taskName,
          ...where
        });
        // }
      },

      onSortChange(e) {
        console.log(e);
        let sort = {
          orderBy: e.order,
          sortName: e.prop
        };
        this.where = sort;
        this.reload();
      },
      handleSearch(obj) {
        this.keyWord = obj.keyWord;
        this.taskName = obj.taskName;
        this.reload();
      },

      /* 刷新表格 */
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },

      async handleSelectionChange(val) {
        console.log('val 选择的工单列表', val);
        console.log('this.produceTaskInfo', this.produceTaskInfo);
        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;
        });
        this.$emit('workSelect', { ids: ids, list: val });
      },
      rowClick(e) {
        this.$emit('rowClick', e, this.taskObj.id);
      },
      cellClick() {
        this.$nextTick(() => {
          this.$emit('getTaskName', this.selection);
        });
      },

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

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

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

<style lang="scss" scoped>
  ::v-deep .el-table .warning-row {
    background: #39d9ac;
    // color: #39d9ac;
  }

  ::v-deep .el-table .ent-row {
    background: #5419d4;
    // color: #39d9ac;
  }

  ::v-deep .el-table .success-row {
    background: #f0f9eb;
  }
</style>