kd-aiot-frontend-wt/src/views/bpm/handleTask/components/mesWorkOrderChecklist/detailDialog.vue

<template>
  <div style="margin-top: 10px; padding: 0 20px">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      disabled
    >
      <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="物品清单"> </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
          >
        </template>
      </ele-pro-table>

      <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>
            <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>
    </el-form>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { checklisttemplateGetById } from '@/api/checklisttemplate/index';
  import { checklistrecordGetById } from '@/api/checklistrecord/index';

  export default {
    mixins: [dictMixins],
    components: {},
    props: {
      // 业务id
      businessId: {
        default: ''
      }
    },
    mounted() {
      console.log('this.businessId', this.businessId);
      this.getCheckDetails(this.businessId);
    },
    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']
        },
        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: '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: {
      // 获取放行单详情
      async getCheckDetails(id) {
        this.loading = true;
        try {
          const data = await checklistrecordGetById(id);
          this.$util.assignObject(this.form, data);
          console.log('this.form', this.form);
          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      }
    }
  };
</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>