From e0d590724b50b365b42a56dc2b47dc6e05818dab Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 7 Mar 2024 17:03:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E7=8A=B6=E6=80=81=E7=BC=93=E5=AD=98=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableColumnsDnd/index.vue | 74 ++++++++++++++++++++----
 src/constants/cache-keys-constants.ts    |  3 +
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/components/TableColumnsDnd/index.vue b/src/components/TableColumnsDnd/index.vue
index 1112b250..d1e242f1 100644
--- a/src/components/TableColumnsDnd/index.vue
+++ b/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>
 
diff --git a/src/constants/cache-keys-constants.ts b/src/constants/cache-keys-constants.ts
index 18ab8fc7..e1e8393d 100644
--- a/src/constants/cache-keys-constants.ts
+++ b/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';