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/ProductionDetailsTable.vue |  358 +++++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 271 insertions(+), 87 deletions(-)

diff --git a/src/views/production/components/ProductionDetailsTable.vue b/src/views/production/components/ProductionDetailsTable.vue
index 678ab65..eb4091b 100644
--- a/src/views/production/components/ProductionDetailsTable.vue
+++ b/src/views/production/components/ProductionDetailsTable.vue
@@ -1,114 +1,140 @@
 <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 :data="tableData" :border="border" style="width: 100%">    
+    <el-table-column label="鐓ょ" min-width="120">
+      <template #default="{ row, $index }">
+        <el-select 
+          clearable 
+          :model-value="getCoalNameById(row.coal) || row.coal"
+          placeholder="璇烽�夋嫨鐓ょ"
+          @change="(value) => handleCoalSelectChange(row, value)"
+          filterable
+          :key="`coal-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" 
+        <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" 
+        <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" 
+        <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" 
+        <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" 
+        <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" 
+        <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" 
+        <el-button
+          type="danger"
+          size="small"
           @click="handleDelete($index)"
           :icon="Delete"
         >
@@ -120,93 +146,251 @@
 </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 { 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.coal = coalItem.key; // 璁剧疆涓篒D
+  } else {
+    row.coal = ''; // 濡傛灉娌℃壘鍒帮紝娓呯┖
+  }
+};
+
+// 鏍规嵁ID鑾峰彇鐓ょ鍚嶇О锛堢敤浜庢樉绀猴級
+const getCoalNameById = (id) => {
+  const coal = weekList.value.find(item => item.key == id);
+  return coal ? coal.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 getCoalFieldList()
+  res.data.forEach(item => {
+    let obj = {};
+    obj.value = item.fieldName;
+    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.fieldName,
+      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,
+  getCoalNameById, // 鏆撮湶鑾峰彇鐓ょ鍚嶇О鐨勬柟娉�
+  weekList, // 鏆撮湶weekList璁╃埗缁勪欢鍙互璁块棶
   addRow: (rowData = {}) => {
     const defaultRow = {
-      coal: '',
-      calorificValue: '',
-      productionQuantity: '',
-      laborCost: '',
-      energyCost: '',
-      equipmentDepreciation: '',
-      purchasePrice: '',
-      totalCost: '',
-      ...rowData
-    }
-    tableData.value = [...tableData.value, defaultRow]
+      coal: "",
+      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