修改目录排序

src/assets/up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1677137155677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5092" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M516.216471 266.661647l381.711058 376.832a44.574118 44.574118 0 0 1 0 65.054118 46.802824 46.802824 0 0 1-32.948705 13.974588H103.845647a46.983529 46.983529 0 0 1-47.104-46.501647c0-11.625412 4.698353-23.250824 14.155294-32.527059l379.361883-376.832a45.959529 45.959529 0 0 1 65.957647 0z" fill="#17B978" p-id="5093" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path></svg>

src/components/DirectoryStructureTree/index.jsx

@@ -2,6 +2,7 @@
 import css from './index.module.scss'
 import svgSetting from '@/assets/setting.svg'
 import svgAdd from '@/assets/add.svg'
+import svgUp from '@/assets/up.svg'
 import {defaultStore} from "@/store/index.js";
 import {useEffect, useState} from "react";
 import {autorun} from "mobx";
@@ -44,6 +45,77 @@ export default function DirectoryStructureTree(props) {
     const depth = props.depth || 1;
     const fatherId = props.fatherId || 0;
 
+    function up(e, target){
+        e.stopPropagation();
+        let newArr = props.tree.filter(item => {
+            return item.father == fatherId
+        })
+        newArr = JSON.parse(JSON.stringify(newArr))
+        for(let i in newArr){
+            newArr[i].rank = Number(i)
+        }
+        let oldRank;
+        for(let i in newArr){
+            if(newArr[i].id == target.id){
+                if(newArr[i].rank == 0){
+                    alert('该目录已在最前')
+                }else{
+                    oldRank = newArr[i].rank
+                    newArr[i].rank = oldRank - 1
+                }
+            }
+        }
+        for(let i in newArr){
+            if(newArr[i].rank == oldRank - 1 && newArr[i].id != target.id){
+                newArr[i].rank = oldRank;
+                break
+            }
+        }
+        let senArr = newArr.map(item => {
+            return {
+                id: item.id,
+                rank: item.rank
+            }
+        })
+        senArr = JSON.stringify(senArr)
+        defaultStore.changeMenuItemRank({rankArr:senArr})
+    }
+    function down(e, target){
+        e.stopPropagation();
+        let newArr = props.tree.filter(item => {
+            return item.father == fatherId
+        })
+        newArr = JSON.parse(JSON.stringify(newArr))
+        for(let i in newArr){
+            newArr[i].rank = Number(i)
+        }
+        let oldRank;
+        for(let i in newArr){
+            if(newArr[i].id == target.id){
+                if(newArr[i].rank == newArr.length - 1){
+                    alert('该目录已在最前')
+                }else{
+                    oldRank = newArr[i].rank
+                    newArr[i].rank = oldRank + 1
+                }
+            }
+        }
+        for(let i in newArr){
+            if(newArr[i].rank == oldRank + 1 && newArr[i].id != target.id){
+                newArr[i].rank = oldRank;
+                break
+            }
+        }
+        let senArr = newArr.map(item => {
+            return {
+                id: item.id,
+                rank: item.rank
+            }
+        })
+        senArr = JSON.stringify(senArr)
+        defaultStore.changeMenuItemRank({rankArr:senArr})
+    }
+
 
     return props.tree.map((item, index) => {
         return item.father == fatherId && <div key={index} className={css.directoryStructureTree}>
@@ -51,11 +123,16 @@ export default function DirectoryStructureTree(props) {
                  onClick={e => handleChoose(e, item.id)}>
                 <div className={css.text}>{item.name}</div>
                 <div className={css.cmd}>
-                    {depth < 3 && <img src={svgAdd} alt="" onClick={e => handleCreate(e, item.id)}/>}<img className={css.setting} src={svgSetting} alt=""
-                                                                                           onClick={e => handleSetting(e, item.id)}/>
+                    {depth < 3 && <img src={svgAdd} alt="" onClick={e => handleCreate(e, item.id)}/>}
+                    <img className={css.setting} src={svgSetting} alt="" onClick={e => handleSetting(e, item.id)}/>
+                    <div className={css.move}>
+                        <div onClick={e => up(e, item)}><img src={svgUp} alt=""/></div>
+                        <div onClick={e => down(e, item)}><img src={svgUp} alt=""/></div>
+                    </div>
                 </div>
             </div>
-            <div>{ depth < 3 && <DirectoryStructureTree tree={props.tree} fatherId={item.id} depth={depth + 1}></DirectoryStructureTree>}</div>
+            <div>{depth < 3 && <DirectoryStructureTree tree={props.tree} fatherId={item.id}
+                                                       depth={depth + 1}></DirectoryStructureTree>}</div>
         </div>
     })
 }

src/components/DirectoryStructureTree/index.module.scss

@@ -23,6 +23,7 @@
             @include autoHide;
             @include font-serif;
             font-weight: 600;
+            line-height: 2.2em;
         }
 
         & > div.cmd {
@@ -39,6 +40,54 @@
                 width: 22px;
                 margin-left: 10px;
             }
