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" />
        </el-form-item>
      </el-col>
    </el-row>
    <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="btnType == 'detail'" 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="btnType == 'detail'" 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 type="number" v-model="form.qualificationRate" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="不合格率:" prop="noQualificationRate">
          <el-input type="number" v-model="form.noQualificationRate" />
        </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'
        }">
          <el-input type="number" v-model="form.sampleNumber" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="检验方式:" prop="qualityMode">
          <DictSelection dictName="取样类型" v-model="form.qualityMode" disabled></DictSelection>
        </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 == 'detail' || 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 == 'detail' || 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" />
        </el-form-item>
      </el-col>
    </el-row>
    <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';

export default {
  components: {
    EquipmentDialog,
    ProductionVersion,
    deptSelect,
    fileUpload
  },
  props: {
    form: {
      type: Object,
      default: () => { }
    },
    btnType: {
      type: String,
      default: ''
    }
  },
  watch: {
  },
  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: []
    };
  },
  methods: {
    // 打开工艺路线弹窗
    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;
      }
    },
  }
};
</script>
<style lang="scss" scoped></style>