feat: 表格列选择器排序逻辑调整

frontend/src/components/pure/ms-drawer/index.vue

@@ -5,6 +5,7 @@
     :width="drawerWidth"
     :footer="props.footer"
     :mask="props.mask"
+    :popup-container="props.popupContainer"
     :class="[
       'ms-drawer',
       props.mask ? '' : 'ms-drawer-no-mask',
@@ -93,6 +94,7 @@
     showContinue?: boolean;
     width: number;
     noContentPadding?: boolean; // 是否没有内容内边距
+    popupContainer?: string;
   }
 
   const props = withDefaults(defineProps<DrawerProps>(), {
@@ -100,6 +102,7 @@
     mask: true,
     showSkeleton: false,
     showContinue: false,
+    popupContainer: 'body',
   });
   const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'continue']);
 

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

@@ -53,27 +53,19 @@
           :tooltip="item.tooltip"
         >
           <template #title>
-            <div
-              v-if="
-                props.showSetting &&
-                (item.slotName === SpecialColumnEnum.OPERATION || item.slotName === SpecialColumnEnum.ACTION)
-              "
-              class="flex flex-row flex-nowrap items-center"
-            >
+            <div class="flex flex-row flex-nowrap items-center">
               <slot :name="item.titleSlotName">
                 <div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
               </slot>
-              <ColumnSelector
-                :show-jump-method="(attrs.showJumpMethod as boolean)"
-                :table-key="(attrs.tableKey as string)"
-                :show-pagination="attrs.showPagination as boolean"
-                @close="handleColumnSelectorClose"
-                @page-size-change="pageSizeChange"
+              <icon-settings
+                v-if="
+                  props.showSetting &&
+                  (item.slotName === SpecialColumnEnum.OPERATION || item.slotName === SpecialColumnEnum.ACTION)
+                "
+                class="setting-icon"
+                @click="handleShowSetting"
               />
             </div>
-            <slot v-else :name="item.titleSlotName">
-              <div class="text-[var(--color-text-3)]">{{ t(item.title as string) }}</div>
-            </slot>
           </template>
           <template #cell="{ column, record, rowIndex }">
             <div class="flex flex-row flex-nowrap items-center">
@@ -186,6 +178,14 @@
         @page-size-change="pageSizeChange"
       />
     </div>
+    <ColumnSelector
+      v-model:visible="columnSelectorVisible"
+      :show-jump-method="(attrs.showJumpMethod as boolean)"
+      :table-key="(attrs.tableKey as string)"
+      :show-pagination="(attrs.showPagination as boolean)"
+      @init-data="handleInitColumn"
+      @page-size-change="pageSizeChange"
+    ></ColumnSelector>
   </div>
 </template>
 
@@ -220,6 +220,7 @@
   const tableStore = useTableStore();
   const currentColumns = ref<MsTableColumn>([]);
   const appStore = useAppStore();
+  const columnSelectorVisible = ref(false);
 
   const props = defineProps<{
     selectedKeys: Set<string>;
@@ -424,7 +425,7 @@
     }
   };
 
-  const handleColumnSelectorClose = async () => {
+  const handleInitColumn = async () => {
     await initColumn();
   };
 
@@ -437,6 +438,9 @@
       return 'ms-table-row-disabled';
     }
   }
+  const handleShowSetting = () => {
+    columnSelectorVisible.value = true;
+  };
 
   onMounted(async () => {
     await initColumn();
@@ -469,6 +473,15 @@
         }
       }
     }
+    .setting-icon {
+      margin-left: 16px;
+      color: var(--color-text-4);
+      background-color: var(--color-text-10);
+      cursor: pointer;
+      &:hover {
+        color: rgba(var(--primary-5));
+      }
+    }
   }
   .ms-base-table--hasQuickCreate {
     :deep(.arco-table-body) {

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

@@ -1,8 +1,7 @@
 <template>
-  <icon-settings class="icon" @click="handleClick" />
   <MsDrawer
+    :visible="props.visible"
     :width="480"
-    :visible="visible"
     unmount-on-close
     :footer="false"
     :title="t('msTable.columnSetting.display')"
@@ -59,6 +58,7 @@
             v-model="item.showInTable"
             size="small"
             :disabled="item.dataIndex === 'name' || item.dataIndex === 'operation'"
+            @change="handleSwitchChange"
           />
         </div>
       </div>
@@ -67,14 +67,14 @@
           t('msTable.columnSetting.nonSort')
         }}</span></a-divider
       >