+            & > div.move{
+                position: relative;
+                margin-left: 10px;
+                height: 100%;
+                width: 20px;
+                //display: flex;
+                & > div:first-child{
+                    position: absolute;
+                    top:0;
+                    left: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 20px;
+                    height: 18px;
+                    border-radius: 100px;
+                    overflow: hidden;
+                    &:hover{
+                        background: #fefefe;
+                    }
+                    & > img{
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+                & > div:last-child{
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 20px;
+                    height: 18px;
+                    border-radius: 100px;
+                    overflow: hidden;
+                    &:hover{
+                        background: #fefefe;
+                    }
+                    & > img{
+                        position: relative;
+                        left: -1px;
+                        width: 20px;
+                        height: 20px;
+                        transform: rotate(180deg);
+                    }
+                }
+            }
         }
     }
     & > div.titleChoose{

src/components/Vision/index.jsx

@@ -65,8 +65,6 @@ export default function Vision(props){
     }, [props.element])
 
     function hrefClick(e) {
-        console.log('AAA')
-        console.log(href)
         e.stopPropagation();
         if (!href.url) return;
         if (href.url.length < 3) return

src/request/api.js

@@ -54,5 +54,12 @@ export default {
             formData.append(item, data[item])
         })
         return instance.put('/menu/updateMenu/',formData)
+    },
+    changeMenuItemRank(data){
+        const formData = new FormData()
+        Object.keys(data).map(item => {
+            formData.append(item, data[item])
+        })
+        return instance.put('/menu/changeMenuItemRank/',formData)
     }
 }

src/store/defaultStore.js

@@ -239,13 +239,18 @@ class DefaultStore {
         await api.updateMenuItem(data)
         this.getMenuList()
     }
-
+    // 获取当页数据
     async getNowPageContent(data){
         const response = await api.getContainerPage(data)
         runInAction(() => {
             this.nowPageContent = response.data.data
         })
     }
+    // 修改菜单顺序
+    async changeMenuItemRank(data){
+        const response = await api.changeMenuItemRank(data)
+        this.getMenuList()
+    }
 }
 
 export default DefaultStore

src/view/EditPageNew/index.jsx

@@ -393,6 +393,8 @@ export default function EditPageNew() {
     function closeCreateMenuModal(){
         setCreateMenuItemState(false)
         setDeleteMenuState(false)
+        const menu = {name:'', route:'', rank:0, father:0, icon: '', remarks:''}
+        setMenuData({...menu})
     }
     // 取消添加
     function handleCancelCreateMenuItem(){
@@ -451,26 +453,26 @@ export default function EditPageNew() {
                         </header>
                         <div className={css.main}>
                             <div className={css.container}>
-                                <Modal state={createMenuItemState} close={closeCreateMenuModal} width={"400"}>
+                                <Modal state={createMenuItemState} close={closeCreateMenuModal} width={"350"}>
                                     <div className={css.menuModal}>
                                         <div className={css.title}>编辑菜单信息</div>
                                         <div className={css.main}>
                                             <div className={css.box}>
                                                 <div>菜单名称</div>
-                                                <div><input type="text" value={menuData.name} onChange={e => handleMenuDataChange(e, 'name')}/></div>
+                                                <div><input type="text" placeholder="请输入菜单的名称" value={menuData.name} onChange={e => handleMenuDataChange(e, 'name')}/></div>
                                             </div>
                                             <div className={css.box}>
                                                 <div>路由标志</div>
-                                                <div><input type="text" value={menuData.route} onChange={e => handleMenuDataChange(e, 'route')}/></div>
+                                                <div><input type="text" placeholder="路由标志是引导页面内容的唯一标志" value={menuData.route} onChange={e => handleMenuDataChange(e, 'route')}/></div>
                                             </div>
                                             <div className={css.box}>
                                                 <div>菜单说明</div>
-                                                <div><input type="text" value={menuData.remarks} onChange={e => handleMenuDataChange(e, 'remarks')}/></div>
-                                            </div>
-                                            <div className={css.box}>
-                                                <div>菜单位置</div>
-                                                <div><input type="number" value={menuData.rank} onChange={e => handleMenuDataChange(e, 'rank')}/></div>
+                                                <div><input type="text" placeholder="请输入此菜单的相关说明" value={menuData.remarks} onChange={e => handleMenuDataChange(e, 'remarks')}/></div>
                                             </div>
+                                            {/*<div className={css.box}>*/}
+                                            {/*    <div>菜单位置</div>*/}
+                                            {/*    <div><input type="number" value={menuData.rank} onChange={e => handleMenuDataChange(e, 'rank')}/></div>*/}
+                                            {/*</div>*/}
                                         </div>
                                         <div className={css.footer}>
                                             <Button onClick={handleCancelCreateMenuItem}>取消</Button>

src/view/Show/index.jsx

@@ -7,7 +7,6 @@ import Vision from '@/components/Vision'
 export default function Show(props){
     const [pageData, setPageData] = useState([])
     const params = useParams()
-    console.log(params)
     useEffect(() => {
         defaultStore.getNowPageContent({route:params.route})
     },[params])