| | |
| | | <!-- 煤质方案维护弹窗组件 --> |
| | | <template> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | :title="title" |
| | | width="600" |
| | | :close-on-click-modal="false" |
| | | :before-close="handleClose" |
| | | > |
| | | <el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false" |
| | | :before-close="handleClose"> |
| | | <!-- 表单区域 --> |
| | | <el-form |
| | | ref="formRef" |
| | | :model="formData" |
| | | :rules="formRules" |
| | | label-width="120px" |
| | | style="max-width: 400px; margin: 0 auto" |
| | | > |
| | | <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" |
| | | style="max-width: 400px; margin: 0 auto"> |
| | | <!-- 方案名称输入框 --> |
| | | <el-form-item label="煤质方案名称" prop="plan"> |
| | | <el-input |
| | | v-model="formData.plan" |
| | | placeholder="请输入煤质方案名称" |
| | | clearable |
| | | /> |
| | | <el-input v-model="formData.plan" placeholder="请输入煤质方案名称" clearable /> |
| | | </el-form-item> |
| | | |
| | | <!-- 煤质字段多选下拉框 --> |
| | | <el-form-item label="煤质方案类型" prop="coalFields"> |
| | | <el-select |
| | | v-model="formData.coalFields" |
| | | placeholder="请选择煤质方案类型" |
| | | style="width: 100%" |
| | | clearable |
| | | multiple |
| | | > |
| | | <el-option |
| | | v-for="item in fieldOptions" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | <el-form-item label="煤质方案类型" prop="coalFieldList"> |
| | | <el-select v-model="formData.coalFieldList" placeholder="请选择煤质方案类型" style="width: 100%" clearable multiple> |
| | | <el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <!-- 方案描述文本域 --> |
| | | <el-form-item label="煤质方案描述" prop="schemeDesc"> |
| | | <el-input |
| | | v-model="formData.schemeDesc" |
| | | type="textarea" |
| | | placeholder="请输入煤质方案描述" |
| | | :rows="3" |
| | | /> |
| | | <el-input v-model="formData.schemeDesc" type="textarea" placeholder="请输入煤质方案描述" :rows="3" /> |
| | | </el-form-item> |
| | | |
| | | <!-- 操作按钮区域 --> |
| | |
| | | /** 关闭弹窗前的回调函数 */ |
| | | beforeClose: { |
| | | type: Function, |
| | | default: () => {}, |
| | | default: () => { }, |
| | | }, |
| | | /** 表单数据 */ |
| | | form: { |
| | |
| | | plan: [ |
| | | { required: true, message: "请输入方案名称", trigger: "blur" }, |
| | | ], |
| | | coalFields: [ |
| | | coalFieldList: [ |
| | | { required: true, message: "请选择方案类型", trigger: "blur" }, |
| | | ], |
| | | }); |
| | |
| | | */ |
| | | const initFormData = (newForm) => { |
| | | formData.value = { ...newForm }; |
| | | |
| | | // 处理coalFields字段:编辑时需要将字符串转换为数组供多选组件使用 |
| | | console.log(formData.value) |
| | | // 处理 coalFieldList 字段:编辑时需要将字符串转换为数组供多选组件使用 |
| | | if (newForm.coalFields) { |
| | | if (typeof newForm.coalFields === 'string') { |
| | | formData.value.coalFields = parseCoalFields(newForm.coalFields); |
| | | } else if (Array.isArray(newForm.coalFields)) { |
| | | // 确保数组中的值都是数字类型 |
| | | formData.value.coalFields = newForm.coalFields |
| | | .map(id => parseInt(id)) |
| | | .filter(id => !isNaN(id)); |
| | | // 将字符串转换为ID数组,然后匹配对应的选项对象 |
| | | const ids = parseCoalFields(newForm.coalFields); |
| | | formData.value.coalFieldList = ids.map(id => { |
| | | const option = fieldOptions.find(opt => opt.value === id); |
| | | return option || { fields: `字段${id}`, value: id }; |
| | | }); |
| | | } else if (Array.isArray(newForm.coalFieldList)) { |
| | | // 确保数组中的值都是正确的对象格式 |
| | | formData.value.coalFieldList = newForm.coalFieldList.map(item => { |
| | | if (typeof item === 'object' && item.value !== undefined) { |
| | | return item; |
| | | } else { |
| | | // 如果是纯ID,需要匹配对应的选项 |
| | | const id = parseInt(item); |
| | | const option = fieldOptions.find(opt => opt.value === id); |
| | | return option || { fields: `字段${id}`, value: id }; |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | // 如果没有 coalFieldList,初始化为空数组 |
| | | formData.value.coalFieldList = []; |
| | | } |
| | | }; |
| | | |
| | |
| | | fieldOptions.push(...data.map(item => ({ |
| | | label: item.fieldName, |
| | | value: item.id, |
| | | fields:item.fields |
| | | }))); |
| | | } else { |
| | | console.error("获取煤质字段列表失败", data); |
| | |
| | | /** |
| | | * 监听表单数据变化,实现数据回显 |
| | | */ |
| | | watch(() => props.form, initFormData, { |
| | | deep: true, |
| | | immediate: true |
| | | watch(() => props.form, initFormData, { |
| | | deep: true, |
| | | immediate: true |
| | | }); |
| | | |
| | | // ===== 事件处理函数 ===== |
| | |
| | | */ |
| | | const submitForm = async () => { |
| | | if (!formRef.value) return; |
| | | |
| | | try { |
| | | const isValid = await formRef.value.validate(); |
| | | if (!isValid) return; |
| | | |
| | | // 准备提交数据:将coalFields数组转换为字符串 |
| | | const submitData = { |
| | | // 初始化字段数组 |
| | | formData.value.fieldIds = []; |
| | | formData.value.coalFields = []; |
| | | |
| | | // 安全处理 coalFieldList 数据 |
| | | if (formData.value.coalFieldList && Array.isArray(formData.value.coalFieldList)) { |
| | | formData.value.coalFieldList.forEach((element) => { |
| | | // 检查元素是否为对象并且有必要的属性 |
| | | if (element && typeof element === 'object') { |
| | | if (element.value !== undefined) { |
| | | formData.value.fieldIds.push(element.value); |
| | | } |
| | | if (element.fields !== undefined) { |
| | | formData.value.coalFields.push(element.fields); |
| | | } |
| | | } else { |
| | | // 如果元素是简单值,直接使用 |
| | | formData.value.fieldIds.push(element); |
| | | // 尝试从 fieldOptions 中找到对应的 label |
| | | const option = fieldOptions.find(opt => opt.value === element); |
| | | if (option) { |
| | | formData.value.coalFields.push(option.fields); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 删除临时字段 |
| | | delete formData.value.coalFieldList; |
| | | |
| | | try { |
| | | // 准备提交数据:将数组转换为字符串 |
| | | const submitData = { |
| | | ...formData.value, |
| | | coalFields: stringifyCoalFields(formData.value.coalFields) |
| | | coalFields: stringifyCoalFields(formData.value.coalFields), |
| | | fieldIds: stringifyCoalFields(formData.value.fieldIds) |
| | | }; |
| | | |
| | | // 删除不需要的时间字段(编辑时) |
| | |
| | | ...submitData, |
| | | result |
| | | }; |
| | | |
| | | emit("submit", responseData); |
| | | } catch (error) { |
| | | console.error("表单提交失败", error); |