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

feat(CoilSelector): 新增列配置功能并优化表格列展示

Browse Source 
- 拆分默认列和全屏列配置，新增可选列列表
- 新增自定义列配置弹窗，支持调整列顺序、宽度、对齐方式和字段映射
- 优化搜索区域布局，新增列配置按钮
- 移除硬编码的表格列，改用动态渲染配置列
- 修复选中表格高度适配问题，固定操作列位置
This commit is contained in:
砂糖
2026-05-13 15:21:02 +08:00
parent 58c5130162
commit c737f7f661
2 changed files with 386 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
klp-ui/src/components/CoilSelector/data.js
View File

@@ -1,4 +1,5 @@
export const defaultColumns = [{
export const defaultColumns = [
{
label: '入场卷号',
align: 'center',
prop: 'enterCoilNo',
@@ -61,10 +62,149 @@ export const defaultColumns = [{
width: '100',
showOverflowTooltip: true
},
// {
// label: '备注',
// align: 'center',
// prop: 'remark',
// showOverflowTooltip: true
// }
{
label: '备注',
align: 'center',
prop: 'remark',
showOverflowTooltip: true
},
]
export const fullPageDefaultColumns = [
{
label: '入场卷号',
align: 'center',
prop: 'enterCoilNo',
showOverflowTooltip: true
},
{
label: '当前卷号',
align: 'center',
prop: 'currentCoilNo',
showOverflowTooltip: true
},
{
label: '存储位置',
align: 'center',
prop: 'actualWarehouseName',
width: '120',
showOverflowTooltip: true
},
{
label: '物料',
align: 'center',
prop: 'itemName',
width: '100'
},
{
label: '规格',
align: 'center',
prop: 'specification',
width: '100'
},
{
label: '重量(t)',
align: 'center',
prop: 'netWeight',
width: '100'
},
{
label: '材质',
align: 'center',
prop: 'material',
width: '100'
},
{
label: '厂家',
align: 'center',
prop: 'manufacturer',
width: '100'
},
{
label: '库区',
align: 'center',
prop: 'warehouseName',
width: '120',
showOverflowTooltip: true
},
{
label: '创建时间',
align: 'center',
prop: 'createTime',
width: '100',
showOverflowTooltip: true
},
{
label: '品质',
align: 'center',
prop: 'qualityStatus',
},
{
label: '表面处理',
align: 'center',
prop: 'surfaceTreatmentDesc',
},
{
label: '备注',
align: 'center',
prop: 'remark',
width: '100',
showOverflowTooltip: true
},
{
label: '切边',
align: 'center',
prop: 'trimmingRequirement',
},
{
label: '包装',
align: 'center',
prop: 'packagingRequirement',
},
{
label: '镀层质量',
align: 'center',
prop: 'zincLayer',
},
]
export const optionalColumns = [
{ label: '入场卷号', value: 'enterCoilNo' },
{ label: '当前卷号', value: 'currentCoilNo' },
{ label: '厂家钢卷号', value: 'supplierCoilNo' },
{ label: '逻辑库区', value: 'warehouseName' },
{ label: '实际库区', value: 'actualWarehouseName' },
{ label: '质量状态', value: 'qualityStatus' },
{ label: '切边要求', value: 'trimmingRequirement' },
{ label: '原料材质', value: 'packingStatus' },
{ label: '包装要求', value: 'packagingRequirement' },
{ label: '产品类型', value: 'itemId' },
{ label: '品名', value: 'itemName' },
{ label: '宽度', value: 'computedWidth' },
{ label: '厚度', value: 'computedThickness' },
{ label: '规格', value: 'specification' },
{ label: '材质', value: 'material' },
{ label: '厂家', value: 'manufacturer' },
{ label: '表面处理', value: 'surfaceTreatmentDesc' },
{ label: '镀层质量', value: 'zincLayer' },
{ label: '长度', value: 'length' },
{ label: '毛重', value: 'grossWeight' },
{ label: '净重', value: 'netWeight' },
{ label: '创建时间', value: 'createTime' },
{ label: '创建人', value: 'createBy' },
{ label: '更新时间', value: 'updateTime' },
{ label: '更新人', value: 'updateByName' },
{ label: '备注', value: 'remark' },
{ label: '生产开始时间', value: 'productionStartTime' },
{ label: '生产结束时间', value: 'productionEndTime' },
{ label: '生产耗时', value: 'productionDuration' },
{ label: '出库状态', value: 'status' },
{ label: '操作完成时间', value: 'actionCompleteTime' },
{ label: '生产线速度', value: 'productionSpeed' },
{ label: '发货绑定车牌号', value: 'bindLicensePlate' },
{ label: '发货绑定目标客户', value: 'bindConsigneeUnit' },
{ label: '发货绑定单位', value: 'bindSenderUnit' },
{ label: '发货绑定负责人', value: 'bindPrincipal' },
{ label: '发货配卷时间', value: 'bindDeliveryTime' },
{ label: '发货时间', value: 'exportTime' },
]

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

@@ -19,9 +19,11 @@
<el-dialog title="选择钢卷" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
@close="handleClose" append-to-body :fullscreen="orderBy">
<div style="height: 100%; overflow-y: scroll; overflow-x: hidden; display: flex; flex-direction: column; padding: 10px;">
<div
style="height: 100%; overflow-y: scroll; overflow-x: hidden; display: flex; flex-direction: column; padding: 10px;">
<!-- 搜索区域 -->
<el-form v-if="!rangeMode" inline :model="queryParams" class="search-form">
<div v-if="!rangeMode" style="margin-bottom: 10px; display: flex;">
<el-form inline :model="queryParams" class="search-form">
<el-form-item label="入场卷号">
<el-input v-model="queryParams.enterCoilNo" placeholder="请输入入场卷号" clearable size="small"
@keyup.enter.native="handleQuery" />
@@ -78,17 +80,25 @@
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
<el-button v-if="multiple" type="primary" size="small" icon="el-icon-check"
@click="handleSelectAllCurrentPage">全选当前卷</el-button>
<el-checkbox v-if="orderBy" style="margin-left: 10px;" v-model="showCoilMap"
size="small">显示钢卷地图</el-checkbox>
<el-checkbox v-if="orderBy && orderId" style="margin-left: 10px;" v-model="showOrderInfo"
size="small">显示订单详情</el-checkbox>
</el-form-item>
</el-form>
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px;">
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
<el-button type="warning" size="small" icon="el-icon-setting"
@click="showColumnSetting = true">列配置</el-button>
</div>
</div>
<div v-if="multiple" class="coil-selector-drag-panel">
<DragResizePanel direction="vertical" :initialSize="450" :minSize="200">
<template slot="panelA">
@@ -99,12 +109,6 @@
<!-- 自定义列 -->
<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="qualityStatus"></el-table-column>
<el-table-column v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
<el-table-column label="备注" prop="remark"></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>
<!-- 分页 -->
@@ -138,17 +142,11 @@
</div>
<div class="selected-table-wrapper">
<el-table :data="selectedCoils" height="100%">
<el-table :data="selectedCoils" :height="orderBy ? '100%' : '200px'">
<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="qualityStatus"></el-table-column>
<el-table-column v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
<el-table-column label="备注" prop="remark"></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">
<el-table-column label="操作" width="50" fixed="right">
<template slot-scope="scope">
<el-button size="mini" @click="handleRemove(scope.row)">删除</el-button>
</template>
@@ -182,12 +180,6 @@
<!-- 自定义列 -->
<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="qualityStatus"></el-table-column>
<el-table-column v-if="orderBy" label="表面处理" prop="surfaceTreatmentDesc"></el-table-column>
<el-table-column label="备注" prop="remark"></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>
<!-- 分页 -->
@@ -226,6 +218,52 @@
<order-detail v-if="orderBy && orderId && showOrderInfo" :orderId="orderId" :editable="false" />
</div>
</DragResizeBox>
<el-dialog title="列配置" :visible.sync="showColumnSetting" width="800px" append-to-body>
<el-table :data="displayColumns" style="width: 100%" border row-key="prop" height="400">
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button size="mini" @click="moveColumnUp(scope.$index)"
:disabled="scope.$index === 0 || scope.row._isEmpty">上移</el-button>
<el-button size="mini" @click="moveColumnDown(scope.$index)"
:disabled="scope.$index === displayColumns.length - 1 || scope.row._isEmpty">下移</el-button>
<el-button size="mini" type="danger" @click="removeColumn(scope.$index)"
:disabled="scope.row._isEmpty">删除</el-button>
</template>
</el-table-column>
<el-table-column prop="prop" label="字段名称">
<template slot-scope="scope">
<el-select v-model="scope.row.prop" filterable @change="(value) => columnPropChange(value, scope.row)"
size="small">
<el-option v-for="item in optionalColumns" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="label" label="表头名称">
<template slot-scope="scope">
<el-input v-model="scope.row.label" @blur="saveColumnConfig" size="small" />
</template>
</el-table-column>
<el-table-column prop="width" label="宽度(不填则均分剩余宽度)">
<template slot-scope="scope">
<el-input v-model="scope.row.width" @blur="saveColumnConfig" size="small" />
</template>
</el-table-column>
<el-table-column prop="align" label="对齐方式">
<template slot-scope="scope">
<el-select v-model="scope.row.align" @change="saveColumnConfig" size="small">
<el-option label="左对齐" value="left" />
<el-option label="居中" value="center" />
<el-option label="右对齐" value="right" />
</el-select>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="resetColumnConfig">恢复默认</el-button>
<el-button type="primary" @click="confirmColumnConfig">确定</el-button>
</div>
</el-dialog>
</el-dialog>
</div>
</template>
@@ -236,7 +274,7 @@ import { listActualWarehouse } from "@/api/wms/actualWarehouse";
import { treeActualWarehouseTwoLevel } from "@/api/wms/actualWarehouse";
import MemoInput from '@/components/MemoInput/index.vue';
import MutiSelect from '@/components/MutiSelect/index.vue';
import { defaultColumns } from './data';
import { defaultColumns, fullPageDefaultColumns, optionalColumns } 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';
@@ -323,7 +361,7 @@ export default {
defaultType: {
type: String,
default: 'product'
}
},
},
data() {
return {
@@ -346,10 +384,10 @@ export default {
actualWarehouseId: null,
itemType: this.defaultType,
selectType: this.defaultType,
status: 0, // 不包含已发货的钢卷
dataType: 1 // 只查询当前数据，不查询历史数据
status: 0,
dataType: 1
},
columns: defaultColumns,
optionalColumns,
selectedCoils: [],
warehouseList: [],
selectedNodeId: null,
@@ -359,6 +397,9 @@ export default {
treeLoading: false,
showOrderInfo: false,
coilTrimStatistics: {},
showColumnSetting: false,
columnsConfig: [],
columnsConfigVersion: 0,
};
},
computed: {
@@ -383,8 +424,37 @@ export default {
}
},
renderColumns() {
// 如果有自定义列配置，使用它；否则使用默认列
return this.coilColumn.length > 0 ? this.coilColumn : this.columns;
const _ = this.columnsConfigVersion;
if (this.coilColumn.length > 0) {
return this.coilColumn;
}
const storageKey = this.columnStorageKey;
const savedConfig = localStorage.getItem(storageKey);
if (savedConfig) {
try {
const config = JSON.parse(savedConfig);
if (config.length > 0) {
return config;
}
} catch (e) {
console.error('解析列配置失败', e);
}
}
return this.orderBy ? fullPageDefaultColumns : defaultColumns;
},
columnStorageKey() {
return `coil-selector-columns-${this.orderBy ? 'full' : 'default'}`;
},
displayColumns() {
const displayData = [...this.columnsConfig];
displayData.push({
label: "",
prop: "",
width: "100",
align: "center",
_isEmpty: true
});
return displayData;
},
// 已选钢卷ID集合（用于快速判断）
selectedCoilIds() {
@@ -411,7 +481,7 @@ export default {
dialogVisible(val) {
if (val) {
this.resetQuery();
this.getList();
// this.getList();
}
},
// 非触发器模式下，监听外部visible属性变化
@@ -438,9 +508,13 @@ export default {
return;
}
if (val && !this.selectedCoil?.coilId) {
// 如果传入了coilId但还没有选中数据，尝试通过id匹配（可选功能）
this.matchCoilById(val);
}
},
showColumnSetting(val) {
if (val) {
this.loadColumnConfig();
}
}
},
created() {
@@ -694,8 +768,78 @@ export default {
// 关闭对话框
handleClose() {
this.dialogVisible = false;
// 触发关闭事件，通知父组件
this.$emit('close');
},
confirmColumnConfig() {
this.saveColumnConfig();
this.loadColumnConfig();
this.showColumnSetting = false;
},
loadColumnConfig() {
const storageKey = this.columnStorageKey;
const savedConfig = localStorage.getItem(storageKey);
if (savedConfig) {
try {
this.columnsConfig = JSON.parse(savedConfig);
} catch (e) {
console.error('解析列配置失败', e);
this.columnsConfig = this.orderBy ? [...fullPageDefaultColumns] : [...defaultColumns];
}
} else {
this.columnsConfig = this.orderBy ? [...fullPageDefaultColumns] : [...defaultColumns];
}
},
saveColumnConfig() {
const nonEmptyColumns = this.columnsConfig.filter(col => col.prop && col.label);
localStorage.setItem(this.columnStorageKey, JSON.stringify(nonEmptyColumns));
this.columnsConfigVersion++;
},
moveColumnUp(index) {
if (index > 0 && !this.displayColumns[index]._isEmpty) {
const temp = this.columnsConfig[index];
this.columnsConfig.splice(index, 1);
this.columnsConfig.splice(index - 1, 0, temp);
this.saveColumnConfig();
}
},
moveColumnDown(index) {
if (index < this.columnsConfig.length - 1 && !this.displayColumns[index]._isEmpty) {
const temp = this.columnsConfig[index];
this.columnsConfig.splice(index, 1);
this.columnsConfig.splice(index + 1, 0, temp);
this.saveColumnConfig();
}
},
removeColumn(index) {
if (!this.displayColumns[index]._isEmpty) {
this.columnsConfig.splice(index, 1);
this.saveColumnConfig();
}
},
columnPropChange(propValue, row) {
const item = optionalColumns.find(item => item.value === propValue);
if (item) {
row.label = item.label;
} else {
row.label = propValue;
}
if (row._isEmpty && propValue) {
const newColumn = {
label: row.label,
prop: row.prop,
width: row.width,
align: row.align,
showOverflowTooltip: true
};
this.columnsConfig.push(newColumn);
this.saveColumnConfig();
} else {
this.saveColumnConfig();
}
},
resetColumnConfig() {
this.columnsConfig = this.orderBy ? [...fullPageDefaultColumns] : [...defaultColumns];
this.saveColumnConfig();
}
}
};