refactor: 表格列选择器逻辑优化

frontend/src/App.vue

@@ -6,15 +6,13 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted } from 'vue';
+  import { computed } from 'vue';
   import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
   import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
   import GlobalSetting from '@/components/pure/global-setting/index.vue';
   import useLocale from '@/locale/useLocale';
-  import { useTableStore } from './store';
 
   const { currentLocale } = useLocale();
-  const tableStore = useTableStore();
   const locale = computed(() => {
     switch (currentLocale.value) {
       case 'zh-CN':
@@ -25,7 +23,4 @@
         return zhCN;
     }
   });
-  onMounted(() => {
-    tableStore.initColumn();
-  });
 </script>

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

@@ -6,7 +6,6 @@
     unmount-on-close
     :footer="false"
     :title="t('msTable.columnSetting.display')"
-    :descriptions="[]"
     @cancel="handleCancel"
   >
     <div class="ms-table-column-seletor">
@@ -34,13 +33,13 @@
         <MsButton :disabled="!hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
       </div>
       <div class="flex-col">
-        <div v-for="(item, idx) in firstColumns" :key="item.dataIndex" class="column-item">
+        <div v-for="(item, idx) in nonSortColumn" :key="item.dataIndex" class="column-item">
           <div>{{ t(item.title as string) }}</div>
           <a-switch size="small" :model-value="item.showInTable" @change="handleFisrtColumnChange(idx)" />
         </div>
       </div>
       <a-divider orientation="center" class="non-sort">{{ t('msTable.columnSetting.nonSort') }}</a-divider>
-      <Draggable tag="div" :list="secondColumns" class="list-group" handle=".handle" item-key="dateIndex">
+      <Draggable tag="div" :list="couldSortColumn" class="list-group" handle=".handle" item-key="dateIndex">
         <template #item="{ element, index }">
           <div class="column-drag-item">
             <div class="flex items-center">
@@ -57,7 +56,7 @@
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
-  import { onMounted, ref } from 'vue';
+  import { onBeforeMount, ref } from 'vue';
   import { useTableStore } from '@/store';
   import { MsTableColumn } from './type';
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -70,9 +69,9 @@
   const { t } = useI18n();
   const currentMode = ref('');
   // 不能拖拽的列
-  const firstColumns = ref<MsTableColumn>([]);
+  const nonSortColumn = ref<MsTableColumn>([]);
   // 可以拖拽的列
-  const secondColumns = ref<MsTableColumn>([]);
+  const couldSortColumn = ref<MsTableColumn>([]);
   // 是否有改动
   const hasChange = ref(false);
 
@@ -93,7 +92,7 @@
   const handleCancel = () => {
     tableStore.setColumns(
       props.tableKey,
-      [...firstColumns.value, ...secondColumns.value],
+      [...nonSortColumn.value, ...couldSortColumn.value],
       currentMode.value as TableOpenDetailMode
     );
     visible.value = false;
@@ -101,9 +100,9 @@
   };
 
   const loadColumn = (key: string) => {
-    const { nonSortableColumns: noSort, couldSortableColumns: couldSort } = tableStore.getColumns(key);
+    const { nonSort, couldSort } = tableStore.getColumns(key);
-    firstColumns.value = noSort;
+    nonSortColumn.value = nonSort;
-    secondColumns.value = couldSort;
+    couldSortColumn.value = couldSort;
   };
 
   const handleReset = () => {
@@ -111,13 +110,13 @@
   };
 
   const handleFisrtColumnChange = (idx: number) => {
-    const item = firstColumns.value[idx];
+    const item = nonSortColumn.value[idx];
     item.showInTable = !item.showInTable;
     hasChange.value = true;
   };
 
   const handleSecondColumnChange = (idx: number) => {
-    const item = secondColumns.value[idx];
+    const item = couldSortColumn.value[idx];
     item.showInTable = !item.showInTable;
     hasChange.value = true;
   };
@@ -127,7 +126,7 @@
     tableStore.setMode(props.tableKey, value as TableOpenDetailMode);
   };
 
