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/production/components/ProductionDialog.vue | 629 +++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 393 insertions(+), 236 deletions(-) diff --git a/src/views/production/components/ProductionDialog.vue b/src/views/production/components/ProductionDialog.vue index 2787bb2..7ce8482 100644 --- a/src/views/production/components/ProductionDialog.vue +++ b/src/views/production/components/ProductionDialog.vue @@ -2,187 +2,161 @@ <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-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-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> + <el-button type="primary" @click="handlData">閫夋嫨鏁版嵁</el-button> + <ETable + v-if="tableData.length > 0" + :columns="columns" + height="200" + @cell-edit="handleCellEdit" + :showOperations="false" + :tableData="tableData" + @row-click="handleRowClick" + :editableColumns="['used']" + /> + <div v-if="tableData.length > 0" 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="2"> + <el-button type="danger" @click="clearAllRows"> + <el-icon> + <Delete /> + </el-icon> + 娓呯┖ + </el-button> + </el-col> + <!-- <el-col :span="2"> + <el-button type="warning" @click="calculateAllCosts"> + <el-icon> + <Warning /> + </el-icon> 閲嶆柊璁$畻 + </el-button> + </el-col> --> + </el-row> + <ProductionDetailsTable + v-model="detailsTableData" + :border="false" + :show-operations="true" + :auto-calculate="true" + @input-change="handleDetailsChange" + @delete-row="handleDeleteRow" + /> + </div> + <div style="margin-top: 20px;" v-else>鏆傛棤鏁版嵁锛岃閫夋嫨閰嶇疆鏁版嵁</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 type="primary" :loading="loading" @click="handleSubmit" + >纭� 瀹�</el-button + > </div> </template> + </el-dialog> + <el-dialog + v-model="innerVisible" + width="1000" + title="閫夋嫨閰嶇疆鏁版嵁" + append-to-body + > + <ETable + @selection-change="handleSelectionChange" + :showOperations="false" + :columns="formalDatabaseDataColumns" + :tableData="formalDatabaseData" + height="400" + @cell-edit="handleCellEdit" + :show-selection="true" + /> + <el-row :gutter="24"> + <el-col :span="2" :offset="22"> + <el-button type="primary" @click="handleSelectData">纭畾</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 } from "vue"; +import ETable from "@/components/Table/EtableModify.vue"; +import ProductionDetailsTable from "./ProductionDetailsTable.vue"; +import { ElMessage } from "element-plus"; +import { Delete, Warning, Plus } from "@element-plus/icons-vue"; const props = defineProps({ visible: { type: Boolean, - default: false + default: false, }, type: { type: String, - default: 'add' // 'add' 鎴� 'edit' + default: "add", // 'add' 鎴� 'edit' }, rowData: { type: Object, - default: () => ({}) - } -}) + default: () => ({}), + }, +}); +const dialogVisible = defineModel("visible", { + type: Boolean, + default: false, +}); +const emit = defineEmits(["update:visible", "success"]); -const emit = defineEmits(['update:visible', 'success']) - -const dialogVisible = ref(false) -const dialogType = ref('add') -const loading = ref(false) -const formRef = ref(null) - +const innerVisible = ref(false); +const dialogType = ref("add"); +const loading = ref(false); +const formRef = ref(null); +const tableData = ref([]); +const currentRow = ref(null); +const columns = [ + { label: "鐓ょ", prop: "category" }, + { label: "鐑��", prop: "Calorific" }, + { label: "搴撳瓨鏁伴噺", prop: "stock" }, + { label: "鏈浣跨敤鏁伴噺", prop: "used" }, +]; +const detailsTableData = ref([ + { + coalType: "", + calorificValue: "", + productionQuantity: "", + laborCost: "", + energyCost: "", + equipmentDepreciation: "", + purchasePrice: "", + totalCost: "", + }, +]); +const handleRowClick = (row) => { + currentRow.value = row; +}; +const formalDatabaseDataColumns = ref([ + { prop: "name", label: "渚涘簲鍟嗗悕绉�", width: 150 }, + { prop: "type", label: "鐓ょ绫诲瀷", width: 120 }, + { prop: "unit", label: "鍗曚綅", width: 100 }, + { prop: "number", label: "閲囪喘鏁伴噺", width: 100 }, + { prop: "money", label: "鍗曚环锛堝惈绋庯級", width: 120 }, + { prop: "money1", label: "鎬讳环锛堝惈绋庯級", width: 120 }, + { prop: "money2", label: "绋庣巼", width: 80 }, + { prop: "money3", label: "涓嶅惈绋庡崟浠�", width: 120 }, + { prop: "createUser", label: "鐧昏浜�", width: 100 }, + { prop: "createTime", label: "鐧昏鏃ユ湡", width: 150 }, +]); // 琛ㄥ崟鏁版嵁 const formData = reactive({ - category: '', - unit: '', + category: "", + unit: "", productionVolume: 0, laborCost: 0, materialCost: 0, @@ -190,76 +164,218 @@ totalCost: 0, totalPrice: 0, profit: 0, - reviewer: '', - date: '' -}) + reviewer: "", + date: "", +}); +const handlData = () => { + innerVisible.value = true; +}; +const formalDatabaseData = ref([]); +const formalDatabaseSelectedData = ref([]); +formalDatabaseData.value = [ + { + id: 1, + name: "渚涘簲鍟咥", + type: "鍔ㄥ姏鐓�", + unit: "鍚�", + number: 120, + money: 500, + money1: 200, + money2: 200, + money3: 300, + money4: "楂樹綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 2, + name: "渚涘簲鍟咥", + type: "鍔ㄥ姏鐓�", + unit: "鍚�", + number: 100, + money: 600, + money1: 300, + money2: 300, + money3: 300, + money4: "浣庝綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 3, + name: "渚涘簲鍟咮", + type: "鐒︾叅", + unit: "鍚�", + number: 300, + money: 789, + money1: 400, + money2: 400, + money3: 400, + money4: "楂樹綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 4, + name: "渚涘簲鍟咮", + type: "鐒︾叅", + unit: "鍚�", + number: 256, + money: 800, + money1: 420, + money2: 420, + money3: 420, + money4: "浣庝綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 5, + name: "渚涘簲鍟咰", + type: "鏃犵儫鐓�", + unit: "鍚�", + number: 256, + money: 700, + money1: 300, + money2: 300, + money3: 300, + money4: "楂樹綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 6, + name: "渚涘簲鍟咥", + type: "鍔ㄥ姏鐓�", + unit: "鍚�", + number: 120, + money: 500, + money1: 200, + money2: 200, + money3: 300, + money4: "楂樹綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 7, + name: "渚涘簲鍟咥", + type: "鍔ㄥ姏鐓�", + unit: "鍚�", + number: 100, + money: 600, + money1: 300, + money2: 300, + money3: 300, + money4: "浣庝綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 8, + name: "渚涘簲鍟咮", + type: "鐒︾叅", + unit: "鍚�", + number: 300, + money: 789, + money1: 400, + money2: 400, + money3: 400, + money4: "楂樹綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 9, + name: "渚涘簲鍟咮", + type: "鐒︾叅", + unit: "鍚�", + number: 256, + money: 800, + money1: 420, + money2: 420, + money3: 420, + money4: "浣庝綅", + createUser: "admin", + createTime: "2025-06-01", + }, + { + id: 10, + name: "渚涘簲鍟咰", + type: "鏃犵儫鐓�", + unit: "鍚�", + number: 256, + money: 700, + money1: 300, + money2: 300, + money3: 300, + money4: "楂樹綅", + createUser: "admin", + createTime: "2025-06-01", + }, +]; // 琛ㄥ崟楠岃瘉瑙勫垯 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' }] -} + category: [{ 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 Initialization = () => { + console.log("鍒濆鍖栨暟鎹�"); + tableData.value = []; +}; +defineExpose({ + Initialization +}); +const handleSelectData = (row) => { + if (!innerVisible.value) return; + // 鑾峰彇閫変腑鐨勬暟鎹� + const selectedData = formalDatabaseSelectedData.value; + if (selectedData.length === 0) { + ElMessage.warning("璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�"); + return; } -}) + // 灏嗛�変腑鐨勬暟鎹牴鎹渶瑕佺瓫閫夊埌琛ㄦ牸涓� + selectedData.forEach((item) => { + const existingItem = tableData.value.find( + (row) => row.id === item.id + ); + if (!existingItem) { + tableData.value.push({ + id: item.id, + category: item.type, + Calorific: item.money4, + stock: item.number, + used: 0, // 鍒濆浣跨敤鏁伴噺涓�0 + }); + } + }); + innerVisible.value = false; +}; +const handleSelectionChange = (selection) => { + formalDatabaseSelectedData.value = selection; +}; +const reset = () => { + // formRef + formRef.value?.resetFields(); +}; -// 鐩戝惉dialogVisible鍙樺寲 -watch(() => dialogVisible.value, (val) => { - emit('update:visible', val) -}) - -// 璁$畻鎬绘垚鏈� -const calculateTotal = () => { - formData.totalCost = ( - formData.laborCost + - formData.materialCost + - formData.equipmentCost - ) - calculateProfit() -} - -// 璁$畻鍒╂鼎 -const calculateProfit = () => { - formData.profit = formData.totalPrice - formData.totalCost -} +const selectChange = (value) => {}; // 鎻愪氦琛ㄥ崟 const handleSubmit = async () => { - if (!formRef.value) return - - await formRef.value.validate((valid) => { - if (valid) { - loading.value = true - // 瑙﹀彂鎴愬姛浜嬩欢锛屼紶閫掕〃鍗曟暟鎹� - emit('success', { ...formData }) - loading.value = false - handleClose() - } - }) -} + console.log(detailsTableData.value); + // dialogVisible.value = false; +}; // 鍏抽棴寮圭獥 const handleClose = () => { - dialogVisible.value = false - formRef.value?.resetFields() + dialogVisible.value = false; + formRef.value?.resetFields(); Object.assign(formData, { - category: '', - unit: '', + category: "", + unit: "", productionVolume: 0, laborCost: 0, materialCost: 0, @@ -267,32 +383,73 @@ totalCost: 0, totalPrice: 0, profit: 0, - reviewer: '', - date: '' - }) -} + reviewer: "", + date: "", + }); +}; + +// 娣诲姞鍗曞厓鏍肩紪杈戝鐞嗗嚱鏁� +const handleCellEdit = (row, prop, value) => { + if (prop === "used" && Number(value) > Number(row.stock)) { + ElMessage.warning("浣跨敤鏁伴噺涓嶈兘澶т簬搴撳瓨鏁伴噺锛�"); + row.used = row.stock; + } +}; + +// 澶勭悊鐢熶骇鏄庣粏琛ㄦ牸鐨勬搷浣� +const addNewRow = () => { + detailsTableData.value.push({ + coalType: "", + calorificValue: "", + productionQuantity: "", + laborCost: "", + energyCost: "", + equipmentDepreciation: "", + purchasePrice: "", + totalCost: "", + }); +}; + +const clearAllRows = () => { + detailsTableData.value = []; + ElMessage.success("宸叉竻绌烘墍鏈夋暟鎹�"); +}; + +const calculateAllCosts = () => { + detailsTableData.value.forEach((row) => { + const laborCost = parseFloat(row.laborCost) || 0; + const energyCost = parseFloat(row.energyCost) || 0; + const equipmentDepreciation = parseFloat(row.equipmentDepreciation) || 0; + const purchasePrice = parseFloat(row.purchasePrice) || 0; + + row.totalCost = ( + laborCost + + energyCost + + equipmentDepreciation + + purchasePrice + ).toFixed(2); + }); + ElMessage.success("閲嶆柊璁$畻瀹屾垚"); +}; + +const handleDetailsChange = (data) => { + console.log("鐢熶骇鏄庣粏鏁版嵁鍙樺寲:", data); +}; + +const handleDeleteRow = (index) => { + ElMessage.success(`宸插垹闄ょ ${index + 1} 琛屾暟鎹甡); +}; </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; -} - -:deep(.el-input-number) { - width: 100%; -} - -:deep(.el-select) { - width: 100%; -} -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3