feat(KLPTable): 增强浮层组件功能并优化表格显示

- 为浮层组件添加列数配置和排除列功能
- 优化浮层位置计算逻辑,防止超出视窗边界
- 调整表格列显示,移除不必要列并添加净重列
- 更新浮层样式,支持网格布局和响应式显示
- 扩展浮层配置项,支持更多自定义选项
This commit is contained in:
2026-04-18 10:23:24 +08:00
parent 3ad3fd2fee
commit dd27069b4c
3 changed files with 87 additions and 28 deletions

View File

@@ -45,8 +45,8 @@
clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
:multiple="true" />
<!-- <MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
:multiple="true" /> -->
<el-form-item v-if="showWaybill" label="发货状态">
<el-select v-model="queryParams.status" placeholder="请选择发货状态" clearable>
@@ -83,10 +83,6 @@
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
@click="handleCheck">修正</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
@click="handleDelete">删除</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportAll">导出</el-button>
</el-col>
@@ -115,11 +111,10 @@
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
</template>
</el-table-column>
<!-- <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" /> -->
<el-table-column label="净重" align="center" prop="netWeight" v-if="!hideWarehouseQuery" />
<el-table-column label="逻辑库位" align="center" prop="warehouseName" v-if="!hideWarehouseQuery" />
<el-table-column label="实际库区" align="center" prop="actualWarehouseName"
v-if="!hideWarehouseQuery && !showExportTime" />
<!-- <el-table-column label="物料类型" align="center" prop="materialType" /> -->
<el-table-column label="产品类型" align="center" width="180">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
@@ -128,7 +123,6 @@
</el-table-column>
<el-table-column v-if="showAbnormal" label="异常数量" align="center" prop="abnormalCount"></el-table-column>
<el-table-column label="长度 (米)" align="center" prop="length" v-if="showLength" />
<el-table-column label="更新时间" v-if="!showExportTime" align="center" prop="updateTime" />
<el-table-column label="发货时间" v-if="showExportTime" align="center" prop="exportTime" width="205">
<template slot-scope="scope">
<el-date-picker @change="handleExportTimeChange(scope.row)" v-if="canEditExportTime" style="width: 100%"
@@ -144,8 +138,7 @@
</el-select>
</template>
</el-table-column>
<el-table-column label="更新人" v-if="!showExportTime" align="center" prop="updateByName" />
<el-table-column label="关联信息" align="center" :show-overflow-tooltip="true">
<!-- <el-table-column label="关联信息" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 1 && scope.row.dataType === 1">
<el-tag type="warning" size="mini">来自母卷{{ scope.row.parentCoilNos }}</el-tag>
@@ -158,7 +151,7 @@
</span>
<span v-else></span>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column v-if="showGrade" label="质量状态" align="center" prop="qualityStatus">
<template slot-scope="scope">
@@ -280,7 +273,7 @@
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column prop="action" label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
预览标签
@@ -812,11 +805,19 @@ export default {
{ label: '净重', prop: 'netWeight' },
{ label: '毛重', prop: 'grossWeight' },
{ label: '备注', prop: 'remark' },
{ label: '创建人', prop: 'createBy' },
{ label: '创建时间', prop: 'createTime' },
{ label: '更新人', prop: 'updateBy' },
{ label: '更新时间', prop: 'updateTime' },
{ label: '质量状态', prop: 'qualityStatus' },
{ label: '原料材质', prop: 'packingStatus' },
{ label: '切边要求', prop: 'edgeRequirement' },
{ label: '包装要求', prop: 'packagingRequirement' },
{ label: '厂家', prop: 'itemManufacturer' },
{ label: '物料名称', prop: 'itemName' },
{ label: '材质', prop: 'material' },
{ label: '规格', prop: 'specification' },
{ label: '镀层质量', prop: 'zincLayer' },
{ label: '厂家', prop: 'manufacturer' },
{ label: '调制度', prop: 'temperGrade' },
{ label: '镀层种类', prop: 'coatingType' },
{ label: '实测长度(m)', prop: 'actualLength' },