From c1cfcfdeca01acf190ee93fee29aea57796702d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Thu, 29 Jan 2026 10:16:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8F=91=E8=B4=A7=E5=8D=95):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=89=B9=E9=87=8F=E6=96=B0=E5=A2=9E=E5=8F=91=E8=B4=A7?=
 =?UTF-8?q?=E5=8D=95=E6=98=8E=E7=BB=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增批量新增发货单明细API接口
- 在发货单明细表格中添加批量新增按钮
- 改造CoilSelector组件支持多选功能
- 将表单中的输入框改为下拉选择框提升用户体验
---
 klp-ui/src/api/wms/deliveryWaybillDetail.js   |   9 ++
 klp-ui/src/components/CoilSelector/index.vue  | 127 ++++++++++++++----
 .../wms/delivery/components/detailTable.vue   |  58 ++++++--
 3 files changed, 162 insertions(+), 32 deletions(-)

diff --git a/klp-ui/src/api/wms/deliveryWaybillDetail.js b/klp-ui/src/api/wms/deliveryWaybillDetail.js
index bc7c7a59..ed6227ef 100644
--- a/klp-ui/src/api/wms/deliveryWaybillDetail.js
+++ b/klp-ui/src/api/wms/deliveryWaybillDetail.js
@@ -42,3 +42,12 @@ export function delDeliveryWaybillDetail(detailId) {
     method: 'delete'
   })
 }
