├── .browserslistrc
├── vue.config.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── login-bg.jpg
    │   └── common.pcss
    ├── views
    │   ├── About.vue
    │   ├── Login.vue
    │   └── Home.vue
    ├── main.js
    ├── App.vue
    ├── router.js
    └── components
    │   ├── Master.vue
    │   └── Layout.vue
├── postcss.config.js
├── .gitignore
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     baseUrl: 'iview-layoutui'
3 | }


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangwei900808/iview-layoutui/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangwei900808/iview-layoutui/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/login-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangwei900808/iview-layoutui/HEAD/src/assets/login-bg.jpg


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     "postcss-import": {},
4 |     "postcss-cssnext": {}
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | import iView from 'iview';
 8 | import 'iview/dist/styles/iview.css';
 9 | 
10 | Vue.use(iView);
11 | 
12 | new Vue({
13 |   router,
14 |   render: h => h(App)
15 | }).$mount('#app')
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # iview-layoutui
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn run serve
11 | ```
12 | 
13 | ## Layout.vue
14 | 该组件是整个项目的框架UI，详细请查看代码。
15 | 
16 | ## Master.vue
17 | 该组件是内容区域通用页面，我已经使用Slot设计好样式已经统一，你们只要往里面放相应的标题、按钮、表格、分页就好。
18 | 
19 | ### Customize configuration
20 | See [Configuration Reference](https://cli.vuejs.org/config/).
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | *{
 9 |   margin: 0;
10 |   padding: 0;
11 |   box-sizing: border-box;
12 | }
13 | html, body{
14 |   width:100%;
15 |   height: 100%;
16 |   overflow: hidden;
17 | }
18 | *, :after, :before {
19 |   box-sizing: border-box;
20 | }
21 | #app {
22 |   width:100%;
23 |   height: 100%;
24 |   margin:0;
25 |   padding:0;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>iview-layoutui</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but iview-layoutui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iview-layoutui",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "http://awbeci.xyz/iview-layoutui/",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "predeploy": "npm run build",
10 |     "deploy": "gh-pages -d dist"
11 |   },
12 |   "dependencies": {
13 |     "iview": "^3.1.5",
14 |     "vue": "^2.5.17",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.2.0",
19 |     "@vue/cli-service": "^3.2.0",
20 |     "gh-pages": "^2.0.1",
21 |     "postcss-calc": "^7.0.1",
22 |     "postcss-cssnext": "^3.1.0",
23 |     "postcss-import": "^12.0.1",
24 |     "vue-template-compiler": "^2.5.17"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   // mode: 'history',
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: 'home',
13 |       component: () => import('@/components/Layout'),
14 |       children:[
15 |         {
16 |           path: '',
17 |           name: 'home',
18 |           component: () => import('@/views/Home')
19 |         },
20 |         {
21 |           path: '/home',
22 |           name: 'test',
23 |           component: () => import('@/views/Home')
24 |         }
25 |       ]
26 |     },
27 |     {
28 |       path:'/login',
29 |       name:'login',
30 |       meta:{
31 |         title:'登录',
32 |       },
33 |       component: () => import('@/views/Login')
34 |     },
35 |   ]
36 | })
37 | 


--------------------------------------------------------------------------------
/src/assets/common.pcss:
--------------------------------------------------------------------------------
 1 | .content-wrapper {
 2 | 	& >>>.ivu-table th{	
 3 | 		background-color: #0062c6   !important;
 4 | 		color: #fff !important;
 5 | 	}
 6 | 	
 7 | 	/**状态前面小圆点样式*/
 8 | 	& >>> .red-cir {
 9 | 		width: 11px;
10 | 		height: 11px;
11 | 		display: inline-block;
12 | 		background: #e74c3c;
13 | 		border-radius: 50% 50%;
14 | 		margin-right: 5px;
15 | 	}
16 | 
17 | 	& >>> .green-cir {
18 | 		width: 11px;
19 | 		height: 11px;
20 | 		display: inline-block;
21 | 		background: #19be6b;
22 | 		border-radius: 50% 50%;
23 | 		margin-right: 5px;
24 | 	}
25 | 
26 | 	& >>> .ivu-dropdown-item{
27 | 		transition: unset !important;
28 | 		&:hover {
29 |             background: #008CEE !important;
30 |             color:#fff !important;
31 |         }
32 | 	}	
33 | 	& >>> .ivu-select-item{
34 | 		transition: unset !important;
35 | 		&:hover {
36 |             background: #008CEE !important;
37 |             color:#fff !important;
38 |         }
39 | 	}	
40 | 	& >>> .ivu-select-item-focus{
41 | 		background: #fff !important;
42 |         color:#008CEE !important;
43 | 		font-weight:bold;
44 | 	}
45 | }
46 | 
47 | .dd-menu{
48 | 	& >>> .ivu-dropdown-item{
49 | 		transition: unset !important;
50 | 		&:hover {
51 |             background: #008CEE !important;
52 |             color:#fff !important;
53 |         }
54 | 	}	
55 | }


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <style lang="postcss" scoped>
 2 | .login-container{
 3 |     display:flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     width: 100%;
 7 |     height: calc(100%);
 8 |     & .bg-wrap{
 9 |         width: 100%;
10 |         height: 100%;
11 |         background-size: cover;
12 |         background-position: center;
13 |         position: relative;
14 |     }
15 |     & .card-wrap{
16 |         position: absolute;
17 |         right:100px;
18 |         top:200px;
19 |     }
20 |     & .icon-cls{
21 |         font-weight:bold;
22 |         width:20px;
23 |         font-size:18px;
24 |     }
25 | }
26 | </style>
27 | <template>
28 | <section class="login-container">
29 |     <div class="bg-wrap" :style="{backgroundImage:`url(${login_img})`}">
30 |         <div class="card-wrap">
31 |         <Card style="width:350px" :dis-hover="true">
32 |             <p slot="title">
33 |                 <Icon type="log-in"></Icon>
34 |                 欢迎登录
35 |             </p>
36 |             <Form ref="userForm" :model="userForm" :rules="ruleCustom">
37 |                 <FormItem prop="username">
38 |                     <Input v-model.trim="userForm.username" placeholder="请输入" size="large">
39 |                         <Icon type="ios-person-outline" slot="prepend" class="icon-cls"></Icon>
40 |                     </Input>
41 |                 </FormItem>
42 |                 <FormItem prop="password">
43 |                     <Input type="password" v-model.trim="userForm.password" placeholder="请输入密码" size="large">
44 |                         <Icon type="ios-lock-outline" slot="prepend"  class="icon-cls"></Icon>
45 |                     </Input>
46 |                 </FormItem>
47 |                 <FormItem>
48 |                     <Button type="primary" @click="btn_login()" long :loading="login_loading">登录</Button>
49 |                 </FormItem>
50 |             </Form>
51 |         </Card>
52 |     </div>
53 |     </div>
54 | </section>
55 | </template>
56 | <script>
57 | 
58 | export default {
59 |     data(){
60 |         return {
61 |             login_loading:false,
62 |             login_img:require("@/assets/login-bg.jpg"),
63 |             userForm:{
64 |                 username:'',
65 |                 password:''
66 |             },
67 |             ruleCustom: {
68 |                 username: [
69 |                     { required: true, message: '用户名不能为空', trigger: 'blur' }
70 |                 ],
71 |                 password: [
72 |                     { required: true, message: '密码不能为空', trigger: 'blur' }
73 |                 ]
74 |             }
75 |         }
76 |     },
77 |     methods:{
78 |         btn_login(){
79 |             this.$router.push('/')
80 |         }
81 |     }
82 | }
83 | </script>
84 | 
85 | 


--------------------------------------------------------------------------------
/src/components/Master.vue:
--------------------------------------------------------------------------------
  1 | <style lang="postcss" scoped>
  2 | .master-page-container{
  3 |     background-color: #fff;
  4 |     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
  5 |     & .master-page-wrap{
  6 |         & .title-header{
  7 |             display: flex;
  8 |             align-items: center;
  9 |             justify-content: space-between;
 10 |             padding:10px 15px;
 11 |             border-bottom: 1px solid #dddee1;
 12 |             & .title-content{
 13 |                 display: flex;
 14 |                 align-items: center;
 15 |                 & .title-icon{
 16 |                     display: flex;
 17 |                     align-items: center;
 18 |                     margin-right:5px;
 19 |                 }
 20 |                 & p.title{
 21 |                     font-size: 14px;
 22 |                     font-weight: bold;
 23 |                 }
 24 |             }
 25 |             & .title-toolbar{
 26 | 
 27 |             }
 28 |         }        
 29 |         & .master-page-search-content{
 30 |             padding: 15px;
 31 |             padding-bottom: 0;          
 32 |         }
 33 |         & .master-page-content-toolbar{
 34 |             padding: 15px;          
 35 |             padding-bottom: 0;
 36 |             display: flex;
 37 |             align-items: center;
 38 |             justify-content: space-between;
 39 |             // border-bottom:1px solid #dddee1;
 40 |             & .bar-search{
 41 |                 &.input-search{
 42 |                     width:350px;
 43 |                 }
 44 |             }
 45 |             & .bar-group{
 46 |                 
 47 |             }
 48 |         }
 49 |         & .master-page-padding-content{
 50 |             padding:15px;
 51 |             background: #fff;
 52 |             padding-bottom: 0;
 53 |         }
 54 |         & .master-page-nopadding-content{
 55 |             padding-bottom: 0;
 56 |             background: #fff;
 57 |             padding-left: 18px;
 58 |         }
 59 |         & .page-wrapper{
 60 |             padding:15px;
 61 |             display: flex;
 62 |             width: 100%;
 63 |             justify-content: flex-end;
 64 |         }
 65 |     }
 66 | }
 67 | </style>
 68 | <template>
 69 | <section class="master-page-container">
 70 |     <div class="master-page-wrap">
 71 |         <div class="title-header" v-if="title">
 72 |             <div class="title-content">
 73 |                 <div class="title-icon">
 74 |                     <slot name="title-icon"></slot>
 75 |                 </div>
 76 |                 <p class="title">{{title}}</p>
 77 |             </div>
 78 |             <div class="title-toolbar">
 79 |                 <slot name="title-toolbar"></slot>
 80 |             </div>
 81 |         </div>
 82 |         <div class="master-page-search-content" v-if="$slots.searchContent">
 83 |             <slot name="searchContent"></slot>
 84 |         </div>
 85 |         <div class="master-page-content-toolbar" v-if="$slots.search || $slots.btns">
 86 |             <div class="bar-search">
 87 |                 <slot name="search"></slot>
 88 |             </div>
 89 |             <div class="bar-group">
 90 |                 <slot name="btns"></slot>
 91 |             </div>
 92 |         </div>
 93 |         <!--$slots.content表示$slots里面是否存在content内容，就是说这里的占位符可填充了内容-->
 94 |         <div class="master-page-padding-content" v-if="$slots.paddingContent">
 95 |             <slot name="paddingContent"></slot>
 96 |         </div>
 97 |         <div class="master-page-nopadding-content" v-if="$slots.content">
 98 |             <slot name="content"></slot>
 99 |         </div>
100 |         <div class="page-wrapper">
101 |             <slot name="pager"/>
102 |         </div>
103 |     </div>
104 | </section>
105 | </template>
106 | <script>
107 | export default {
108 |     data(){
109 |         return{
110 | 
111 |         }
112 |     },
113 |     props:{
114 |         title:{
115 |             type:String
116 |         }
117 |     },
118 |     mounted(){
119 |         console.log('paddingContent=',this.$slots)
120 |     },
121 |     methods:{
122 | 
123 |     }
124 | }
125 | </script>
126 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <style lang="postcss" scoped>
  2 | .home-container{
  3 | 
  4 | }
  5 | </style>
  6 | <template>
  7 | <section class="home-container">
  8 |     <MasterPage title="标题">
  9 |         <div slot="title-icon">
 10 |             <Icon type="ios-game-controller-b" />
 11 |         </div>
 12 |         <div slot="title-toolbar">
 13 |             <Button type="primary" icon="md-add" @click="">新增</Button>
 14 |         </div>
 15 |         <div slot="searchContent" class="search-content-slot">
 16 |             <Form :model="formItem" :label-width="80">
 17 |               <Row>
 18 |                 <Col span="12">
 19 |                   <FormItem label="输入框：">
 20 |                     <Input v-model="formItem.input" placeholder="Enter something..."></Input>
 21 |                 </FormItem>
 22 |                 </Col>
 23 |                 <Col span="12">
 24 |                   <FormItem label="选择框：">
 25 |                     <Select v-model="formItem.select">
 26 |                         <Option value="beijing">New York</Option>
 27 |                         <Option value="shanghai">London</Option>
 28 |                         <Option value="shenzhen">Sydney</Option>
 29 |                     </Select>
 30 |                 </FormItem>
 31 |                 </Col>
 32 |               </Row>
 33 |               <Row>
 34 |                 <Col span="12">
 35 |                   <FormItem label="日期插件：">
 36 |                     <DatePicker type="date" placeholder="请选择" v-model="formItem.date" style="width:100%"></DatePicker>                      
 37 |                   </FormItem>                  
 38 |                 </Col>
 39 |                 <Col span="12">
 40 |                   <FormItem label="时间插件：">                  
 41 |                     <TimePicker type="time" placeholder="请选择" v-model="formItem.time" style="width:100%"></TimePicker>
 42 |                   </FormItem>
 43 |                 </Col>
 44 |               </Row>
 45 |           </Form>
 46 |         </div>
 47 |         <div slot="search">
 48 |           <Button type="info" icon="ios-search">查询</Button>
 49 |         </div>
 50 |         <div slot="btns">
 51 |           <Button type="primary" icon="md-add">添加</Button>
 52 |         </div>
 53 |         <div slot="paddingContent">
 54 |           <Table :columns="columns1" :data="data1"></Table>
 55 |         </div>
 56 |         <div slot="pager">
 57 |             <Page :total="100" />
 58 |         </div>
 59 |     </MasterPage>
 60 | </section>
 61 | </template>
 62 | <script>
 63 | import MasterPage from '@/components/Master'
 64 | 
 65 | export default {
 66 |     components:{
 67 |         MasterPage
 68 |     },
 69 |     data(){
 70 |       return{
 71 |         formItem: {
 72 |             input: '',
 73 |             select: '',
 74 |             radio: 'male',
 75 |             checkbox: [],
 76 |             switch: true,
 77 |             date: '',
 78 |             time: '',
 79 |             slider: [20, 50],
 80 |             textarea: ''
 81 |         },
 82 |         columns1: [
 83 |             {
 84 |                 title: 'Name',
 85 |                 key: 'name'
 86 |             },
 87 |             {
 88 |                 title: 'Age',
 89 |                 key: 'age'
 90 |             },
 91 |             {
 92 |                 title: 'Address',
 93 |                 key: 'address'
 94 |             }
 95 |         ],
 96 |         data1: [
 97 |             {
 98 |                 name: 'John Brown',
 99 |                 age: 18,
100 |                 address: 'New York No. 1 Lake Park',
101 |                 date: '2016-10-03'
102 |             },
103 |             {
104 |                 name: 'Jim Green',
105 |                 age: 24,
106 |                 address: 'London No. 1 Lake Park',
107 |                 date: '2016-10-01'
108 |             },
109 |             {
110 |                 name: 'Joe Black',
111 |                 age: 30,
112 |                 address: 'Sydney No. 1 Lake Park',
113 |                 date: '2016-10-02'
114 |             },
115 |             {
116 |                 name: 'Jon Snow',
117 |                 age: 26,
118 |                 address: 'Ottawa No. 2 Lake Park',
119 |                 date: '2016-10-04'
120 |             }
121 |         ]
122 |       }
123 |     },
124 |     methods:{
125 |     }
126 | }
127 | </script>
128 | 
129 | 
130 | 


--------------------------------------------------------------------------------
/src/components/Layout.vue:
--------------------------------------------------------------------------------
   1 | <style lang="postcss" scoped>
   2 | @import '../assets/common.pcss';
   3 | .ivu-btn-text:hover{
   4 |     background-color: rgba(255, 255, 255, .2) !important;
   5 | }
   6 | .ivu-layout.ivu-layout-has-sider{
   7 |     height: 100%;
   8 | }
   9 | .ivu-layout-sider{
  10 |     background: #fff;
  11 |     transition: none;
  12 | }
  13 | .ivu-layout-header{
  14 |     height: 60px;
  15 |     line-height: 60px;
  16 | }
  17 | .ivu-menu{
  18 |     height: calc(100% - 60px);
  19 |     overflow-y: auto;
  20 | }
  21 | .ivu-menu-item{
  22 |     white-space: nowrap;
  23 | }
  24 | .ivu-menu-submenu{
  25 |     white-space: nowrap;
  26 |     & .ivu-menu-submenu-title{
  27 |         white-space: nowrap;
  28 |     }
  29 | }
  30 | 
  31 | .dd-menu{
  32 |     width: 200px;
  33 |     min-width: 200px;
  34 |     height: 100%;
  35 |     & .ddi-wapper{
  36 |         display:flex;
  37 |         align-items:center;
  38 |         & .ddi-text{
  39 |             padding-left:10px;
  40 |         }
  41 |     }
  42 | }
  43 | .admin-layout-container{
  44 |     position: absolute;
  45 |     width: 100%;
  46 |     height: 100%;
  47 |     & .layout{
  48 |         background: #f5f7f9;
  49 |         position: relative;
  50 |         overflow: hidden;
  51 |         height: 100%;
  52 |         & .sidebar{
  53 |             background: #fff;
  54 |         }
  55 |         & .dropdown-wrap{
  56 |             height: 100%;
  57 |             position: relative;
  58 |             display: flex;
  59 |             flex-direction: column;
  60 |             background: #fff;
  61 |             box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  62 |             z-index: 11;
  63 |             & .dw-content{    
  64 |                 height: 100%;
  65 |                 & .dd-btn{
  66 |                     width: 83px;
  67 |                     margin-left: -5px;
  68 |                     padding:10px 0;
  69 |                 }          
  70 |             }              
  71 |         }
  72 |         & .logo{
  73 |             width: auto;
  74 |             height: 60px;
  75 |             display: flex;
  76 |             text-align: center;
  77 |             align-items: center;
  78 |             justify-content: flex-start;
  79 |             cursor: pointer;
  80 |             border-bottom: 1px solid #363e4f;
  81 |             position: relative;
  82 |             padding-left:20px;
  83 |             background: #0d58ab;
  84 |             & .logo-saiqu{
  85 |                 display: flex;
  86 |                 align-items: center;
  87 |                 justify-content: flex-start;
  88 |                 position: relative;     
  89 |                 
  90 |                 & .user-name{
  91 |                     color:#fff;
  92 |                     font-size:16px;
  93 |                     margin-left:15px;
  94 |                 }
  95 |             }
  96 |            
  97 |         }
  98 |     }
  99 |     & .layout-header-bar{
 100 |         background: #fff;
 101 |         padding: 0;
 102 |         position: relative;
 103 |         display: flex;
 104 |         flex-direction: column;
 105 |         z-index: 20;
 106 |         width:100%;
 107 |         & .header-wapper{
 108 |             display:flex;
 109 |             align-tems:center;
 110 |             justify-content:space-between;
 111 |             position: relative;
 112 |             z-index: 1;
 113 |             box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
 114 |             background: #0e64c3;
 115 |             color: #fff;
 116 |             & .header-left{
 117 |                 display:flex;
 118 |                 align-items:center;
 119 |                 & .header-title{
 120 |                     font-size:18px;
 121 |                     font-weight:bold
 122 |                 }
 123 |             }
 124 |             & .header-right{
 125 |                 margin-right:20px;                
 126 |                 & .btn-blue{
 127 |                     color: #fff;
 128 |                     font-size:16px;
 129 |                 }
 130 |             }
 131 |         }
 132 |     }
 133 | 
 134 |     & .main-content{
 135 |         width: 100%;
 136 |         height: calc(100% - 60px);
 137 |         position: relative;
 138 |         overflow: auto;
 139 |         & .main-layout-con{
 140 |             height: 100%;
 141 |             overflow: hidden;
 142 |             & .content-wrapper{
 143 |                 overflow: auto;
 144 |                 padding: 10px;
 145 |                 position: relative;
 146 |                 & .spinCls{
 147 |                     width: 60px !important;
 148 |                     height: 60px !important;
 149 |                     &::after{
 150 |                         background: linear-gradient(#0d58ab, #0256ac);
 151 |                     }
 152 |                 }
 153 |             }
 154 |             & .tags-nav-wapper{
 155 |                 background: #f0f0f0;
 156 |                 height: 40px;
 157 |                 padding: 0;
 158 |                 & .tags-nav{
 159 |                     height: 100%;
 160 |                     width: 100%;
 161 |                     position: relative;
 162 |                     border-top: 1px solid #F0F0F0;
 163 |                     border-bottom: 1px solid #F0F0F0;
 164 |                     & .btn-con{
 165 |                         position: absolute;
 166 |                         top: 0px;
 167 |                         height: 100%;
 168 |                         background: #fff;
 169 |                         padding-top: 3px;
 170 |                         z-index: 10;            
 171 |                     }
 172 |                     & button{
 173 |                         padding: 6px 4px;
 174 |                         line-height: 14px;
 175 |                         text-align: center;
 176 |                     }
 177 |                     & .left-btn{
 178 |                         left: 0px;
 179 |                         border-right: 1px solid #F0F0F0;
 180 |                     }
 181 |                     & .right-btn{
 182 |                         right: 0px;
 183 |                         border-left: 1px solid #F0F0F0;
 184 |                     }
 185 |                     & .scroll-outer{
 186 |                         position: absolute;
 187 |                         left: 28px;
 188 |                         right: 28px;
 189 |                         top: 0;
 190 |                         bottom: 0;
 191 |                         box-shadow: 0px 0 3px 2px rgba(100,100,100,.1) inset;
 192 |                         & .scroll-body{
 193 |                             height: calc(100% - 1px);
 194 |                             display: inline-block;
 195 |                             padding: 1px 4px 0;
 196 |                             position: absolute;
 197 |                             overflow: visible;
 198 |                             white-space: nowrap;
 199 |                             transition: left .3s ease;
 200 |                             .ivu-tag-dot-inner{
 201 |                                 transition: background .2s ease;
 202 |                             }
 203 |                         }
 204 |                     }
 205 |                     & .contextmenu {
 206 |                         position: absolute;
 207 |                         margin: 0;
 208 |                         padding: 5px 0;
 209 |                         background: #fff;
 210 |                         z-index: 100;
 211 |                         list-style-type: none;
 212 |                         border-radius: 4px;
 213 |                         box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
 214 |                         & li {
 215 |                             margin: 0;
 216 |                             padding: 5px 15px;
 217 |                             cursor: pointer;
 218 |                             &:hover {
 219 |                                 background: #eee;
 220 |                             }
 221 |                         }
 222 |                     }
 223 |                 }
 224 |             }
 225 |         }
 226 |     }
 227 | 
 228 |     & .layout-logo-left{
 229 |         width: 90%;
 230 |         height: 30px;
 231 |         background: #5b6270;
 232 |         border-radius: 3px;
 233 |         margin: 15px auto;
 234 |     }   
 235 |     
 236 |     & .menu-icon{
 237 |         cursor: pointer;
 238 |         transition: all .3s;
 239 |         margin: 0 20px 0;
 240 |     }
 241 |     & .rotate-icon{
 242 |         transform: rotate(-90deg);
 243 |     }
 244 |     & .menu-item {
 245 |         position: absolute;
 246 |         overflow: auto;
 247 |         box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
 248 |         &:after{
 249 |             width: 0;
 250 |         }
 251 |         & span{
 252 |             display: inline-block;
 253 |             white-space: nowrap;
 254 |             vertical-align: bottom;
 255 |             transition: width .2s ease .2s;
 256 |         }        
 257 |         & i{
 258 |             transform: translateX(0px);
 259 |             transition: font-size .2s ease, transform .2s ease;
 260 |             vertical-align: middle;
 261 |             font-size: 16px;
 262 |         }
 263 |     }
 264 |     & .collapsed-menu {
 265 |         & span{
 266 |             width: 0px;
 267 |             transition: width .2s ease;
 268 |         }
 269 |         & i{
 270 |             transform: translateX(5px);
 271 |             transition: font-size .2s ease .2s, transform .2s ease .2s;
 272 |             vertical-align: middle;
 273 |             font-size: 22px;
 274 |         }
 275 |     }
 276 | }
 277 | 
 278 | </style>
 279 | <template>
 280 |   <section class="admin-layout-container">
 281 |       <div class="layout">
 282 |         <Layout>
 283 |             <Sider ref="sidebar" class="sidebar" hide-trigger collapsible width="230" :collapsed-width="78" v-model.trim="isCollapsed">
 284 |                 <div class="logo" >
 285 |                     <div class="xfind-line" v-if="!isCollapsed">
 286 |                         <div class="line-h"></div>
 287 |                     </div>
 288 |                     <div v-if="!isCollapsed" class="logo-saiqu">    
 289 |                         <Avatar icon="ios-person" size="large"/>    
 290 |                         <span class="user-name">Admin</span>
 291 |                     </div>
 292 |                     <Avatar icon="ios-person" size="large" v-else/>
 293 |                 </div>
 294 |                 <Menu
 295 |                     ref="side_menu"
 296 |                     :active-name="activeMenuName"
 297 |                     :open-names="openMenuName"
 298 |                     theme="light"
 299 |                     width="230px"
 300 |                     :class="menuitemClasses"
 301 |                     @on-select="choosedMenu"
 302 |                     v-if="!isCollapsed">
 303 |                     <template v-for="(menu,menu_index) in menus">
 304 |                         <Submenu :name="menu.name" v-if="menu.children" :key="menu_index">
 305 |                             <template slot="title">
 306 |                                 <Icon :size="20" :type="menu.icon"></Icon>
 307 |                                 <span>{{menu.title}}</span>
 308 |                             </template>
 309 |                             <MenuItem :name="child.name" v-for="(child ,child_index) in menu.children" :key="child_index">
 310 |                                 <Icon :size="20" :type="child.icon"></Icon>
 311 |                                 <span>{{child.title}}</span>
 312 |                             </MenuItem>
 313 |                         </Submenu>
 314 |                         <MenuItem :name="menu.name" v-if="!menu.children && menu.showInMenus" :key="menu_index">
 315 |                             <Icon :size="20" :type="menu.icon" :key="menu_index"></Icon>
 316 |                             <span>{{menu.title}}</span>
 317 |                         </MenuItem>
 318 |                     </template>
 319 |                 </Menu>
 320 |                 <div class="dropdown-wrap"  v-if="isCollapsed">
 321 |                     <div class="dw-content">
 322 |                         <template v-for="(menu,menu_index) in menus">
 323 |                             <Dropdown transfer placement="right-start" v-if="menu.children" @on-click="dropdownClick" :key="menu_index">
 324 |                                 <Button class="dd-btn" type="text">
 325 |                                     <Icon :size="25" :type="menu.icon"></Icon>
 326 |                                 </Button>
 327 |                                 <DropdownMenu class="dd-menu" slot="list">
 328 |                                     <template v-for="(child, i) in menu.children">
 329 |                                         <DropdownItem :name="child.name" :key="i">
 330 |                                             <div class="ddi-wapper">
 331 |                                                 <Icon :size="16" :type="child.icon"></Icon>
 332 |                                                 <span class="ddi-text">
 333 |                                                     {{ child.title }}
 334 |                                                 </span>
 335 |                                             </div>
 336 |                                         </DropdownItem>
 337 |                                     </template>
 338 |                                 </DropdownMenu>
 339 |                             </Dropdown>
 340 |                             <Dropdown transfer v-if="!menu.children && menu.showInMenus" placement="right-start" @on-click="dropdownClick" :key="menu_index">
 341 |                                 <Button class="dd-btn" type="text">
 342 |                                     <Icon :size="25" :type="menu.icon"></Icon>
 343 |                                 </Button>
 344 |                                 <DropdownMenu class="dd-menu" slot="list">
 345 |                                     <DropdownItem :name="menu.name">
 346 |                                         <div class="ddi-wapper">
 347 |                                             <Icon :size="16" :type="menu.icon"></Icon>
 348 |                                             <span class="ddi-text">
 349 |                                                 {{ menu.title }}
 350 |                                             </span>
 351 |                                         </div>
 352 |                                     </DropdownItem>
 353 |                                 </DropdownMenu>
 354 |                             </Dropdown>
 355 |                         </template>
 356 |                     </div>
 357 |                 </div>
 358 |             </Sider>
 359 |             <Layout>
 360 |                 <!-- :style="{width: isCollapsed?'calc(100% - 78px)':'calc(100% - 230px)'}" -->
 361 |                 <Header class="layout-header-bar">
 362 |                     <div class="header-wapper">
 363 |                         <div class="header-left">
 364 |                             <Icon @click.native="collapsedSider" :class="rotateIcon" type="md-menu" size="28"></Icon>
 365 |                             <span class="header-title">iView后台管理系统</span>
 366 |                         </div>
 367 |                         <div class="header-right">
 368 |                             <!-- <Button type="text" icon="person" size="large">个人中心</Button>
 369 |                             <Button type="text" icon="android-notifications" size="large" @click="clickNotice">消息通知</Button> -->
 370 |                             <!-- <Dropdown>
 371 |                                 <a href="javascript:void(0)">
 372 |                                     下拉菜单
 373 |                                     <Icon type="ios-arrow-down"></Icon>
 374 |                                 </a>
 375 |                                 <DropdownMenu slot="list">
 376 |                                     <DropdownItem>驴打滚</DropdownItem>
 377 |                                     <DropdownItem>炸酱面</DropdownItem>
 378 |                                 </DropdownMenu>
 379 |                             </Dropdown> -->
 380 |                             <Button type="text" icon="md-exit" class="btn-blue" size="large" @click="quit">退出系统</Button>
 381 |                         </div>
 382 |                     </div>
 383 |                 </Header>
 384 |                  <!-- :style="{width:isCollapsed?'calc(100% - 78px)':'calc(100% - 230px)'}" -->
 385 |                 <Content class="main-content">
 386 |                     <Layout class="main-layout-con">
 387 |                         <div class="tags-nav-wapper">
 388 |                             <div class="tags-nav">
 389 |                                 <div class="btn-con left-btn">
 390 |                                     <Button type="text" @click="handleScroll(240)">
 391 |                                         <Icon :size="18" type="ios-arrow-back" />
 392 |                                     </Button>
 393 |                                 </div>
 394 |                                 <div ref="scrollOuter" class="scroll-outer" @DOMMouseScroll="handlescroll" @mousewheel="handlescroll">
 395 |                                     <div ref="scrollBody" class="scroll-body" :style="{left: tagBodyLeft + 'px'}">
 396 |                                         <transition-group name="taglist-moving-animation">
 397 |                                             <Tag type="dot"
 398 |                                                 v-for="tab in tags"
 399 |                                                 :closable="tab.closable"
 400 |                                                 :color="tab.choosed? 'primary':'#e9eaec'"
 401 |                                                 :name="tab.name"
 402 |                                                 @click.native="clickTag(tab)"
 403 |                                                 @on-close="closeTag" 
 404 |                                                 :key="tab.name">
 405 |                                                     {{tab.title}}
 406 |                                                 </Tag>
 407 |                                         </transition-group>
 408 |                                     </div>
 409 |                                 </div>
 410 |                                 <div class="btn-con right-btn">
 411 |                                     <Button type="text" @click="handleScroll(-240)">
 412 |                                         <Icon :size="18" type="ios-arrow-forward" />
 413 |                                     </Button>
 414 |                                 </div>
 415 |                             </div>
 416 |                         </div>           
 417 |                         <Content class="content-wrapper">
 418 |                             <!-- <Spin size="large" fix v-if="spinShow">
 419 |                                 <Circle2 />
 420 |                             </Spin> -->
 421 |                             <!--保存组件状态到内存，避免重新渲染-->
 422 |                             <keep-alive>
 423 |                                 <router-view/>
 424 |                             </keep-alive>
 425 |                         </Content>
 426 |                     </Layout>                    
 427 |                 </Content>
 428 |             </Layout>
 429 |         </Layout>
 430 |     </div>
 431 |   </section>
 432 | </template>
 433 | <script>
 434 | export default {
 435 |     data(){
 436 |         return{
 437 |             isCollapsed: false,
 438 |             // ------------------------------  菜单操作开始  --------------------------------
 439 |             title:'首页',
 440 |             activeMenuName:'admin',
 441 |             openMenuName:[],
 442 | 
 443 |             tagBodyLeft: 0,
 444 |             rightOffset: 40,
 445 |             outerPadding: 4,
 446 |             contextMenuLeft: 0,
 447 |             contextMenuTop: 0,
 448 |             visible: false,
 449 | 
 450 |             menus:[
 451 |                 {
 452 |                     title:'首页',
 453 |                     num:1,
 454 |                     name:'admin',
 455 |                     icon:'ios-home',
 456 |                     href:'/home',
 457 |                     closable:false,
 458 |                     showInTags:true,
 459 |                     showInMenus:true,
 460 |                     choosed:true
 461 |                 },         
 462 |                 {
 463 |                     title:'会员与代理商',
 464 |                     name:'members-agents',
 465 |                     icon:'ios-people',
 466 |                     children:[
 467 |                         {
 468 |                             title:'会员管理',
 469 |                             name:'memberManage',
 470 |                             href:'/home',
 471 |                             closable:true,
 472 |                             showInTags:false,
 473 |                             showInMenus:true,
 474 |                             choosed:false
 475 |                         },
 476 |                         {
 477 |                             title:'会员等级管理',
 478 |                             name:'memberLevels',
 479 |                             href:'/home',
 480 |                             closable:true,
 481 |                             showInTags:false,
 482 |                             showInMenus:true,
 483 |                             choosed:false
 484 |                         },
 485 |                         {
 486 |                             title:'会员汇入',
 487 |                             name:'memberRemit',
 488 |                             href:'/home',
 489 |                             closable:true,
 490 |                             showInTags:false,
 491 |                             showInMenus:true,
 492 |                             choosed:false
 493 |                         },
 494 |                         {
 495 |                             title:'代理商管理',
 496 |                             name:'agentManage',
 497 |                             href:'/home',
 498 |                             closable:true,
 499 |                             showInTags:false,
 500 |                             showInMenus:true,
 501 |                             choosed:false
 502 |                         },
 503 |                         {
 504 |                             title:'代理商申请审核',
 505 |                             name:'agent-audit',
 506 |                             href:'/home',
 507 |                             closable:true,
 508 |                             showInTags:false,
 509 |                             showInMenus:true,
 510 |                             choosed:false
 511 |                         }
 512 |                     ]
 513 |                 },
 514 |                 {
 515 |                     title:'系统管理',
 516 |                     name:'system-manage',
 517 |                     icon:'ios-cog',
 518 |                     children:[
 519 |                         {
 520 |                             title:'返水设置',
 521 |                             name:'backwater-setting',
 522 |                             href:'/home',
 523 |                             closable:true,
 524 |                             showInTags:false,
 525 |                             showInMenus:true,
 526 |                             choosed:false
 527 |                         },
 528 |                         {
 529 |                             title:'佣金设置',
 530 |                             name:'commissionSetting',
 531 |                             href:'/home',
 532 |                             closable:true,
 533 |                             showInTags:false,
 534 |                             showInMenus:true,
 535 |                             choosed:false
 536 |                         },
 537 |                         {
 538 |                             title:'子账号管理',
 539 |                             name:'subAccount',
 540 |                             href:'/home',
 541 |                             closable:true,
 542 |                             showInTags:false,
 543 |                             showInMenus:true,
 544 |                             choosed:false
 545 |                         },
 546 |                         {
 547 |                             title:'线上入款账户管理',
 548 |                             name:'onlinePayAccount',
 549 |                             href:'/home',
 550 |                             closable:true,
 551 |                             showInTags:false,
 552 |                             showInMenus:true,
 553 |                             choosed:false
 554 |                         },
 555 |                         {
 556 |                             title:'第三方集成支付渠道',
 557 |                             name:'thirdPartyPayment',
 558 |                             href:'/home',
 559 |                             closable:true,
 560 |                             showInTags:false,
 561 |                             showInMenus:true,
 562 |                             choosed:false
 563 |                         },
 564 |                         {
 565 |                             title:'用户分销管理',
 566 |                             name:'userDistribution',
 567 |                             href:'/home',
 568 |                             closable:true,
 569 |                             showInTags:false,
 570 |                             showInMenus:true,
 571 |                             choosed:false
 572 |                         },
 573 |                         {
 574 |                             title:'IP白名单管理',
 575 |                             name:'whiteList',
 576 |                             href:'/home',
 577 |                             closable:true,
 578 |                             showInTags:false,
 579 |                             showInMenus:true,
 580 |                             choosed:false
 581 |                         },
 582 |                         {
 583 |                             title:'日志管理',
 584 |                             name:'log',
 585 |                             href:'/home',
 586 |                             closable:true,
 587 |                             showInTags:false,
 588 |                             showInMenus:true,
 589 |                             choosed:false
 590 |                         }
 591 |                     ]
 592 |                 },
 593 |                 {
 594 |                     title:'财务管理',
 595 |                     name:'accounting-manage',
 596 |                     icon:'ios-cash',
 597 |                     children:[
 598 |                         {
 599 |                             title:'公司入款审核',
 600 |                             name:'companyPayment',
 601 |                             href:'/home',
 602 |                             closable:true,
 603 |                             showInTags:false,
 604 |                             showInMenus:true,
 605 |                             choosed:false
 606 |                         },
 607 |                         {
 608 |                             title:'线上支付看板',
 609 |                             name:'paymentBoard',
 610 |                             href:'/home',
 611 |                             closable:true,
 612 |                             showInTags:false,
 613 |                             showInMenus:true,
 614 |                             choosed:false
 615 |                         },
 616 |                         {
 617 |                             title:'取款申请审核',
 618 |                             name:'withdrawalAudit',
 619 |                             href:'/home',
 620 |                             closable:true,
 621 |                             showInTags:false,
 622 |                             showInMenus:true,
 623 |                             choosed:false
 624 |                         },
 625 |                         {
 626 |                             title:'交易记录查询',
 627 |                             name:'transactionRecord',
 628 |                             href:'/home',
 629 |                             closable:true,
 630 |                             showInTags:false,
 631 |                             showInMenus:true,
 632 |                             choosed:false
 633 |                         },
 634 |                         {
 635 |                             title:'返水计算',
 636 |                             name:'returnWaterCal',
 637 |                             href:'/home',
 638 |                             closable:true,
 639 |                             showInTags:false,
 640 |                             showInMenus:true,
 641 |                             choosed:false
 642 |                         },
 643 |                         {
 644 |                             title:'用户分销计算',
 645 |                             name:'distributionCal',
 646 |                             href:'/home',
 647 |                             closable:true,
 648 |                             showInTags:false,
 649 |                             showInMenus:true,
 650 |                             choosed:false
 651 |                         },
 652 |                         {
 653 |                             title:'佣金计算',
 654 |                             name:'commissionCal',
 655 |                             href:'/home',
 656 |                             closable:true,
 657 |                             showInTags:false,
 658 |                             showInMenus:true,
 659 |                             choosed:false
 660 |                         },
 661 |                         {
 662 |                             title:'人工抹账',
 663 |                             name:'wipeAccounts',
 664 |                             href:'/home',
 665 |                             closable:true,
 666 |                             showInTags:false,
 667 |                             showInMenus:true,
 668 |                             choosed:false
 669 |                         }
 670 |                     ]
 671 |                 },
 672 |                 {
 673 |                     title:'各式报表',
 674 |                     name:'report-manage',
 675 |                     icon:'ios-stats',
 676 |                     children:[
 677 |                         {
 678 |                             title:'统计报表',
 679 |                             name:'about22',
 680 |                             href:'/home',
 681 |                             closable:true,
 682 |                             showInTags:false,
 683 |                             showInMenus:true,
 684 |                             choosed:false
 685 |                         },
 686 |                         {
 687 |                             title:'投注记录查询',
 688 |                             name:'about23',
 689 |                             href:'/home',
 690 |                             closable:true,
 691 |                             showInTags:false,
 692 |                             showInMenus:true,
 693 |                             choosed:false
 694 |                         },
 695 |                         {
 696 |                             title:'娱乐城转账记录',
 697 |                             name:'about24',
 698 |                             href:'/home',
 699 |                             closable:true,
 700 |                             showInTags:false,
 701 |                             showInMenus:true,
 702 |                             choosed:false
 703 |                         },
 704 |                         {
 705 |                             title:'总存取款汇出',
 706 |                             name:'about25',
 707 |                             href:'/home',
 708 |                             closable:true,
 709 |                             showInTags:false,
 710 |                             showInMenus:true,
 711 |                             choosed:false
 712 |                         },
 713 |                     ]
 714 |                 },
 715 |                 {
 716 |                     title:'前端管理设置',
 717 |                     name:'frontend-setting',
 718 |                     icon:'logo-html5',
 719 |                     children:[
 720 |                         {
 721 |                             title:'Banner设置',
 722 |                             name:'about26',
 723 |                             href:'/home',
 724 |                             closable:true,
 725 |                             showInTags:false,
 726 |                             showInMenus:true,
 727 |                             choosed:false
 728 |                         },
 729 |                         {
 730 |                             title:'顶部Icon设置',
 731 |                             name:'about27',
 732 |                             href:'/home',
 733 |                             closable:true,
 734 |                             showInTags:false,
 735 |                             showInMenus:true,
 736 |                             choosed:false
 737 |                         },
 738 |                         {
 739 |                             title:'底部Icon设置',
 740 |                             name:'about28',
 741 |                             href:'/home',
 742 |                             closable:true,
 743 |                             showInTags:false,
 744 |                             showInMenus:true,
 745 |                             choosed:false
 746 |                         }
 747 |                     ]
 748 |                 },
 749 |                 {
 750 |                     title:'游戏平台管理',
 751 |                     name:'game-platform-manage',
 752 |                     icon:'ios-game-controller-b',
 753 |                     children:[
 754 |                         {
 755 |                             title:'游戏平台管理',
 756 |                             name:'platform-manage',
 757 |                             href:'/home',
 758 |                             closable:true,
 759 |                             showInTags:false,
 760 |                             showInMenus:true,
 761 |                             choosed:false
 762 |                         },
 763 |                         {
 764 |                             title:'游戏管理',
 765 |                             name:'game-manage',
 766 |                             href:'/home',
 767 |                             closable:true,
 768 |                             showInTags:false,
 769 |                             showInMenus:true,
 770 |                             choosed:false
 771 |                         }                        
 772 |                     ]
 773 |                 },
 774 |                 {
 775 |                     title:'活动中心',
 776 |                     name:'activity-center',
 777 |                     icon:'ios-cafe',
 778 |                     children:[
 779 |                         {
 780 |                             title:'活动设置',
 781 |                             name:'about29',
 782 |                             href:'/home',
 783 |                             closable:true,
 784 |                             showInTags:false,
 785 |                             showInMenus:true,
 786 |                             choosed:false
 787 |                         },
 788 |                         {
 789 |                             title:'活动模板设置',
 790 |                             name:'about30',
 791 |                             href:'/home',
 792 |                             closable:true,
 793 |                             showInTags:false,
 794 |                             showInMenus:true,
 795 |                             choosed:false
 796 |                         },
 797 |                     ]
 798 |                 },
 799 |                 {
 800 |                     title:'公告管理',
 801 |                     name:'notice-manage',
 802 |                     icon:'md-volume-mute',
 803 |                     children:[
 804 |                         {
 805 |                             title:'系统公告',
 806 |                             name:'system-notice',
 807 |                             href:'/home',
 808 |                             closable:true,
 809 |                             showInTags:false,
 810 |                             showInMenus:true,
 811 |                             choosed:false
 812 |                         }
 813 |                     ]
 814 |                 },
 815 |             ]
 816 |             // ------------------------------  菜单操作结束  --------------------------------
 817 |         }
 818 |     },
 819 |     computed: {
 820 |         // 筛选menus中选中的menu
 821 |         tags(){
 822 |             let tags = [];
 823 |             // 将menus中showInTags=true的标签放到tags数组中
 824 |             this.menus.forEach(menu=>{
 825 |                 if(menu.showInTags){
 826 |                     tags.push(menu);
 827 |                 }else if(menu.children){
 828 |                     menu.children.forEach(child=>{
 829 |                         if(child.showInTags){
 830 |                             tags.push(child)
 831 |                         }
 832 |                     })
 833 |                 }
 834 |             });
 835 |             // console.log('tags=>',tags)
 836 | 
 837 |             //标签数组排序，从小到到
 838 |             tags.sort((a,b)=>{
 839 |                 return (a.num - b.num)
 840 |             })
 841 |             return tags;
 842 |         },
 843 |         rotateIcon () {
 844 |             return [
 845 |                 'menu-icon',
 846 |                 this.isCollapsed ? 'rotate-icon' : ''
 847 |             ];
 848 |         },
 849 |         menuitemClasses () {
 850 |             return [
 851 |                 'menu-item',
 852 |                 this.isCollapsed ? 'collapsed-menu' : ''
 853 |             ]
 854 |         }
 855 |     },
 856 |     // ------------------------------  菜单操作开始  --------------------------------
 857 |     //刷新页面之后保存并选中最后一次菜单和标签
 858 |     beforeRouteEnter (to, from, next) {
 859 |         next(vm => {
 860 |             // 通过 `vm` 访问组件实例
 861 |             let activeMenuName = localStorage.activeMenuName;
 862 |             vm.activeMenuName = activeMenuName;
 863 | 
 864 |             let tags_last_num = vm.tags[vm.tags.length - 1].num;
 865 | 
 866 |             if(activeMenuName && activeMenuName.length != 0){
 867 |                 vm.menus.forEach(_menu=>{
 868 |                     if(activeMenuName == _menu.name){
 869 |                         _menu.choosed = true;
 870 |                         _menu.showInTags = true;
 871 |                         _menu.num = tags_last_num + 1;
 872 |                     }
 873 |                     else if(_menu.children){
 874 |                         _menu.children.forEach(child=>{
 875 |                             if(activeMenuName == child.name){
 876 |                                 child.choosed = true;
 877 |                                 child.showInTags = true;
 878 |                                 child.num = tags_last_num + 1;
 879 |                                 vm.openMenuName = [_menu.name];
 880 |                             }
 881 |                         })
 882 |                     }
 883 |                     else{
 884 |                         // 排除首页
 885 |                         if(_menu.name != 'admin'){
 886 |                             _menu.choosed = false;
 887 |                             _menu.showInTags = false;
 888 |                         }else{
 889 |                             _menu.choosed = false;
 890 |                         }
 891 |                     }
 892 |                 })
 893 |             }
 894 |             vm.$nextTick(()=>{
 895 |                 // console.log(vm.$refs.side_menu, 22)
 896 |                 // vm.$refs.side_menu.updateOpened();
 897 |                 // vm.$refs.side_menu.updateActiveName();
 898 |             });
 899 |         })
 900 |     },
 901 |     // ------------------------------  菜单操作结束  --------------------------------
 902 |     methods: {
 903 |         /*tags 滚动事件 */
 904 |         handlescroll (e) {
 905 |             var type = e.type
 906 |             let delta = 0
 907 |             if (type === 'DOMMouseScroll' || type === 'mousewheel') {
 908 |                 delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40
 909 |             }
 910 |             this.handleScroll(delta)
 911 |         },
 912 |         /*tags 滑动事件 */
 913 |         handleScroll (offset) {
 914 |             const outerWidth = this.$refs.scrollOuter.offsetWidth
 915 |             const bodyWidth = this.$refs.scrollBody.offsetWidth
 916 |             if (offset > 0) {
 917 |                 this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
 918 |             } else {
 919 |                 if (outerWidth < bodyWidth) {
 920 |                     if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
 921 |                         this.tagBodyLeft = this.tagBodyLeft
 922 |                     } else {
 923 |                         this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
 924 |                     }
 925 |                 } else {
 926 |                     this.tagBodyLeft = 0
 927 |                 }
 928 |             }
 929 |         },
 930 |         quit(){
 931 |             this.$router.push('/login')
 932 |         },
 933 |         clickNotice(){
 934 |             this.choosedMenu('notice');
 935 |         },
 936 |         collapsedSider() {
 937 |             this.$refs.sidebar.toggleCollapse();
 938 |         },
 939 |         // ------------------------------  菜单操作开始  --------------------------------
 940 |         closeTag(event, name){
 941 |             // 判断该标签是否是选中状态
 942 |             // 如果是那么就要设置标签数组中最后一个标签成选中状态
 943 |             // 如果否那么就直接删除就好
 944 |             let is_choosed = false;
 945 |             this.menus.forEach((menu)=>{
 946 |                 if(menu.name == name){
 947 |                     is_choosed = menu.choosed;
 948 |                     menu.showInTags = false;
 949 |                 }else if(menu.children){
 950 |                     menu.children.forEach(child=>{
 951 |                         if(child.name == name){
 952 |                             is_choosed = child.choosed;
 953 |                             child.showInTags = false;
 954 |                         }
 955 |                     })
 956 |                 }
 957 |             })
 958 |             // 关闭标签并选中tags中最后一个标签高亮
 959 |             if(is_choosed){
 960 |                 let last_tag = this.tags[this.tags.length-1];
 961 |                 last_tag.choosed = true;
 962 |                 this.$router.push(last_tag.href);
 963 |                 this.activeMenuName = last_tag.name;
 964 |                 localStorage.activeMenuName = this.activeMenuName;
 965 |             }
 966 |         },
 967 |         clickTag(tag){
 968 |             this.tags.forEach(_tag=>{
 969 |                 if(_tag.name == tag.name){
 970 |                     _tag.choosed=true;
 971 |                 }else{
 972 |                     _tag.choosed= false;
 973 |                 }
 974 |             })
 975 |             // 设置菜单选中name
 976 |             this.activeMenuName = tag.name;
 977 |             localStorage.activeMenuName = this.activeMenuName;
 978 |             // 刷新菜单
 979 |             this.$nextTick(()=>{
 980 |                 if(this.$refs.side_menu){
 981 |                     this.$refs.side_menu.updateActiveName()
 982 |                 }
 983 |             });
 984 |             //点击tab跳转
 985 |             this.$router.push(`${tag.href}`);
 986 |         },
 987 |         choosedMenu(name){
 988 |             // 获取标签数组最后一个元素的num
 989 |             let tags_last_num = this.tags[this.tags.length - 1].num;
 990 |             // 设置选中菜单name
 991 |             this.activeMenuName = name;
 992 |             localStorage.activeMenuName = this.activeMenuName;
 993 | 
 994 |             //根据name查找对应的菜单对象
 995 |             let menu = null;
 996 |             this.menus.forEach(_menu=>{
 997 |                 if(_menu.name == name){
 998 |                     // 只有不在tags数组中的元素才能设置num
 999 |                     if(!_menu.showInTags){
1000 |                         _menu.num = tags_last_num + 1;
1001 |                     }
1002 |                     menu = _menu;
1003 |                     _menu.showInTags = true;
1004 |                     _menu.choosed = true;
1005 | 
1006 |                 }
1007 |                 else if(_menu.children){
1008 |                     _menu.children.forEach(child=>{
1009 |                         if(child.name == name){
1010 |                             // 只有不在tags数组中的元素才能设置num
1011 |                             if(!_menu.showInTags){
1012 |                                 child.num = tags_last_num + 1;
1013 |                             }
1014 |                             menu = child;
1015 |                             child.showInTags = true;
1016 |                             child.choosed = true;
1017 | 
1018 |                         }else{
1019 |                             child.choosed = false;
1020 |                         }
1021 |                     })
1022 |                 }
1023 |                 else {
1024 |                     _menu.choosed = false;
1025 |                 }
1026 |             })
1027 |             this.$router.push(`${menu.href}`);
1028 |         },
1029 |         dropdownClick(name){
1030 |             this.choosedMenu(name);
1031 |         }
1032 |         // ------------------------------  菜单操作结束  --------------------------------
1033 |     }
1034 | }
1035 | </script>
1036 | 


--------------------------------------------------------------------------------