fix: 修复菜单配置无法调整顺序的问题

src/views/system/Menu/Setting/index.vue

@@ -10,6 +10,7 @@
             <div class="content">
                 <j-card title="菜单配置" style="width: 80%">
                     <div class="tree">
+                      <j-scrollbar>
                         <j-tree
                           v-if="treeData.length !== 0"
                           show-line
@@ -17,7 +18,6 @@
                           multiple
                           draggable
                           :tree-data="treeData"
-                            :height="520"
                           @select="onSelect"
                           :selectedKeys="selectedKeys"
                           @drop="onDrop"
@@ -34,6 +34,7 @@
                             </div>
                           </template>
                         </j-tree>
+                      </j-scrollbar>
                     </div>
                 </j-card>
             </div>
@@ -70,6 +71,7 @@ import {
     getMaxDepth,
     mergeArr,
     findAllParentsAndChildren,
+    handleSorts
 } from './utils';
 import BaseMenu from '@/views/init-home/data/baseMenu';
 import type { AntTreeNodeDropEvent } from 'ant-design-vue/es/tree';
@@ -134,9 +136,9 @@ function filterTree(nodes: Array<any>, selectedKeys: Array<any>) {
 
 const handleOk = async () => {
     const _dataArr = filterTree(cloneDeep(treeData.value), selectedKeys.value);
-
+    const _dataSorts = handleSorts(_dataArr)
     loading.value = true;
-    const res = await updateMenus(_dataArr).catch(() => {});
+    const res = await updateMenus(_dataSorts).catch(() => {});
     if (res?.status === 200) {
         onlyMessage('操作成功', 'success');
     }
@@ -260,6 +262,7 @@ onMounted(() => {
         border-radius: 4px;
         overflow: hidden;
         width: 100%;
+        height: 540px;
 
         &-content {
             display: flex;

src/views/system/Menu/Setting/utils.ts

@@ -304,3 +304,17 @@ export const getNodeDepth = (node: any) => {
     }
     return depth;
 };
+
+
+export const handleSorts = (node: any[]) => {
+    if (!node) return []
+    return node.map((item, index) => {
+        if (item.index !== index) {
+            item.sortIndex = index
+            if (item.children) {
+                item.children = handleSorts(item.children)
+            }
+        }
+        return item
+    })
+}