From b129dd8f13c5da2339b1ac8ddd0234e1c7d66801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com> Date: Thu, 7 May 2026 11:08:05 +0800 Subject: [PATCH] =?UTF-8?q?refactor(CoilSelector):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=A4=9A=E9=80=89=E6=A8=A1=E5=BC=8F=E7=95=8C=E9=9D=A2=E5=B9=B6?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E9=94=80=E5=94=AE=E5=8F=97=E9=99=90=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构多选模式界面，使用拖拽面板展示已选钢卷列表 移除销售视角受限逻辑及相关样式 调整默认分页大小为50条 --- klp-ui/src/components/CoilSelector/index.vue | 261 ++++++++++-------- .../wms/delivery/components/detailTable.vue | 2 +- 2 files changed, 146 insertions(+), 117 deletions(-) diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue index fcfb86d1..c072d6b6 100644 --- a/klp-ui/src/components/CoilSelector/index.vue +++ b/klp-ui/src/components/CoilSelector/index.vue @@ -85,26 +85,90 @@ - - - - - - - - - - +
+ + + + +
+ +
- - - - - - + @@ -116,48 +180,18 @@ -
- -
- - 总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t - + +
+ + 总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t + - -
- - -
-
-
- 总卷数： - {{ totalCoils }} -
-
- 总净重： - {{ totalNetWeight }}t -
+
- - - - - - - - - - - - -
确认选择 取消 @@ -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; } diff --git a/klp-ui/src/views/wms/delivery/components/detailTable.vue b/klp-ui/src/views/wms/delivery/components/detailTable.vue index 42ccd83d..4d5f1a7b 100644 --- a/klp-ui/src/views/wms/delivery/components/detailTable.vue +++ b/klp-ui/src/views/wms/delivery/components/detailTable.vue @@ -8,7 +8,7 @@ 新增 - 批量新增