+
+// 批量新增发货单明细
+export function batchAddDeliveryWaybillDetail(data) {
+  return request({
+    url: '/wms/deliveryWaybillDetail/batch',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue
index 915dfd27..957d848e 100644
--- a/klp-ui/src/components/CoilSelector/index.vue
+++ b/klp-ui/src/components/CoilSelector/index.vue
@@ -2,23 +2,25 @@
   <div class="coil-selector-container">
     <div v-if="useTrigger" class="trigger-container">
       <!-- 选择按钮 -->
-      <slot>
-        <el-button type="primary" size="small" @click="handleOpen" class="select-button">
-          <i class="el-icon-search"></i>
-          <span v-if="selectedCoil">
-            <span>{{ selectedCoil.currentCoilNo }}</span>
-            <span>({{ selectedCoil.itemName }})</span>
-            <span>[{{ selectedCoil.netWeight }}t]</span>
-          </span>
-          <span v-else>{{ placeholder }}</span>
-        </el-button>
-      </slot>
+      <div @click="handleOpen">
+        <slot>
+          <el-button type="primary" size="small" class="select-button">
+            <i class="el-icon-search"></i>
+            <span v-if="selectedCoil">
+              <span>{{ selectedCoil.currentCoilNo }}</span>
+              <span>({{ selectedCoil.itemName }})</span>
+              <span>[{{ selectedCoil.netWeight }}t]</span>
+            </span>
+            <span v-else>{{ placeholder }}</span>
+          </el-button>
+        </slot>
+      </div>
     </div>
 
     <el-dialog title="选择钢卷" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
       @close="handleClose" append-to-body>
       <!-- 搜索区域 -->
-      <el-form v-if="!rangeMode" :inline="true" :model="queryParams" class="search-form">
+      <el-form v-if="!rangeMode" :model="queryParams" class="search-form">
         <!-- <el-form-item label="类型">
           <el-select v-model="queryParams.selectType" placeholder="请选择类型" size="small">
             <el-option label="成品" value="product" />
@@ -46,7 +48,8 @@
             clearable />
         </el-form-item>
         <el-form-item label="实际库区" v-if="orderBy">
-          <actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择实际库区" canSelectLevel2 canSelectDisabled />
+          <actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择实际库区" canSelectLevel2
+            canSelectDisabled />
         </el-form-item>
 
         <el-form-item>
@@ -56,8 +59,7 @@
       </el-form>
 
       <!-- 数据表格 -->
-      <el-table v-if="!salesRestricted" v-loading="loading" :data="coilList" @row-click="handleRowClick"
-        highlight-current-row height="400px" style="width: 100%">
+      <el-table v-if="!salesRestricted" v-loading="loading" :data="coilList" @row-click="handleRowClick" height="400px" style="width: 100%" :row-class-name="getRowClassName">
         <!-- 自定义列 -->
         <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
           :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
@@ -70,9 +72,8 @@
         </el-tabs>
 
         <!-- 增加 row-class-name 绑定，动态设置行样式 -->
-        <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" 
-          highlight-current-row height="400px" style="width: 100%"
-          :row-class-name="tableRowClassName"> <!-- 新增行类名绑定 -->
+        <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" height="400px"
+          style="width: 100%" :row-class-name="getRowClassName">
           <!-- 自定义列 -->
           <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align"
             :prop="column.prop" :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
@@ -83,7 +84,19 @@
       <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize" @pagination="getList" />
 
+      <el-table v-if="multiple && selectedCoils.length > 0" :data="selectedCoils">
+        <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
+          :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
+
+        <el-table-column label="操作" width="50">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleRemove(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
       <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleConfirm">确认选择</el-button>
         <el-button @click="handleClose">取消</el-button>
       </div>
     </el-dialog>
@@ -162,6 +175,10 @@ export default {
       type: Boolean,
       default: false
     },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -187,6 +204,7 @@ export default {
       },
       columns: defaultColumns,
       currentTab: 'my',
+      selectedCoils: [],
     };
   },
   computed: {
@@ -216,6 +234,14 @@ export default {
     renderColumns() {
       // 如果有自定义列配置，使用它；否则使用默认列
       return this.coilColumn.length > 0 ? this.coilColumn : this.columns;
+    },
+    // 已选钢卷ID集合（用于快速判断）
+    selectedCoilIds() {
+      if (this.multiple) {
+        return new Set(this.selectedCoils.map(item => item.coilId));
+      } else {
+        return this.selectedCoil ? new Set([this.selectedCoil.coilId]) : new Set();
+      }
     }
   },
   watch: {
@@ -262,13 +288,31 @@ export default {
     }
   },
   methods: {
-    // 表格行类名动态生成 - 核心：区分权限行/禁用行
-    tableRowClassName({ row }) {
+    // 动态生成表格行类名 - 综合处理选中、禁用等状态
+    getRowClassName({ row }) {
+      const classNames = [];
+      
+      // 检查是否为已选中的钢卷
+      if (this.selectedCoilIds.has(row.coilId)) {
+        classNames.push('selected-coil-row');
+      }
+      
       // 销售受限模式下，判断当前行是否有权限
       if (this.salesRestricted && row.saleId !== this.currentUserId) {
-        return 'disabled-coil-row'; // 禁用行类名
+        classNames.push('disabled-coil-row'); // 禁用行类名
       }
-      return '';
+      
+      return classNames.join(' ');
+    },
+
+    handleRemove(row) {
+      this.selectedCoils = this.selectedCoils.filter(item => item.coilId !== row.coilId);
+    },
+
+    handleConfirm() {
+      this.$emit('confirm', this.selectedCoils);
+      this.selectedCoils = [];
+      this.handleClose();
     },
 
     // 获取钢卷列表
@@ -362,8 +406,19 @@ export default {
         this.$message.warning('您没有权限选择此钢卷');
         return;
       }
-      // 存储选中的钢卷数据
-      this.selectedCoil = row;
+      if (this.multiple) {
+        // 检查是否已经选择
+        if (this.selectedCoils.some(item => item.coilId === row.coilId)) {
+          // 再次点击删除
+          this.handleRemove(row);
+          return;
+        }
+        this.selectedCoils.push(row);
+        return;
+        // return;
+      } else {
+        this.selectedCoil = row;
+      }
       // 触发自定义事件，通知父组件选中结果（返回完整行数据）
       this.$emit('select', row);
       // 触发器模式下，支持v-model双向绑定
@@ -378,6 +433,7 @@ export default {
     // 清除选中状态
     handleClearSelection() {
       this.selectedCoil = null;
+      this.selectedCoils = []; // 清空多选数据
       this.$emit('input', '');
       this.$emit('change', '');
       this.$emit('clear', true); // 触发清除事件
@@ -486,6 +542,20 @@ export default {
   background-color: var(--el-color-primary-light-8) !important;
 }
 
+// 核心：已选钢卷样式（黄色背景）
+::v-deep .el-table .selected-coil-row {
+  background-color: #fffbe6 !important; /* 浅黄色背景 */
+  
+  &:hover > td {
+    background-color: #fff8d9 !important; /* hover时稍深一点的黄色 */
+  }
+  
+  // 当同时是当前行时
+  &.current-row {
+    background-color: #fff8d9 !important;
+  }
+}
+
 // 核心：禁用行样式（销售权限受限）
 ::v-deep .el-table .disabled-coil-row {
   background-color: #f8f8f8 !important;
@@ -507,6 +577,15 @@ export default {
     pointer-events: none;
     user-select: none; // 禁止文本选中
   }
+  
+  // 当同时是已选行时（优先级：禁用 > 已选）
+  &.selected-coil-row {
+    background-color: #f5f5f5 !important;
+    
+    &:hover > td {
+      background-color: #f5f5f5 !important;
+    }
+  }
 }
 
 .dialog-footer {
diff --git a/klp-ui/src/views/wms/delivery/components/detailTable.vue b/klp-ui/src/views/wms/delivery/components/detailTable.vue
index f7bd8cf1..fd3a6988 100644
--- a/klp-ui/src/views/wms/delivery/components/detailTable.vue
+++ b/klp-ui/src/views/wms/delivery/components/detailTable.vue
@@ -6,6 +6,12 @@
         <el-col :span="1.5">
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
         </el-col>
+        <el-col :span="1.5">
+          <coil-selector :use-trigger="true" multiple @confirm="handleBatchAdd"
+            :filters="{ selectType: 'product', status: 0, excludeBound: true, orderBy: true }" :orderBy="true">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini">批量新增</el-button>
+          </coil-selector>
+        </el-col>
         <el-col :span="1.5">
           <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
         </el-col>
@@ -48,20 +54,30 @@
       <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="发货钢卷" prop="coilId">
           <div style="display: flex; gap: 10px;">
-            <coil-selector v-model="form.coilId" :use-trigger="true" 
-              :filters="{ selectType: 'product', status: 0, excludeBound: true, orderBy: true }" 
-              @select="handleSelect" :orderBy="true" />
+            <coil-selector v-model="form.coilId" :use-trigger="true"
+              :filters="{ selectType: 'product', status: 0, excludeBound: true, orderBy: true }" @select="handleSelect"
+              :orderBy="true" />
             <el-checkbox v-model="autoFillForm" label="自动填写表单信息" />
           </div>
         </el-form-item>
         <el-form-item label="品名" prop="productName">
-          <el-input v-model="form.productName" placeholder="请输入品名" />
+          <el-select v-model="form.productName" placeholder="请选择品名" style="width: 100%">
+            <el-option v-for="item in dict.type.coil_itemname" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
         </el-form-item>
         <el-form-item label="切边" prop="edgeType">
-          <el-input v-model="form.edgeType" placeholder="请输入切边" />
+          <el-select v-model="form.edgeType" placeholder="请选择切边" style="width: 100%">
+            <el-option label="净边料" value="净边料" />
+            <el-option label="毛边料" value="毛边料" />
+          </el-select>
         </el-form-item>
         <el-form-item label="包装" prop="packaging">
-          <el-input v-model="form.packaging" placeholder="请输入包装" />
+          <el-select v-model="form.packaging" placeholder="请选择包装" style="width: 100%">
+            <el-option label="裸包" value="裸包" />
+            <el-option label="普包" value="普包" />
+            <el-option label="简包" value="简包" />
+          </el-select>
         </el-form-item>
         <el-form-item label="结算方式" prop="settlementType">
           <el-input v-model="form.settlementType" placeholder="请输入结算方式" />
@@ -100,7 +116,7 @@
 </template>
 
 <script>
-import { listDeliveryWaybillDetail, getDeliveryWaybillDetail, delDeliveryWaybillDetail, addDeliveryWaybillDetail, updateDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
+import { listDeliveryWaybillDetail, getDeliveryWaybillDetail, delDeliveryWaybillDetail, addDeliveryWaybillDetail, updateDeliveryWaybillDetail, batchAddDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
 import CoilSelector from "@/components/CoilSelector";
 
 export default {
@@ -115,6 +131,7 @@ export default {
       default: () => []
     }
   },
+  dicts: ['coil_itemname'],
   components: {
     CoilSelector
   },
@@ -122,7 +139,7 @@ export default {
     waybillId: {
       handler(newVal, oldVal) {
         // if (newVal) {
-          this.getList();
+        this.getList();
         // }
       },
       immediate: true
@@ -293,6 +310,31 @@ export default {
         }
       });
     },
+    handleBatchAdd(rows) {
+      console.log(rows);
+      const payload = rows.map(coil => ({
+        waybillId: this.waybillId,
+        coilId: coil.coilId,
+        productName: coil.itemName,
+        edgeType: coil.trimmingRequirement,
+        packaging: coil.packagingRequirement,
+        rawMaterialFactory: coil.manufacturer,
+        coilNo: coil.currentCoilNo,
+        specification: coil.specification,
+        material: coil.material,
+        quantity: 1,
+        weight: coil.netWeight,
+      }))
+      this.loading = true;
+      this.buttonLoading = true;
+      batchAddDeliveryWaybillDetail(payload).then(response => {
+        this.$modal.msgSuccess("新增成功");
+        this.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+        this.loading = false;
+      });
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const detailIds = row.detailId || this.ids;