├── static
    ├── .gitkeep
    └── che.ico
├── doc
    └── 项目环境搭建步骤.doc
├── src
    ├── assets
    │   ├── logo.png
    │   ├── images
    │   │   ├── card.jpg
    │   │   ├── not_found.png
    │   │   ├── totalnumber.jpg
    │   │   └── downloadcode.png
    │   ├── fonts
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.ttf
    │   │   ├── iconfont.woff
    │   │   └── iconfont.svg
    │   ├── iconfont.css
    │   └── css
    │   │   └── style.css
    ├── views
    │   ├── workbench
    │   │   ├── mySettings.vue
    │   │   ├── maillist.vue
    │   │   ├── mission
    │   │   │   ├── detail.vue
    │   │   │   ├── add.vue
    │   │   │   └── mission.vue
    │   │   ├── dashboard.vue
    │   │   └── plan.vue
    │   ├── enterprise
    │   │   ├── detail.vue
    │   │   ├── update.vue
    │   │   ├── validate.vue
    │   │   ├── add.vue
    │   │   └── index.vue
    │   ├── customer
    │   │   └── index.vue
    │   ├── partner
    │   │   └── index.vue
    │   ├── vehicle
    │   │   └── index.vue
    │   ├── dept
    │   │   └── index.vue
    │   ├── home.vue
    │   └── login.vue
    ├── road.js
    ├── app.vue
    ├── api
    │   ├── env.js
    │   ├── api_enterprise.js
    │   ├── api_user.js
    │   └── index.js
    ├── common
    │   └── util.js
    ├── components
    │   ├── 404.vue
    │   └── nav
    │   │   └── leftNav.vue
    ├── store.js
    ├── main.js
    └── router
    │   └── index.js
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── README.md
├── index.html
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/static/che.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/static/che.ico


--------------------------------------------------------------------------------
/doc/项目环境搭建步骤.doc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/doc/项目环境搭建步骤.doc


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/views/workbench/mySettings.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view></router-view>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/assets/images/card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/images/card.jpg


--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/fonts/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/fonts/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/fonts/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/images/not_found.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/images/not_found.png


--------------------------------------------------------------------------------
/src/assets/images/totalnumber.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/images/totalnumber.jpg


--------------------------------------------------------------------------------
/src/assets/images/downloadcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yqrong/ccproject/HEAD/src/assets/images/downloadcode.png


--------------------------------------------------------------------------------
/src/road.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by yqr on 2018/4/13.
3 |  */
4 | import Vue from 'vue'
5 | 
6 | export let road = new Vue()
7 | 


