kd-aiot-frontend-qms/src/views/inspectionWork/components/baseInfo.vue

<template>
  <el-form ref="form1" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="6">
        <el-form-item label="编码:">
          <el-input :maxlength="20" v-model="form.code" disabled placeholder="请输入" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="6">
        <el-form-item label="质检类型:" prop="qualityType">
          <DictSelection
            dictName="质检计划类型"
            v-model="form.qualityType"
            :disabled="btnType == 'detail'"
          ></DictSelection>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="质检方式:" prop="qualityMode">
          <DictSelection
            dictName="取样类型"
            v-model="form.qualityMode"
            clearable
            :disabled="btnType == 'detail'"
          ></DictSelection>
        </el-form-item>
      </el-col> -->
      <el-col :span="6">
        <el-form-item label="产品名称:" prop="productName">
          <el-input v-model="form.productName" @click.native="addProduct" readonly placeholder="请选择" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="产品编码:" prop="productCode">
          <el-input v-model="form.productCode" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="批次号:" prop=" batchNo">
          <el-input v-model="form.batchNo" disabled />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="规格:" prop="specification">
          <el-input v-model="form.specification" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="型号:" prop="modelType">
          <el-input v-model="form.modelType" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="牌号:" prop="brandNo">
          <el-input v-model="form.brandNo" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="总数量:" prop="total">
          <el-input type="number" v-model="form.total" @input="inputTotal" disabled />
        </el-form-item>
      </el-col>
    </el-row>
    <div style="text-align: right;margin-bottom: 22px;">
      <div @click="toggleExpand">
        <div v-if="isExpanded"><i class="el-icon-arrow-up"></i>收起</div>
        <div v-if="!isExpanded"><i class="el-icon-arrow-down"></i>展开更多</div>
      </div>
    </div>
    <div v-if="isExpanded">
      <el-row>
        <el-col :span="6">
          <el-form-item label="工艺路线:">
            <el-input @click.native="openVersion" clearable v-model="form.produceRoutingName"
              :disabled="btnType == 'detail'" placeholder="请选择" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序:">
            <el-select style="width: 100%" v-model="form.produceTaskId" placeholder="请选择" clearable
              @change="produceTaskChange" :disabled="btnType == 'detail'">
              <el-option v-for="item in produceTaskList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合格数:" prop="qualifiedNumber">
            <el-input v-model="form.qualifiedNumber" disabled placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="不合格数:" prop="noQualifiedNumber">
            <el-input v-model="form.noQualifiedNumber" disabled placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="质检部门" prop="groupId">
            <deptSelect :disabled="btnType == 'detail'" v-model="form.groupId" @changeGroup="searchDeptNodeClick" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="质检人" prop="qualityId">
            <el-select :disabled="btnType == 'detail'" v-model="form.qualityId" @change="changeExecutor" size="small"
              style="width: 100%" filterable>
              <el-option v-for="item in executorList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="质检时间:" prop="qualityTime">
            <el-date-picker class="w100" v-model="form.qualityTime" type="date" value-format="yyyy-MM-dd"
              :disabled="btnType == 'detail'" placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工时(h):" prop="hours">
            <el-input v-model="form.hours" :disabled="btnType == 'detail'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="合格率:" prop="qualificationRate">
            <el-input v-model="form.qualificationRate" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="不合格率:" prop="noQualificationRate">
            <el-input v-model="form.noQualificationRate" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总重量:" prop="totalWeight">
            <el-input type="number" v-model="form.totalWeight" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="取样数量:" prop="sampleNumber" :rules="{
            required: form.qualityMode == 2 ? true : false,
            message: '请输入取样数量',
            trigger: 'blur'
          }" v-if="form.qualityMode == 2">
            <el-input type="number"
              :disabled="form.qualityMode == 1 || (form.qualityMode == 2 && form.sampleNumber) ? true : false"
              v-model="form.sampleNumber" @change="handleChangeNumber" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="检验标准" prop="inspectionStandards">
            <!-- 计量 计重 -->
            <el-select style="width: 100%" v-model="form.inspectionStandards" placeholder="请选择"
              :disabled="parseInt(qualityType1) == 1">
              <el-option v-for="item in inspectionStandardsList" :label="item.label" :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检验方式:" prop="qualityMode">
            <!-- <DictSelection dictName="取样类型" v-model="form.qualityMode" :disabled="qualityType == 1"></DictSelection> -->
            <el-select style="width: 100%" v-model="form.qualityMode" placeholder="请选择"
              :disabled="parseInt(qualityType1) == 1">
              <el-option v-for="item in qualityModeList" :label="item.label" :value="item.value" :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="质检结果:" prop="qualityResults">
            <el-select v-model="form.qualityResults" placeholder="请选择" style="width: 100%"
              :disabled="btnType == 'issued'" clearable>
              <el-option label="合格" :value=1 />
              <el-option label="不合格" :value=2 />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入" :disabled="btnType == 'issued'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="附件:" prop="imgUrl">
            <fileUpload v-model="form.imgUrl" :type="btnType == 'detail' ? 'view' : ''" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <ProductionVersion ref="versionRefs" @changeProduct="changeProduct" />
    <EquipmentDialog ref="equipmentRefs" @choose="choose" />
  </el-form>
