| | |
| | | v-model="formData.fieldName" |
| | | placeholder="请输入字段名称" |
| | | :disabled="isViewMode" |
| | | @blur="checkFieldNameExists" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="字段描述" prop="fieldDescription"> |
| | |
| | | </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: { |
| | |
| | | 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(); |
| | |
| | | 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> |