From 00ef76a2e286e338fa3c648ce183e3533ce006ad Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期一, 09 六月 2025 17:48:23 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev --- src/views/basicInformation/mould/coalQualityMaintenance.vue | 300 ++++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 222 insertions(+), 78 deletions(-) diff --git a/src/views/basicInformation/mould/coalQualityMaintenance.vue b/src/views/basicInformation/mould/coalQualityMaintenance.vue index d1bb443..4f3dd9f 100644 --- a/src/views/basicInformation/mould/coalQualityMaintenance.vue +++ b/src/views/basicInformation/mould/coalQualityMaintenance.vue @@ -1,121 +1,265 @@ +<!-- 鐓よ川鏂规缁存姢寮圭獥缁勪欢 --> <template> - <div> - <el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false" - :before-close="handleClose"> - <el-form ref="formRef" style="max-width: 400px; margin: 0 auto" :model="formData" :rules="rules" - label-width="auto"> - <el-form-item label="鏂规鍚嶇О" prop="schemeName"> - <el-input v-model="formData.schemeName" placeholder="璇疯緭鍏ユ柟妗堝悕绉�" prop="schemeName" /> - </el-form-item> - <el-form-item label="鏂规绫诲瀷" props="fieldName"> - <el-select v-model="formData.fieldName" placeholder="Select" style="width: 240px" clearable multiple> - <template #label="{ label }"> - <span>{{ label }}: </span> - <span style="font-weight: bold">{{ value }}</span> - </template> - <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> - </el-select> - </el-form-item> - <template #footer> - <el-form-item label="瀛楁鎻忚堪" prop="fieldDescription"> - <el-input v-model="formData.fieldDescription" type="textarea" placeholder="璇疯緭鍏ュ瓧娈垫弿杩�" /> - </el-form-item> + <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> - </template> - <el-form-item> - <el-button type="primary" @click="submitForm"> 纭畾 </el-button> - <el-button v-if="addOrEdit === 'edit'" @click="resetForm">閲嶇疆</el-button> - <el-button v-if="addOrEdit === 'add'" @click="cancelForm">鍙栨秷</el-button> - </el-form-item> - </el-form> - </el-dialog> - </div> + <!-- 鐓よ川瀛楁澶氶�変笅鎷夋 --> + <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, watch, defineProps, onMounted } from "vue"; -import addressList from "@/api/jsonApi/areaList.json"; +import { ref, reactive, watch, computed, onMounted } from "vue"; +import { getCoalFieldList, addOrEditCoalPlan } from "@/api/basicInformation/coalQualityMaintenance"; + +// ===== 缁勪欢灞炴�у畾涔� ===== const props = defineProps({ + /** 鍏抽棴寮圭獥鍓嶇殑鍥炶皟鍑芥暟 */ beforeClose: { type: Function, - default: () => { }, + default: () => {}, }, + /** 琛ㄥ崟鏁版嵁 */ form: { type: Object, default: () => ({}), }, + /** 鎿嶄綔绫诲瀷锛歛dd-鏂板锛宔dit-缂栬緫 */ addOrEdit: { type: String, default: "add", }, + /** 寮圭獥鏍囬 */ title: { type: String, default: "", }, }); -const options = [ - { - value: 'Option1', - label: 'Label1', - }, - { - value: 'Option2', - label: 'Label2', - }, - { - value: 'Option3', - label: 'Label3', - }, - { - value: 'Option4', - label: 'Label4', - }, - { - value: 'Option5', - label: 'Label5', - }, -] + +// ===== 浜嬩欢瀹氫箟 ===== const emit = defineEmits(["submit", "handleBeforeClose"]); -// 琛ㄥ崟鏁版嵁 -const formData = ref({ ...props.form }); -// 寮圭獥鍙鎬� +// ===== 鍝嶅簲寮忔暟鎹� ===== +/** 琛ㄥ崟寮曠敤 */ +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; - await formRef.value.validate(async (valid, fields) => { - if (valid) { - // let result = await addOrEditCoalQuality({...formData.value}); - // console.log(result); - // emit("submit", formData.value); + + 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 = () => { - emit("update:coalQualityMaintenanceDialogFormVisible", false); + dialogVisible.value = false; formData.value = {}; }; -// 閲嶇疆琛ㄥ崟 + +/** + * 閲嶇疆琛ㄥ崟 + */ const resetForm = () => { if (!formRef.value) return; formRef.value.resetFields(); }; -// 鍏抽棴寮圭獥 + +/** + * 鍏抽棴寮圭獥 + */ const handleClose = () => { - // 瑙﹀彂鐖剁粍浠剁殑鍏抽棴鍑芥暟 emit("handleBeforeClose"); - emit("update:coalQualityMaintenanceDialogFormVisible", false); + dialogVisible.value = false; }; -const rules = reactive({ - coal: [ - { required: true, message: "璇疯緭鍏ョ叅绉嶅悕绉�", trigger: "blur" }, - ], -}); </script> -<style lang="sass" scoped> +<style lang="scss" scoped> +.dialog-footer { + display: flex; + justify-content: flex-end; + margin-top: 20px; + flex-direction: column; +} </style> \ No newline at end of file -- Gitblit v1.9.3