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

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

@@ -18,31 +18,34 @@
         </el-select>
         <el-input v-model="filter.customer" size="small" clearable placeholder="客户" style="width: 160px" @input="onFilterChange" />
         <el-button size="small" icon="el-icon-refresh" @click="loadRows">刷新</el-button>
+        <el-button size="small" icon="el-icon-setting" @click="columnSettingVisible = true">列设置</el-button>
         <el-button size="small" icon="el-icon-download" @click="exportExcel">导出</el-button>
       </div>
     </div>
 
     <div class="sheet-body">
       <el-table
+        ref="quickSheetPreviewTable"
         v-loading="loading"
         :data="displayRows"
         border
         size="mini"
         class="excel-table"
       >
-        <el-table-column label="序号" width="60" align="center">
+        <el-table-column label="序号" width="60" align="center" fixed="left">
           <template slot-scope="scope">
             {{ ((pager.pageNum - 1) * pager.pageSize) + scope.$index + 1 }}
           </template>
         </el-table-column>
         <el-table-column
-          v-for="col in flatColumns"
+          v-for="col in displayColumns"
           :key="col.prop || col.label"
           :label="col.label"
           :prop="col.prop"
           :width="col.width"
           :min-width="col.minWidth"
           :align="col.align || 'center'"
+          :fixed="fixedProps.includes(col.prop) ? 'left' : false"
           :show-overflow-tooltip="col.showOverflowTooltip !== false"
         />
       </el-table>
@@ -57,6 +60,25 @@
         />
       </div>
     </div>
+
+    <el-drawer
+      title="列设置"
+      :visible.sync="columnSettingVisible"
+      direction="rtl"
+      size="55%"
+      append-to-body>
+      <div class="col-setting-body">
+        <div class="col-setting-toolbar">
+          <el-button size="mini" @click="restoreDefaultColumns">恢复默认</el-button>
+        </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>
 </template>
 
@@ -65,9 +87,11 @@ import { fetchQuickSheetList, exportQuickSheet } from '@/api/aps/quickSheet'
 import { listProductionLine } from '@/api/wms/productionLine'
 import { getTemplateByKey } from './sheets/templates'
 import { saveAs } from 'file-saver'
+import draggable from 'vuedraggable'
 
 export default {
   name: 'ApsQuickSheetPreview',
+  components: { draggable },
   data() {
     return {
       loading: false,
@@ -81,7 +105,9 @@ export default {
       pager: {
         pageNum: 1,
         pageSize: 25
-      }
+      },
+      columnSettingVisible: false,
+      columnSettingList: []
     }
   },
   computed: {
@@ -97,7 +123,20 @@ export default {
         })
       }
       loop(this.currentTemplate.columns || [])
-      return res
+      return res.filter(c => c && c.prop)
+    },
+    displayColumns() {
+      const setting = this.columnSettingList || []
+      const hasSetting = setting.length > 0
+      const base = this.flatColumns
+
+      const selected = hasSetting
+        ? setting.filter(i => i.visible).map(i => base.find(c => c.prop === i.prop)).filter(Boolean)
+        : base
+
+      const selectedSet = new Set(selected.map(c => c.prop))
+      const rest = base.filter(c => !selectedSet.has(c.prop))
+      return [...selected, ...rest]
     },
     filteredRows() {
       const [startAfter, endBefore] = this.filter.range || []
@@ -129,10 +168,60 @@ export default {
     const today = new Date()
     const start = `${today.getFullYear()}-${`${today.getMonth() + 1}`.padStart(2, '0')}-${`${today.getDate()}`.padStart(2, '0')}`
     this.filter.range = [start, '']
+    this.initColumnSettings()
     this.loadRows()
     this.loadLines()
   },
+  beforeDestroy() {
+    this.persistColumnSettings()
+  },
   methods: {
+    initColumnSettings() {
+      const key = this.getColumnSettingKey()
+      const stored = localStorage.getItem(key)
+      const base = this.flatColumns.map(col => ({ prop: col.prop, label: col.label, visible: true }))
+      if (!stored) {
+        this.columnSettingList = base
+        return
+      }
+      try {
+        const parsed = JSON.parse(stored)
+        if (!Array.isArray(parsed)) {
+          this.columnSettingList = base
+          return
+        }
+        const map = new Map(parsed.map(item => [item.prop, item]))
+        const merged = base.map(item => {
+          const saved = map.get(item.prop)
+          return saved ? { ...item, visible: saved.visible !== false } : item
+        })
+        const savedProps = parsed.map(i => i.prop)
+        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 }
+        }), ...extras]
+      } catch (e) {
+        this.columnSettingList = base
+      }
+    },
+    persistColumnSettings() {
+      const key = this.getColumnSettingKey()
+      const payload = (this.columnSettingList || []).map(item => ({
+        prop: item.prop,
+        label: item.label,
+        visible: item.visible !== false
+      }))
+      localStorage.setItem(key, JSON.stringify(payload))
+    },
+    restoreDefaultColumns() {
+      const base = this.flatColumns.map(col => ({ prop: col.prop, label: col.label, visible: true }))
+      this.columnSettingList = base
+      this.persistColumnSettings()
+    },
+    getColumnSettingKey() {
+      return 'apsQuickSheetPreviewColumns_unified'
+    },
     async loadLines() {
       const res = await listProductionLine({ pageNum: 1, pageSize: 1000 })
       this.lineOptions = res.rows || []
@@ -222,4 +311,44 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+
+.col-setting-body {
+  padding: 12px;
+  height: calc(100% - 12px);
+  overflow: hidden;
+}
+
+.col-setting-toolbar {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.col-setting-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.col-setting-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  background: #fff;
+  margin-bottom: 0;
+  min-height: 38px;
+}
+
+.col-setting-item:hover {
+  border-color: #d9ecff;
+  background: #f5faff;
+}
+
+.drag-handle {
+  cursor: move;
+  color: #909399;
+}
 </style>