🦄 refactor: 封装统一表格组件，便于批量扩展表格能力

klp-ui/src/views/wms/order/components/CurrentSituationArea.vue

@@ -8,7 +8,7 @@
             <span>订单所需的产品统计</span>
           </div>
           <div class="table-container">
-            <el-table :data="orderProductStatistics" size="small" height="320"
+            <KLPTable :data="orderProductStatistics" size="small" height="320"
               v-loading="!orderProductStatistics.length">
               <el-table-column prop="productName" label="产品名称" width="120" />
               <el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
@@ -21,7 +21,7 @@
                 </template>
               </el-table-column>
               <el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
-            </el-table>
+            </KLPTable>
             <div v-if="!orderProductStatistics.length" class="empty-data">
               <i class="el-icon-warning-outline"></i>
               <p>暂无数据</p>
@@ -37,7 +37,7 @@
             <span>BOM原料需求</span>
           </div>
           <div class="table-container">
-            <el-table :data="productMaterialRequirements" size="small" height="320"
+            <KLPTable :data="productMaterialRequirements" size="small" height="320"
               v-loading="!productMaterialRequirements.length">
               <el-table-column prop="productName" label="产品" width="100" />
               <el-table-column prop="materialName" label="原料" width="100" />
@@ -51,7 +51,7 @@
                   </span>
                 </template>
               </el-table-column>
-            </el-table>
+            </KLPTable>
             <div v-if="!productMaterialRequirements.length" class="empty-data">
               <i class="el-icon-warning-outline"></i>
               <p>暂无数据</p>
@@ -67,7 +67,7 @@
             <span>原料库存情况</span>
           </div>
           <div class="table-container">
-            <el-table :data="rawMaterialInventory" size="small" height="320" v-loading="!rawMaterialInventory.length">
+            <KLPTable :data="rawMaterialInventory" size="small" height="320" v-loading="!rawMaterialInventory.length">
               <el-table-column prop="materialName" label="原料名称" width="120" />
               <el-table-column prop="currentStockQuantity" label="库存" width="60" />
               <el-table-column prop="inTransitQuantity" label="在途" width="60" />
@@ -86,7 +86,7 @@
                   </el-tag>
                 </template>
               </el-table-column>
-            </el-table>
+            </KLPTable>
             <div v-if="!rawMaterialInventory.length" class="empty-data">
               <i class="el-icon-warning-outline"></i>
               <p>暂无数据</p>
@@ -102,7 +102,7 @@
           <span>订单所需的产品统计</span>
         </div>
         <div class="table-container">
-          <el-table :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
+          <KLPTable :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
             <el-table-column prop="productName" label="产品名称" />
             <el-table-column prop="orderDemandQuantity" label="需求数量" />
             <el-table-column prop="currentStockQuantity" label="库存数量" />
@@ -114,7 +114,7 @@
               </template>
             </el-table-column>
             <el-table-column prop="relatedOrderCount" label="相关订单" />
-          </el-table>
+          </KLPTable>
           <div v-if="!orderProductStatistics.length" class="empty-data">
             <i class="el-icon-warning-outline"></i>
             <p>暂无数据</p>

klp-ui/src/views/wms/order/components/RecommendationArea.vue

@@ -8,7 +8,7 @@
             <span>订单维度推荐</span>
           </div>
           <div class="table-container">
-            <el-table :data="orderRecommendations" size="small" height="320" v-loading="!orderRecommendations.length">
+            <KLPTable :data="orderRecommendations" size="small" height="320" v-loading="!orderRecommendations.length">
               <el-table-column prop="orderCode" label="订单编号" width="120" />
               <el-table-column prop="customerName" label="客户名称" width="100" />
               <el-table-column prop="orderStatus" label="订单状态" width="80" />
@@ -22,7 +22,7 @@
               <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
               <el-table-column prop="suggestedAction" label="建议操作" width="100" />
               <el-table-column prop="estimatedCompletionTime" label="预计完成时间" width="120" />
-            </el-table>
+            </KLPTable>
             <div v-if="!orderRecommendations.length" class="empty-data">
               <i class="el-icon-warning-outline"></i>
               <p>暂无推荐数据</p>
@@ -38,7 +38,7 @@
             <span>原料维度推荐</span>
           </div>
           <div class="table-container">
-            <el-table :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
+            <KLPTable :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
               <el-table-column prop="materialName" label="原料名称" width="120" />
               <el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
               <el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
@@ -52,7 +52,7 @@
               <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
               <el-table-column prop="suggestedAction" label="建议操作" width="100" />
               <el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
-            </el-table>
+            </KLPTable>
             <div v-if="!materialRecommendations.length" class="empty-data">
               <i class="el-icon-warning-outline"></i>
               <p>暂无推荐数据</p>
@@ -65,7 +65,7 @@
     <div class="recommendation-area-mini" v-else>
       <el-card shadow="hover" class="recommendation-card">
           <div class="table-container">
-            <el-table :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
+            <KLPTable :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
               <el-table-column prop="materialName" label="原料名称" width="120" />
               <el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
               <el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
@@ -79,7 +79,7 @@
               <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
               <el-table-column prop="suggestedAction" label="建议操作" width="100" />
               <el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
-            </el-table>
+            </KLPTable>
             <div v-if="!materialRecommendations.length" class="empty-data">
               <i class="el-icon-warning-outline"></i>
               <p>暂无推荐数据</p>

klp-ui/src/views/wms/order/customer.vue

@@ -75,7 +75,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
       <el-table-column label="客户名称" align="center" prop="name" />
@@ -109,7 +109,7 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+    </KLPTable>
 
     <pagination
       v-show="total>0"
@@ -173,10 +173,14 @@
 
 <script>
 import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/wms/customer";
+import KLPTable from '@/components/KLPUI/KLPTable/index.vue';
 
 export default {
   name: "Customer",
   dicts: ['customer_from'],
+  components: {
+    KLPTable
+  },
   data() {
     return {
       // 按钮loading

klp-ui/src/views/wms/order/panels/detail.vue

@@ -34,7 +34,7 @@
       </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="orderDetailList">
+    <KLPTable v-loading="loading" :data="orderDetailList">
       <el-table-column label="产品" align="center">
         <template slot-scope="scope">
           <ProductInfo :product-id="scope.row.productId">
@@ -63,7 +63,7 @@
             @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+    </KLPTable>
 
     <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" /> -->
@@ -126,6 +126,7 @@ import { EOrderStatus } from "@/utils/enums";
 import { ProductInfo } from '@/components/KLPService';
 import BomInfoMini from '@/components/KLPService/Renderer/BomInfoMini.vue';
 import ProductSpec from './spec.vue';
+import KLPTable from '@/components/KLPUI/KLPTable/index.vue';
 
 export default {
   name: "OrderDetailPanel",
@@ -140,7 +141,8 @@ export default {
     ProductSelect,
     ProductInfo,
     BomInfoMini,
-    ProductSpec
+    ProductSpec,
+    KLPTable
   },
   data() {
     return {

klp-ui/src/views/wms/order/panels/spec.vue

@@ -42,7 +42,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="productSpecList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="productSpecList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="specId" v-if="false"/>
       <el-table-column label="所属产品规范组ID" align="center" prop="groupId" />
@@ -65,7 +65,7 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+    </KLPTable>
 
     <pagination
       v-show="total>0"

klp-ui/src/views/wms/order/status.vue

@@ -51,7 +51,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="字典编码" align="center" prop="dictCode" />
       <el-table-column label="字典标签" align="center" prop="dictLabel">
@@ -89,7 +89,7 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+    </KLPTable>
 
     <pagination
       v-show="total>0"