├── src
    ├── assets
    │   ├── login.jpg
    │   ├── fonts
    │   │   ├── FontAwesome.otf
    │   │   ├── fontawesome-webfont.eot
    │   │   ├── fontawesome-webfont.ttf
    │   │   ├── fontawesome-webfont.woff
    │   │   └── fontawesome-webfont.woff2
    │   ├── styles
    │   │   ├── common.css
    │   │   └── font-awesome.min.css
    │   └── js
    │   │   └── highlight-bash.min.js
    ├── App.vue
    ├── components
    │   ├── Deny.vue
    │   ├── Welcome.vue
    │   ├── system
    │   │   ├── routes.js
    │   │   └── Notify.vue
    │   ├── account
    │   │   ├── TagTd.vue
    │   │   ├── routes.js
    │   │   ├── Person.vue
    │   │   ├── PublishPermission.vue
    │   │   ├── Permission.vue
    │   │   ├── Role.vue
    │   │   ├── PersonSet.vue
    │   │   └── User.vue
    │   ├── Login.vue
    │   ├── Layout.vue
    │   └── Home.vue
    ├── index.html
    ├── config
    │   ├── env.js
    │   └── menu.js
    ├── main.js
    ├── router.js
    └── plugins
    │   └── globalTools.js
├── .gitignore
├── postcss.config.js
├── Makefile
├── package.json
├── webpack.config.js
└── README.md


/src/assets/login.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openspug/spug-vue-admin/HEAD/src/assets/login.jpg


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | *.pyc
3 | /.git/
4 | .DS_Store
5 | /dist/
6 | /npm-debug.log
7 | /node_modules
8 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('autoprefixer')()
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openspug/spug-vue-admin/HEAD/src/assets/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <router-view></router-view>
3 | </template>
4 | 
5 | <script>
6 |     export default {}
7 | </script>


--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openspug/spug-vue-admin/HEAD/src/assets/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openspug/spug-vue-admin/HEAD/src/assets/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openspug/spug-vue-admin/HEAD/src/assets/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openspug/spug-vue-admin/HEAD/src/assets/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | .PHONY: dist build
 2 | install:
 3 | 	@npm install
 4 | 
 5 | dev: install
 6 | 	@npm run dev
 7 | 
 8 | build:
 9 | 	@npm run build
10 | 


--------------------------------------------------------------------------------
/src/components/Deny.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         access deny
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         data () {
10 |             return {}
11 |         }
12 |     }
13 | </script>


--------------------------------------------------------------------------------
/src/components/Welcome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         Welcome login
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         data () {
10 |             return {}
11 |         }
12 |     }
13 | </script>


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>spug-web-admin</title>
 7 | </head>
 8 |     <body>
 9 |         <div id="app"></div>
10 |     </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/src/config/env.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by zyupo on 2019/05/26
 3 |  * https://github.com/openspug/spug
 4 |  */
 5 | 
 6 | // 后端API接口地址
 7 | const envs = {
 8 |     apiServer: 'https://easy-mock.com/mock/5cea22918541df5937af9f67/example',
 9 |     //apiServer: 'http://127.0.0.1:3000',
10 |     request_timeout: 12000,
11 | };
12 | 
13 | module.exports = envs;
14 | 


--------------------------------------------------------------------------------
/src/components/system/routes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by zyupo on 2019/05/26
 3 |  * https://github.com/openspug
 4 |  */
 5 | 
 6 | import Notify from './Notify.vue';
 7 | 
 8 | 
 9 | export default [
10 |     {
11 |         path: 'notify',
12 |         component: Notify,
13 |         meta: {
14 |             permission: 'system_notify_view'
15 |         }
16 |     }
17 | ]
18 | 


--------------------------------------------------------------------------------
/src/components/account/TagTd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <td ><el-tag @click="check" type="info" :color="colorUpdate" style="cursor: pointer">{{item.desc}}</el-tag></td>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |         props: ['item'],
 8 |         data() {
 9 |             return {}
10 |         },
11 |         computed: {
12 |             colorUpdate() {
13 |                 return (this.item['is_has']) ? '#99ffd6' : '#ffffff'
14 |             },
15 |         },
16 |         methods: {
17 |             check() {
18 |                 this.item['is_has'] = !this.item['is_has'];
19 |             }
20 |         }
21 |     }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by zyupo on 2019/05/26
 3 |  * https://github.com/openspug
 4 |  */
 5 | 
 6 | import Vue from 'vue'
 7 | import VueRouter from 'vue-router'
 8 | import ElementUI from 'element-ui'
 9 | import 'element-ui/lib/theme-chalk/index.css'
10 | import App from './App.vue'
11 | import GlobalTools from './plugins/globalTools'
12 | import routes from './router'
13 | import './assets/styles/font-awesome.min.css';
14 | 
15 | 
16 | Vue.use(VueRouter);
17 | Vue.use(ElementUI);
18 | 
19 | 
20 | const router = new VueRouter({
21 |     mode: 'history',
22 |     routes
23 | });
24 | 
25 | Vue.use(GlobalTools, router);
26 | 
27 | new Vue({
28 |     router,
29 |     el: '#app',
30 |     render: h => h(App)
31 | });
32 | 


--------------------------------------------------------------------------------
/src/components/account/routes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by zyupo on 2019/05/26
 3 |  * https://github.com/openspug
 4 |  */
 5 | 
 6 | 
 7 | import User from './User.vue';
 8 | import Role from './Role.vue';
 9 | import PersonSet from './PersonSet.vue';
10 | import Person from './Person.vue';
11 | 
12 | export default [
13 |     {
14 |         path: 'user',
15 |         component: User,
16 |         meta: {
17 |             permission: 'account_user_view'
18 |         }
19 |     },
20 |     {
21 |         path: 'role',
22 |         component: Role,
23 |         meta: {
24 |             permission: 'account_role_view'
25 |         }
26 |     },
27 |     {
28 |         path: 'person',
29 |         component: Person,
30 |     },
31 |     {
32 |         path: 'personset',
33 |         component: PersonSet,
34 |     }
35 | ]
36 | 


--------------------------------------------------------------------------------
/src/config/menu.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by zyupo on 2019/05/26
 3 |  * https://github.com/openspug
 4 |  */
 5 | 
 6 | let menu = {
 7 |     menus: [
 8 |         {
 9 |             key: '/home', desc: 'Dashboard', icon: 'fa fa-desktop', permission: 'home_view',
10 |         },
11 |         {
12 |             key: '1', desc: '用户管理', icon: 'fa fa-address-card', permission: 'account_user_view|account_role_view', subs: [
13 |                 {key: '/account/user', permission: 'account_user_view', desc: '用户列表'},
14 |                 {key: '/account/role', permission: 'account_role_view', desc: '角色权限'}
15 |             ]
16 |         }, {
17 |             key: '2', desc: '系统管理', icon: 'el-icon-setting',  permission: 'system_notify_view',  subs: [
18 |                 {key: '/system/notify', permission: 'system_notify_view', desc: '通知设置'},
19 |             ]
20 |         }
21 |     ]
22 | };
23 | 
24 | export default menu;
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "element-starter",
 3 |   "description": "A Vue.js project",
 4 |   "author": "yi.shyang@ele.me",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server -d --inline --hot --env.dev",
 8 |     "build": "rimraf dist && webpack -p --progress --hide-modules"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.16.1",
12 |     "echarts": "^4.0.2",
13 |     "element-ui": "^2.0.8",
14 |     "vue": "^2.5.2",
15 |     "vue-router": "^2.3.1"
16 |   },
17 |   "engines": {
18 |     "node": ">=6"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^6.6.0",
22 |     "babel-core": "^6.21.0",
23 |     "babel-eslint": "^7.1.1",
24 |     "babel-loader": "^6.4.0",
25 |     "babel-preset-env": "^1.6.0",
26 |     "css-loader": "^0.27.0",
27 |     "file-loader": "^0.10.1",
28 |     "html-loader": "^0.4.5",
29 |     "html-webpack-plugin": "^2.24.1",
30 |     "postcss-loader": "^1.3.3",
31 |     "rimraf": "^2.5.4",
32 |     "style-loader": "^0.13.2",
33 |     "url-loader": "^0.5.8",
34 |     "vue-loader": "^11.1.4",
35 |     "vue-template-compiler": "^2.5.2",
36 |     "webpack": "^2.2.0",
37 |     "webpack-dev-server": "^2.4.4"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by zyupo on 2017/04/20.
 3 |  * https://github.com/openspug/spug
 4 |  */
 5 | 
 6 | import Home from './components/Home.vue'
 7 | import Deny from './components/Deny.vue'
 8 | import Welcome from './components/Welcome.vue'
 9 | import Login from './components/Login.vue'
10 | import Layout from './components/Layout.vue'
11 | import account_routes from './components/account/routes'
12 | import system_routes from './components/system/routes'
13 | 
14 | const routes = [
15 |     {
16 |         path: '',
17 |         name: 'home',
18 |         component: Home
19 |     },
20 |     {
21 |         path: '/welcome',
22 |         name: 'welcome',
23 |         component: Welcome
24 |     },
25 |     {
26 |         path: 'account',
27 |         routes: account_routes
28 |     },
29 |     {
30 |         path: 'system',
31 |         routes: system_routes
32 |     },
33 |     {
34 |         path: '*',
35 |         redirect: '/'
36 |     }
37 | ];
38 | 
39 | function load_route(routes) {
40 |     let result = [];
41 |     for (let route of routes) {
42 |         if (route.hasOwnProperty('routes') && Array.isArray(route.routes)) {
43 |             for (let sub_route of load_route(route.routes)) {
44 |                 sub_route.path = route.path +  '/' + sub_route.path;
45 |                 result.push(sub_route)
46 |             }
47 |         } else {
48 |             result.push(route)
49 |         }
50 |     }
51 |     return result
52 | }
53 | 
54 | export default [
55 |     {
56 |         path: '/login',
57 |         name: 'login',
58 |         component: Login
59 |     }, {
60 |         path: '/deny',
61 |         component: Deny
62 |     }, {
63 |         path: '/',
64 |         component: Layout,
65 |         children: load_route(routes)
66 |     }
67 | ]
68 | 


--------------------------------------------------------------------------------
/src/assets/styles/common.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     margin: 0;
 3 | }
 4 | .layout-wrapper {
 5 |     margin: 0;
 6 |     /*display: flex;*/
 7 |     min-height: 100vh;
 8 |     overflow: hidden;
 9 | }
