fix: 点击取消时将表单子元素全部销毁

gongchunyi

3 天以前 06d627bc28e77e1a314d8e35914512d63dbab1bd

 src/views/productionManagement/processRoute/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,243 @@
<template>
  <div>
    <el-dialog v-model="isShow"
               title="编辑工艺路线"
               width="400"
               @close="closeModal">
      <el-form label-width="140px"
               :model="formState"
               label-position="top"
               ref="formRef">
        <el-form-item label="产品类型"
                      prop="dictCode"
                      :rules="[
                {
                required: true,
                message: '请选择产品类型',
                trigger: 'change',
              }
            ]">
          <el-select v-model="formState.dictCode"
                     placeholder="请选择产品类型"
                     clearable
                     style="width: 100%"
                     @change="handleProductTypeChange">
            <el-option v-for="item in productTypeOptions"
                       :key="item.dictCode"
                       :label="item.dictLabel"
                       :value="item.dictCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="BOM"
                      prop="bomId"
                      :rules="[
                {
                required: true,
                message: '请选择BOM',
                trigger: 'change',
              }
            ]">
          <el-select v-model="formState.bomId"
                     placeholder="请选择BOM"
                     clearable
                     :disabled="!formState.dictCode || bomOptions.length === 0"
                     style="width: 100%">
            <el-option v-for="item in bomOptions"
                       :key="item.id"
                       :label="item.bomNo || `BOM-${item.id}`"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
                      prop="description">
          <el-input v-model="formState.description"
                    type="textarea" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    computed,
    getCurrentInstance,
    onMounted,
    nextTick,
    watch,
  } from "vue";
  import { update } from "@/api/productionManagement/processRoute.js";
  import { listPage } from "@/api/productionManagement/productBom.js";
  import { getDicts } from "@/api/system/dict/data.js";

  const props = defineProps({
    visible: {
      type: Boolean,
      required: true,
    },

    record: {
      type: Object,
      required: true,
    },
  });

  const emit = defineEmits(["update:visible", "completed"]);

  // å“åº”式数据（替代选项式的 data）
  const formState = ref({
    dictCode: undefined,
    dictLabel: "",
    bomId: undefined,
    description: "",
  });

  const isShow = computed({
    get() {
      return props.visible;
    },
    set(val) {
      emit("update:visible", val);
    },
  });

  const productTypeOptions = ref([]);
  const bomOptions = ref([]);

  let { proxy } = getCurrentInstance();

  // èŽ·å–产品类型字典
  const getProductTypeOptions = () => {
    getDicts("product_type")
      .then(res => {
        if (res.code === 200) {
          productTypeOptions.value = res.data;
        }
      })
      .catch(err => {
        console.error("获取产品类型字典失败：", err);
      });
  };

  // æ ¹æ®äº§å“ç±»åž‹èŽ·å–BOM列表
  const getBomListByProductType = async dictCode => {
    if (!dictCode) {
      bomOptions.value = [];
      return;
    }
    try {
      // ä½¿ç”¨listPage接口，根据dictCode查询BOM
      const res = await listPage({ dictCode });
      // å¤„理返回的BOM数据
      let bomList = [];
      if (res.data && res.data.records) {
        bomList = res.data.records;
      }
      bomOptions.value = bomList;
      if (bomList.length === 0) {
        proxy.$modal.msgError("该产品类型没有BOM，请先创建BOM");
      }
    } catch (error) {
      // å¦‚果接口返回404或其他错误，说明没有BOM
      proxy.$modal.msgError("该产品类型没有BOM，请先创建BOM");
      bomOptions.value = [];
    }
  };

  const closeModal = () => {
    isShow.value = false;
  };

  // è®¾ç½®è¡¨å•æ•°æ®
  const setFormData = () => {
    if (props.record) {
      formState.value = {
        ...props.record,
        dictCode: props.record.dictCode,
        dictLabel: props.record.dictLabel || "",
        bomId: props.record.bomId,
        description: props.record.description || "",
      };
      // å¦‚果有产品类型，加载BOM列表
      if (props.record.dictCode) {
        getBomListByProductType(props.record.dictCode);
      }
    }
  };

  // äº§å“ç±»åž‹é€‰æ‹©å¤„理
  const handleProductTypeChange = async dictCode => {
    if (dictCode) {
      const selectedType = productTypeOptions.value.find(item => item.dictCode === dictCode);
      if (selectedType) {
        formState.value.dictLabel = selectedType.dictLabel;
      }
      // å¦‚果当前选择的BOM不在新列表中，则重置BOM选择
      formState.value.bomId = undefined;
      await getBomListByProductType(dictCode);
      // è§¦å‘表单验证更新
      proxy.$refs["formRef"]?.validateField("dictCode");
    } else {
      formState.value.dictLabel = "";
      bomOptions.value = [];
    }
  };

  const handleSubmit = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        // éªŒè¯æ˜¯å¦é€‰æ‹©äº†äº§å“ç±»åž‹å’ŒBOM
        if (!formState.value.dictCode) {
          proxy.$modal.msgError("请选择产品类型");
          return;
        }
        if (!formState.value.bomId) {
          proxy.$modal.msgError("请选择BOM");
          return;
        }
        update(formState.value).then(res => {
          // å…³é—­æ¨¡æ€æ¡†
          isShow.value = false;
          // å‘ŠçŸ¥çˆ¶ç»„件已完成
          emit("completed");
          proxy.$modal.msgSuccess("提交成功");
        });
      }
    });
  };

  defineExpose({
    closeModal,
    handleSubmit,
    isShow,
  });

  // ç›‘听弹窗打开，初始化表单数据
  watch(
    () => props.visible,
    visible => {
      if (visible && props.record) {
        nextTick(() => {
          setFormData();
        });
      }
    },
    { immediate: true }
  );

  onMounted(() => {
    getProductTypeOptions();
    if (props.visible && props.record) {
      setFormData();
    }
  });
</script>