refactor(CoilSelector): 重构多选模式界面并移除销售受限逻辑

重构多选模式界面，使用拖拽面板展示已选钢卷列表
移除销售视角受限逻辑及相关样式
调整默认分页大小为50条

klp-ui/src/components/CoilSelector/index.vue

@@ -85,29 +85,14 @@
         </el-form-item>
       </el-form>
 
+      <div v-if="multiple" class="coil-selector-drag-panel">
+        <DragResizePanel direction="vertical" :initialSize="450" :minSize="200">
+          <template slot="panelA">
+            <div style="height: 100%; overflow-y: scroll; overflow-x: hidden;">
               <!-- 数据表格 -->
-      <el-table v-if="!salesRestricted" v-loading="loading" :data="coilList" @row-click="handleRowClick" height="400px"
+              <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick"
                 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" />
-        <el-table-column v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
-        <el-table-column v-if="orderBy" label="品质" prop="qualityStatus"></el-table-column>
-        <el-table-column v-if="orderBy" label="切边" prop="trimmingRequirement"></el-table-column>
-        <el-table-column v-if="orderBy" label="包装" prop="packagingRequirement"></el-table-column>
-        <el-table-column v-if="orderBy" label="镀层质量" prop="zincLayer"></el-table-column>
-      </el-table>
-
-      <div v-else>
-        <el-tabs type="card" v-model="currentTab" @tab-click="getList">
-          <el-tab-pane label="全部钢卷" name="all"></el-tab-pane>
-          <el-tab-pane label="我的钢卷" name="my"></el-tab-pane>
-        </el-tabs>
-
-        <!-- 增加 row-class-name 绑定，动态设置行样式 -->
-        <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" />
                 <el-table-column v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
@@ -116,10 +101,10 @@
                 <el-table-column v-if="orderBy" label="包装" prop="packagingRequirement"></el-table-column>
                 <el-table-column v-if="orderBy" label="镀层质量" prop="zincLayer"></el-table-column>
               </el-table>
-      </div>
 
               <!-- 分页 -->
-      <div style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px;">
+              <div
+                style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; padding-top: 10px;">
                 <span>
                   总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t
                 </span>
@@ -127,9 +112,12 @@
                 <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                   :limit.sync="queryParams.pageSize" @pagination="getList" />
               </div>
+            </div>
 
-
+          </template>
-      <div v-if="multiple && selectedCoils.length > 0" class="selected-stats">
+          <template slot="panelB">
+            <div v-if="selectedCoils.length > 0" class="panel-b-container">
+              <div class="selected-stats">
                 <div class="stats-content">
                   <div class="stat-item">
                     <span class="stat-label">总卷数：</span>
@@ -142,9 +130,10 @@
                 </div>
               </div>
 
-      <el-table v-if="multiple && selectedCoils.length > 0" :data="selectedCoils">
+              <div class="selected-table-wrapper">
-        <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
+                <el-table :data="selectedCoils" height="100%">
-          :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
+                  <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 v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
                   <el-table-column v-if="orderBy" label="品质" prop="qualityStatus"></el-table-column>
                   <el-table-column v-if="orderBy" label="切边" prop="trimmingRequirement"></el-table-column>
@@ -157,6 +146,51 @@
                     </template>
                   </el-table-column>
                 </el-table>
+              </div>
+            </div>
+
+            <div v-else class="empty-panel">
+              <el-descriptions title="提示" :column="1" border>
+                <el-descriptions-item label="说明">
+                  请从上方表格中选择钢卷
+                </el-descriptions-item>
+                <el-descriptions-item label="操作方式">
+                  点击上方表格行进行选择，再次点击可取消选择
+                </el-descriptions-item>
+                <el-descriptions-item label="已选数量">
+                  {{ totalCoils }} 卷
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </template>
+        </DragResizePanel>
+      </div>
+
+      <!-- 非多选模式的原始布局 -->
+      <div v-else>
+        <!-- 数据表格 -->
+        <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" />
+          <el-table-column v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
+          <el-table-column v-if="orderBy" label="品质" prop="qualityStatus"></el-table-column>
+          <el-table-column v-if="orderBy" label="切边" prop="trimmingRequirement"></el-table-column>
+          <el-table-column v-if="orderBy" label="包装" prop="packagingRequirement"></el-table-column>
+          <el-table-column v-if="orderBy" label="镀层质量" prop="zincLayer"></el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px;">
+          <span>
+            总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t
+          </span>
+
+          <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </div>
+      </div>
 
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="handleConfirm">确认选择</el-button>
@@ -195,6 +229,7 @@ import { defaultColumns } from './data';
 import ActualWarehouseSelect from '@/components/KLPService/ActualWarehouseSelect/index.vue';
 import WarehouseBirdMini from '@/views/wms/warehouse/components/WarehouseBirdMini.vue';
 import DragResizeBox from '@/components/DragResizeBox/index.vue';
