From 807df6dedd5078e0dd9f6515a8e1ea93e19a6f52 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 25 六月 2025 15:21:51 +0800
Subject: [PATCH] 文档管理 树形菜单 新增修改优化 生产加工模块的 数据tags 显示 生产人的匹配
---
src/views/production/index.vue | 76 +++++++++++++++++++++++++++++---------
1 files changed, 58 insertions(+), 18 deletions(-)
diff --git a/src/views/production/index.vue b/src/views/production/index.vue
index 223d465..1003361 100644
--- a/src/views/production/index.vue
+++ b/src/views/production/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="app-container">
+ <div>
<!-- 鎼滅储琛ㄥ崟 -->
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="鎼滅储">
@@ -39,12 +39,20 @@
:border="true"
style="width: 100%;height: calc(100vh - 26em)"
>
- <template #coal="{ row }">
+ <template #coalId="{ row }">
<div class="coal-tags">
- <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small">
- {{ getCoalNameById(coal) }}
- </el-tag>
- <span v-if="!row.coal">--</span>
+ <template v-if="row.coalId">
+ <el-tag
+ v-for="coal in parseCoalArray(row.coalId)"
+ :key="coal"
+ size="small"
+ type="primary"
+ class="coal-tag"
+ >
+ {{ getDisplayCoalName(coal) }}
+ </el-tag>
+ </template>
+ <span v-else class="no-data">--</span>
</div>
</template>
</ETable> <!-- 鍒嗛〉缁勪欢 -->
@@ -70,7 +78,7 @@
</template>
<script setup>
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {Plus, Delete} from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
@@ -83,13 +91,12 @@
import {useCoalData} from "./components/useCoalData.js";
import {getCoalInfoList} from "@/api/production";
+// 鐓ょ淇℃伅鍒楄〃
+const coalInfoList = ref([]);
+
// 琛ㄦ牸鍒楅厤缃�
const columns = [
- {prop: "coalId", label: "鐓ょ", minWidth: 150,
- formatter: (row) => {
- return coalInfoList.value.find(item => item.id == row.coalId)?.coal || '--';
- }
- },
+ {prop: "coalId", label: "鐓ょ", minWidth: 150, slot: true},
{prop: "productionQuantity", label: "鐢熶骇鏁伴噺", minWidth: 120},
{prop: "laborCost", label: "浜哄伐鎴愭湰", minWidth: 150},
{prop: "energyConsumptionCost", label: "鑳借�楁垚鏈�", minWidth: 120},
@@ -124,6 +131,20 @@
// 浣跨敤鐓ょ鏁版嵁缁勫悎寮忓嚱鏁�
const {getCoalNameById, getCoalData} = useCoalData();
+// 鑾峰彇鐓ょ鏄剧ず鍚嶇О锛堝甫澶囩敤閫昏緫锛�
+const getDisplayCoalName = (coalId) => {
+ // 浼樺厛浣跨敤 useCoalData 鐨勬柟娉�
+ let name = getCoalNameById(coalId);
+
+ // 濡傛灉娌℃湁鎵惧埌锛屽皾璇曚粠 coalInfoList 涓煡鎵�
+ if (name === coalId && coalInfoList.value.length > 0) {
+ const found = coalInfoList.value.find(item => item.id == coalId);
+ name = found ? found.coal : coalId;
+ }
+
+ return name || coalId;
+};
+
// 澶勭悊鐢熶骇鏁版嵁鏇存柊
const handleProductionAndProcessing = (row, rows) => {
const index = tableData.value.findIndex(item => item.id === rows.id);
@@ -139,13 +160,26 @@
ElMessage.success("鎿嶄綔鎴愬姛");
});
};
-const coalInfoList = ref([]);
+
// 缁勪欢鎸傝浇鏃跺姞杞芥暟鎹�
onMounted(async () => {
- await getCoalData(); // 棰勫姞杞界叅绉嶆暟鎹�
- getList();
- let res = await getCoalInfoList()
- coalInfoList.value = res.data;
+ try {
+ // 骞惰鍔犺浇鐓ょ鏁版嵁鍜岃〃鏍兼暟鎹�
+ await Promise.all([
+ getCoalData(), // 棰勫姞杞界叅绉嶆暟鎹�
+ (async () => {
+ const res = await getCoalInfoList();
+ if (res.code === 200) {
+ coalInfoList.value = res.data;
+ }
+ })()
+ ]);
+
+ // 鍔犺浇琛ㄦ牸鏁版嵁
+ getList();
+ } catch (error) {
+ ElMessage.error('鏁版嵁鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯');
+ }
});
</script>
@@ -187,8 +221,9 @@
display: flex;
flex-wrap: wrap;
gap: 4px;
+ align-items: center;
- .el-tag {
+ .coal-tag {
margin-right: 4px;
margin-bottom: 4px;
@@ -196,5 +231,10 @@
margin-right: 0;
}
}
+
+ .no-data {
+ color: #999;
+ font-style: italic;
+ }
}
</style>
--
Gitblit v1.9.3