-  onMounted(() => {
+  onBeforeMount(() => {
     if (props.tableKey) {
       currentMode.value = tableStore.getMode(props.tableKey);
       loadColumn(props.tableKey);

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

@@ -1,7 +1,5 @@
 import { defineStore } from 'pinia';
 import { MsTableSelectorItem, MsTableState, TableOpenDetailMode } from './types';
-import userGroupUsercolumns from './module/setting/system/usergroup';
-import { TableKeyEnum } from '@/enums/tableEnum';
 import { MsTableColumn } from '@/components/pure/ms-table/type';
 
 const msTableStore = defineStore('msTable', {
@@ -11,13 +9,12 @@ const msTableStore = defineStore('msTable', {
     selectorColumnMap: new Map<string, MsTableSelectorItem>(),
   }),
   actions: {
-    initColumn() {
+    initColumn(tableKey: string, column: MsTableColumn, mode: TableOpenDetailMode) {
-      const tmpMap = new Map<string, MsTableSelectorItem>();
+      if (!this.selectorColumnMap.has(tableKey)) {
-      tmpMap.set(TableKeyEnum.USERGROUPUSER, {
+        const tmpMap = this.selectorColumnMap;
-        mode: 'drawer',
+        tmpMap.set(tableKey, { mode, column });
-        column: userGroupUsercolumns,
+        this.selectorColumnMap = tmpMap;
-      });
+      }
-      this.selectorColumnMap = tmpMap;
     },
     getMode(key: string): string {
       if (this.selectorColumnMap.has(key)) {
@@ -33,14 +30,14 @@ const msTableStore = defineStore('msTable', {
         }
       }
     },
-    getColumns(key: string): { nonSortableColumns: MsTableColumn; couldSortableColumns: MsTableColumn } {
+    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 { nonSortableColumns, couldSortableColumns };
+        return { nonSort: nonSortableColumns, couldSort: couldSortableColumns };
       }
-      return { nonSortableColumns: [], couldSortableColumns: [] };
+      return { nonSort: [], couldSort: [] };
     },
     setColumns(key: string, columns: MsTableColumn, mode: TableOpenDetailMode) {
       this.selectorColumnMap.set(key, { mode, column: columns });

frontend/src/store/modules/ms-table/module/setting/system/usergroup.ts

@@ -1,31 +0,0 @@
-import { MsTableColumn } from '@/components/pure/ms-table/type';
-
-const userGroupUsercolumns: MsTableColumn = [
-  {
-    title: 'system.userGroup.name',
-    dataIndex: 'name',
-    showDrag: false,
-    showInTable: true,
-  },
-  {
-    title: 'system.userGroup.email',
-    dataIndex: 'email',
-    showDrag: false,
-    showInTable: true,
-  },
-  {
-    title: 'system.userGroup.phone',
-    dataIndex: 'email',
-    showDrag: true,
-    showInTable: true,
-  },
-  {
-    title: 'system.userGroup.operation',
-    slotName: 'action',
-    fixed: 'right',
-    width: 200,
-    showDrag: true,
-    showInTable: true,
-  },
-];
-export default userGroupUsercolumns;

frontend/src/views/setting/system/usergroup/components/userTable.vue

@@ -10,21 +10,55 @@
   import { useI18n } from '@/hooks/useI18n';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import { useUserGroupStore } from '@/store';
+  import { useUserGroupStore, useTableStore } from '@/store';
   import { watchEffect } from 'vue';
   import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
   import { UserTableItem } from '@/models/setting/usergroup';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import MsButton from '@/components/pure/ms-button/index.vue';
+  import { MsTableColumn } from '@/components/pure/ms-table/type';
 
   const { t } = useI18n();
   const store = useUserGroupStore();
+  const tableStore = useTableStore();
+
+  const userGroupUsercolumns: MsTableColumn = [
+    {
+      title: 'system.userGroup.name',
+      dataIndex: 'name',
+      showDrag: false,
+      showInTable: true,
+    },
+    {
+      title: 'system.userGroup.email',
+      dataIndex: 'email',
+      showDrag: false,
+      showInTable: true,
+    },
+    {
+      title: 'system.userGroup.phone',
+      dataIndex: 'email',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'system.userGroup.operation',
+      slotName: 'action',
+      fixed: 'right',
+      width: 200,
+      showDrag: true,
+      showInTable: true,
+    },
+  ];
+
+  tableStore.initColumn(TableKeyEnum.USERGROUPUSER, userGroupUsercolumns, 'drawer');
 
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(postUserByUserGroup, {
     tableKey: TableKeyEnum.USERGROUPUSER,
     scroll: { y: 750, x: '600px' },
     selectable: true,
   });
+
   const fetchData = async () => {
     await loadList();
   };