From baea9bd5aa1b2673d6e26349d68487728fbcdb26 Mon Sep 17 00:00:00 2001
From: XieYongHong <18010623010@163.com>
Date: Fri, 28 Apr 2023 17:23:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=97=A0=E6=B3=95=E8=B0=83=E6=95=B4=E9=A1=BA?=
 =?UTF-8?q?=E5=BA=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Menu/Setting/index.vue | 47 +++++++++++++------------
 src/views/system/Menu/Setting/utils.ts  | 14 ++++++++
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/views/system/Menu/Setting/index.vue b/src/views/system/Menu/Setting/index.vue
index cad1e29d..c26096f3 100644
--- a/src/views/system/Menu/Setting/index.vue
+++ b/src/views/system/Menu/Setting/index.vue
@@ -10,30 +10,31 @@
             <div class="content">
                 <j-card title="菜单配置" style="width: 80%">
                     <div class="tree">
+                      <j-scrollbar>
                         <j-tree
-                            v-if="treeData.length !== 0"
-                            show-line
-                            defaultExpandAll
-                            multiple
-                            draggable
-                            :tree-data="treeData"
-                            :height="520"
-                            @select="onSelect"
-                            :selectedKeys="selectedKeys"
-                            @drop="onDrop"
-                            @dragend="onDragend"
+                          v-if="treeData.length !== 0"
+                          show-line
+                          defaultExpandAll
+                          multiple
+                          draggable
+                          :tree-data="treeData"
+                          @select="onSelect"
+                          :selectedKeys="selectedKeys"
+                          @drop="onDrop"
+                          @dragend="onDragend"
                         >
-                            <template #title="row">
-                                <div class="tree-content">
-                                    <div class="tree-content-title">
-                                        <AIcon type="HolderOutlined" />
-                                        <div style="margin-left: 8px">
-                                            {{ row.name }}
-                                        </div>
-                                    </div>
+                          <template #title="row">
+                            <div class="tree-content">
+                              <div class="tree-content-title">
+                                <AIcon type="HolderOutlined" />
+                                <div style="margin-left: 8px">
+                                  {{ row.name }}
                                 </div>
-                            </template>
+                              </div>
+                            </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;
diff --git a/src/views/system/Menu/Setting/utils.ts b/src/views/system/Menu/Setting/utils.ts
index 1b48299c..c49f6661 100644
--- a/src/views/system/Menu/Setting/utils.ts
+++ b/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
+    })
+}
\ No newline at end of file