diff --git a/dist_20230223_V1.zip b/dist_20230223_V1.zip new file mode 100644 index 0000000..9d520ec Binary files /dev/null and b/dist_20230223_V1.zip differ diff --git a/src/assets/up.svg b/src/assets/up.svg new file mode 100644 index 0000000..5c33e34 --- /dev/null +++ b/src/assets/up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DirectoryStructureTree/index.jsx b/src/components/DirectoryStructureTree/index.jsx index 3ff2bf1..028e4dc 100644 --- a/src/components/DirectoryStructureTree/index.jsx +++ b/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"; @@ -34,7 +35,7 @@ export default function DirectoryStructureTree(props) { return () => { a() } - },[chooseId]) + }, [chooseId]) // if (props.fatherId) { // setFatherId(props.fatherId) // } @@ -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 &&
@@ -51,11 +123,16 @@ export default function DirectoryStructureTree(props) { onClick={e => handleChoose(e, item.id)}>
{item.name}
- {depth < 3 && handleCreate(e, item.id)}/>} handleSetting(e, item.id)}/> + {depth < 3 && handleCreate(e, item.id)}/>} + handleSetting(e, item.id)}/> +
+
up(e, item)}>
+
down(e, item)}>
+
-
{ depth < 3 && }
+
{depth < 3 && }
}) } diff --git a/src/components/DirectoryStructureTree/index.module.scss b/src/components/DirectoryStructureTree/index.module.scss index 07eff3d..352bb27 100644 --- a/src/components/DirectoryStructureTree/index.module.scss +++ b/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{ diff --git a/src/components/Vision/index.jsx b/src/components/Vision/index.jsx index d1b0c67..cf4a647 100644 --- a/src/components/Vision/index.jsx +++ b/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 diff --git a/src/request/api.js b/src/request/api.js index da73a5b..abc1515 100644 --- a/src/request/api.js +++ b/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) } } diff --git a/src/store/defaultStore.js b/src/store/defaultStore.js index 7a03560..b456519 100644 --- a/src/store/defaultStore.js +++ b/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 diff --git a/src/view/EditPageNew/index.jsx b/src/view/EditPageNew/index.jsx index c51f78d..bff8224 100644 --- a/src/view/EditPageNew/index.jsx +++ b/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() {
- +
编辑菜单信息
菜单名称
-
handleMenuDataChange(e, 'name')}/>
+
handleMenuDataChange(e, 'name')}/>
路由标志
-
handleMenuDataChange(e, 'route')}/>
+
handleMenuDataChange(e, 'route')}/>
菜单说明
-
handleMenuDataChange(e, 'remarks')}/>
-
-
-
菜单位置
-
handleMenuDataChange(e, 'rank')}/>
+
handleMenuDataChange(e, 'remarks')}/>
+ {/*
*/} + {/*
菜单位置
*/} + {/*
handleMenuDataChange(e, 'rank')}/>
*/} + {/*
*/}
@@ -641,4 +643,4 @@ export default function EditPageNew() {
-} \ No newline at end of file +} diff --git a/src/view/Show/index.jsx b/src/view/Show/index.jsx index 17cab4b..f7c66fa 100644 --- a/src/view/Show/index.jsx +++ b/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])