</template>
<script>
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import fileUpload from '@/components/addDoc/index.vue';

import ProductionVersion from './ProductionVersion.vue';
import EquipmentDialog from './EquipmentDialog.vue';
//接口
import { getUserPage } from '@/api/system/organization';

import { getProduceTaskList } from '@/api/aps';
import { getByCode } from "@/api/system/dictionary-data";

export default {
  components: {
    EquipmentDialog,
    ProductionVersion,
    deptSelect,
    fileUpload
  },
  props: {
    form: {
      type: Object,
      default: () => { }
    },
    btnType: {
      type: String,
      default: ''
    },
    qualityType1: {
      type: String,
      default: ''
    }
  },
  watch: {
    'form.qualityMode': {
      handler(newVal) {
        if (newVal) {
          this.$emit('changeModel', newVal);
        } else {
          console.log('清空样品清单');
          // this.$emit('table2');
        }
      },
      immediate: false
    },
  },
  data() {
    return {
      executorList: [],
      sourceList: [],
      rules: {
        productName: [
          { required: true, message: '请选择产品', trigger: 'change' }
        ],
        qualifiedNumber: [
          { required: true, message: '请输入合格数', trigger: 'blur' }
        ],
        noQualifiedNumber: [
          { required: true, message: '请输入不合格数', trigger: 'blur' }
        ],
        qualityTime: [
          { required: true, message: '请选择质检时间', trigger: 'blur' }
        ],
        groupId: [
          { required: true, message: '请选择质检部门', trigger: 'change' }
        ],
        qualityId: [
          { required: true, message: '请选择质检人', trigger: 'change' }
        ],
        qualityResults: [
          { required: true, message: '请选择质检状态', trigger: 'change' }
        ]
      },
      produceTaskList: [],
      inspectionStandardsList: [],
      qualityModeList: [],
      isExpanded: false

    };
  },
  created() {
    this.getDictListIqoCode('iqo_code');
    this.getQualityModeList('quality_method_code');
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
    async getDictListIqoCode(code) {
      let { data: res } = await getByCode(code);
      this.inspectionStandardsList = res.map((item) => {
        let values = Object.keys(item);
        return {
          value: Number(values[0]),
          label: item[values[0]]
        };
      });
    },
    async getQualityModeList(code) {
      let { data: res } = await getByCode(code);
      this.qualityModeList = res.map((item) => {
        let values = Object.keys(item);
        return {
          value: Number(values[0]),
          label: item[values[0]]
        };
      });
    },
    // 打开工艺路线弹窗
    openVersion() {
      this.$refs.versionRefs.open();
    },
    //工艺路线回调
    changeProduct(data) {
      this.form.produceRoutingId = data.id;
      this.form.produceRoutingName = data.name;
      this.form.produceTaskId = '';
      this.form.produceTaskName = '';
      this.getTaskList();
    },
    // 获取工序数据
    async getTaskList() {
      if (!this.form.produceRoutingId) {
        return;
      }
      const res = await getProduceTaskList({
        isDetail: true,
        pageNum: 1,
        routingId: this.form.produceRoutingId,
        size: -1
      });
      this.produceTaskList = res?.list;
    },
    // 选择工序
    produceTaskChange() {
      if (!this.form.produceTaskId) {
        return;
      }
      this.form.produceTaskName = this.produceTaskList.find(
        (item) => item.id == this.form.produceTaskId
      ).name;
    },
    // 产品名称
    addProduct() {
      this.$refs.equipmentRefs.open();
    },
    choose(data) {
      this.form.productCode = data[0].code;
      this.form.productName = data[0].name;
      this.form.specification = data[0].specification;
      this.form.modelType = data[0].modelType;
      this.form.brandNo = data[0].brandNum;
    },

    //选择部门(搜索)
    searchDeptNodeClick(info, row) {
      if (info) {
        const params = { groupId: info };
        this.getUserList(params);
        this.form.groupName = row.name;
      } else {
        this.form.executeGroupId = null;
      }
    },
    // 获取人员
    async getUserList(params) {
      try {
        let data = { pageNum: 1, size: -1 };
        // 如果传了参数就是获取巡点检人员数据
        if (params) {
          data = Object.assign(data, params);
        }
        const res = await getUserPage(data);
        this.executorList = res.list;
      } catch (error) { }
    },
    // 人员选择
    changeExecutor(val) {
      if (val) {
        this.form.executeId = val;
        this.form.executeName = this.executorList.filter(
          (item) => item.id === val
        )[0].name;
      }
    },
    inputTotal(val) {
      if (val) {
        this.form.total = val;
        this.form.qualifiedNumber = val;
      }
    },
    handleChangeNumber(val) {
      this.form.sampleNumber = val;
      console.log(val);
      this.$emit('changeNumber', val);
    },
  }
};
</script>
<style lang="scss" scoped></style>