refactor: 表格列选择器重构

frontend/src/components/pure/ms-table/base-table.vue

@@ -240,7 +240,7 @@
   const initColumn = () => {
     let tmpArr: MsTableColumn = [];
     if (props.showSetting) {
-      tmpArr = tableStore.getShowInTableColumns(attrs.tableKey as string);
+      tmpArr = tableStore.getShowInTableColumns(attrs.tableKey as string) || [];
     } else {
       tmpArr = props.columns;
     }

frontend/src/components/pure/ms-table/columnSelector.vue

@@ -33,9 +33,9 @@
         <MsButton :disabled="!hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
       </div>
       <div class="flex-col">
-        <div v-for="(item, idx) in nonSortColumn" :key="item.dataIndex" class="column-item">
+        <div v-for="item in nonSortColumn" :key="item.dataIndex" class="column-item">
           <div>{{ t(item.title as string) }}</div>
-          <a-switch size="small" :model-value="item.showInTable" @change="handleFirstColumnChange(idx)" />
+          <a-switch v-model="item.showInTable" size="small" />
         </div>
       </div>
       <a-divider orientation="center" class="non-sort"
@@ -44,13 +44,13 @@
         }}</span></a-divider
       >
       <Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex">
-        <template #item="{ element, index }">
+        <template #item="{ element }">
           <div class="column-drag-item">
             <div class="flex w-[90%] items-center">
               <MsIcon type="icon-icon_drag" class="text-[16px] text-[var(--color-text-4)]" />
               <span class="ml-[8px]">{{ t(element.title as string) }}</span>
             </div>
-            <a-switch size="small" :model-value="element.showInTable" @change="handleSecondColumnChange(index)" />
+            <a-switch v-model="element.showInTable" size="small" />
           </div>
         </template>
       </Draggable>
@@ -113,20 +113,6 @@
     loadColumn(props.tableKey);
   };
 
