|
|
@ -2,6 +2,7 @@ |
|
|
|
import css from './index.module.scss' |
|
|
|
import css from './index.module.scss' |
|
|
|
import svgSetting from '@/assets/setting.svg' |
|
|
|
import svgSetting from '@/assets/setting.svg' |
|
|
|
import svgAdd from '@/assets/add.svg' |
|
|
|
import svgAdd from '@/assets/add.svg' |
|
|
|
|
|
|
|
import svgUp from '@/assets/up.svg' |
|
|
|
import {defaultStore} from "@/store/index.js"; |
|
|
|
import {defaultStore} from "@/store/index.js"; |
|
|
|
import {useEffect, useState} from "react"; |
|
|
|
import {useEffect, useState} from "react"; |
|
|
|
import {autorun} from "mobx"; |
|
|
|
import {autorun} from "mobx"; |
|
|
@ -44,6 +45,77 @@ export default function DirectoryStructureTree(props) { |
|
|
|
const depth = props.depth || 1; |
|
|
|
const depth = props.depth || 1; |
|
|
|
const fatherId = props.fatherId || 0; |
|
|
|
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 props.tree.map((item, index) => { |
|
|
|
return item.father == fatherId && <div key={index} className={css.directoryStructureTree}> |
|
|
|
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)}> |
|
|
|
onClick={e => handleChoose(e, item.id)}> |
|
|
|
<div className={css.text}>{item.name}</div> |
|
|
|
<div className={css.text}>{item.name}</div> |
|
|
|
<div className={css.cmd}> |
|
|
|
<div className={css.cmd}> |
|
|
|
{depth < 3 && <img src={svgAdd} alt="" onClick={e => handleCreate(e, item.id)}/>}<img className={css.setting} src={svgSetting} alt="" |
|
|
|
{depth < 3 && <img src={svgAdd} alt="" onClick={e => handleCreate(e, item.id)}/>} |
|
|
|
onClick={e => handleSetting(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> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|