kd-aiot-frontend-mes/src/views/checklistManagement/components/checkDetails.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="80%"
  >
    <div
      v-if="(type == 'detail' || type == 'edit') && form.processInstanceId"
      class="switch"
      :maxable="true"
      style="margin-bottom: 20px"
    >
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>

    <bpmDetail
      v-if="activeComp == 'bpm' && form && form.processInstanceId"
      :id="form.processInstanceId"
    >
    </bpmDetail>

    <el-form
      v-if="activeComp == 'main'"
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <header-title title="基本信息"></header-title>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="放行单编码">
            <el-input
              v-model="form.code"
              placeholder="系统自动生成"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="放行单名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <header-title title="物品清单">
        <el-button type="primary" icon="el-icon-plus" @click="openAddModel">
          添加
        </el-button>
      </header-title>

      <ele-pro-table
        ref="table"
        row-key="userId"
        :columns="ordersColumns"
        :datasource="form.orders"
      >
        <template v-slot:action="{ row }">
          <el-link icon="el-icon-edit" type="primary" :underline="false"
            >详情</el-link
          >
          <el-link
            icon="el-icon-delete"
            type="danger"
            :underline="false"
            @click="deleteRow(row)"
            >删除</el-link
          >
        </template>
      </ele-pro-table>

      <el-button
        type="primary"
        style="margin-bottom: 15px"
        @click="getKitCheck"
        :loading="butLoading"
      >
        规则齐套检查
      </el-button>

      <header-title title="生产放行规则"> </header-title>

      <ele-pro-table
        ref="scTable"
        row-key="id"
        :columns="detailsColumns"
        :datasource="scDetails"
      >
        <template v-slot:isPass="{ row }">
          <el-radio-group v-model="row.isPass">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </template>
        <template v-slot:remark="{ row }">
          <el-input
            type="textarea"
            v-model="row.remark"
            placeholder="请输入备注"
            :rows="1"
          ></el-input>
        </template>
      </ele-pro-table>

      <table
        class="detail-table"
        key="first-table"
        style="width: 500px; margin: 15px 0"
      >
        <tr>
          <td>结论</td>
          <td>
            <el-radio-group v-model="form.workConclution">
              <el-radio :label="0">不符合规定</el-radio>
              <el-radio :label="1">符合规定</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>验收人</td>
          <td @click="openSelectUser(0)">
            <div class="mask-box">
              <el-input
                v-model="form.workCheckUserName"
                placeholder="请输选择验收人"
                readonly
              ></el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td>验收时间</td>
          <td>
            <el-date-picker
              v-model="form.workCheckTime"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </td>
        </tr>
      </table>

      <header-title title="质检放行规则"></header-title>

      <ele-pro-table
        ref="zjTable"
        row-key="id"
        :columns="detailsColumns"
        :datasource="zjDetails"
      >
        <template v-slot:isPass="{ row }">
          <el-radio-group v-model="row.isPass">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </template>
        <template v-slot:remark="{ row }">
          <el-input
            type="textarea"
            v-model="row.remark"
            placeholder="请输入备注"
            :rows="1"
          ></el-input>
        </template>
      </ele-pro-table>

      <table
        class="detail-table"
        key="tow"
        style="width: 500px; margin: 15px 0"
      >
        <tr>
          <td>结论</td>
          <td>
            <el-radio-group v-model="form.qualityConclution">
              <el-radio :label="0">不符合规定</el-radio>
              <el-radio :label="1">符合规定</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>验收人</td>
          <td>
            <div class="mask-box" @click="openSelectUser(1)">
              <el-input
                v-model="form.qualityCheckUserName"
                placeholder="请输选择验收人"
                readonly
              ></el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td>验收时间</td>
          <td>
            <el-date-picker
              v-model="form.qualityCheckTime"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </td>
        </tr>
      </table>

      <bpmTask
        v-if="form.processInstanceId"
        :id="form.processInstanceId"
        :businessId="form.id"
      ></bpmTask>

      <!-- 选择生产工单 -->
      <selectWorkOrder
        ref="selectWorkOrderRef"
        :where="workOrderWhere"
        :autoClose="false"
        @confirm="selectWorkOrderConfirm"
      ></selectWorkOrder>

      <!-- 选择用户 -->
      <SelectUser
        ref="SelectUserRef"
        v-model="showSelectUser"
        @selectUserFinished="selectUserFinished"
      ></SelectUser>
    </el-form>

    <template v-slot:footer>
      <el-button
        v-if="type != 'detail'"
        type="primary"
        @click="submit"
        :loading="butLoading"
        >提 交</el-button
      >
      <el-button
        v-if="type != 'detail'"
        type="primary"
        @click="submit('save')"
        :loading="butLoading"
        >保存</el-button
      >
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import selectWorkOrder from './selectWorkOrder.vue';
  import { checklisttemplateGetById } from '@/api/checklisttemplate/index';
  import SelectUser from '@/components/select/SelectUser/index.vue';
  import {
    checklistrecordSave,
    checklistrecordGetById,
    checklistrecordUpdate,
    checklistrecordKitCheck
  } from '@/api/checklistrecord/index';
  import bpmTask from '@/components/bpmTask/bpmTask.vue';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';

  export default {
    mixins: [dictMixins],
    components: { selectWorkOrder, SelectUser, bpmTask, bpmDetail },
    data() {
      const formBaseData = {
        id: null,
        approvalStatus: null,
        checklistType: 0,
        code: '',
        createUserName: '',
        details: [],
        name: '',
        orders: [],
        processInstanceId: '',
        qualityCheckTime: '',
        qualityCheckUserId: null,
        qualityCheckUserName: '',
        qualityConclution: null,
        templateId: 0,
        templateName: '',
        workCheckTime: '',
        workCheckUserId: null,
        workCheckUserName: '',
        workConclution: null
      };

      return {
        visible: false,
        title: '放行申请单',
        formBaseData,
        form: JSON.parse(JSON.stringify(formBaseData)),
        rules: {
          name: [
            { required: true, message: '请输入放行单名称', trigger: 'blur' },
            { required: true, message: '请输入放行单名称', trigger: 'change' }
          ]
        },
        // 类型 add / edit / detail
        type: '',
        // 生产工单查询条件
        workOrderWhere: {
          statusList: ['6'],
          queryTermination: 0
        },
        loading: false,
        butLoading: false,
        tabOptions: [
          { key: 'main', name: '放行单详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        // 当前选项
        activeComp: 'main',
        showSelectUser: false,
        // 0 生产验收人 1 质检验收人
        selectUserType: 0
      };
    },
    watch: {
      'form.details': {
        handler(details) {
          console.log('details', details);
          // 区分生产放行规则 质检放行规则
          // 根据 审核结果修改 结论
          const scDetails = details.filter((item) => item.checkType == 1);
          const zjDetails = details.filter((item) => item.checkType == 2);

          // 当workConclution全为1 则为1 否则为0
          if (scDetails.length > 0) {
            const allPass = scDetails
              .map((item) => item.isPass)
              .every((val) => val === 1);
            this.form.workConclution = allPass ? 1 : 0;
          } else {
            this.form.workConclution = null;
          }

          if (zjDetails.length > 0) {
            const allPass = zjDetails
              .map((item) => item.isPass)
              .every((val) => val == 1);
            this.form.qualityConclution = allPass ? 1 : 0;
          } else {
            this.form.qualityConclution = null;
          }
        },
        deep: true
      }
    },
    computed: {
      ordersColumns() {
        return [
          {
            width: 55,
            type: 'index',
            columnKey: 'index',
            label: '序号',
            align: 'center'
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'workOrderCode',
            label: '生产工单号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'formingNum',
            label: '要求生产数量',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'formedNum',
            label: '实际生产数量',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'productModel',
            label: '型号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            slot: 'action',
            minWidth: 120
          }
        ];
      },
      // 生产放行规则
      scDetails() {
        return this.form.details.filter((item) => item.checkType == 1);
      },
      // 质检放行规则
      zjDetails() {
        return this.form.details.filter((item) => item.checkType == 2);
      },
      detailsColumns() {
        return [
          {
            width: 55,
            type: 'index',
            columnKey: 'index',
            label: '序号',
            align: 'center'
          },
          {
            prop: 'mainIndicatorName',
            label: '指标名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'isPass',
            label: '审核结果',
            align: 'center',
            slot: 'isPass',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'remark',
            label: '备注',
            align: 'center',
            slot: 'remark',
            minWidth: 110,
            showOverflowTooltip: true
          }
        ];
      }
    },
    methods: {
      // 外部调用，打开弹窗
      open(type, data) {
        console.log('data ， type', data, type);
        this.type = type;
        if (type == 'add') {
          this.title = '放行申请单';
          // 生产放心单名称 = 模版名称+年月日+3位数
          this.form.name = `${data.templateName}${new Date()
            .toLocaleDateString()
            .replace(/\//g, '')}${String(
            Math.floor(Math.random() * 1000)
          ).padStart(3, '0')}`;

          this.form.templateId = data.templateId;
          this.form.templateName = data.templateName;

          // 处理携带的生产工单
          if (data.workOrderList && data.workOrderList.length) {
            this.selectWorkOrderConfirm(data.workOrderList);
          }

          // 根据模版id 查询模版详情
          this.getTemplateDetails(data.templateId);
        } else if (type == 'edit') {
          this.title = '放行申请单';
          this.getCheckDetails(data.id);
        } else if (type == 'detail') {
          this.title = '放行单详情';
          this.getCheckDetails(data.id);
        } else {
          this.title = '审批';
        }
        this.visible = true;
      },
      // 关闭时清理表单
      handleClose() {
        this.form = JSON.parse(JSON.stringify(this.formBaseData));
        this.activeComp = 'main';
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
          this.visible = false;
        });
      },
      // 提交
      submit(type) {
        console.log('this.form', this.form);
        this.$refs.formRef.validate(async (valid, invalidFields) => {
          if (valid) {
            // 必须要有物品清单
            if (this.form.orders.length == 0) {
              this.$message.warning('请添加物品清单');
              return;
            }

            this.butLoading = true;
            try {
              if (type == 'save') {
                // 存在id 则更新
                if (this.form.id) {
                  await checklistrecordUpdate(this.form);
                } else {
                  this.form.createUserName = this.$store.state.user.info.name;
                  const data = await checklistrecordSave(this.form);
                  this.form.id = data;
                  this.getCheckDetails(data);
                }
              } else {
              }
              this.$message.success('操作成功');
              this.butLoading = false;
              this.$emit('reload');
            } catch (error) {
              this.butLoading = false;
            }

            if (type != 'save') {
              this.handleClose();
            }
          } else {
            // 转换为数组
            const firstErrorField = Object.values(invalidFields);
            if (firstErrorField.length > 0) {
              this.$message.warning(firstErrorField[0][0].message);
            }

            return false;
          }
        });
      },
      // 选择生产工单
      openAddModel() {
        this.$refs.selectWorkOrderRef?.open();
      },
      // 选择生产工单确认
      selectWorkOrderConfirm(selection) {
        const selectList = selection.map((i) => {
          return {
            batchNo: i.batchNo,
            createUserName: i.createUserName,
            formingNum: i.formingNum,
            produceRoutingId: i.produceRoutingId,
            produceRoutingName: i.produceRoutingName,
            productCode: i.productCode,
            productModel: i.productModel,
            productName: i.productName,
            recordId: i.recordId,
            specification: i.specification,
            workOrderCode: i.code,
            workOrderId: i.id
          };
        });

        console.log('selectList', selectList);
        // 判断是否同一产品 同一批次
        if (selectList.length != 0) {
          const productCode = selectList[0].productCode;
          const batchNo = selectList[0].batchNo;
          const isSame = selectList.every(
            (item) =>
              item.productCode === productCode && item.batchNo === batchNo
          );

          const isSameOrders = this.form.orders.every(
            (item) =>
              item.productCode === productCode && item.batchNo === batchNo
          );

          if (!isSame || !isSameOrders) {
            this.$message.warning('请选择同产品同批次号工单发起批量放行');
            return;
          }

          // 去重
          const existingWorkOrderIds = this.form.orders.map(
            (order) => order.workOrderId
          );
          const newOrders = selectList.filter(
            (item) => !existingWorkOrderIds.includes(item.workOrderId)
          );
          this.form.orders = [...this.form.orders, ...newOrders];
        }
        // 关闭弹窗
        this.$refs.selectWorkOrderRef?.handleClose();
      },
      // 删除行
      deleteRow(row) {
        this.form.orders = this.form.orders.filter(
          (item) => item.workOrderId !== row.workOrderId
        );
      },
      // 获取模板详情
      async getTemplateDetails(id) {
        this.loading = true;
        try {
          const data = await checklisttemplateGetById(id);
          console.log('模板详情', data);
          // 详情
          this.form.details = data.details;

          this.loading = false;

          this.setDefaultValue();
        } catch (error) {
          this.loading = false;
        }
      },
      // 获取放行单详情
      async getCheckDetails(id) {
        this.loading = true;
        try {
          const data = await checklistrecordGetById(id);
          this.$util.assignObject(this.form, data);
          console.log('this.form', this.form);
          if (this.type == 'edit' || this.type == 'add') {
            this.setDefaultValue();
          }
          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      },
      // 设置默认值
      setDefaultValue() {
        // 编辑时 设置默认值
        if (!this.form.qualityCheckUserId) {
          // 设置为当前用户
          this.form.qualityCheckUserId = this.$store.state.user.info.id;
          this.form.qualityCheckUserName = this.$store.state.user.info.name;
        }

        if (!this.form.workCheckUserId) {
          // 设置为当前用户
          this.form.workCheckUserId = this.$store.state.user.info.id;
          this.form.workCheckUserName = this.$store.state.user.info.name;
        }

        if (!this.form.qualityCheckTime) {
          this.form.qualityCheckTime = this.$util.toDateString(
            new Date(),
            'yyyy-MM-dd HH:mm:ss'
          );
        }

        if (!this.form.workCheckTime) {
          this.form.workCheckTime = this.$util.toDateString(
            new Date(),
            'yyyy-MM-dd HH:mm:ss'
          );
        }
      },
      // 规则齐套检查
      async getKitCheck() {
        // 判断 是否有需要自动检查的项
        const hasAutoCheck = this.form.details.some((item) => item.isAutoCheck);

        if (!hasAutoCheck) {
          console.log('this.form.details', this.form.details);
          this.$message.warning('当前没有需要自动检查的规则');
          return;
        }

        // 必须要有物品清单
        if (this.form.orders.length == 0) {
          this.$message.warning('请添加物品清单');
          return;
        }

        if (!this.form.id) {
          this.$message.warning('请先保存放行单');
          return;
        }

        try {
          this.butLoading = true;
          const data = await checklistrecordKitCheck(this.form.id);
          console.log('规则齐套检查', data);

          // 把检查结果赋值给对应的明细
          this.form.details = this.form.details.map((item) => {
            const checkItem = data.find((d) => d.id === item.id);
            console.log('checkItem 存在', checkItem);
            if (checkItem && item.isAutoCheck) {
              return {
                ...item,
                isPass: checkItem.isPass
              };
            }
            return item;
          });

          console.log('规则齐套检查', this.form.details);

          this.butLoading = false;
          this.$message.success('规则齐套检查完成!');
        } catch (error) {
          this.butLoading = false;
        }
      },
      // 打开选择用户
      openSelectUser(type) {
        this.selectUserType = type;
        this.showSelectUser = true;
      },
      selectUserFinished(userInfo) {
        console.log('userInfo', userInfo);
        console.log('this.selectUserType', this.selectUserType);
        if (this.selectUserType == 0) {
          this.form.workCheckUserId = userInfo.id;
          this.form.workCheckUserName = userInfo.name;
        } else {
          this.form.qualityCheckUserId = userInfo.id;
          this.form.qualityCheckUserName = userInfo.name;
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .detail-table {
    border: 1px solid #ebeef5;
    // 实线边框
    border-collapse: collapse;

    td {
      border: none;
      padding: 10px 15px;
      border: 1px solid #ebeef5;

      &:first-child {
        font-weight: 600;
        background: #f5f7fa;
        width: 130px;
        text-align: center;
      }
    }
  }

  .mask-box {
    position: relative;
    &::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0);
      cursor: pointer;
    }
  }
</style>