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

<template>
  <el-dialog
    title="首件两检报工"
    :visible.sync="dialogVisible"
    width="85%"
    :before-close="handleClose"
  >
    <div>
      <div class="step-list" v-loading="loading">
        <ele-pro-table
          ref="table"
          row-key="id"
          :columns="columns"
          :datasource="list"
          cache-key="mes-ruleRecordsList-2511172018"
          autoAmendPage
          :need-page="false"
          @refresh="getData"
        >
          <template v-slot:selfCheck="{ row }">
            <el-button
              type="primary"
              @click="selfRequest(row)"
              v-if="row.status == 0"
              >自检请托</el-button
            >
            <el-button
              type="primary"
              :disabled="row.status != 0"
              @click="reportClick(row, 1)"
              >{{ row.status == 0 ? '报工' : '已报工' }}</el-button
            >

            <el-button
              type="primary"
              v-if="row.status == 2 || row.status == 3"
              @click="reportClick(row, 1, 'detail')"
              >详情</el-button
            >
          </template>

          <template v-slot:specialInspection="{ row }">
            <el-button
              type="primary"
              :disabled="row.status != 2"
              @click="reportClick(row, 2)"
              >{{ row.status == 3 ? '已报工' : '报工' }}</el-button
            >

            <el-button
              type="primary"
              v-if="row.status == 3"
              @click="reportClick(row, 2, 'detail')"
              >详情</el-button
            >
          </template>

          <template v-slot:status="{ row }">
            <el-tag v-if="row.status == 0">待自检</el-tag>
            <el-tag v-if="row.status == 2">待专检</el-tag>
            <el-tag v-if="row.status == 3">已完成</el-tag>
          </template>
        </ele-pro-table>
      </div>
    </div>

    <self-inspection-reporting
      ref="selfReportingRef"
      @refreshData="getData"
    ></self-inspection-reporting>
    <self-inspection-request
      ref="selfRequestRef"
      @refreshData="getData"
    ></self-inspection-request>
  </el-dialog>
</template>

<script>
  import { getQualityInspectionList } from '@/api/produce/qualityInspection.js';
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import selfInspectionReporting from './components/selfInspectionReporting.vue';
  import selfInspectionRequest from './components/selfInspectionRequest.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: {
      selfInspectionReporting,
      selfInspectionRequest
    },
    data() {
      return {
        dialogVisible: false,
        loading: false,
        produceTaskInfo: null,
        workOrder: null,
        butLoad: false,
        list: [],
        type: ''
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            label: '序号',
            align: 'center'
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'workstationName',
            label: '工位名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },

          {
            prop: 'deviceName',
            label: '设备名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },

          {
            prop: 'selfCheckUserName',
            label: '自检报工人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'selfCheckTime',
            label: '自检时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },

          {
            prop: 'specialCheckUserName',
            label: '专检报工人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },

          {
            prop: 'specialCheckTime',
            label: '专检时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },

          {
            prop: 'status',
            slot: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },

          {
            label: '自检报工',
            align: 'center',
            width: 150,
            fixed: 'right',
            slot: 'selfCheck'
          },
          {
            label: '专检报工',
            align: 'center',
            width: 150,
            fixed: 'right',
            slot: 'specialInspection'
          }
        ];
      }
    },
    methods: {
      open(workOrder, produceTaskInfo, type) {
        this.workOrder = workOrder;
        this.produceTaskInfo = produceTaskInfo;
        this.type = type;
        this.dialogVisible = true;
        this.getData();
      },

      // 获取数据
      async getData() {
        this.loading = true;

        try {
          const isSourceTask = this.type == 1;

          const params = {
            workOrderId: this.workOrder?.id,
            produceTaskId: isSourceTask
              ? this.produceTaskInfo?.sourceTaskId
              : this.produceTaskInfo?.id,
            produceTaskInstanceId: isSourceTask
              ? this.produceTaskInfo?.id
              : this.workOrder?.taskId
          };

          const { list = [] } = await getQualityInspectionList(params);
          this.list = list;
        } catch (error) {
          this.list = [];
        } finally {
          this.loading = false;
        }
      },

      handleClose() {
        this.dialogVisible = false;
        this.$emit('close');
      },
      async handleUpdate() {
        try {
          this.butLoad = true;
          await this.getData();
          this.$message.success('已更新');
          this.butLoad = false;
        } catch (error) {
          this.butLoad = false;
        }
      },

      selfRequest(row) {
        this.$refs.selfRequestRef.open(row);
      },

      reportClick(row, type, mode) {
        this.$refs.selfReportingRef.open(row, type, mode);
      }
    }
  };
</script>

<style lang="scss" scoped></style>