+import DragResizePanel from '@/components/DragResizePanel/index.vue';
 import OrderDetail from '@/views/crm/components/OrderDetail.vue';
 
 export default {
@@ -205,6 +240,7 @@ export default {
     ActualWarehouseSelect,
     WarehouseBirdMini,
     DragResizeBox,
+    DragResizePanel,
     OrderDetail
   },
   dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer', 'coil_quality_status'],
@@ -255,11 +291,6 @@ export default {
       type: Array,
       default: () => []
     },
-    // 销售视角：钢卷受限访问
-    salesRestricted: {
-      type: Boolean,
-      default: false
-    },
     // 是否根据实际库区查询钢卷
     orderBy: {
       type: Boolean,
@@ -308,7 +339,6 @@ export default {
         dataType: 1 // 只查询当前数据，不查询历史数据
       },
       columns: defaultColumns,
-      currentTab: 'my',
       selectedCoils: [],
       warehouseList: [],
       selectedNodeId: null,
@@ -341,9 +371,6 @@ export default {
         }
       }
     },
-    currentUserId() {
-      return this.$store.getters.id;
-    },
     renderColumns() {
       // 如果有自定义列配置，使用它；否则使用默认列
       return this.coilColumn.length > 0 ? this.coilColumn : this.columns;
@@ -469,11 +496,6 @@ export default {
         classNames.push('selected-coil-row');
       }
 
-      // 销售受限模式下，判断当前行是否有权限
-      if (this.salesRestricted && row.saleId !== this.currentUserId) {
-        classNames.push('disabled-coil-row'); // 禁用行类名
-      }
-
       return classNames.join(' ');
     },
 
@@ -503,11 +525,6 @@ export default {
           ...this.filters,
         };
         queryPayload.selectType = queryPayload.itemType;
-        // 处于销售视角，且my视图时，只查询当前用户的钢卷
-        console.log('this.salesRestricted', this.salesRestricted, this.currentTab, this.currentUserId);
-        if (this.salesRestricted && this.currentTab === 'my') {
-          queryPayload.saleId = this.currentUserId;
-        }
         const response = await listMaterialCoil(queryPayload);
         const { pageNum, pageSize, excludeBound, orderBy, ...noPager } = queryPayload;
         getCoilStatisticsList(noPager).then((res) => {
@@ -555,7 +572,7 @@ export default {
     resetQuery() {
       this.queryParams = {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 50,
         currentCoilNo: null,
         grade: null,
         dataType: 1,
@@ -567,11 +584,6 @@ export default {
 
     // 点击表格行选择 - 新增禁用行拦截
     handleRowClick(row) {
-      // 销售受限模式下，拦截无权限行的点击
-      if (this.salesRestricted && row.saleId !== this.currentUserId) {
-        this.$message.warning('您没有权限选择此钢卷');
-        return; // 终止后续逻辑
-      }
       if (this.disableO) {
         // 并且钢卷的warehouseId不是1988150210872930306
         // 1988150380649967617
@@ -599,10 +611,6 @@ export default {
         this.$message.warning('请选择有效的钢卷数据');
         return;
       }
-      if (this.salesRestricted && row.saleId != this.currentUserId) {
-        this.$message.warning('您没有权限选择此钢卷');
-        return;
-      }
       if (this.multiple) {
         // 检查是否已经选择
         if (this.selectedCoils.some(item => item.coilId === row.coilId)) {
@@ -724,6 +732,59 @@ export default {
   overflow-y: auto;
 }
 
+// 多选模式拖拽面板容器样式
+.coil-selector-drag-panel {
+  height: 70vh;
+  max-height: 700px;
+}
+
+// panelA容器样式
+.panel-a-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+// 表格容器样式
+.table-wrapper {
+  flex: 1;
+  overflow: hidden;
+}
+
+// 分页容器样式
+.pagination-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  padding-top: 10px;
+}
+
+// panelB容器样式
+.panel-b-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+// 已选表格容器样式
+.selected-table-wrapper {
+  flex: 1;
+  overflow: hidden;
+}
+
+// 空面板样式
+.empty-panel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 20px;
+}
+
 ::v-deep .el-table {
   --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
 }
@@ -748,38 +809,6 @@ export default {
   }
 }
 
-// 核心：禁用行样式（销售权限受限）
-::v-deep .el-table .disabled-coil-row {
-  background-color: #f8f8f8 !important;
-  color: #c0c4cc !important;
-  cursor: not-allowed !important;
-
-  // 覆盖hover高亮
-  &:hover>td {
-    background-color: #f8f8f8 !important;
-  }
-
-  // 覆盖当前行高亮
-  &.current-row {
-    background-color: #f8f8f8 !important;
-  }
-
-  // 禁止单元格交互
-  td {
-    pointer-events: none;
-    user-select: none; // 禁止文本选中
-  }
-
-  // 当同时是已选行时（优先级：禁用 > 已选）
-  &.selected-coil-row {
-    background-color: #f5f5f5 !important;
-
-    &:hover>td {
-      background-color: #f5f5f5 !important;
-    }
-  }
-}
-
 .dialog-footer {
   text-align: right;
 }

klp-ui/src/views/wms/delivery/components/detailTable.vue

@@ -8,7 +8,7 @@
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
         </el-col>
         <el-col :span="1.5">
-          <coil-selector dialogWidth="1200px" :use-trigger="true" multiple @confirm="handleBatchAdd" :orderId="orderId"
+          <coil-selector :use-trigger="true" multiple @confirm="handleBatchAdd" :orderId="orderId"
             :filters="{ selectType: 'product', status: 0, excludeBound: true, orderBy: true }" :orderBy="true" :disableO="true">
             <el-button type="primary" plain icon="el-icon-plus" size="mini">批量新增</el-button>
           </coil-selector>