|
@@ -4,17 +4,24 @@
|
|
<ul class="nav">
|
|
<ul class="nav">
|
|
<div class="logo">ByteSailing</div>
|
|
<div class="logo">ByteSailing</div>
|
|
<li class="header-bar-hover-warp nav-li">
|
|
<li class="header-bar-hover-warp nav-li">
|
|
- <div @click="isChildMenu = !isChildMenu" class="menu-modal" style="font-size: 12px;">
|
|
+ <div
|
|
|
|
+ @click="isChildMenu = !isChildMenu"
|
|
|
|
+ class="menu-modal"
|
|
|
|
+ style="font-size: 12px"
|
|
|
|
+ >
|
|
功能导览
|
|
功能导览
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
</li>
|
|
</li>
|
|
-
|
|
+
|
|
<li class="nav-li" v-for="i in barData" :key="i.id">
|
|
<li class="nav-li" v-for="i in barData" :key="i.id">
|
|
<span>{{ i.name }}</span>
|
|
<span>{{ i.name }}</span>
|
|
</li>
|
|
</li>
|
|
- <div class="header-bar-warp" v-if="isChildMenu" @click.stop="isChildMenu = false">
|
|
+ <div
|
|
|
|
+ class="header-bar-warp"
|
|
|
|
+ v-if="isChildMenu"
|
|
|
|
+ @click.stop="isChildMenu = false"
|
|
|
|
+ >
|
|
<div class="header-bar-hover" @click.stop>
|
|
<div class="header-bar-hover" @click.stop>
|
|
<div class="header-bar-hover-content">
|
|
<div class="header-bar-hover-content">
|
|
<div class="left-banner">
|
|
<div class="left-banner">
|
|
@@ -45,18 +52,21 @@
|
|
</div> -->
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="menu-warp">
|
|
<div class="menu-warp">
|
|
- <div class="first-order-title">
|
|
+ <div class="first-order-title">外贸ERP</div>
|
|
- 外贸ERP
|
|
|
|
- </div>
|
|
|
|
<ul class="second-level">
|
|
<ul class="second-level">
|
|
- <div v-for="(i, index) in sidebarRouters"
|
|
+ <div
|
|
- :key="index">
|
|
+ v-for="(i, index) in sidebarRouters"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
<li
|
|
<li
|
|
v-if="i.isNone"
|
|
v-if="i.isNone"
|
|
class="menu-ul"
|
|
class="menu-ul"
|
|
- style="cursor: auto;"
|
|
+ style="cursor: auto"
|
|
></li>
|
|
></li>
|
|
- <li class="menu-title" v-else-if="i.isTitle">
|
|
+ <li
|
|
|
|
+ class="menu-title"
|
|
|
|
+ v-else-if="i.isTitle"
|
|
|
|
+ >
|
|
<el-icon size="16" color="#0084FF">
|
|
<el-icon size="16" color="#0084FF">
|
|
<edit />
|
|
<edit />
|
|
</el-icon>
|
|
</el-icon>
|
|
@@ -71,9 +81,7 @@
|
|
{{ i.meta.title }}
|
|
{{ i.meta.title }}
|
|
</li>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
</ul>
|
|
</ul>
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -131,13 +139,13 @@
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
import Cookies from 'js-cookie'
|
|
import Cookies from 'js-cookie'
|
|
-import { ElMessageBox,ElNotification } from 'element-plus'
|
|
+import { ElMessageBox, ElNotification } from 'element-plus'
|
|
import useUserStore from '@/store/modules/user'
|
|
import useUserStore from '@/store/modules/user'
|
|
import usePermissionStore from '@/store/modules/permission'
|
|
import usePermissionStore from '@/store/modules/permission'
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const userStore = useUserStore()
|
|
const permissionStore = usePermissionStore()
|
|
const permissionStore = usePermissionStore()
|
|
-
|
|
+const { proxy } = getCurrentInstance()
|
|
const sidebarRouters = ref([])
|
|
const sidebarRouters = ref([])
|
|
const input1 = ref('')
|
|
const input1 = ref('')
|
|
const isChildMenu = ref(false)
|
|
const isChildMenu = ref(false)
|
|
@@ -145,47 +153,50 @@ const menuData = ref([])
|
|
const barData = ref([])
|
|
const barData = ref([])
|
|
const userData = ref(Cookies.get('username') || '')
|
|
const userData = ref(Cookies.get('username') || '')
|
|
|
|
|
|
-const routerInit = (() => {
|
|
+const routerInit = () => {
|
|
//二维转一维
|
|
//二维转一维
|
|
const arr = []
|
|
const arr = []
|
|
for (let i = 0; i < permissionStore.addRoutes.length; i++) {
|
|
for (let i = 0; i < permissionStore.addRoutes.length; i++) {
|
|
- const element = permissionStore.addRoutes[i];
|
|
+ const element = permissionStore.addRoutes[i]
|
|
- if(element.type === 1) {
|
|
+ if (element.type === 1) {
|
|
element.isTitle = true
|
|
element.isTitle = true
|
|
arr.push(element)
|
|
arr.push(element)
|
|
}
|
|
}
|
|
-
|
|
+
|
|
- if(element.children && element.children.length > 0){
|
|
+ if (element.children && element.children.length > 0) {
|
|
for (let j = 0; j < element.children.length; j++) {
|
|
for (let j = 0; j < element.children.length; j++) {
|
|
- const jelement = element.children[j];
|
|
+ const jelement = element.children[j]
|
|
jelement.isTitle = false
|
|
jelement.isTitle = false
|
|
- arr.push({...jelement, fatherPath:element.path})
|
|
+ if (jelement.type === 1) {
|
|
|
|
+ arr.push({ ...jelement, fatherPath: element.path })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- }
|
|
+ }
|
|
}
|
|
}
|
|
let num = 0
|
|
let num = 0
|
|
//添加剩余子元素,补齐一列
|
|
//添加剩余子元素,补齐一列
|
|
for (let i = 0; i < arr.length; i++) {
|
|
for (let i = 0; i < arr.length; i++) {
|
|
- const element = arr[i];
|
|
+ const element = arr[i]
|
|
- if(element.isTitle) {
|
|
+ if (element.isTitle) {
|
|
- //判断是否存在
|
|
+ //判断余数加上子项列会不会爆掉
|
|
- if(element.children && element.children.length > 0){
|
|
+ if (
|
|
- //判断余数加上子项列会不会爆掉
|
|
+ element.children &&
|
|
- if(num % 11 + element.children.length > 11 && element.children.length < 11){
|
|
+ element.children.length > 0 &&
|
|
- element.pushNum = 11 - num % 11
|
|
+ (num % 11) + element.children.length > 11 &&
|
|
- for (let j = 0; j < 11 - num % 11; j++) {
|
|
+ element.children.length < 11
|
|
- arr.splice(i, 0, {...element,isNone:true})
|
|
+ ) {
|
|
- i++
|
|
+ for (let j = 0; j < 11 - (num % 11); j++) {
|
|
- }
|
|
+ arr.splice(i, 0, { ...element, isNone: true })
|
|
|
|
+ i++
|
|
}
|
|
}
|
|
|
|
+ num++
|
|
}
|
|
}
|
|
- num ++
|
|
+
|
|
- }else{
|
|
|
|
- num ++
|
|
|
|
}
|
|
}
|
|
|
|
+ num++
|
|
}
|
|
}
|
|
sidebarRouters.value = arr
|
|
sidebarRouters.value = arr
|
|
-})
|
|
+}
|
|
function handleCommand(command) {
|
|
function handleCommand(command) {
|
|
switch (command) {
|
|
switch (command) {
|
|
case 'setLayout':
|
|
case 'setLayout':
|
|
@@ -199,9 +210,7 @@ function handleCommand(command) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
function logout() {
|
|
function logout() {
|
|
-
|
|
|
|
ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
|
|
ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
cancelButtonText: '取消',
|
|
@@ -220,11 +229,13 @@ function routerPush(i) {
|
|
isChildMenu.value = false
|
|
isChildMenu.value = false
|
|
}
|
|
}
|
|
|
|
|
|
-onMounted(()=>{
|
|
+onMounted(() => {
|
|
routerInit()
|
|
routerInit()
|
|
|
|
+ proxy.get('/getInfo').then(res=>{
|
|
|
|
+ userData.value = res.user.userName
|
|
|
|
+ })
|
|
|
|
+
|
|
})
|
|
})
|
|
-
|
|
|
|
-
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
@@ -236,7 +247,6 @@ onMounted(()=>{
|
|
bottom: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1100;
|
|
z-index: 1100;
|
|
-
|
|
|
|
}
|
|
}
|
|
.header-bar {
|
|
.header-bar {
|
|
background: #20222a;
|
|
background: #20222a;
|
|
@@ -245,7 +255,8 @@ onMounted(()=>{
|
|
left: 0;
|
|
left: 0;
|
|
right: 0;
|
|
right: 0;
|
|
z-index: 1100;
|
|
z-index: 1100;
|
|
- ul,li{
|
|
+ ul,
|
|
|
|
+ li {
|
|
list-style: none;
|
|
list-style: none;
|
|
padding: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
@@ -270,11 +281,11 @@ onMounted(()=>{
|
|
.header-bar-hover-content {
|
|
.header-bar-hover-content {
|
|
display: flex;
|
|
display: flex;
|
|
text-align: left;
|
|
text-align: left;
|
|
- .left-banner{
|
|
+ .left-banner {
|
|
width: 230px;
|
|
width: 230px;
|
|
- ul{
|
|
+ ul {
|
|
- background: #F1F1F1;
|
|
+ background: #f1f1f1;
|
|
- li{
|
|
+ li {
|
|
height: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
line-height: 50px;
|
|
padding: 0 50px;
|
|
padding: 0 50px;
|
|
@@ -282,15 +293,15 @@ onMounted(()=>{
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .first-order{
|
|
+ .first-order {
|
|
height: 50px;
|
|
height: 50px;
|
|
padding: 0 20px;
|
|
padding: 0 20px;
|
|
line-height: 50px;
|
|
line-height: 50px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
- background: #F9F9F9;
|
|
+ background: #f9f9f9;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- i{
|
|
+ i {
|
|
position: relative;
|
|
position: relative;
|
|
top: 3px;
|
|
top: 3px;
|
|
margin-right: 5px;
|
|
margin-right: 5px;
|
|
@@ -317,34 +328,34 @@ onMounted(()=>{
|
|
padding: 0 40px;
|
|
padding: 0 40px;
|
|
height: 500px;
|
|
height: 500px;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
- .first-order-title{
|
|
+ .first-order-title {
|
|
height: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
line-height: 70px;
|
|
color: #333333;
|
|
color: #333333;
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
- .second-level{
|
|
+ .second-level {
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- height:420px;
|
|
+ height: 420px;
|
|
display: flex;
|
|
display: flex;
|
|
- flex-wrap:wrap;
|
|
+ flex-wrap: wrap;
|
|
- flex-direction:column;
|
|
+ flex-direction: column;
|
|
- flex-grow:0;
|
|
+ flex-grow: 0;
|
|
- flex-basis:auto;
|
|
+ flex-basis: auto;
|
|
}
|
|
}
|
|
.menu-title {
|
|
.menu-title {
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
- color: #0084FF;
|
|
+ color: #0084ff;
|
|
height: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
line-height: 40px;
|
|
border-bottom: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
width: 140px;
|
|
width: 140px;
|
|
margin: 0 100px 0 0;
|
|
margin: 0 100px 0 0;
|
|
- i{
|
|
+ i {
|
|
position: relative;
|
|
position: relative;
|
|
- top:3px;
|
|
+ top: 3px;
|
|
margin-right: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -360,7 +371,7 @@ onMounted(()=>{
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
- .menu-ul:hover{
|
|
+ .menu-ul:hover {
|
|
color: #0084ff;
|
|
color: #0084ff;
|
|
}
|
|
}
|
|
}
|
|
}
|