DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
重构多选模式界面，使用拖拽面板展示已选钢卷列表
移除销售视角受限逻辑及相关样式
调整默认分页大小为50条
This commit is contained in:
砂糖
2026-05-07 11:08:05 +08:00
parent 89a079e49f
commit b129dd8f13
2 changed files with 146 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
klp-ui/src/components/CoilSelector/index.vue
View File

@@ -85,26 +85,90 @@
</el-form-item>
</el-form>
<!-- 数据表格 -->
<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" />
<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-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-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
style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; padding-top: 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>
</template>
<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>
<span class="stat-value">{{ totalCoils }}</span>
</div>
<div class="stat-item">
<span class="stat-label">总净重：</span>
<span class="stat-value">{{ totalNetWeight }}t</span>
</div>
</div>
</div>
<div class="selected-table-wrapper">
<el-table :data="selectedCoils" height="100%">
<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-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>
</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-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">
<!-- 自定义列 -->
@@ -116,48 +180,18 @@
<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;">
<span>
总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t
</span>
<!-- 分页 -->
<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 v-if="multiple && selectedCoils.length > 0" class="selected-stats">
<div class="stats-content">
<div class="stat-item">
<span class="stat-label">总卷数：</span>
<span class="stat-value">{{ totalCoils }}</span>
</div>
<div class="stat-item">
<span class="stat-label">总净重：</span>
<span class="stat-value">{{ totalNetWeight }}t</span>
</div>
<pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</div>
<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 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-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>
@@ -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;
}

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

@@ -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>