From 3d9d458e631d8d6a070d579b2e3e260aea45ac58 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期二, 24 六月 2025 13:54:51 +0800
Subject: [PATCH] 优化文档管理 优化采购管理渲染数据匹配接口字段 上传第一版主页

---
 src/views/production/components/ProductionDetailsTable.vue |  400 ++++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 294 insertions(+), 106 deletions(-)

diff --git a/src/views/production/components/ProductionDetailsTable.vue b/src/views/production/components/ProductionDetailsTable.vue
index 678ab65..1db3794 100644
--- a/src/views/production/components/ProductionDetailsTable.vue
+++ b/src/views/production/components/ProductionDetailsTable.vue
@@ -1,116 +1,142 @@
 <template>
   <el-table :data="tableData" :border="border" style="width: 100%">
-    <el-table-column label="鐓ょ" min-width="120" >
-      <template #default="{ row, $index }" >
-        <el-input 
-          v-model="row.coal" 
-          placeholder="璇疯緭鍏ョ叅绉�"
-          @input="handleInput('coal', $index, $event)"
-        />
+    <el-table-column label="鐓ょ" min-width="120">
+      <template #default="{ row, $index }">
+        <el-select
+            clearable
+            :model-value="getCoalNameById(row.coalId) || row.coalId"
+            placeholder="璇烽�夋嫨鐓ょ"
+            @change="(value) => handleCoalSelectChange(row, value)"
+            filterable
+            :key="`coalId-select-${$index}-${weekList.length}`"
+        >
+          <el-option
+              v-for="(item, index) of weekList"
+              :key="`option-${index}-${item.key}`"
+              :label="item.value"
+              :value="item.value"
+          />
+        </el-select>
       </template>
     </el-table-column>
     <el-table-column label="鐢熶骇鏁伴噺" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.productionQuantity" 
-          placeholder="璇疯緭鍏ョ敓浜ф暟閲�"
-          type="number"
-          @input="handleInput('productionQuantity', $index, $event)"
+        <el-input
+            v-model="row.productionQuantity"
+            placeholder="璇疯緭鍏ョ敓浜ф暟閲�"
+            type="number"
+            @input="handleInput('productionQuantity', $index, $event)"
         />
       </template>
     </el-table-column>
-    
+
     <el-table-column label="浜哄伐鎴愭湰" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.laborCost" 
-          placeholder="璇疯緭鍏ヤ汉宸ユ垚鏈�"
-          type="number"
-          @input="handleInput('laborCost', $index, $event)"
+        <el-input
+            v-model="row.laborCost"
+            placeholder="璇疯緭鍏ヤ汉宸ユ垚鏈�"
+            type="number"
+            @input="handleInput('laborCost', $index, $event)"
         >
           <template #suffix>
-            <i style="font-style:normal;">鍏�</i>
+            <i style="font-style: normal">鍏�</i>
           </template>
         </el-input>
       </template>
     </el-table-column>
-    
+
     <el-table-column label="鑳借�楁垚鏈�" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.energyConsumptionCost" 
-          placeholder="璇疯緭鍏ヨ兘鑰楁垚鏈�"
-          type="number"
-          @input="handleInput('energyConsumptionCost', $index, $event)"
+        <el-input
+            v-model="row.energyConsumptionCost"
+            placeholder="璇疯緭鍏ヨ兘鑰楁垚鏈�"
+            type="number"
+            @input="handleInput('energyConsumptionCost', $index, $event)"
         >
           <template #suffix>
-            <i style="font-style:normal;">鍏�</i>
+            <i style="font-style: normal">鍏�</i>
           </template>
         </el-input>
       </template>
     </el-table-column>
-    
+
     <el-table-column label="璁惧鎶樻棫" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.equipmentDepreciation" 
-          placeholder="璇疯緭鍏ヨ澶囨姌鏃�"
-          type="number"
-          @input="handleInput('equipmentDepreciation', $index, $event)"
+        <el-input
+            v-model="row.equipmentDepreciation"
+            placeholder="璇疯緭鍏ヨ澶囨姌鏃�"
+            type="number"
+            @input="handleInput('equipmentDepreciation', $index, $event)"
         >
           <template #suffix>
-            <i style="font-style:normal;">鍏�</i>
+            <i style="font-style: normal">鍏�</i>
           </template>
         </el-input>
       </template>
     </el-table-column>