10 | .layout-side {
11 |     /*background-color: #324057;*/
12 |     background-color: #f8f8ff;
13 |     float: left;
14 |     height: 100vh;
15 | }
16 | .layout-side-extend, .layout-side-extend .el-menu .el-submenu, .layout-side-extend .el-menu li .el-menu .el-menu-item{
17 |     width: 155px;
18 |     min-width: 155px;
19 | }
20 | .layout-side i {
21 |     margin-right: 10px;
22 | }
23 | .layout-logo {
24 |     font-weight:bold;
25 |     /*height: 31px;*/
26 |     border-radius: 4px;
27 |     text-align: center;
28 |     /*background-color: #333333;*/
29 |     /*background-color: #D3DCE6;*/
30 |     margin: 15px 15px;
31 | }
32 | .layout-main {
33 |     display: flex;
34 |     flex: 1;
35 |     flex-direction: column;
36 |     height: 100vh;
37 | }
38 | .layout-header {
39 |     height: 50px;
40 |     line-height: 50px;
41 |     display: flex;
42 |     flex-direction: row-reverse;
43 |     text-align: center;
44 |     border-bottom: 1px solid #e6dde9;
45 | }
46 | .layout-body {
47 |     padding: 25px;
48 |     flex: 1;
49 |     overflow-y: scroll;
50 | }
51 | .layout-footer {
52 |     height: 50px;
53 |     line-height: 50px;
54 |     text-align: center;
55 |     font-size: 12px;
56 |     color: #999999;
57 | }
58 | 
59 | .layout-header .i-button {
60 |     margin: 0 15px;
61 |     cursor: pointer;
62 | }
63 | 
64 | .pagination-bar {
65 |     display: flex;
66 |     flex-direction: row-reverse;
67 |     margin-top: 10px;
68 | }
69 | 
70 | .pagination-bar .el-pagination {
71 |     padding: 0;
72 | }
73 | .el-submenu__icon-arrow{
74 |     right: 8px !important;
75 | }
76 | 
77 | .el-transfer-panel{
78 |     width: auto;
79 |     min-width: 250px;
80 | }
81 | .el-transfer-panel__item{
82 |     padding-right: 20px;
83 | }


--------------------------------------------------------------------------------
/src/components/account/Person.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="info_container">
 3 |         <el-row class="info_row row" :gutter="10">
 4 |             <el-col :span="8">
 5 |                 <div class="area">
 6 |                     <p class="title-container"><h5>个人信息</h5></p>
 7 |                     <el-form class="form"  :model="personInfo"  ref="personInfo" label-width="80px">
 8 |                         <el-form-item label="登录名">
 9 |                             <div class="info-msg">{{personInfo.username}}</div>
10 |                         </el-form-item>
11 |                         <el-form-item label="姓名" prop="nickname">
12 |                             <div class="info-msg">{{personInfo.nickname}}</div>
13 |                         </el-form-item>
14 |                         <el-form-item label="邮箱" prop="email">
15 |                             <div class="info-msg">{{personInfo.email}}</div>
16 |                         </el-form-item>
17 |                         <el-form-item label="电话" prop="mobile">
18 |                             <div class="info-msg">{{personInfo.mobile}}</div>
19 |                         </el-form-item>
20 |                     </el-form>
21 |                 </div>
22 |             </el-col>
23 |         </el-row>
24 |     </div>
25 | </template>
26 | 
27 | <script>
28 |     export default {
29 |         data() {
30 |             return {
31 |                 personInfo: {
32 |                     username: '',
33 |                     nickname: '',
34 |                     email:'',
35 |                     mobile: '',
36 | 
37 |                 },
38 |             }
39 |         },
40 |         methods: {
41 |             //获取用户信息
42 |             getPersonInfo(user_id) {
43 |                 this.$http.get(`/api/account/users/self`).then((response) => {
44 |                     this.personInfo = response.result;
45 |                 }, (response) => this.$layer_message(response.result))
46 |             },
47 |             getPerson(){
48 |                 let user_id = localStorage.getItem('user_id');
49 |                 this.getPersonInfo(user_id);
50 |             }
51 |         },
52 |         mounted() {
53 |             this.getPerson();
54 |         }
55 |     }
56 | </script>
57 | 
58 | <style >
59 | .info-msg{
60 |     padding: 0 10px;
61 | }
62 | </style>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const config = require('./src/config/env');
 2 | 
 3 | const {
 4 |   resolve
 5 | } = require('path')
 6 | const webpack = require('webpack')
 7 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 8 | const url = require('url')
 9 | const publicPath = '/'
