yudao-dev/src/views/quality/base/basicData/qualityInspectionBoxBtn/dialogForm.vue

<!--
    filename: dialogForm.vue
    author: liubin
    date: 2023-09-11 15:55:13
    description: DialogForm for equipmentBindSection only
-->

<template>
  <el-form ref="dataForm" :model="dataForm" label-width="120px" v-loading="formLoading" label-position="top">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="产线" prop="productionLineId"
          :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-select v-model="dataForm.productionLineId" placeholder="请选择产线" filterable
            @change="handleProductlineChange">
            <el-option v-for="opt in productionLineList" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="工段" prop="sectionId" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-select v-model="dataForm.sectionId" placeholder="请选择工段" filterable @change="$emit('update', dataForm)">
            <el-option v-for="opt in workshopSectionList" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="检测内容" prop="inspectionDetIdList"
          :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <div class="itemDet" v-for="item in inspectionDetList" :key="item.typeId" style="padding: 0 20px;">
            <div>{{ item.typeName}} </div>
            <!-- <div>{{ item.data }} </div> -->
            <div class="content">
              <el-checkbox-group v-model="dataForm.inspectionDetIdList" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="i in item.data" :key="i.content" :label="i.detId">{{ i.content }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="按钮盒识别码" prop="buttonId" :rules="[
        	{ required: true, message: '不能为空', trigger: 'blur' },
        	{
        		type: 'number',
        		message: '请输入整数',
        		trigger: 'blur',
        		transform: (val) => Number.isInteger(Number(val)) && Number(val),
        	},
        ]">
          <el-input v-model="dataForm.buttonId" @change="$emit('update', dataForm)" placeholder="请输入整数" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="按钮值" prop="keyValue" :rules="[
        	{ required: true, message: '不能为空', trigger: 'blur' },
        	{
        		type: 'number',
        		message: '请输入100以内的整数',
        		trigger: 'blur',
        		transform: (val) =>
        			Number.isInteger(+val) &&
        			Number(val) >= 0 &&
        			Number(val) <= 100 &&
        			Number(val),
        	},
        ]">
          <el-input v-model="dataForm.keyValue" type="number" min="0" max="100" @change="$emit('update', dataForm)"
            placeholder="请输入按钮盒模式" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="检测内容" prop="inspectionDetContent"
          :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <el-select v-model="dataForm.inspectionDetContent" placeholder="请选择检测内容" filterable
            @change="$emit('update', dataForm)">
            <el-option v-for="opt in inspectionDetList" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
      </el-col> -->
    </el-row>
  </el-form>
</template>

<script>
import basicAdd from '../../mixins/basic-add';
import {
  createQualityInspectionBoxBtn,
  updateQualityInspectionBoxBtn,
  getQualityInspectionBoxBtn,
  getListByLineSection
} from '@/api/base/qualityInspectionBoxBtn';
export default {
  mixins: [basicAdd],
	data() {
    return {
      urlOptions: {
        // isGetCode: false,
        // codeURL: getCode,
        createURL: createQualityInspectionBoxBtn,
        updateURL: updateQualityInspectionBoxBtn,
        infoURL: getQualityInspectionBoxBtn,
      },
      dataForm: {
        // id: null,
        sectionId: null,
        productionLineId: null,
        inspectionDetIdList:[],
      },
			formLoading: true,
      productionLineList: [],
      inspectionDetList:[],
			workshopSectionList: [],
		};
	},
	mounted() {
    this.getProductionLineList()
    this.getQualityInspectionDetList()
    // this.getList()
		// this.getWorksectionList();
		// this.getCode('/base/equipment-group-alarm/getCode').then((code) => {
		// 	this.formLoading = false;
		// 	this.$emit('update', {
		// 		...this.dataForm,
		// 		code,
		// 	});
		// });
	},
	watch: {
		'dataForm.productionId': {
			handler(id) {
				if (id != null) this.getWorksectionList(id)
			},
			immediate: true
		},
	},
  methods: {
    init(obj) {
      // console.log(productionLineId);
      console.log(obj);
      this.visible = true
      // if(obj.id)
      if (obj) {
        this.dataForm.id = obj.id || null;
      }
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields()
        if (obj) {
          getListByLineSection({
            productionLineId: obj.productionLineId,
            sectionId: obj.sectionId,
          }).then((res) => {
            console.log(res);
            this.dataForm.inspectionDetIdList = res.data
            this.dataForm.productionLineId = obj.productionLineId
            this.getWorksectionList(obj.productionLineId)
            this.dataForm.sectionId = obj.sectionId
          })
        }
        if (this.dataForm.id) {
          console.log(1111);
          this.urlOptions.infoURL(obj.id).then(response => {
            this.dataForm.id = response.data.id

            // if (this.setData) {
            //   this.setDataForm()
            // }
          });
        } else {
          // if (this.urlOptions.isGetCode) {
          //   this.getCode()
          // }
        }
      });
    },
    /** 模拟透传 ref  */
    handleCheckedCitiesChange(value) {
      ;console.log(value);
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    // getList() {
    //   console.log(this.dataForm.sectionId);

    // },
		validate(cb) {
			return this.$refs.form.validate(cb);
		},
		resetFields(args) {
			return this.$refs.form.resetFields(args);
		},
		async getProductionLineList() {
			this.formLoading = true;
			const res = await this.$axios({
				url: '/base/core-production-line/listAll',
				method: 'get',
			});
			if (res.code == 0) {
				this.productionLineList = res.data.map((item) => ({
					label: item.name,
					value: item.id,
				}));
			}
			this.formLoading = false;
		},
    async getQualityInspectionDetList() {
      this.formLoading = true;
      const res = await this.$axios({
        url: '/base/quality-inspection-det/inspectionMap',
        method: 'get',
      });
      if (res.code == 0) {
        console.log(res)
        let arr = []
        for (let i in res.data) {
          let obj = {
            typeName: res.data[i].length !== 0 ? res.data[i][0].typeName : '',
            typeId: res.data[i].length !== 0 ? res.data[i][0].typeId : '',
            data:[]
          }
          let detArr = []
          res.data[i].forEach(ele => {
            detArr.push({
              detId: ele.id,
              content: ele.content
            })
          })
          obj.data = detArr
          arr.push(obj)
        }
        this.inspectionDetList = arr
        console.log(this.inspectionDetList);
        // this.inspectionDetList = res.data.map((item) => ({
        //   label: item.content,
        //   value: item.content,
        // }));
      }
      this.formLoading = false;
    },
		async getWorksectionList(id) {
			this.formLoading = true;
			const res = await this.$axios({
				url: '/base/core-workshop-section/listByParentId',
				method: 'get',
				params: {
					id,
				},
			});
			if (res.code == 0) {
				this.workshopSectionList = res.data.map((item) => ({
					label: item.name,
					value: item.id,
				}));
			}
			this.formLoading = false;
		},

		async handleProductlineChange(id) {
			await this.getWorksectionList(id);
			this.dataForm.sectionId = null;
			this.$emit('update', this.dataForm);
		},

		// async getCode(url) {
		// 	const response = await this.$axios(url);
		// 	return response.data;
		// },
	},
};
</script>

<style scoped lang="scss">
.el-date-editor,
.el-select {
	width: 100%;
}
</style>