282 lines
8.6 KiB
Vue
282 lines
8.6 KiB
Vue
<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: '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: '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> |