kd-aiot-frontend-qms/src/views/inspectionPlan/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="编码:" prop="code">
          <el-input clearable v-model="form.code" placeholder="请输入" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="名称:" prop="name">
          <el-input clearable v-model="form.name" placeholder="请输入"
            :disabled="btnType == 'detail' || btnType == 'issued'" />
        </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' || btnType == 'issued'"></DictSelection>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <!--        <el-form-item label="检验标准:" prop="inspectionStandards">-->
        <!--          <el-select v-model="form.inspectionStandards" placeholder="请选择" style="width: 100%" clearable></el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="检验标准" prop="inspectionStandards">
          <!-- 计量 计重 -->
          <el-select style="width: 100%" v-model="form.inspectionStandards" placeholder="请选择">
            <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-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="自动派单:" prop="autoOrder">
          <el-select v-model="form.autoOrder" placeholder="请选择" style="width: 100%"
            :disabled="btnType == 'detail' || btnType == 'issued'" clearable>
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
      </el-col>
      <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="executeId">
          <el-select :disabled="btnType == 'detail'" v-model="form.executeId" @change="changeExecutor" filterable
            style="width: 100%">
            <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="planStartTime">
          <el-date-picker :disabled="btnType == 'detail'" class="w100" v-model="form.planStartTime" type="date"
            value-format="yyyy-MM-dd" placeholder="请输入"></el-date-picker>
        </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="结束时间:" prop="planEndTime">
            <el-date-picker :disabled="btnType == 'detail'" class="w100" v-model="form.planEndTime" type="date"
              value-format="yyyy-MM-dd" placeholder="请输入"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型:" prop="type">
            <DictSelection dictName="质检计划类型" v-model="form.type" clearable @change="typeChange"
              :disabled="btnType == 'detail' || btnType == 'issued'"></DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划来源:" prop="planSource">
            <el-select v-model="form.planSource" placeholder="请选择" style="width: 100%" clearable
              @change="planSourceChange" :disabled="btnType == 'detail' || btnType == 'issued'">
              <el-option :label="item.label" v-for="item in sourceList" :key="item.value" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来源编码:" prop="planSourceCode">
            <el-input v-model="form.planSourceCode" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="名称:" prop=" productName">
            <el-input v-model="form.productName" disabled />
          </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-col :span="6">
          <el-form-item label="规格:" prop=" specification">
            <el-input v-model="form.specification" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <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=" productNumber">
            <el-input type="number" v-model="form.productNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序:" prop=" produceTaskName">
            <el-input v-model="form.produceTaskName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="合格品数量:" prop=" qualifiedNumber">
            <el-input type="number" v-model="form.qualifiedNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="不合格品数量:" prop=" unqualifiedNumber">
            <el-input type="number" v-model="form.unqualifiedNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合格率:" prop="qualificationRate">
            <el-input type="number" v-model="form.qualificationRate"
              :disabled="btnType == 'detail' || btnType == 'issued'" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总重量:" prop="totalWeight">
            <el-input type="number" v-model="form.totalWeight" :disabled="btnType == 'detail' || btnType == 'issued'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" v-if="form.qualityMode == 2">
          <el-form-item label="取样数量:" prop="sampleNumber" :rules="{
            required: form.qualityMode == 2 ? true : false,
            message: '请输入取样数量',
            trigger: 'blur'
          }">
            <el-input type="number" v-model="form.sampleNumber" @change="handleChangeNumber"
              :disabled="btnType == 'detail' || btnType == 'issued'" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="抽样比例:" prop="sampleProportion">
            <el-input v-model="form.sampleProportion" :disabled="btnType == 'detail' || btnType == 'issued'">
              <template #append>%</template>
            </el-input>
          </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 == 'detail' || btnType == 'issued'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="附件:" prop="accessory">
            <fileUpload v-model="form.accessory" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <warehousing ref="warehousingRef" @choose="handleChoose" />
    <productionPlan ref="productionPlanRef" @choose="handleChoose" />
    <workOrder ref="workOrderRef" @choose="handleChoose" />
    <produceOrder ref="produceOrderRef" @choose="handleChoose" />
    <EquipmentDialog ref="equipmentRefs" @choose="handleChoose" :type="1" :treeIds="['9', '1']" />
  </el-form>
</template>
<script>
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import fileUpload from '@/components/addDoc/index.vue';

import warehousing from './warehousing';
import productionPlan from './productionPlan';
import workOrder from './workOrder';
import produceOrder from './produceOrder';
import EquipmentDialog from '@/views/inspectionWork/components/EquipmentDialog';

//接口
import { getUserPage } from '@/api/system/organization';
import { getByCode } from '@/api/system/dictionary-data';
import { rules } from 'eslint-config-prettier';

