From 437a70bd86d8adda3da41853b8b1c2706a22fdd7 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期四, 12 六月 2025 18:03:59 +0800
Subject: [PATCH] 优化文档管理及基础信息页面
---
src/views/production/components/ProductionDialog.vue | 620 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 385 insertions(+), 235 deletions(-)
diff --git a/src/views/production/components/ProductionDialog.vue b/src/views/production/components/ProductionDialog.vue
index 2787bb2..07772d6 100644
--- a/src/views/production/components/ProductionDialog.vue
+++ b/src/views/production/components/ProductionDialog.vue
@@ -1,188 +1,152 @@
-<template>
+div<template>
<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-button type="primary" @click="handlData">閫夋嫨鏁版嵁</el-button>
+ <ETable
+ :columns="columns"
+ height="200"
+ @cell-edit="handleCellEdit"
+ :showOperations="false"
+ :tableData="tableData"
+ @row-click="handleRowClick"
+ :editableColumns="['used']"
+ />
+ <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="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"
+ />
- <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>
+ </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([
+
+]);
+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 +154,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 +373,76 @@
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;
+.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