kd-aiot-frontend-mes/src/views/checklistManagement/components/checkAdd.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="500px"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="放行类型" prop="checklistType">
        <DictSelection
          dictName="放行类型"
          clearable
          v-model="form.checklistType"
          @change="checklistTypeChange"
        >
        </DictSelection>
      </el-form-item>
      <el-form-item label="放行单模板名称" prop="templateId">
        <el-select
          style="width: 100%"
          v-model="form.templateId"
          placeholder="请选择，来源于放行单模板。"
          filterable
          remote
          :remote-method="remoteMethod"
          @change="handleTemplateChange"
        >
          <el-option
            v-for="item in templateIdList"
            :key="item.id"
            :label="item.templateName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template v-slot:footer>
      <el-button type="primary" @click="submit">提 交</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { checklisttemplatePage } from '@/api/checklisttemplate/index';

  export default {
    mixins: [dictMixins],
    components: {},
    data() {
      const formBaseData = {
        // 	放行单类型，1-成品放行，2-商品放行，3-物料放行
        checklistType: '',
        templateId: null,
        templateName: ''
      };

      return {
        visible: false,
        title: '新增放行单',
        formBaseData,
        form: JSON.parse(JSON.stringify(formBaseData)),
        rules: {
          checklistType: [
            { required: true, message: '请选择放行类型', trigger: 'blur' },
            { required: true, message: '请选择放行类型', trigger: 'change' }
          ],
          templateId: [
            { required: true, message: '请选择放行单模板', trigger: 'blur' },
            { required: true, message: '请选择放行单模板', trigger: 'change' }
          ]
        },
        //模板列表
        templateIdList: [],
      };
    },
    created() {},
    methods: {
      // 外部调用，打开弹窗
      open(type, data) {
        console.log('data type', type, data);

        if (type == 'add') {
          this.title = '新增放行单';
        } else {
          this.title = '编辑放行单';
        }
        this.visible = true;
      },
      // 关闭时清理表单
      handleClose() {
        this.visible = false;
        this.form = JSON.parse(JSON.stringify(this.formBaseData));
        this.$refs.formRef && this.$refs.formRef.resetFields();
      },
      // 提交
      submit() {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.$emit('submit', this.form);
            // 下一步 放行单申请
            this.$emit('confirm', this.form);
            this.handleClose();
          }
        });
      },
      // 远程搜索
      remoteMethod(query) {
        if (query !== '') {
          this.fetchTemplateList(query);
        } else {
          this.fetchTemplateList();
        }
      },
      // 查询模板列表
      async fetchTemplateList(templateName = '') {
        if (this.form.checklistType == '') {
          this.templateIdList = [];
          return;
        }
        const data = await checklisttemplatePage({
          pageNum: 1,
          size: 99,
          templateName: templateName,
          checklistType: this.form.checklistType
        });
        this.templateIdList = data.list;
        console.log('data', data);
      },
      // 选择模板
      handleTemplateChange(id) {
        const selected = this.templateIdList.find((item) => item.id === id);
        if (selected) {
          this.form.templateName = selected.templateName;
        } else {
          this.form.templateName = '';
        }
      },
      // 选择放行单类型
      checklistTypeChange() {
        this.fetchTemplateList();
        this.form.templateId = null;
        this.form.templateName = '';
      }
    }
  };
</script>

<style scoped lang="scss"></style>