-  const handleFirstColumnChange = (idx: number) => {
-    const item = nonSortColumn.value[idx];
-    item.showInTable = !item.showInTable;
-    nonSortColumn.value[idx] = item;
-    hasChange.value = true;
-  };
-
-  const handleSecondColumnChange = (idx: number) => {
-    const item = couldSortColumn.value[idx];
-    item.showInTable = !item.showInTable;
-    couldSortColumn.value[idx] = item;
-    hasChange.value = true;
-  };
-
   const handleModeChange = (value: string | number | boolean) => {
     currentMode.value = value as string;
     tableStore.setMode(props.tableKey, value as TableOpenDetailMode);

frontend/src/store/modules/ms-table/index.ts

@@ -1,25 +1,26 @@
 import { defineStore } from 'pinia';
-import { MsTableSelectorItem, MsTableState, TableOpenDetailMode } from './types';
+import { MsTableState, TableOpenDetailMode } from './types';
-import { MsTableColumn } from '@/components/pure/ms-table/type';
+import { MsTableColumn, MsTableColumnData } from '@/components/pure/ms-table/type';
-import { parse, stringify } from '@/utils/serializeMap';
 import { SpecialColumnEnum } from '@/enums/tableEnum';
+import { orderBy, filter, cloneDeep } from 'lodash';
 
 const msTableStore = defineStore('msTable', {
   // 开启数据持久化
   persist: {
-    serializer: {
+    paths: ['selectorColumnMap'],
-      deserialize: parse,
-      serialize: stringify,
-    },
   },
   state: (): MsTableState => ({
-    selectorColumnMap: new Map<string, MsTableSelectorItem>(),
+    selectorColumnMap: {},
+    baseSortIndex: 10,
+    operationBaseIndex: 100,
   }),
   actions: {
     initColumn(tableKey: string, column: MsTableColumn, mode: TableOpenDetailMode) {
-      if (!this.selectorColumnMap.has(tableKey)) {
+      if (!this.selectorColumnMap[tableKey]) {
-        const tmpMap = this.selectorColumnMap;
+        column.forEach((item, idx) => {
-        column.forEach((item) => {
+          if (item.sortIndex === undefined) {
+            item.sortIndex = this.baseSortIndex + idx;
+          }
           if (item.showDrag === undefined) {
             item.showDrag = false;
           }
@@ -36,45 +37,62 @@ const msTableStore = defineStore('msTable', {
           }
           if (item.dataIndex === SpecialColumnEnum.OPERATION || item.dataIndex === SpecialColumnEnum.ACTION) {
             item.showDrag = false;
-            item.sortIndex = 1000;
+            item.sortIndex = this.operationBaseIndex;
           }
         });
-        tmpMap.set(tableKey, { mode, column });
+        this.selectorColumnMap[tableKey] = { mode, column };
-        this.selectorColumnMap = tmpMap;
       }
     },
-    getMode(key: string): string {
+
-      if (this.selectorColumnMap.has(key)) {
-        return this.selectorColumnMap.get(key)?.mode || '';
-      }
-      return '';
-    },
     setMode(key: string, mode: TableOpenDetailMode) {
-      if (this.selectorColumnMap.has(key)) {
+      if (this.selectorColumnMap[key]) {
-        const item = this.selectorColumnMap.get(key);
+        const item = this.selectorColumnMap[key];
         if (item) {
           item.mode = mode;
         }
       }
     },
-    getColumns(key: string): { nonSort: MsTableColumn; couldSort: MsTableColumn } {
-      if (this.selectorColumnMap.has(key)) {
-        const tmpArr = this.selectorColumnMap.get(key)?.column || [];
-        const nonSortableColumns = tmpArr.filter((item) => !item.showDrag);
-        const couldSortableColumns = tmpArr.filter((item) => !!item.showDrag);
-        return { nonSort: nonSortableColumns, couldSort: couldSortableColumns };
-      }
-      return { nonSort: [], couldSort: [] };
-    },
     setColumns(key: string, columns: MsTableColumn, mode: TableOpenDetailMode) {
-      this.selectorColumnMap.set(key, { mode, column: columns });
+      columns.forEach((item, idx) => {
+        if (item.showDrag) {
+          item.sortIndex = this.baseSortIndex + idx;
+        }
+      });
+      this.selectorColumnMap[key] = { mode, column: columns };
     },
-    getShowInTableColumns(key: string): MsTableColumn {
+  },
-      if (this.selectorColumnMap.has(key)) {
+  getters: {
-        const tmpArr = this.selectorColumnMap.get(key)?.column;
+    getMode: (state) => {
-        return tmpArr?.filter((item) => item.showInTable) || [];
+      return (key: string) => {
-      }
+        if (state.selectorColumnMap[key]) {
-      return [];
+          return state.selectorColumnMap[key].mode;
+        }
+        return 'drawer';
+      };
+    },
+    getColumns: (state) => {
+      return (key: string) => {
+        if (state.selectorColumnMap[key]) {
+          const tmpArr = cloneDeep(state.selectorColumnMap[key].column);
+          const nonSortableColumns = tmpArr.filter((item: MsTableColumnData) => !item.showDrag);
+          const couldSortableColumns = tmpArr.filter((item: MsTableColumnData) => !!item.showDrag);
+          return { nonSort: nonSortableColumns, couldSort: couldSortableColumns };
+        }
+        return { nonSort: [], couldSort: [] };
+      };
+    },
+    getShowInTableColumns: (state) => {
+      return (key: string) => {
+        if (state.selectorColumnMap[key]) {
+          const tmpArr: MsTableColumn = cloneDeep(state.selectorColumnMap[key].column);
+          return orderBy(
+            filter(tmpArr, (i) => i.showInTable),
+            ['sortIndex'],
+            ['asc']
+          ) as MsTableColumn;
+        }
+        return [];
+      };
     },
   },
 });

frontend/src/store/modules/ms-table/types.ts

@@ -8,6 +8,15 @@ export interface MsTableSelectorItem {
   // 列配置
   column: MsTableColumn;
 }
-export interface MsTableState {
+
-  selectorColumnMap: Map<string, MsTableSelectorItem>;
+export interface SelectorColumnMap {
+  [key: string]: MsTableSelectorItem;
+}
+export interface MsTableState {
+  // 列配置， 持久化
+  selectorColumnMap: SelectorColumnMap;
+  // 列排序基数
+  baseSortIndex: number;
+  // 操作列基数
+  operationBaseIndex: number;
 }

frontend/src/views/setting/organization/project/orgProject.vue

@@ -145,6 +145,7 @@
     {
       title: 'system.organization.operation',
       slotName: 'operation',
+      dataIndex: 'operation',
       fixed: 'right',
       width: 230,
     },