export default {
  components: {
    EquipmentDialog,
    produceOrder,
    workOrder,
    productionPlan,
    warehousing,
    deptSelect,
    fileUpload
  },
  props: {
    form: {
      type: Object,
      default: () => { }
    },
    btnType: {
      type: String,
      default: ''
    }
  },
  watch: {
    'form.qualityMode': {
      handler(newVal) {
        if (newVal) {
          this.$emit('changeModel', newVal);
        } else {
          console.log('清空样品清单');
          this.$emit('table2');
        }
      },
      immediate: false
    },
    // 'form.autoOrder': {
    //   handler(newVal) {
    //     if (!newVal) {
    //       this.form.groupId = '';
    //       this.form.groupName = '';
    //       this.form.executeId = '';
    //       this.form.executeName = '';
    //     }
    //   },
    //   immediate: false
    // },
    'form.type': {
      handler(newVal) {
        if (!newVal) {
          this.form.planSource = '';
          this.form.planSourceCode = '';
          this.form.productName = '';
          this.form.productCode = '';
          this.form.batchNo = '';
          this.form.specification = '';
          this.form.modelType = '';
          this.form.brandNo = '';
          this.form.productNumber = '';
          this.form.qualifiedNumber = '';
          this.form.unqualifiedNumber = '';
          this.form.qualificationRate = '';
          this.form.totalWeight = '';
          this.form.sampleNumber = '';
          this.sourceList = [];
          this.$emit('resetTable');
        }
      },
      immediate: false
    },
    'form.planSource': {
      handler(newVal) {
        if (!newVal) {
          this.form.planSource = '';
          this.form.planSourceCode = '';
          this.form.productName = '';
          this.form.productCode = '';
          this.form.batchNo = '';
          this.form.specification = '';
          this.form.modelType = '';
          this.form.brandNo = '';
          this.form.productNumber = '';
          this.form.qualifiedNumber = '';
          this.form.unqualifiedNumber = '';
          this.form.qualificationRate = '';
          this.form.totalWeight = '';
          this.form.sampleNumber = '';
          this.$emit('resetTable');
        }
      },
      immediate: false
    }
  },
  data() {
    return {
      executorList: [],
      sourceList: [],
      inspectionStandardsList: [],
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        qualityMode: [
          { required: true, message: '请选择检验方式', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        groupId: [
          { required: true, message: '请选择执行部门', trigger: 'blur' }
        ],
        executeId: [
          { required: true, message: '请选择执行人员:', trigger: 'blur' }
        ]
      },
      isExpanded: false // 控制展开/收起状态
    };
  },
  created() {
    this.getDictListIqoCode('iqo_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]]
        };
      });
    },
    //质检计划类型
    planChange(value) {
      if (value == 1) {
        this.sourceList = [{ label: '采购收货单', value: '1' }];
      } else if (value == 2) {
        this.sourceList = [
          { label: '生产计划', value: '2' },
          { label: '生产订单', value: '3' },
          { label: '生产工单', value: '4' }
        ];
      }
    },
    //选择部门(搜索)
    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;
      }
    },
    //计划来源选择
    planSourceChange(val) {
      if (val) {
        this.addProduct();
      }
    },
    addProduct() {
      if (this.form.planSource == 1) {
        this.$refs.warehousingRef.open();
      } else if (this.form.planSource == 2) {
        this.$refs.productionPlanRef.open();
      } else if (this.form.planSource == 3) {
        this.$refs.workOrderRef.open();
      } else if (this.form.planSource == 4) {
        this.$refs.produceOrderRef.open();
      } else {
        this.$refs.equipmentRefs.open();
      }
    },
    //   根据来源得到产品
    handleChoose(val) {
      if (!val) return;
      this.form.planSourceId = val.id;
      // this.form.planReceiveId = val.receiveId;

      this.form.planSourceCode = val.receiveNo;
      console.log(this.form.planSourceCode, 'this.form.planSourceCode')

      this.form.productName = val.productName;
      this.form.productCode = val.productCode;
      this.form.batchNo = val.batchNo;
      this.form.specification = val.specification;
      this.form.modelType = val.modelType;
      this.form.brandNo = val.brandNo;
      this.form.productNumber = val.totalCount;
      this.form.qualifiedNumber = val.qualifiedNumber;
      this.form.unqualifiedNumber = val.unqualifiedNumber;
      this.form.qualificationRate = val.qualificationRate;
      this.form.totalWeight = val.totalWeight;
      this.form.sampleNumber = val.sampleNumber;
      this.form.inspectionStandards = val.inspectionStandards;
      this.form.produceTaskName = val.produceTaskName;
      this.form.produceTaskId = val.produceTaskId;
      this.form.productId = val.productId;
      let receiveNo = val.receiveNo;
      let categoryCode = val.productCode;
      let categoryid = val.productId;
      let batchNo = val.batchNo;
      let productCategoryId = val.productCategoryId;
      let productCategoryName = val.productCategoryName;
      if (receiveNo && categoryCode && categoryid) {
        this.$emit('getList', receiveNo, categoryCode, productCategoryId, productCategoryName, categoryid, batchNo);
      }
    },

    handleChangeNumber(val) {
      this.form.sampleNumber = val;
      this.$emit('changeNumber', val);
    },
    typeChange(val) {
      if (val == 1) {
        this.sourceList = [{ label: '采购收货单', value: '1' }];
      } else if (val == 2) {
        this.sourceList = [
          { label: '生产计划', value: '2' },
          { label: '生产订单', value: '3' },
          { label: '生产工单', value: '4' }
        ];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item .el-form-item--medium .more {
  margin: 0 !important;
}
</style>