feat(wms报表): 添加列设置功能并重构表格组件
引入可配置的列设置功能，允许用户自定义表格显示列 创建CoilTable通用组件替换原有表格实现 添加列设置对话框和默认列配置初始化逻辑
This commit is contained in:
砂糖
86
klp-ui/src/views/wms/report/components/coilTable/index.vue
Normal file
86
klp-ui/src/views/wms/report/components/coilTable/index.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="coil-table">
|
||||
<!-- 其他props -->
|
||||
<el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border>
|
||||
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.title" :width="column.width" :align="column.align">
|
||||
<template slot-scope="scope">
|
||||
<!-- 特殊 prop 渲染逻辑 -->
|
||||
<template v-if="column.prop === 'enterCoilNo'">
|
||||
<coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
|
||||
</template>
|
||||
<template v-else-if="column.prop === 'currentCoilNo'">
|
||||
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
|
||||
</template>
|
||||
<template v-else-if="column.prop === 'itemId'">
|
||||
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
|
||||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
|
||||
</template>
|
||||
<template v-else-if="column.prop === 'status'">
|
||||
{{ scope.row.status === 0 ? '在库' : '已出库' }}
|
||||
</template>
|
||||
<!-- 默认渲染 -->
|
||||
<template v-else>
|
||||
{{ scope.row[column.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-if="showPagination"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size.sync="pageSize"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
|
||||
|
||||
export default {
|
||||
name: 'CoilTable',
|
||||
components: {
|
||||
ProductInfo,
|
||||
RawMaterialInfo,
|
||||
CoilNo,
|
||||
},
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 内部实现前端分页逻辑
|
||||
tableData() {
|
||||
return this.data.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
|
||||
},
|
||||
// 计算总页数
|
||||
totalPage() {
|
||||
return Math.ceil(this.data.length / this.pageSize)
|
||||
},
|
||||
// 计算总条数
|
||||
total() {
|
||||
return this.data.length
|
||||
},
|
||||
// 是否展示分页组件
|
||||
showPagination() {
|
||||
return this.totalPage > 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
275
klp-ui/src/views/wms/report/components/setting/columns.vue
Normal file
275
klp-ui/src/views/wms/report/components/setting/columns.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="moveUp(scope.$index)" :disabled="scope.$index === 0 || scope.row._isEmpty">上移</el-button>
|
||||
<el-button size="mini" @click="moveDown(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) => propChange(value, scope.row)" size="small">
|
||||
<el-option v-for="item in optionalProps" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="表头名称">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.title" @blur="saveColumns" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="width" label="宽度(不填则均分剩余宽度)">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.width" @blur="saveColumns" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="align" label="对齐方式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.align" @change="saveColumns" 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ColumnsSetting",
|
||||
props: {
|
||||
// 拼接key
|
||||
reportType: {
|
||||
type: String,
|
||||
default: 'coil-report-loss',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
storageKey: 'preference-tableColumns',
|
||||
columns: [
|
||||
{
|
||||
title: "入场钢卷号",
|
||||
prop: "enterCoilNo",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "当前钢卷号",
|
||||
prop: "currentCoilNo",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "操作完成时间",
|
||||
prop: "actionCompleteTime",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "生产开始时间",
|
||||
prop: "productionStartTime",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "生产结束时间",
|
||||
prop: "productionEndTime",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "逻辑库区",
|
||||
prop: "warehouseName",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "产品类型",
|
||||
prop: "itemId",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "宽度",
|
||||
prop: "computedWidth",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "厚度",
|
||||
prop: "computedThickness",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "重量",
|
||||
prop: "netWeight",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "长度",
|
||||
prop: "length",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "生产线速度",
|
||||
prop: "productionSpeed",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
prop: "remark",
|
||||
width: "100",
|
||||
align: "center",
|
||||
},
|
||||
],
|
||||
// 可选的prop
|
||||
optionalProps: [
|
||||
{ label: '入场钢卷号', value: 'enterCoilNo' },
|
||||
{ label: '当前钢卷号', value: 'currentCoilNo' },
|
||||
{ label: '逻辑库区', value: 'warehouseName' },
|
||||
{ label: '实际库区', value: 'actualWarehouseName' },
|
||||
{ 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: 'exportTime' },
|
||||
],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
reportType: {
|
||||
handler(newVal, oldVal) {
|
||||
this.loadColumns()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 完整的storageKey
|
||||
completeStorageKey() {
|
||||
return this.storageKey + '-' + this.reportType
|
||||
},
|
||||
// 显示的列数据
|
||||
displayColumns() {
|
||||
// 复制原始列数据
|
||||
const displayData = [...this.columns]
|
||||
// 添加一个空行
|
||||
displayData.push({
|
||||
title: "",
|
||||
prop: "",
|
||||
width: "100",
|
||||
align: "center",
|
||||
_isEmpty: true
|
||||
})
|
||||
return displayData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadColumns()
|
||||
// this.$nextTick(() => {
|
||||
// this.initDragSort()
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
moveUp(index) {
|
||||
if (index > 0 && !this.displayColumns[index]._isEmpty) {
|
||||
const temp = this.columns[index]
|
||||
this.columns.splice(index, 1)
|
||||
this.columns.splice(index - 1, 0, temp)
|
||||
this.saveColumns()
|
||||
}
|
||||
},
|
||||
moveDown(index) {
|
||||
if (index < this.columns.length - 1 && !this.displayColumns[index]._isEmpty) {
|
||||
const temp = this.columns[index]
|
||||
this.columns.splice(index, 1)
|
||||
this.columns.splice(index + 1, 0, temp)
|
||||
this.saveColumns()
|
||||
}
|
||||
},
|
||||
removeColumn(index) {
|
||||
if (!this.displayColumns[index]._isEmpty) {
|
||||
this.columns.splice(index, 1)
|
||||
this.saveColumns()
|
||||
}
|
||||
},
|
||||
saveColumns() {
|
||||
// 只存储非空行
|
||||
const nonEmptyColumns = this.columns.filter(col => col.prop && col.title)
|
||||
localStorage.setItem(this.completeStorageKey, JSON.stringify(nonEmptyColumns))
|
||||
},
|
||||
propChange(propValue, row) {
|
||||
// 查找对应的label
|
||||
const item = this.optionalProps.find(item => item.value === propValue)
|
||||
if (item) {
|
||||
row.title = item.label
|
||||
} else {
|
||||
row.title = propValue
|
||||
}
|
||||
|
||||
// 如果是空行且已经填写了prop，则添加到实际列中
|
||||
if (row._isEmpty && propValue) {
|
||||
const newColumn = {
|
||||
title: row.title,
|
||||
prop: row.prop,
|
||||
width: row.width,
|
||||
align: row.align
|
||||
}
|
||||
this.columns.push(newColumn)
|
||||
this.saveColumns()
|
||||
} else {
|
||||
this.saveColumns()
|
||||
}
|
||||
},
|
||||
loadColumns() {
|
||||
const savedColumns = localStorage.getItem(this.completeStorageKey)
|
||||
if (savedColumns) {
|
||||
this.columns = JSON.parse(savedColumns)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
cursor: move;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user