feat(KLPTable): 添加表格浮层功能以显示详细信息

实现表格行悬浮显示详细信息的浮层功能,支持自定义浮层列配置
重构KLPTable组件结构,将浮层逻辑独立为子组件
在用户管理和钢卷管理页面应用新浮层功能
This commit is contained in:
砂糖
2025-11-29 14:10:04 +08:00
parent 4be3a5c1ab
commit 5501987fe5
4 changed files with 216 additions and 89 deletions

View File

@@ -69,15 +69,15 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="materialCoilList" @selection-change="handleSelectionChange">
<KLPTable v-loading="loading" :data="materialCoilList" @selection-change="handleSelectionChange" :floatLayer="true" :floatLayerConfig="floatLayerConfig">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" />
<el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" />
<!-- <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" /> -->
<el-table-column label="逻辑库位" align="center" prop="warehouseName" v-if="!hideWarehouseQuery" />
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" v-if="!hideWarehouseQuery" />
<el-table-column label="物料类型" align="center" prop="materialType" />
<el-table-column label="产品类型" align="center" prop="itemName">
<!-- <el-table-column label="物料类型" align="center" prop="materialType" /> -->
<el-table-column label="产品类型" align="center">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product">
<template slot-scope="{ product }">
@@ -107,14 +107,14 @@
</el-select>
</template>
</el-table-column>
<el-table-column label="班组" align="center" prop="team" />
<el-table-column label="毛重" align="center" prop="grossWeight" />
<el-table-column label="净重" align="center" prop="netWeight" />
<el-table-column v-if="querys.materialType === '成品'" label="质量状态" align="center" prop="qualityStatus" />
<!-- <el-table-column label="班组" align="center" prop="team" /> -->
<!-- <el-table-column label="毛重" align="center" prop="grossWeight" />
<el-table-column label="净重" align="center" prop="netWeight" /> -->
<!-- <el-table-column v-if="querys.materialType === '成品'" label="质量状态" align="center" prop="qualityStatus" />
<el-table-column v-if="querys.materialType === '成品'" label="切边要求" align="center" prop="trimmingRequirement" />
<el-table-column v-if="querys.materialType === '成品'" label="打包状态" align="center" prop="packingStatus" />
<el-table-column v-if="querys.materialType === '成品'" label="包装要求" align="center" prop="packagingRequirement" />
<el-table-column label="关联信息" align="center" prop="parentCoilNos" :show-overflow-tooltip="true">
<el-table-column v-if="querys.materialType === '成品'" label="包装要求" align="center" prop="packagingRequirement" /> -->
<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>
@@ -128,7 +128,7 @@
<span v-else></span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
<!-- <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/> -->
<el-table-column 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)">
@@ -139,7 +139,7 @@
<el-button size="mini" type="text" icon="el-icon-search" @click="handleTrace(scope.row)">追溯</el-button>
</template>
</el-table-column>
</el-table>
</KLPTable>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
@@ -367,6 +367,25 @@ export default {
visible: false,
data: {},
type: '2'
},
floatLayerConfig: {
columns: [
{ label: '入场钢卷号', prop: 'enterCoilNo' },
{ label: '当前钢卷号', prop: 'currentCoilNo' },
{ label: '厂家卷号', prop: 'supplierCoilNo' },
{ label: '逻辑库位', prop: 'warehouseName' },
{ label: '实际库位', prop: 'actualWarehouseName' },
{ label: '物料类型', prop: 'materialType' },
{ label: '班组', prop: 'team' },
{ label: '净重', prop: 'netWeight' },
{ label: '毛重', prop: 'grossWeight' },
{ label: '备注', prop: 'remark' },
{ label: '质量状态', prop: 'qualityStatus' },
{ label: '打包状态', prop: 'packingStatus' },
{ label: '切边要求', prop: 'edgeRequirement' },
{ label: '包装要求', prop: 'packagingRequirement' }
],
title: '详细信息'
}
};
},