feat(wms报表): 添加列设置功能并重构表格组件
引入可配置的列设置功能，允许用户自定义表格显示列 创建CoilTable通用组件替换原有表格实现 添加列设置对话框和默认列配置初始化逻辑
This commit is contained in:
砂糖
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