kd-aiot-frontend-qms/src/views/inspectionWork/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" class="tabs_box">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="基本信息" name="1">
          <el-form ref="form1" :model="form" label-width="94px">
            <!-- <el-col
                :span="item.span"
                v-for="(item, index) in infoList"
                :key="index"
              >
                <el-form-item :label="`${item.label}:`">
                  <el-input :value="form[item.prop]" disabled />
                </el-form-item>
              </el-col> -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="编码">
                  <el-input :value="form.code" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="产品名称">
                  <el-input :value="form.productName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="产品编码">
                  <el-input :value="form.productCode" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="批次号">
                  <el-input :value="form.batchNo" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="型号">
                  <el-input :value="form.modelType" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="牌号">
                  <el-input :value="form.brandNo" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="计量类型">
                  <el-input :value="form.inspectionStandardsName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="质检部门">
                  <el-input :value="form.groupName" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="质检人">
                  <el-input :value="qualityName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="质检时间">
                  <el-input :value="qualityTime" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工时(h)">
                  <el-input :value="form.hours" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合格率">
                  <el-input :value="form.qualificationRate" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="不合格率">
                  <el-input :value="form.noQualificationRate" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检验方式">
                  <el-input :value="form.qualityModeName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="质检结果">
                  <el-input :value="form.qualityResultsName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="总重量">
                  <el-input :value="form.totalWeight" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="总数量">
                  <el-input :value="form.total" disabled />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="样品数">
                  <el-input :value="form.sampleQuantity" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合格数">
                  <el-input :value="form.qualifiedNumber" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="不合格数">
                  <el-input :value="form.noQualifiedNumber" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="规格">
                  <el-input :value="form.specification" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6" v-for="el in disposeTypeList" :key="el.id">
                <el-form-item :label="disposalName(el.disposeType)">
                  <el-input :value="el.measureQuantity" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注">
                  <el-input :value="form.remark" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附件信息">
                  <el-link @click="openFileModal" type="primary"
                    >查看附件信息<i class="el-icon-view el-icon--right"></i>
                  </el-link>

                  <fileMain ref="fileMainRef" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="样品信息" name="2">
          <el-form label-width="110px">
            <el-row>
              <el-col :span="6" v-if="showArrange == '1'">
                <el-form-item label="样品合格数:">
                  <el-input
                    disabled
                    v-model="form.sampleQualifiedNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="showArrange == '1'">
                <el-form-item label="样品不合格数:">
                  <el-input
                    disabled
                    v-model="form.sampleNoQualifiedNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品合格率:">
                  <el-input v-model="form.sampleQualificationRate" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品不合格率:">
                  <el-input v-model="form.sampleNoQualificationRate" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="样品类型:">
                  <el-input
                    disabled
                    :value="sampletypeVal(form.conditionType)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品数量:">
                  <el-input disabled v-model="form.sampleQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品重量:">
                  <el-input disabled v-model="form.sampleWeight" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="质检内容" name="3">
          <el-tabs v-model="inspectionName">
            <el-tab-pane label="来源清单" name="1">
              <ele-pro-table
                :columns="tableColumns1"
                :datasource="sourceData1"
                :initLoad="false"
                :needPage="false"
                :toolkit="[]"
                height="calc(100vh - 330px)"
              >
              </ele-pro-table>
            </el-tab-pane>
            <el-tab-pane label="样品清单" name="2">
              <ele-pro-table
                :columns="tableColumns2"
                :datasource="sourceData2"
                :initLoad="false"
                :needPage="false"
                :toolkit="[]"
                height="calc(100vh - 330px)"
              >
              </ele-pro-table
            ></el-tab-pane>
            <el-tab-pane label="质检方案" name="3">
              <ele-pro-table
                :columns="tableColumns3"
                :datasource="sourceData3"
                :initLoad="false"
                :needPage="false"
                :toolkit="[]"
                height="calc(100vh - 330px)"
              >
              </ele-pro-table
            ></el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane
          label="样品处置"
          name="4"
          v-show="form.status == 1 && activeName == '4'"
        >
          <ele-pro-table
            :columns="tableColumns4"
            :datasource="sourceData4"
            :initLoad="false"
            :needPage="false"
            :toolkit="[]"
            height="calc(100vh - 260px)"
          >
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="不良品处置" name="5">
          <ele-pro-table
            :columns="tableColumns5"
            :datasource="sourceData5"
            :initLoad="false"
            :needPage="false"
            :toolkit="[]"
            height="calc(100vh - 260px)"
          >
          </ele-pro-table>
        </el-tab-pane>
      </el-tabs>
      <el-button class="go_back" @click="goBack">返回</el-button>
    </el-card>
  </div>
</template>