-    
+
     <el-table-column label="閲囪喘鍗曚环" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.purchasePrice" 
-          placeholder="璇疯緭鍏ラ噰璐崟浠�"
-          type="number"
-          @input="handleInput('purchasePrice', $index, $event)"
+        <el-input
+            v-model="row.purchasePrice"
+            placeholder="璇疯緭鍏ラ噰璐崟浠�"
+            type="number"
+            @input="handleInput('purchasePrice', $index, $event)"
         >
           <template #suffix>
-            <i style="font-style:normal;">鍏�</i>
+            <i style="font-style: normal">鍏�</i>
           </template>
         </el-input>
       </template>
     </el-table-column>
-    
+
     <el-table-column label="鎬绘垚鏈�" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.totalCost" 
-          placeholder="鎬绘垚鏈�"
-          type="number"
-          :readonly="autoCalculate"
-          @input="handleInput('totalCost', $index, $event)"
+        <el-input
+            disabled
+            v-model="row.totalCost"
+            placeholder="鎬绘垚鏈�"
+            type="number"
+            :readonly="autoCalculate"
+            @input="handleInput('totalCost', $index, $event)"
         >
           <template #suffix>
-            <i style="font-style:normal;">鍏�</i>
+            <i style="font-style: normal">鍏�</i>
           </template>
         </el-input>
       </template>
     </el-table-column>
     <el-table-column label="鐢熶骇浜�" min-width="120">
       <template #default="{ row, $index }">
-        <el-input 
-          v-model="row.producer" 
-          placeholder="鐢熶骇浜�"
-          @input="handleInput('producer', $index, $event)"
-        />
+        <el-select
+            clearable
+            :model-value="getUserNameById(row.producer) || row.producer"
+            placeholder="璇烽�夋嫨鐢熶骇浜�"
+            @change="(value) => handleUserSelectChange(row, value)"
+            filterable
+            :key="`producer-select-${$index}-${userList.length}`"
+        >
+          <el-option
+              v-for="(item, index) of userList"
+              :key="`option-${index}-${item.key}`"
+              :label="item.value"
+              :value="item.value"
+          />
+        </el-select>
       </template>
     </el-table-column>
-      <el-table-column v-if="showOperations" label="鎿嶄綔" width="120" fixed="right">
+    <el-table-column
+        v-if="showOperations"
+        label="鎿嶄綔"
+        width="120"
+        fixed="right"
+    >
       <template #default="{ $index }">
-        <el-button 
-          type="danger" 
-          size="small" 
-          @click="handleDelete($index)"
-          :icon="Delete"
+        <el-button
+            type="danger"
+            size="small"
+            @click="handleDelete($index)"
+            :icon="Delete"
         >
           鍒犻櫎
         </el-button>
@@ -120,93 +146,255 @@
 </template>
 
 <script setup name="ProductionDetailsTable">
-import { ref, computed, watch } from 'vue'
-import { Delete } from '@element-plus/icons-vue'
+import {ref, computed, watch, onMounted, nextTick} from "vue";
+import {Delete} from "@element-plus/icons-vue";
+import {getCoalFieldList} from "@/api/basicInformation/coalQualityMaintenance";
+import {getCoalInfoList} from "@/api/production";
+import {userListAll} from "@/api/publicApi";
 
 const props = defineProps({
   modelValue: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   border: {
     type: Boolean,
-    default: false
+    default: false,
   },
   showOperations: {
     type: Boolean,
-    default: true
+    default: true,
   },
   autoCalculate: {
     type: Boolean,
-    default: true
-  }
-})
+    default: true,
+  },
+});
 
-const emit = defineEmits(['update:modelValue', 'input-change', 'delete-row'])
+const emit = defineEmits(["update:modelValue", "input-change", "delete-row"]);
 
 // 浣跨敤 v-model 杩涜鍙屽悜缁戝畾
 const tableData = computed({
   get() {
-    return props.modelValue
+    return props.modelValue;
   },
   set(value) {
-    emit('update:modelValue', value)
-  }
-})
+    emit("update:modelValue", value);
+  },
+});
 
 // 澶勭悊杈撳叆鍙樺寲
 const handleInput = (field, index, value) => {
-  const newData = [...tableData.value]
-  newData[index][field] = value
-  
+  const newData = [...tableData.value];
+  newData[index][field] = value;
+
   // 濡傛灉寮�鍚嚜鍔ㄨ绠楁�绘垚鏈�
-  if (props.autoCalculate && ['laborCost', 'energyCost', 'equipmentDepreciation', 'purchasePrice'].includes(field)) {
-    calculateTotalCost(newData[index])
+  if (
+      props.autoCalculate &&
+      [
+        "laborCost",
+        "energyCost",
+        "equipmentDepreciation",
+        "purchasePrice",
+      ].includes(field)
+  ) {
+    calculateTotalCost(newData[index]);
   }
-  
-  tableData.value = newData
-  emit('input-change', { field, index, value, row: newData[index] })
-}
+
+  tableData.value = newData;
+  emit("input-change", {field, index, value, row: newData[index]});
+};
 
 // 璁＄畻鎬绘垚鏈�
 const calculateTotalCost = (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)
