zhang_12370
3 天以前 e986cee1c804ecdf6d03c080ce9a8bb187f724a4
src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue
@@ -19,6 +19,7 @@
              v-model="formData.fieldName"
              placeholder="请输入字段名称"
              :disabled="isViewMode"
              @blur="checkFieldNameExists"
          />
        </el-form-item>
        <el-form-item label="字段描述" prop="fieldDescription">
@@ -41,8 +42,10 @@
</template>
<script setup>
import {ref, reactive, watch, defineProps} from "vue";
import {ref, reactive, watch, defineProps, computed, onMounted} from "vue";
import {ElMessage} from "element-plus";
import {addOrEditCoalField} from "@/api/basicInformation/coalFieldMaintenance.js";
import {getCoalFieldList} from "@/api/publicApi/index.js";
const props = defineProps({
  form: {
@@ -64,6 +67,21 @@
const copyForm = defineModel("copyForm", {
  required: true,
  type: Object,
});
// 存储已有的字段列表
const existingFields = ref([]);
// 组件挂载时获取已有字段列表
onMounted(async () => {
  try {
    const {data, code} = await getCoalFieldList();
    if (code === 200) {
      existingFields.value = data || [];
    }
  } catch (error) {
    console.error("获取字段列表失败", error);
  }
});
// 表单引用
const formRef = ref();
@@ -128,9 +146,49 @@
  emit("handleBeforeClose");
  emit("update:coalMaintenanceFieldDialogVisible", false);
};
// 检查字段名称是否已存在
const checkFieldNameExists = () => {
  if (!formData.value.fieldName) return;
  const isNameExists = existingFields.value.some(field =>
    field.fieldName === formData.value.fieldName
  );
  // 编辑模式下,如果是当前字段的原名称则不提示
  if (isNameExists && !(props.addOrEdit === 'edit' && props.form.fieldName === formData.value.fieldName)) {
    ElMessage.warning("该字段名称已存在,请换其他名字");
    // 可选:自动清空输入框
    // formData.value.fieldName = '';
  }
};
const rules = reactive({
  fieldName: [
    {required: true, message: "请输入煤种名称", trigger: "blur"},
    {required: true, message: "请输入字段名称", trigger: "blur"},
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback();
          return;
        }
        // 检查字段名称是否已存在
        const isNameExists = existingFields.value.some(field =>
          field.fieldName === value
        );
        // 编辑模式下,如果是当前字段的原名称则允许
        if (isNameExists) {
          if (props.addOrEdit === 'edit' && props.form.fieldName === value) {
            callback();
          } else {
            callback(new Error("该字段名称已存在,请换其他名字"));
          }
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
});
</script>