kd-aiot-frontend-mes/src/views/taskList/index.vue

<template>
  <div class="ele-body">
    <el-card v-loading="loading" shadow="never">
      <task-search @search="reload"></task-search>
      <!-- <taskDialog-search></taskDialog-search> -->
      <el-tabs v-model="tabValue" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="我的任务" name="1"></el-tab-pane>
        <el-tab-pane label="全部任务" name="2"></el-tab-pane>
      </el-tabs>
    </el-card>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      :pageSize="20"
      cache-key="workOrderTable"
      class="my_pro_table"
      row-key="id"
    >
      <template v-slot:assignCode="{ row }">
        <el-link
          :underline="false"
          type="primary"
          @click="details('assign', row)"
          >{{ row.assignCode }}
        </el-link>
      </template>
      <template v-slot:workOrderCode="{ row }">
        <el-link
          :underline="false"
          type="primary"
          @click="details('assign', row)"
          >{{ row.workOrderCode }}
        </el-link>
      </template>
      <template v-slot:action="{ row }">
        <el-link
          :underline="false"
          type="primary"
          @click="details('report', row)"
          >报工
        </el-link>
        <el-link :underline="false" type="primary" @click="viewRecords(row.id)"
          >修改记录
        </el-link>
      </template>
    </ele-pro-table>
    <modifyDialog ref="modifyRef" />
    <Ddtails ref="detailsRef" @success="reload" />
  </div>
</template>

<script>
  import TaskSearch from './components/task-search.vue';
  import Ddtails from './components/Ddtails.vue';
  import modifyDialog from '@/views/taskList/components/modifyDialog.vue';
  import {
    pageByCurrentUser,
    pageByCurrentUserLeader,
    listUpdateRealTimeRecord
  } from '@/api/workOrderList';

  export default {
    components: { TaskSearch, Ddtails, modifyDialog },
    data() {
      return {
        loading: false,
        tabValue: '1',
        statusOpt: [
          { label: '待生产', value: 4 },
          { label: '生产中', value: 5 },
          { label: '待下达', value: 8 }
        ]
      };
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            slot: 'assignCode',
            prop: 'assignCode',
            label: '任务编码',
            align: 'center',
            showOverflowTooltip: true,
            width: 210
          },
          {
            slot: 'workOrderCode',
            prop: 'workOrderCode',
            label: '生产订单编码',
            align: 'center',
            showOverflowTooltip: true,
            width: 210
          },
          {
            prop: 'mesWorkOrderCode',
            label: '生产工单编码',
            align: 'center',
            showOverflowTooltip: true,
            width: 210
          },
          {
            prop: 'productionPlanCode',
            label: '计划编号',
            align: 'center',
            showOverflowTooltip: true,
            width: 170
          },
          {
            prop: 'assigneeType',
            label: '执行类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 120,
            formatter: (row) => {
              if (!row.assigneeType) return '';
              return row.assigneeType.desc;
            }
          },
          {
            prop: 'assigneeName',
            label: '执行对象名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'workCenterName',
            label: '工作中心',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'assignTeamName',
            label: '班组名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'taskName',
            label: '工序名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            showOverflowTooltip: true,
            width: 170
          },
          {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',
            showOverflowTooltip: true,
            width: 170
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 200
          },
          {
            prop: 'productionCodes',
            label: '生产编号',
            align: 'center',
            showOverflowTooltip: true,
            width: 170
          },
          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true,
            width: 170
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            width: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            width: 200,
            showOverflowTooltip: true
          },
          {
            prop: 'quantity',
            label: '要求生产数量',
            align: 'center',
            showOverflowTooltip: true,
            width: 110
          },
          {
            prop: 'weight',
            label: '要求生产重量',
            align: 'center',
            showOverflowTooltip: true,
            width: 110
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },

          {
            prop: 'planCompleteTime',
            label: '计划结束时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'startTime',
            label: '任务开始时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },

          {
            prop: 'endTime',
            label: '任务结束时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            label: '实际开始时间',
            prop: 'realStartTime',
            minWidth: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '实际结束时间',
            prop: 'realEndTime',
            minWidth: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '工时',
            prop: 'durationText',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'firstTaskName',
            label: '首工序',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'statusText',
            label: '状态',
            align: 'center',
            // formatter: (row) => {
            //   const obj = this.statusOpt.find((i) => i.value == row.status);
            //   return obj && obj.label;
            // },
            width: 120
          },
          {
            prop: 'customerName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'serialNo',
            label: '客户代号',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },

          {
            prop: 'simpleName',
            label: '客户简称',
            align: 'center',
            showOverflowTooltip: true,
            width: 180
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      }
    },
    created() {},
    mounted() {},
    methods: {
      handleTabClick(e) {
        this.tabValue = e.name;
        this.reload();
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        let api =
          this.tabValue === '1' ? pageByCurrentUser : pageByCurrentUserLeader;
        return api({
          ...where,
          pageNum: page,
          size: limit
        });
      },
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      details(type, row) {
        let currentRow = {
          assignCode: row.assignCode,
          workOrderCode: row.workOrderCode,
          productionPlanCode: row.productionPlanCode,
          produceRoutingName: row.produceRoutingName,
          formingNum: row.quantity,
          assignTeamName: row.assignTeamName,
          formingWeight: row.quantity,
          planStartTime: row.planStartTime,
          planCompleteTime: row.planCompleteTime,
          startTime: row.startTime,
          firstTaskId: row.firstTaskId,
          endTime: row.endTime,
          taskName: row.taskName,
          firstTaskName: row.firstTaskName,
          assigneeType: row.assigneeType ? row.assigneeType.desc : '',
          assigneeName: row.assigneeName,
          weight: row.weight,
          quantity: row.quantity,
          durationText: row.durationText,
          apsAssigneeId: row.id
        };
        let form = {
          realEndTime: row.realEndTime,
          realStartTime: row.realStartTime,
          unqualifiedWeight: row.unqualifiedWeight,
          unqualifiedQuantity: row.unqualifiedQuantity,
          qualifiedWeight: row.qualifiedWeight,
          remark: row.assigneeRemark,
          qualifiedQuantity: row.qualifiedQuantity
        };
        this.$refs.detailsRef.open(type, currentRow, form);
      },
      viewRecords(apsAssigneeId) {
        listUpdateRealTimeRecord(apsAssigneeId)
          .then((res) => {
            if (res && res.length > 0) {
              this.$refs.modifyRef.open(res);
            } else {
              this.$message.warning('暂无修改历史记录数据');
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    height: 100%;

    .my_pro_table {
      height: calc(100% - 136px);
    }
  }

  ::v-deep .el-table {
    height: calc(100% - 96px);
  }
</style>