From 7619d415522ab3dc3299d6a2a9f5c9964a692d3f Mon Sep 17 00:00:00 2001 From: 张诺 <zhang_12370@163.com> Date: 星期三, 18 六月 2025 17:58:53 +0800 Subject: [PATCH] 添加生产管理接口及优化表格字段 --- src/views/production/components/ProductionDialog.vue | 729 ++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 472 insertions(+), 257 deletions(-) diff --git a/src/views/production/components/ProductionDialog.vue b/src/views/production/components/ProductionDialog.vue index 2787bb2..7733da7 100644 --- a/src/views/production/components/ProductionDialog.vue +++ b/src/views/production/components/ProductionDialog.vue @@ -2,297 +2,512 @@ <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '鏂板鐢熶骇鍔犲伐' : '缂栬緫鐢熶骇鍔犲伐'" - width="800px" + width="1200px" :close-on-click-modal="false" @close="handleClose" > - <el-form - ref="formRef" - :model="formData" - :rules="rules" - label-width="120px" - class="production-form" - > - <el-row :gutter="20"> - <el-col :span="12"> - <el-form-item label="鐓ょ" prop="category"> - <el-select v-model="formData.category" placeholder="璇烽�夋嫨鐓ょ" clearable style="width: 100%"> - <el-option label="鐐肩劍" value="鐐肩劍" /> - <el-option label="姘旂叅" value="姘旂叅" /> - <el-option label="鏃犵儫鐓�" value="鏃犵儫鐓�" /> - <el-option label="闀跨劙鐓�" value="闀跨劙鐓�" /> - <el-option label="璐叅" value="璐叅" /> - </el-select> - </el-form-item> + <el-row :gutter="10" style="margin-bottom: 10px"> + <el-col :span="3"> + <el-button type="primary" @click="handlData" + ><el-icon> <Plus /> </el-icon>閫夋嫨鏁版嵁</el-button + > + </el-col> + <el-col :span="4"> + <el-button + type="danger" + @click="removeSelectedData" + :disabled="tableData.length === 0" + > + <el-icon> + <Delete /> + </el-icon> + 娓呯┖宸查�� + </el-button> + </el-col> + <el-col :span="17" style="text-align: right; line-height: 32px"> + <el-text type="info" size="small"> + 宸查�夋嫨 {{ tableData.length }} 椤规暟鎹� + <span v-if="tableData.length > 0"> + 锛屾�讳娇鐢ㄩ噺: {{ totalUsedQuantity.toFixed(2) }} + </span> + </el-text> + </el-col> + </el-row> + <ETableModify + :columns="columns" + :showOperations="false" + height="200" + @cell-edit="handleCellEdit" + :tableData="tableData" + :showOverflowTooltip="false" + @row-click="handleRowClick" + :editableColumns="['usedQuantity']" + @delete="handleRemoveItem" + /> + <div class="empty-table"> + <h1>鐢熶骇鏄庣粏</h1> + <el-row :gutter="10"> + <el-col :span="2"> + <el-button type="primary" @click="addNewRow"> + <el-icon> + <Plus /> + </el-icon> + 鏂板 + </el-button> </el-col> - <el-col :span="12"> - <el-form-item label="鍗曚綅" prop="unit"> - <el-select v-model="formData.unit" placeholder="璇烽�夋嫨鍗曚綅" clearable style="width: 100%"> - <el-option label="鍚ㄤ綅" value="鍚ㄤ綅" /> - <el-option label="鍗冨厠" value="鍗冨厠" /> - </el-select> - </el-form-item> - </el-col> + <!-- <el-col :span="2"> + <el-button type="danger" @click="clearAllRows"> + <el-icon> + <Delete /> + </el-icon> + 娓呯┖ + </el-button> + </el-col> --> </el-row> - - <el-row :gutter="20"> - <el-col :span="12"> - <el-form-item label="鐢熶骇鏁伴噺" prop="productionVolume"> - <el-input-number - v-model="formData.productionVolume" - :min="0" - :precision="2" - style="width: 100%" - @change="calculateTotal" - /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="浜哄伐鎴愭湰" prop="laborCost"> - <el-input-number - v-model="formData.laborCost" - :min="0" - :precision="2" - style="width: 100%" - @change="calculateTotal" - /> - </el-form-item> - </el-col> - </el-row> - - <el-row :gutter="20"> - <el-col :span="12"> - <el-form-item label="鍘熸枡鎴愭湰" prop="materialCost"> - <el-input-number - v-model="formData.materialCost" - :min="0" - :precision="2" - style="width: 100%" - @change="calculateTotal" - /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="璁惧璐圭敤" prop="equipmentCost"> - <el-input-number - v-model="formData.equipmentCost" - :min="0" - :precision="2" - style="width: 100%" - @change="calculateTotal" - /> - </el-form-item> - </el-col> - </el-row> - - <el-row :gutter="20"> - <el-col :span="12"> - <el-form-item label="鎬绘垚鏈�" prop="totalCost"> - <el-input-number - v-model="formData.totalCost" - :min="0" - :precision="2" - style="width: 100%" - disabled - /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鎬讳环鏍�" prop="totalPrice"> - <el-input-number - v-model="formData.totalPrice" - :min="0" - :precision="2" - style="width: 100%" - @change="calculateProfit" - /> - </el-form-item> - </el-col> - </el-row> - - <el-row :gutter="20"> - <el-col :span="12"> - <el-form-item label="鍒╂鼎" prop="profit"> - <el-input-number - v-model="formData.profit" - :min="0" - :precision="2" - style="width: 100%" - disabled - /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="澶嶈浜�" prop="reviewer"> - <el-input v-model="formData.reviewer" placeholder="璇疯緭鍏ュ璁颁汉" /> - </el-form-item> - </el-col> - </el-row> - - <el-row :gutter="20"> - <el-col :span="12"> - <el-form-item label="鏃ユ湡" prop="date"> - <el-date-picker - v-model="formData.date" - type="date" - placeholder="璇烽�夋嫨鏃ユ湡" - style="width: 100%" - value-format="YYYY-MM-DD" - /> - </el-form-item> - </el-col> - </el-row> - </el-form> + <ProductionDetailsTable + v-model="detailsTableData" + :border="false" + :show-operations="true" + :auto-calculate="true" + @input-change="handleDetailsChange" + @delete-row="handleDeleteRow" + /> + </div> <template #footer> <div class="dialog-footer"> - <el-button @click="handleClose">鍙� 娑�</el-button> - <el-button type="primary" :loading="loading" @click="handleSubmit">纭� 瀹�</el-button> + <el-button + @click="handleClose" + v-if="dialogType === 'add' || dialogType === 'edit'" + >鍙� 娑�</el-button + > + <!-- <el-button @click="handleReset" v-if="dialogType === 'edit'" + >閲� 缃�</el-button + > --> + <el-button type="primary" :loading="loading" @click="handleSubmit" + >纭� 瀹�</el-button + > </div> </template> + </el-dialog> + <el-dialog + v-model="innerVisible" + width="1000" + title="閫夋嫨閰嶇疆鏁版嵁" + center + append-to-body + > + <div style="margin-bottom: 10px"> + <el-alert + v-if="tableData.length > 0" + :title="`褰撳墠宸查�夋嫨 ${tableData.length} 鏉℃暟鎹甡" + type="info" + :closable="false" + show-icon + /> + </div> + <ETable + :showIndex="false" + :showOverflowTooltip="false" + @selection-change="handleSelectionChange" + :showOperations="false" + ref="etableRef" + :columns="formalDatabaseColumns" + :tableData="formalDatabaseData" + :defaultSelectedIds="selectedIds" + :rowKey="'id'" + height="400" + @cell-edit="handleCellEdit" + :show-selection="true" + /> + <el-row :gutter="24" style="margin-top: 15px"> + <el-col :span="12"> + <el-text type="info"> + 宸查�夋嫨 {{ formalDatabaseSelectedData.length }} 鏉℃暟鎹� + </el-text> + </el-col> + <el-col :span="12" style="text-align: right"> + <el-button @click="innerVisible = false">鍙栨秷</el-button> + <el-button + type="primary" + @click="handleSelectData" + :disabled="formalDatabaseSelectedData.length === 0" + > + 纭畾娣诲姞 + </el-button> + </el-col> + </el-row> </el-dialog> </template> <script setup> -import { ref, reactive, watch } from 'vue' -import { ElMessage } from 'element-plus' +import { ref, reactive, watch, onMounted, nextTick, computed } from "vue"; +import ETable from "@/components/Table/ETable.vue"; +import ETableModify from "@/components/Table/EtableModify.vue"; +import ProductionDetailsTable from "./ProductionDetailsTable.vue"; +import { ElMessage, ElMessageBox, ElAlert, ElText } from "element-plus"; +import { Delete, Warning, Plus } from "@element-plus/icons-vue"; +import { + getOfficialAll, + addOrEditPM, + deleteProductionInventory, +} from "@/api/production/index.js"; +import { validateFormData, validateNumber, deepClone, createDefaultProductionRow } from "@/utils/production"; +import { useCoalData } from "./useCoalData"; +import useUserStore from "@/store/modules/user"; +// Props 鍜� Emits const props = defineProps({ - visible: { - type: Boolean, - default: false + visible: { type: Boolean, default: false }, + type: { type: String, default: "add" }, + rowData: { type: Object, default: () => ({}) }, +}); + +const dialogVisible = defineModel("visible", { type: Boolean, default: false }); +const emit = defineEmits(["update:visible", "success", "update:productionAndProcessing"]); + +// 鐢ㄦ埛淇℃伅鍜岀叅绉嶆暟鎹� +const userStore = useUserStore(); +const { getCoalNameById } = useCoalData(); +let userInfo; + +// 瀵硅瘽妗嗙姸鎬� +const innerVisible = ref(false); +const dialogType = ref("add"); +const loading = ref(false); +const etableRef = ref(null); + +// 鏁版嵁鐘舵�� +const tableData = ref([]); +const detailsTableData = ref([]); +const formalDatabaseData = ref([]); +const formalDatabaseSelectedData = ref([]); +const selectedIds = ref([]); +const currentRow = ref(null); +const copyForm = ref(null); +// 琛ㄦ牸鍒楅厤缃� +const columns = [ + { label: "鐓ょ", prop: "coal", minwidth: 120 }, + { label: "搴撳瓨鏁伴噺", prop: "inventoryQuantity", minwidth: 100 }, + { + label: "浣跨敤鏁伴噺", + prop: "usedQuantity", + editable: true, + minwidth: 120, + editType: "number", }, - type: { - type: String, - default: 'add' // 'add' 鎴� 'edit' - }, - rowData: { - type: Object, - default: () => ({}) +]; + +const formalDatabaseColumns = ref([ + { prop: "supplierName", label: "渚涘簲鍟嗗悕绉�", minwidth: 150 }, + { prop: "coal", label: "鐓ょ绫诲瀷", minwidth: 60 }, + { prop: "inventoryQuantity", label: "搴撳瓨鏁伴噺", minwidth: 80 }, + { prop: "unit", label: "鍗曚綅", minwidth: 20 }, + { prop: "priceExcludingTax", label: "鍗曚环锛堜笉鍚◣锛�", minwidth: 80 }, + { prop: "createTime", label: "鐧昏鏃ユ湡", width: 200 }, +]); +// 宸ュ叿鍑芥暟 +const debugIdMatching = () => { + if (formalDatabaseData.value.length > 0 && selectedIds.value.length > 0) { + const matchedRows = formalDatabaseData.value.filter((row) => + selectedIds.value.includes(row.id) + ); } -}) +}; -const emit = defineEmits(['update:visible', 'success']) +const handleRowClick = (row) => { + currentRow.value = row; +}; -const dialogVisible = ref(false) -const dialogType = ref('add') -const loading = ref(false) -const formRef = ref(null) - -// 琛ㄥ崟鏁版嵁 -const formData = reactive({ - category: '', - unit: '', - productionVolume: 0, - laborCost: 0, - materialCost: 0, - equipmentCost: 0, - totalCost: 0, - totalPrice: 0, - profit: 0, - reviewer: '', - date: '' -}) - -// 琛ㄥ崟楠岃瘉瑙勫垯 -const rules = { - category: [{ required: true, message: '璇烽�夋嫨鐓ょ', trigger: 'change' }], - unit: [{ required: true, message: '璇烽�夋嫨鍗曚綅', trigger: 'change' }], - productionVolume: [{ required: true, message: '璇疯緭鍏ョ敓浜ф暟閲�', trigger: 'blur' }], - laborCost: [{ required: true, message: '璇疯緭鍏ヤ汉宸ユ垚鏈�', trigger: 'blur' }], - materialCost: [{ required: true, message: '璇疯緭鍏ュ師鏂欐垚鏈�', trigger: 'blur' }], - equipmentCost: [{ required: true, message: '璇疯緭鍏ヨ澶囪垂鐢�', trigger: 'blur' }], - totalPrice: [{ required: true, message: '璇疯緭鍏ユ�讳环鏍�', trigger: 'blur' }], - reviewer: [{ required: true, message: '璇疯緭鍏ュ璁颁汉', trigger: 'blur' }], - date: [{ required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' }] -} - -// 鐩戝惉visible鍙樺寲 -watch(() => props.visible, (val) => { - dialogVisible.value = val - if (val) { - dialogType.value = props.type - if (props.type === 'edit') { - Object.assign(formData, props.rowData) - } +// 鑾峰彇閰嶇疆鏁版嵁 +const handlData = async () => { + innerVisible.value = true; + let res = await getOfficialAll(); + if (res.code === 200) { + formalDatabaseData.value = res.data; + const existingOfficialIds = tableData.value + .map((item) => item.officialId) + .filter((id) => id); + selectedIds.value = existingOfficialIds; + debugIdMatching(); + nextTick(() => { + setTimeout(() => { + if (etableRef.value && existingOfficialIds.length > 0) { + etableRef.value.setDefaultSelection(); + } + }, 100); + }); + } else { + ElMessage.error("鑾峰彇閰嶇疆鏁版嵁澶辫触"); } -}) +}; +// 鎵嬪姩璁剧疆琛ㄦ牸閫変腑鐘舵�� +const setTableSelection = (ids) => { + if (!etableRef.value || !Array.isArray(ids) || ids.length === 0) { + return; + } -// 鐩戝惉dialogVisible鍙樺寲 -watch(() => dialogVisible.value, (val) => { - emit('update:visible', val) -}) + nextTick(() => { + setTimeout(() => { + try { + etableRef.value.clearSelection(); + const rowsToSelect = formalDatabaseData.value.filter((row) => + ids.includes(row.id) + ); + if (rowsToSelect.length > 0) { + etableRef.value.setRowsSelection(rowsToSelect, true); + } + } catch (error) { + } + }, 150); + }); +}; -// 璁$畻鎬绘垚鏈� -const calculateTotal = () => { - formData.totalCost = ( - formData.laborCost + - formData.materialCost + - formData.equipmentCost - ) - calculateProfit() -} +// 鍒濆鍖栧拰缂栬緫鍒濆鍖� +const Initialization = () => { + tableData.value = []; + detailsTableData.value = []; + copyForm.value = null; + dialogType.value = "add"; +}; -// 璁$畻鍒╂鼎 -const calculateProfit = () => { - formData.profit = formData.totalPrice - formData.totalCost -} +const editInitialization = (data) => { + copyForm.value = deepClone(data); + tableData.value = data.productionInventoryList || []; + detailsTableData.value = data.productionList || []; + dialogType.value = "edit"; + const existingOfficialIds = tableData.value + .map((item) => item.officialId) + .filter((id) => id); + selectedIds.value = existingOfficialIds; +}; +// 鐩戝惉瀵硅瘽妗嗙姸鎬侊紝鍦ㄦ墦寮�鏃惰缃�変腑鐘舵�� +watch(innerVisible, (newVal) => { + if (newVal && selectedIds.value.length > 0) { + setTimeout(() => setTableSelection(selectedIds.value), 200); + } + // 瀵硅瘽妗嗗叧闂椂娓呯┖閫夋嫨鐘舵�� + if (!newVal) { + formalDatabaseSelectedData.value = []; + } +}); -// 鎻愪氦琛ㄥ崟 +defineExpose({ + Initialization, + editInitialization, +}); +const handleSelectData = (row) => { + tableData.value = []; + if (!innerVisible.value) return; + const selectedData = formalDatabaseSelectedData.value; + if (selectedData.length === 0) { + ElMessage.warning("璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�"); + return; + } + let addedCount = 0; + let duplicateCount = 0; + selectedData.forEach((item) => { + const newItem = { + ...item, // 澶嶅埗鎵�鏈夊師濮嬫暟鎹� + officialId: item.id, // 淇濆瓨鍘熷鐨刬d浣滀负officialId + usedQuantity: 0, // 鍒濆浣跨敤鏁伴噺涓�0 + // 鍙互鏍规嵁闇�瑕佹坊鍔犲叾浠栧瓧娈� + }; + tableData.value.push(newItem); + addedCount++; + }); + + // 鏇存柊selectedIds锛岀‘淇濆寘鍚墍鏈夊綋鍓峵ableData涓殑officialId + const allOfficialIds = tableData.value + .map((item) => item.officialId) + .filter((id) => id); + selectedIds.value = allOfficialIds; + + // 鍏抽棴閫夋嫨瀵硅瘽妗� + innerVisible.value = false; + + // 鏄剧ず缁撴灉娑堟伅 + let message = ""; + if (addedCount > 0) { + message += `鎴愬姛娣诲姞 ${addedCount} 鏉℃暟鎹甡; + } + if (duplicateCount > 0) { + message += (message ? "锛�" : "") + `璺宠繃 ${duplicateCount} 鏉¢噸澶嶆暟鎹甡; + } + if (message) { + ElMessage.success(message); + } else { + ElMessage.info("娌℃湁鏂版暟鎹娣诲姞"); + } +}; +const handleSelectionChange = (selection) => { + formalDatabaseSelectedData.value = selection; +}; +// 鎻愪氦琛ㄥ崟 - 浣跨敤宸ュ叿鍑芥暟楠岃瘉 const handleSubmit = async () => { - if (!formRef.value) return + // 楠岃瘉鐢熶骇鏄庣粏鏁版嵁 + const detailsValidation = validateFormData(detailsTableData.value, [ + "coal", + "productionQuantity", + "laborCost", + "energyConsumptionCost", + "equipmentDepreciation", + "purchasePrice" + ]); - await formRef.value.validate((valid) => { - if (valid) { - loading.value = true - // 瑙﹀彂鎴愬姛浜嬩欢锛屼紶閫掕〃鍗曟暟鎹� - emit('success', { ...formData }) - loading.value = false - handleClose() - } - }) -} + if (!detailsValidation.isValid) { + ElMessage.warning(detailsValidation.message); + return; + } + // 楠岃瘉搴撳瓨浣跨敤鏁版嵁 + if (tableData.value.length === 0) { + ElMessage.warning("璇锋坊鍔犵敓浜у姞宸ユ暟鎹�"); + return; + } + + for (let i = 0; i < tableData.value.length; i++) { + const element = tableData.value[i]; + if (element.usedQuantity == 0 || element.usedQuantity === null) { + ElMessage.warning(`璇峰~鍐欎娇鐢ㄦ暟閲�: ${element.coal}`); + return; + } + } + + try { + const data = { + ...copyForm.value, + productionList: detailsTableData.value, + productionInventoryList: tableData.value, + }; + const res = await addOrEditPM(data); + if (res.code === 200) { + dialogVisible.value = false; + emit("success"); + } else { + ElMessage.error("鎻愪氦澶辫触"); + } + } catch (error) { + ElMessage.error("鎻愪氦澶辫触锛岃閲嶈瘯"); + } +}; // 鍏抽棴寮圭獥 const handleClose = () => { - dialogVisible.value = false - formRef.value?.resetFields() - Object.assign(formData, { - category: '', - unit: '', - productionVolume: 0, - laborCost: 0, - materialCost: 0, - equipmentCost: 0, - totalCost: 0, - totalPrice: 0, - profit: 0, - reviewer: '', - date: '' + dialogVisible.value = false; +}; + +// 浣跨敤鏁伴噺楠岃瘉 - 浣跨敤宸ュ叿鍑芥暟 +const handleCellEdit = (row, prop, value) => { + if (prop === "usedQuantity") { + const validation = validateNumber(value, 0, Number(row.inventoryQuantity)); + + if (!validation.isValid) { + ElMessage.warning(validation.message); + row.usedQuantity = validation.value; + return; + } + + row.usedQuantity = validation.value; + } +}; + +// 澶勭悊鐢熶骇鏄庣粏琛ㄦ牸鐨勬搷浣� - 浣跨敤宸ュ叿鍑芥暟 +const addNewRow = () => { + const newRow = createDefaultProductionRow(userInfo); + detailsTableData.value.push(newRow); +}; + +// 閲嶇疆鏁版嵁 - 浣跨敤娣辨嫹璐� +const handleReset = () => { + if (copyForm.value) { + tableData.value = deepClone(copyForm.value.productionInventoryList) || []; + detailsTableData.value = deepClone(copyForm.value.productionList) || []; + } +}; + +// 鑾峰彇鐢ㄦ埛淇℃伅 +onMounted(async () => { + try { + userInfo = await userStore.getInfo(); + } catch (error) { + ElMessage.error("鑾峰彇鐢ㄦ埛淇℃伅澶辫触锛岃閲嶈瘯"); + } +}); + +// 绠�鍖栫殑浜嬩欢澶勭悊鍑芥暟 +const handleDetailsChange = (data) => { +}; + +const handleDeleteRow = (index) => { + ElMessage.success(`宸插垹闄ょ ${index + 1} 琛屾暟鎹甡); +}; + +// 鍒犻櫎鍗曚釜宸查�夋暟鎹」 +const handleRemoveItem = (row) => { + const index = tableData.value.findIndex( + (item) => item.officialId === row.officialId + ); + if (index > -1) { + tableData.value.splice(index, 1); + + // 鏇存柊selectedIds + const updatedOfficialIds = tableData.value + .map((item) => item.officialId) + .filter((id) => id); + selectedIds.value = updatedOfficialIds; + ElMessage.success("宸插垹闄ら�変腑椤�"); + } +}; + +// 娓呯┖鎵�鏈夊凡閫夋暟鎹� +const removeSelectedData = () => { + if (tableData.value.length === 0) { + ElMessage.warning("娌℃湁鍙竻绌虹殑鏁版嵁"); + return; + } + ElMessageBox.confirm("纭娓呯┖鎵�鏈夊凡閫夋嫨鐨勬暟鎹悧锛�", "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", }) -} + .then(async () => { + if (dialogType.value === "edit") { + let res = await deleteProductionInventory({ + productionInventoryList: tableData.value, + }); + emit("update:productionAndProcessing", tableData.value, copyForm.value); + } + // [Vue warn]: Component emitted event "update:productionAndProcessing" but it is neither declared in the emits option nor as an "onUpdate:productionAndProcessing" prop. + + formalDatabaseSelectedData.value = []; + tableData.value = []; + selectedIds.value = []; + ElMessage.success("宸叉竻绌烘墍鏈夋暟鎹�"); + }) + .catch(() => {}); +}; + +// 璁$畻鎬讳娇鐢ㄩ噺 +const totalUsedQuantity = computed(() => { + return tableData.value.reduce((total, item) => { + const usedQty = Number(item.usedQuantity) || 0; + return total + usedQty; + }, 0); +}); </script> -<style scoped> -.production-form { - padding: 20px; +<style scoped lang="scss"> +.el-form { + .el-row { + padding-top: 20px; + background: rgba($color: #f8fafb, $alpha: 0.5); + } } -.dialog-footer { - display: flex; - justify-content: flex-end; - gap: 10px; +.el-row > .el-col > h1 { + font-weight: bolder; } - -:deep(.el-form-item__label) { - font-weight: bold; +.empty-table > .el-row { + margin-bottom: 12px; } - -:deep(.el-input-number) { - width: 100%; -} - -:deep(.el-select) { - width: 100%; -} -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3