DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

快速排查新增字段与前端保存逻辑

Browse Source
This commit is contained in:
86156
2026-03-23 15:39:02 +08:00
parent 7f8a927502
commit f87ac6149c
1 changed files with 86 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
klp-ui/src/views/aps/quickSheetPreview.vue
View File

@@ -66,17 +66,36 @@
:visible.sync="columnSettingVisible"
direction="rtl"
size="55%"
append-to-body>
append-to-body
@open="resetColumnDraft">
<div class="col-setting-body">
<div class="col-setting-toolbar">
<el-button size="mini" @click="restoreDefaultColumns">恢复默认</el-button>
<el-button size="mini" @click="resetColumnDraft">重置</el-button>
<el-button size="mini" type="primary" @click="saveColumnSettings">保存</el-button>
</div>
<div class="col-section">
<div class="col-section-title">固定列（最多5列）</div>
<draggable v-model="fixedColumnList" handle=".drag-handle" animation="200" class="col-setting-grid">
<div v-for="item in fixedColumnList" :key="`fixed-${item.prop}`" class="col-setting-item">
<i class="el-icon-rank drag-handle" />
<span class="col-label">{{ item.label }}</span>
<el-button type="text" size="mini" @click="removeFromFixed(item.prop)">移除</el-button>
</div>
</draggable>
</div>
<div class="col-section">
<div class="col-section-title">其他列</div>
<draggable v-model="normalColumnList" handle=".drag-handle" animation="200" class="col-setting-grid">
<div v-for="item in normalColumnList" :key="`normal-${item.prop}`" class="col-setting-item">
<i class="el-icon-rank drag-handle" />
<span class="col-label">{{ item.label }}</span>
<el-button type="text" size="mini" @click="addToFixed(item.prop)">加入固定</el-button>
</div>
</draggable>
</div>
<draggable v-model="columnSettingList" handle=".drag-handle" animation="200" @change="persistColumnSettings" class="col-setting-grid">
<div v-for="item in columnSettingList" :key="item.prop" class="col-setting-item">
<i class="el-icon-rank drag-handle" />
<el-checkbox v-model="item.visible" @change="persistColumnSettings">{{ item.label }}</el-checkbox>
</div>
</draggable>
</div>
</el-drawer>
</div>
@@ -107,7 +126,9 @@ export default {
pageSize: 25
},
columnSettingVisible: false,
columnSettingList: []
columnSettingList: [],
fixedColumnList: [],
normalColumnList: []
}
},
computed: {
@@ -138,6 +159,9 @@ export default {
const rest = base.filter(c => !selectedSet.has(c.prop))
return [...selected, ...rest]
},
fixedProps() {
return (this.columnSettingList || []).filter(i => i.visible && i.fixed).map(i => i.prop).slice(0, 5)
},
filteredRows() {
const [startAfter, endBefore] = this.filter.range || []
const lineName = (this.filter.lineName || '').trim()
@@ -179,7 +203,7 @@ export default {
initColumnSettings() {
const key = this.getColumnSettingKey()
const stored = localStorage.getItem(key)
const base = this.flatColumns.map(col => ({ prop: col.prop, label: col.label, visible: true }))
const base = this.flatColumns.map((col, idx) => ({ prop: col.prop, label: col.label, visible: true, fixed: idx < 5 }))
if (!stored) {
this.columnSettingList = base
return
@@ -199,24 +223,63 @@ export default {
const extras = base.filter(i => !savedProps.includes(i.prop))
this.columnSettingList = [...parsed.filter(i => base.some(b => b.prop === i.prop)).map(i => {
const match = base.find(b => b.prop === i.prop)
return { ...match, visible: i.visible !== false }
return { ...match, visible: i.visible !== false, fixed: i.fixed === true }
}), ...extras]
this.resetColumnDraft()
} catch (e) {
this.columnSettingList = base
this.resetColumnDraft()
}
},
resetColumnDraft() {
const fixed = (this.columnSettingList || []).filter(i => i.visible && i.fixed).slice(0, 5)
const normal = (this.columnSettingList || []).filter(i => !i.fixed || !i.visible)
this.fixedColumnList = fixed.map(i => ({ ...i, visible: true, fixed: true }))
this.normalColumnList = normal.map(i => ({ ...i, visible: true, fixed: false }))
},
saveColumnSettings() {
const fixed = (this.fixedColumnList || []).map(i => ({ ...i, visible: true, fixed: true }))
const normal = (this.normalColumnList || []).map(i => ({ ...i, fixed: false }))
this.columnSettingList = [...fixed, ...normal]
this.persistColumnSettings()
this.columnSettingVisible = false
this.pager.pageNum = 1
this.loadRows().finally(() => {
this.$nextTick(() => {
this.$refs.quickSheetPreviewTable && this.$refs.quickSheetPreviewTable.doLayout && this.$refs.quickSheetPreviewTable.doLayout()
})
})
},
addToFixed(prop) {
if ((this.fixedColumnList || []).length >= 5) {
this.$message.warning('固定列最多5列')
return
}
const idx = (this.normalColumnList || []).findIndex(i => i.prop === prop)
if (idx < 0) return
const item = this.normalColumnList.splice(idx, 1)[0]
this.fixedColumnList.push({ ...item, fixed: true, visible: true })
},
removeFromFixed(prop) {
const idx = (this.fixedColumnList || []).findIndex(i => i.prop === prop)
if (idx < 0) return
const item = this.fixedColumnList.splice(idx, 1)[0]
this.normalColumnList.push({ ...item, fixed: false, visible: true })
},
persistColumnSettings() {
const key = this.getColumnSettingKey()
const payload = (this.columnSettingList || []).map(item => ({
prop: item.prop,
label: item.label,
visible: item.visible !== false
visible: item.visible !== false,
fixed: item.fixed === true
}))
localStorage.setItem(key, JSON.stringify(payload))
},
restoreDefaultColumns() {
const base = this.flatColumns.map(col => ({ prop: col.prop, label: col.label, visible: true }))
const base = this.flatColumns.map((col, idx) => ({ prop: col.prop, label: col.label, visible: true, fixed: idx < 5 }))
this.columnSettingList = base
this.resetColumnDraft()
this.persistColumnSettings()
},
getColumnSettingKey() {
@@ -324,6 +387,17 @@ export default {
justify-content: flex-end;
}
.col-section {
margin-bottom: 12px;
}
.col-section-title {
font-size: 13px;
font-weight: 600;
color: #303133;
margin-bottom: 8px;
}
.col-setting-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));