@lx-frontend/wrap-element-ui 1.0.23-beta.1 → 1.0.24-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.23-beta.1",
+  "version": "1.0.24-beta.1",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

package/src/components/EditableTable/bizHooks/useViewSetting.ts

@@ -14,6 +14,38 @@ interface IViewSettingParams {
   }
 }
 
+/** 默认迁移配置 */
+const defaultStorgeMigrationConfig: Record<number, {
+  /** 迁移方法 */
+  migration: (
+    /** 当前本地配置 */
+    currentConfig: any,
+    /** 当前的列配置 */
+    columns: IColumnConfig[]
+  ) => ({ version: number, config: any })
+  /** 迁移到的下一个版本号 */
+  nextVersion?: number
+}> = {
+  '0': {
+    migration: (config: { showingColumns: string[], leftFixedColumnCount: number }, columns: IColumnConfig[]) => {
+      return {
+        config: {
+          fields: columns.reduce((acc, curr) => {
+            acc[curr.prop] = {
+              hidden: config.showingColumns.find(v => v === curr.prop) ? false : curr.defaultHide ?? false,
+              order: config.showingColumns.findIndex(v => v === curr.prop) ?? 0,
+            }
+            return acc;
+          }, {} as Record<string, { hidden: boolean, order: number }>),
+          leftFixedColumnCount: config.leftFixedColumnCount,
+        },
+        version: 1,
+      }
+    },
+    nextVersion: 1,
+  }
+}
+
 export function useViewSetting({
   showingColumns,
   actualColumns,
@@ -33,8 +65,17 @@ export function useViewSetting({
   const saveSettingToStorge = async() => {
     await nextTick()
     localStorage.setItem(storageKey.value, JSON.stringify({
-      showingColumns: showingColumns.value,
-      leftFixedColumnCount: leftFixedColumnCount.value
+      config: {
+        fields: props.columnConfig.reduce((acc, curr) => {
+          acc[curr.prop] = {
+            hidden: showingColumns.value.find(v => v === curr.prop) ? false : curr.defaultHide ?? false,
+            order: showingColumns.value.findIndex(v => v === curr.prop) ?? 0,
+          }
+          return acc;
+        }, {} as Record<string, { hidden: boolean, order: number }>),
+        leftFixedColumnCount: leftFixedColumnCount.value,
+      },
+      version: 1
     }))
   };
 
@@ -66,7 +107,6 @@ export function useViewSetting({
   watch(
     () => props.columnConfig,
     async(val) => {
-      const _keys = new Set(val.map(c => (c.prop)));
       const _cache = localStorage.getItem(storageKey.value);
       const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
       if (!_cache) {
@@ -75,13 +115,36 @@ export function useViewSetting({
       } else {
         try {
           // 缓存数据字段可能随着更新导致对不上，清理无效数据，防止出问题
-          const cache = JSON.parse(_cache);
-          if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
-            setColumns();
-          } else {
-            updateShowingColumns(cache.showingColumns.filter(key => _keys.has(key)))
+          const handleMigration = (_cache: any) => {
+            const version = _cache?.version ?? 0
+            if (defaultStorgeMigrationConfig[version]) {
+              const __cache = defaultStorgeMigrationConfig[version].migration(_cache, val)
+              if (defaultStorgeMigrationConfig[version].nextVersion) {
+                return handleMigration(__cache)
+              } else {
+                return __cache
+              }
+            } else {
+              return _cache
+            }
           }
-          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
+
+          const cache = handleMigration(JSON.parse(_cache)) as {
+            version: number,
+            config: {
+              fields: Record<string, { hidden: boolean, order: number }>,
+              leftFixedColumnCount: number
+            }
+          };
+
+          updateShowingColumns(
+            Object.entries(cache.config.fields)
+              .filter(v => !v[1].hidden)
+              .sort((a, b) => a[1].order - b[1].order)
+              .map(v => v[0])
+          )
+
+          const _leftFixedColumnCount = Number(cache?.config?.leftFixedColumnCount)
           leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
           // 写入清理后的数据
           saveSettingToStorge();

package/src/components/EditableTable/index.vue

@@ -110,7 +110,6 @@
             v-if="colorFilterConfig"
             :head-active="isColumnHeadActive(colorFilterConfig)"
             :column="colorFilterConfig"
-            :showing-columns="showingColumns"
             :temp-summary-list="tempSummaryList"
             :temp-sort-prop="tempSortProp"
             :temp-sort-type="tempSortType"
@@ -155,7 +154,6 @@
           <biz-table-header-popover
             :head-active="isColumnHeadActive(column)"
             :column="column"
-            :showing-columns="showingColumns"
             :temp-summary-list="tempSummaryList"
             :temp-sort-prop="tempSortProp"
             :temp-sort-type="tempSortType"
@@ -248,8 +246,9 @@
             <!-- 内置编辑类型 -->
             <biz-edit-cell
               v-else-if="column.editType"
-              v-model="editingRowData[column.prop]"
+              :value="editingRowData[column.prop]"
               :column="column"
+              @input="val => { editingRowData[column.prop] = val }"
             />
             <!-- 不支持编辑 -->
             <slot
@@ -267,8 +266,9 @@
           <!-- 当前行编辑中，内置编辑类型 -->
           <biz-edit-cell
             v-if="editingRowIndex === scope.$index && column.editType"
-            v-model="editingRowData[column.prop]"
+            :value="editingRowData[column.prop]"
             :column="column"
+            @input="val => { editingRowData[column.prop] = val }"
           />
           <!-- 当前行编辑中，自定义编辑类型 -->
           <slot