vsyswin-ui 0.2.83 → 0.2.84-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vsyswin-ui",
-    "version": "0.2.83",
+    "version": "0.2.84-1",
     "main": "lib/vsyswin-ui.umd.min.js",
     "private": false,
     "description": "Vue2.x的应用组件库.",

package/packages/table/src/table.vue

@@ -20,6 +20,7 @@
             :expand-row-keys="expandRowKeys"
             @sort-change="handleSortChange"
             @selection-change="handleSelectionChange"
+            @select-all="handleSelectAll"
             @select="handleSelect"
             @expand-change="handleExpandChange"
             @header-dragend="handleHeaderDragend"
@@ -183,6 +184,84 @@
 import noData from './noData';
 import dragSet from '../../drag-set';
 import BigDataTable from './BigDataTable.js'
+
+/** localStorage 列偏好版本：与 props.columns 合并，避免缓存覆盖新增列与代码侧列定义 */
+const COLUMN_STORAGE_VERSION = 2
+
+function migrateLegacyColumnArray (savedArr, devColumns) {
+    const devPropSet = new Set(devColumns.map((c) => c.prop).filter(Boolean))
+    const order = savedArr.map((c) => c.prop).filter((p) => p && devPropSet.has(p))
+    const show = {}
+    for (const item of savedArr) {
+        if (item.prop && devPropSet.has(item.prop) && item.isShow !== undefined) {
+            show[item.prop] = item.isShow
+        }
+    }
+    return {
+        order,
+        show,
+        resizedWidths: {}
+    }
+}
+
+function parseColumnPrefs (raw, devColumns) {
+    if (!raw) return null
+    let parsed
+    try {
+        parsed = JSON.parse(raw)
+    } catch {
+        return null
+    }
+    if (Array.isArray(parsed)) {
+        return migrateLegacyColumnArray(parsed, devColumns)
+    }
+    if (parsed && parsed.v === COLUMN_STORAGE_VERSION) {
+        return {
+            order: Array.isArray(parsed.order) ? parsed.order : [],
+            show: parsed.show && typeof parsed.show === 'object' ? parsed.show : {},
+            resizedWidths:
+                parsed.resizedWidths && typeof parsed.resizedWidths === 'object'
+                    ? parsed.resizedWidths
+                    : {}
+        }
+    }
+    return null
+}
+
+function mergeColumnsWithPrefs (devColumns, prefs) {
+    if (!devColumns || !devColumns.length) return []
+    if (!prefs) return devColumns.map((c) => ({ ...c }))
+    const { order, show, resizedWidths } = prefs
+    const mergedByProp = new Map()
+    for (const devCol of devColumns) {
+        const prop = devCol.prop
+        mergedByProp.set(prop, {
+            ...devCol,
+            isShow: show[prop] !== undefined ? show[prop] : devCol.isShow,
+            width:
+                resizedWidths[prop] !== undefined && resizedWidths[prop] !== null
+                    ? resizedWidths[prop]
+                    : devCol.width
+        })
+    }
+    const ordered = []
+    const seen = new Set()
+    const devPropOrder = devColumns.map((c) => c.prop)
+    for (const prop of order) {
+        if (mergedByProp.has(prop)) {
+            ordered.push(mergedByProp.get(prop))
+            seen.add(prop)
+        }
+    }
+    for (const prop of devPropOrder) {
+        if (!seen.has(prop)) {
+            ordered.push(mergedByProp.get(prop))
+            seen.add(prop)
+        }
+    }
+    return ordered
+}
+
 export default {
     name: 'SyTable',
     props: {
@@ -275,11 +354,19 @@ export default {
             type: Object,
             default: () => {}
         },
-        // 功能模块key唯一
+        // 功能模块key唯一（应用内需区分不同表格时请保证唯一或使用 columnPrefsScope）
         nameKey: {
             type: String,
             default: () => ''
         },
+        /**
+         * 列偏好命名空间：避免不同页面共用相同 nameKey 时 localStorage 冲突。
+         * 键名为 vsyswin_{columnPrefsScope}__{nameKey}
+         */
+        columnPrefsScope: {
+            type: String,
+            default: () => ''
+        },
         // 合计功能保留小数位
         decimalNum: {
             type: Number,
@@ -295,6 +382,9 @@ export default {
                 2: '全部合计'
             },
             columnList: [], // 表格列数据
+            columnPrefs: {
+                resizedWidths: {}
+            },
             sumType: 2, // 合计类型 0：分页合计；1选中合计；2全部合计
             selection: [], // 当前选中表格数据
             fillData: [],
@@ -333,20 +423,25 @@ export default {
                 }
             },
             immediate: true
+        },
+        columns: {
+            handler () {
+                this.syncColumnsFromProps()
+            },
+            deep: true
+        },
+        nameKey () {
+            this.syncColumnsFromProps()
+        },
+        columnPrefsScope () {
+            this.syncColumnsFromProps()
         }
     },
     created() {
         this.getColumnsData(); // 获取表格列数据
     },
     mounted () {
-        for (const item of this.columnList) {
-            this.$set(item, 'visible', false);
-            if (['multiple', 'daterange', 'monthrange'].indexOf(item.filterType) > -1) {
-                this.$set(item, 'value', []);
-            } else if (['text', 'single'].indexOf(item.filterType) > -1) {
-                this.$set(item, 'value', '');
-            }
-        }
+        this.applyColumnFilterDefaults()
     },
     updated () {
         this.doLayout();
@@ -393,28 +488,77 @@ export default {
             this.tableControl = new BigDataTable(this, options)
             console.log(this.fillData, 375)
         },
-        // 获取表格列数据
-        getColumnsData () {
-            if (this.nameKey) {
-                const list = localStorage.getItem(`vsyswin_${this.nameKey}`);
-                if (list) {
-                    this.columnList = JSON.parse(list);
-                } else {
-                    this.columnList = this.columns;
+        getColumnStorageKey () {
+            if (!this.nameKey) return ''
+            const scope = (this.columnPrefsScope || '').trim()
+            return scope
+                ? `vsyswin_${scope}__${this.nameKey}`
+                : `vsyswin_${this.nameKey}`
+        },
+        persistColumnPrefs () {
+            if (!this.nameKey) return
+            const props = new Set(this.columnList.map((c) => c.prop).filter(Boolean))
+            const pruned = {}
+            for (const key of Object.keys(this.columnPrefs.resizedWidths)) {
+                if (props.has(key)) pruned[key] = this.columnPrefs.resizedWidths[key]
+            }
+            const payload = {
+                v: COLUMN_STORAGE_VERSION,
+                order: this.columnList.map((c) => c.prop),
+                show: Object.fromEntries(
+                    this.columnList.map((c) => [c.prop, !!c.isShow])
+                ),
+                resizedWidths: pruned
+            }
+            localStorage.setItem(this.getColumnStorageKey(), JSON.stringify(payload))
+        },
+        syncColumnsFromProps () {
+            this.getColumnsData()
+            this.applyColumnFilterDefaults()
+        },
+        applyColumnFilterDefaults () {
+            for (const item of this.columnList) {
+                if (item.visible === undefined) this.$set(item, 'visible', false)
+                if (['multiple', 'daterange', 'monthrange'].indexOf(item.filterType) > -1) {
+                    if (item.value === undefined) this.$set(item, 'value', [])
+                } else if (['text', 'single'].indexOf(item.filterType) > -1) {
+                    if (item.value === undefined) this.$set(item, 'value', '')
                 }
-            } else {
-                this.columnList = this.columns;
             }
         },
+        // 获取表格列数据（以 columns 为权威定义，localStorage 只存顺序 / 显示 / 用户拖拽宽度）
+        getColumnsData () {
+            const devColumns = Array.isArray(this.columns)
+                ? this.columns.map((c) => ({ ...c }))
+                : []
+            if (!this.nameKey) {
+                this.columnList = devColumns
+                this.columnPrefs.resizedWidths = {}
+                return
+            }
+            const raw = localStorage.getItem(this.getColumnStorageKey())
+            const prefs = parseColumnPrefs(raw, devColumns)
+            if (!prefs) {
+                this.columnList = devColumns
+                this.columnPrefs.resizedWidths = {}
+                return
+            }
+            this.columnPrefs.resizedWidths = { ...prefs.resizedWidths }
+            this.columnList = mergeColumnsWithPrefs(devColumns, prefs)
+        },
         // 列表头宽度拉伸
         handleHeaderDragend (newWidth, oldWidth, column, event) {
             if (this.nameKey) {
+                const prop = column.property
                 for (const item of this.columnList) {
-                    if (item.label === column.label && item.prop === column.property) {
-                        this.$set(item, 'width', newWidth);
+                    if (item.prop === prop) {
+                        this.$set(item, 'width', newWidth)
                     }
                 }
-                localStorage.setItem(`vsyswin_${this.nameKey}`, JSON.stringify(this.columnList));
+                if (prop !== undefined && prop !== null && prop !== '') {
+                    this.$set(this.columnPrefs.resizedWidths, prop, newWidth)
+                }
+                this.persistColumnPrefs()
             } else {
                 this.$emit('header-dragend', newWidth, oldWidth, column, event);
             }
@@ -432,9 +576,14 @@ export default {
             this.selection = selection;
             this.$emit('selection-change', selection);
         },
-      handleSelect (selection, row) {
-        this.$emit('select', selection, row);
-      },
+        // 当用户手动勾选全选 Checkbox 时触发的事件
+        handleSelectAll (selection) {
+          this.$emit('select-all', selection);
+        },
+        // 当用户手动勾选数据行的 Checkbox 时触发的事件
+        handleSelect (selection, row) {
+          this.$emit('select', selection, row);
+        },
         // 表格行展开事件
         handleExpandChange (row, value) {
             this.$emit('expand-change', row, value);
@@ -450,7 +599,7 @@ export default {
         dragChange (list) {
             if (this.nameKey) {
                 this.columnList = list;
-                localStorage.setItem(`vsyswin_${this.nameKey}`, JSON.stringify(this.columnList));
+                this.persistColumnPrefs()
             } else {
                 this.$emit('drag-change', list);
             }