CN-1075 table自定义列缓存功能有时会因字段变化导致缓存数据使用报错

src/components/table/ColumnCustomize.vue

@@ -58,7 +58,9 @@
 </template>
 
 <script>
-import { storageKey } from '@/utils/constants'
+import indexedDBUtils from '@/indexedDB'
+import { storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
+import { get } from '@/utils/http'
 export default {
   props: {
     customTableTitle: Array, // 自定义的title
@@ -74,10 +76,11 @@ export default {
     }
   },
   created () {
+    /*
     const localStorageTitle = JSON.parse(localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId))
     if (localStorageTitle) {
       localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(localStorageTitle))
-    }
+    } */
   },
   watch: {
     customTableTitle: {
@@ -147,10 +150,30 @@ export default {
       }
     },
     // 点击第二个cancel
-    save () {
+    async save () {
       this.$emit('update', this.custom)
-      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(this.custom))
+      const userId = localStorage.getItem(storageKey.userId)
-      // this.esc()
+      const tableName = dbTableColumnCustomizeConfigPre + '-' + this.tableId
+
+      const defaultConfigInDb = await indexedDBUtils.selectTable(tableName).get({ id: userId })
+      let fullVersion = ''
+      if (defaultConfigInDb && defaultConfigInDb.version) {
+        const oldVersion = defaultConfigInDb.version
+        if (oldVersion.startsWith(BASE_CONFIG.version)) {
+          const realVersion = Number(oldVersion.substring(BASE_CONFIG.version.length + 1))
+          fullVersion = BASE_CONFIG.version + '.' + (realVersion + 1)
+        } else {
+          fullVersion = BASE_CONFIG.version + '.1'
+        }
+      } else {
+        fullVersion = BASE_CONFIG.version + '.1'
+      }
+
+      await indexedDBUtils.selectTable(tableName).put({
+        id: userId,
+        version: fullVersion,
+        config: _.cloneDeep(this.custom)
+      })
     }
   },
   computed: {

src/indexedDB/index.js

@@ -1,11 +1,18 @@
-import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
+import { dbName, dbGeoDataTableName, dbDrilldownTableConfig, dbUserTableColumnCustomizeConfig, dbRoleTableColumnCustomizeConfig, dbOperationLogTableColumnCustomizeConfig, dbChartTableColumnCustomizeConfig, dbI18nTableColumnCustomizeConfig, dbReportTableColumnCustomizeConfig, dbGalaxySettingTableColumnCustomizeConfig } from '@/utils/constants'
 import Dexie from 'dexie'
 /* https://dexie.org/ */
 
 const db = new Dexie(dbName)
-db.version(3).stores({
+db.version(4).stores({
   [dbGeoDataTableName]: '++name, geo',
   [dbDrilldownTableConfig]: '++id, config',
+  [dbUserTableColumnCustomizeConfig]: '++id, config',
+  [dbRoleTableColumnCustomizeConfig]: '++id, config',
+  [dbOperationLogTableColumnCustomizeConfig]: '++id, config',
+  [dbChartTableColumnCustomizeConfig]: '++id, config',
+  [dbI18nTableColumnCustomizeConfig]: '++id, config',
+  [dbReportTableColumnCustomizeConfig]: '++id, config',
+  [dbGalaxySettingTableColumnCustomizeConfig]: '++id, config',
   test: '++id, name'
 })
 function selectTable (tableName) {

src/mixins/data-list.js

@@ -1,11 +1,12 @@
 import { tableSort } from '@/utils/tools'
-import { defaultPageSize, fromRoute, position, storageKey } from '@/utils/constants'
+import { defaultPageSize, fromRoute, position, storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 import axios from 'axios'
 import { api } from '@/utils/api'
 import Loading from '@/components/common/Loading'
+import indexedDBUtils from '@/indexedDB'
 
 export default {
   components: {
@@ -395,13 +396,17 @@ export default {
       }
     }
   },
-  mounted () {
+  async mounted () {
     const pageSize = localStorage.getItem(storageKey.pageSize + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
-    let localStorageTableTitle = localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
+    const userId = localStorage.getItem(storageKey.userId)
-    localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle
+    let localStorageTableTitle = await indexedDBUtils.selectTable(dbTableColumnCustomizeConfigPre + '-' + this.tableId).get({ id: userId })
+
+    localStorageTableTitle = localStorageTableTitle && localStorageTableTitle.config
+      ? localStorageTableTitle.config
+      : (this.$refs.dataTable && this.$refs.dataTable.tableTitle ? this.$refs.dataTable.tableTitle : [])
     // this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
     //   if (localStorageTableTitle[index]) {
     //     item.show = localStorageTableTitle[index].show

src/utils/constants.js

@@ -5,6 +5,14 @@ export const dbName = 'cn-db'
 // indexedDB表名
 export const dbGeoDataTableName = 'geodata'
 export const dbDrilldownTableConfig = 'cn-drilldown-table-config'
+export const dbTableColumnCustomizeConfigPre = 'cn-table-column-customize-config'
+export const dbUserTableColumnCustomizeConfig = 'cn-table-column-customize-config-userTable'
+export const dbRoleTableColumnCustomizeConfig = 'cn-table-column-customize-config-rolesTable'
+export const dbOperationLogTableColumnCustomizeConfig = 'cn-table-column-customize-config-operationLogTable'
+export const dbChartTableColumnCustomizeConfig = 'cn-table-column-customize-config-chartTable'
+export const dbI18nTableColumnCustomizeConfig = 'cn-table-column-customize-config-i18nTable'
+export const dbReportTableColumnCustomizeConfig = 'cn-table-column-customize-config-reportTable'
+export const dbGalaxySettingTableColumnCustomizeConfig = 'cn-table-column-customize-config-galaxySettingTable'
 export const storageKey = {
   iso36112Capital: 'cn-iso3611-2-capital',
   iso36112WorldLow: 'cn-iso3611-2-world-low',