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

package/package.json

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

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

@@ -1,5 +1,5 @@
 import { ref, watch, Ref, computed, nextTick } from "vue"
-import { IColumnConfig, IProps } from "../types"
+import { IColumnConfig, IProps, SettingStorgeConfig } from "../types"
 
 interface IViewSettingParams {
   showingColumns: Ref<string[]>
@@ -14,6 +14,38 @@ interface IViewSettingParams {
   }
 }
 
+/** 默认迁移配置 */
+const storgeSchemaMigrationConfig: Record<number, {
+  /** 迁移方法 */
+  migration: (
+    /** 当前本地配置 */
+    currentConfig: any,
+    /** 当前的列配置 */
+    columns: IColumnConfig[]
+  ) => ({ schemaVersion: number, config: any, version?: string })
+  /** 迁移到的下一个版本号 */
+  nextSchemaVersion?: 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 : true,
+              order: config.showingColumns.findIndex(v => v === curr.prop) ?? 0,
+            }
+            return acc;
+          }, {} as Record<string, { hidden: boolean, order: number }>),
+          leftFixedColumnCount: config.leftFixedColumnCount,
+        },
+        schemaVersion: 1,
+      }
+    },
+    nextSchemaVersion: 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,
+      },
+      schemaVersion: 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,35 @@ 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 schemaVersion = _cache?.schemaVersion ?? 0
+            if (!storgeSchemaMigrationConfig[schemaVersion]) return _cache
+            let __cache = storgeSchemaMigrationConfig[schemaVersion].migration(_cache, val)
+
+            // 处理当前schema版本需要处理的变更
+            const bizMigrationConfigs = (props.settingStorgeMigrationConfigs ?? []).filter(v => (v.schemaVersion ?? 1) === __cache.schemaVersion)
+            if (bizMigrationConfigs.length) {
+              __cache = bizMigrationConfigs.reduce((acc, curr) => ({
+                ...curr.migration(acc.config, val),
+                schemaVersion: __cache.schemaVersion,
+              }), __cache)
+            }
+
+            return storgeSchemaMigrationConfig[schemaVersion].nextSchemaVersion
+              ? handleMigration(__cache)
+              : __cache
           }
-          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
+
+          const cache = handleMigration(JSON.parse(_cache)) as SettingStorgeConfig;
+
+          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

package/src/components/EditableTable/types/index.ts

@@ -159,6 +159,20 @@ export type ITableDataItem = {
   [k: string]: any;
 }
 
+export type SettingStorgeConfig = {
+  version: string,
+  config: {
+    fields: Record<string, { hidden: boolean, order: number }>,
+    leftFixedColumnCount: number
+  }
+}
+
+export type SettingStorgeMigrationConfigs = {
+  schemaVersion?: number
+  version: string
+  migration: (currentConfig: any, columns: IColumnConfig[]) => SettingStorgeConfig
+}[]
+
 export interface IProps {
   dataList: ITableDataItem[];
   columnConfig: IColumnConfig[];
@@ -174,6 +188,7 @@ export interface IProps {
   dragSemiRange?: number;
   loading?: boolean;
   settingStorgeKey?: string
+  settingStorgeMigrationConfigs?: SettingStorgeMigrationConfigs
   localSort?: boolean
   localFilter?: boolean
   currentPage: number