284 lines
8.4 KiB
Vue
284 lines
8.4 KiB
Vue
<template>
|
|
<div class="administrator_page">
|
|
<div class="administrator_page_left">
|
|
<div class="modal_title_text">Administrator</div>
|
|
<a-menu
|
|
id="dddddd"
|
|
class="menu_list_content"
|
|
theme="dark"
|
|
v-model:openKeys="openKeys"
|
|
v-model:selectedKeys="selectedKeys"
|
|
mode="inline"
|
|
@click="handleClick"
|
|
>
|
|
|
|
<div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
|
|
<a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
|
|
<template #icon><span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span></template>
|
|
<span class="menu_title">{{menu.name}}</span>
|
|
</a-menu-item>
|
|
<a-sub-menu :key="menu.key" v-else>
|
|
<template #icon>
|
|
<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
|
|
</template>
|
|
<template #expandIcon><span :class="['icon','iconfont', 'menu_icon', menu.expandIcon]"></span></template>
|
|
<template #title><span class="menu_title">{{menu.name}}</span></template>
|
|
<div >
|
|
<a-menu-item v-for="child in menu.children" :key="child.key" :name="child.name" :route="child.route"><span class="menu_title">{{child.name}}</span></a-menu-item>
|
|
</div>
|
|
</a-sub-menu>
|
|
</div>
|
|
</a-menu>
|
|
</div>
|
|
<div class="administrator_page_right">
|
|
<div class="administrator_page_right_header">
|
|
<div class="page_name">
|
|
<div v-show="!routers.length" class="page_name_title">{{nowPageName}}</div>
|
|
<a-breadcrumb v-show="routers.length" :routes="routers">
|
|
<template #itemRender="{ route, routes, paths }">
|
|
<span v-if="routes.indexOf(route) === routes.length - 1">
|
|
{{ route.breadcrumbName }}
|
|
</span>
|
|
<router-link v-else :to="`${paths.join('/')}`">
|
|
{{ route.breadcrumbName }}
|
|
</router-link>
|
|
</template>
|
|
</a-breadcrumb>
|
|
</div>
|
|
</div>
|
|
<div class="administrator_page_right_content">
|
|
<router-view/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { message, Upload } from "ant-design-vue";
|
|
import { defineComponent, onMounted, h, ref, nextTick, inject,reactive, toRefs } from "vue";
|
|
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useRouter,useRoute } from 'vue-router'
|
|
import GO from "@/tool/GO";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import { getUploadUrl } from "@/tool/util";
|
|
// import { forEach } from "jszip";
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
|
import { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
|
components: {
|
|
MailOutlined,
|
|
AppstoreOutlined,
|
|
SettingOutlined,
|
|
},
|
|
props: ["msg",'sketchCatecoryList'],
|
|
setup() {
|
|
const router = useRouter()
|
|
const route:any = useRoute()
|
|
const state = reactive({
|
|
rootSubmenuKeys: [{
|
|
name:'Trial User',
|
|
route:'/administrator/allUser',
|
|
icon:'yonghu',
|
|
expandIcon:'icon-xiala',
|
|
key:'/administrator/allUser',
|
|
isShow:true,
|
|
// children: [
|
|
// {
|
|
// name:'User Management',
|
|
// route:'/home/excil1',
|
|
// icon:'',
|
|
// key:'/home/excil22',
|
|
// isShow:true,
|
|
// },
|
|
// {
|
|
// code:'ROLE_MANAGER',
|
|
// name:'Access Permission',
|
|
// route:'/home/excil2',
|
|
// icon:'',
|
|
// key:'/home/excil33',
|
|
// isShow:true,
|
|
// },
|
|
// ],
|
|
},{
|
|
name:'Design Frequency',
|
|
route:'/administrator/testClickData',
|
|
icon:'shenpi',
|
|
expandIcon:'icon-xiala',
|
|
key:'/administrator/testClickData',
|
|
isShow:true,
|
|
},{
|
|
name:'Trial User Approval',
|
|
route:'/administrator/trialApproval',
|
|
icon:'usetime',
|
|
key:'/administrator/trialApproval',
|
|
expandIcon:'icon-xiala',
|
|
isShow:true,
|
|
}],
|
|
openKeys: ['sub1'],
|
|
selectedKeys: [],
|
|
nowPageName:'Trial User',//当前页面名称
|
|
});
|
|
let routers:any = ref([])
|
|
|
|
|
|
const onOpenChange = (openKeys: string[]) => {
|
|
const latestOpenKey:any = openKeys.find(key => state.openKeys.indexOf(key) === -1);
|
|
if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
|
|
state.openKeys = openKeys;
|
|
} else {
|
|
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
|
}
|
|
};
|
|
let handleClick = (event:any) => {
|
|
|
|
// state.selectedKeys = [Number(event.key)]
|
|
state.nowPageName = event.item.name
|
|
router.push({path:event.item.route})
|
|
}
|
|
onMounted(() => {
|
|
let cookieInfo = getCookie('userInfo') || ''
|
|
if(cookieInfo){
|
|
// menuList.value = JSON.parse(menuListSession)
|
|
// userInfo.value = JSON.parse(cookieInfo)
|
|
// state.selectedKeys = [route.path]
|
|
// getBreadData(route.name)
|
|
// getTitle(menuList.value, route.path)
|
|
}else{
|
|
}
|
|
state.nowPageName = state.rootSubmenuKeys[0].name
|
|
router.push(state.rootSubmenuKeys[0].route)
|
|
|
|
})
|
|
return {
|
|
...toRefs(state),
|
|
onOpenChange,
|
|
routers,
|
|
handleClick,
|
|
};
|
|
},
|
|
data(prop) {
|
|
return {
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
watch:{
|
|
// newWindowState:{
|
|
// handler(newVal,oldVal){
|
|
// console.log(newVal);
|
|
// if(newVal){
|
|
// this.newWindow?.close();
|
|
// }
|
|
// }
|
|
// },
|
|
|
|
},
|
|
methods: {
|
|
|
|
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.administrator_page {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: rgba(243,244,248,0.4);
|
|
|
|
.administrator_page_left{
|
|
padding-top: 20px;
|
|
.modal_title_text{
|
|
// font-size: var(--aida-fsize1-8);
|
|
line-height: 10rem;
|
|
text-align: center;
|
|
}
|
|
.ant-menu-dark.menu_list_content{
|
|
padding-left: 1.8rem;
|
|
width: 30rem;
|
|
height: calc(100% - 59px);
|
|
background: #FFFFFF;
|
|
flex-shrink: 0;
|
|
|
|
.menu_icon{
|
|
font-size: 2.4rem;
|
|
color: #808185;
|
|
}
|
|
|
|
.ant-menu-item{
|
|
padding-left: 3.1rem !important;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 6.6rem;
|
|
border-radius: 3.3rem 0px 0px 3.3rem;
|
|
box-sizing: border-box;
|
|
|
|
&.ant-menu-item-only-child{
|
|
padding-left: 5.6rem !important;
|
|
}
|
|
|
|
}
|
|
|
|
.ant-menu-submenu-title{
|
|
padding-left: 3.1rem !important;
|
|
height: 6.6rem;
|
|
|
|
}
|
|
.ant-menu-inline.ant-menu-sub{
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.menu_title{
|
|
font-size: 1.8rem;
|
|
font-family: Adobe Heiti Std;
|
|
font-weight: normal;
|
|
color: #808185;
|
|
}
|
|
.ant-menu-item-selected{
|
|
background: #F3F4F8;
|
|
|
|
.menu_title{
|
|
color: #343579;
|
|
}
|
|
|
|
.menu_icon{
|
|
color: #808185;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.administrator_page_right{
|
|
flex: 1;
|
|
.administrator_page_right_header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 6.6rem;
|
|
padding: 0 2.8rem 0 3.0rem;
|
|
|
|
.page_name{
|
|
border-left: solid .4rem #161F29;
|
|
.page_name_title,.ant-breadcrumb-link{
|
|
font-size: 1.8rem;
|
|
font-weight: normal;
|
|
color: #333333;
|
|
padding-left: 1.2rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
}
|
|
}
|
|
.administrator_page_right_content{
|
|
height: 100%;
|
|
padding-left: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|