feat: 表格字段排序状态缓存记录

src/components/TableColumnsDnd/index.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { reactive, watch, onMounted, PropType } from 'vue';
+import { reactive, watch, onMounted, PropType, nextTick } from 'vue';
 import { Container, Draggable } from 'vue3-smooth-dnd';
 import useI18n from '@/hooks/useI18n';
 import { type ColumnsType } from 'ant-design-vue/lib/table';
+import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
+import { CACHE_DB_TABLE_DND } from '@/constants/cache-keys-constants';
 const { t } = useI18n();
 
 const emit = defineEmits(['update:columns-dnd']);
@@ -16,7 +18,8 @@ const props = defineProps({
     type: Array<any>,
     required: true,
   },
-  /**按钮类型
+  /**
+   * 按钮类型
    * text 图标
    * ghost 图标按钮带文字
    */
@@ -24,16 +27,29 @@ const props = defineProps({
     type: String as PropType<'text' | 'ghost'>,
     default: 'text',
   },
+  /**
+   * 缓存列变更数据标识，不传则不缓存
+   */
+  cacheId: {
+    type: String,
+    default: '',
+  },
 });
 
 /**表格字段列 */
 const tableColumns = reactive<ColumnsType>(props.columns);
 
 /**表格字段列勾选状态 */
-const state = reactive({
+const state = reactive<{
+  indeterminate: boolean;
+  /**是否全选 */
+  checkAll: boolean;
+  /**字段标题列表 */
+  columnsTitleList: string[];
+}>({
   indeterminate: false,
   checkAll: true,
-  columnsTitleList: tableColumns.map(s => `${s.title}`),
+  columnsTitleList: [],
 });
 
 /**表格字段列全选操作 */
@@ -46,12 +62,13 @@ function fnTableColumnsCheckAllChange(e: any) {
 /**表格字段列拖拽操作 */
 function fnTableColumnsDrop(dropResult: any) {
   const { removedIndex, addedIndex, payload } = dropResult;
-  if (removedIndex !== null && addedIndex !== null) {
-    let itemToAdd = payload;
-    itemToAdd = tableColumns.splice(removedIndex, 1)[0];
-    tableColumns.splice(addedIndex, 0, itemToAdd);
-    fnUpdateColumns();
+  if (!removedIndex || !addedIndex) {
+    return;
   }
+  let itemToAdd = payload;
+  itemToAdd = tableColumns.splice(removedIndex, 1)[0];
+  tableColumns.splice(addedIndex, 0, itemToAdd);
+  fnUpdateColumns();
 }
 
 /**表格字段列固定操作 */
@@ -66,6 +83,7 @@ function fnTableColumnsFixed(row: Record<string, any>) {
   } else {
     row.fixed = !row.fixed;
   }
+  fnUpdateColumns();
 }
 
 /**表格字段列勾选字段变化 */
@@ -77,7 +95,14 @@ function fnUpdateColumns() {
   if (list.length === 0) {
     list = [tableColumns[0]];
   }
-  emit('update:columns-dnd', list);
+
+  if (props.cacheId) {
+    // 存入数据
+    dbSetJSON(CACHE_DB_TABLE_DND, props.cacheId, list);
+  }
+  nextTick(() => {
+    emit('update:columns-dnd', list);
+  });
 }
 
 /**表格字段列勾选监听 */
@@ -92,7 +117,34 @@ watch(
 );
 
 onMounted(() => {
-  fnUpdateColumns();
+  if (props.cacheId) {
+    // 读取数据后响应
+    dbGetJSON(CACHE_DB_TABLE_DND, props.cacheId)
+      .then(data => {
+        if (data) {
+          const titleList: string[] = [];
+          for (const item of data) {
+            titleList.push(`${item.title}`);
+            // 固定标记还原
+            if (item.fixed !== undefined) {
+              const fixedItem = tableColumns.find(s => s.title === item.title);
+              if (fixedItem) {
+                fixedItem.fixed = item.fixed;
+              }
+            }
+          }
+          state.columnsTitleList = titleList;
+        } else {
+          state.columnsTitleList = tableColumns.map(s => `${s.title}`);
+        }
+      })
+      .finally(() => {
+        fnUpdateColumns();
+      });
+  } else {
+    state.columnsTitleList = tableColumns.map(s => `${s.title}`);
+    fnUpdateColumns();
+  }
 });
 </script>
 

src/constants/cache-keys-constants.ts

@@ -12,3 +12,6 @@ export const CACHE_LOCAL_I18N = 'cache:local:i18n';
 
 /**本地缓存-锁屏设置 */
 export const CACHE_LOCAL_LOCK = 'cache:local:Lock';
+
+/**数据缓存表-表格排序 */
+export const CACHE_DB_TABLE_DND = 'tbl_dnd';