|
|
|
@ -2,8 +2,8 @@
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<myHeader></myHeader>
|
|
|
|
<myHeader></myHeader>
|
|
|
|
<div class="body-container">
|
|
|
|
<div class="body-container">
|
|
|
|
<!-- <div class="tree-menu">
|
|
|
|
<div class="tree-menu">
|
|
|
|
<router-link
|
|
|
|
<!-- <router-link
|
|
|
|
tag="div"
|
|
|
|
tag="div"
|
|
|
|
:to="{ path: item.path }"
|
|
|
|
:to="{ path: item.path }"
|
|
|
|
v-for="(item, index) in myRouter"
|
|
|
|
v-for="(item, index) in myRouter"
|
|
|
|
@ -11,58 +11,61 @@
|
|
|
|
active-class="routerActive"
|
|
|
|
active-class="routerActive"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="view-child">
|
|
|
|
<div class="view-child">
|
|
|
|
<img :src="item.icon" alt="" class="router-icon" />
|
|
|
|
<img :src="item.icon" alt="" class="router-icon" />
|
|
|
|
{{ item.name }}
|
|
|
|
{{ item.name }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</router-link>
|
|
|
|
<div></div>
|
|
|
|
</div> -->
|
|
|
|
</router-link> -->
|
|
|
|
<!-- 左边 -->
|
|
|
|
<el-menu
|
|
|
|
<div class="sidebar_content">
|
|
|
|
:default-active="routerIndex"
|
|
|
|
<div class="mycontent-left">
|
|
|
|
class="el-menu-vertical-demo"
|
|
|
|
<el-menu
|
|
|
|
:router="true"
|
|
|
|
:default-active="routerIndex"
|
|
|
|
background-color="#465970"
|
|
|
|
class="el-menu-vertical-demo"
|
|
|
|
text-color="#fff"
|
|
|
|
@open="handleOpen"
|
|
|
|
>
|
|
|
|
@close="handleClose"
|
|
|
|
<div
|
|
|
|
:router="true"
|
|
|
|
:index="item.path"
|
|
|
|
|
|
|
|
v-for="(item, index) in routerList"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-submenu
|
|
|
|
<div v-if="item.children && item.children.length > 0">
|
|
|
|
:index="indexOne - '0'"
|
|
|
|
<el-submenu index="">
|
|
|
|
v-for="(item, indexOne) in myRouter"
|
|
|
|
<template slot="title">
|
|
|
|
:key="indexOne - '0'"
|
|
|
|
<img :src="item.icon" alt="" class="leftIcon" />
|
|
|
|
>
|
|
|
|
<span>{{ item.name }}</span>
|
|
|
|
<template slot="title">
|
|
|
|
</template>
|
|
|
|
<img :src="item.icon" alt="" class="title_img" />
|
|
|
|
<el-menu-item-group v-if="item.children">
|
|
|
|
<span>{{ item.name }}</span>
|
|
|
|
<el-menu-item
|
|
|
|
</template>
|
|
|
|
:index="itemb.path + '66'"
|
|
|
|
<el-menu-item-group>
|
|
|
|
v-for="(itemb, index) in item.children"
|
|
|
|
<el-menu-item
|
|
|
|
:key="index + '3'"
|
|
|
|
:index="indexOne + '-' + index"
|
|
|
|
:route="itemb.path"
|
|
|
|
v-for="(itemb, index) in item.children"
|
|
|
|
>{{ itemb.name }}</el-menu-item
|
|
|
|
:key="index"
|
|
|
|
>
|
|
|
|
:route="itemb.path"
|
|
|
|
</el-menu-item-group>
|
|
|
|
>{{ itemb.name }}</el-menu-item
|
|
|
|
</el-submenu>
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</el-menu-item-group>
|
|
|
|
<div v-else>
|
|
|
|
</el-submenu>
|
|
|
|
<el-menu-item
|
|
|
|
</el-menu>
|
|
|
|
:index="item.path + '2'"
|
|
|
|
</div>
|
|
|
|
:key="index"
|
|
|
|
<!-- 右边 -->
|
|
|
|
:route="item.path"
|
|
|
|
<div class="mycontent-content">
|
|
|
|
>
|
|
|
|
<tags-view ref="tagsView" />
|
|
|
|
<template slot="title">
|
|
|
|
<div class="mycontent-content-title">
|
|
|
|
<img :src="item.icon" alt="" class="leftIcon" />
|
|
|
|
<!-- <i class="el-icon-location-outline title-icon" />
|
|
|
|
<span>{{ item.name }}</span>
|
|
|
|
<span class="title-font">{{ routerTitle }}</span> -->
|
|
|
|
</template></el-menu-item
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<router-view></router-view>
|
|
|
|
</el-menu>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="view-box">
|
|
|
|
<div class="view-box">
|
|
|
|
<tags-view ref="tagsView" />
|
|
|
|
<tags-view ref="tagsView" />
|
|
|
|
<div class="child-views">
|
|
|
|
<div class="child-views">
|
|
|
|
<router-view />
|
|
|
|
<router-view />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -75,26 +78,81 @@ export default {
|
|
|
|
components: { myHeader, TagsView },
|
|
|
|
components: { myHeader, TagsView },
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
routerIndex: "0-0",
|
|
|
|
routerIndex: "1-1",
|
|
|
|
|
|
|
|
routerList: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
path: "/administrative",
|
|
|
|
|
|
|
|
name: "行政审批",
|
|
|
|
|
|
|
|
icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
component: () => import("@/views/administrative/index"),
|
|
|
|
|
|
|
|
meta: { title: "行政审批", icon: "netWork" },
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
path: "/enterpriseMsg",
|
|
|
|
|
|
|
|
name: "企业档案",
|
|
|
|
|
|
|
|
icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
component: () => import("@/views/enterpriseMsg/index"),
|
|
|
|
|
|
|
|
meta: { title: "企业档案", icon: "netWork" },
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
path: "/productsMsg",
|
|
|
|
|
|
|
|
name: "产品档案",
|
|
|
|
|
|
|
|
icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
component: () => import("@/views/index"),
|
|
|
|
|
|
|
|
redirect: "drugArchives",
|
|
|
|
|
|
|
|
isDiy: true,
|
|
|
|
|
|
|
|
// children: [
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// path: "/productsMsg/drugArchives",
|
|
|
|
|
|
|
|
// name: "药品档案",
|
|
|
|
|
|
|
|
// icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
// component: () =>
|
|
|
|
|
|
|
|
// import("@/views/productsMsg/components/drugArchives.vue"),
|
|
|
|
|
|
|
|
// meta: { title: "药品档案", icon: "netWork" },
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// path: "/productsMsg/cosmeticsArchives",
|
|
|
|
|
|
|
|
// name: "化妆品档案",
|
|
|
|
|
|
|
|
// icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
// component: () =>
|
|
|
|
|
|
|
|
// import("@/views/productsMsg/components/cosmeticsArchives.vue"),
|
|
|
|
|
|
|
|
// meta: { title: "化妆品档案", icon: "netWork" },
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// path: "/productsMsg/health",
|
|
|
|
|
|
|
|
// name: "医疗器械档案",
|
|
|
|
|
|
|
|
// icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
// component: () =>
|
|
|
|
|
|
|
|
// import("@/views/productsMsg/components/health.vue"),
|
|
|
|
|
|
|
|
// meta: { title: "医疗器械档案", icon: "netWork" },
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
path: "/logout",
|
|
|
|
|
|
|
|
name: "依法注销",
|
|
|
|
|
|
|
|
icon: require("@/assets/images/tree4.svg"),
|
|
|
|
|
|
|
|
component: () => import("@/views/logout/index"),
|
|
|
|
|
|
|
|
meta: { title: "依法注销", icon: "netWork" },
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
//获取自定义路由
|
|
|
|
//获取自定义路由
|
|
|
|
myRouter() {
|
|
|
|
myRouter() {
|
|
|
|
|
|
|
|
console.log(this.$router.options.routes);
|
|
|
|
// let staticRouter = router.options.routes.filter(
|
|
|
|
// let staticRouter = router.options.routes.filter(
|
|
|
|
// (item) => item.isDiy == true
|
|
|
|
// (item) => item.isDiy == true
|
|
|
|
// )[0].children;
|
|
|
|
// )[0].children;
|
|
|
|
// return staticRouter;
|
|
|
|
// return staticRouter;
|
|
|
|
// return this.$store.state.myselfPermission.routerList;
|
|
|
|
// return this.$store.state.myselfPermission.routerList;
|
|
|
|
|
|
|
|
console.log(this.$router.options.routes[6].children);
|
|
|
|
return this.$router.options.routes[6].children;
|
|
|
|
return this.$router.options.routes[6].children;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
get1(e) {
|
|
|
|
methods:{
|
|
|
|
console.log(e);
|
|
|
|
handleOpen(key, keyPath) {
|
|
|
|
|
|
|
|
console.log(key, keyPath);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
handleClose(key, keyPath) {
|
|
|
|
|
|
|
|
console.log(key, keyPath);
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {},
|
|
|
|
created() {},
|
|
|
|
@ -102,6 +160,28 @@ export default {
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
::v-deep .el-submenu {
|
|
|
|
|
|
|
|
margin-right: -1px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.leftIcon {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
height: 14px;
|
|
|
|
|
|
|
|
width: 14px;
|
|
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-submenu__title {
|
|
|
|
|
|
|
|
padding: 0 8px !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-menu-item {
|
|
|
|
|
|
|
|
padding: 0 8px !important;
|
|
|
|
|
|
|
|
margin-right: -1px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-menu-item-group .el-menu-item {
|
|
|
|
|
|
|
|
padding-left: 35px !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-menu-item-group__title {
|
|
|
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
.container {
|
|
|
|
.container {
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
.body-container {
|
|
|
|
.body-container {
|
|
|
|
@ -111,142 +191,42 @@ export default {
|
|
|
|
& > div {
|
|
|
|
& > div {
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// .tree-menu {
|
|
|
|
.tree-menu {
|
|
|
|
// background: #465970;
|
|
|
|
|
|
|
|
// width: 220px;
|
|
|
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
|
|
|
// padding: 14px 10px;
|
|
|
|
|
|
|
|
// & > div {
|
|
|
|
|
|
|
|
// width: 200px;
|
|
|
|
|
|
|
|
// height: 40px;
|
|
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
|
|
// align-items: center;
|
|
|
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
|
|
|
// color: #ffffff;
|
|
|
|
|
|
|
|
// padding: 0 10px;
|
|
|
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
|
|
|
// .router-icon {
|
|
|
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
|
|
|
// height: 14px;
|
|
|
|
|
|
|
|
// width: 14px;
|
|
|
|
|
|
|
|
// margin-right: 10px;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// .view-box {
|
|
|
|
|
|
|
|
// flex: 1;
|
|
|
|
|
|
|
|
// height: 100%;
|
|
|
|
|
|
|
|
// background: #f2f2f2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// .child-views {
|
|
|
|
|
|
|
|
// height: calc(100% - 40px);
|
|
|
|
|
|
|
|
// width: 100%;
|
|
|
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
|
|
|
// padding: 10px;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 左边侧边栏
|
|
|
|
|
|
|
|
.sidebar_content {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 94.5%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.mycontent-left {
|
|
|
|
|
|
|
|
width: 18%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
background: #465970;
|
|
|
|
|
|
|
|
.el-menu-vertical-demo {
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background: #465970;
|
|
|
|
background: #465970;
|
|
|
|
color: #ffffff;
|
|
|
|
width: 220px;
|
|
|
|
overflow: hidden;
|
|
|
|
box-sizing: border-box;
|
|
|
|
height: 100%;
|
|
|
|
padding: 14px 10px;
|
|
|
|
.title_img {
|
|
|
|
& > div {
|
|
|
|
width: vw(20);
|
|
|
|
width: 200px;
|
|
|
|
margin-right: vw(10);
|
|
|
|
height: 40px;
|
|
|
|
}
|
|
|
|
display: flex;
|
|
|
|
::v-deep .el-submenu__title {
|
|
|
|
align-items: center;
|
|
|
|
font-size: vw(16);
|
|
|
|
font-size: 14px;
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
height: vh(80);
|
|
|
|
|
|
|
|
line-height: vh(80);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-menu-item-group__title {
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-submenu .el-menu-item {
|
|
|
|
|
|
|
|
margin: vh(5) 0;
|
|
|
|
|
|
|
|
height: vh(60);
|
|
|
|
|
|
|
|
line-height: vh(60);
|
|
|
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
|
|
|
font-size: vw(16);
|
|
|
|
|
|
|
|
font-family: Source Han Regular CN;
|
|
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #b6cbe4;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
background: #1e80eb;
|
|
|
|
|
|
|
|
border-radius: vw(5);
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-menu-item.is-active {
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
font-size: vw(16);
|
|
|
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
background: #1e80eb;
|
|
|
|
|
|
|
|
border-radius: vw(5);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-submenu__icon-arrow {
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
font-size: vw(16);
|
|
|
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
padding: 0 10px;
|
|
|
|
::v-deep .el-menu {
|
|
|
|
cursor: pointer;
|
|
|
|
padding: 0 vw(20);
|
|
|
|
.router-icon {
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: inline-block;
|
|
|
|
background: #465970;
|
|
|
|
height: 14px;
|
|
|
|
|
|
|
|
width: 14px;
|
|
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.view-box {
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
// 右侧内容
|
|
|
|
|
|
|
|
.mycontent-content {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
padding: vw(0) vw(18) vh(18);
|
|
|
|
|
|
|
|
background: #f2f2f2;
|
|
|
|
background: #f2f2f2;
|
|
|
|
.mycontent-content-title {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
overflow: hidden;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
margin: vh(13) vw(7);
|
|
|
|
.child-views {
|
|
|
|
.title-icon,
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
.title-font {
|
|
|
|
width: 100%;
|
|
|
|
font-size: vw(14);
|
|
|
|
box-sizing: border-box;
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
padding: 10px;
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
color: #292f38;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.title-icon {
|
|
|
|
|
|
|
|
margin: 0 vw(5) 0 0;
|
|
|
|
|
|
|
|
font-size: vw(18);
|
|
|
|
|
|
|
|
color: #1e80eb;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.routerActive {
|
|
|
|
.routerActive {
|
|
|
|
background: #1e80eb;
|
|
|
|
background: #1e80eb;
|
|
|
|
@ -257,4 +237,4 @@ export default {
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
