fix
This commit is contained in:
X1627315083
283
src/views/Administrator.vue
Normal file
283
src/views/Administrator.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<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:'Trial User Approval',
|
||||
route:'/administrator/testClickData',
|
||||
icon:'shenpi',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'/administrator/testClickData',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Design Frequency',
|
||||
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>
|
||||
Reference in New Issue
Block a user