-}
+  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);
+};
 
 // 鍒犻櫎琛�
 const handleDelete = (index) => {
-  const newData = [...tableData.value]
-  newData.splice(index, 1)
-  tableData.value = newData
-  emit('delete-row', index)
-}
+  const newData = [...tableData.value];
+  newData.splice(index, 1);
+  tableData.value = newData;
+  emit("delete-row", index);
+};
 
+// 澶勭悊鐓ょ閫夋嫨鍙樺寲
+
+// 澶勭悊鐓ょ閫夋嫨鍙樺寲锛堟柊鏂规硶锛氬悕绉伴�夋嫨杞琁D锛�
+const handleCoalSelectChange = (row, selectedName) => {
+  // 鏍规嵁閫夋嫨鐨勫悕绉版壘鍒板搴旂殑ID
+  const coalItem = weekList.value.find(item => item.value === selectedName);
+  if (coalItem) {
+    row.coalId = coalItem.key; // 璁剧疆涓篒D
+  } else {
+    row.coalId = ''; // 濡傛灉娌℃壘鍒帮紝娓呯┖
+  }
+};
+
+// 鏍规嵁ID鑾峰彇鐓ょ鍚嶇О锛堢敤浜庢樉绀猴級
+const getCoalNameById = (id) => {
+  const coalId = weekList.value.find(item => item.key == id);
+  return coalId ? coalId.value : id;
+};
+
+const weekList = ref([]);
+
+
+// 鐩戝惉琛ㄦ牸鏁版嵁鍙樺寲锛岀‘淇濇樉绀烘纭�
+watch(() => props.modelValue, (newValue) => {
+  if (newValue && weekList.value.length > 0) {
+    // 褰撴暟鎹姞杞藉畬鎴愪笖weekList宸茶幏鍙栨椂锛岀‘淇濇樉绀烘纭�
+  }
+}, {deep: true});
+
+// 鐩戝惉weekList鍙樺寲锛屽綋涓嬫媺鏁版嵁鍔犺浇瀹屾垚鍚庡鐞嗘樉绀�
+watch(weekList, (newList) => {
+  if (newList.length > 0 && tableData.value.length > 0) {
+    // 寮哄埗瑙﹀彂琛ㄦ牸閲嶆柊娓叉煋浠ョ‘淇漞l-select姝ｇ‘鏄剧ず
+    nextTick(() => {
+      // 瑙﹀彂涓�涓井灏忕殑鏁版嵁鍙樺寲鏉ュ己鍒堕噸鏂版覆鏌�
+      const tempData = [...tableData.value];
+      tableData.value = tempData;
+    });
+  }
+}, {deep: true});
+
+onMounted(async () => {
+  let res = await getCoalInfoList()
+  console.log(res);
+  res.data.forEach(item => {
+    let obj = {};
+    obj.value = item.coal;
+    obj.key = item.id;
+    weekList.value.push(obj);
+  });
+  let ress = await userListAll();
+  ress.data.forEach(item => {
+    let obj = {};
+    obj.value = item.nickName;
+    obj.key = item.userId;
+    userList.value.push(obj);
+  });
+  // 閫氱煡鐖剁粍浠秝eekList宸插姞杞藉畬鎴�
+  nextTick(() => {
+  });
+})
+const dropdownList = ref([]);
+// 鑾峰彇涓嬫媺鏁版嵁
+const getDropdownData = async () => {
+  let res = await getCoalFieldList();
+  if (res.code === 200) {
+    dropdownList.value = res.data.map((item) => ({
+      value: item.coal,
+      key: item.id,
+    }));
+  } else {
+    ElMessage.error("鑾峰彇涓嬫媺鏁版嵁澶辫触");
+  }
+};
+const userList = ref([]);
+const getUserList = (async () => {
+  let res = await userListAll();
+  if (res.code === 200) {
+    userList.value = res.data.map((item) => ({
+      value: item.nickName,
+      key: item.userId,
+    }));
+  } else {
+    ElMessage.error("鑾峰彇鐢ㄦ埛鍒楄〃澶辫触");
+  }
+})
+// 鐩戝惉琛ㄦ牸鏁版嵁鍙樺寲锛岀‘淇濇樉绀烘纭�
+watch(() => props.modelValue, (newValue) => {
+  if (newValue && userList.value.length > 0) {
+    // 褰撴暟鎹姞杞藉畬鎴愪笖weekList宸茶幏鍙栨椂锛岀‘淇濇樉绀烘纭�
+  }
+}, {deep: true});
+
+// 鐩戝惉userList鍙樺寲锛屽綋涓嬫媺鏁版嵁鍔犺浇瀹屾垚鍚庡鐞嗘樉绀�
+watch(userList, (newList) => {
+  if (newList.length > 0 && tableData.value.length > 0) {
+    // 寮哄埗瑙﹀彂琛ㄦ牸閲嶆柊娓叉煋浠ョ‘淇漞l-select姝ｇ‘鏄剧ず
+    nextTick(() => {
+      // 瑙﹀彂涓�涓井灏忕殑鏁版嵁鍙樺寲鏉ュ己鍒堕噸鏂版覆鏌�
+      const tempData = [...tableData.value];
+      tableData.value = tempData;
+    });
+  }
+}, {deep: true});
+
+const getUserNameById = (id) => {
+  const producer = userList.value.find(item => item.key == id);
+  return producer ? producer.value : id;
+};
+// 澶勭悊鐢ㄦ埛閫夋嫨鍙樺寲锛堟柊鏂规硶锛氬悕绉伴�夋嫨杞琁D锛�
+const handleUserSelectChange = (row, selectedName) => {
+  // 鏍规嵁閫夋嫨鐨勫悕绉版壘鍒板搴旂殑ID
+  const userItem = userList.value.find(item => item.value === selectedName);
+  if (userItem) {
+    row.producer = userItem.key; // 璁剧疆涓篒D
+  } else {
+    row.producer = ''; // 濡傛灉娌℃壘鍒帮紝娓呯┖
+  }
+};
 // 鏆撮湶鏂规硶缁欑埗缁勪欢浣跨敤
 defineExpose({
   calculateTotalCost,
+  getDropdownData,
+  getUserList,
+  getCoalNameById, // 鏆撮湶鑾峰彇鐓ょ鍚嶇О鐨勬柟娉�
+  weekList, // 鏆撮湶weekList璁╃埗缁勪欢鍙互璁块棶
   addRow: (rowData = {}) => {
     const defaultRow = {
-      coal: '',
-      calorificValue: '',
-      productionQuantity: '',
-      laborCost: '',
-      energyCost: '',
-      equipmentDepreciation: '',
-      purchasePrice: '',
-      totalCost: '',
-      ...rowData
-    }
-    tableData.value = [...tableData.value, defaultRow]
+      coalId: "",
+      calorificValue: "",
+      productionQuantity: "",
+      laborCost: "",
+      energyCost: "",
+      equipmentDepreciation: "",
+      purchasePrice: "",
+      totalCost: "",
+      producer: "",
+      ...rowData,
+    };
+    tableData.value = [...tableData.value, defaultRow];
   },
   clearData: () => {
-    tableData.value = []
+    tableData.value = [];
+  },
+  // 娣诲姞涓�涓柟娉曟潵绛夊緟weekList鍔犺浇瀹屾垚
+  waitForWeekList: () => {
+    return new Promise((resolve) => {
+      if (weekList.value.length > 0) {
+        resolve();
+      } else {
+        const unwatch = watch(weekList, (newList) => {
+          if (newList.length > 0) {
+            unwatch();
+            resolve();
+          }
+        });
+      }
+    });
+  },
+  // 寮哄埗鍒锋柊琛ㄦ牸鏄剧ず
+  forceRefresh: () => {
+    nextTick(() => {
+      const tempData = [...tableData.value];
+      tableData.value = tempData;
+    });
   }
-})
+});
 </script>
 
 <style scoped>

--
Gitblit v1.9.3