From 88389b278165806313d1f382da205caabbfe698a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com> Date: Mon, 11 May 2026 11:51:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(CoilSelector):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E9=92=A2=E5=8D=B7=E9=80=89=E6=8B=A9=E5=99=A8=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E5=92=8C=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构钢卷选择器组件布局，改进多选模式下的用户体验。主要变更包括： 1. 调整列顺序和显示内容，优化表格布局 2. 添加全选当前页和清除全部功能按钮 3. 修复对话框滚动问题，优化样式 4. 完善已选钢卷统计区域的布局 5. 增加备注列显示 --- klp-ui/src/assets/styles/element-ui.scss | 3 +- klp-ui/src/components/CoilSelector/data.js | 29 +- klp-ui/src/components/CoilSelector/index.vue | 393 +++++++++++-------- 3 files changed, 243 insertions(+), 182 deletions(-) diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss index 9a16eafb..8e0d00d7 100644 --- a/klp-ui/src/assets/styles/element-ui.scss +++ b/klp-ui/src/assets/styles/element-ui.scss @@ -947,7 +947,8 @@ body { .el-dialog.is-fullscreen { .el-dialog__body { padding: $--spacing-lg; - max-height: calc(100vh - 100px); + height: calc(100vh - 100px); + max-height: 100vh; overflow-y: auto; } } diff --git a/klp-ui/src/components/CoilSelector/data.js b/klp-ui/src/components/CoilSelector/data.js index 3bcbc004..1234331d 100644 --- a/klp-ui/src/components/CoilSelector/data.js +++ b/klp-ui/src/components/CoilSelector/data.js @@ -1,5 +1,4 @@ -export const defaultColumns = [ - { +export const defaultColumns = [{ label: '入场卷号', align: 'center', prop: 'enterCoilNo', @@ -30,6 +29,12 @@ export const defaultColumns = [ prop: 'specification', width: '100' }, + { + label: '重量(t)', + align: 'center', + prop: 'netWeight', + width: '100' + }, { label: '材质', align: 'center', @@ -42,12 +47,6 @@ export const defaultColumns = [ prop: 'manufacturer', width: '100' }, - { - label: '重量(t)', - align: 'center', - prop: 'netWeight', - width: '100' - }, { label: '库区', align: 'center', @@ -62,10 +61,10 @@ export const defaultColumns = [ width: '100', showOverflowTooltip: true }, - { - label: '备注', - align: 'center', - prop: 'remark', - showOverflowTooltip: true - } -] \ No newline at end of file + // { + // label: '备注', + // align: 'center', + // prop: 'remark', + // showOverflowTooltip: true + // } +] diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue index c072d6b6..26701f9c 100644 --- a/klp-ui/src/components/CoilSelector/index.vue +++ b/klp-ui/src/components/CoilSelector/index.vue @@ -19,179 +19,190 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - 搜索 - 重置 - 显示钢卷地图 - 显示订单详情 - - + + 搜索 + 重置 + 全选当前卷 + 显示钢卷地图 + 显示订单详情 + + -
- - - + + +
+ + +
+ + + + + + + + + + + + + +
+ + 总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t + + + +
+
确认选择 取消 @@ -503,6 +514,42 @@ export default { this.selectedCoils = this.selectedCoils.filter(item => item.coilId !== row.coilId); }, + // 全选当前页 + handleSelectAllCurrentPage() { + if (!this.multiple) return; + + const warehouseIds = ['1988150210872930306', '1988150380649967617', '1988150800092950529', '1988151027466170370']; + const disabledOList = ['O', 'C+', 'C', 'C-', 'D+', 'D', 'D-']; + + // 遍历当前页的所有钢卷 + this.coilList.forEach(row => { + // 检查是否已选中 + if (this.selectedCoils.some(item => item.coilId === row.coilId)) { + return; + } + + // 禁用O卷检查逻辑 + if (this.disableO) { + // 如果没有判级且不在指定库区，不能选择 + if (!row.qualityStatus && !warehouseIds.includes(row.warehouseId)) { + return; + } + // 如果是禁用等级，不能选择 + if (disabledOList.includes(row.qualityStatus)) { + return; + } + } + + // 添加到已选列表 + this.selectedCoils.push(row); + }); + }, + + // 全部清除已选 + handleClearAllSelected() { + this.selectedCoils = []; + }, + handleConfirm() { this.$emit('confirm', this.selectedCoils); this.selectedCoils = []; @@ -526,7 +573,7 @@ export default { }; queryPayload.selectType = queryPayload.itemType; const response = await listMaterialCoil(queryPayload); - const { pageNum, pageSize, excludeBound, orderBy, ...noPager } = queryPayload; + const { pageNum, pageSize, orderBy, ...noPager } = queryPayload; getCoilStatisticsList(noPager).then((res) => { console.log('钢卷统计数据:', res); this.coilTrimStatistics = res.data || {}; @@ -665,6 +712,13 @@ export default { gap: 8px; } +.coil-selector-drag-panel { + flex: 1; + min-height: 0; + overflow: hidden; + box-sizing: border-box; +} + // 未选择状态样式 .no-selection { padding: 8px 12px; @@ -727,15 +781,11 @@ export default { } ::v-deep .el-dialog__body { - padding: 20px; + padding: 0 !important; max-height: calc(100vh - 200px); - overflow-y: auto; -} - -// 多选模式拖拽面板容器样式 -.coil-selector-drag-panel { - height: 70vh; - max-height: 700px; + min-height: 500px; + overflow-y: hidden !important; + box-sizing: border-box; } // panelA容器样式 @@ -768,12 +818,19 @@ export default { flex-direction: column; height: 100%; overflow: hidden; + min-height: 0; + max-height: 100%; + box-sizing: border-box; } // 已选表格容器样式 .selected-table-wrapper { flex: 1; - overflow: hidden; + overflow-y: hidden; + overflow-x: hidden; + min-height: 0; + max-height: calc(100% - 30px); + box-sizing: border-box; } // 空面板样式 @@ -815,6 +872,10 @@ export default { // 已选钢卷统计信息样式 .selected-stats { + display: flex; + justify-content: space-between; + align-items: center; + .stats-content { display: flex; gap: 24px;