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

klp-ui/src/views/aps/quickSheetPreview.vue

@@ -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));