add fiel

src/utils/tableColumnControlHelper.ts

@@ -0,0 +1,157 @@
+/**
+ * TableColumnControl 集成辅助函数
+ * 提供通用的列配置加载和保存逻辑
+ */
+
+import { ref, Ref, computed, ComputedRef } from 'vue'
+import { useRoute } from 'vue-router'
+
+export interface ColumnConfig {
+  prop?: string
+  label: string
+  alwaysShow?: boolean
+  fixed?: boolean | 'left' | 'right'
+  minWidth?: number | string
+  width?: number | string
+  [key: string]: any
+}
+
+/**
+ * 创建列显隐控制相关的响应式数据和方法
+ * @param tableColumns 表格列配置数组
+ * @returns 返回 visibleColumns、columnOrder、loadSavedConfig、handleColumnChange、handleColumnOrderChange 等
+ */
+export function useTableColumnControl(tableColumns: ColumnConfig[]) {
+  const route = useRoute()
+  
+  // 当前显示的列
+  const visibleColumns = ref<string[]>([])
+  // 列排序顺序
+  const columnOrder = ref<string[]>([])
+
+  // 根据路由生成 storageKey
+  const getStorageKey = (suffix: string = '') => {
+    const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
+    return `table-columns-${routePath}${suffix ? `-${suffix}` : ''}`
+  }
+
+  // 立即从 localStorage 加载配置
+  const loadSavedConfig = () => {
+    const storageKey = getStorageKey()
+    const saved = localStorage.getItem(storageKey)
+    if (saved) {
+      try {
+        const savedColumns = JSON.parse(saved)
+        const validColumns = tableColumns
+          .filter(col => !col.alwaysShow && !col.fixed)
+          .map(col => col.prop || col.label)
+        const filteredSaved = savedColumns.filter((col: string) => validColumns.includes(col))
+        visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
+      } catch (e) {
+        console.error('解析列配置失败:', e)
+        visibleColumns.value = tableColumns
+          .filter(col => !col.alwaysShow && !col.fixed)
+          .map(col => col.prop || col.label)
+      }
+    } else {
+      visibleColumns.value = tableColumns
+        .filter(col => !col.alwaysShow && !col.fixed)
+        .map(col => col.prop || col.label)
+    }
+    
+    // 加载列排序配置
+    const orderKey = getStorageKey('order')
+    const savedOrder = localStorage.getItem(orderKey)
+    if (savedOrder) {
+      try {
+        const parsedOrder = JSON.parse(savedOrder)
+        const validColumns = tableColumns
+          .filter(col => !col.alwaysShow && !col.fixed)
+          .map(col => col.prop || col.label)
+        columnOrder.value = parsedOrder.filter((key: string) => validColumns.includes(key))
+        validColumns.forEach(key => {
+          if (!columnOrder.value.includes(key)) {
+            columnOrder.value.push(key)
+          }
+        })
+      } catch (e) {
+        console.error('解析列排序失败:', e)
+        columnOrder.value = tableColumns
+          .filter(col => !col.alwaysShow && !col.fixed)
+          .map(col => col.prop || col.label)
+      }
+    } else {
+      columnOrder.value = tableColumns
+        .filter(col => !col.alwaysShow && !col.fixed)
+        .map(col => col.prop || col.label)
+    }
+  }
+
+  // 排序后的表格列
+  const sortedTableColumns = computed(() => {
+    const columns = tableColumns.filter(col => {
+      const key = col.prop || col.label
+      return col.alwaysShow || col.fixed || visibleColumns.value.includes(key)
+    })
+    
+    if (columnOrder.value.length > 0) {
+      const orderedColumns: ColumnConfig[] = []
+      const unorderedColumns: ColumnConfig[] = []
+      
+      columnOrder.value.forEach(key => {
+        const col = columns.find(c => (c.prop || c.label) === key)
+        if (col) {
+          orderedColumns.push(col)
+        }
+      })
+      
+      columns.forEach(col => {
+        const key = col.prop || col.label
+        if (!columnOrder.value.includes(key)) {
+          unorderedColumns.push(col)
+        }
+      })
+      
+      return [...orderedColumns, ...unorderedColumns]
+    }
+    
+    return columns
+  })
+
+  // 列显示控制函数
+  const checkColumnVisible = (prop: string): boolean => {
+    if (visibleColumns.value.length === 0) {
+      return true
+    }
+    return visibleColumns.value.includes(prop)
+  }
+
+  // 监听列变化
+  const handleColumnChange = (columns: string[]) => {
+    visibleColumns.value = columns
+    const storageKey = getStorageKey()
+    const selectableColumns = columns.filter(col => {
+      const column = tableColumns.find(c => (c.prop || c.label) === col)
+      return column && !column.alwaysShow && !column.fixed
+    })
+    localStorage.setItem(storageKey, JSON.stringify(selectableColumns))
+  }
+
+  // 监听列排序变化
+  const handleColumnOrderChange = (order: string[]) => {
+    columnOrder.value = order
+    const storageKey = getStorageKey('order')
+    localStorage.setItem(storageKey, JSON.stringify(order))
+  }
+
+  return {
+    visibleColumns,
+    columnOrder,
+    sortedTableColumns,
+    checkColumnVisible,
+    loadSavedConfig,
+    handleColumnChange,
+    handleColumnOrderChange
+  }
+}
+