kd-aiot-frontend-mes/src/views/batchRecord/components/list.vue

<template>
  <el-card shadow="never">
    <seekPage :seekList="seekList" :maxLength="4" @search="reload"></seekPage>
    <ele-pro-table
      ref="table"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      cacheKey="batchRecordBefore"
      :cache-key="'batchRecordTableRules-reportWorkType-' + reportWorkType"
      autoAmendPage
    >
      <!-- 操作列 -->
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit('add', null)"
        >
          新建
        </el-button>
      </template>
      <template v-slot:action="{ row }">
        <el-link
          v-if="row.executeStatus == 0"
          type="primary"
          :underline="false"
          @click="openEdit('edit', row)"
        >
          编辑
        </el-link>

        <el-link
          v-if="row.executeStatus != 0"
          type="primary"
          :underline="false"
          @click="openDetial(row, 'detail')"
        >
          详情
        </el-link>
        <el-link
          v-if="
            row.executeStatus == 0 ||
            (row.executeStatus == 1 && row.executeMethod == 2)
          "
          type="primary"
          :underline="false"
          @click="execute(row)"
        >
          执行
        </el-link>
        <el-link
          v-if="row.executeStatus == 2 && showBut"
          type="primary"
          :underline="false"
          @click="openApproval"
        >
          处理
        </el-link>
        <el-popconfirm
          v-if="row.executeStatus == 0"
          title="确定要删除此用户吗？"
          class="ele-action"
          @confirm="deleteById(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false"> 删除 </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <!-- 编辑添加组件 -->
    <editModal
      ref="detailsRef"
      :reportWorkType="reportWorkType"
      @reload="reload"
    ></editModal>
    <!-- 详情 审核组件 -->
    <detialsModal ref="detialsModalRef"></detialsModal>
    <!-- 记录规则 执行 -->
    <releaseRulesDialog
      ref="releaseRulesDialogRef"
      @reload="reload"
      :isTempRecord="1"
    />
    <programRulesDialog
      ref="programRulesDialogRef"
      @reload="reload"
      :isTempRecord="1"
    />

    <process-submit-dialog
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
      :isNotNeedProcess="false"
    ></process-submit-dialog>
  </el-card>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import {
    producetaskrulerecordPage,
    logicDeleteById
  } from '@/api/producetaskrulerecord/index';
  import editModal from './editModal.vue';
  import detialsModal from './detialsModal.vue';
  import { parameterGetByCode } from '@/api/system/dictionary-data';
  import releaseRulesDialog from '@/views/produce/components/prenatalExamination/releaseRulesDialog.vue';
  import programRulesDialog from '@/views/produce/components/prenatalExamination/programRulesDialog.vue';
  import { getById } from '@/api/produceOrder/index.js';
  import processSubmitDialog from '@/components/processSubmitDialog/processSubmitDialog.vue';

  export default {
    components: {
      editModal,
      detialsModal,
      releaseRulesDialog,
      programRulesDialog,
      processSubmitDialog
    },
    name: 'batchRecordTable',
    mixins: [dictMixins, tableColumnsMixin],
    props: {
      // 1-产前准备，2-过程监测，3-产后检查
      reportWorkType: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        // 表格字段
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            label: '序号',
            align: 'center'
          },
          {
            label: '记录编码',
            prop: 'code',
            minWidth: 180
          },
          {
            label: '产品编码',
            prop: 'productCode',
            minWidth: 180
          },
          {
            label: '产品名称',
            prop: 'productName',
            minWidth: 180
          },
          {
            label: '批次号',
            prop: 'batchNo',
            minWidth: 180
          },
          {
            label: '生产工单号',
            prop: 'workOrderCode',
            minWidth: 180
          },
          {
            label: '类型',
            prop: 'itemType',
            formatter: (row) => {
              return this.getDictValue('事项类型', row.itemType + '');
            }
          },
          {
            label: '执行方式',
            prop: 'executeMethod',
            minWidth: 180,
            formatter: (row) => {
              return this.getDictValue('执行方式', row.executeMethod + '');
            }
          },
          {
            label: '事项名称',
            prop: 'ruleName',
            minWidth: 180
          },
          {
            label: '状态',
            minWidth: 180,
            prop: 'executeStatus',
            formatter: (row) => {
              switch (row.executeStatus) {
                case 0:
                  return '未执行';
                case 1:
                  return '执行中';
                default:
                  return '已执行';
              }
            }
          },
          {
            label: '审核状态',
            prop: 'approvalStatus',
            minWidth: 180,
            formatter: (row) => {
              switch (row.approvalStatus) {
                case 0:
                  return '未提交';
                case 1:
                  return '审核中';
                case 2:
                  return '审核通过';
                case 3:
                  return '审核不通过';
                case 4:
                  return '终止审核中';
                case 5:
                  return '终止审核通过';
                case 7:
                  return '流程废止';
                default:
                  return '';
              }
            }
          },
          {
            label: '创建人',
            prop: 'createUserName',
            minWidth: 180
          },
          {
            label: '创建时间',
            prop: 'createTime',
            minWidth: 180
          },
          {
            label: '操作',
            columnKey: 'action',
            slot: 'action',
            showOverflowTooltip: true,
            minWidth: 180,
            align: 'center',
            fixed: 'right'
          }
        ],
        // 是否展示处理按钮
        showBut: false,
        showReleaseRulesDialog: false,
        processSubmitDialogFlag: false
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '记录编码:',
            value: 'code',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '类型:',
            value: 'itemType',
            type: 'select',
            placeholder: '请选择',
            planList: this.getDictListByName('事项类型')
          },
          {
            label: '产品名称:',
            value: 'productName',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '状态:',
            value: 'executeStatus',
            type: 'select',
            placeholder: '请选择',
            planList: [
              {
                label: '未执行',
                value: 0
              },
              {
                label: '执行中',
                value: 1
              },
              {
                label: '已执行',
                value: 2
              }
            ]
          }
        ];
      }
    },
    created() {
      this.requestDict('事项类型');
      this.requestDict('报工类型');
      this.requestDict('执行方式');
      this.parameterGetByCode();
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$nextTick(() => {
          this.$refs.table.reload({
            page: 1,
            where,
            reportWorkType: this.reportWorkType
          });
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return producetaskrulerecordPage({
          ...where,
          ...order,
          page,
          limit,
          reportWorkType: this.reportWorkType
        });
      },
      // 打开编辑新增
      openEdit(type, row) {
        this.$refs.detailsRef.open(type, row);
      },
      // 删除临时记录
      async deleteById(item) {
        await logicDeleteById(item.id);
        this.$message.warning('删除成功！');
        this.reload();
      },
      // 打开详情
      openDetial(row, type) {
        this.$refs.detialsModalRef?.open(row, type);
      },
      // 查询是否显示处理按钮
      async parameterGetByCode() {
        const data = await parameterGetByCode({
          code: 'form_submission_requires_approval',
          moduleCode: 'mes_'
        });
        this.showBut = data?.tenantId == '1';
        console.log('是否显示处理按钮（审批）', this.showBut);
      },
      // 提交审批
      openApproval(row) {
        console.log('row', row);
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: row.id,
            businessKey: 'mes_produce_task_record_rule_check',
            formCreateUserId: row.createUserId,
            variables: {
              businessCode: row.code
            }
          };
          console.log('1', 1);
          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      // 执行
      async execute(row) {
        console.log('row', row);
        const workOrderInfo = await getById(row.workOrderId);

        if (row.executeMethod == 1) {
          // 设备保养计划相关逻辑
          this.$refs.programRulesDialogRef.init(
            { ...row, recordId: row.id },
            workOrderInfo,
            {}
          );
          return;
        }
        console.log('workOrderInfo', workOrderInfo);
        this.$refs.releaseRulesDialogRef?.open(
          { ...row, recordId: row.id },
          workOrderInfo
        );
      }
    }
  };
</script>

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