From 78d422f3f76474c762b21931a2712bd5b0710e6a Mon Sep 17 00:00:00 2001
From: huangjinysf <huangjinysf@163.com>
Date: Mon, 29 Dec 2025 16:43:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E6=8F=90=E5=8F=96=20WM?=
 =?UTF-8?q?S=20=E8=A1=A8=E6=A0=BC=E4=B8=BA=E7=8B=AC=E7=AB=8B=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 EnamellingMachineStatus.vue 中的 WMS 表格逻辑提取为独立组件 WmsTable
优化数据加载和修改逻辑，减少重复代码
添加组件 props 和 emits 实现更好的封装和复用
---
 src/components/WmsTable/index.vue          | 233 +++++++++++++++++++++
 src/views/plan/EnamellingMachineStatus.vue |  83 +++-----
 2 files changed, 266 insertions(+), 50 deletions(-)
 create mode 100644 src/components/WmsTable/index.vue

diff --git a/src/components/WmsTable/index.vue b/src/components/WmsTable/index.vue
new file mode 100644
index 0000000..eabb829
--- /dev/null
+++ b/src/components/WmsTable/index.vue
@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <div v-if="loading" v-loading="true" :style="{ height: loadingHeight + 'px', marginBottom: '20px' }"></div>
+    <el-table 
+      v-else-if="data.length > 0" 
+      :data="data" 
+      border 
+      style="width: 100%; margin-bottom: 20px;"
+      :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
+      :max-height="maxHeight"
+    >
+      <el-table-column prop="model" label="型号" width="120" />
+      <el-table-column prop="specification" label="规格" width="120" />
+      <el-table-column prop="wire_disc" label="线盘" width="120" />
+      <el-table-column prop="total_number" label="总箱数" width="100" />
+      <el-table-column label="最小箱数" width="120">
+        <template #default="scope">
+          <el-input 
+            v-model="scope.row.warning_number_min" 
+            type="number" 
+            size="small"
+            @input="onValueChange(scope.$index)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="最大箱数" width="120">
+        <template #default="scope">
+          <el-input 
+            v-model="scope.row.warning_number_max" 
+            type="number" 
+            size="small"
+            @input="onValueChange(scope.$index)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="total_gross_weight" label="总毛重(kg)" width="120" />
+      <el-table-column v-if="showAction" label="操作" width="100" fixed="right">
+        <template #default="scope">
+          <el-button 
+            type="success" 
+            size="small"
+            :disabled="!modifiedFlags[scope.$index]"
+            @click="handleSubmit(scope.$index)"
+          >
+            提交修改
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div v-else class="no-data" :style="{ height: loadingHeight + 'px' }">
+      暂无数据
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { API_CONFIG } from "@/config/api"
+
+const props = defineProps({
+  model: {
+    type: String,
+    default: ''
+  },
+  specification: {
+    type: String,
+    default: ''
+  },
+  loadingHeight: {
+    type: Number,
+    default: 200
+  },
+  maxHeight: {
+    type: Number,
+    default: 300
+  },
+  showAction: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['data-loaded', 'modified'])
+
+const loading = ref(false)
+const data = ref([])
+const modifiedFlags = ref({})
+const originalData = ref({})
+
+const buildKey = (item) => {
+  return `${item.model}_${item.specification}_${item.wire_disc || 'null'}`
+}
+
+const recordOriginalData = () => {
+  originalData.value = {}
+  modifiedFlags.value = {}
+  data.value.forEach((item, index) => {
+    const key = buildKey(item)
+    originalData.value[key] = {
+      warning_number_min: item.warning_number_min,
+      warning_number_max: item.warning_number_max
+    }
+    modifiedFlags.value[index] = false
+  })
+}
+
+const fetchData = async () => {
+  if (!props.model || !props.specification) {
+    data.value = []
+    return
+  }
+  
+  loading.value = true
+  
+  const apiUrl = `${API_CONFIG.BASE_URL}/api/wms/records/model-spec?model=${encodeURIComponent(props.model)}&specification=${encodeURIComponent(props.specification)}`
+  
+  try {
+    const response = await fetch(apiUrl)
+    const result = await response.json()
+    
+    if (result.code === 200 && result.data && result.data.records) {
+      data.value = result.data.records
+      recordOriginalData()
+      emit('data-loaded', data.value)
+    } else {
+      data.value = []
+      emit('data-loaded', [])
+    }
+  } catch (error) {
+    console.error('WMS数据API调用失败:', error)
+    data.value = []
+    emit('data-loaded', [])
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (props.model && props.specification) {
+    fetchData()
+  }
+})
+
+const onValueChange = (index) => {
+  const item = data.value[index]
+  if (!item) return
+  
+  const key = buildKey(item)
+  const original = originalData.value[key]
+  
+  if (original) {
+    const isModified = item.warning_number_min !== original.warning_number_min || 
+                       item.warning_number_max !== original.warning_number_max
+    modifiedFlags.value[index] = isModified
+    emit('modified', { index, modified: isModified, item })
+  }
+}
+
+const handleSubmit = async (index) => {
+  const item = data.value[index]
+  if (!item) return
+  
+  const params = new URLSearchParams({
+    model: item.model,
+    specification: item.specification,
+    warning_number_min: item.warning_number_min || 0,
+    warning_number_max: item.warning_number_max || 300
+  })
+  
+  if (item.wire_disc) {
+    params.append('wire_disc', item.wire_disc)
+  }
+  
+  const apiUrl = `${API_CONFIG.BASE_URL}/api/wms/warning/upsert?${params.toString()}`
+  
+  try {
+    const response = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    
+    const result = await response.json()
+    
+    if (result.code === 200) {
+      const key = buildKey(item)
+      originalData.value[key] = {
+        warning_number_min: item.warning_number_min,
+        warning_number_max: item.warning_number_max
+      }
+      modifiedFlags.value[index] = false
+      console.log('WMS修改成功')
+    } else {
+      console.error('WMS修改失败:', result.message)
+      item.warning_number_min = originalData.value[key]?.warning_number_min
+      item.warning_number_max = originalData.value[key]?.warning_number_max
+    }
+  } catch (error) {
+    console.error('WMS修改API调用失败:', error)
+  }
+}
+
+const isModified = (index) => {
+  return modifiedFlags.value[index] || false
+}
+
+watch(
+  () => [props.model, props.specification],
+  ([newModel, newSpecification]) => {
+    if (newModel && newSpecification) {
+      fetchData()
+    }
+  },
+  { immediate: true }
+)
+
+defineExpose({
+  fetchData,
+  isModified,
+  data
+})
+</script>
+
+<style scoped>
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/plan/EnamellingMachineStatus.vue b/src/views/plan/EnamellingMachineStatus.vue
index e0c7cd9..969809c 100644
--- a/src/views/plan/EnamellingMachineStatus.vue
+++ b/src/views/plan/EnamellingMachineStatus.vue
@@ -185,54 +185,14 @@
       destroy-on-close
       @close="closeChart"
     >
-      <div v-if="wmsDataLoading" v-loading="true" style="height: 200px; margin-bottom: 20px;"></div>
-      <el-table 
-        v-else-if="wmsData.length > 0" 
-        :data="wmsData" 
-        border 
-        style="width: 100%; margin-bottom: 20px;"
-        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
-        max-height="300"
-      >
-        <el-table-column prop="model" label="型号" width="120" />
-        <el-table-column prop="specification" label="规格" width="120" />
-        <el-table-column prop="wire_disc" label="线盘" width="120" />
-        <!-- <el-table-column prop="date" label="日期" width="120" /> -->
-        <el-table-column prop="total_number" label="总箱数" width="100" />
-        <el-table-column label="最小箱数" width="120">
-          <template #default="scope">
-            <el-input 
-              v-model="scope.row.warning_number_min" 
-              type="number" 
-              size="small"
-              @input="onWmsValueChange(scope.$index)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="最大箱数" width="120">
-          <template #default="scope">
-            <el-input 
-              v-model="scope.row.warning_number_max" 
-              type="number" 
-              size="small"
-              @input="onWmsValueChange(scope.$index)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column prop="total_gross_weight" label="总毛重(kg)" width="120" />
-        <el-table-column label="操作" width="100" fixed="right">
-          <template #default="scope">
-            <el-button 
-              type="success" 
-              size="small"
-              :disabled="!wmsModifiedFlags[scope.$index]"
-              @click="submitWmsModification(scope.$index)"
-            >
-              提交修改
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <WmsTable 
+        ref="wmsTableDialogRef"
+        :model="currentSalesAxle?.model"
+        :specification="currentSalesAxle?.specification"
+        :loading-height="200"
+        :show-action="true"
+        @data-loaded="onWmsDataLoaded"
+      />
       <div class="chart-controls">
         <span class="filter-label">时间范围:</span>
         <el-select v-model="selectedTimeRange" @change="onChartTimeRangeChange" style="width: 120px">
@@ -260,6 +220,14 @@
         <h4>销售历史 - {{ salesChartTitle }}</h4>
         <el-button size="small" @click="closeChart">关闭</el-button>
       </div>
+      <WmsTable 
+        ref="wmsTableRef"
+        :model="currentSalesAxle?.model"
+        :specification="currentSalesAxle?.specification"
+        :loading-height="200"
+        :show-action="true"
+        @data-loaded="onWmsDataLoaded"
+      />
       <div class="chart-controls">
         <span class="filter-label">时间范围:</span>
         <el-select v-model="selectedTimeRange" @change="onChartTimeRangeChange" style="width: 120px">
@@ -288,6 +256,7 @@ import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { API_CONFIG } from "@/config/api"
 import { getDateRangeByTimeRange } from '@/utils/dateFormat';
 import * as echarts from 'echarts';
+import WmsTable from '@/components/WmsTable/index.vue'
 
 // 接收从父组件传递的数据
 const props = defineProps({
@@ -323,6 +292,8 @@ const salesChartTitle = ref('')
 const currentSalesAxle = ref(null)
 const salesChartRef = ref(null)
 const salesChartDialogRef = ref(null)
+const wmsTableRef = ref(null)
+const wmsTableDialogRef = ref(null)
 let salesChart = null
 
 // 销售图表相关状态
@@ -556,7 +527,7 @@ const onCompletionLevelChange = () => {
 };
 
 // 方法：显示销售历史图表
-const showSalesHistory = (row) => {
+const showSalesHistory = async (row) => {
   if (!row.update_time || !row.model || !row.specification) {
     console.error('缺少必要的数据参数');
     return;
@@ -579,7 +550,13 @@ const showSalesHistory = (row) => {
   
   fetchSalesData(row.model, row.specification);
   fetchHistoryData(row.model, row.specification, row.wire_disc);
-  fetchWmsData(row.model, row.specification);
+  
+  await nextTick()
+  if (selectedEquipment.value === 'all' && wmsTableDialogRef.value) {
+    wmsTableDialogRef.value.fetchData()
+  } else if (showChart.value && wmsTableRef.value) {
+    wmsTableRef.value.fetchData()
+  }
 };
 
 // 方法：关闭图表
@@ -592,6 +569,12 @@ const closeChart = () => {
   }
 };
 
+// WmsTable组件数据加载完成回调
+const onWmsDataLoaded = (loadedData) => {
+  wmsData.value = loadedData
+  recordWmsOriginalData()
+};
+
 // 方法：图表时间范围变化
 const onChartTimeRangeChange = () => {
   if (currentSalesAxle.value) {