-      <Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex">
+      <Draggable tag="div" :list="couldSortColumn" ghost-class="ghost" item-key="dateIndex" @change="handleDragChange">
         <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 v-model="element.showInTable" size="small" />
+            <a-switch v-model="element.showInTable" size="small" @change="handleSwitchChange" />
           </div>
         </template>
       </Draggable>
@@ -109,30 +109,26 @@
   const hasChange = ref(false);
 
   const emit = defineEmits<{
-    (e: 'close'): void;
+    (e: 'initData'): void;
     (e: 'pageSizeChange', value: number): void;
+    (e: 'update:visible', value: boolean): void;
   }>();
 
   const props = defineProps<{
+    visible: boolean;
     tableKey: string;
     showJumpMethod: boolean;
     showPagination: boolean;
   }>();
 
-  const visible = ref(false);
-
-  const handleClick = () => {
-    visible.value = true;
-  };
-
   const handleCancel = async () => {
     await tableStore.setColumns(
       props.tableKey,
       [...nonSortColumn.value, ...couldSortColumn.value],
       currentMode.value as TableOpenDetailMode
     );
-    visible.value = false;
-    emit('close');
+    emit('update:visible', false);
+    emit('initData');
   };
 
   const loadColumn = (key: string) => {
@@ -152,6 +148,14 @@
     tableStore.setMode(props.tableKey, value as TableOpenDetailMode);
   };
 
+  const handleSwitchChange = () => {
+    hasChange.value = true;
+  };
+
+  const handleDragChange = () => {
+    hasChange.value = true;
+  };
+
   onBeforeMount(() => {
     if (props.tableKey) {
       tableStore.getMode(props.tableKey).then((res) => {
@@ -173,15 +177,6 @@
   :deep(.arco-divider-text) {
     padding: 0 8px;
   }
-  .icon {
-    margin-left: 16px;
-    color: var(--color-text-4);
-    background-color: var(--color-text-10);
-    cursor: pointer;
-    &:hover {
-      color: rgba(var(--primary-5));
-    }
-  }
   .mode-button {
     display: flex;
     flex-flow: row nowrap;

frontend/src/hooks/useTableStore.ts

@@ -1,4 +1,4 @@
-import { filter, orderBy } from 'lodash-es';
+import { filter, orderBy, sortBy } from 'lodash-es';
 
 import { MsTableColumn, MsTableColumnData } from '@/components/pure/ms-table/type';
 
@@ -163,7 +163,7 @@ export default function useTableStore() {
         },
         { nonSortableColumns: [], couldSortableColumns: [] }
       );
-      return { nonSort: nonSortableColumns, couldSort: couldSortableColumns };
+      return { nonSort: nonSortableColumns, couldSort: sortBy(couldSortableColumns, 'sortedIndex') };
     }
     return { nonSort: [], couldSort: [] };
   }

frontend/src/utils/equal.ts

@@ -1,3 +1,5 @@
+import { sortBy } from 'lodash-es';
+
 /**
  * 比较两个一维数组对象是否相等，不考虑顺序，
  * @param arr1 数组1
@@ -8,10 +10,11 @@ export function isArraysEqualWithOrder<T>(arr1: T[], arr2: T[]): boolean {
   if (arr1.length !== arr2.length) {
     return false;
   }
-
-  for (let i = 0; i < arr1.length; i++) {
-    const obj1 = arr1[i];
-    const obj2 = arr2[i];
+  const sortArr1 = sortBy(arr1, 'dataIndex');
+  const sortArr2 = sortBy(arr2, 'dataIndex');
+  for (let i = 0; i < sortArr1.length; i++) {
+    const obj1 = sortArr1[i];
+    const obj2 = sortArr2[i];
 
     // 逐一比较对象
     if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {