Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
0e9a5c1d by 杨威
Options

新增左侧树目录及部分样式修改

1 parent 1e902b9e
Inline Side-by-side
Showing 7 changed files with 978 additions and 284 deletions
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_files_collapse_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-100.000000, -217.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_files_collapse_" transform="translate(0.000000, 31.000000)">
<rect id="矩形-copy-18" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M5,10 L12,10 L12,11 L5,11 L5,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_file_default_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-127.000000, -246.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_file_default_" transform="translate(27.000000, 60.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_files_expand_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-100.000000, -187.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_files_expand_" transform="translate(0.000000, 1.000000)">
<rect id="矩形-copy-17" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M8,10 L8,7 L9,7 L9,10 L12,10 L12,11 L9,11 L9,14 L8,14 L8,11 L5,11 L5,10 L8,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_file_focus_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-127.000000, -276.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_file_focus_" transform="translate(27.000000, 90.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<div class="tree_item_box">
<div
class="column-start-start linkLine_default"
v-for="(item,s_index) in list"
:key="s_index"
:class="{
'linkLine_first': s_index===0&list.length>1,
'linkLine_half_top': s_index===0&&list.length===1,
'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
'third_layer':!item.children,
'second_layer':item.children
}"
>
<div
class="row-flex-start basic_banner"
@click="itemClick(item)"
:class="{
'active_color': item.expand
}"
>
<div
v-if="item.children"
class="reTree_icon"
:style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
:class="{
'reTree_default_icon': item.children.length===0,
'reTree_collapse_icon': item.expand && item.children.length>0,
'reTree_expand_icon': !item.expand && item.children.length>0,
}"
></div>
<div
class="layer_text nowrap"
:class="{
'active_color': item.expand
}"
>{{item.label}}</div>
</div>
<line-item
:list="item.children"
v-on="$listeners"
:size="size"
v-if="item.expand&&item.children&&item.children.length>0"
></line-item>
</div>
</div>
</template>
<script>
export default {
name: "line-item",
props: {
list: {
type: Array,
default: () => {
return [];
}
},
size: {
type: Number,
default: 14
}
},
methods: {
itemClick(item) {
item.expand = !item.expand;
this.$emit("itemClick", item);
if (!item.children) {
this.$emit("valClick", item);
}
}
}
};
</script>
<style lang='less'>
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active_color {
color: #ffffff;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 10px;
}
.no_icon {
width: 17px;
height: 17px;
}
.tree_item_box {
position: relative;
width: 100%;
cursor: pointer;
}
.basic_layer {
width: 100%;
position: relative;
color: #FFFFFF;
cursor: pointer;
.layer_text {
flex: 1;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 100%;
padding-bottom: 13px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.third_layer {
position: relative;
// padding-bottom: 15px;
width: 100%;
padding-left: 40px;
color: #FFFFFF;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.third_layer::before {
content: "";
position: absolute;
height: 1px;
width: 22px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -14px;
height: calc(100% + 14px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 24px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
</style>
\ No newline at end of file
<template>
<div
class="content column-start-center reTree_box"
:style="{fontSize: (size||14) +'px',lineHeight:(size||14) +'px'}"
style="width:347px"
>
<div class="column-start-center basic_layer" v-for="(item,index) in formatData" :key="index">
<div
class="row-flex-start basic_banner"
:class="{
'active_color': item.expand && item.children.length>0,
}"
@click="itemClick(item)"
>
<div
class="reTree_icon"
:style="{height: (size||14*1.2 )+'px',width: (size||14*1.2) +'px'}"
:class="{
'reTree_default_icon': item.children.length===0,
'reTree_collapse_icon': item.expand && item.children.length>0,
'reTree_expand_icon': !item.expand && item.children.length>0,
}"
></div>
<div class="layer_text nowrap">{{item.label}}</div>
</div>
<lineItem v-if="item.expand&&item.children.length>0" v-on="$listeners" :list="item.children" :size="size"></lineItem>
</div>
</div>
</template>
<script>
import lineItem from "./lineItem.vue";
export default {
inheritAttrs: false,
props: {
pd: {},
size: {
type: Number,
default: 14
}
},
components: { lineItem },
data() {
return {
selectedDetail: {},
timer: {},
formatData: []
};
},
watch: {
pd(n, o) {
this.formatData = this.preDealData(n);
console.log(this.formatData);
}
},
created() {
console.log("lineTree create");
this.preDealData(this.pd);
},
methods: {
preDealData(list) {
list.forEach(x => {
if (!x.expand) this.$set(x, "expand", false);
if (x.children && x.children.length > 0) this.preDealData(x.children);
});
return list;
},
// 根据id展开树的具体项
expandTreeItemById(idList) {
let _this = this;
function loopTree(list) {
list.forEach(x => {
if (idList.includes(x.id)) {
_this.$set(x, "expand", true);
} else {
_this.$set(x, "expand", false);
}
if (x.children && x.children.length > 0) loopTree(x.children);
});
return list;
}
this.formatData = loopTree(this.pd);
},
itemClick(item){
item.expand=!item.expand
this.$emit('itemClick',item)
},
// 详情点击
detailClick(data) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.selectedDetail = data;
this.$emit("detailClick", data);
}, 300);
},
detailDoubleClick(data) {
clearTimeout(this.timer);
this.selectedDetail = data;
this.$emit("detailDoubleClick", data);
}
}
};
</script>
<style lang="less" scoped>
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active_color{
color: #FFFFFF ;
}
.reTree_box {
// overflow-y: auto;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 10px;
}
.basic_layer {
width: 100%;
position: relative;
color: #FFFFFF;
cursor: pointer;
.layer_text {
flex: 1;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 100%;
padding-bottom: 13px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.third_layer {
position: relative;
padding-bottom: 15px;
width: 100%;
padding-left: 40px;
color: #ffffff;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.third_layer::before {
content: "";
position: absolute;
height: 1px;
width: 20px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -14px;
height: calc(100% + 14px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 24px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
</style>
\ No newline at end of file
<template>
<div class="home-box">
<el-container>
<el-aside :class="{'aside-show':isActive}">
<div class="logo-box" :class="{'logo-box-show':isActive}">
<img class="logo-img" src="@/assets/images/logo-realestate.png" alt="">
<span class="logo-text" v-show="!textLogo">不动产+互联网</span>
</div>
<el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isActive" background-color="#121958" text-color="#fff" active-text-color="#21FAFD" :collapse-transition="false" :router='true'>
<template v-for="item in menuList">
<el-submenu :index="item.code" :key="item.code" v-if="item.children&&item.children.length>0">
<template slot="title">
<i :class="item.icon" style="margin-right:10px;"></i>
<span slot="title">{{item.name}}</span>
</template>
<template v-for="seconditem in item.children">
<el-menu-item :index="seconditem.code" :key="seconditem.code" v-if="!seconditem.children" :route="{path: seconditem.path}">
{{seconditem.name}}
</el-menu-item>
</template>
<template v-for="seconditem in item.children">
<el-submenu :index="seconditem.code" :key="seconditem.code" v-if="seconditem.children">
<span slot="title" style="padding-left:15px;">{{seconditem.name}}</span>
<el-menu-item v-for="threeitem in seconditem.children" :index="threeitem.code" :key="threeitem.code" :route="{path: threeitem.path}">{{threeitem.name}}</el-menu-item>
</el-submenu>
</template>
</el-submenu>
<el-menu-item :index="item.code" :key="item.code" v-else :route="{path: item.path}">
<i :class="item.icon" style="margin-right:10px;"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container>
<el-header height="120px">
<div class="header-top">
<div class="top-items" @click="toggleClick">
<i class="fa fa-outdent hamburger" v-show="!isActive"></i>
<i class="fa fa-indent hamburger" v-show="isActive"></i>
</div>
<div class="top-items" v-for="(item,index) in headTop" :key="index+'1'" :class="{'is-active':item.select}" @click="selectTopItems(index)">
<i :class="item.icon"></i>
<span>{{item.name}}</span>
</div>
</div>
<div class="header-bottom">
<Navigation ref="navigation"></Navigation>
</div>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
<div class="home-box">
<el-container>
<el-aside :class="{ 'aside-show': isActive }">
<div class="logo-box" :class="{ 'logo-box-show': isActive }">
<img
class="logo-img"
src="@/assets/images/logo-realestate.png"
alt=""
/>
<span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
</div>
<div class="treeModule">
<LineTree :pd="pd"></LineTree>
</div>
<el-menu
:default-active="defaultActive"
:unique-opened="true"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isActive"
background-color="#121958"
text-color="#fff"
active-text-color="#21FAFD"
:collapse-transition="false"
:router="true"
>
<template v-for="item in menuList">
<el-submenu
:index="item.code"
:key="item.code"
v-if="item.children && item.children.length > 0"
>
<template slot="title">
<i :class="item.icon" style="margin-right:10px;"></i>
<span slot="title">{{ item.name }}</span>
</template>
<template v-for="seconditem in item.children">
<el-menu-item
:index="seconditem.code"
:key="seconditem.code"
v-if="!seconditem.children"
:route="{ path: seconditem.path }"
>
{{ seconditem.name }}
</el-menu-item>
</template>
<template v-for="seconditem in item.children">
<el-submenu
:index="seconditem.code"
:key="seconditem.code"
v-if="seconditem.children"
>
<span slot="title" style="padding-left:15px;">{{
seconditem.name
}}</span>
<el-menu-item
v-for="threeitem in seconditem.children"
:index="threeitem.code"
:key="threeitem.code"
:route="{ path: threeitem.path }"
>{{ threeitem.name }}</el-menu-item
>
</el-submenu>
</template>
</el-submenu>
<el-menu-item
:index="item.code"
:key="item.code"
v-else
:route="{ path: item.path }"
>
<i :class="item.icon" style="margin-right:10px;"></i>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container>
<el-header height="120px">
<div class="header-top">
<div class="top-items" @click="toggleClick">
<i class="fa fa-outdent hamburger" v-show="!isActive"></i>
<i class="fa fa-indent hamburger" v-show="isActive"></i>
</div>
<div
class="top-items"
v-for="(item, index) in headTop"
:key="index + '1'"
:class="{ 'is-active': item.select }"
@click="selectTopItems(index)"
>
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</div>
</div>
<div class="header-bottom">
<Navigation ref="navigation"></Navigation>
</div>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import util from '@/libs/util.js'
import screenfull from "screenfull"
import Navigation from "../components/IvyElement/navigation"
import { setTimeout } from 'timers'
export default {
components: {
Navigation
},
data() {
return {
navigationList: [],
isActive: false,
textLogo: false,
activePath: '',
defaultActive: '',
headTop:[{
select:true,
},{
select:false,
},{
select:false,
},{
select:false,
},{
select:false,
}
],
// 上导航选中id
indId: undefined,
menuList:[],
pathAndCodeObj:{
'/article-draft' : "PSH004",
'/article-publish': "PSH005",
"/article-recycle":"PSH006",
"/notice-draft":"PSH007",
"/notice-publish":'PSH008',
"/notice-recycle":"PSH009",
"/column_management":"PSH018",
"/announcement_template":"PSH019",
"/business_management":"PSH020"
}
};
},
computed: {
permission_routes() {
return this.$store.state.permission_routes.navigation
}
},
watch:{
'$route.path':function(newPath){
this.defaultActive = this.pathAndCodeObj[newPath]
}
},
created() {
if ( this.$route.meta ) {
this.defaultActive = this.$route.meta.code
}
if( this.permission_routes.length!==0 ){
this.navigationList = this.permission_routes
} else {
let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation')))
this.navigationList = list
}
this.sortNavigation(this.navigationList,0)
if (util.cookies.get('indId')) {
let indId = util.cookies.get('indId')-0
this.navSelect(indId)
this.sortNavigation(this.navigationList,indId)
}
},
methods: {
sortNavigation( data,selectId) {
let headTop = this.headTop
data.forEach((item, index) => {
headTop[index].name = item.name
headTop[index].icon = item.icon
})
this.menuSelect(data,selectId)
},
menuSelect(data,selectId) {
this.menuList = data[selectId].children
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
toggleClick(){
this.isActive=!this.isActive;
if(!this.isActive){
setTimeout(()=>{
this.textLogo=this.isActive;
},200)
}else{
this.textLogo=this.isActive;
}
},
selectTopItems(ind){
this.indId = ind
this.menuSelect(this.navigationList,ind)
this.$store.dispatch("setTabs/init_tabs")
this.$store.dispatch("setTabs/set_active_index", "/panel")
this.$router.push("/panel")
this.navSelect(ind)
util.cookies.set('indId',ind)
},
// 上导航选中id
navSelect (id) {
this.headTop.forEach((item,index)=>{
item.select=false
if(index==id){
item.select=true
}
})
},
screen() {
// 如果不允许进入全屏，发出不允许提示
// if (!screenfull.enabled) {
// this.$message('您的浏览器不能全屏');
// return false
// }
screenfull.toggle();
}
}
};
import util from "@/libs/util.js";
import screenfull from "screenfull";
import Navigation from "../components/IvyElement/navigation";
import LineTree from "../components/lineTree/lineTree";
import { setTimeout } from "timers";
export default {
components: {
Navigation,
LineTree,
},
data() {
return {
navigationList: [],
isActive: false,
textLogo: false,
activePath: "",
defaultActive: "",
headTop: [
{
select: true,
},
{
select: false,
},
{
select: false,
},
{
select: false,
},
{
select: false,
},
],
// 上导航选中id
indId: undefined,
menuList: [],
pathAndCodeObj: {
"/article-draft": "PSH004",
"/article-publish": "PSH005",
"/article-recycle": "PSH006",
"/notice-draft": "PSH007",
"/notice-publish": "PSH008",
"/notice-recycle": "PSH009",
"/column_management": "PSH018",
"/announcement_template": "PSH019",
"/business_management": "PSH020",
},
pd: [
{
label: "第一层(1)",
children: [],
},
{
label: "第一层(2)",
children: [
{
label: "第二层(1)",
children: [],
},
{
label: "第二层(2)",
children: [
{
label: "第三层(1)",
children: [
{
label: "第四层",
children: [
{
label: "第五层",
children: [{ label: "第六层", }],
},
],
},
],
},
{
label: "第三层(2)",
},
{
label: "第三层(3)",
},
],
},
{
label: "第二层(3)",
children: [],
},
{
label: "第二层(4)",
children: [],
},
],
},
{
label: "第一层(3)",
children: [],
},
{
label: "第一层(4)",
children: [],
},
{
label: "第一层(5)",
children: [],
},
],
};
},
computed: {
permission_routes() {
return this.$store.state.permission_routes.navigation;
},
},
watch: {
"$route.path": function(newPath) {
this.defaultActive = this.pathAndCodeObj[newPath];
},
},
created() {
if (this.$route.meta) {
this.defaultActive = this.$route.meta.code;
}
if (this.permission_routes.length !== 0) {
this.navigationList = this.permission_routes;
} else {
// let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation')))
//mock数据
let list = [
{
name: "新建",
icon: "fa fa-address-card-o",
path: "/officialAccount_panel",
},
{ name: "更正", icon: "fa fa-address-card-o", path: "/applets_panel" },
{
name: "变更",
icon: "fa fa-address-card-o",
path: "/appointment_panel",
},
{
name: "综合查询",
icon: "fa fa-address-card-o",
path: "/system_panel",
},
];
this.navigationList = list;
}
this.sortNavigation(this.navigationList, 0);
if (util.cookies.get("indId")) {
let indId = util.cookies.get("indId") - 0;
this.navSelect(indId);
this.sortNavigation(this.navigationList, indId);
}
},
methods: {
sortNavigation(data, selectId) {
let headTop = this.headTop;
data.forEach((item, index) => {
headTop[index].name = item.name;
headTop[index].icon = item.icon;
});
this.menuSelect(data, selectId);
},
menuSelect(data, selectId) {
this.menuList = data[selectId].children;
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
toggleClick() {
this.isActive = !this.isActive;
if (!this.isActive) {
setTimeout(() => {
this.textLogo = this.isActive;
}, 200);
} else {
this.textLogo = this.isActive;
}
},
selectTopItems(ind) {
this.indId = ind;
this.menuSelect(this.navigationList, ind);
this.$store.dispatch("setTabs/init_tabs");
this.$store.dispatch("setTabs/set_active_index", "/panel");
this.$router.push("/panel");
this.navSelect(ind);
util.cookies.set("indId", ind);
},
// 上导航选中id
navSelect(id) {
this.headTop.forEach((item, index) => {
item.select = false;
if (index == id) {
item.select = true;
}
});
},
screen() {
// 如果不允许进入全屏，发出不允许提示
// if (!screenfull.enabled) {
// this.$message('您的浏览器不能全屏');
// return false
// }
screenfull.toggle();
},
},
};
</script>
<style lang="less" scoped>
.home-box {
width: 100%;
height: 100vh;
.el-container {
height: 100%;
}
.el-header{
background-color: #fff;
padding: 0 !important;
.header-top{
height: 60px;
border-bottom:1px solid rgba(242,242,242,1);
box-sizing: border-box;
.top-items{
cursor: pointer;
height: 60px;
padding: 0 30px;
font-size: 16px;
line-height: 60px;
float: left;
position: relative;
color: #4A4A4A;
i{
margin-right: 6px;
}
.hamburger{
font-size: 16px;
line-height: 60px;
color: #000;
}
}
.top-items:not(:last-child)::after{
content: "";
width:1px;
height: 14px;
background: #EAEAEA;
position: absolute;
right: -1px;
top: 24px;
}
.top-items.is-active {
color: #00CACD;
}
}
.header-bottom{
height: 50px;
box-shadow:0px 2px 4px 0px rgba(222,222,222,0.7);
border-bottom:1px solid rgba(234,234,234,1);
box-sizing: border-box;
}
}
.el-aside {
width: 200px !important;
background-color: #121958;
color: #333;
// text-align: center;
overflow: hidden;
transition:width 0.3s;
.logo-box{
width: 200px;
height: 120px;
border-bottom:1px solid rgba(255, 255, 255, 0.2);
padding: 30px 0 28px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition:width 0.3s;
.logo-img{
width: 38px;
height: 38px;;
}
.logo-text{
font-size:14px;
color:rgba(255,255,255,1);
line-height: 14px;
}
}
.logo-box-show{
width: 64px;
}
.el-menu{
border-right:0;
}
.el-submenu .el-menu-item{
text-align: left;
text-indent: 15px;
}
}
.aside-show{
width: 64px !important;
}
.el-main {
background-color: #ffffff;
color: #333;
// text-align: center;
// line-height: 160px;
padding: 0;
}
}
</style>
\ No newline at end of file
.home-box {
width: 100%;
height: 100vh;
.el-container {
height: 100%;
}
.el-header {
background-color: #fff;
padding: 0 !important;
.header-top {
height: 60px;
border-bottom: 1px solid rgba(242, 242, 242, 1);
box-sizing: border-box;
.top-items {
cursor: pointer;
height: 60px;
padding: 0 30px;
font-size: 16px;
line-height: 60px;
float: left;
position: relative;
color: #4a4a4a;
i {
margin-right: 6px;
}
.hamburger {
font-size: 16px;
line-height: 60px;
color: #000;
}
}
.top-items:not(:last-child)::after {
content: "";
width: 1px;
height: 14px;
background: #eaeaea;
position: absolute;
right: -1px;
top: 24px;
}
.top-items.is-active {
color: #006cff;
}
}
.header-bottom {
height: 50px;
box-shadow: 0px 2px 4px 0px rgba(222, 222, 222, 0.7);
border-bottom: 1px solid rgba(234, 234, 234, 1);
box-sizing: border-box;
}
}
.el-aside {
width: 290px !important;
background-color: #1d50dd;
color: #333;
// text-align: center;
overflow: hidden;
transition: width 0.3s;
.logo-box {
width: 100%;
height: 120px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 30px 0 28px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition: width 0.3s;
.logo-img {
width: 38px;
height: 38px;
}
.logo-text {
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 14px;
}
}
.treeModule {
box-sizing: border-box;
padding: 20px 10px;
}
.logo-box-show {
width: 64px;
}
.el-menu {
border-right: 0;
}
.el-submenu .el-menu-item {
text-align: left;
text-indent: 15px;
}
}
.aside-show {
width: 64px !important;
}
.el-main {
background-color: #ffffff;
color: #333;
// text-align: center;
// line-height: 160px;
padding: 0;
}
}
</style>
......