10 | 
11 | module.exports = (options = {}) => ({
12 |   entry: {
13 |     // vendor: './src/vendor',
14 |     index: './src/main.js'
15 |   },
16 |   output: {
17 |     path: resolve(__dirname, 'dist'),
18 |     filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
19 |     chunkFilename: '[id].js?[chunkhash]',
20 |     publicPath: options.dev ? '/assets/' : publicPath
21 |   },
22 |   module: {
23 |     rules: [{
24 |         test: /\.vue$/,
25 |         use: ['vue-loader']
26 |       },
27 |       {
28 |         test: /\.js$/,
29 |         use: ['babel-loader'],
30 |         exclude: /node_modules/
31 |       },
32 |       {
33 |         test: /\.html$/,
34 |         use: [{
35 |           loader: 'html-loader',
36 |           options: {
37 |             root: resolve(__dirname, 'src'),
38 |             attrs: ['img:src', 'link:href']
39 |           }
40 |         }]
41 |       },
42 |       {
43 |         test: /\.css$/,
44 |         use: ['style-loader', 'css-loader', 'postcss-loader']
45 |       },
46 |       {
47 |         test: /favicon\.png$/,
48 |         use: [{
49 |           loader: 'file-loader',
50 |           options: {
51 |             name: '[name].[ext]?[hash]'
52 |           }
53 |         }]
54 |       },
55 |       {
56 |         test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
57 |         exclude: /favicon\.png$/,
58 |         use: [{
59 |           loader: 'url-loader',
60 |           options: {
61 |             limit: 10000
62 |           }
63 |         }]
64 |       }
65 |     ]
66 |   },
67 |   plugins: [
68 |     new webpack.optimize.CommonsChunkPlugin({
69 |       names: ['vendor', 'manifest']
70 |     }),
71 |     new HtmlWebpackPlugin({
72 |       template: 'src/index.html'
73 |     })
74 |   ],
75 |   resolve: {
76 |     alias: {
77 |       '~': resolve(__dirname, 'src')
78 |     }
79 |   },
80 |   devServer: {
81 |     host: '0.0.0.0',
82 |     port: 8080,
83 |     proxy: {
84 |       '/api/': {
85 |         target: config.apiServer,
86 |         changeOrigin: true,
87 |         pathRewrite: {
88 |           '^/api': ''
89 |         }
90 |       }
91 |     },
92 |     historyApiFallback: {
93 |       index: url.parse(options.dev ? '/assets/' : publicPath).pathname
94 |     }
95 |   },
96 |   devtool: options.dev ? '#eval-source-map' : '#source-map'
97 | })


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # spug-vue-admin
  2 | 
  3 | 基于开源运维平台Spug的后台，使用Vue+Element组件库开发的脚手架，可以独立启动运行，根据自己需要快速开发需要的后台功能。
  4 | 
  5 | 
  6 | ##### Demo演示地址：<https://spug.qbangmang.com/login>
  7 | ##### Demo账号密码：<admin/spug>
  8 | #### 模拟接口地址：https://easy-mock.com/
  9 | 
 10 | ##### 开源运维平台：https://github.com/openspug/spug
 11 | 
 12 | --- 
 13 | 
 14 | ### Preview 预览
 15 | ----------------------------
 16 | ![image](http://image.qbangmang.com/spug_vue_admin.png)
 17 | 
 18 | 
 19 | #### Environment 环境
 20 | 
 21 | ```
 22 | # nodejs需要自行安装
 23 | 
 24 | Node >= 6
 25 | ```
 26 | 
 27 | #### Develop 开发环境启动
 28 | 
 29 | ``` bash
 30 | # 克隆代码，并启动
 31 | shell> git clone https://github.com/openspug/spug-vue-admin.git
 32 | 
 33 | shell> cd spug-vue-admin && npm install
 34 | 
 35 | shell> npm run dev
 36 | 
 37 | # 本地启动后，访问：http://localhost:8080 输入任意账号密码就可以登录。
 38 | 
 39 | ```
 40 | #### 文档
 41 | * [配置文档](https://github.com/openspug/spug-vue-admin/wiki)
 42 | 
 43 | 
 44 | #### Element组件库
 45 | ----------------------------
 46 |  * [前端UI组件库](https://element.eleme.cn/2.8/#/zh-CN/component/installation)
 47 | 
 48 | #### 数据格式
 49 | ```
 50 | 1、后端接口配置文件路径：
 51 | spug-vue-admin/src/config/env.js
 52 | 
 53 | 
 54 | 2、默认接口使用https://easy-mock.com/ 模拟的数据
 55 | 
 56 | 3、需要返回的格式：
 57 | {
 58 |     "data": "xxx",
 59 |     "message": "xxx"
 60 |     
 61 | }
 62 | 
 63 | 4、接口实例：
 64 | # 登录接口数据格式：
 65 | {
 66 |   "data": {
 67 |     "token": "59e0a5e09e854f75b591dff4aa048f3c",
 68 |     "is_supper": "true",
 69 |     "nickname": "admin",
 70 |     "permissions": []
 71 |   },
 72 |   "message": ""
 73 | }
 74 | 
 75 | # 用户列表数据格式：
 76 | {
 77 |   'data': {
 78 |     'data': [{
 79 |         'id': 1,
 80 |         'role_id': 2,
 81 |         'username': 'admin',
 82 |         'nickname': 'admin',
 83 |         'password_hash': 'pcbfabd90b0f1a72dec248e785ceeac4e169f',
 84 |         'email': 'zyp@qq.com',
 85 |         'mobile': '13888888899',
 86 |         'is_supper': 'false',
 87 |         'is_active': 'true',
 88 |         'access_token': '',
 89 |         'token_expired': 1558874142,
 90 |         'last_login': '1小时前'
 91 |       },
 92 |       {
 93 |         'id': 2,
 94 |         'role_id': 2,
 95 |         'username': 'zuyp',
 96 |         'nickname': 'zuyp',
 97 |         'password_hash': 'pbkdf2:1a72dec248e785ce271e8849f',
 98 |         'email': 'admin@qq.com',
 99 |         'mobile': '13888888899',
100 |         'is_supper': 'false',
101 |         'is_active': 'true',
102 |         'access_token': '',
103 |         'token_expired': 1558874142,
104 |         'last_login': '1小时前'
105 |       }
106 |     ],
107 |     'total': 2
108 |   },
109 |   'message': ''
110 | }
111 | 
112 | ```
113 | 
114 | 
115 | ## Build 打包
116 | 
117 | ``` bash
118 | shell> cd spug-vue-admin 
119 | shell> npm run build
120 | 
121 | ```
122 | 


--------------------------------------------------------------------------------
/src/components/account/PublishPermission.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <el-dialog title="发布权限" :visible.sync="visible" @close="$emit('close')">
 3 |         <el-select v-model="type" style="margin-bottom: 15px">
 4 |             <el-option label="发布环境权限" value="env"></el-option>
 5 |             <el-option label="发布应用权限" value="app"></el-option>
 6 |         </el-select>
 7 |         <el-transfer :titles="['可选发布环境', '已分配环境']" v-if="type === 'env'" v-model="env_result" :data="envs"></el-transfer>
 8 |         <el-transfer :titles="['可选发布应用', '已分配应用']" v-if="type === 'app'" v-model="app_result" :data="apps"></el-transfer>
 9 |         <div slot="footer" v-if="has_permission('config_app_rel_edit')">
10 |             <el-button @click="visible = false">取消</el-button>
11 |             <el-button type="primary" @click="saveCommit" :loading="btnSaveLoading">保存</el-button>
12 |         </div>
13 |     </el-dialog>
14 | </template>
15 | 
16 | <script>
17 |     export default {
18 |         props: ['role'],
19 |         data() {
20 |             return {
21 |                 visible: true,
22 |                 btnSaveLoading: false,
23 |                 type: 'env',
24 |                 env_result: [],
25 |                 app_result: [],
26 |                 apps: [],
27 |                 envs: []
28 |             }
29 |         },
30 |         methods: {
31 |             fetchApps() {
32 |                 this.$http.get('/api/deploy/apps/').then(res => {
33 |                     for (let item of res.result) {
34 |                         this.apps.push({
35 |                             key: String(item.id),
36 |                             label: item.name
37 |                         })
38 |                     }
39 |                 }, res => this.$layer_message(res.result))
40 |             },
41 |             fetchEnvs() {
42 |                 this.$http.get('/api/configuration/environments/').then(res => {
43 |                     for (let item of res.result) {
44 |                         this.envs.push({
45 |                             key: String(item.id),
46 |                             label: item.name
47 |                         })
48 |                     }
49 |                 }, res => this.$layer_message(res.result))
50 |             },
51 |             saveCommit() {
52 |                 this.btnSaveLoading = true;
53 |                 this.$http.post(`/api/account/roles/${this.role.id}/permissions/publish`, {app_ids: this.app_result, env_ids: this.env_result}).then(() => {
54 |                     this.visible = false
55 |                 }, res => this.$layer_message(res.result)).finally(() => this.btnSaveLoading = false)
56 |             }
57 |         },
58 |         mounted() {
59 |             this.fetchApps();
60 |             this.fetchEnvs();
61 |             this.app_result = this.role.app_ids.split(',');
62 |             this.env_result = this.role.env_ids.split(',')
63 |         }
64 |     }
65 | </script>


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="login">
  3 |         <el-row style="z-index: 1;height: 100%;">
  4 |             <el-card class="login-box"  element-loading-background="rgba(0, 0, 0, 0.8)">
  5 |                 <el-form ref="form" :model="form" :rules="rules" label-with="80px" @keyup.enter.native="handleSubmit">
  6 |                     <h1 class="title">Spug-vue-admin</h1>
  7 |                     <!--<p class="login-box-msg">运维平台</p>-->
  8 |                     <el-form-item prop="username">
  9 |                         <el-input v-model="form.username" :autofocus="true" placeholder="请输入用户">
 10 |                             <template slot="prepend">
 11 |                                 <i class="fa fa-user"></i>
 12 |                             </template>
 13 |                         </el-input>
 14 |                     </el-form-item>
 15 |                     <el-form-item prop="password">
 16 |                         <el-input type="password" v-model="form.password" placeholder="请输入密码" >
 17 |                             <template slot="prepend">
 18 |                                 <i class="fa fa-lock"></i>
 19 |                             </template>
 20 |                         </el-input>
 21 |                     </el-form-item>
 22 |                     <el-form-item>
 23 |                         <el-alert v-if="error" :title="error" type="error" style="margin-top: -10px; margin-bottom: 10px" show-icon></el-alert>
 24 |                         <el-button type="primary" :loading="loading" @click="handleSubmit" style="width: 100%">登录</el-button>
 25 |                     </el-form-item>
 26 |                 </el-form>
 27 |             </el-card>
 28 |         </el-row>
 29 |     </div>
 30 | </template>
 31 | <style>
 32 |     .login {
 33 |         background: url(../assets/login.jpg) no-repeat scroll center center / cover;
 34 |         background-size: 100% 100%;
 35 |         width: 100%;
 36 |         height: 100%;
 37 |         position: fixed;
 38 |     }
 39 |     .login-box {
 40 |         background: rgba(0, 0, 0, 0.5);
 41 |         border: none;
 42 |         width: 25%;
 43 |         position: absolute;
 44 |         top: 50%;
 45 |         left: 50%;
 46 |         transform: translate3d(-50%, -50%,0);
 47 |         -webkit-transform: translate3d(-50%, -50%,0);
 48 |     }
 49 |     .login-box-msg {
 50 |         color: #ffffff;
 51 |         text-align: center;
 52 |     }
 53 |     .login-box .title {
 54 |         color: #ffffff;
 55 |         text-align: center;
 56 |     }
 57 | </style>
 58 | <script>
 59 |     export default {
 60 |         data() {
 61 |             return {
 62 |                 loading: false,
 63 |                 error: '',
 64 |                 form: {
 65 |                     username: 'admin',
 66 |                     password: 'spug'
 67 |                 },
 68 |                 rules: {
 69 |                     username: [
 70 |                         {required: true, message: '请输入用户', trigger: 'blur'}
 71 |                     ],
 72 |                     password: [
 73 |                         {required: true, message: '请输入密码', trigger: 'blur'}
 74 |                     ]
 75 |                 }
 76 |             }
 77 |         },
 78 |         methods: {
 79 |             handleSubmit() {
 80 |                 this.error = '';
 81 |                 this.$refs['form'].validate(pass => {
 82 |                     if (!pass) {
 83 |                         return false
 84 |                     }
 85 |                     this.loading = true;
 86 |                     console.log('11', this.form)
 87 |                     this.$http.post('/api/account/users/login/', this.form).then(res => {
 88 |                         localStorage.setItem('token', res.result['token']);
 89 |                         localStorage.setItem('is_supper', res.result['is_supper']);
 90 |                         localStorage.setItem('permissions', res.result['permissions']);
 91 |                         localStorage.setItem('nickname', res.result['nickname']);
 92 |                         this.$router.push('/welcome');
 93 |                     }, response => {
 94 |                         this.error = response.result
 95 |                     }).finally(() => this.loading = false)
 96 |                 })
 97 |             }
 98 |         },
 99 |         watch: {
100 |             form: {
101 |                 handler: function () {
102 |                     this.error = ''
103 |                 },
104 |                 deep: true
105 |             }
106 |         }
107 |     }
108 | </script>
109 | 


--------------------------------------------------------------------------------
/src/plugins/globalTools.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by zyupo on 2019/05/26
  3 |  * https://github.com/openspug
  4 |  */
  5 | 
  6 | import axios from 'axios'
  7 | import envs from '../config/env';
  8 | 
  9 | 
 10 | let tools = {
 11 |     install: null
 12 | };
 13 | 
 14 | // Promise 添加finally方法
 15 | Promise.prototype.finally = function (callback) {
 16 |     return this.then(
 17 |         () => Promise.resolve(callback()),
 18 |         () => Promise.reject(callback())
 19 |     )
 20 | };
 21 | 
 22 | // Date 添加format方法
 23 | Date.prototype.format = function () {
 24 |     return `${this.getFullYear()}-${this.getMonth() + 1}-${this.getDate()} ${this.getHours()}:${this.getMinutes()}:${this.getSeconds()}`
 25 | };
 26 | 
 27 | // 数组包含判断
 28 | function isSubArray(parent, child) {
 29 |     for (let item of child) {
 30 |         if (!parent.includes(item.trim())) {
 31 |             return false
 32 |         }
 33 |     }
 34 |     return true
 35 | }
 36 | 
 37 | // js对象和数组深拷贝
 38 | function deepCopy(obj) {
 39 |     if (Array.isArray(obj)) {
 40 |         let result = [];
 41 |         for (let item of obj) {
 42 |             result.push(deepCopy(item))
 43 |         }
 44 |         return result
 45 |     } else if (typeof obj === 'object' && obj !== null) {
 46 |         let result = {};
 47 |         for (let key in obj) {
 48 |             if (obj.hasOwnProperty(key)) {
 49 |                 result[key] = deepCopy(obj[key])
 50 |             }
 51 |         }
 52 |         return result
 53 |     } else {
 54 |         return obj
 55 |     }
 56 | }
 57 | 
 58 | 
 59 | // response处理
 60 | function handleResponse(response, router) {
 61 |     if (response.status === 401) {
 62 |         router.push({name: 'login'});
 63 |         response['result'] = '请登录';
 64 |         return Promise.reject(response)
 65 |     } else if (response.data.hasOwnProperty('data') && response.data.hasOwnProperty('message')) {
 66 |         if (response.data.message) {
 67 |             response['result'] = response.data.message
 68 |         } else {
 69 |             response['result'] = response.data.data;
 70 |             return Promise.resolve(response)
 71 |         }
 72 |     } else {
 73 |         response['result'] = '无效的数据格式'
 74 |     }
 75 |     return Promise.reject(response)
 76 | }
 77 | 
 78 | tools.install = function (Vue, router) {
 79 |     // 请求拦截器
 80 |     axios.interceptors.request.use(request => {
 81 |         if (request.url.startsWith('/api/')) {
 82 |             request.headers['X-TOKEN'] = localStorage.getItem('token');
 83 |             // request.url = config.apiServer + request.url.replace('/api', '')
 84 |             // request.url = config.apiServer + request.url
 85 |         }
 86 |         request.timeout = envs.request_timeout;
 87 |         return request;
 88 |     });
 89 |     // 返回拦截器
 90 |     axios.interceptors.response.use(response => {
 91 |         return handleResponse(response, router)
 92 |     }, error => {
 93 |         if (error.response) {
 94 |             return handleResponse(error.response, router)
 95 |         }
 96 |         return Promise.reject({result: '请求异常： ' + error.message})
 97 |     });
 98 |     Vue.prototype.$http = axios;
 99 |     Vue.prototype.$layer_message = function (message, type) {
100 |         this.$message({
101 |             showClose: true,
102 |             duration: 5000,
103 |             message: message,
104 |             type: type || 'error'
105 |         })
106 |     };
107 |     // js对象和数组深拷贝
108 |     Vue.prototype.$deepCopy = deepCopy;
109 |     // 权限判断
110 |     Vue.prototype.has_permission = function (str_code) {
111 |         if (localStorage.getItem('is_supper') === 'true') {
112 |             return true
113 |         }
114 |         let permissions = localStorage.getItem('permissions');
115 |         if (!str_code || !permissions) return false;
116 |         permissions = permissions.split(',');
117 |         for (let or_item of str_code.split('|')) {
118 |             if (isSubArray(permissions, or_item.split('&'))) {
119 |                 return true
120 |             }
121 |         }
122 |         return false
123 |     };
124 |     // 路由导航钩子
125 |     router.beforeEach((to, from, next) => {
126 |         if (['/', '/login', '/deny','/account/person','/account/personset','/home','/welcome'].includes(to.path)) {
127 |             next()
128 |         } else if (to.meta.hasOwnProperty('permission') && Vue.prototype.has_permission(to.meta.permission)) {
129 |             next()
130 |         } else {
131 |             next({path: '/deny'})
132 |         }
133 |     })
134 | };
135 | 
136 | 
137 | export default tools;
138 | 


--------------------------------------------------------------------------------
/src/components/account/Permission.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <el-dialog :title="role.name + '- 权限管理'" :visible.sync="visible" @close="$emit('close')" width="80%"
  3 |                :close-on-click-modal="false">
  4 |         <table v-if="codes !== undefined" class="role_table">
  5 |             <tr class="el-table__row">
  6 |                 <td rowspan="1">Dashboard</td>
  7 |                 <td rowspan="1">Dashboard</td>
  8 |                 <tag-td :item="codes['home_view']"></tag-td>
  9 |                 <td></td>
 10 |                 <td></td>
 11 |             </tr>
 12 |             <tr class="el-table__row">
 13 |                 <td rowspan="4">用户管理</td>
 14 |                 <td rowspan="2">用户列表</td>
 15 |                 <tag-td :item="codes['account_user_view']"></tag-td>
 16 |                 <tag-td :item="codes['account_user_add']"></tag-td>
 17 |                 <tag-td :item="codes['account_user_edit']"></tag-td>
 18 |             </tr>
 19 |             <tr>
 20 |                 <tag-td :item="codes['account_user_del']"></tag-td>
 21 |                 <tag-td :item="codes['account_user_disable']"></tag-td>
 22 |                 <td></td>
 23 |             </tr>
 24 |             <tr>
 25 |                 <td rowspan="2">角色权限</td>
 26 |                 <tag-td :item="codes['account_role_view']"></tag-td>
 27 |                 <tag-td :item="codes['account_role_add']"></tag-td>
 28 |                 <tag-td :item="codes['account_role_edit']"></tag-td>
 29 |             </tr>
 30 |             <tr>
 31 |                 <tag-td :item="codes['account_role_del']"></tag-td>
 32 |                 <tag-td :item="codes['account_role_permission_view']"></tag-td>
 33 |                 <tag-td :item="codes['account_role_permission_edit']"></tag-td>
 34 |             </tr>
 35 |             <tr>
 36 |                 <td rowspan="1">系统管理</td>
 37 |                 <td rowspan="1">通知设置</td>
 38 |                 <tag-td :item="codes['system_notify_view']"></tag-td>
 39 |                 <tag-td :item="codes['system_notify_add']"></tag-td>
 40 |                 <tag-td :item="codes['system_notify_edit']"></tag-td>
 41 |             </tr>
 42 |         </table>
 43 |         <el-table v-else v-loading="loading"></el-table>
 44 |         <div slot="footer">
 45 |             <el-button @click="visible = false">取消</el-button>
 46 |             <el-button v-if="has_permission('account_role_permission_edit')" type="primary" @click="saveCommit" :loading="btnSaveLoading">保存</el-button>
 47 |         </div>
 48 |     </el-dialog>
 49 | </template>
 50 | 
 51 | <style>
 52 |     .role_table {
 53 |         width: 100%;
 54 |         background-color: #fff;
 55 |         border-collapse: collapse;
 56 |         border: 1px solid #dfe6ec;
 57 |         text-align: center;
 58 |         font-size: 14px;
 59 |         color: #1f2d3d
 60 |     }
 61 | 
 62 |     .role_table td {
 63 |         height: 40px;
 64 |         box-sizing: border-box;
 65 |         text-overflow: ellipsis;
 66 |         vertical-align: middle;
 67 |         border-bottom: 1px solid #dfe6ec;
 68 |         border-right: 1px solid #dfe6ec;
 69 |     }
 70 | </style>
 71 | 
 72 | <script>
 73 |     import TagTd from './TagTd.vue'
 74 | 
 75 |     export default {
 76 |         components: {
 77 |             'tag-td': TagTd
 78 |         },
 79 |         props: ['role'],
 80 |         data() {
 81 |             return {
 82 |                 visible: true,
 83 |                 loading: false,
 84 |                 btnSaveLoading: false,
 85 |                 codes: undefined
 86 |             }
 87 |         },
 88 |         methods: {
 89 |             fetch() {
 90 |                 this.loading = true;
 91 |                 this.$http.get(`/api/account/roles/${this.role.id}/permissions`).then(res => {
 92 |                     console.log('res.result', res.result);
 93 |                     this.codes = res.result;
 94 |                 }, res => this.$layer_message(res.result)).finally(() => this.loading = false)
 95 |             },
 96 |             saveCommit() {
 97 |                 this.btnSaveLoading = true;
 98 |                 let codes = [];
 99 |                 for (let item of Object.values(this.codes)) {
100 |                     if (item.is_has) {
101 |                         codes.push(item.id)
102 |                     }
103 |                 }
104 |                 this.$http.post(`/api/account/roles/${this.role.id}/permissions`, {codes: codes}).then(() => {
105 |                     this.visible = false
106 |                 }, res => this.$layer_message(res.result)).finally(() => this.btnSaveLoading = false);
107 |             }
108 |         },
109 |         mounted() {
110 |             this.fetch()
111 |         }
112 |     }
113 | </script>
114 | 


--------------------------------------------------------------------------------
/src/components/Layout.vue:
--------------------------------------------------------------------------------
  1 | <style scoped>
  2 |     @import '../assets/styles/common.css';
  3 | </style>
  4 | <template>
  5 |     <div class="layout-wrapper">
  6 |         <div class="layout-side" :class="{'layout-side-extend': !isCollapse}">
  7 |             <div class="layout-logo" v-if="!isCollapse">Spug</div>
  8 |             <div class="layout-logo" v-else>S</div>
  9 |             <el-menu :collapse="isCollapse" :default-active="current_index" @select="handleSelect" unique-opened router>
 10 |                 <template v-for="item in menus" v-if="has_permission(item.permission)">
 11 |                     <el-submenu v-if="item.subs" :index="item.key">
 12 |                         <template slot="title">
 13 |                             <i :class="item.icon"></i>
 14 |                             <span slot="title">{{ item.desc }}</span>
 15 |                         </template>
 16 |                         <el-menu-item :index="sub.key" v-for="sub in item.subs" v-if="has_permission(sub.permission)" :key="sub.key">{{ sub.desc }}</el-menu-item>
 17 |                     </el-submenu>
 18 |                     <el-menu-item v-else :index="item.key">
 19 |                         <i :class="item.icon"></i>
 20 |                         <span slot="title">{{ item.desc }}</span>
 21 |                     </el-menu-item>
 22 |                 </template>
 23 |             </el-menu>
 24 |         </div>
 25 |         <div class="layout-main">
 26 |             <div class="layout-header">
 27 |                 <div class="i-button">
 28 |                     <i class="fa fa-sign-out" @click="logout"></i>
 29 |                 </div>
 30 |                 <div class="i-button">
 31 |                     <el-dropdown trigger="click" @command="handleCommand">
 32 |                         <span class="el-dropdown-link "> <i class="fa fa-user"></i> {{ login_user }}<i class="el-icon-arrow-down el-icon--right"></i></span>
 33 |                         <el-dropdown-menu slot="dropdown">
 34 |                             <el-dropdown-item command="person">个人信息</el-dropdown-item>
 35 |                             <el-dropdown-item command="set_person">设置</el-dropdown-item>
 36 |                         </el-dropdown-menu>
 37 |                     </el-dropdown>
 38 |                 </div>
 39 |                 <div class="i-button">
 40 |                     <i class="fa fa-envelope"></i>
 41 |                 </div>
 42 |                 <div style="flex-grow: 1"></div>
 43 |                 <div class="i-button">
 44 |                     <i class="fa fa-bars" @click="isCollapse = !isCollapse"></i>
 45 |                 </div>
 46 |             </div>
 47 |             <div class="layout-body">
 48 |                 <router-view @routerChange="routerChange"></router-view>
 49 |             </div>
 50 |             <div class="layout-footer">
 51 |                 From OpenSpug: https://github.com/openspug/spug_vue_admin
 52 |             </div>
 53 |         </div>
 54 |     </div>
 55 | </template>
 56 | <script>
 57 |     import menu from '../config/menu';
 58 |     export default {
 59 |         data() {
 60 |             return {
 61 |                 current_index: undefined,
 62 |                 isCollapse: false,
 63 |                 menus: menu.menus,
 64 |                 login_user: undefined,
 65 |             }
 66 |         },
 67 |         methods: {
 68 |             logout() {
 69 |                 this.$http.get('/api/account/users/logout/').finally(() => {
 70 |                     localStorage.removeItem('token');
 71 |                     this.$router.push({name: 'login'})
 72 |                 })
 73 |             },
 74 |             handleCommand(command) {
 75 |                 if (command === 'person') {
 76 |                     this.$router.push({path: '/account/person'})
 77 |                 }
 78 |                 if (command === 'set_person'){
 79 |                     this.$router.push({path: '/account/personset'})
 80 |                 }
 81 |             },
 82 |             routerChange() {
 83 |                 this.current_index = this.$route.path;
 84 |             },
 85 |             handleSelect(path) {
 86 |                 this.current_index = path
 87 |             },
 88 |             back_login(){
 89 |                 let token = localStorage.getItem('token');
 90 |                 if (!token || token.length !== 32) {
 91 |                     this.$router.push({name: 'login'})
 92 |                 }
 93 |             },
 94 |             personInfo(){
 95 |                 this.login_user = localStorage.getItem('nickname');
 96 |             }
 97 |         },
 98 |         created() {
 99 |             this.back_login();
100 |             this.personInfo();
101 | 
102 |         }
103 |     }
104 | </script>
105 | 


--------------------------------------------------------------------------------
/src/components/account/Role.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-row style="text-align: right; margin-bottom: 15px">
  4 |             <el-button @click="fetch(true)">刷新</el-button>
  5 |             <el-button v-if="has_permission('account_role_add')" type="primary" @click="addOpen">添加角色</el-button>
  6 |         </el-row>
  7 |         <el-table :data="tableData" v-loading="tableLoading" style="width: 100%; margin-top: 20px">
  8 |             <el-table-column prop="name" label="名称" min-width="100"></el-table-column>
  9 |             <el-table-column prop="desc" label="描述" show-overflow-tooltip></el-table-column>
 10 |             <el-table-column label="操作" >
 11 |                 <template slot-scope="scope">
 12 |                     <el-button v-if="has_permission('account_role_edit')" size="small" @click="editOpen(scope.row)">编辑</el-button>
 13 |                     <el-button v-if="has_permission('account_role_permission_view')" size="small" type="primary" @click="perOpen(scope.row)">权限</el-button>
 14 | <!--                    <el-button v-if="has_permission('account_role_permission_view')" size="small" type="primary" @click="pubPerOpen(scope.row)">发布</el-button>-->
 15 |                     <el-button v-if="has_permission('account_role_del')" size="small" type="danger" :loading="btnDelLoading[scope.row.id]" @click="delCommit(scope.row)">删除</el-button>
 16 |                 </template>
 17 |             </el-table-column>
 18 |         </el-table>
 19 |         <el-dialog title="编辑角色" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
 20 |             <el-form :model="form" label-width="80px">
 21 |                 <el-form-item label="角色名称" required>
 22 |                     <el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
 23 |                 </el-form-item>
 24 |                 <el-form-item label="角色描述">
 25 |                     <el-input type="textarea" autosize v-model="form.desc" placeholder="请输入角色描述"></el-input>
 26 |                 </el-form-item>
 27 |             </el-form>
 28 |             <div slot="footer">
 29 |                 <el-button @click="dialogEditVisible=false">取消</el-button>
 30 |                 <el-button type="primary" @click="saveCommit" :loading="btnSaveLoading">保存</el-button>
 31 |             </div>
 32 |         </el-dialog>
 33 |         <permission v-if="dialogPerVisible" :role="form" @close="dialogPerVisible = false"></permission>
 34 |         <publish-permission v-if="dialogPubPerVisible" :role="form" @close="dialogPubPerVisible = false"></publish-permission>
 35 |     </div>
 36 | </template>
 37 | 
 38 | <script>
 39 |     import Permission from './Permission.vue'
 40 |     import PublishPermission from './PublishPermission.vue'
 41 |     export default {
 42 |         components: {
 43 |             PublishPermission,
 44 |             permission: Permission,
 45 |         },
 46 |         data() {
 47 |             return {
 48 |                 tableLoading: false,
 49 |                 btnSaveLoading: false,
 50 |                 btnDelLoading: {},
 51 |                 dialogPerVisible: false,
 52 |                 dialogEditVisible: false,
 53 |                 dialogPubPerVisible: false,
 54 |                 tableData: [],
 55 |                 form: {}
 56 |             }
 57 |         },
 58 |         methods: {
 59 |             fetch() {
 60 |                 this.tableLoading = true;
 61 |                 this.$http.get('/api/account/roles/').then(res => {
 62 |                     console.log('res', res.result);
 63 |                     this.tableData = res.result
 64 |                 }, res => this.$layer_message(res.result)).finally(() => this.tableLoading = false)
 65 |             },
 66 |             addOpen() {
 67 |                 this.form = {};
 68 |                 this.dialogEditVisible = true
 69 |             },
 70 |             editOpen(row) {
 71 |                 this.form = row;
 72 |                 this.dialogEditVisible = true
 73 |             },
 74 |             perOpen(row) {
 75 |                 this.form = row;
 76 |                 this.dialogPerVisible = true
 77 |             },
 78 |             pubPerOpen(row) {
 79 |                 this.form = row;
 80 |                 this.dialogPubPerVisible = true;
 81 |             },
 82 |             saveCommit() {
 83 |                 this.btnSaveLoading = true;
 84 |                 let request;
 85 |                 if (this.form.id) {
 86 |                     request = this.$http.put(`/api/account/roles/${this.form.id}`, this.form)
 87 |                 } else {
 88 |                     request = this.$http.post('/api/account/roles/', this.form)
 89 |                 }
 90 |                 request.then(() => {
 91 |                     this.dialogEditVisible = false;
 92 |                     this.$layer_message('提交成功', 'success');
 93 |                     this.fetch()
 94 |                 }, res => this.$layer_message(res.result)).finally(() => this.btnSaveLoading = false)
 95 |             },
 96 |             delCommit(row) {
 97 |                 this.$confirm(`此操作将永久删除角色 ${row.name}，是否继续？`, '删除确认', {type: 'warning'}).then(() => {
 98 |                     this.btnDelLoading = {[row.id]: true};
 99 |                     this.$http.delete(`/api/account/roles/${row.id}`).then(() => {
100 |                         this.fetch()
101 |                     }, res => this.$layer_message(res.result))
102 |                 }).catch(() => {
103 |                 }).finally(() => this.btnDelLoading = {})
104 |             }
105 |         },
106 |         created() {
107 |             this.fetch()
108 |         }
109 |     }
110 | </script>
111 | 


--------------------------------------------------------------------------------
/src/components/system/Notify.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-row>
  4 |             <el-col :span="16">
  5 |                 <el-form :inline="true" :model="notify_query">
  6 |                     <el-form-item>
  7 |                         <el-input clearable v-model="notify_query.name_field" placeholder="通知名称"></el-input>
  8 |                     </el-form-item>
  9 |                     <el-form-item>
 10 |                         <el-button type="primary" icon="search" @click="nameSearch()">查询</el-button>
 11 |                     </el-form-item>
 12 |                 </el-form>
 13 |             </el-col>
 14 |             <el-col :span="8" style="text-align: right">
 15 |                 <el-button @click="refresh()">刷新</el-button>
 16 |                 <el-button v-if="has_permission('system_notify_add')" style="float: right" type="primary"
 17 |                            @click="handleAdd()">添加通知
 18 |                 </el-button>
 19 |             </el-col>
 20 |         </el-row>
 21 | 
 22 |         <el-table :data="tableData.data" stripe border v-loading="listLoading" style="width: 100%"
 23 |                   :default-sort="{prop: 'username', order: 'descending'}">
 24 |             <el-table-column type="index" width="60"></el-table-column>
 25 |             <el-table-column prop="name" label="通知名称" sortable></el-table-column>
 26 |             <el-table-column prop="value" label="通知URL"  sortable></el-table-column>
 27 |             <el-table-column prop="desc" label="备注"></el-table-column>
 28 |             <el-table-column v-if="has_permission('system_notify_view|system_notify_add|system_notify_edit')" label="操作">
 29 |                 <template slot-scope="scope">
 30 |                     <el-button v-if="has_permission('system_notify_edit')" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 31 |                 </template>
 32 |             </el-table-column>
 33 |         </el-table>
 34 | 
 35 |         <!--分页-->
 36 |         <div class="pagination-bar" v-if="tableData.total > 10">
 37 |             <el-pagination
 38 |                     @current-change="handleCurrentChange"
 39 |                     :current-page="currentPage"  layout="total, prev, pager, next"
 40 |                     :total="tableData.total">
 41 |             </el-pagination>
 42 |         </div>
 43 | 
 44 | 
 45 |         <!--编辑新增界面-->
 46 |         <el-dialog :title="editFormTitle" :visible.sync="dialogShow" :close-on-click-modal="false">
 47 |             <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">
 48 |                 <el-form-item prop="name" label="通知名称">
 49 |                     <el-input v-model="editForm.name" ></el-input>
 50 |                 </el-form-item>
 51 |                 <el-form-item prop="value" label="通知URL" >
 52 |                     <el-input placeholder="输入钉钉webhook" type="textarea" :rows="3" v-model="editForm.value" auto-complete="off"></el-input>
 53 |                 </el-form-item>
 54 | 
 55 |                 <el-form-item prop="desc" label="备注信息">
 56 |                     <el-input v-model="editForm.desc" auto-complete="off"></el-input>
 57 |                 </el-form-item>
 58 |             </el-form>
 59 |             <div slot="footer">
 60 |                 <el-button type="text" @click.native="dialogShow = false">取消</el-button>
 61 |                 <el-button type="primary" :loading="editLoading" @click.native="editSubmit">保存</el-button>
 62 |             </div>
 63 |         </el-dialog>
 64 |     </div>
 65 | </template>
 66 | 
 67 | <script>
 68 |     export default {
 69 |         data() {
 70 |             return {
 71 |                 notify_query: {
 72 |                     name_field: ''
 73 |                 },
 74 |                 error: '',
 75 |                 dialogShow: false,
 76 |                 tableData: {},
 77 |                 roles: undefined,
 78 |                 roles_map: {},
 79 |                 display: '',
 80 |                 listLoading: false,
 81 |                 btnDelLoading: {},
 82 |                 editFormTitle: '',
 83 |                 editLoading: false,
 84 |                 is_disabled: '',
 85 |                 currentPage: 1,
 86 |                 addForm: {
 87 |                     id: 0,
 88 |                     name: '',
 89 |                     value: '',
 90 |                     desc: '',
 91 |                 },
 92 |                 editForm: {},
 93 |                 rules: {
 94 |                     name: [
 95 |                         {required: true, message: '请输入通知名称', trigger: 'blur'}
 96 |                     ],
 97 |                     value: [
 98 |                         {required: true, message: '请输入通知URL', trigger: 'blur'}
 99 |                     ],
100 |                 },
101 |             }
102 |         },
103 |         methods: {
104 |             handleCurrentChange(val) {
105 |                 this.currentPage = val;
106 |                 this.getNotify(this.currentPage);
107 |             },
108 | 
109 |             //名称查询
110 |             nameSearch(){
111 |                 this.currentPage = 1;
112 |                 this.getNotify();
113 |             },
114 | 
115 |             //刷新操作
116 |             refresh(){
117 |                 this.getNotify(this.currentPage);
118 |             },
119 | 
120 |             //获取通知列表
121 |             getNotify(page, callback) {
122 |                 if (!page) page = 1;
123 |                 this.listLoading = true;
124 |                 this.$http.get('/api/system/notify/', {
125 |                     params: {notify_query: this.notify_query}
126 |                 }).then((response) => {
127 |                     this.tableData = response.result;
128 |                     if (callback) callback(this)
129 |                 }, (response) => this.$layer_message(response.result)).finally(() => this.listLoading = false)
130 |             },
131 | 
132 |             //显示添加界面
133 |             handleAdd: function () {
134 |                 this.is_disabled = false;
135 |                 this.dialogShow = true;
136 |                 this.editFormTitle = '添加通知';
137 |                 this.display = 'display:block';
138 |                 this.editForm = this.addForm;
139 |             },
140 | 
141 |             //显示编辑界面
142 |             handleEdit: function (index, row) {
143 |                 this.is_disabled = true;
144 |                 this.dialogShow = true;
145 |                 this.editFormTitle = '编辑通知';
146 |                 this.display = 'display:none';
147 |                 //this.editForm = Object.assign({}, row);
148 |                 this.editForm = this.$deepCopy(row);
149 |             },
150 | 
151 |             EditData: function (row, msg, pwd) {
152 |                 this.$http.put(`/api/account/users/${row.id}`, this.editForm).then(response => {
153 |                     this.listLoading = false;
154 |                     this.$layer_message(msg + pwd, 'success');
155 |                     this.getUsers(this.currentPage);
156 |                 }, response => this.$layer_message(response.result)).finally(() => this.btnDelLoading = {});
157 |             },
158 | 
159 |             editSubmit: function () {
160 |                 this.$refs.editForm.validate((valid) => {
161 |                     if (valid) {
162 |                         this.editLoading = true;
163 |                         this.error = '';
164 |                         if (this.editForm.id) {
165 |                             this.$http.put(`/api/system/notify/${this.editForm.id}`, this.editForm).then(this.resp,
166 |                                 response => this.$layer_message(response.result)).finally(() => this.editLoading = false)
167 |                         } else {
168 |                             this.$http.post('/api/system/notify/', this.editForm).then(this.resp,
169 |                                 response => this.$layer_message(response.result)).finally(() => this.editLoading = false)
170 |                         }
171 |                     }
172 |                 });
173 |             },
174 |             resp: function (response) {
175 |                 this.editLoading = false;
176 |                 this.$layer_message('提交成功', 'success');
177 |                 this.editForm = {};
178 |                 this.addForm = {role_id: ''};
179 |                 this.dialogShow = false;
180 |                 this.getNotify(this.currentPage);
181 |             }
182 |         },
183 |         mounted() {
184 |             this.getNotify();
185 |         }
186 |     }
187 | </script>
188 | 


--------------------------------------------------------------------------------
/src/components/account/PersonSet.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="info_container">
  3 |         <el-row class="info_row row" :gutter="10">
  4 |             <el-tabs v-model="activeName" type="card">
  5 |                 <el-tab-pane label="个人信息" name="person_setup">
  6 |                     <el-col :span="8">
  7 |                         <div class="area">
  8 |                             <p class="title"><h5>个人信息</h5></p>
  9 |                             <el-form class="form"  :model="personInfo" :rules="personRules" ref="personInfo" label-width="80px">
 10 |                                 <el-form-item label="登录名">
 11 |                                     <el-input v-model="personInfo.username"  size="small" disabled></el-input>
 12 |                                 </el-form-item>
 13 |                                 <el-form-item label="姓名" prop="nickname">
 14 |                                     <el-input v-model="personInfo.nickname"  size="small" placeholder="请输入姓名"></el-input>
 15 |                                 </el-form-item>
 16 |                                 <el-form-item label="邮箱" prop="email">
 17 |                                     <el-input v-model="personInfo.email" size="small" placeholder="请输入邮箱"></el-input>
 18 |                                 </el-form-item>
 19 |                                 <el-form-item label="电话" prop="mobile">
 20 |                                     <el-input v-model="personInfo.mobile" size="small" placeholder="请输入电话"></el-input>
 21 |                                 </el-form-item>
 22 |                                 <el-form-item>
 23 |                                     <el-button type="primary" @click="modifyPerson('personInfo')">提交</el-button>
 24 |                                     <el-button @click="cancelPerson()">取消</el-button>
 25 |                                 </el-form-item>
 26 |                             </el-form>
 27 |                         </div>
 28 |                     </el-col>
 29 |                 </el-tab-pane>
 30 |                 <el-tab-pane label="密码" name="pwd_setup">
 31 |                     <el-col :span="8">
 32 |                         <div class="area">
 33 |                             <p class="title"><h5>修改密码</h5></p>
 34 |                             <el-form class="form"  :model="pwdInfo"  :rules="pwdRules" ref="pwdInfo" label-width="80px">
 35 |                                 <el-form-item label="原密码" prop="password">
 36 |                                     <el-input type="password" v-model="pwdInfo.password"  size="small"  placeholder="原密码"></el-input>
 37 |                                 </el-form-item>
 38 |                                 <el-form-item label="新密码" prop="newpassword">
 39 |                                     <el-input type="password" v-model="pwdInfo.newpassword" size="small" placeholder="新密码"></el-input>
 40 |                                 </el-form-item>
 41 |                                 <el-form-item label="确认密码" prop="surepassword">
 42 |                                     <el-input type="password" v-model="pwdInfo.surepassword" size="small" placeholder="确认新密码"></el-input>
 43 |                                 </el-form-item>
 44 |                                 <el-form-item>
 45 |                                     <el-button type="primary" @click="modifyPwd('pwdInfo')">提交</el-button>
 46 |                                     <el-button @click="resetPwd('pwdInfo')">重置</el-button>
 47 |                                 </el-form-item>
 48 |                             </el-form>
 49 |                         </div>
 50 |                     </el-col>
 51 |                 </el-tab-pane>
 52 |             </el-tabs>
 53 |         </el-row>
 54 |     </div>
 55 | </template>
 56 | 
 57 | <script>
 58 |     export default {
 59 |         data() {
 60 |             let validatePass = (rule, value, callback) => {
 61 |                 if (value === '') {
 62 |                     callback(new Error('请输入新密码'));
 63 |                 } else {
 64 |                     if (this.pwdInfo.surepassword !== '') {
 65 |                         this.$refs.pwdInfo.validateField('surepassword');
 66 |                     }
 67 |                     callback();
 68 |                 }
 69 |             };
 70 | 
 71 |             let validateSurepwd = (rule, value, callback) => {
 72 |                 if (value === '') {
 73 |                     callback(new Error('请输入确认密码'));
 74 |                 } else if (value !== this.pwdInfo.newpassword) {
 75 |                     callback(new Error('两次输入密码不一致!'));
 76 |                 } else {
 77 |                     callback();
 78 |                 }
 79 |             };
 80 | 
 81 |             let checkMobile = (rule, value, callback) => {
 82 |                 if (value === '') {
 83 |                     return callback(new Error('手机号不能为空'));
 84 |                 }
 85 |                 setTimeout(() => {
 86 |                     let mobile = /^1[34578]\d{9}$/;
 87 |                     if (!mobile.test(value)) {
 88 |                         callback(new Error('手机号不正确'));
 89 |                     } else {
 90 |                         callback();
 91 |                     }
 92 |                 }, 1000);
 93 |             };
 94 | 
 95 |             return {
 96 |                 personInfo: {
 97 |                     username: '',
 98 |                     nickname: '',
 99 |                     email:'',
100 |                     mobile: '',
101 | 
102 |                 },
103 |                 pwdInfo:{
104 |                     password:'',
105 |                     newpassword:'',
106 |                     surepassword:''
107 |                 },
108 |                 activeName: 'person_setup',
109 |                 personRules: {
110 |                     nickname: [
111 |                         {required: true, message: '请输入姓名', trigger: 'blur'}
112 |                     ],
113 |                     mobile: [
114 |                         {required: true, validator: checkMobile, trigger: 'blur'}
115 |                     ],
116 |                     email:[
117 |                         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
118 |                         { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
119 |                     ],
120 |                 },
121 |                 pwdRules: {
122 |                     password: [
123 |                         { required: true, message: '请输入原密码', trigger: 'blur' }
124 |                     ],
125 |                     newpassword: [
126 |                         {required: true, validator: validatePass, trigger: 'blur'}
127 |                     ],
128 |                     surepassword:[
129 |                         { required: true, validator:validateSurepwd, trigger: 'blur' },
130 |                     ],
131 |                 },
132 |             }
133 |         },
134 |         methods: {
135 |             //获取用户信息
136 |             getPersonInfo() {
137 |                 this.$http.get(`/api/account/users/self`).then((response) => {
138 |                     this.personInfo = response.result;
139 |                 }, (response) => this.$layer_message(response.result))
140 |             },
141 |             //重置密码表单
142 |             cancelPerson: function () {
143 |                 this.$router.push('/welcome');
144 |             },
145 |             resetPwd: function () {
146 |                 this.pwdInfo = {};
147 |             },
148 | 
149 |             modifyPwd: function () {
150 |                 if (this.pwdInfo.newpassword !== this.pwdInfo.surepassword) {
151 |                     this.$layer_message('两次输入密码不一致');
152 |                     return
153 |                 }
154 |                 this.$http.post(`/api/account/users/setting/password`, this.pwdInfo).then(() => {
155 |                     this.$layer_message('修改成功', 'success');
156 |                     this.logout();
157 |                 }, response => this.$layer_message(response.result));
158 |             },
159 |             modifyPerson: function () {
160 |                 this.$http.post(`/api/account/users/setting/info`, this.personInfo).then(() => {
161 |                     this.$layer_message('保存成功', 'success');
162 |                     localStorage.setItem('nickname', this.personInfo['nickname']);
163 |                 }, response => this.$layer_message(response.result));
164 |             },
165 |             logout() {
166 |               this.$http.get('/api/account/users/logout/').finally(() => {
167 |                 localStorage.removeItem('token');
168 |                 this.$router.push({name: 'login'})
169 |               })
170 |             }
171 |         },
172 |         mounted() {
173 |             this.getPersonInfo();
174 |         }
175 |     }
176 | </script>


--------------------------------------------------------------------------------
/src/assets/js/highlight-bash.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by aka on 2017/7/19.
3 |  */
4 | !function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value).replace('"',"&quot;")+'"'}s+="<"+t(e)+E.map.call(e.attributes,r).join("")+">"}function u(e){s+="</"+t(e)+">"}function c(e){("start"===e.event?o:u)(e.node)}for(var l=0,s="",f=[];e.length||r.length;){var g=i();if(s+=n(a.substring(l,g[0].offset)),l=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===l);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return s+n(a.substr(l))}function l(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):x(a.k).forEach(function(e){u(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return l("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var c=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=c.length?t(c.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function l(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":I.classPrefix,i='<span class="'+a,o=t?"":C;return i+=e+'">',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=l(E,r),e?(B+=e[1],a+=p(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!y[E.sL])return n(k);var t=e?f(E.sL,k,!0,x[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(B+=t.r),e&&(x[E.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=null!=E.sL?d():h(),k=""}function v(e){L+=e.cN?p(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(k+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),b(),t.rB||t.eB||(k=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),b(),a.eE&&(k=n));do E.cN&&(L+=C),E.skip||(B+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return k+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,E=i||N,x={},L="";for(R=E;R!==N;R=R.parent)R.cN&&(L=p(R.cN,"",!0)+L);var k="",B=0;try{for(var M,j,O=0;;){if(E.t.lastIndex=O,M=E.t.exec(t),!M)break;j=m(t.substring(O,M.index),M[0]),O=M.index+j}for(m(t.substr(O)),R=E;R.parent;R=R.parent)R.cN&&(L+=C);return{r:B,value:L,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function g(e,t){t=t||I.languages||x(y);var r={r:0,value:n(e)},a=r;return t.filter(w).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return I.tabReplace||I.useBR?e.replace(M,function(e,n){return I.useBR&&"\n"===e?"<br>":I.tabReplace?n.replace(/\t/g,I.tabReplace):""}):e}function h(e,n,t){var r=n?L[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function d(e){var n,t,r,o,l,s=i(e);a(s)||(I.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,l=n.textContent,r=s?f(s,l,!0):g(l),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),l)),r.value=p(r.value),e.innerHTML=r.value,e.className=h(e.className,s,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){I=o(I,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,d)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=y[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function R(){return x(y)}function w(e){return e=(e||"").toLowerCase(),y[e]||y[L[e]]}var E=[],x=Object.keys,y={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="</span>",I={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=d,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});
5 | hljs.registerLanguage("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)}/}]},s={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/\b-?[a-z\._]+\b/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",_:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"meta",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,s,a,t]}});
6 | export default hljs;
7 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <el-row :gutter="20">
  3 |         <el-row :gutter="20" v-model="top_data" >
  4 |             <el-col :span="6">
  5 |                 <div class="grid-content bg-purple" >
  6 |                     <h3>用户</h3>
  7 |                     <p><span>{{ top_data.user_total }}</span>个</p>
  8 |                 </div>
  9 |             </el-col>
 10 |             <el-col :span="6">
 11 |                 <div class="grid-content bg-purple">
 12 |                     <h3>主机</h3>
 13 |                     <p><span>{{ top_data.host_total }}</span>台</p>
 14 |                 </div>
 15 |             </el-col>
 16 |             <el-col :span="6">
 17 |                 <div class="grid-content bg-purple">
 18 |                     <h3>应用</h3>
 19 |                     <p><span>{{ top_data.app_total }}</span>个</p>
 20 |                 </div>
 21 |             </el-col>
 22 |             <el-col :span="6">
 23 |                 <div class="grid-content bg-purple">
 24 |                     <h3>任务</h3>
 25 |                     <p><span>{{ top_data.job_total }}</span>个</p>
 26 |                 </div>
 27 |             </el-col>
 28 |         </el-row>
 29 |         <el-row :gutter="20">
 30 |             <el-col :span="18">
 31 |                 <div id="PublishBar" style="width:100%; height:200px;"></div>
 32 |             </el-col>
 33 |             <el-col :span="6">
 34 |                 <div id="DeployPie" style="width:100%; height:200px;"></div>
 35 |             </el-col>
 36 |         </el-row>
 37 | 
 38 |         <el-row :gutter="20">
 39 |             <el-col :span="12">
 40 |                 <div id="HostBar" style="width:100%; height:200px;"></div>
 41 |             </el-col>
 42 |             <el-col :span="6">
 43 |                 <div id="ContainerPie" style="width:100%; height:200px;"></div>
 44 |             </el-col>
 45 |             <el-col :span="6">
 46 |                 <div id="AlertsBar" style="width:100%; height:200px;"></div>
 47 |             </el-col>
 48 | 
 49 |         </el-row>
 50 |     </el-row>
 51 | </template>
 52 | 
 53 | <style>
 54 |     .el-row {
 55 |         margin-bottom: 20px;
 56 |     &:last-child {
 57 |          margin-bottom: 0;
 58 |      }
 59 |     }
 60 |     .el-col {
 61 |         border-radius: 4px;
 62 |     }
 63 |     .bg-purple-dark {
 64 |         background: #F3F3F3;
 65 |     }
 66 |     .bg-purple {
 67 |         text-align: center;
 68 |         background: #f8f8ff;
 69 |     }
 70 |     .bg-purple h3{
 71 |         font-size: 14px;
 72 |         margin: 0;
 73 |         padding: 10px 0;
 74 |         color: #888;
 75 |     }
 76 |     .bg-purple p{
 77 |         font-size: 14px;
 78 |         margin: 0;
 79 |         padding: 0;
 80 |         color: #666;
 81 |     }
 82 |     .bg-purple p span{
 83 |         font-size: 28px;
 84 |         font-weight: bold;
 85 |         color: orange;
 86 |     }
 87 |     .bg-purple-light {
 88 |         background: #e5e9f2;
 89 |     }
 90 |     .grid-content {
 91 |         border-radius: 5px;
 92 |         min-height: 80px;
 93 |     }
 94 |     .row-bg {
 95 |         padding: 10px 0;
 96 |         background-color: #f9fafc;
 97 |     }
 98 |     .echarts{
 99 |         width: 100%!important;
100 |         height: 250px!important;
101 |     }
102 | </style>
103 | 
104 | 
105 | <script>
106 |     import echarts from 'echarts';
107 |     export default {
108 |         data() {
109 |             return {
110 |                 top_data:{
111 |                     user_total: '',
112 |                 },
113 |                 hostBar: null,
114 |                 publishBar: null,
115 |                 alertsBar: null,
116 |                 containerPie:null,
117 |             }
118 |         },
119 |         methods: {
120 |             get_top_info(){
121 |                 this.$http.get(`/api/home/`).then(res => {
122 |                     this.top_data = res.result;
123 |                 }, res => this.$layer_message(res.result))
124 |             },
125 |             publishBarChart(){
126 |                 this.publishBar = echarts.init(document.getElementById('PublishBar'));
127 |                 this.publishBar.setOption(
128 |                     {
129 |                         color: ['#3CB371'],
130 |                         tooltip : {
131 |                             trigger: 'axis',
132 |                             axisPointer : {            // 坐标轴指示器，坐标轴触发有效
133 |                                 type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
134 |                             }
135 |                         },
136 |                         title: {
137 |                             text: '发布趋势',
138 |                             x: 'center'
139 |                         },
140 |                         xAxis: {
141 |                             type: 'category',
142 |                             data: ["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日"
143 |                                 ,"14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日"],
144 |                             axisTick: {
145 |                                 alignWithLabel: true
146 |                             }
147 |                         },
148 |                         yAxis: {
149 |                             type: 'value'
150 |                         },
151 |                         series: [{
152 |                             name: '次数',
153 |                             type: 'bar',
154 |                             data: [1,3,2,1,5,8,10,1,5,1,2,2,1,1,2,3,4,5,1,6,7,1,1,5,1,2,2,1,1,5]
155 |                         }]
156 |                     }
157 | 
158 |                 )
159 |             },
160 |             deployPieChart(){
161 |                 this.deployPie = echarts.init(document.getElementById('DeployPie'));
162 |                 this.deployPie.setOption(
163 |                     {
164 |                         color: ['#0db38c','#e7552d','#b33349','#e7aa1b','#6f4fb3',],
165 |                         title : {
166 |                             text: '应用部署统计',
167 |                             x:'center'
168 |                         },
169 |                         tooltip : {
170 |                             trigger: 'item',
171 |                             formatter: "{a} <br/>{b} : {c} ({d}%)"
172 |                         },
173 |                         legend: {
174 |                             type: 'scroll',
175 |                             orient: 'vertical',
176 |                             right: 10,
177 |                             top: 20,
178 |                             bottom: 20,
179 |                             data: ['CGI', 'SOA','Mobile','Weixin','IOS'],
180 | 
181 | //                            selected: data.selected
182 |                         },
183 |                         series : [
184 |                             {
185 |                                 name: '实例数',
186 |                                 type: 'pie',
187 |                                 radius : '55%',
188 |                                 center: ['40%', '50%'],
189 |                                 data:[
190 |                                     {value:8, name: 'CGI'},
191 |                                     {value:5, name: 'SOA'},
192 |                                     {value:3, name: 'Mobile'},
193 |                                     {value:2, name: 'Weixin'},
194 |                                     {value:7, name: 'IOS'}
195 |                                 ],
196 |                                 itemStyle: {
197 |                                     emphasis: {
198 |                                         shadowBlur: 10,
199 |                                         shadowOffsetX: 0,
200 |                                         shadowColor: 'rgba(0, 0, 0, 0.5)'
201 |                                     }
202 |                                 }
203 |                             }
204 |                         ]
205 |                     }
206 | 
207 | 
208 |                 );
209 | 
210 |             },
211 |             drawBarChart() {
212 |                 this.hostBar = echarts.init(document.getElementById('HostBar'));
213 |                 this.hostBar.setOption({
214 |                     color: '#e7a017',
215 |                     title: {
216 |                         text: '主机数量统计',
217 |                         x: 'center'
218 |                     },
219 |                     tooltip: {
220 |                         trigger: 'axis',
221 |                         axisPointer: {
222 |                             type: 'shadow'
223 |                         }
224 |                     },
225 |                     legend: {
226 | //                        data: ['测试', '线上', 'GAMMA']
227 |                     },
228 |                     grid: {
229 |                         left: '3%',
230 |                         right: '4%',
231 |                         bottom: '3%',
232 |                         containLabel: true
233 |                     },
234 |                     xAxis: {
235 |                         type: 'value',
236 |                         boundaryGap: [0, 0.01]
237 |                     },
238 |                     yAxis: {
239 |                         type: 'category',
240 |                         data: ['测试', '线上', 'GAMMA']
241 |                     },
242 |                     series: [
243 |                         {
244 |                             type: 'bar',
245 |                             data: [3,8,2]
246 |                         },
247 |                     ]
248 |                 });
249 |             },
250 |             containerPieChart(){
251 |                 this.containerPie = echarts.init(document.getElementById('ContainerPie'));
252 |                 this.containerPie.setOption({
253 |                     color: ['#0db38c','#e7a017','#b32945',],
254 |                     title: {
255 |                         text: '容器状态',
256 |                         x: 'center'
257 |                     },
258 |                     tooltip: {
259 |                         trigger: 'item',
260 |                         formatter: "{a} <br/>{b}: {c} ({d}%)"
261 |                     },
262 |                     legend: {
263 |                         orient: 'vertical',
264 |                         x: 'left',
265 |                         data: ['正常', '异常', '已终止']
266 |                     },
267 |                     series: [
268 |                         {
269 |                             name:'容器状态',
270 |                             type:'pie',
271 |                             radius: ['50%', '70%'],
272 |                             avoidLabelOverlap: false,
273 |                             label: {
274 |                                 normal: {
275 |                                     show: false,
276 |                                     position: 'center'
277 |                                 },
278 |                                 emphasis: {
279 |                                     show: true,
280 |                                     textStyle: {
281 |                                         fontSize: '30',
282 |                                         fontWeight: 'bold'
283 |                                     }
284 |                                 }
285 |                             },
286 |                             labelLine: {
287 |                                 normal: {
288 |                                     show: false
289 |                                 }
290 |                             },
291 |                             data:[
292 |                                 {value:19, name:'正常'},
293 |                                 {value:1, name:'异常'},
294 |                                 {value:2, name:'已终止'}
295 |                             ]
296 |                         }
297 |                     ]
298 |                 });
299 |             },
300 |             alertsBarCharts(){
301 |                 this.alertsBar = echarts.init(document.getElementById('AlertsBar'));
302 |                 this.alertsBar.setOption({
303 |                     color: ['#3CB371'],
304 |                     title: {
305 |                         text: '告警趋势',
306 |                         x: 'center'
307 |                     },
308 |                     tooltip: {},
309 |                     xAxis: {
310 |                         data: ["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日"]
311 |                     },
312 |                     yAxis: {
313 | 
314 |                     },
315 |                     series: [{
316 |                         name: '次数',
317 |                         type: 'bar',
318 |                         data: [1,3,2,1,5,8,10,1,5,1,2,2,1,3,5,1,2,3]
319 |                     }]
320 |                 },
321 | 
322 |                 )
323 | 
324 |             },
325 | 
326 |             drawCharts() {
327 |                 this.publishBarChart();
328 |                 this.drawBarChart();
329 |                 this.deployPieChart();
330 |                 this.containerPieChart();
331 |                 this.alertsBarCharts();
332 |             },
333 | 
334 |         },
335 |         created () {
336 |             this.get_top_info();
337 | 
338 |         },
339 | 
340 |         mounted: function () {
341 |             this.drawCharts()
342 |         },
343 |         updated: function () {
344 |             this.drawCharts()
345 |         }
346 | 
347 | 
348 | 
349 |     }
350 | </script>


--------------------------------------------------------------------------------
/src/components/account/User.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-row>
  4 |             <el-col :span="16">
  5 |                 <el-form :inline="true" :model="filters">
  6 |                     <el-form-item>
  7 |                         <el-input v-model="filters.name" placeholder="姓名"></el-input>
  8 |                     </el-form-item>
  9 |                     <el-form-item>
 10 |                         <el-button type="primary" icon="search" @click="name_Search()">查询</el-button>
 11 |                     </el-form-item>
 12 |                 </el-form>
 13 |             </el-col>
 14 |             <el-col :span="8" style="text-align: right">
 15 |                 <el-button @click="refresh()">刷新</el-button>
 16 |                 <el-button v-if="has_permission('account_user_add')" style="float: right" type="primary"
 17 |                            @click="handleAdd()">添加用户
 18 |                 </el-button>
 19 |             </el-col>
 20 |         </el-row>
 21 | 
 22 |         <el-table :data="tableData.data" stripe border v-loading="listLoading" style="width: 100%"
 23 |                   :default-sort="{prop: 'username', order: 'descending'}">
 24 |             <el-table-column type="index" width="60"></el-table-column>
 25 |             <el-table-column prop="username" label="登录名" sortable></el-table-column>
 26 |             <el-table-column prop="nickname" label="姓名" sortable></el-table-column>
 27 |             <el-table-column prop="role_name" label="角色"></el-table-column>
 28 |             <el-table-column prop="last_login" label="最近登录"></el-table-column>
 29 |             <el-table-column label="状态" sortable width="90">
 30 |                 <template slot-scope="scope">
 31 |                     <el-tag type="success" v-if="scope.row.is_active">正常</el-tag>
 32 |                     <el-tag type="danger" v-else>禁用</el-tag>
 33 |                 </template>
 34 |             </el-table-column>
 35 |             <el-table-column v-if="has_permission('account_user_edit|account_user_disable')" label="操作" width="320">
 36 |                 <template slot-scope="scope">
 37 |                     <el-button v-if="has_permission('account_user_edit')" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 38 |                     <el-button v-if="has_permission('account_user_disable') && scope.row.is_active" size="mini"
 39 |                                type="danger" :loading="btnDelLoading[scope.row.id]" @click="handleDisable(scope.$index, scope.row)">禁用
 40 |                     </el-button>
 41 |                     <el-button  v-if="has_permission('account_user_disable') && scope.row.is_active != 1" size="mini"
 42 |                                 type="success" :loading="btnDelLoading[scope.row.id]" @click="handleDisable(scope.$index, scope.row)">启用
 43 |                     </el-button>
 44 |                     <el-button v-if="has_permission('account_user_disable')" size="mini" type="warning" @click="RestPwd(scope.$index, scope.row)">重置密码
 45 |                     </el-button>
 46 |                 </template>
 47 |             </el-table-column>
 48 |         </el-table>
 49 | 
 50 |         <!--分页-->
 51 |         <div class="pagination-bar" v-if="tableData.total > 10">
 52 |             <el-pagination
 53 |                     @current-change="handleCurrentChange"
 54 |                     :current-page="currentPage"  layout="total, prev, pager, next"
 55 |                     :total="tableData.total">
 56 |             </el-pagination>
 57 |         </div>
 58 | 
 59 |         <!--编辑新增界面-->
 60 |         <el-dialog :title="editFormTitle" :visible.sync="dialogShow" :close-on-click-modal="false">
 61 |             <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">
 62 |                 <el-form-item prop="username" label="登录名">
 63 |                     <el-input v-model="editForm.username" auto-complete="off" :disabled="is_disabled"></el-input>
 64 |                 </el-form-item>
 65 |                 <el-form-item prop="nickname" label="姓名">
 66 |                     <el-input v-model="editForm.nickname" auto-complete="off"></el-input>
 67 |                 </el-form-item>
 68 |                 <el-form-item prop="password" label="密码" :style="display" >
 69 |                     <el-input type="password" v-model="editForm.password" auto-complete="off"></el-input>
 70 |                 </el-form-item>
 71 |                 <el-form-item prop="checkPass" label="确认密码" :style="display" width="180" >
 72 |                     <el-input type="password" v-model="editForm.checkPass" auto-complete="off"></el-input>
 73 |                 </el-form-item>
 74 |                 <el-form-item label="角色" required>
 75 |                     <el-select v-model="editForm.role_id" placeholder="请选择用户角色">
 76 |                         <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id"></el-option>
 77 |                     </el-select>
 78 |                 </el-form-item>
 79 |                 <el-form-item prop="email" label="邮箱">
 80 |                     <el-input v-model="editForm.email" auto-complete="off"></el-input>
 81 |                 </el-form-item>
 82 |                 <el-form-item prop="mobile" label="电话" required>
 83 |                     <el-input v-model="editForm.mobile" auto-complete="off"></el-input>
 84 |                 </el-form-item>
 85 |                 <el-alert v-if="error" :title="error" type="error" style="margin-top: -10px; margin-bottom: 10px"
 86 |                           show-icon></el-alert>
 87 |             </el-form>
 88 |             <div slot="footer">
 89 |                 <el-button type="text" @click.native="dialogShow = false">取消</el-button>
 90 |                 <el-button type="primary" :loading="editLoading" @click.native="editSubmit">保存</el-button>
 91 |             </div>
 92 |         </el-dialog>
 93 |     </div>
 94 | </template>
 95 | 
 96 | <script>
 97 |     export default {
 98 |         data() {
 99 |             let validatePass = (rule, value, callback) => {
100 |                 if (value === '') {
101 |                     callback(new Error('请输入密码'));
102 |                 } else {
103 |                     if (this.editForm.checkPass !== '') {
104 |                         this.$refs.editForm.validateField('checkPass');
105 |                     }
106 |                     callback();
107 |                 }
108 |             };
109 | 
110 |             let validatePass2 = (rule, value, callback) => {
111 |                 if (value === '') {
112 |                     callback(new Error('请再次输入密码'));
113 |                 } else if (value !== this.editForm.password) {
114 |                     callback(new Error('两次输入密码不一致!'));
115 |                 } else {
116 |                     callback();
117 |                 }
118 |             };
119 | 
120 |             let checkMobile = (rule, value, callback) => {
121 |                 if (value === '') {
122 |                     return callback(new Error('手机号不能为空'));
123 |                 }
124 |                 setTimeout(() => {
125 |                     let mobile = /^1[34578]\d{9}$/;
126 |                     if (!mobile.test(value)) {
127 |                         callback(new Error('手机号不正确'));
128 |                     } else {
129 |                         callback();
130 |                     }
131 |                 }, 1000);
132 |             };
133 | 
134 |             return {
135 |                 filters: {
136 |                     name: ''
137 |                 },
138 |                 error: '',
139 |                 dialogShow: false,
140 |                 tableData: {},
141 |                 roles: undefined,
142 |                 roles_map: {},
143 |                 display: '',
144 |                 listLoading: false,
145 |                 btnDelLoading: {},
146 |                 editFormTitle: '',
147 |                 editLoading: false,
148 |                 is_disabled: '',
149 |                 currentPage: 1,
150 |                 addForm: {
151 |                     id: 0,
152 |                     username: '',
153 |                     nickname: '',
154 |                     password: '',
155 |                     checkPass: '',
156 |                     role_id: '',
157 |                     email: '',
158 |                     mobile: '',
159 |                 },
160 |                 editForm: {},
161 |                 rules: {
162 |                     username: [
163 |                         {required: true, message: '请输入登录名', trigger: 'blur'}
164 |                     ],
165 |                     nickname: [
166 |                         {required: true, message: '请输入姓名', trigger: 'blur'}
167 |                     ],
168 |                     mobile: [
169 |                         {validator: checkMobile, trigger: 'blur'}
170 |                     ],
171 |                     email:[
172 |                         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
173 |                         { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
174 |                     ],
175 |                     password: [
176 |                         {validator: validatePass, trigger: 'blur'}
177 |                     ],
178 |                     checkPass: [
179 |                         {validator: validatePass2, trigger: 'blur'}
180 |                     ],
181 |                 },
182 |             }
183 |         },
184 |         methods: {
185 |             handleCurrentChange(val) {
186 |                 this.currentPage = val;
187 |                 this.getUsers(this.currentPage);
188 |             },
189 | 
190 |             //名字查询
191 |             name_Search(){
192 |                 this.currentPage = 1;
193 |                 this.getUsers();
194 |             },
195 | 
196 |             //刷新操作
197 |             refresh(){
198 |                 this.getUsers(this.currentPage);
199 |             },
200 | 
201 |             //获取用户列表
202 |             getUsers(page, callback) {
203 |                 if (!page) page = 1;
204 |                 if (!callback) callback = this.updateRoleName;
205 |                 this.listLoading = true;
206 |                 this.$http.get('/api/account/users/', {
207 |                     params: {
208 |                         page: page,
209 |                         name: this.filters.name
210 |                     }
211 |                 }).then((response) => {
212 |                     this.tableData = response.result;
213 |                     if (callback) callback(this)
214 |                 }, (response) => this.$layer_message(response.result)).finally(() => this.listLoading = false)
215 |             },
216 | 
217 |             // 更新角色名称
218 |             updateRoleName(that) {
219 |                 for (let user of that.tableData.data) {
220 |                     if (that.roles_map.hasOwnProperty(user.role_id)) {
221 |                         that.$set(user, 'role_name', that.roles_map[user.role_id]['name'])
222 |                     }
223 |                 }
224 |             },
225 | 
226 |             //显示添加界面
227 |             handleAdd: function () {
228 |                 this.is_disabled = false;
229 |                 this.dialogShow = true;
230 |                 this.editFormTitle = '添加用户';
231 |                 this.display = 'display:block';
232 |                 this.editForm = this.addForm;
233 |             },
234 | 
235 |             //显示编辑界面
236 |             handleEdit: function (index, row) {
237 |                 this.is_disabled = true;
238 |                 this.dialogShow = true;
239 |                 this.editFormTitle = '编辑用户';
240 |                 this.display = 'display:none';
241 |                 //this.editForm = Object.assign({}, row);
242 |                 this.editForm = this.$deepCopy(row);
243 |             },
244 | 
245 |             //禁/启 用用户
246 |             handleDisable: function (index, row) {
247 |                 if (row.is_active) {
248 |                     var res = "禁用";
249 |                 } else {
250 |                     var res = "启用";
251 |                 }
252 |                 this.$confirm('确认' + res + '吗?', '警告', {
253 |                     type: 'warning'
254 |                 }).then(() => {
255 |                     this.btnDelLoading = {[row.id]: true}
256 |                     this.editForm = row;
257 |                     this.editForm.is_active = ! row.is_active;
258 |                     this.EditData(row, res + '成功', '');
259 |                 }).catch(() => {
260 |                 });
261 |             },
262 | 
263 |             //重置密码
264 |             RestPwd: function (index, row) {
265 |                 this.$confirm('确认重置吗?', '提示', {
266 |                     type: 'warning'
267 |                 }).then(() => {
268 |                     this.listLoading = true;
269 |                     this.editForm = row;
270 |                     this.editForm.password = 'Password';
271 |                     this.EditData(row, '默认密码: ', 'Password');
272 |                 }).catch(() => {
273 |                 });
274 |             },
275 | 
276 |             EditData: function (row, msg, pwd) {
277 |                 this.$http.put(`/api/account/users/${row.id}`, this.editForm).then(response => {
278 |                     this.listLoading = false;
279 |                     this.$layer_message(msg + pwd, 'success');
280 |                     this.getUsers(this.currentPage);
281 |                 }, response => this.$layer_message(response.result)).finally(() => this.btnDelLoading = {});
282 |             },
283 | 
284 |             editSubmit: function () {
285 |                 this.$refs.editForm.validate((valid) => {
286 |                     if (valid) {
287 |                         this.editLoading = true;
288 |                         this.error = '';
289 |                         if (this.editForm.id) {
290 |                             this.$http.put(`/api/account/users/${this.editForm.id}`, this.editForm).then(this.resp,
291 |                                 response => this.$layer_message(response.result)).finally(() => this.editLoading = false)
292 |                         } else {
293 |                             this.$http.post('/api/account/users/', this.editForm).then(this.resp,
294 |                                 response => this.$layer_message(response.result)).finally(() => this.editLoading = false)
295 |                         }
296 |                     }
297 |                 });
298 |             },
299 |             resp: function (response) {
300 |                 this.editLoading = false;
301 |                 this.$layer_message('提交成功', 'success');
302 |                 this.editForm = {};
303 |                 this.addForm = {role_id: ''};
304 |                 this.dialogShow = false;
305 |                 this.getUsers(this.currentPage);
306 |             }
307 |         },
308 |         mounted() {
309 |             this.getUsers(1, function (that) {
310 |                 that.$http.get('/api/account/roles/').then(res => {
311 |                     that.roles = res.result;
312 |                     that.roles.forEach(item => that.roles_map[item.id] = item);
313 |                     that.updateRoleName(that)
314 |                 }, res => that.$layer_message(res.result))
315 |             });
316 |         }
317 |     }
318 | </script>
319 | 


--------------------------------------------------------------------------------
/src/assets/styles/font-awesome.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 |  */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
5 | 


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