<!-- 煤质方案维护弹窗组件 -->
|
<template>
|
<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-item label="煤质方案名称" prop="plan">
|
<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-select>
|
</el-form-item>
|
|
<!-- 方案描述文本域 -->
|
<el-form-item label="煤质方案描述" prop="schemeDesc">
|
<el-input
|
v-model="formData.schemeDesc"
|
type="textarea"
|
placeholder="请输入煤质方案描述"
|
:rows="3"
|
/>
|
</el-form-item>
|
|
<!-- 操作按钮区域 -->
|
<el-form-item class="dialog-footer">
|
<el-button v-if="isEditMode" @click="resetForm">重置</el-button>
|
<el-button v-else @click="cancelForm">取消</el-button>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ref, reactive, watch, computed, onMounted } from "vue";
|
import { getCoalFieldList, addOrEditCoalPlan } from "@/api/basicInformation/coalQualityMaintenance";
|
|
// ===== 组件属性定义 =====
|
const props = defineProps({
|
/** 关闭弹窗前的回调函数 */
|
beforeClose: {
|
type: Function,
|
default: () => {},
|
},
|
/** 表单数据 */
|
form: {
|
type: Object,
|
default: () => ({}),
|
},
|
/** 操作类型：add-新增，edit-编辑 */
|
addOrEdit: {
|
type: String,
|
default: "add",
|
},
|
/** 弹窗标题 */
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
|
// ===== 事件定义 =====
|
const emit = defineEmits(["submit", "handleBeforeClose"]);
|
|
// ===== 响应式数据 =====
|
/** 表单引用 */
|
const formRef = ref();
|
|
/** 煤质字段选项列表 */
|
const fieldOptions = reactive([]);
|
|
/** 弹窗显示状态 */
|
const dialogVisible = defineModel("coalQualityMaintenanceDialogFormVisible", {
|
required: true,
|
type: Boolean,
|
});
|
|
/** 表单数据 */
|
const formData = ref({});
|
|
// ===== 计算属性 =====
|
/** 是否为编辑模式 */
|
const isEditMode = computed(() => props.addOrEdit === 'edit');
|
|
// ===== 表单验证规则 =====
|
const formRules = reactive({
|
plan: [
|
{ required: true, message: "请输入方案名称", trigger: "blur" },
|
],
|
coalFields: [
|
{ required: true, message: "请选择方案类型", trigger: "blur" },
|
],
|
});
|
|
// ===== 工具函数 =====
|
/**
|
* 将字符串格式的煤质字段转换为数组
|
*/
|
const parseCoalFields = (coalFieldsStr) => {
|
if (!coalFieldsStr || typeof coalFieldsStr !== 'string') return [];
|
return coalFieldsStr
|
.split(',')
|
.map(id => parseInt(id.trim()))
|
.filter(id => !isNaN(id));
|
};
|
|
/**
|
* 将数组格式的煤质字段转换为字符串
|
*/
|
const stringifyCoalFields = (coalFieldsArray) => {
|
if (!Array.isArray(coalFieldsArray)) return '';
|
return coalFieldsArray.join(',');
|
};
|
|
/**
|
* 初始化表单数据
|
* @param {Object} newForm - 新的表单数据
|
*/
|
const initFormData = (newForm) => {
|
formData.value = { ...newForm };
|
|
// 处理coalFields字段：编辑时需要将字符串转换为数组供多选组件使用
|
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));
|
}
|
}
|
};
|
|
// ===== 生命周期钩子 =====
|
/**
|
* 组件挂载时获取煤质字段选项
|
*/
|
onMounted(async () => {
|
try {
|
const { data, code } = await getCoalFieldList();
|
if (code === 200) {
|
// 构建选项数据，格式化为{ label, value }
|
fieldOptions.push(...data.map(item => ({
|
label: item.fieldName,
|
value: item.id,
|
})));
|
} else {
|
console.error("获取煤质字段列表失败", data);
|
}
|
} catch (error) {
|
console.error("获取煤质字段列表异常", error);
|
}
|
});
|
|
// ===== 监听器 =====
|
/**
|
* 监听表单数据变化，实现数据回显
|
*/
|
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,
|
coalFields: stringifyCoalFields(formData.value.coalFields)
|
};
|
|
// 删除不需要的时间字段（编辑时）
|
if (isEditMode.value) {
|
delete submitData.createTime;
|
delete submitData.updateTime;
|
}
|
|
// 调用API提交数据
|
const result = await addOrEditCoalPlan(submitData);
|
|
// 构建响应数据并触发提交事件
|
const responseData = {
|
title: isEditMode.value ? "编辑" : "新增",
|
...submitData,
|
result
|
};
|
|
emit("submit", responseData);
|
} catch (error) {
|
console.error("表单提交失败", error);
|
}
|
};
|
|
/**
|
* 取消操作
|
*/
|
const cancelForm = () => {
|
dialogVisible.value = false;
|
formData.value = {};
|
};
|
|
/**
|
* 重置表单
|
*/
|
const resetForm = () => {
|
if (!formRef.value) return;
|
formRef.value.resetFields();
|
};
|
|
/**
|
* 关闭弹窗
|
*/
|
const handleClose = () => {
|
emit("handleBeforeClose");
|
dialogVisible.value = false;
|
};
|
</script>
|
<style lang="scss" scoped>
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
flex-direction: column;
|
}
|
</style>
|