<script>
  import { getDetailById } from '@/api/inspectionWork/index';
  import { planDetails } from '@/api/inspectionPlan/index';
  import { getByCode } from '@/api/system/dictionary-data';
  import detailMixins from './mixins/detailMixins';
  import { parameterGetByCode } from '@/api/main/index';
  import { getUserPage } from '@/api/system/organization';
  import fileMain from '@/components/addDoc/main.vue';

  export default {
    mixins: [detailMixins],
    components: { fileMain },
    data() {
      return {
        activeName: '1',
        inspectionName: '1',
        sourceData1: [],
        sourceData2: [],
        sourceData3: [],
        sourceData4: [],
        sourceData5: [],
        disposeTypeList: [],
        form: {},
        showArrange: '0',
        executorList: [],
        // 文件
        accessory: []
      };
    },
    computed: {
      sampletypeVal() {
        return (row) => {
          if (row == 1) return '整样';
          if (row == 2) return '小样';
          return '';
        };
      },
      disposalName() {
        return (type) => {
          return this.disposeTypeMap[type] || '';
        };
      },
      qualityName() {
        const list = this.form.qualityWorkOrderDetailVO
        return list.qualityName || '';
      },
      qualityTime() {
        const list = this.form.qualityWorkOrderDetailVO
        return list.qualityTime || '';
      }
    },
    created() {
      this.getData();
      // 是否展示合格不合格
      this.getCode();
    },
    methods: {
      getCode() {
        parameterGetByCode({
          code: 'qms_show_arrange'
        }).then((res) => {
          if (res) {
            this.showArrange = res.value || '1';
            // this.time_calc_code = res.value || '0';
          }
        });
      },

      async getUserList(params) {
        if (!params.groupId) return;
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          console.log(res, 'resres');
          this.executorList = res.list;
        } catch (error) {}
      },

      async getData() {
        let id = this.$route.query.id;
        let name = this.$route.query.name;
        try {
          const api = name == '计划' ? planDetails : getDetailById;
          const result = await api(id);
          console.log(result, 'result');
          await this.getUserList({ groupId: result.data.groupId });
          const res = result.data;
          console.log('res~~~~', res.qualityWorkOrderDetailVO);
          const qualityName = [];
          if (res.qualityId && this.executorList.length != 0) {
            res.qualityId.split(',').forEach((item) => {
              this.executorList.forEach((el) => {
                if (el.id == item) {
                  qualityName.push(el.name);
                }
              });
            });
          }
          if (qualityName.length != 0) {
            res.qualityName = qualityName.join(',');
          }
          let obj = {};
          this.infoList.map((item) => {
            obj[item.prop] = res[item.prop];
          });
          this.form = obj;
          this.form.status = res.status;
          this.form.qualityWorkOrderDetailVO = res.qualityWorkOrderDetailVO;
          this.accessory = res.accessory;
          console.log(result, 'result');
          if (name == '计划') {
            this.form.total = result.data.productNumber || 0;
          }
          this.fieldAssign(res, obj);
          this.sampleInfo(res);
          console.log('this.form~~~~', this.form);
        } catch (err) {
          console.log(err, 'err');
        }
      },
      sampleInfo(res) {
        this.$set(
          this.form,
          'sampleQualifiedNumber',
          res.sampleQualifiedNumber
        );
        this.$set(
          this.form,
          'sampleNoQualifiedNumber',
          res.sampleNoQualifiedNumber
        );
        this.$set(
          this.form,
          'sampleQualificationRate',
          res.sampleQualificationRate
        );
        this.$set(
          this.form,
          'sampleNoQualificationRate',
          res.sampleNoQualificationRate
        );
        this.$set(this.form, 'conditionType', res.conditionType);
        this.$set(this.form, 'sampleQuantity', res.sampleQuantity);
        this.$set(this.form, 'sampleWeight', res.sampleWeight);
        this.$set(this.form, 'qualifiedNumber', res.qualifiedNumber);
        this.$set(this.form, 'noQualifiedNumber', res.sampleNoQualifiedNumber);
        this.$set(this.form, 'remark', res.remark);
        this.sourceData3 = res.templateList || [];
        this.sourceData1 = res.qualityInventoryList || [];
        let name = this.$route.query.name;
        // const result = name == '计划' ? res.qualityWorkOrderDetailVO : res;
        let result = {};
        if (name == '计划') {
          this.sourceData4 = res.sampleList || [];
          this.sourceData2 = res.sampleList || [];
          result = res.qualityWorkOrderDetailVO
            ? res.qualityWorkOrderDetailVO
            : {};
        } else {
          result = res;
          this.sourceData4 = res.qualitySampleList || [];
          this.sourceData2 = res.qualitySampleList || [];
        }
        this.sourceData5 = result.unqualifiedDetail || [];
        this.disposeTypeList = result.disposeTypeList || [];
      },
      async fieldAssign(res, obj) {
        if (res.qualityMode == 1) {
          obj.qualityModeName = '全检';
        } else if (res.qualityMode == 2) {
          obj.qualityModeName = '抽检';
        } else {
          obj.qualityModeName = '';
        }
        if (res.qualityResults == 1) {
          obj.qualityResultsName = '合格';
        } else if (res.qualityResults == 2) {
          obj.qualityResultsName = '不合格';
        } else {
          obj.qualityResultsName = '';
        }
        let val = res.inspectionStandards;
        obj.inspectionStandardsName = await this.getDictListIqoCode(val);
      },
      async getDictListIqoCode(value) {
        let { data: res } = await getByCode('measurement_type');
        if (value > 0) {
          return res[value - 1][value];
        }
        return '';
      },
      goBack() {
        let path = this.$route.query.path || '';
        console.log(path, 'path');
        if (path) {
          this.$router.push({ path: path });
        } else {
          this.$router.go(-1);
        }
      },
      openFileModal() {
        this.$refs.fileMainRef.open(this.accessory, 'view');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    width: 100%;
    height: calc(100% - 32px);
    box-sizing: border-box;

    .el-card {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .el-tabs__content {
    margin-top: 16px;
  }

  .tabs_box {
    position: relative;

    .go_back {
      position: absolute;
      right: 25px;
      top: 19px;
      z-index: 99;
    }
  }
</style>