|
@@ -11,12 +11,21 @@
|
|
|
</div>
|
|
|
</li>
|
|
|
<div class="auto-list">
|
|
|
- <li class="nav-li" v-for="(i, index) in barData" v-show="index < autoListChidrenNum - 1" :key="i.id">
|
|
|
- <span>{{ index + i.name }}</span>
|
|
|
+ <li
|
|
|
+ class="nav-li"
|
|
|
+ @click="commonsBannerToRouter(i)"
|
|
|
+ v-for="(i, index) in commonsRouterList"
|
|
|
+ v-show="index < autoListChidrenNum - 1" :key="i.id">
|
|
|
+ <span>{{ i.menuName }}</span>
|
|
|
</li>
|
|
|
- <li class="nav-li more-box">
|
|
|
+ <li class="nav-li more-box" v-show="commonsRouterList.length > autoListChidrenNum - 1">
|
|
|
更多
|
|
|
<i class="iconfont icon-iconm_xialan1"></i>
|
|
|
+ <ul class="more-list">
|
|
|
+ <li v-for="(i, index) in commonsRouterList" v-show="index >= autoListChidrenNum - 1" :key="i.id">
|
|
|
+ <span @click="commonsBannerToRouter(i)">{{ i.menuName }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</li>
|
|
|
</div>
|
|
|
<div class="header-bar-warp" v-if="isChildMenu" @click.stop="isChildMenu = false">
|
|
@@ -29,16 +38,16 @@
|
|
|
</el-icon>
|
|
|
常用功能
|
|
|
</div>
|
|
|
- <div class="first-order" @click="leftBanerType = 1">
|
|
|
+ <div class="first-order">
|
|
|
<el-icon size="16" color="#0084FF">
|
|
|
<edit />
|
|
|
</el-icon>
|
|
|
功能菜单
|
|
|
</div>
|
|
|
<ul>
|
|
|
- <li v-for="i in sidebarRoutersCopy" :key="i.name" v-show="i.type == 1">{{ i.meta.title
|
|
|
- }}</li>
|
|
|
-
|
|
|
+ <li @click="openLeftBaner(i,index)" v-for="(i,index) in sidebarRoutersCopy" :key="i.name"
|
|
|
+ v-show="i.type == 1 && i.status == '0'">{{ i.menuName
|
|
|
+ }}</li>
|
|
|
</ul>
|
|
|
<!-- <div class="first-order">
|
|
|
<el-icon size="16" color="#0084FF">
|
|
@@ -47,56 +56,73 @@
|
|
|
推荐服务
|
|
|
</div> -->
|
|
|
</div>
|
|
|
- <div class="menu-warp" v-if="leftBanerType == 1">
|
|
|
- <div class="first-order-title">外贸ERP</div>
|
|
|
+ <div class="menu-warp" v-show="leftBanerType == 1">
|
|
|
+ <div class="first-order-title">{{ activeLeftData.menuName }}</div>
|
|
|
+ <!-- <ul class="second-level" v-for="i in activeLeftData.children" :key="i.menuId">
|
|
|
+ <li class="menu-title">
|
|
|
+
|
|
|
+ {{ i.menuName }}
|
|
|
+ </li>
|
|
|
+ <div v-for="(j, index) in i.children" :key="index">
|
|
|
+ <li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
|
|
|
+
|
|
|
+ <li class="menu-ul" @click="routerPush(i,j)" style="cursor: pointer">
|
|
|
+ {{ j.menuName }}
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </ul> -->
|
|
|
<ul class="second-level">
|
|
|
- <div v-for="(i, index) in sidebarRouters" :key="index">
|
|
|
+ <div v-for="(i, index) in activeLeftData" :key="index">
|
|
|
<li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
|
|
|
<li class="menu-title" v-else-if="i.isTitle">
|
|
|
- <!-- <i :class="'iconfont icon-' + i.meta.icon" style="position: relative;top: -1px;"></i> -->
|
|
|
+
|
|
|
|
|
|
- {{ i.meta && !i.hidden ? i.meta.title : '' }}
|
|
|
+ {{ i.menuName }}
|
|
|
</li>
|
|
|
- <li v-else class="menu-ul" @click="routerPush(i)" style="cursor: pointer">
|
|
|
- {{ i.meta && !i.hidden ? i.meta.title : '' }}
|
|
|
+ <li v-else class="menu-ul" @click="commonsBannerToRouter(i)" style="cursor: pointer">
|
|
|
+
|
|
|
+ {{ i.menuName }}
|
|
|
</li>
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="menu-warp" v-else-if="leftBanerType == 2">
|
|
|
+ <div class="menu-warp" v-show="leftBanerType == 2">
|
|
|
<div class="first-order-title">常用功能</div>
|
|
|
<div class="commons-warp">
|
|
|
- <div >
|
|
|
- <div class="header-button-box">
|
|
|
- <span>asdasd</span>
|
|
|
- <div class="right-icon">
|
|
|
+ <div>
|
|
|
+ <div class="header-button-box cp" v-for="(i,index) in commonsRouterList" :key="i.name" @click="commonsBannerToRouter(i)">
|
|
|
+ <span>{{ i.menuName }}</span>
|
|
|
+ <div class="right-icon" @click.stop="deleteCommonsRouter(i,index)">
|
|
|
<!-- <el-icon color="#46A6FF"><CirclePlus /></el-icon> -->
|
|
|
- <el-icon color="#BBBBBB">
|
|
|
+ <el-icon color="#BBBBBB" v-show="isEidtType">
|
|
|
<Close />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="header-add-button-box" v-if="!isEidtType" @click="isEidtType = true">
|
|
|
+ <el-icon color="#46A6FF">
|
|
|
+ <CirclePlus />
|
|
|
+ </el-icon>
|
|
|
+ 编辑功能
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="first-order-title">待添加功能</div>
|
|
|
- <div class="all-menu-warp">
|
|
|
- <div v-for="i in sidebarRoutersCopy" :key="i.name">
|
|
|
- <div class="all-menu-title" v-for="j in i.children" :key="j.name">
|
|
|
+ <div class="first-order-title" v-if="isEidtType">待添加功能</div>
|
|
|
+ <div class="all-menu-warp" v-if="isEidtType">
|
|
|
+ <div v-for="(i, index) in sidebarRoutersCopy" :key="i.name" v-show="i.type === 1">
|
|
|
+ <div class="all-menu-title" v-for="(j, jindex) in i.children" :key="j.name">
|
|
|
<div class="title">
|
|
|
- 邮箱
|
|
|
+ {{ j.menuName }}
|
|
|
+
|
|
|
</div>
|
|
|
<div class="all-menu-lists">
|
|
|
- <div class="header-button-box">
|
|
|
- <span>asdasd</span>
|
|
|
- <div class="right-icon">
|
|
|
- <el-icon color="#46A6FF">
|
|
|
- <CirclePlus />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="header-button-box">
|
|
|
- <span>asdasd</span>
|
|
|
- <div class="right-icon">
|
|
|
+ <div class="header-button-box" v-for="(n, nindex) in j.children"
|
|
|
+ v-show="n.visible == '0'"
|
|
|
+ :key="n.name">
|
|
|
+ <span>{{ n.menuName }}</span>
|
|
|
+
|
|
|
+ <div class="right-icon"
|
|
|
+ @click="addCommonsRouter(index, jindex, nindex, n)">
|
|
|
<el-icon color="#46A6FF">
|
|
|
<CirclePlus />
|
|
|
</el-icon>
|
|
@@ -107,7 +133,10 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <div class="router-list"></div>
|
|
|
+ <div class="btn-warp" v-if="isEidtType">
|
|
|
+ <el-button type="" @click="isEidtType = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="userMenuEdit">保存</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -161,44 +190,75 @@
|
|
|
|
|
|
<script setup>
|
|
|
import Cookies from 'js-cookie'
|
|
|
-import { ElMessageBox, ElNotification } from 'element-plus'
|
|
|
+import { ElMessageBox, ElNotification, ElMessage } from 'element-plus'
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
-import usePermissionStore from '@/store/modules/permission'
|
|
|
import '@/components/headerBar/header.scss'
|
|
|
const router = useRouter()
|
|
|
const userStore = useUserStore()
|
|
|
-const permissionStore = usePermissionStore()
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
const sidebarRouters = ref([])
|
|
|
const sidebarRoutersCopy = ref([])
|
|
|
-const input1 = ref('')
|
|
|
-const isChildMenu = ref(true)
|
|
|
+const isChildMenu = ref(false)
|
|
|
const autoListChidrenNum = ref(0)
|
|
|
-const menuData = ref([])
|
|
|
+const isEidtType = ref(false)
|
|
|
const leftBanerType = ref(2)
|
|
|
-const barData = ref([
|
|
|
- { name: '首页1', id: 1 },
|
|
|
- { name: '首页2', id: 2 },
|
|
|
- { name: '首页3', id: 3 },
|
|
|
- { name: '首页4', id: 4 },
|
|
|
- { name: '首页5', id: 5 },
|
|
|
- { name: '首页6', id: 6 },
|
|
|
- { name: '首页7', id: 7 },
|
|
|
- { name: '首页8', id: 8 },
|
|
|
- { name: '首页9', id: 9 },
|
|
|
- { name: '首页10', id: 10 },
|
|
|
- { name: '首页11', id: 11 },
|
|
|
-])
|
|
|
+
|
|
|
const userData = ref(Cookies.get('username') || '')
|
|
|
+const commonsRouterList = ref([])
|
|
|
+const activeLeftData = ref({})
|
|
|
+const openLeftBaner = (i,index) => {
|
|
|
+ leftBanerType.value = 1
|
|
|
+ activeLeftData.value = i
|
|
|
+ routerInit(i)
|
|
|
+}
|
|
|
+
|
|
|
+const userMenuEdit = () => {
|
|
|
+ proxy.post('/sysUserMenu/edit',{
|
|
|
+ type:1,
|
|
|
+ menuIdList:commonsRouterList.value.map(item=>item.menuId)
|
|
|
+ }).then(res=>{
|
|
|
+ ElMessage({
|
|
|
+ message: '保存成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ isEidtType.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const deleteCommonsRouter = (i,index) => {
|
|
|
+ commonsRouterList.value.splice(index, 1)
|
|
|
+}
|
|
|
|
|
|
-const routerInit = () => {
|
|
|
+const addCommonsRouter = (index, jindex, nindex, n) => {
|
|
|
+ for (let i = 0; i < commonsRouterList.value.length; i++) {
|
|
|
+ const element = commonsRouterList.value[i];
|
|
|
+ if(element.menuId === n.menuId){
|
|
|
+ ElMessage({
|
|
|
+ message: '此目录已添加',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (n.hidden) {
|
|
|
+ ElMessage({
|
|
|
+ message: '此目录需要额外参数,暂不支持添加',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ commonsRouterList.value.push(n)
|
|
|
+ sidebarRoutersCopy.value[index].children[jindex].children[nindex].isCommonsBanner = true
|
|
|
+}
|
|
|
+
|
|
|
+const routerInit = (item) => {
|
|
|
//二维转一维
|
|
|
const arr = []
|
|
|
- sidebarRoutersCopy.value = permissionStore.addRoutes
|
|
|
- for (let i = 0; i < permissionStore.addRoutes.length; i++) {
|
|
|
- const element = permissionStore.addRoutes[i]
|
|
|
+ for (let i = 0; i < item.children.length; i++) {
|
|
|
+ const element = item.children[i]
|
|
|
if (element.type === 1) {
|
|
|
element.isTitle = true
|
|
|
+
|
|
|
arr.push(element)
|
|
|
}
|
|
|
|
|
@@ -232,8 +292,7 @@ const routerInit = () => {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
- console.log(sidebarRoutersCopy)
|
|
|
- sidebarRouters.value = arr
|
|
|
+ activeLeftData.value = arr
|
|
|
}
|
|
|
function handleCommand(command) {
|
|
|
switch (command) {
|
|
@@ -261,12 +320,24 @@ function logout() {
|
|
|
})
|
|
|
.catch(() => { })
|
|
|
}
|
|
|
-//拼接url跳转
|
|
|
-function routerPush(i) {
|
|
|
- if (i.hide) return
|
|
|
- router.push(i.fatherPath + '/' + i.path)
|
|
|
- isChildMenu.value = false
|
|
|
-}
|
|
|
+
|
|
|
+//使用id计算拼接url
|
|
|
+const commonsBannerToRouter = (i) => {
|
|
|
+ sidebarRoutersCopy.value.map(item => {
|
|
|
+ if(item.children) {
|
|
|
+ item.children.map(j => {
|
|
|
+ if(j.children){
|
|
|
+ j.children.map(n => {
|
|
|
+ if(n.menuId === i.menuId){
|
|
|
+ router.push('/' + item.path + '/' + j.path + '/' + n.path)
|
|
|
+ isChildMenu.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
//获取浏览器宽度
|
|
|
function getBrowserWidth() {
|
|
@@ -276,17 +347,42 @@ function getBrowserWidth() {
|
|
|
//计算auto-list 能放下几个
|
|
|
function calcAutoListChidren() {
|
|
|
autoListChidrenNum.value = Math.floor((getBrowserWidth() - 390) / 120)
|
|
|
- console.log(autoListChidrenNum.value)
|
|
|
}
|
|
|
|
|
|
+//一维数组转tree
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- routerInit()
|
|
|
+ calcAutoListChidren()
|
|
|
window.addEventListener('resize', calcAutoListChidren);
|
|
|
-
|
|
|
proxy.get('/getInfo').then(res => {
|
|
|
userData.value = res.user.userName
|
|
|
})
|
|
|
-
|
|
|
+ proxy.get('/system/menu/list').then(res => {
|
|
|
+ res.data = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ isCommonsBanner: false,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ sidebarRoutersCopy.value = proxy.handleTree(res.data, "menuId")
|
|
|
+ //循环删除 i.status != 0 || i.visible != 0 的元素
|
|
|
+ sidebarRoutersCopy.value.map(item => {
|
|
|
+ if(item.children) {
|
|
|
+ item.children.map(j => {
|
|
|
+ if(j.children){
|
|
|
+ j.children.map(n => {
|
|
|
+ if(n.status != 0 || n.visible != 0 || n.type != 1){
|
|
|
+ j.children.splice(j.children.indexOf(n),1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ proxy.post('/sysUserMenu/list',{type:1}).then(res => {
|
|
|
+ commonsRouterList.value = res
|
|
|
+ })
|
|
|
})
|
|
|
</script>
|
|
|
|