--------------------------------------------------------------------------------
/src/views/enterprise/detail.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="warp-main">
3 |     <el-button type="primary" icon="el-icon-edit">详情</el-button>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/workbench/maillist.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="warp-main">
3 |     <el-button type="primary" icon="el-icon-edit">通讯录</el-button>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 |   export default {
 8 |     name: 'app'
 9 |   }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/api/env.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by yqr on 2018/4/13.
 3 |  * 设置api请求的baseURL
 4 |  * 实际项目中建议该文件不纳入版本管理
 5 |  */
 6 | export default {
 7 |   baseURL: 'http://localhost:8090',
 8 |   isDev: true
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | package-lock.json
16 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/api/api_enterprise.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by yqr on 2018/4/13.
 3 |  */
 4 | import * as API from './'
 5 | 
 6 | export default {
 7 |   //查询列表
 8 |   findList: params => {
 9 |     return API.GET('/json', params)
10 |   },
11 |   findById: id => {
12 |     return API.GET(`/api/enterprise/list/${id}`)
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/common/util.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by yqr on 2018/4/25.
 3 |  */
 4 | var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
 5 | 
 6 | export default {
 7 |   checkTel: {
 8 |     validateTel: function(tel){
 9 |       if(TEL_REGEXP.test(tel)){
10 |         return true;
11 |       }
12 |       return false;
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/api/api_user.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by yqr on 2018/4/13.
 3 |  */
 4 | import * as API from './'
 5 | 
 6 | export default {
 7 |   //登录
 8 |   login: params => {
 9 | 	return "success";
10 |     //return API.POST('/api/users/login', params)
11 |   },
12 |   //登出
13 |   logout: params => {
14 |     return "success";
15 |     //return API.GET('/api/users/logout', params)
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/views/customer/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="warp-main">
 3 |     <el-button type="primary" icon="el-icon-edit" @click="clickShow">客户查看</el-button>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 |   export default {
 8 |     data: function(){
 9 |       return {
10 |         message: 'Hello Vue'
11 |       };
12 |     },
13 |     methods: {
14 |       clickShow: function(){
15 |         alert('显示');
16 |       }
17 |     }
18 |   }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/views/partner/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="warp-main">
 3 |     <el-button type="primary" icon="el-icon-edit" @click="clickShow">伙伴查看</el-button>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 |   export default {
 8 |     data: function(){
 9 |       return {
10 |         message: 'Hello Vue'
11 |       };
12 |     },
13 |     methods: {
14 |       clickShow: function(){
15 |         alert('显示');
16 |       }
17 |     }
18 |   }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/views/vehicle/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="warp-main">
 3 |     <el-button type="primary" icon="el-icon-edit" @click="clickShow">车辆查看</el-button>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 |   export default {
 8 |     data: function(){
 9 |       return {
10 |         message: 'Hello Vue'
11 |       };
12 |     },
13 |     methods: {
14 |       clickShow: function(){
15 |         alert('显示');
16 |       }
17 |     }
18 |   }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vvproject
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | # vvproject
23 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <link rel="icon" type="image/png" sizes="196x196" href="static/che.ico">
 7 |     <title>车车综合管理</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |     <!-- [if lt IE 9]>
13 |     <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
14 |     <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
15 |     <![endif]-->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/enterprise/update.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="warp-main">
 3 |     <div>
 4 |       <el-button @click="startHacking">Start</el-button>
 5 |     </div>
 6 |     <el-button type="primary" icon="el-icon-edit">保存</el-button>
 7 |   </div>
 8 | </template>
 9 | <script>
10 |   export default{
11 |     data (){
12 |       return {
13 |         message: 'hello vue'
14 |       };
15 |     },
16 |     methods: {
17 |       startHacking () {
18 |         this.$notify({
19 |           title: 'It works!',
20 |           type: 'success',
21 |           message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
22 |           duration: 5000
23 |         })
24 |       }
25 |     }
26 |   }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/components/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="context">
 3 |     <img src="../assets/images/not_found.png">
 4 |     <p>您访问的页面不存在...</p>
 5 |     <div>
 6 |       <router-link :to="{path: '/'}"><el-button type="primary" plain>返回首页</el-button></router-link>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | <style>
11 |   html,body {
12 |     height: 100%;
13 |   }
14 |   #app {
15 |     height: 100%;
16 |     margin-top: 0;
17 |   }
18 |   .context {
19 |     position: absolute;
20 |     top: 20%;
21 |     width: 100%;
22 |     text-align: center;
23 |   }
24 |   .context img {
25 |     max-width: 100%;
26 |     max-height: 100%;
27 |   }
28 |   .context p {
29 |     margin: 20px;
30 |     font-size: 16px;
31 |     color: #0d3349;
32 |   }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by yqr on 2018/3/26.
 3 |  */
 4 | import Vue from 'vue'
 5 | import Vuex from 'vuex'
 6 | 
 7 | Vue.use(Vuex)
 8 | 
 9 | /*测试数据*/
10 | const date = 'Mon Mar 24 2018 00:00:00 GMT+0800 (中国标准时间)'
11 | const data = [
12 |   {
13 |     id: '1111',
14 |     name: 'Allen',
15 |     type: '员工',
16 |     status: '已离职'
17 |   },{
18 |     id: '2222',
19 |     name: 'Thomas',
20 |     type: '司机',
21 |     status: '在职'
22 |   }
23 | ]
24 | 
25 | const state = {
26 |   collapsed: false,
27 |   topNavState: 'home',
28 |   leftNavState: 'home'
29 | }
30 | 
31 | /*从本地存储读取数据*/
32 | for(var item in state) {
33 |   localStorage.getItem(item)? state[item] = JSON.parse(localStorage.getItem(item)): false;
34 | }
35 | 
36 | export default new Vuex.Store({
37 |   state
38 | })
39 | 


--------------------------------------------------------------------------------
/src/assets/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('fonts/iconfont.eot?t=1524894158375'); /* IE9*/
 4 |   src: url('fonts/iconfont.eot?t=1524894158375#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('fonts/iconfont.woff?t=1524894158375') format('woff'),
 6 |   url('fonts/iconfont.ttf?t=1524894158375') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('fonts/iconfont.svg?t=1524894158375#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-home:before { content: "\e626"; }
19 | 
20 | .icon-user:before { content: "\ec52"; }
21 | 
22 | .icon-indent:before { content: "\e62b"; }
23 | 
24 | .icon-outdent:before { content: "\e62c"; }
25 | 
26 | .icon-caret-down:before { content: "\e631"; }
27 | 
28 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import ElementUI from 'element-ui'
 7 | 
 8 | import store from './store.js'
 9 | import 'element-ui/lib/theme-chalk/index.css'
10 | import '@/assets/iconfont.css'
11 | import '@/assets/css/style.css'
12 | 
13 | Vue.config.productionTip = false
14 | Vue.use(ElementUI)
15 | 
16 | Vue.component('footer-copyright', {
17 |   template: '<p class="footer-msg">©CopyRight 2016-2018 车车科技发展有限公司 版权所有 <a href="http://www.miibeian.gov.cn" target="_blank">粤ICP备******号</a></p>'
18 | });
19 | 
20 | Vue.filter('formatDateTime', function (value) {
21 |   if (!value) return ''
22 |   let date = new Date(value);
23 |   let y = date.getFullYear() + '/';
24 |   let mon = (date.getMonth() + 1) + '/';
25 |   let d = date.getDate();
26 |   return y + mon + d;
27 | });
28 | 
29 | new Vue({
30 |   router,
31 |   store,
32 |   el: '#app',
33 |   render: h => h(App)
34 | })
35 | 


--------------------------------------------------------------------------------
/src/views/enterprise/validate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="warp-main">
 3 |     <p>企业认证</p>
 4 | 
 5 |     <el-upload class="avatar-uploader" name="avatar" action="/upload" :data="uploadData" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
 6 |       <img v-if="imageUrl" :src="imageUrl" class="avatar">
 7 |       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 8 |     </el-upload>
 9 |     <el-button type="primary" icon="el-icon-edit">认证</el-button>
10 |   </div>
11 | </template>
12 | <style>
13 |   .avatar-uploader .el-upload {
14 |     border: 1px dashed #d9d9d9;
15 |     border-radius: 6px;
16 |     cursor: pointer;
17 |     position: relative;
18 |     overflow: hidden;
19 |   }
20 |   .avatar-uploader .el-upload:hover {
21 |     border-color: #409EFF;
22 |   }
23 |   .avatar-uploader-icon {
24 |     font-size: 28px;
25 |     color: #8c939d;
26 |     width: 178px;
27 |     height: 178px;
28 |     line-height: 178px !important;
29 |     text-align: center;
30 |   }
31 |   .avatar {
32 |     width: 178px;
33 |     height: 178px;
34 |     display: block;
35 |   }
36 | </style>
37 | <script>
38 |   export default {
39 |     data(){
40 |       return {
41 |         imageUrl: '',
42 |         uploadData: { //上传文件时要上传的额外参数
43 |           userId: 'U0001',
44 |           userName: 'admin'
45 |         }
46 |       };
47 |     },
48 |     methods: {
49 |       handleAvatarSuccess(res, file){
50 |         this.imageUrl = URL.createObjectURL(file.raw);
51 |       },
52 |       beforeAvatarUpload(file) {
53 |         const isJPG = file.type === 'image/jpeg';
54 |         const isLt2M = file.size / 1024 / 1024 < 2;
55 |         if(!isJPG){
56 |           this.$message.error('上传图片只能是jpg格式！');
57 |         }
58 |         if(!isLt2M){
59 |           this.$message.error('上传图片不能超过2M');
60 |         }
61 |         return isJPG && isLt2M;
62 |       }
63 |     }
64 |   }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by yqr on 2018/4/13.
 3 |  */
 4 | import Env from './env';
 5 | import axios from 'axios'
 6 | import {road} from '../road.js'
 7 | import routerIndex from '../router/index'
 8 | 
 9 | axios.defaults.withCredentials = false;
10 | // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
11 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头
12 | axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头
13 | 
14 | //添加一个请求拦截器
15 | axios.interceptors.request.use(function (config) {
16 |   //console.dir(config);
17 |   return config;
18 | }, function (error) {
19 |   // Do something with request error
20 |   return Promise.reject(error);
21 | });
22 | 
23 | // 添加一个响应拦截器
24 | axios.interceptors.response.use(function (response) {
25 |   if (response.data && response.data.errcode) {
26 |     if (parseInt(response.data.errcode) === 40001) {
27 |       //未登录
28 |       road.$message.error('请重新登录');
29 |       routerIndex.push('/login');
30 |     }
31 |   }
32 |   return response;
33 | }, function (error) {
34 |   // Do something with response error
35 |   return Promise.reject(error);
36 | });
37 | 
38 | //基地址
39 | let base = Env.baseURL;
40 | 
41 | //测试使用
42 | export const ISDEV = Env.isDev;
43 | 
44 | //通用方法
45 | export const POST = (url, params) => {
46 |   return axios.post(`${base}${url}`, params).then(res => res.data)
47 | }
48 | 
49 | export const GET = (url, params) => {
50 |   return axios.get(`${base}${url}`, {params: params}).then(res => res.data)
51 | }
52 | 
53 | export const PUT = (url, params) => {
54 |   return axios.put(`${base}${url}`, params).then(res => res.data)
55 | }
56 | 
57 | export const DELETE = (url, params) => {
58 |   return axios.delete(`${base}${url}`, {params: params}).then(res => res.data)
59 | }
60 | 
61 | export const PATCH = (url, params) => {
62 |   return axios.patch(`${base}${url}`, params).then(res => res.data)
63 | }
64 | 


--------------------------------------------------------------------------------
/src/views/dept/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
 3 |     <el-table-column type="selection" width="55"></el-table-column>
 4 |     <el-table-column prop="date" label="日期" width="120"></el-table-column>
 5 |     <el-table-column prop="name" label="姓名" width="120"></el-table-column>
 6 |     <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
 7 |   </el-table>
 8 | </template>
 9 | 
10 | <script>
11 |   export default {
12 |     data() {
13 |       return {
14 |         tableData3: [{
15 |           date: '2016-05-03',
16 |           name: '王小虎',
17 |           address: '上海市普陀区金沙江路 1518 弄'
18 |         }, {
19 |           date: '2016-05-02',
20 |           name: '王小虎',
21 |           address: '上海市普陀区金沙江路 1518 弄'
22 |         }, {
23 |           date: '2016-05-04',
24 |           name: '王小虎',
25 |           address: '上海市普陀区金沙江路 1518 弄'
26 |         }, {
27 |           date: '2016-05-01',
28 |           name: '王小虎',
29 |           address: '上海市普陀区金沙江路 1518 弄'
30 |         }, {
31 |           date: '2016-05-08',
32 |           name: '王小虎',
33 |           address: '上海市普陀区金沙江路 1518 弄'
34 |         }, {
35 |           date: '2016-05-06',
36 |           name: '王小虎',
37 |           address: '上海市普陀区金沙江路 1518 弄'
38 |         }, {
39 |           date: '2016-05-07',
40 |           name: '王小虎',
41 |           address: '上海市普陀区金沙江路 1518 弄'
42 |         }],
43 |         multipleSelection: []
44 |       }
45 |     },
46 | 
47 |     methods: {
48 |       toggleSelection(rows) {
49 |         if (rows) {
50 |           rows.forEach(row => {
51 |             this.$refs.multipleTable.toggleRowSelection(row);
52 |           });
53 |         } else {
54 |           this.$refs.multipleTable.clearSelection();
55 |         }
56 |       },
57 |       handleSelectionChange(val) {
58 |         this.multipleSelection = val;
59 |       }
60 |     }
61 |   }
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/views/workbench/mission/detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list-content">
 3 |     <h3>任务详情</h3>
 4 |     <ul>
 5 |       <li><span>任务编号:</span><div>{{detail.number}}</div></li>
 6 |       <li><span>任务类型:</span><div>{{detail.type}}</div></li>
 7 |       <li><span>任务内容:</span><div>{{detail.content | contentFilter}}</div></li>
 8 |       <li><span>任务备注:</span><div>{{detail.remark}}</div></li>
 9 |       <li><span>创建日期:</span><div>{{detail.createTime | formatDateTime}}</div></li>
10 |       <li><span>执行日期:</span><div>{{detail.activeTime | formatDateTime}}</div></li>
11 |     </ul>
12 |   </div>
13 | </template>
14 | <script>
15 |   export default {
16 |     props: {
17 |       id: {
18 |         type: Number,
19 |         default: 0
20 |       }
21 |     },
22 |     data() {
23 |       return {
24 |         loading: false,
25 |         detail: null, // 详情
26 |       }
27 |     },
28 |     created() {
29 |       this.initInfo();
30 |     },
31 |     methods: {
32 |       initInfo() {
33 |         this.loading = true;
34 |         console.info(this.id);
35 |         // 查询详情
36 |         // ...
37 |         this.detail = {
38 |           id: 1,
39 |           number: 'No.00001',
40 |           type: '接收任务',
41 |           content: '1',
42 |           remark: '任务备注。。。',
43 |           createTime: 1540560471000,
44 |           activeTime: 1540890471000,
45 |         };
46 |         this.loading = false;
47 |       }
48 |     },
49 |     filters: {
50 |       contentFilter: function (value) {
51 |         if (!value) return ''
52 |         if (value == '1') return '接乘客'
53 |         return '派车辆';
54 |       }
55 |     }
56 |   }
57 | </script>
58 | <style lang="scss" scoped>
59 |   .list-content {
60 |     h3 {
61 |       padding: 10px;
62 |       border-bottom: 1px solid #eee;
63 |     }
64 |     ul {
65 |       padding: 10px;
66 |       li {
67 |         position: relative;
68 |         line-height: 40px;
69 |         min-height: 40px;
70 |         span {
71 |           position: absolute;
72 |           left: 0;
73 |           display: inline-block;
74 |           width: 90px;
75 |           color: #999;
76 |         }
77 |         & > div {
78 |           margin-left: 90px;
79 |         }
80 |       }
81 |     }
82 |   }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vvproject",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Lena",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.18.0",
14 |     "babel-polyfill": "^6.26.0",
15 |     "echarts": "^4.0.4",
16 |     "element-ui": "^2.4.11",
17 |     "vue": "^2.5.2",
18 |     "vue-router": "^3.0.1",
19 |     "vuex": "^3.0.1"
20 |   },
21 |   "devDependencies": {
22 |     "autoprefixer": "^7.1.2",
23 |     "babel-core": "^6.22.1",
24 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
25 |     "babel-loader": "^7.1.1",
26 |     "babel-plugin-syntax-jsx": "^6.18.0",
27 |     "babel-plugin-transform-runtime": "^6.22.0",
28 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
29 |     "babel-preset-env": "^1.3.2",
30 |     "babel-preset-stage-2": "^6.22.0",
31 |     "chalk": "^2.0.1",
32 |     "copy-webpack-plugin": "^4.0.1",
33 |     "css-loader": "^0.28.0",
34 |     "extract-text-webpack-plugin": "^3.0.0",
35 |     "file-loader": "^1.1.4",
36 |     "friendly-errors-webpack-plugin": "^1.6.1",
37 |     "html-webpack-plugin": "^2.30.1",
38 |     "node-notifier": "^5.1.2",
39 |     "node-sass": "^4.9.0",
40 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
41 |     "ora": "^1.2.0",
42 |     "portfinder": "^1.0.13",
43 |     "postcss-import": "^11.0.0",
44 |     "postcss-loader": "^2.0.8",
45 |     "postcss-url": "^7.2.1",
46 |     "rimraf": "^2.6.0",
47 |     "sass-loader": "^7.0.1",
48 |     "semver": "^5.3.0",
49 |     "shelljs": "^0.7.6",
50 |     "uglifyjs-webpack-plugin": "^1.1.1",
51 |     "url-loader": "^0.5.8",
52 |     "vue-loader": "^13.3.0",
53 |     "vue-style-loader": "^3.0.1",
54 |     "vue-template-compiler": "^2.5.2",
55 |     "webpack": "^3.6.0",
56 |     "webpack-bundle-analyzer": "^2.9.0",
57 |     "webpack-dev-server": "^2.9.1",
58 |     "webpack-merge": "^4.1.0"
59 |   },
60 |   "engines": {
61 |     "node": ">= 6.0.0",
62 |     "npm": ">= 3.0.0"
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions",
67 |     "not ie <= 8"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/src/views/enterprise/add.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="warp-main">
 3 |     <p style="margin-bottom: 20px; font-weight: 500;">添加企业</p>
 4 |     <el-form ref="form" :model="form" label-width="110px">
 5 |       <el-col :span="12">
 6 |         <el-form-item label="企业编号：">
 7 |           <el-input v-model="form.number" placeholder="请输入企业编号"></el-input>
 8 |         </el-form-item>
 9 |         <el-form-item label="所属行业：">
10 |           <el-select v-model="form.industry" placeholder="请选择所属行业">
11 |             <el-option label="请选择所属行业" value="-1"></el-option>
12 |             <el-option label="金融业" value="1"></el-option>
13 |             <el-option label="IT业" value="2"></el-option>
14 |             <el-option label="工业" value="3"></el-option>
15 |             <el-option label="农林牧渔业" value="4"></el-option>
16 |           </el-select>
17 |         </el-form-item>
18 |         <el-form-item label="经营范围：">
19 |           <el-checkbox-group v-model="form.range">
20 |             <el-checkbox label="娱乐" name="range"></el-checkbox>
21 |             <el-checkbox label="教育" name="range"></el-checkbox>
22 |             <el-checkbox label="商业" name="range"></el-checkbox>
23 |             <el-checkbox label="工业" name="range"></el-checkbox>
24 |           </el-checkbox-group>
25 |         </el-form-item>
26 |       </el-col>
27 |       <el-col :span="12">
28 |         <el-form-item label="企业名称：">
29 |           <el-input v-model="form.name" placeholder="请输入企业名称"></el-input>
30 |         </el-form-item>
31 |         <el-form-item label="经营模式：">
32 |           <el-radio-group v-model="form.model">
33 |             <el-radio label="国有企业"></el-radio>
34 |             <el-radio label="民营企业"></el-radio>
35 |           </el-radio-group>
36 |         </el-form-item>
37 |         <el-form-item label="注册日期：">
38 |           <el-date-picker v-model="form.regDate" type="date" placeholder="选择日期"></el-date-picker>
39 |         </el-form-item>
40 |       </el-col>
41 |       <el-col :span="24">
42 |         <el-button type="primary" icon="el-icon-edit">保存添加</el-button>
43 |       </el-col>
44 |     </el-form>
45 |   </div>
46 | </template>
47 | <script>
48 |   export default {
49 |     data(){
50 |       return {
51 |         msg:'',
52 |         form: {
53 |           number: '',
54 |           name: '',
55 |           industry: '',
56 |           model: '国有企业',
57 |           range: [],
58 |           regDate: ''
59 |         }
60 |       };
61 |     }
62 |   }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {
14 |       // '/api': {
15 |       //   target: 'http://localhost:8080',//设置你调用的接口域名和端口号 别忘了加http
16 |       //   changeOrigin: true,
17 |       //   pathRewrite: {
18 |       //     '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
19 |       //   }
20 |       // }
21 |     },
22 | 
23 |     // Various Dev Server settings
24 |     host: 'localhost', // can be overwritten by process.env.HOST
25 |     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
26 |     autoOpenBrowser: false,
27 |     errorOverlay: true,
28 |     notifyOnErrors: true,
29 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
30 | 
31 | 
32 |     /**
33 |      * Source Maps
34 |      */
35 | 
36 |     // https://webpack.js.org/configuration/devtool/#development
37 |     devtool: 'cheap-module-eval-source-map',
38 | 
39 |     // If you have problems debugging vue-files in devtools,
40 |     // set this to false - it *may* help
41 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
42 |     cacheBusting: true,
43 | 
44 |     cssSourceMap: true
45 |   },
46 | 
47 |   build: {
48 |     // Template for index.html
49 |     index: path.resolve(__dirname, '../dist/index.html'),
50 | 
51 |     // Paths
52 |     assetsRoot: path.resolve(__dirname, '../dist'),
53 |     assetsSubDirectory: 'static',
54 |     assetsPublicPath: './',
55 | 
56 |     /**
57 |      * Source Maps
58 |      */
59 | 
60 |     productionSourceMap: true,
61 |     // https://webpack.js.org/configuration/devtool/#production
62 |     devtool: '#source-map',
63 | 
64 |     // Gzip off by default as many popular static hosts such as
65 |     // Surge or Netlify already gzip all static assets for you.
66 |     // Before setting to `true`, make sure to:
67 |     // npm install --save-dev compression-webpack-plugin
68 |     productionGzip: false,
69 |     productionGzipExtensions: ['js', 'css'],
70 | 
71 |     // Run the build command with an extra argument to
72 |     // View the bundle analyzer report after build finishes:
73 |     // `npm run build --report`
74 |     // Set to `true` or `false` to always turn it on or off
75 |     bundleAnalyzerReport: process.env.npm_config_report
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/views/workbench/mission/add.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog title="任务添加"
 3 |              :visible.sync="visible"
 4 |              :close-on-press-escape="false"
 5 |              :close-on-click-modal="false"
 6 |              :before-close="handleClose">
 7 |     <el-form :model="form">
 8 |       <el-form-item label="任务编号：" :label-width="formLabelWidth">
 9 |         <el-input v-model="form.number" placeholder="请输入任务编号" auto-complete="off"></el-input>
10 |       </el-form-item>
11 |       <el-form-item label="任务类型：" :label-width="formLabelWidth">
12 |         <el-select v-model="form.type" placeholder="请选择任务类型">
13 |           <el-option label="接收任务" value="接收任务"></el-option>
14 |           <el-option label="转发任务" value="转发任务"></el-option>
15 |         </el-select>
16 |       </el-form-item>
17 |       <el-form-item label="任务内容：" :label-width="formLabelWidth">
18 |         <el-radio-group v-model="form.content">
19 |           <el-radio label="1">接乘客</el-radio>
20 |           <el-radio label="2">派车辆</el-radio>
21 |         </el-radio-group>
22 |       </el-form-item>
23 |       <el-form-item label="任务备注：" :label-width="formLabelWidth">
24 |         <el-input v-model="form.remark" type="textarea" placeholder="请填写任务备注"></el-input>
25 |       </el-form-item>
26 |       <el-form-item label="创建日期：" :label-width="formLabelWidth">
27 |         <el-date-picker v-model="form.createTime" type="date" placeholder="请选择日期" disabled></el-date-picker>
28 |       </el-form-item>
29 |       <el-form-item label="执行日期：" :label-width="formLabelWidth">
30 |         <el-date-picker v-model="form.activeTime" type="date" placeholder="请选择日期"></el-date-picker>
31 |       </el-form-item>
32 |     </el-form>
33 |     <div slot="footer" class="dialog-footer">
34 |       <el-button @click.native="handleClose">取消</el-button>
35 |       <el-button type="primary" @click.native="editFormSubmit">提交</el-button>
36 |     </div>
37 |   </el-dialog>
38 | </template>
39 | <script>
40 |   export default {
41 |     props: {
42 |       visible: {
43 |         type: Boolean,
44 |         default: false
45 |       }
46 |     },
47 |     data() {
48 |       return {
49 |         form: {
50 |           number: '',
51 |           type: '',
52 |           content: '1',
53 |           remark: '',
54 |           createTime: new Date(),
55 |           activeTime: ''
56 |         },
57 |         formLabelWidth: '120px',
58 |       }
59 |     },
60 |     methods: {
61 |       editFormSubmit() {
62 |         this.$message.success("保存提示");
63 |       },
64 |       // 关闭
65 |       handleClose() {
66 |         this.$emit('update:visible', false);
67 |       }
68 |     }
69 |   }
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/components/nav/leftNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-col :span="24" class="main">
 3 |     <!--左侧导航-->
 4 |     <aside :class="{showSidebar:!collapsed}">
 5 |       <!--展开折叠开关-->
 6 |       <div class="menu-toggle" @click.prevent="collapse">
 7 |         <i class="iconfont icon-outdent" v-show="!collapsed" title="收起"></i>
 8 |         <i class="iconfont icon-indent" v-show="collapsed" title="展开"></i>
 9 |       </div>
10 |       <!--导航菜单-->
11 |       <el-menu :default-active="$route.path" router :collapse="collapsed" ref="leftNavigation">
12 |         <template v-for="(issue,index) in $router.options.routes">
13 |           <template v-if="issue.name === $store.state.leftNavState"><!-- 注意：这里就是leftNavState状态作用之处，当该值与router的根路由的name相等时加载相应菜单组 -->
14 |             <template v-for="(item,index) in issue.children">
15 |               <el-submenu v-if="!item.leaf" :index="index+''" v-show="item.menuShow">
16 |                 <template slot="title"><i :class="item.iconCls"></i><span slot="title">{{item.name}}</span></template>
17 |                 <el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow"
18 |                               :class="$route.path==term.path?'is-active':''">
19 |                   <i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
20 |                 </el-menu-item>
21 |               </el-submenu>
22 |               <el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path"
23 |                             :class="$route.path==item.children[0].path?'is-active':''" v-show="item.menuShow">
24 |                 <i :class="item.iconCls"></i><span slot="title">{{item.children[0].name}}</span>
25 |               </el-menu-item>
26 |             </template>
27 |           </template>
28 |         </template>
29 |       </el-menu>
30 |     </aside>
31 |     <!--右侧内容区-->
32 |     <section class="content-container">
33 |       <div class="grid-content bg-purple-light">
34 |         <el-col :span="24" class="content-wrapper">
35 |           <transition name="fade" mode="out-in">
36 |             <router-view></router-view>
37 |           </transition>
38 |         </el-col>
39 |       </div>
40 |     </section>
41 |   </el-col>
42 | </template>
43 | <script>
44 |   export default {
45 |     name: 'leftNav',
46 |     data () {
47 |       return {
48 |         collapsed: this.$store.state.collapsed
49 |       }
50 |     },
51 |     methods: {
52 |       //折叠导航栏
53 |       collapse: function () {
54 |         this.collapsed = !this.collapsed;
55 |         this.$store.state.collapsed = this.collapsed;
56 |       },
57 |       // 左侧导航栏根据当前路径默认打开子菜单（如果当前路由是三级，则二级子菜单默认打开）
58 |       defaultLeftNavOpened () {
59 |         let cur_path = this.$route.path; //获取当前路由
60 |         let routers = this.$router.options.routes; // 获取路由对象
61 |         let subMenuIndex = 0, needOpenSubmenu = false;
62 |         for (let i = 0; i < routers.length; i++) {
63 |           let children = routers[i].children;
64 |           if(children){
65 |             for (let j = 0; j < children.length; j++) {
66 |               if (children[j].path === cur_path) {
67 |                 break;
68 |               }
69 |               // 如果该菜单下有子菜单(个数>1且设置的leaf为false才有下拉子菜单)
70 |               if(children[j].children && !children[j].leaf) {
71 |                 let grandChildren = children[j].children;
72 |                 for(let z=0; z<grandChildren.length; z++) {
73 |                   if(grandChildren[z].path === cur_path) {
74 |                     subMenuIndex = j;
75 |                     needOpenSubmenu = true;
76 |                     break;
77 |                   }
78 |                 }
79 |               }
80 |             }
81 |           }
82 |         }
83 |         if(this.$refs['leftNavigation'] && needOpenSubmenu) {
84 |           this.$refs['leftNavigation'].open(subMenuIndex);
85 |         }
86 |       },
87 |     },
88 |     mounted() {
89 |       this.defaultLeftNavOpened();
90 |     }
91 |   }
92 | </script>
93 | 


--------------------------------------------------------------------------------
/src/views/enterprise/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="warp-main">
  3 |     <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
  4 |       <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
  5 |         <el-form :inline="true" :model="filters">
  6 |           <el-form-item>
  7 |             <el-input v-model="filters.name" placeholder="请输入企业名称" auto-complete="off" @keyup.enter.native="fetchData"></el-input>
  8 |           </el-form-item>
  9 |           <el-form-item>
 10 |             <el-button type="primary" size="medium" v-on:click="fetchData">查询</el-button>
 11 |           </el-form-item>
 12 |         </el-form>
 13 |       </el-col>
 14 |       <el-table ref="multipleTable" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
 15 |         <el-table-column type="selection" width="60"></el-table-column>
 16 |         <el-table-column prop="eNumber" label="企业编号" width="180" sortable></el-table-column>
 17 |         <el-table-column prop="eName" label="企业名称" show-overflow-tooltip></el-table-column>
 18 |         <el-table-column prop="eIndustry" label="所属行业" width="180"></el-table-column>
 19 |         <el-table-column prop="eRange" label="经营范围" width="180"></el-table-column>
 20 |         <el-table-column prop="eModel" label="经营模式" width="180"></el-table-column>
 21 |         <el-table-column prop="createTime" label="创建日期" width="180"></el-table-column>
 22 |         <el-table-column prop="updateTime" label="更新日期" width="180"></el-table-column>
 23 |         <el-table-column prop="recordStatus" label="企业状态" width="180"></el-table-column>
 24 |       </el-table>
 25 |       <!--<div style="margin-top: 20px">
 26 |         <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
 27 |         <el-button @click="toggleSelection()">取消选择</el-button>
 28 |       </div>-->
 29 |       <el-col :span="24" class="toolbar">
 30 |         <el-pagination background
 31 |           @size-change="handleSizeChange"
 32 |           @current-change="handleCurrentChange"
 33 |           :current-page="currentPage"
 34 |           :page-sizes="[10, 50, 100, 200]"
 35 |           :page-size="pageSize"
 36 |           layout="total, sizes, prev, pager, next, jumper"
 37 |           :total="total">
 38 |         </el-pagination>
 39 |       </el-col>
 40 |     </el-col>
 41 |   </div>
 42 | </template>
 43 | <script>
 44 |   import API from '../../api/api_enterprise'
 45 |   export default {
 46 |     data() {
 47 |       return {
 48 |         loading: false,
 49 |         keyword: "集团",
 50 |         total: 5,
 51 |         currentPage: 1,
 52 |         pageSize: 10,
 53 |         tableData: [{
 54 |           eNumber: 'A10001',
 55 |           eName: 'YE集团',
 56 |           eIndustry: '金融业',
 57 |           eRange: '商业',
 58 |           eModel: '国有企业',
 59 |           createTime: '2017-03-27',
 60 |           updateTime: '2016-03-27',
 61 |           recordStatus: '1'
 62 |         }],
 63 |         multipleSelection: [],
 64 |         filters: {
 65 |           name: ''
 66 |         }
 67 |       }
 68 |     },
 69 |     created: function(){
 70 |       // 组件创建完后获取数据，
 71 |       // 此时 data 已经被 observed 了
 72 |       //this.fetchData();  //调用接口获取动态数据
 73 | 
 74 |     },
 75 |     methods: {
 76 |       toggleSelection(rows) {
 77 |         if (rows) {
 78 |           rows.forEach(function(row) {
 79 |             this.$refs.multipleTable.toggleRowSelection(row);
 80 |         });
 81 |         } else {
 82 |           this.$refs.multipleTable.clearSelection();
 83 |         }
 84 |       },
 85 |       fetchData(){ //获取数据
 86 |         let that = this;
 87 |         let params = {
 88 |           curr: that.currentPage,
 89 |           pageSize: that.pageSize,
 90 |           keywords: that.filters.name
 91 |         };
 92 |         that.loading = true;
 93 |         API.findList(params).then(function(result){
 94 |           that.loading = false;
 95 |           that.total = result.count;
 96 |           that.currentPage = result.curr;
 97 |           that.tableData = result.data;
 98 |         }).catch(function (error) {
 99 |           that.loading = false;
100 |           console.log(error);
101 |         });
102 |       },
103 |       handleSizeChange(val){
104 |         this.pageSize = val;
105 |         this.currentPage = 1;
106 |         this.fetchData();
107 | //        console.log(`每页 ${val} 条`);
108 |       },
109 |       handleCurrentChange(val){
110 |         this.currentPage = val;
111 |         this.fetchData();
112 | //        console.log(`当前页: ${val}`);
113 |       },
114 |       handleSelectionChange(val) {
115 |         this.multipleSelection = val;
116 |       }
117 |     }
118 |   }
119 | </script>
120 | <style>
121 |   .el-table th {
122 |     text-align: center;
123 |   }
124 | 
125 |   .el-table tbody tr td:first-child {
126 |     text-align: center;
127 |   }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/views/workbench/dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-row class="wrap">
  3 |     <el-col :span="24" class="wrap-breadcrumb">
  4 |       <el-breadcrumb seporate="/">
  5 |         <el-breadcrumb-item :to="{ path: '/'}"><b>首页</b></el-breadcrumb-item>
  6 |       </el-breadcrumb>
  7 |       <el-col :span="24" class="wrap-main">
  8 |         <section class="chart-container">
  9 |           <el-row>
 10 |             <el-col :span="8">
 11 |               <el-card :body-style="{ padding: '0px'}">
 12 |                 <img src="../../assets/images/card.jpg">
 13 |                 <div style="padding: 12px;">
 14 |                   <span>标题</span>
 15 |                   <div class="bottom clearfix">
 16 |                     <time class="time">2018-14-19</time>
 17 |                   </div>
 18 |                 </div>
 19 |               </el-card>
 20 |             </el-col>
 21 |             <el-col :span="8">
 22 |               <el-card :body-style="{ padding: '0px'}">
 23 |                 <img src="../../assets/images/card.jpg">
 24 |                 <div style="padding: 12px;">
 25 |                   <span>标题</span>
 26 |                   <div class="bottom clearfix">
 27 |                     <time class="time">2018-14-19</time>
 28 |                   </div>
 29 |                 </div>
 30 |               </el-card>
 31 |             </el-col>
 32 |             <el-col :span="8">
 33 |               <el-card :body-style="{ padding: '0px'}">
 34 |                 <img src="../../assets/images/card.jpg">
 35 |                 <div style="padding: 12px;">
 36 |                   <span>标题</span>
 37 |                   <div class="bottom clearfix">
 38 |                     <time class="time">2018-14-19</time>
 39 |                   </div>
 40 |                 </div>
 41 |               </el-card>
 42 |             </el-col>
 43 |             <el-col :span="12">
 44 |               <div id="chartColumn" style="width: 100%; height: 400px;"></div>
 45 |             </el-col>
 46 |             <el-col :span="12">
 47 |               <div id="chartBar" style="width: 100%; height: 400px;"></div>
 48 |             </el-col>
 49 |             <el-col :span="12"></el-col>
 50 |             <el-col :span="12"></el-col>
 51 |             <el-col :span="24"></el-col>
 52 |           </el-row>
 53 |         </section>
 54 |       </el-col>
 55 |     </el-col>
 56 |   </el-row>
 57 | </template>
 58 | <style>
 59 |   .time {
 60 |     font-size: 13px;
 61 |     color: #999;
 62 |   }
 63 | 
 64 |   .bottom {
 65 |     margin-top: 13px;
 66 |     line-height: 12px;
 67 |   }
 68 | 
 69 |   .image {
 70 |     width: 100%;
 71 |     display: block;
 72 |   }
 73 | 
 74 |   .clearfix:before,
 75 |   .clearfix:after {
 76 |     display: table;
 77 |     content: "";
 78 |   }
 79 | 
 80 |   .clearfix:after {
 81 |     clear: both
 82 |   }
 83 | 
 84 |   .chart-container {
 85 |     width: 100%;
 86 |   }
 87 |   .chart-container .el-col {
 88 |     padding: 30px 20px;
 89 |   }
 90 | </style>
 91 | <script>
 92 |   import echarts from 'echarts'
 93 |   export default {
 94 |     name: 'dashboard',
 95 |     data(){
 96 |       return {
 97 |         chartColumn: null,
 98 |         chartBar: null
 99 |       }
100 |     },
101 |     mounted (){
102 |       this.drawShape();
103 |     },
104 |     methods: {
105 |       drawShape(){
106 |         this.chartColumn = echarts.init(document.getElementById('chartColumn'));
107 |         this.chartBar = echarts.init(document.getElementById('chartBar'));
108 | 
109 |         this.chartColumn.setOption({
110 |           title: { text: 'Column Chart' },
111 |           tooltip: {},
112 |           xAxis: {
113 |             type: 'category',
114 |             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
115 |           },
116 |           yAxis: {
117 |             type: 'value'
118 |           },
119 |           series: [{
120 |             data: [820, 932, 901, 934, 1290, 1330, 1320],
121 |             type: 'line'
122 |           }]
123 |         });
124 | 
125 |         this.chartBar.setOption({
126 |           color: ['#3398DB'],
127 |           tooltip : {
128 |             trigger: 'axis',
129 |             axisPointer : {            // 坐标轴指示器，坐标轴触发有效
130 |               type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
131 |             }
132 |           },
133 |           grid: {
134 |             left: '3%',
135 |             right: '4%',
136 |             bottom: '3%',
137 |             containLabel: true
138 |           },
139 |           xAxis : [
140 |             {
141 |               type : 'category',
142 |               data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
143 |               axisTick: {
144 |                 alignWithLabel: true
145 |               }
146 |             }
147 |           ],
148 |           yAxis : [
149 |             {
150 |               type : 'value'
151 |             }
152 |           ],
153 |           series : [
154 |             {
155 |               name:'直接访问',
156 |               type:'bar',
157 |               barWidth: '60%',
158 |               data:[10, 52, 200, 334, 390, 330, 220]
159 |             }
160 |           ]
161 |         });
162 |       }
163 |     }
164 |   }
165 | </script>
166 | 


--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="iconfont" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="iconfont"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
24 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
25 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
26 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
27 |     
28 | 
29 |     
30 |     <glyph glyph-name="home" unicode="&#58918;" d="M577.5584 504.151467l-21.345067 18.699733c-0.062933 0.061867-0.186667 0.123733-0.280533 0.186667l-44.305067 38.689067-53.752533-47.5648L127.009067 224.576l0-177.1392 0-155.0048c0-45.886933 37.454933-83.0976 83.610667-83.0976l183.966933 0L394.586667 76.1312c0 27.512533 22.448 49.8336 50.162133 49.8336l133.7728 0c27.714133 0 50.178133-22.321067 50.178133-49.8336L628.699733-190.666667l183.966933 0c46.170667 0 83.610667 37.211733 83.610667 83.0976L896.277333 48.0576 896.277333 225.2288 578.5216 503.312 577.5584 504.151467zM990.637867 393.835733l-94.360533 82.600533 0 181.290667c0 36.714667-29.952 66.482133-66.894933 66.482133-36.941867 0-66.893867-29.767467-66.893867-66.482133l0-64.197333L556.213333 774.088533c-25.291733 22.103467-63.165867 22.103467-88.4256 0L33.348267 393.835733c-27.730133-24.247467-30.402133-66.264533-5.9808-93.808 24.437333-27.544533 66.692267-30.219733 94.407467-5.938133L512 635.623467l390.2432-341.533867c12.7072-11.130667 28.4608-16.600533 44.181333-16.600533 18.549333 0 37.0048 7.617067 50.209067 22.538667C1021.054933 327.5872 1018.382933 369.5872 990.637867 393.835733z"  horiz-adv-x="1024" />
31 | 
32 |     
33 |     <glyph glyph-name="user" unicode="&#60498;" d="M914.285769 93.110857q0-68.534857-41.691429-108.251429t-110.884571-39.716571l-499.419429 0q-69.12 0-110.884571 39.716571t-41.691429 108.251429q0 30.281143 1.974857 59.172571t7.972571 62.317714 15.140571 62.025143 24.576 55.734857 35.401143 46.299429 48.859429 30.573714 63.707429 11.410286q5.12 0 23.990857-12.288t42.569143-27.428571 61.732571-27.428571 76.288-12.288 76.288 12.288 61.732571 27.428571 42.569143 27.428571 23.990857 12.288q34.889143 0 63.707429-11.410286t48.859429-30.573714 35.401143-46.299429 24.576-55.734857 15.140571-62.025143 7.972571-62.317714 1.974857-59.172571zM731.428626 603.428571q0-90.843429-64.292571-155.136t-155.136-64.292571-155.136 64.292571-64.292571 155.136 64.292571 155.136 155.136 64.292571 155.136-64.292571 64.292571-155.136z"  horiz-adv-x="1024" />
34 | 
35 |     
36 |     <glyph glyph-name="indent" unicode="&#58923;" d="M911.2 228L400.8 228c-24.8 0-44.8 21.6-44.8 48s20 48 44.8 48l510.4 0c24.8 0 44.8-21.6 44.8-48S936 228 911.2 228zM911.2 452L400.8 452c-24.8 0-44.8 21.6-44.8 48s20 48 44.8 48l510.4 0c24.8 0 44.8-21.6 44.8-48S936 452 911.2 452zM908 668l-781.6 0c-26.4 0-49.6 20-50.4 46.4-0.8 27.2 20.8 49.6 48 49.6l781.6 0c26.4 0 49.6-20 50.4-46.4C956.8 690.4 935.2 668 908 668zM76 228.79999999999995L76 547.2c0 0 0 0 0 0l223.2-159.2c0 0 0 0 0 0L76 228.79999999999995C76 228 76 228 76 228.79999999999995zM124 108l781.6 0c26.4 0 49.6-20 50.4-46.4 0.8-27.2-20.8-49.6-48-49.6l-781.6 0c-26.4 0-49.6 20-50.4 46.4C75.2 85.60000000000002 96.8 108 124 108z"  horiz-adv-x="1024" />
37 | 
38 |     
39 |     <glyph glyph-name="outdent" unicode="&#58924;" d="M911.2 228L400.8 228c-24.8 0-44.8 21.6-44.8 48s20 48 44.8 48l510.4 0c24.8 0 44.8-21.6 44.8-48S936 228 911.2 228zM911.2 452L400.8 452c-24.8 0-44.8 21.6-44.8 48s20 48 44.8 48l510.4 0c24.8 0 44.8-21.6 44.8-48S936 452 911.2 452zM908 668l-784 0c-26.4 0-48 21.6-48 48 0 26.4 21.6 48 48 48l784 0c26.4 0 48-21.6 48-48C956 689.6 934.4 668 908 668zM300 228l-224 160 224 160L300 228zM124 108l784 0c26.4 0 48-21.6 48-48s-21.6-48-48-48l-784 0c-26.4 0-48 21.6-48 48S97.6 108 124 108z"  horiz-adv-x="1024" />
40 | 
41 |     
42 |     <glyph glyph-name="caret-down" unicode="&#58929;" d="M122.869341 893.77648L851.98782 896 1584.920784 889.527512C1629.474237 889.527512 1668.639278 887.116569 1681.652405 877.153328 1713.071326 853.099276 1709.638076 803.9688639999999 1681.652405 776.106717L905.874092-73.35656400000005C891.086834-88.207717 871.349905-94.55667400000004 851.928185-93.60252100000002 832.502205-94.55880400000001 812.82704-88.207717 797.975887-73.35656400000005L22.199706 776.104585C-5.722077 803.966735-8.769832 852.647755 22.199706 877.085174 36.607856 888.4477 61.684215 893.77648 122.869341 893.77648L122.869341 893.77648Z"  horiz-adv-x="1707" />
43 | 
44 |     
45 | 
46 | 
47 |   </font>
48 | </defs></svg>
49 | 


--------------------------------------------------------------------------------
/src/views/workbench/plan.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="warp-main">
  3 |     <el-row v-loading="loading" element-loading-text="拼命加载中">
  4 |       <el-col :span="24" class="toolbar">
  5 |         <el-form :inline="true" :model="filters">
  6 |           <el-form-item>
  7 |             <el-input v-model="filters.keyword" placeholder="请输入计划名称搜索" auto-complete="off" @keyup.enter.native="handleSearch"></el-input>
  8 |           </el-form-item>
  9 |           <el-form-item>
 10 |             <el-button type="primary" size="medium" v-on:click="handleSearch">查询</el-button>
 11 |           </el-form-item>
 12 |           <el-form-item class="pull-right">
 13 |             <el-button type="primary" size="small" icon="el-icon-plus" @click="addPlan">添加行程</el-button>
 14 |           </el-form-item>
 15 |         </el-form>
 16 |       </el-col>
 17 |       <!--表格数据-->
 18 |       <el-col :span="24" class="table-wrapper">
 19 |         <el-table :data="infoData" stripe style="width: 100%">
 20 |           <el-table-column type="expand">
 21 |             <template slot-scope="props">
 22 |               <el-form label-position="left" inline class="info-table-expand">
 23 |                 <el-form-item label="计划编号：">
 24 |                   <span>{{props.row.id}}</span>
 25 |                 </el-form-item>
 26 |                 <el-form-item label="计划名称：">
 27 |                   <span>{{props.row.name}}</span>
 28 |                 </el-form-item>
 29 |                 <el-form-item label="计划内容：">
 30 |                   <span>{{props.row.content}}</span>
 31 |                 </el-form-item>
 32 |                 <el-form-item label="开始时间：">
 33 |                   <span>{{props.row.startTime}}</span>
 34 |                 </el-form-item>
 35 |                 <el-form-item label="完成时间：">
 36 |                   <span>{{props.row.finishTime}}</span>
 37 |                 </el-form-item>
 38 |                 <el-form-item label="备注：">
 39 |                   <span>{{props.row.remark}}</span>
 40 |                 </el-form-item>
 41 |               </el-form>
 42 |             </template>
 43 |           </el-table-column>
 44 |           <el-table-column label="计划编号" prop="id"></el-table-column>
 45 |           <el-table-column label="计划名称" prop="name"></el-table-column>
 46 |           <el-table-column label="计划内容" prop="content"></el-table-column>
 47 |         </el-table>
 48 |       </el-col>
 49 |       <!--分页-->
 50 |       <el-col :span="24" class="toolbar">
 51 |         <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
 52 |                        :current-page="currentPage" :page-sizes="[10, 50, 100, 200]" :page-size="10"
 53 |                        layout="total, sizes, prev, pager, next, jumper" :total="total">
 54 |         </el-pagination>
 55 |       </el-col>
 56 |     </el-row>
 57 | 
 58 |   </div>
 59 | </template>
 60 | <script>
 61 |   export default {
 62 |     name: 'plan',
 63 |     data (){
 64 |       return {
 65 |         loading: false, // 加载loading
 66 |         filters: { // 搜索表单
 67 |           keyword: ''
 68 |         },
 69 |         total: 5,
 70 |         currentPage: 1,
 71 |         pageSize: 10,
 72 |         infoData: [{
 73 |           id: 'P0001',
 74 |           name: '计划A',
 75 |           content: '计划内容',
 76 |           startTime: '2018-04-20 08:00:00',
 77 |           finishTime: '2018-04-20 09:00:00',
 78 |           remark: '备注内容'
 79 |         },
 80 |           {
 81 |             id: 'P0002',
 82 |             name: '计划B',
 83 |             content: '计划内容',
 84 |             startTime: '2018-04-19 08:00:00',
 85 |             finishTime: '2018-04-19 12:00:00',
 86 |             remark: '备注内容'
 87 |           },
 88 |           {
 89 |             id: 'P0003',
 90 |             name: '计划C',
 91 |             content: '计划内容',
 92 |             startTime: '2018-04-18 08:00:00',
 93 |             finishTime: '2018-04-18 09:00:00',
 94 |             remark: '备注内容'
 95 |           },
 96 |           {
 97 |             id: 'P0004',
 98 |             name: '计划D',
 99 |             content: '计划内容',
100 |             startTime: '2018-04-17 08:00:00',
101 |             finishTime: '2018-04-17 11:00:00',
102 |             remark: '备注内容'
103 |           },
104 |           {
105 |             id: 'P0005',
106 |             name: '计划E',
107 |             content: '计划内容',
108 |             startTime: '2018-04-16 08:00:00',
109 |             finishTime: '2018-04-16 23:00:00',
110 |             remark: '备注内容'
111 |           }]
112 |       }
113 |     },
114 |     methods: {
115 |       addPlan() {
116 |         this.$message({
117 |           showClose: true,
118 |           message: '这是一条消息提示',
119 |           type: 'success'
120 |         });
121 |       },
122 |       // search data
123 |       handleSearch() {
124 |         // ...
125 |       },
126 |       // 选择每页显示条数
127 |       handleSizeChange(val){
128 | //        this.pageSize = val;
129 | //        this.currentPage = 1;
130 |       },
131 |       // 跳转页
132 |       handleCurrentChange(val){
133 | //        this.currentPage = val;
134 |       },
135 |     }
136 |   }
137 | </script>
138 | <style>
139 |   .info-table-expand {
140 |     font-size: 0;
141 |   }
142 |   .info-table-expand label {
143 |     width: 90px;
144 |     color: #99a9bf;
145 |   }
146 |   .info-table-expand .el-form-item {
147 |     margin-right: 0;
148 |     margin-bottom: 0;
149 |     width: 50%;
150 |   }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-row class="container">
  3 |     <!--头部-->
  4 |     <el-col :span="24" class="topbar-wrap">
  5 |       <div class="topbar-logo topbar-btn">
  6 |         <a href="/"><img src="../assets/logo.png" style="padding-left:8px;"></a>
  7 |       </div>
  8 |       <div class="topbar-logos">
  9 |         <a href="/" style="color: #fff;"><span v-show="!$store.state.collapsed">车车综合管理</span></a>
 10 |       </div>
 11 |       <div class="topbar-title">
 12 |         <el-row v-show="$store.state.topNavState==='home'"><!-- 注意：这里就是topNavState作用之处，根据当前路由所在根路由的type值判断显示不同顶部导航菜单 -->
 13 |           <el-col :span="24">
 14 |             <el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
 15 |               <el-menu-item index="/">工作台</el-menu-item>
 16 |               <el-menu-item index="/enterpriseManager">企业管理</el-menu-item>
 17 |               <el-menu-item index="/orderManager">订单管理</el-menu-item>
 18 |               <el-menu-item index="/systemManager">系统管理</el-menu-item>
 19 |             </el-menu>
 20 |           </el-col>
 21 |         </el-row>
 22 |         <el-row v-show="$store.state.topNavState==='enterprise'">
 23 |           <el-col :span="24">
 24 |             <el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
 25 |               <el-menu-item index="/enterpriseManager">企业信息</el-menu-item>
 26 |               <el-menu-item index="/vehicleManager">车辆信息</el-menu-item>
 27 |               <el-menu-item index="/deptManager">组织架构</el-menu-item>
 28 |             </el-menu>
 29 |           </el-col>
 30 |         </el-row>
 31 |       </div>
 32 |       <div class="topbar-account topbar-btn">
 33 |         <el-dropdown trigger="click">
 34 |           <span class="el-dropdown-link userinfo-inner">
 35 |             <i class="iconfont icon-user"></i> {{nickname}}   <i class="el-icon-caret-bottom"></i></span>
 36 |           <el-dropdown-menu slot="dropdown">
 37 |             <el-dropdown-item>
 38 |               <div @click="jumpTo('/user/profile')"><span style="color: #555;font-size: 14px;">个人信息</span></div>
 39 |             </el-dropdown-item>
 40 |             <el-dropdown-item>
 41 |               <div @click="jumpTo('/user/changepwd')"><span style="color: #555;font-size: 14px;">修改密码</span></div>
 42 |             </el-dropdown-item>
 43 |             <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
 44 |           </el-dropdown-menu>
 45 |         </el-dropdown>
 46 |       </div>
 47 |     </el-col>
 48 | 
 49 |     <!--中间-->
 50 |     <transition name="fade" mode="out-in">
 51 |       <router-view></router-view>
 52 |     </transition>
 53 |   </el-row>
 54 | </template>
 55 | <script>
 56 |   export default {
 57 |     name: 'home',
 58 |     data () {
 59 |       return {
 60 |         defaultActiveIndex: "/",
 61 |         loading: false,
 62 |         nickname: ''
 63 |       }
 64 |     },
 65 |     created() {// 组件创建完后获取数据，
 66 |       // 此时 data 已经被 observed 了
 67 |       this.fetchNavData();
 68 |     },
 69 |     methods: {
 70 |       handleSelect(index){
 71 |         this.defaultActiveIndex = index;
 72 |       },
 73 |       fetchNavData () { // 初始化菜单激活项
 74 |         var cur_path = this.$route.path; //获取当前路由
 75 |         var routers = this.$router.options.routes; // 获取路由对象
 76 |         var nav_type = "", nav_name = "";
 77 |         for (var i = 0; i < routers.length; i++) {
 78 |           var children = routers[i].children;
 79 |           if(children){
 80 |             for (var j = 0; j < children.length; j++) {
 81 |               var grand_children = children[j].children;
 82 |               if(grand_children){
 83 |                 for (var k = 0; k < grand_children.length; k++) {
 84 |                   if (grand_children[k].path === cur_path) {
 85 |                     nav_type = routers[i].type;
 86 |                     nav_name = routers[i].name;
 87 |                     break;
 88 |                   }
 89 |                   // 如果该菜单下还有子菜单
 90 |                   if(children[j].children) {
 91 |                     let grandChildren = children[j].children;
 92 |                     for(let z=0; z<grandChildren.length; z++) {
 93 |                       if(grandChildren[z].path === cur_path) {
 94 |                         nav_type = routers[i].type;
 95 |                         nav_name = routers[i].name;
 96 |                         break;
 97 |                       }
 98 |                     }
 99 |                   }
100 |                 }
101 |               }
102 |             }
103 |           }
104 |         }
105 |         this.$store.state.topNavState = nav_type;  // 改变topNavState状态的值
106 |         this.$store.state.leftNavState = nav_name;  // 改变leftNavState状态的值
107 |         if(nav_type == "home"){
108 |           this.defaultActiveIndex = "/";
109 |         } else {
110 |           this.defaultActiveIndex = "/" + nav_name + "Manager";
111 |         }
112 |       },
113 |       jumpTo(url){
114 |         this.defaultActiveIndex = url;
115 |         this.$router.push(url); //用go刷新
116 |       },
117 |       logout(){
118 |         //logout
119 |         let that = this;
120 |         this.$confirm('确认退出吗?', '提示', {
121 |           confirmButtonClass: 'el-button--warning'
122 |         }).then(() => {
123 |           //确认
124 |           localStorage.removeItem('access-user');
125 |           that.$router.go('/login'); //用go刷新
126 |         }).catch(() => {});
127 |       }
128 |     },
129 |     mounted() {
130 |       let user = localStorage.getItem('access-user');
131 |       if (user) {
132 |         user = JSON.parse(user);
133 |         this.nickname = user.nickname || '';
134 |       }
135 |     },
136 |     watch: {
137 |       '$route': 'fetchNavData'  //监听router值改变时，改变导航菜单激活项
138 |     }
139 |   }
140 | </script>
141 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Router from 'vue-router'
  3 | import LeftNav from '@/components/nav/leftNav.vue'
  4 | import Home from '@/views/home.vue'
  5 | import Dashboard from '@/views/workbench/dashboard.vue'
  6 | import Mission from '@/views/workbench/mission/mission.vue'
  7 | import Plan from '@/views/workbench/plan.vue'
  8 | import Maillist from '@/views/workbench/maillist.vue'
  9 | import EnterpriseList from '@/views/enterprise/index.vue'
 10 | import EnterpriseAdd from '@/views/enterprise/add.vue'
 11 | import EnterpriseDetail from '@/views/enterprise/detail.vue'
 12 | import EnterpriseValidate from '@/views/enterprise/validate.vue'
 13 | import VehicleManage from '@/views/vehicle/index.vue'
 14 | import DeptManager from '@/views/dept/index.vue'
 15 | import NotFound from '@/components/404.vue'
 16 | 
 17 | // 懒加载方式，当路由被访问的时候才加载对应组件
 18 | const Login = resolve => require(['@/views/login'], resolve)
 19 | 
 20 | Vue.use(Router)
 21 | 
 22 | let router = new Router({
 23 |   routes: [
 24 |     {
 25 |       path: '/login',
 26 |       type: 'login',
 27 |       component: Login
 28 |     },
 29 |     {
 30 |       path: '*',
 31 |       component: NotFound
 32 |     },
 33 |     {
 34 |       path: '/',
 35 |       type: 'home', // 根据type区分不同模块（顶部导航）
 36 |       name: 'home', // 根据name区分不同子模块（左侧导航）
 37 |       redirect: '/dashboard',
 38 |       component: Home,
 39 |       menuShow: true,
 40 |       children: [
 41 |         {
 42 |           path: '/dashboard',
 43 |           component: LeftNav,
 44 |           name: 'dashboard', // 当前路由的name
 45 |           leaf: true, // 只有一个节点
 46 |           iconCls: 'iconfont icon-home', // 图标样式class
 47 |           menuShow: true,
 48 |           children: [
 49 |             { path: '/dashboard', component: Dashboard, name: '首页', menuShow: true }
 50 |           ]
 51 |         },
 52 |         {
 53 |           path: '/mySet',
 54 |           component: LeftNav,
 55 |           name: '我的设置',
 56 |           iconCls: 'el-icon-menu',
 57 |           menuShow: true,
 58 |           children: [
 59 |             { path: '/mySet/plan', component: Plan, name: '行程计划', menuShow: true },
 60 |             { path: '/mySet/mission', component: Mission, name: '我的任务', menuShow: true },
 61 |             { path: '/mySet/maillist', component: Maillist, name: '通讯录', menuShow: true }
 62 |           ]
 63 |         }
 64 |       ]
 65 |     },
 66 |     {
 67 |       path: '/enterpriseManager',
 68 |       type: 'enterprise',
 69 |       name: 'enterprise',
 70 |       component: Home,
 71 |       redirect: '/enterprise/list',
 72 |       menuShow: true,
 73 |       children: [
 74 |         {
 75 |           path: '/enterpriseList',
 76 |           component: LeftNav,
 77 |           name: 'enterpriseList',
 78 |           leaf: true, // 只有一个节点
 79 |           iconCls: 'iconfont icon-home', // 图标样式class
 80 |           menuShow: true,
 81 |           children: [
 82 |             { path: '/enterprise/list', component: EnterpriseList, name: '企业列表', menuShow: true },
 83 |             { path: '/enterprise/detail', component: EnterpriseDetail, name: '企业详情', menuShow: false }
 84 |           ]
 85 |         },
 86 |         {
 87 |           path: '/enterpriseAdd',
 88 |           component: LeftNav,
 89 |           name: 'enterpriseAdd',
 90 |           leaf: true, // 只有一个节点
 91 |           iconCls: 'el-icon-menu',
 92 |           menuShow: true,
 93 |           children: [
 94 |             { path: '/enterprise/add', component: EnterpriseAdd, name: '企业添加', menuShow: true }
 95 |           ]
 96 |         },
 97 |         {
 98 |           path: '/enterpriseValidate',
 99 |           component: LeftNav,
100 |           name: 'enterpriseValidate',
101 |           leaf: true, // 只有一个节点
102 |           iconCls: 'el-icon-menu',
103 |           menuShow: true,
104 |           children: [
105 |             { path: '/enterprise/validate', component: EnterpriseValidate, name: '企业认证', menuShow: true }
106 |           ]
107 |         }
108 |       ]
109 |     },
110 |     {
111 |       path: '/vehicleManager',
112 |       type: 'enterprise',
113 |       name: 'vehicle',
114 |       component: Home,
115 |       redirect: '/vehicle/list',
116 |       menuShow: true,
117 |       children: [
118 |         {
119 |           path: '/vehicleList',
120 |           component: LeftNav,
121 |           name: 'vehicleList',
122 |           leaf: true, // 只有一个节点
123 |           iconCls: 'iconfont icon-home', // 图标样式class
124 |           menuShow: true,
125 |           children: [
126 |             { path: '/vehicle/list', component: VehicleManage, name: '车辆信息', menuShow: true }
127 |           ]
128 |         }
129 |       ]
130 |     },
131 |     {
132 |       path: '/deptManager',
133 |       type: 'enterprise',
134 |       name: 'dept',
135 |       component: Home,
136 |       redirect: '/dept/list',
137 |       menuShow: true,
138 |       children: [
139 |         {
140 |           path: '/deptList',
141 |           component: LeftNav,
142 |           name: 'deptList',
143 |           leaf: true, // 只有一个节点
144 |           iconCls: 'iconfont icon-home', // 图标样式class
145 |           menuShow: true,
146 |           children: [
147 |             { path: '/dept/list', component: DeptManager, name: '部门信息', menuShow: true }
148 |           ]
149 |         }
150 |       ]
151 |     }
152 | 
153 |   ]
154 | });
155 | 
156 | router.beforeEach((to, from, next) => {
157 |   // console.log('to:' + to.path)
158 |   if (to.path.startsWith('/login')) {
159 |     window.localStorage.removeItem('access-user')
160 |     next()
161 |   } else if(to.path.startsWith('/register')){
162 |     window.localStorage.removeItem('access-user')
163 |     next()
164 |   } else {
165 |     let user = JSON.parse(window.localStorage.getItem('access-user'))
166 |     if (!user) {
167 |       next({path: '/login'})
168 |     } else {
169 |       next()
170 |     }
171 |   }
172 | });
173 | 
174 | export default router
175 | 


--------------------------------------------------------------------------------
/src/views/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="header-content">
  4 |       <div class="logo-part">
  5 |         <img src="../assets/logo.png" width="30" height="30">
  6 |         <span>车车综合管理</span>
  7 |       </div>
  8 |     </div>
  9 |     <el-form ref="AccountForm" :model="account" :rules="rules" label-position="left" label-width="0px"
 10 |              class="demo-ruleForm login-container">
 11 |       <h3 class="title">欢迎登录</h3>
 12 |       <el-form-item prop="username">
 13 |         <el-input type="text" v-model="account.username" auto-complete="off" placeholder="手机号或公司企业码"></el-input>
 14 |       </el-form-item>
 15 |       <el-form-item prop="pwd">
 16 |         <el-input type="password" v-model="account.pwd" :autofocus="pwdFocus" auto-complete="off" placeholder="请输入登录密码"></el-input>
 17 |       </el-form-item>
 18 |       <!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
 19 |       <el-form-item class="extra-text">
 20 |         <a href="javascript:;" class="forget-pwd" title="找回密码">忘记密码?</a>
 21 |         <router-link :to="{path: '/register'}" class="reg-text" title="立即注册">立即注册</router-link>
 22 |       </el-form-item>
 23 |       <el-form-item style="width:100%;">
 24 |         <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :disabled="allowLogin" :loading="loading">登录</el-button>
 25 |       </el-form-item>
 26 |     </el-form>
 27 | 	<div class="footer">
 28 |       <footer-copyright></footer-copyright>
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | <script>
 33 |   import API from '../api/api_user'
 34 |   export default {
 35 |     data() {
 36 |       var validateAccount = (rules, value, callback) => {
 37 |         if (value === '') {
 38 |           callback(new Error('请输入账号'));
 39 |         } else {
 40 |           if (this.account.username !== '') {
 41 |             this.account.username = value;
 42 | 			this.validateCorrect();
 43 |           }
 44 |           callback();
 45 |         }
 46 |       };
 47 | 	  var validatePwd = (rules, value, callback) => {
 48 |         if (value === '') {
 49 |           callback(new Error('请输入密码'));
 50 |         } else {
 51 |           if (this.account.pwd !== '') {
 52 |             this.account.pwd = value;
 53 |             this.validateCorrect();
 54 |           }
 55 |           callback();
 56 |         }
 57 |       };
 58 |       return {
 59 |         loading: false,
 60 |         account: {
 61 |           username: '',
 62 |           pwd: ''
 63 |         },
 64 |         rules: {
 65 |           username: [
 66 |             { required: true, validator: validateAccount, trigger: 'change' }
 67 | 
 68 |           ],
 69 |           pwd: [
 70 |             {required: true, validator: validatePwd, trigger: 'change'}
 71 |           ]
 72 |         },
 73 |         pwdFocus: false,
 74 | 		allowLogin: true,
 75 |         checked: true
 76 |       };
 77 |     },
 78 |     created() {
 79 |       let reg_user = JSON.parse(window.localStorage.getItem('register-user'));
 80 |       if (reg_user) {
 81 |         this.account.username = reg_user.username;
 82 |         this.account.pwd = '';
 83 |         this.pwdFocus = true;
 84 |       }
 85 |     },
 86 |     methods: {
 87 |       handleLogin(){
 88 |         let that = this;
 89 |         let result = {
 90 |           id: '1',
 91 |           username: 'admin',
 92 |           nickname: this.account.username,
 93 |           name: 'administrator',
 94 |           email: '888888@163.com'
 95 |         };
 96 |         this.loading = true;
 97 |         let status = API.login(result);
 98 |         if(status == 'success'){
 99 |           localStorage.setItem('access-user', JSON.stringify(result));
100 |           window.localStorage.removeItem('register-user');
101 |           that.$router.push({path: '/'});
102 |         } else {
103 | 		  this.loading = false;
104 |           this.$message.error("登录失败，账号或密码错误");
105 |         }
106 |       },
107 | 	  validateCorrect(){
108 |         if(this.account.pwd.trim().length > 0 && this.account.username.trim().length > 0){
109 |           this.allowLogin = false;
110 |         } else {
111 |           this.allowLogin = true;
112 |         }
113 |       }
114 |     }
115 |   }
116 | </script>
117 | <style scoped>
118 |   body {
119 |     background: #DFE9FB;
120 |   }
121 |   .header-content {
122 |     position: fixed;
123 |     top: 0;
124 |     width: 100%;
125 |     height: 50px;
126 |     padding: 6px 0;
127 |     border-bottom: 1px solid #ddd;
128 |     box-shadow: 0 0 2px #ddd;
129 |   }
130 |   .header-content .logo-part {
131 |     margin-left: 10px;
132 |     font-size: 18px;
133 |     color: #999;
134 |   }
135 |   .header-content .logo-part img {
136 |     vertical-align: middle;
137 |   }
138 |   .login-container {
139 |     /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
140 |     -webkit-border-radius: 5px;
141 |     border-radius: 5px;
142 |     -moz-border-radius: 5px;
143 |     background-clip: padding-box;
144 |     margin: 160px auto;
145 |     width: 350px;
146 |     padding: 35px 35px 15px 35px;
147 |     background: #fff;
148 |     border: 1px solid #eaeaea;
149 |     box-shadow: 0 0 25px #cac6c6;
150 | 
151 |     background: -ms-linear-gradient(top, #ace, #00C1DE); /* IE 10 */
152 |     background: -moz-linear-gradient(top, #ace, #00C1DE); /*火狐*/
153 |     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ace), to(#00C1DE)); /*谷歌*/
154 |     background: -webkit-linear-gradient(top, #ace, #00C1DE); /*Safari5.1 Chrome 10+*/
155 |     background: -o-linear-gradient(top,#ace, #00C1DE); /*Opera 11.10+*/
156 | 
157 |   }
158 |   .login-container .title {
159 |     margin: 0px auto 40px auto;
160 |     text-align: center;
161 |     color: #505458;
162 |   }
163 |   .login-container .remember {
164 |     margin: 0px 0px 35px 0px;
165 |   }
166 |   .extra-text {
167 |     position: relative;
168 |     margin-bottom: 0;
169 |     padding-left: 2px;
170 |   }
171 |   .extra-text a {
172 |     font-size: 12px;
173 |     color: #aaa;
174 |   }
175 |   .extra-text a:hover {
176 |     color: #29e;
177 |   }
178 |   .extra-text .reg-text {
179 |     position: absolute;
180 |     top: 4px;
181 |     right: 2px;
182 |   }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/src/views/workbench/mission/mission.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="warp-main">
  3 |     <el-row v-loading="loading" element-loading-text="拼命加载中">
  4 |       <el-col :span="24" class="toolbar">
  5 |         <el-form :inline="true" :model="filters">
  6 |           <el-form-item>
  7 |             <el-input v-model="filters.number" placeholder="请输入任务编号" auto-complete="off" @keyup.enter.native="handleSearch"></el-input>
  8 |           </el-form-item>
  9 |           <el-form-item>
 10 |             <el-button type="primary" size="medium" v-on:click="handleSearch">查询</el-button>
 11 |           </el-form-item>
 12 |           <el-form-item class="pull-right">
 13 |             <el-button type="primary" size="medium" @click="showAddDialog" icon="el-icon-plus">新增</el-button>
 14 |           </el-form-item>
 15 |         </el-form>
 16 |       </el-col>
 17 |       <!--表格数据-->
 18 |       <el-col class="table-wrapper">
 19 |         <el-table :data="tableData" stripe style="width: 100%" @row-click="handleDetail">
 20 |           <el-table-column prop="mId" v-if="idShow" label="任务ID"></el-table-column>
 21 |           <el-table-column prop="mNumber" label="任务编号" sortable></el-table-column>
 22 |           <el-table-column prop="mType" label="任务类型"></el-table-column>
 23 |           <el-table-column prop="mContent" label="任务内容"></el-table-column>
 24 |           <el-table-column prop="eRemark" label="任务备注" show-overflow-tooltip></el-table-column>
 25 |           <el-table-column prop="createTime" :formatter="dateFormatter" label="创建日期"></el-table-column>
 26 |           <el-table-column prop="activeTime" :formatter="activeTateFormatter" label="执行日期"></el-table-column>
 27 |           <el-table-column label="操作">
 28 |             <template slot-scope="scope">
 29 |               <el-button
 30 |                 size="mini"
 31 |                 type="text"
 32 |                 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 33 |             </template>
 34 |           </el-table-column>
 35 |         </el-table>
 36 |       </el-col>
 37 |       <el-col :span="24" class="toolbar">
 38 |         <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
 39 |                        :current-page="currentPage" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
 40 |                        layout="total, sizes, prev, pager, next, jumper" :total="total">
 41 |         </el-pagination>
 42 |       </el-col>
 43 |     </el-row>
 44 | 
 45 |     <!--添加-->
 46 |     <mission-add ref="addMission" v-if="addVisible" :visible.sync="addVisible"></mission-add>
 47 |     <!--详情-->
 48 |     <div class="modal-mask" v-if="maskVisible" @click="cancelVisible"></div>
 49 |     <transition name="slide-fade">
 50 |       <div class="detail-box" v-if="detailVisible">
 51 |         <mission-detail ref="detailMission" :id="detailId"></mission-detail>
 52 |       </div>
 53 |     </transition>
 54 |   </div>
 55 | </template>
 56 | <script>
 57 |   import MissionAdd from './add'
 58 |   import MissionDetail from './detail'
 59 |   export default {
 60 |     name: 'mission',
 61 |     data: function(){
 62 |       return {
 63 |         loading: false,
 64 |         idShow: false,
 65 |         total: 2,
 66 |         currentPage: 1,
 67 |         pageSize: 10,
 68 |         tableData: [{
 69 |           mId: 1,
 70 |           mNumber: '10001',
 71 |           mType: '接收订单',
 72 |           mContent: '接乘客',
 73 |           eRemark: '无',
 74 |           createTime: 1540560471000,
 75 |           activeTime: 1540760471000
 76 |         },
 77 |           {
 78 |             mId: 2,
 79 |             mNumber: '10002',
 80 |             mType: '转发订单',
 81 |             mContent: '接乘客',
 82 |             eRemark: '无',
 83 |             createTime: 1540560471000,
 84 |             activeTime: 1540680471000
 85 |           }],
 86 |         addVisible: false, // 添加弹窗flag
 87 |         detailVisible: false, // 详情弹窗flag
 88 |         maskVisible: false, // 弹窗mask显示
 89 |         detailId: 0, // 详情ID
 90 |         filters: { // 搜索表单
 91 |           number: ''
 92 |         }
 93 |       };
 94 |     },
 95 |     components: {
 96 |       'mission-add': MissionAdd,
 97 |       'mission-detail': MissionDetail
 98 |     },
 99 |     methods: {
100 |       // 搜索
101 |       handleSearch(){
102 |         console.info(this.filters.number);
103 |       },
104 |       // 详情
105 |       handleDetail(row, event, column) {
106 |         this.detailId = row.mId;
107 |         this.maskVisible = true;
108 |         this.detailVisible = true;
109 |       },
110 |       // 删除
111 |       handleDelete(index, row) {
112 |         console.log(index, row);
113 |       },
114 |       // 选择每页显示条数
115 |       handleSizeChange(val){
116 | //        this.pageSize = val;
117 | //        this.currentPage = 1;
118 |       },
119 |       // 跳转页
120 |       handleCurrentChange(val){
121 | //        this.currentPage = val;
122 |       },
123 |       // 添加弹窗
124 |       showAddDialog(){
125 |         this.addVisible = true;
126 |       },
127 |       // 关闭所有弹窗
128 |       cancelVisible() {
129 |         this.maskVisible = false;
130 |         this.detailVisible = false;
131 |       },
132 |       // 创建日期转换
133 |       dateFormatter(row, column) {
134 |         return this.getDateValue(row.createTime);
135 |       },
136 |       // 执行日期转换
137 |       activeTateFormatter(row, column) {
138 |         return this.getDateValue(row.activeTime);
139 |       },
140 |       // 获取日期
141 |       getDateValue(datetime) {
142 |         if (datetime) {
143 |           datetime = new Date(datetime);
144 |           let y = datetime.getFullYear() + '-';
145 |           let mon = datetime.getMonth() + 1 + '-';
146 |           let d = datetime.getDate();
147 |           return y + mon + d;
148 |         }
149 |         return ''
150 |       },
151 |     }
152 |   }
153 | </script>
154 | <style lang="scss" scoped>
155 |   .detail-box {
156 |     position: fixed;
157 |     top: 0;
158 |     right: 0;
159 |     bottom: 0;
160 |     width: 500px;
161 |     height: 100%;
162 |     overflow-y: auto;
163 |     z-index: 2000;
164 |     background-color: #fff;
165 |   }
166 |   .modal-mask {
167 |     position: fixed;
168 |     top: 0;
169 |     left: 0;
170 |     right: 0;
171 |     bottom: 0;
172 |     z-index: 1000;
173 |     background-color: #000;
174 |     opacity: .3;
175 |   }
176 | </style>
177 | 


--------------------------------------------------------------------------------
/src/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 | }
  5 | 
  6 | *, :after, :before {
  7 |   webkit-box-sizing: border-box;
  8 |   -moz-box-sizing: border-box;
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | html {
 13 |   font-size: 14px;
 14 | }
 15 | 
 16 | @media all and (max-width: 768px) {
 17 |   html {
 18 |     font-size: 12px;
 19 |   }
 20 | }
 21 | 
 22 | a {
 23 |   text-decoration: none;
 24 | }
 25 | 
 26 | ul {
 27 |   list-style: none;
 28 |   margin-bottom: 0;
 29 | }
 30 | 
 31 | #app {
 32 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 33 |   -webkit-font-smoothing: antialiased;
 34 |   -moz-osx-font-smoothing: grayscale;
 35 |   color: #2c3e50;
 36 |   margin-top: 60px;
 37 | }
 38 | 
 39 | .pull-left {
 40 |   float: left;
 41 | }
 42 | 
 43 | .pull-right {
 44 |   float: right;
 45 | }
 46 | 
 47 | .container {
 48 |   position: absolute;
 49 |   top: 0px;
 50 |   bottom: 0px;
 51 |   width: 100%;
 52 | }
 53 | 
 54 | /* top navbar style start */
 55 | .container .topbar-wrap {
 56 |   height: 50px;
 57 |   line-height: 50px;
 58 |   background: #373d41;
 59 |   padding: 0px;
 60 | }
 61 | 
 62 | .container .topbar-wrap .topbar-btn {
 63 |   color: #fff;
 64 | }
 65 | 
 66 | .container .topbar-wrap .topbar-logo {
 67 |   float: left;
 68 |   width: 60px;
 69 |   line-height: 26px;
 70 | }
 71 | 
 72 | .container .topbar-wrap .topbar-logos {
 73 |   float: left;
 74 |   width: 128px;
 75 |   line-height: 48px;
 76 |   font-size: 14px;
 77 | }
 78 | 
 79 | .container .topbar-wrap .topbar-logo img, .container .topbar-wrap .topbar-logos img {
 80 |   height: 30px;
 81 |   margin-top: 12px;
 82 |   margin-left: 2px;
 83 | }
 84 | 
 85 | .container .topbar-wrap .topbar-title {
 86 |   float: left;
 87 |   text-align: left;
 88 |   padding-left: 10px;
 89 |   border-left: 1px solid #000;
 90 | }
 91 | 
 92 | .topbar-title .el-menu--horizontal {
 93 |   background-color: transparent;
 94 | }
 95 | 
 96 | .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item.is-active {
 97 |   color: #fff;
 98 |   background-color: transparent;
 99 |   border-bottom: 2px solid #409EFF !important;
100 | }
101 | 
102 | .topbar-title .el-menu--horizontal > .el-menu-item {
103 |   height: 50px;
104 |   line-height: 50px;
105 |   color: #fff;
106 | }
107 | 
108 | .el-menu-item .iconfont {
109 |   margin-right: 5px;
110 |   display: inline-block;
111 |   width: 24px;
112 |   text-align: center;
113 |   font-size: 18px;
114 |   vertical-align: middle;
115 | }
116 | 
117 | .container .topbar-wrap .topbar-account {
118 |   float: right;
119 |   padding-right: 12px;
120 | }
121 | 
122 | .container .topbar-wrap .topbar-timer {
123 |   display: inline-block;
124 | }
125 | 
126 | .container .topbar-wrap .topbar-timer span {
127 |   display: inline-block;
128 |   vertical-align: middle;
129 | }
130 | 
131 | .container .topbar-wrap .topbar-timer .login-name {
132 |   margin: 0 6px;
133 |   font-style: normal;
134 | }
135 | 
136 | .container .topbar-wrap .userinfo-inner {
137 |   cursor: pointer;
138 |   color: #fff;
139 |   padding-left: 10px;
140 | }
141 | 
142 | .container .topbar-wrap .userinfo-inner img {
143 |   margin-left: 6px;
144 |   width: 42px;
145 |   height: 42px;
146 |   border: 1px solid #504d4d;
147 |   -webkit-border-radius: 50%;
148 |   -moz-border-radius: 50%;
149 |   border-radius: 50%;
150 |   vertical-align: middle;
151 | }
152 | /* top navbar style end */
153 | 
154 | /* left sidebar style start */
155 | .container aside {
156 |   min-width: 50px;
157 |   background: #333744;
158 | }
159 | 
160 | .container aside::-webkit-scrollbar {
161 |   display: none;
162 | }
163 | 
164 | .container aside .menu-toggle {
165 |   background: #4A5064;
166 |   text-align: center;
167 |   color: white;
168 |   height: 26px;
169 |   line-height: 30px;
170 | }
171 | 
172 | .container aside .menu-toggle .iconfont:hover {
173 |   cursor: pointer;
174 | }
175 | 
176 | aside .el-menu-item, aside .el-submenu__title {
177 |   color: #fff;
178 |   text-align: left;
179 | }
180 | 
181 | aside .el-menu-item:hover, aside .el-submenu .el-menu-item:hover, aside .el-submenu__title:hover {
182 |   background-color: #7ed2df;
183 | }
184 | 
185 | aside .el-submenu .el-menu-item {
186 |   background-color: #333744;
187 | }
188 | 
189 | aside .el-submenu .el-menu-item:hover {
190 |   background-color: #4A5064;
191 | }
192 | 
193 | aside .el-submenu .el-menu-item.is-active, aside .el-menu-item.is-active,
194 | aside .el-submenu .el-menu-item.is-active:hover, aside .el-menu-item.is-active:hover {
195 |   background-color: #00C1DE;
196 |   color: #fff;
197 | }
198 | 
199 | .container aside.showSidebar {
200 |   overflow-x: hidden;
201 |   overflow-y: auto;
202 | }
203 | 
204 | .container aside .el-menu {
205 |   height: 100%; /*写给不支持calc()的浏览器*/
206 |   height: calc(100% - 80px);
207 |   border-radius: 0px;
208 |   background-color: #333744;
209 |   border-right: 0px;
210 | }
211 | 
212 | .container aside .el-submenu .el-menu-item {
213 |   min-width: 60px;
214 | }
215 | 
216 | .container aside .el-menu {
217 |   width: 189px;
218 | }
219 | 
220 | .container aside .el-menu--collapse {
221 |   width: 60px;
222 | }
223 | 
224 | .container aside .el-menu .el-menu-item, .container aside .el-submenu .el-submenu__title {
225 |   height: 46px;
226 |   line-height: 46px;
227 | }
228 | 
229 | .container aside .el-menu-item:hover, .container aside .el-submenu .el-menu-item:hover, .container aside .el-submenu__title:hover {
230 |   background-color: #7ed2df;
231 | }
232 | 
233 | /* left sidebar style end */
234 | 
235 | .container .main {
236 |   display: -ms-flexbox;
237 |   display: flex;
238 |   position: absolute;
239 |   top: 50px;
240 |   bottom: 0px;
241 |   overflow: hidden;
242 | }
243 | 
244 | .container .warp-main {
245 |   padding-top: 10px;
246 |   padding-bottom: 10px;
247 | }
248 | 
249 | .container .content-container {
250 |   background: #f2f2f2;
251 |   -ms-flex: 1;
252 |   flex: 1;
253 |   overflow-y: auto;
254 |   padding: 10px;
255 | }
256 | 
257 | .container .content-container .content-wrapper {
258 |   background-color: #fff;
259 |   box-sizing: border-box;
260 | }
261 | 
262 | .grid-content {
263 |   border-radius: 2px;
264 |   background-color: #fff;
265 | }
266 | 
267 | .grid-content .toolbar {
268 |   padding: 10px 10px 0 10px;
269 | }
270 | 
271 | .grid-content .el-pagination {
272 |   padding: 15px;
273 |   text-align: right;
274 | }
275 | 
276 | .table-wrapper {
277 |   border-top: 1px solid #ebeef5;
278 | }
279 | 
280 | /* bottom footer style start */
281 | .footer {
282 |   position: fixed;
283 |   bottom: 0;
284 |   left: 0;
285 |   padding: 20px 0;
286 |   width: 100%;
287 |   background-color: #2d2e2e;
288 | }
289 | 
290 | .footer .footer-msg {
291 |   max-width: 800px;
292 |   margin: 0 auto;
293 |   text-align: center;
294 |   font-size: 1.08rem;
295 |   color: #666;
296 | }
297 | 
298 | .footer .footer-msg a {
299 |   color: #428bca;
300 |   text-decoration: none;
301 | }
302 | 
303 | .footer .footer-msg a:hover,
304 | .footer .footer-msg a:focus,
305 | .footer .footer-msg a:active {
306 |    color: #2a6496;
307 |    text-decoration: underline;
308 |    outline: 0;
309 |  }
310 | /* bottom footer style end */
311 | 
312 | /* scrollbar style start */
313 | ::-webkit-scrollbar {
314 |   background: transparent;
315 |   width: 10px;
316 |   height: 10px
317 | }
318 | 
319 | ::-webkit-scrollbar-thumb {
320 |   -webkit-border-radius: 5px;
321 |   -moz-border-radius: 5px;
322 |   border-radius: 5px;
323 |   background-color: #e1e1e1;
324 |   width: 6px;
325 |   height: 6px;
326 |   border: 2px solid transparent;
327 |   background-clip: content-box
328 | }
329 | 
330 | ::-webkit-scrollbar-track {
331 |   -webkit-border-radius: 5px;
332 |   -moz-border-radius: 5px;
333 |   border-radius: 5px;
334 |   background-color: #fafafa
335 | }
336 | /* scrollbar style end */
337 | 
338 | /* sidebar style start */
339 | .slide-fade-enter-active {
340 |   transition: all .3s ease;
341 | }
342 | .slide-fade-leave-active {
343 |   transition: all .3s cubic-bezier(1, .5, .8, 1);
344 | }
345 | .slide-fade-enter, .slide-fade-leave-to {
346 |   transform: translateX(600px);
347 | }
348 | /* sidebar style end */
349 | 


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