朱兆平 / vue_cli · 提交

转到一个项目

作者 shenhailong
提交 d17524ee48a1d683e6692e0e0cb157cbd99d5faf 1 个父辈 4c1e9ade

系统设置 master

内嵌 并排对比
正在显示 15 个修改的文件 包含 793 行增加 和 555 行删除
1 import axios from 'axios' 1 import axios from 'axios'
2 2
3 -let base = '/hqpt-user-center/department'; 3 +let base = '/cloud-user-center/department';
4 4
5 5
6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); }; 6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
@@ -17,7 +17,7 @@ export default { @@ -17,7 +17,7 @@ export default {
17 return axios({ 17 return axios({
18 method: 'GET', 18 method: 'GET',
19 url: url, 19 url: url,
20 - params: params, 20 + params: params,
21 headers: { 21 headers: {
22 'Content-Type': 'application/x-www-form-urlencoded' 22 'Content-Type': 'application/x-www-form-urlencoded'
23 } 23 }
@@ -46,7 +46,7 @@ export default { @@ -46,7 +46,7 @@ export default {
46 login: data =>{ 46 login: data =>{
47 return axios({ 47 return axios({
48 method: 'POST', // 请求协议 48 method: 'POST', // 请求协议
49 - url: 'hqpt-user-center/login', // 请求的地址 49 + url: 'cloud-user-center/login', // 请求的地址
50 data: qs.stringify(data), // post 请求的数据 50 data: qs.stringify(data), // post 请求的数据
51 timeout: 30000, // 超时时间, 单位毫秒 51 timeout: 30000, // 超时时间, 单位毫秒
52 headers: { 52 headers: {
1 import axios from 'axios' 1 import axios from 'axios'
2 2
3 -let base = '/hqpt-user-center/system/log'; 3 +let base = '/cloud-user-center/system/log';
4 4
5 5
6 -export const getList = params => { return axios.get(`${base}/list`, { params: params }); }; 6 +export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
1 import axios from 'axios' 1 import axios from 'axios'
2 2
3 -let base = '/hqpt-user-center/perm'; 3 +let base = '/cloud-user-center/perm';
4 4
5 5
6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); }; 6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
1 import axios from 'axios' 1 import axios from 'axios'
2 2
3 -let base = '/hqpt-user-center/role'; 3 +let base = '/cloud-user-center/role';
4 4
5 5
6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); }; 6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
1 import http from './http.js' 1 import http from './http.js'
2 -let baseUrl = '/hqpt-user-center/user'  
3 - 2 +let baseUrl = '/cloud-user-center/user'
4 export const getUserList = params => { return http.get(`${baseUrl}/list`, params); }; 3 export const getUserList = params => { return http.get(`${baseUrl}/list`, params); };
5 4
6 export const getUserListPage = params => { return http.get(`/user/list`,params) }; 5 export const getUserListPage = params => { return http.get(`/user/list`,params) };
1 var SIGN_REGEXP = /([yMdhsm])(\1*)/g; 1 var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
2 var DEFAULT_PATTERN = 'yyyy-MM-dd'; 2 var DEFAULT_PATTERN = 'yyyy-MM-dd';
  3 +/**
  4 + * 根据数组 元素的“值” 来删除或者获取数据
  5 + * 使用方法arrList.splice(arrList.contains('c'),1)
  6 + */
  7 +Array.prototype.contains = function(obj) {
  8 + var i = this.length;
  9 + while (i--) {
  10 + if (this[i] === obj) {
  11 + return i; // 返回的这个 i 就是元素的索引下标，
  12 + }
  13 + }
  14 + return false;
  15 +}
3 16
4 function padding(s, len) { 17 function padding(s, len) {
5 - var len = len - (s + '').length; 18 + len = len - (s + '').length;
6 for (var i = 0; i < len; i++) { s = '0' + s; } 19 for (var i = 0; i < len; i++) { s = '0' + s; }
7 return s; 20 return s;
8 -}; 21 +}
9 22
10 export default { 23 export default {
11 getQueryStringByName: function (name) { 24 getQueryStringByName: function (name) {
@@ -67,4 +80,4 @@ export default { @@ -67,4 +80,4 @@ export default {
67 } 80 }
68 81
69 82
70 -}; 83 +};
@@ -53,7 +53,7 @@ let routes = [ @@ -53,7 +53,7 @@ let routes = [
53 iconCls: 'el-icon-setting',//图标样式class 53 iconCls: 'el-icon-setting',//图标样式class
54 children: [ 54 children: [
55 { path: '/user', component: User, name: '用户管理' }, 55 { path: '/user', component: User, name: '用户管理' },
56 - { path: '/role', component: Role, name: '岗位管理' }, 56 + { path: '/role', component: Role, name: '组织机构' },
57 { path: '/perm', component: Perm, name: '权限管理' }, 57 { path: '/perm', component: Perm, name: '权限管理' },
58 { path: '/log', component: LOG, name: '系统日志' }, 58 { path: '/log', component: LOG, name: '系统日志' },
59 { path: '/department', component: Department, name: '部门管理' }, 59 { path: '/department', component: Department, name: '部门管理' },
1 <template> 1 <template>
2 - <el-row class="container"> 2 + <el-row class="container darkmenu" style="margin-top: 0px;">
3 <el-col :span="24" class="header"> 3 <el-col :span="24" class="header">
4 <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'"> 4 <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
5 -<!-- {{collapsed?'':sysName}}-->水电费缴费平台 5 + {{collapsed?'':sysName}}
6 </el-col> 6 </el-col>
7 <el-col :span="10"> 7 <el-col :span="10">
8 <div class="tools" @click.prevent="collapse"> 8 <div class="tools" @click.prevent="collapse">
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 <el-col :span="24" class="main"> 23 <el-col :span="24" class="main">
24 <aside :class="collapsed?'menu-collapsed':'menu-expanded'"> 24 <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
25 <!--导航菜单--> 25 <!--导航菜单-->
26 - <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed" style="min-width: 230px" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> 26 + <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed" style="min-width: 230px">
27 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> 27 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
28 <el-submenu :index="index+''" v-if="!item.leaf"> 28 <el-submenu :index="index+''" v-if="!item.leaf">
29 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> 29 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
@@ -42,44 +42,50 @@ @@ -42,44 +42,50 @@
42 </ul> 42 </ul>
43 </template> 43 </template>
44 <template v-else> 44 <template v-else>
45 - <li class="el-submenu">  
46 - <div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>  
47 - </li>  
48 - </template> 45 + <li class="el-submenu">
  46 + <div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
49 </li> 47 </li>
50 - </ul>  
51 - </aside>  
52 - <section class="content-container">  
53 - <div class="grid-content bg-purple-light">  
54 - <el-col :span="24" class="breadcrumb-container">  
55 - <strong class="title">{{$route.name}}</strong>  
56 - <el-breadcrumb separator="/" class="breadcrumb-inner">  
57 - <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">  
58 - {{ item.name }}  
59 - </el-breadcrumb-item>  
60 - </el-breadcrumb>  
61 - </el-col>  
62 - <el-col :span="24" class="content-wrapper">  
63 - <transition name="fade" mode="out-in">  
64 - <router-view></router-view>  
65 - </transition>  
66 - </el-col>  
67 - </div>  
68 - </section> 48 +</template>
  49 +</li>
  50 +</ul>
  51 +</aside>
  52 +<section class="content-container">
  53 + <div class="grid-content bg-purple-light">
  54 + <el-col :span="24" class="breadcrumb-container">
  55 + <strong class="title">{{$route.name}}</strong>
  56 + <el-breadcrumb separator="/" class="breadcrumb-inner">
  57 + <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
  58 + {{ item.name }}
  59 + </el-breadcrumb-item>
  60 + </el-breadcrumb>
  61 + </el-col>
  62 + <el-col :span="24" class="content-wrapper">
  63 + <transition name="fade" mode="out-in">
  64 + <router-view :key="$route.path +$route.query.t"></router-view>
  65 + </transition>
69 </el-col> 66 </el-col>
70 - </el-row> 67 + </div>
  68 +</section>
  69 +</el-col>
  70 +</el-row>
71 </template> 71 </template>
72 72
73 -  
74 <script> 73 <script>
75 - import rt from '../routes'  
76 - export default { 74 + import rt from '../routes'
  75 + export default {
  76 +
  77 + provide() {
  78 + return {
  79 + reload: this.reload
  80 + }
  81 + },
77 data() { 82 data() {
78 return { 83 return {
79 - sysName:'后勤管理平台', 84 + sysName:'易通快速通关申报管理系统',
80 collapsed:false, 85 collapsed:false,
81 sysUserName: '', 86 sysUserName: '',
82 sysUserAvatar: '', 87 sysUserAvatar: '',
  88 + isRouterAlive: true,
83 form: { 89 form: {
84 name: '', 90 name: '',
85 region: '', 91 region: '',
@@ -93,6 +99,16 @@ @@ -93,6 +99,16 @@
93 } 99 }
94 }, 100 },
95 methods: { 101 methods: {
  102 + reload() {
  103 + this.$nextTick(function () {
  104 + this.$router.push({
  105 + path: this.$router.path,
  106 + query:{
  107 + t: new Date().getTime()
  108 + }
  109 + })
  110 + })
  111 + },
96 onSubmit() { 112 onSubmit() {
97 console.log('submit!'); 113 console.log('submit!');
98 }, 114 },
@@ -103,7 +119,7 @@ @@ -103,7 +119,7 @@
103 console.log('handleclose'); 119 console.log('handleclose');
104 }, 120 },
105 handleselect: function (a, b) { 121 handleselect: function (a, b) {
106 - console.log('handleselect!'); 122 + this.reload()
107 }, 123 },
108 //退出登录 124 //退出登录
109 logout: function () { 125 logout: function () {
@@ -112,11 +128,10 @@ @@ -112,11 +128,10 @@
112 //type: 'warning' 128 //type: 'warning'
113 }).then(() => { 129 }).then(() => {
114 sessionStorage.removeItem('user'); 130 sessionStorage.removeItem('user');
115 - sessionStorage.removeItem('menu');  
116 -  
117 - //退出后初始化原来的路由  
118 - let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));  
119 - console.log(sysRoutes); 131 + sessionStorage.removeItem('menu');
  132 + //退出后初始化原来的路由
  133 + let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
  134 + console.log(sysRoutes);
120 _this.$router.options.routes = sysRoutes; 135 _this.$router.options.routes = sysRoutes;
121 136
122 _this.$router.push('/login'); 137 _this.$router.push('/login');
@@ -135,7 +150,7 @@ @@ -135,7 +150,7 @@
135 } 150 }
136 }, 151 },
137 mounted() { 152 mounted() {
138 - var _this = this; 153 + var _this = this;
139 var user = sessionStorage.getItem('user'); 154 var user = sessionStorage.getItem('user');
140 if (user) { 155 if (user) {
141 user = JSON.parse(user); 156 user = JSON.parse(user);
@@ -145,10 +160,10 @@ @@ -145,10 +160,10 @@
145 //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由 160 //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
146 var userRouters = sessionStorage.getItem('menu'); 161 var userRouters = sessionStorage.getItem('menu');
147 if (userRouters) { 162 if (userRouters) {
148 - userRouters = JSON.parse(userRouters);  
149 - _this.$router.options.routes = userRouters;  
150 - console.log("home:");  
151 - console.log(_this.$router.options.routes); 163 + userRouters = JSON.parse(userRouters);
  164 + _this.$router.options.routes = userRouters;
  165 + console.log("home:");
  166 + console.log(_this.$router.options.routes);
152 } 167 }
153 } 168 }
154 } 169 }
@@ -157,7 +172,6 @@ @@ -157,7 +172,6 @@
157 172
158 <style scoped lang="scss"> 173 <style scoped lang="scss">
159 @import '~scss_vars'; 174 @import '~scss_vars';
160 -  
161 .container { 175 .container {
162 position: absolute; 176 position: absolute;
163 top: 0px; 177 top: 0px;
@@ -166,7 +180,7 @@ @@ -166,7 +180,7 @@
166 .header { 180 .header {
167 height: 60px; 181 height: 60px;
168 line-height: 60px; 182 line-height: 60px;
169 - background: $color-primary; 183 + background: $color-primary url("/static/images/air-banner.png");
170 color:#fff; 184 color:#fff;
171 .userinfo { 185 .userinfo {
172 text-align: right; 186 text-align: right;
@@ -229,9 +243,6 @@ @@ -229,9 +243,6 @@
229 // position: absolute; 243 // position: absolute;
230 // top: 0px; 244 // top: 0px;
231 // bottom: 0px; 245 // bottom: 0px;
232 - .el-menu{  
233 - height: 100%;  
234 - }  
235 .collapsed{ 246 .collapsed{
236 width:60px; 247 width:60px;
237 .item{ 248 .item{
@@ -268,16 +279,21 @@ @@ -268,16 +279,21 @@
268 // bottom: 0px; 279 // bottom: 0px;
269 // left: 230px; 280 // left: 230px;
270 overflow-y: scroll; 281 overflow-y: scroll;
271 - padding: 20px; 282 + padding: 10px;
272 .breadcrumb-container { 283 .breadcrumb-container {
273 //margin-bottom: 15px; 284 //margin-bottom: 15px;
274 .title { 285 .title {
275 width: 200px; 286 width: 200px;
276 float: left; 287 float: left;
277 color: #475669; 288 color: #475669;
  289 + margin-left: 10px;
278 } 290 }
279 .breadcrumb-inner { 291 .breadcrumb-inner {
280 float: right; 292 float: right;
  293 + margin-right:10px;
  294 + }
  295 + .el-breadcrumb{
  296 + line-height:36px;
281 } 297 }
282 } 298 }
283 .content-wrapper { 299 .content-wrapper {
@@ -287,4 +303,42 @@ @@ -287,4 +303,42 @@
287 } 303 }
288 } 304 }
289 } 305 }
  306 +</style>
  307 +<style lang="scss">
  308 + .darkmenu{
  309 + .main {
  310 + aside {
  311 + .el-menu{
  312 + height: 100%;
  313 + background: #606060;
  314 + .el-menu-item {
  315 + i{
  316 + color: white;
  317 + }
  318 + color: white;
  319 + }
  320 + .el-menu-item.is-active{
  321 + color:#e6a23c;
  322 + }
  323 + .el-menu-item:hover,.el-menu-item:focus{
  324 + background-color: #1a4496;
  325 + }
  326 + .el-submenu {
  327 + ul.el-menu.el-menu--inline{
  328 + background: #303030;
  329 + }
  330 + .el-submenu__title {
  331 + color: white;
  332 + i{
  333 + color: white;
  334 + }
  335 + }
  336 + .el-submenu__title:hover {
  337 + background-color: #1a4496;
  338 + }
  339 + }
  340 + }
  341 + }
  342 + }
  343 + }
290 </style> 344 </style>
@@ -3,32 +3,32 @@ @@ -3,32 +3,32 @@
3 <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm"> 3 <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">
4 <h3 class="title">系统登录</h3> 4 <h3 class="title">系统登录</h3>
5 <el-form-item prop="account"> 5 <el-form-item prop="account">
6 - <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input> 6 + <el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>
7 </el-form-item> 7 </el-form-item>
8 <el-form-item prop="checkPass"> 8 <el-form-item prop="checkPass">
9 - <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> 9 + <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
10 </el-form-item> 10 </el-form-item>
11 - <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> 11 + <el-checkbox v-model="checked" checked class="remeberme">记住密码</el-checkbox>
12 <el-form-item style="width:100%;"> 12 <el-form-item style="width:100%;">
13 <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button> 13 <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>
14 <!--<el-button @click.native.prevent="handleReset2">重置</el-button>--> 14 <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
15 </el-form-item> 15 </el-form-item>
16 </el-form> 16 </el-form>
17 - <div class="homepage-hero-module">  
18 - <div class="video-container">  
19 - <div :style="fixStyle" class="filter"></div>  
20 - <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">  
21 - <source src="/static/login/New-jumbo.mp4" type="video/mp4"/>  
22 - 浏览器不支持 video 标签，建议升级浏览器。  
23 - <!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->  
24 - <!--浏览器不支持 video 标签，建议升级浏览器。-->  
25 - </video>  
26 - <div class="poster hidden" v-if="!vedioCanPlay">  
27 - <img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt=""> 17 + <div class="homepage-hero-module">
  18 + <div class="video-container">
  19 + <div :style="fixStyle" class="filter"></div>
  20 + <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
  21 + <source src="/static/login/New-jumbo.mp4" type="video/mp4"/>
  22 + 浏览器不支持 video 标签，建议升级浏览器。
  23 + <!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->
  24 + <!--浏览器不支持 video 标签，建议升级浏览器。-->
  25 + </video>
  26 + <div class="poster hidden" v-if="!vedioCanPlay">
  27 + <img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">
  28 + </div>
28 </div> 29 </div>
29 </div> 30 </div>
30 </div> 31 </div>
31 - </div>  
32 </template> 32 </template>
33 33
34 <script> 34 <script>
@@ -38,14 +38,14 @@ @@ -38,14 +38,14 @@
38 export default { 38 export default {
39 data() { 39 data() {
40 return { 40 return {
41 - vedioCanPlay: true,  
42 - fixStyle: '',  
43 - logining: false,  
44 - ruleForm2: {  
45 - account: 'admin',  
46 - checkPass: '123456'  
47 - },  
48 - rules2: { 41 + vedioCanPlay: true,
  42 + fixStyle: '',
  43 + logining: false,
  44 + ruleForm2: {
  45 + account: '',
  46 + checkPass: ''
  47 + },
  48 + rules2: {
49 account: [ 49 account: [
50 { required: true, message: '请输入账号', trigger: 'blur' }, 50 { required: true, message: '请输入账号', trigger: 'blur' },
51 //{ validator: validaePass } 51 //{ validator: validaePass }
@@ -54,132 +54,132 @@ @@ -54,132 +54,132 @@
54 { required: true, message: '请输入密码', trigger: 'blur' }, 54 { required: true, message: '请输入密码', trigger: 'blur' },
55 //{ validator: validaePass2 } 55 //{ validator: validaePass2 }
56 ] 56 ]
57 - },  
58 - checked: true,  
59 - userMenus: [] 57 + },
  58 + checked: true,
  59 + userMenus: []
60 }; 60 };
61 }, 61 },
62 methods: { 62 methods: {
63 - canplay() {  
64 - this.vedioCanPlay = true  
65 - }, 63 + canplay() {
  64 + this.vedioCanPlay = true
  65 + },
66 handleReset2() { 66 handleReset2() {
67 this.$refs.ruleForm2.resetFields(); 67 this.$refs.ruleForm2.resetFields();
68 }, 68 },
69 - handleMenuList : function (router,menu) {  
70 - var _this = this;  
71 - var routerName = "";  
72 - var routerTemp = router.concat(); 69 + handleMenuList : function (router,menu) {
  70 + var _this = this;
  71 + var routerName = "";
  72 + var routerTemp = router.concat();
73 73
74 - routerTemp.forEach(function (v_router,v_index,v_arr) {  
75 - routerName = v_router.name; 74 + routerTemp.forEach(function (v_router,v_index,v_arr) {
  75 + routerName = v_router.name;
76 76
77 - //查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除  
78 - let result = menu.find(item => {  
79 - return item.name === routerName;  
80 - }); 77 + //查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
  78 + let result = menu.find(item => {
  79 + return item.name === routerName;
  80 + });
81 81
82 - //匹配到继续判断是否子元素,有子元素继续递归  
83 - if (result) {  
84 - if (v_router.children && v_router.children.length>0) {  
85 - _this.handleMenuList(v_router.children, result.children);  
86 - }  
87 - }else {  
88 - //没有则可以移除  
89 - let deletRouter = router.findIndex(itm => itm.name === routerName );  
90 - router.splice(deletRouter,1);  
91 - }  
92 - });  
93 - console.log("longined router:");  
94 - console.log(routerName);  
95 - console.log(_this.$router.options.routes); 82 + //匹配到继续判断是否子元素,有子元素继续递归
  83 + if (result) {
  84 + if (v_router.children && v_router.children.length>0) {
  85 + _this.handleMenuList(v_router.children, result.children);
  86 + }
  87 + }else {
  88 + //没有则可以移除
  89 + let deletRouter = router.findIndex(itm => itm.name === routerName );
  90 + router.splice(deletRouter,1);
  91 + }
  92 + });
  93 + console.log("longined router:");
  94 + console.log(routerName);
  95 + console.log(_this.$router.options.routes);
96 // 本地存储用户目录 ，防刷新目录丢失用 96 // 本地存储用户目录 ，防刷新目录丢失用
97 - sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));  
98 - },  
99 - handleSubmit2: function (ev) {  
100 - var _this = this;  
101 - this.$refs.ruleForm2.validate((valid) => {  
102 - if (valid) {  
103 - //_this.$router.replace('/table');  
104 - this.logining = true;  
105 - //NProgress.start();  
106 - var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};  
107 - http.login(loginParams).then(res => {  
108 - this.logining = false;  
109 - //NProgress.done();  
110 - let status = res.status;  
111 - let authentication = res.data.authentication;  
112 - let token = authentication.token;  
113 - let loginUserMenus = res.data.loginUserMenus;  
114 - if (status !== 200) {  
115 - let msg = "登录错误";  
116 - this.$message({  
117 - message: msg,  
118 - type: "error"  
119 - });  
120 - } else if (token) {  
121 - sessionStorage.setItem('user', JSON.stringify(authentication));  
122 - sessionStorage.setItem('token','Bearer '+ token);  
123 - //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了  
124 - axios.defaults.headers.common['Authorization'] = 'Bearer '+token;  
125 - //处理用户menu  
126 - _this.userMenus = loginUserMenus.list;  
127 - console.log("userMenus:");  
128 - console.log(_this.userMenus);  
129 - console.log(loginUserMenus.list);  
130 - let sysMenus = _this.$router.options.routes; 97 + sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
  98 + },
  99 + handleSubmit2: function (ev) {
  100 + var _this = this;
  101 + this.$refs.ruleForm2.validate((valid) => {
  102 + if (valid) {
  103 + //_this.$router.replace('/table');
  104 + this.logining = true;
  105 + //NProgress.start();
  106 + var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
  107 + http.login(loginParams).then(res => {
  108 + this.logining = false;
  109 + //NProgress.done();
  110 + let status = res.status;
  111 + let authentication = res.data.authentication;
  112 + let token = authentication.token;
  113 + let loginUserMenus = res.data.loginUserMenus;
  114 + if (status !== 200) {
  115 + let msg = "登录错误";
  116 + this.$message({
  117 + message: msg,
  118 + type: "error"
  119 + });
  120 + } else if (token) {
  121 + sessionStorage.setItem('user', JSON.stringify(authentication));
  122 + sessionStorage.setItem('token','Bearer '+ token);
  123 + //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
  124 + axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
  125 + //处理用户menu
  126 + _this.userMenus = loginUserMenus.list;
  127 + console.log("userMenus:");
  128 + console.log(_this.userMenus);
  129 + console.log(loginUserMenus.list);
  130 + let sysMenus = _this.$router.options.routes;
131 131
132 - console.log("sysMenus:");  
133 - console.log(sysMenus); 132 + console.log("sysMenus:");
  133 + console.log(sysMenus);
134 134
135 - _this.handleMenuList(_this.$router.options.routes,_this.userMenus); 135 + _this.handleMenuList(_this.$router.options.routes,_this.userMenus);
136 136
137 - console.log("user:");  
138 - console.log(_this.$router.options.routes);  
139 - _this.$router.push({path: '/main'});  
140 - }  
141 - }).catch(error => {  
142 - this.$message({  
143 - message: error.toString(),  
144 - type: "error"  
145 - });  
146 - this.logining = false;  
147 - });  
148 - } else {  
149 - return false;  
150 - } 137 + console.log("user:");
  138 + console.log(_this.$router.options.routes);
  139 + _this.$router.push({path: '/main'});
  140 + }
  141 + }).catch(error => {
  142 + this.$message({
  143 + message: error.toString(),
  144 + type: "error"
  145 + });
  146 + this.logining = false;
151 }); 147 });
152 - } 148 + } else {
  149 + return false;
  150 + }
  151 + });
  152 + }
153 }, 153 },
154 - mounted:function () {  
155 - window.onresize = () => {  
156 - const windowWidth = document.body.clientWidth  
157 - const windowHeight = document.body.clientHeight  
158 - const windowAspectRatio = windowHeight / windowWidth  
159 - let videoWidth  
160 - let videoHeight  
161 - if (windowAspectRatio < 0.5625) {  
162 - videoWidth = windowWidth  
163 - videoHeight = videoWidth * 0.5625  
164 - this.fixStyle = {  
165 - height: windowWidth * 0.5625 + 'px',  
166 - width: windowWidth + 'px',  
167 - 'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',  
168 - 'margin-left': 'initial'  
169 - }  
170 - } else {  
171 - videoHeight = windowHeight  
172 - videoWidth = videoHeight / 0.5625  
173 - this.fixStyle = {  
174 - height: windowHeight + 'px',  
175 - width: windowHeight / 0.5625 + 'px',  
176 - 'margin-left': (windowWidth - videoWidth) / 2 + 'px',  
177 - 'margin-bottom': 'initial'  
178 - }  
179 - } 154 + mounted:function () {
  155 + window.onresize = () => {
  156 + const windowWidth = document.body.clientWidth
  157 + const windowHeight = document.body.clientHeight
  158 + const windowAspectRatio = windowHeight / windowWidth
  159 + let videoWidth
  160 + let videoHeight
  161 + if (windowAspectRatio < 0.5625) {
  162 + videoWidth = windowWidth
  163 + videoHeight = videoWidth * 0.5625
  164 + this.fixStyle = {
  165 + height: windowWidth * 0.5625 + 'px',
  166 + width: windowWidth + 'px',
  167 + 'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
  168 + 'margin-left': 'initial'
  169 + }
  170 + } else {
  171 + videoHeight = windowHeight
  172 + videoWidth = videoHeight / 0.5625
  173 + this.fixStyle = {
  174 + height: windowHeight + 'px',
  175 + width: windowHeight / 0.5625 + 'px',
  176 + 'margin-left': (windowWidth - videoWidth) / 2 + 'px',
  177 + 'margin-bottom': 'initial'
180 } 178 }
181 - window.onresize() 179 + }
182 } 180 }
  181 + window.onresize()
  182 + }
183 } 183 }
184 184
185 </script> 185 </script>
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 </template> 5 </template>
6 6
7 <script> 7 <script>
8 - import rt from '../routes' 8 + import rt from '../routes'
9 export default { 9 export default {
10 } 10 }
11 11
@@ -16,22 +16,26 @@ @@ -16,22 +16,26 @@
16 </el-col> 16 </el-col>
17 17
18 <!--列表--> 18 <!--列表-->
19 - <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> 19 + <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
  20 + row-key="permissionId"
  21 + border
  22 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  23 + >
20 <el-table-column type="selection" width="55"> 24 <el-table-column type="selection" width="55">
21 </el-table-column> 25 </el-table-column>
22 - <el-table-column type="index" width="60"> 26 + <!--<el-table-column type="index" width="60">-->
  27 + <!--</el-table-column>-->
  28 + <el-table-column prop="permissionId" label="ID" width="130" sortable>
23 </el-table-column> 29 </el-table-column>
24 - <el-table-column prop="permissionId" label="ID" width="100" sortable> 30 + <el-table-column prop="name" label="权限名称" min-width="150" sortable>
25 </el-table-column> 31 </el-table-column>
26 - <el-table-column prop="name" label="权限名称" min-width="200" sortable> 32 + <el-table-column prop="description" label="描述" min-width="120" sortable>
27 </el-table-column> 33 </el-table-column>
28 - <el-table-column prop="description" label="描述" min-width="200" sortable> 34 + <el-table-column prop="ismenu" label="是否目录" width="100" :formatter="formatState" sortable>
29 </el-table-column> 35 </el-table-column>
30 - <el-table-column prop="permissionOrder" label="排序" width="100" sortable> 36 + <el-table-column prop="url" label="访问路径" width="300" sortable>
31 </el-table-column> 37 </el-table-column>
32 - <el-table-column prop="url" label="路径" width="100" sortable>  
33 - </el-table-column>  
34 - <el-table-column label="操作" min-width="150"> 38 + <el-table-column label="操作" min-width="100">
35 <template slot-scope="scope"> 39 <template slot-scope="scope">
36 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 40 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
37 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> 41 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
@@ -133,70 +137,70 @@ @@ -133,70 +137,70 @@
133 import util from '../../common/js/util' 137 import util from '../../common/js/util'
134 //import NProgress from 'nprogress' 138 //import NProgress from 'nprogress'
135 import { getList, remove, batchRemove, edit, add } from '../../api/perm_api'; 139 import { getList, remove, batchRemove, edit, add } from '../../api/perm_api';
136 - import moment from 'moment' 140 + import moment from 'moment'
137 export default { 141 export default {
138 data() { 142 data() {
139 return { 143 return {
140 filters: { 144 filters: {
141 - name: '' 145 + name: ''
142 }, 146 },
143 tableList: [], 147 tableList: [],
144 total: 0, 148 total: 0,
145 - pageNum: 1,  
146 - pageSize: 10, 149 + pageNum: 1,
  150 + pageSize: 100,
147 listLoading: false, 151 listLoading: false,
148 sels: [],//列表选中列 152 sels: [],//列表选中列
149 //编辑界面是否显示 153 //编辑界面是否显示
150 editFormVisible: false, 154 editFormVisible: false,
151 editLoading: false, 155 editLoading: false,
152 editFormRules: { 156 editFormRules: {
153 - roleName: [ 157 + roleName: [
154 { required: true, message: '请输入权限名称', trigger: 'blur' } 158 { required: true, message: '请输入权限名称', trigger: 'blur' }
155 ] 159 ]
156 }, 160 },
157 //编辑界面数据 161 //编辑界面数据
158 editForm: { 162 editForm: {
159 - permissionId:'',  
160 - description: '',  
161 - name: '',  
162 - url: '',  
163 - path: '',  
164 - parentId: '',  
165 - ismenu: '',  
166 - permissionOrder:'' 163 + permissionId:'',
  164 + description: '',
  165 + name: '',
  166 + url: '',
  167 + path: '',
  168 + parentId: '',
  169 + ismenu: '',
  170 + permissionOrder:''
167 }, 171 },
168 172
169 addFormVisible: false,//新增界面是否显示 173 addFormVisible: false,//新增界面是否显示
170 addLoading: false, 174 addLoading: false,
171 addFormRules: { 175 addFormRules: {
172 - name: [ 176 + name: [
173 { required: true, message: '请输入权限名称', trigger: 'blur' } 177 { required: true, message: '请输入权限名称', trigger: 'blur' }
174 ], 178 ],
175 - description: [  
176 - { required: true, message: '请输入权限描述', trigger: 'blur' } 179 + description: [
  180 + { required: true, message: '请输入权限描述', trigger: 'blur' }
  181 + ],
  182 + paht: [
  183 + { required: true, message: '请输入总路径', trigger: 'blur' }
  184 + ],
  185 + url: [
  186 + { required: true, message: '请输入权限路径', trigger: 'blur' }
177 ], 187 ],
178 - paht: [  
179 - { required: true, message: '请输入总路径', trigger: 'blur' }  
180 - ],  
181 - url: [  
182 - { required: true, message: '请输入权限路径', trigger: 'blur' }  
183 - ],  
184 - permissionOrder: [  
185 - { required: true, message: '请输入排序字段', trigger: 'blur' }  
186 - ],  
187 - parentId: [  
188 - { required: true, message: '请输入父类ID', trigger: 'blur' }  
189 - ] 188 + permissionOrder: [
  189 + { required: true, message: '请输入排序字段', trigger: 'blur' }
  190 + ],
  191 + parentId: [
  192 + { required: true, message: '请输入父类ID', trigger: 'blur' }
  193 + ]
190 }, 194 },
191 //新增界面数据 195 //新增界面数据
192 addForm: { 196 addForm: {
193 - description: '',  
194 - name: '',  
195 - url: '', 197 + description: '',
  198 + name: '',
  199 + url: '',
196 path: '', 200 path: '',
197 parentId: '', 201 parentId: '',
198 - ismenu: '',  
199 - permissionOrder:'' 202 + ismenu: '',
  203 + permissionOrder:''
200 204
201 } 205 }
202 206
@@ -207,9 +211,9 @@ @@ -207,9 +211,9 @@
207 formatSex: function (row, column) { 211 formatSex: function (row, column) {
208 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; 212 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
209 }, 213 },
210 - formatState: function (row, column) {  
211 - return row.state == true ? '是' : row.state == false ? '否' : '未知';  
212 - }, 214 + formatState: function (row, column) {
  215 + return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
  216 + },
213 handleCurrentChange(val) { 217 handleCurrentChange(val) {
214 this.pageNum = val; 218 this.pageNum = val;
215 this.getTableList(); 219 this.getTableList();
@@ -217,26 +221,26 @@ @@ -217,26 +221,26 @@
217 //获取列表 221 //获取列表
218 getTableList() { 222 getTableList() {
219 let para = { 223 let para = {
220 - pageNum: this.pageNum,  
221 - pageSize: this.pageSize,  
222 - name: this.filters.name 224 + pageNum: this.pageNum,
  225 + pageSize: this.pageSize,
  226 + name: this.filters.name
223 }; 227 };
224 this.listLoading = true; 228 this.listLoading = true;
225 //NProgress.start(); 229 //NProgress.start();
226 - getList(para).then((res) => { 230 + getList(para).then((res) => {
227 this.total = res.data.total; 231 this.total = res.data.total;
228 this.tableList = res.data.list; 232 this.tableList = res.data.list;
229 this.listLoading = false; 233 this.listLoading = false;
230 //NProgress.done(); 234 //NProgress.done();
231 }).catch((error) => { 235 }).catch((error) => {
232 236
233 - this.listLoading = false;  
234 - if(null!= error.response && error.response!==undefined){  
235 - let status= error.response.status;  
236 - let msg = error.response.statusText;  
237 - alert(status+msg); 237 + this.listLoading = false;
  238 + if(null!= error.response && error.response!==undefined){
  239 + let status= error.response.status;
  240 + let msg = error.response.statusText;
  241 + alert(status+msg);
238 }else { 242 }else {
239 - alert(error); 243 + alert(error);
240 } 244 }
241 245
242 246
@@ -252,7 +256,7 @@ @@ -252,7 +256,7 @@
252 this.listLoading = true; 256 this.listLoading = true;
253 //NProgress.start(); 257 //NProgress.start();
254 let para = { permissionId: row.permissionId }; 258 let para = { permissionId: row.permissionId };
255 - remove(para).then((res) => { 259 + remove(para).then((res) => {
256 this.listLoading = false; 260 this.listLoading = false;
257 //NProgress.done(); 261 //NProgress.done();
258 this.$message({ 262 this.$message({
@@ -261,16 +265,16 @@ @@ -261,16 +265,16 @@
261 }); 265 });
262 this.getTableList(); 266 this.getTableList();
263 }).catch((error) => { 267 }).catch((error) => {
264 - this.listLoading = false;  
265 - alert(error); 268 + this.listLoading = false;
  269 + alert(error);
266 }); 270 });
267 }).catch(); 271 }).catch();
268 }, 272 },
269 - /** 273 + /**
270 * 显示编辑界面 274 * 显示编辑界面
271 - * @param index  
272 - * @param row 为这行的数据对象  
273 - */ 275 + * @param index
  276 + * @param row 为这行的数据对象
  277 + */
274 handleEdit: function (index, row) { 278 handleEdit: function (index, row) {
275 this.editFormVisible = true; 279 this.editFormVisible = true;
276 this.editForm = Object.assign({}, row); 280 this.editForm = Object.assign({}, row);
@@ -279,14 +283,14 @@ @@ -279,14 +283,14 @@
279 handleAdd: function () { 283 handleAdd: function () {
280 this.addFormVisible = true; 284 this.addFormVisible = true;
281 this.addForm = { 285 this.addForm = {
282 - username: '',  
283 - password: '',  
284 - sex: 1,  
285 - address: '',  
286 - realname: '',  
287 - email: '',  
288 - mobilephone: '',  
289 - age: 1 286 + username: '',
  287 + password: '',
  288 + sex: 1,
  289 + address: '',
  290 + realname: '',
  291 + email: '',
  292 + mobilephone: '',
  293 + age: 1
290 }; 294 };
291 }, 295 },
292 //编辑 296 //编辑
@@ -297,9 +301,9 @@ @@ -297,9 +301,9 @@
297 this.editLoading = true; 301 this.editLoading = true;
298 //NProgress.start(); 302 //NProgress.start();
299 let para = Object.assign({}, this.editForm); 303 let para = Object.assign({}, this.editForm);
300 - para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');  
301 - this.editLoading = false;  
302 - edit(para).then((res) => { 304 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  305 + this.editLoading = false;
  306 + edit(para).then((res) => {
303 307
304 //NProgress.done(); 308 //NProgress.done();
305 this.$message({ 309 this.$message({
@@ -323,7 +327,7 @@ @@ -323,7 +327,7 @@
323 //NProgress.start(); 327 //NProgress.start();
324 let para = Object.assign({}, this.addForm); 328 let para = Object.assign({}, this.addForm);
325 para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); 329 para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
326 - add(para).then((res) => { 330 + add(para).then((res) => {
327 this.addLoading = false; 331 this.addLoading = false;
328 //NProgress.done(); 332 //NProgress.done();
329 this.$message({ 333 this.$message({
@@ -350,7 +354,7 @@ @@ -350,7 +354,7 @@
350 this.listLoading = true; 354 this.listLoading = true;
351 //NProgress.start(); 355 //NProgress.start();
352 let para = { ids: ids }; 356 let para = { ids: ids };
353 - batchRemove(para).then((res) => { 357 + batchRemove(para).then((res) => {
354 this.listLoading = false; 358 this.listLoading = false;
355 //NProgress.done(); 359 //NProgress.done();
356 this.$message({ 360 this.$message({
@@ -16,28 +16,38 @@ @@ -16,28 +16,38 @@
16 </el-col> 16 </el-col>
17 17
18 <!--列表--> 18 <!--列表-->
19 - <el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> 19 + <el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
  20 + default-expand-all
  21 + row-key="roleId"
  22 + border
  23 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
20 <el-table-column type="selection" width="55"> 24 <el-table-column type="selection" width="55">
21 </el-table-column> 25 </el-table-column>
22 - <el-table-column type="index" width="60">  
23 - </el-table-column>  
24 - <el-table-column prop="roleId" label="ID" width="100" sortable> 26 + <!--<el-table-column type="index" width="60">-->
  27 + <!--</el-table-column>-->
  28 + <el-table-column prop="roleId" label="ID" width="120">
25 </el-table-column> 29 </el-table-column>
26 <el-table-column prop="roleName" label="岗位/角色名称" min-width="200" sortable> 30 <el-table-column prop="roleName" label="岗位/角色名称" min-width="200" sortable>
27 </el-table-column> 31 </el-table-column>
28 - <el-table-column prop="departmentName" label="部门名称" min-width="200" sortable> 32 + <!--<el-table-column prop="departmentName" label="部门名称" min-width="200" sortable>-->
  33 + <!--</el-table-column>-->
  34 + <el-table-column prop="description" label="描述" min-width="160" >
  35 + </el-table-column>
  36 + <el-table-column prop="type" label="类型" min-width="80" sortable>
  37 + </el-table-column>
  38 + <el-table-column prop="businessLicense" label="工商代码" min-width="180" >
29 </el-table-column> 39 </el-table-column>
30 - <el-table-column prop="description" label="岗位/角色描述" min-width="200" sortable> 40 + <el-table-column prop="customsRegCode" label="海关备案代码" min-width="150" >
31 </el-table-column> 41 </el-table-column>
32 <el-table-column label="操作" min-width="260"> 42 <el-table-column label="操作" min-width="260">
33 <template slot-scope="scope"> 43 <template slot-scope="scope">
  44 + <el-button type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>
34 <el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button> 45 <el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
35 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 46 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
36 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> 47 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
37 </template> 48 </template>
38 </el-table-column> 49 </el-table-column>
39 </el-table> 50 </el-table>
40 -  
41 <!--工具条--> 51 <!--工具条-->
42 <el-col :span="24" class="toolbar"> 52 <el-col :span="24" class="toolbar">
43 <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> 53 <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
@@ -76,23 +86,37 @@ @@ -76,23 +86,37 @@
76 86
77 <!--新增界面--> 87 <!--新增界面-->
78 <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false"> 88 <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
79 - <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">  
80 - <el-form-item label="岗位/角色名称" prop="roleName">  
81 - <el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入岗位/角色名称：例如:ROLE_name"></el-input> 89 + <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
  90 + <el-form-item label="上级组织机构">
  91 + <span>{{addForm.parentName}}</span>
  92 + </el-form-item>
  93 + <el-form-item label="组织机构名称" prop="roleName">
  94 + <el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入组织机构名称：例如:公司名称"></el-input>
82 </el-form-item> 95 </el-form-item>
83 - <el-form-item label="岗位/角色描述" prop="description">  
84 - <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入岗位/角色描述：例如:用户管理员"></el-input> 96 + <el-form-item label="组织机构描述" prop="description">
  97 + <el-input v-model="addForm.description" auto-complete="off" placeholder="组织机构描述：例如:组织机构简介"></el-input>
85 </el-form-item> 98 </el-form-item>
86 - <el-form-item label="部门名称" prop="roleSign">  
87 - <el-select v-model="addForm.departmentId" placeholder="请选择"> 99 + <el-form-item label="组织机构类型" prop="description">
  100 + <el-select
  101 + v-model="addForm.type"
  102 + filterable
  103 + allow-create
  104 + default-first-option
  105 + placeholder="请选择类型">
88 <el-option 106 <el-option
89 - v-for="item in departmentNameList"  
90 - :key="item.departmentId"  
91 - :label="item.departmentName"  
92 - :value="item.departmentId"> 107 + v-for="item in companyOption"
  108 + :key="item.value"
  109 + :label="item.label"
  110 + :value="item.value">
93 </el-option> 111 </el-option>
94 </el-select> 112 </el-select>
95 </el-form-item> 113 </el-form-item>
  114 + <el-form-item label="工商企业代码" prop="description">
  115 + <el-input v-model="addForm.businessLicense" auto-complete="off" placeholder="社会信用代码或者组织机构代码"></el-input>
  116 + </el-form-item>
  117 + <el-form-item label="海关备案代码" prop="description">
  118 + <el-input v-model="addForm.customsRegCode" auto-complete="off" placeholder="海关备案后返回的备案代码"></el-input>
  119 + </el-form-item>
96 </el-form> 120 </el-form>
97 <div slot="footer" class="dialog-footer"> 121 <div slot="footer" class="dialog-footer">
98 <el-button @click.native="addFormVisible = false">取消</el-button> 122 <el-button @click.native="addFormVisible = false">取消</el-button>
@@ -103,9 +127,11 @@ @@ -103,9 +127,11 @@
103 <!--权限设置界面--> 127 <!--权限设置界面-->
104 <el-dialog title="岗位的权限设置" :visible.sync="PermFormVisible" :close-on-click-modal="false"> 128 <el-dialog title="岗位的权限设置" :visible.sync="PermFormVisible" :close-on-click-modal="false">
105 <el-form :model="permForm" label-width="80px" ref="permForm"> 129 <el-form :model="permForm" label-width="80px" ref="permForm">
106 - <el-checkbox-group v-model="permIds" size="small">  
107 - <el-checkbox v-for="perm in permissons" :label="perm.permissionId" :key="perm.permissionId">{{perm.name}}</el-checkbox>  
108 - </el-checkbox-group> 130 + <el-tree :data="permissons" :props="treeDefaultProps"
  131 + @check="clickDeal"
  132 + show-checkbox highlight-current default-expand-all check-on-click-node check-strictly
  133 + node-key="permissionId" ref="tree">
  134 + </el-tree>
109 </el-form> 135 </el-form>
110 <div slot="footer" class="dialog-footer"> 136 <div slot="footer" class="dialog-footer">
111 <el-button @click.native="PermFormVisible = false">取消</el-button> 137 <el-button @click.native="PermFormVisible = false">取消</el-button>
@@ -120,66 +146,85 @@ @@ -120,66 +146,85 @@
120 import NProgress from 'nprogress' 146 import NProgress from 'nprogress'
121 import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api'; 147 import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
122 import { getList as getDepartmentList} from '../../api/department'; 148 import { getList as getDepartmentList} from '../../api/department';
123 - import { getList as permList } from '../../api/perm_api';  
124 - import moment from 'moment' 149 + import { getList as permList } from '../../api/perm_api';
  150 + import moment from 'moment'
125 export default { 151 export default {
126 data() { 152 data() {
127 return { 153 return {
128 filters: { 154 filters: {
129 - roleName: '' 155 + roleName: ''
  156 + },
  157 + companyOption: [
  158 + {
  159 + label: "集团",
  160 + value: "集团"
  161 + },
  162 + {
  163 + label: "公司",
  164 + value: "公司"
  165 + }
  166 + ],
  167 + treeDefaultProps: {
  168 + children: 'children',
  169 + label: 'name',
130 }, 170 },
131 - departmentNameList:[], 171 + departmentNameList:[],
132 roles: [], 172 roles: [],
133 permissons: [], 173 permissons: [],
134 permIds: [], 174 permIds: [],
135 total: 0, 175 total: 0,
136 - pageNum: 1,  
137 - pageSize: 5, 176 + pageNum: 1,
  177 + pageSize: 5,
138 listLoading: false, 178 listLoading: false,
139 sels: [],//列表选中列 179 sels: [],//列表选中列
140 //编辑界面是否显示 180 //编辑界面是否显示
141 editFormVisible: false, 181 editFormVisible: false,
142 editLoading: false, 182 editLoading: false,
143 editFormRules: { 183 editFormRules: {
144 - roleName: [ 184 + roleName: [
145 { required: true, message: '请输入岗位/角色名称', trigger: 'blur' } 185 { required: true, message: '请输入岗位/角色名称', trigger: 'blur' }
146 ] 186 ]
147 }, 187 },
148 //编辑界面数据 188 //编辑界面数据
149 editForm: { 189 editForm: {
150 - roleId: 1,  
151 - description: '',  
152 - roleName: '',  
153 - roleSign: 1, 190 + roleId: 1,
  191 + description: '',
  192 + roleName: '',
  193 + roleSign: 1,
154 departmentId:'' 194 departmentId:''
155 }, 195 },
156 196
157 - //新增界面是否显示 197 + //新增界面是否显示
158 addFormVisible: false, 198 addFormVisible: false,
159 //设置权限界面是否显示 199 //设置权限界面是否显示
160 - PermFormVisible: false, 200 + PermFormVisible: false,
161 addLoading: false, 201 addLoading: false,
162 addFormRules: { 202 addFormRules: {
163 - roleName: [ 203 + roleName: [
164 { required: true, message: '请输入岗位/角色名称', trigger: 'blur' } 204 { required: true, message: '请输入岗位/角色名称', trigger: 'blur' }
165 ], 205 ],
166 - description: [  
167 - { required: true, message: '请输入岗位/角色描述', trigger: 'blur' } 206 + description: [
  207 + { required: true, message: '请输入岗位/角色描述', trigger: 'blur' }
168 ] 208 ]
169 }, 209 },
170 //新增界面数据 210 //新增界面数据
171 addForm: { 211 addForm: {
172 - description: '',  
173 - roleName: '',  
174 - roleSign: 1,  
175 - departmentId:'' 212 + description: '',
  213 + roleName: '',
  214 + roleSign: 1,
  215 + departmentId:'',
  216 + type: '',
  217 + businessLicense: '',
  218 + customsRegCode: '',
  219 + parentName: ''
  220 +
176 }, 221 },
177 - permForm: {  
178 - roleId: 1,  
179 - description: '',  
180 - roleName: '',  
181 - roleSign: 1,  
182 - permissions: [] 222 + permForm: {
  223 + roleId: 1,
  224 + description: '',
  225 + roleName: '',
  226 + roleSign: 1,
  227 + permissions: []
183 } 228 }
184 229
185 } 230 }
@@ -189,9 +234,9 @@ @@ -189,9 +234,9 @@
189 formatSex: function (row, column) { 234 formatSex: function (row, column) {
190 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; 235 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
191 }, 236 },
192 - formatState: function (row, column) {  
193 - return row.state == true ? '是' : row.state == false ? '否' : '未知';  
194 - }, 237 + formatState: function (row, column) {
  238 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  239 + },
195 handleCurrentChange(val) { 240 handleCurrentChange(val) {
196 this.pageNum = val; 241 this.pageNum = val;
197 this.getRoles(); 242 this.getRoles();
@@ -199,79 +244,82 @@ @@ -199,79 +244,82 @@
199 //获取角色列表 244 //获取角色列表
200 getRoles() { 245 getRoles() {
201 let para = { 246 let para = {
202 - pageNum: this.pageNum,  
203 - pageSize: this.pageSize,  
204 - roleName: this.filters.roleName 247 + pageNum: this.pageNum,
  248 + pageSize: this.pageSize,
  249 + roleName: this.filters.roleName
205 }; 250 };
206 this.listLoading = true; 251 this.listLoading = true;
207 //NProgress.start(); 252 //NProgress.start();
208 - getList(para).then((res) => { 253 + getList(para).then((res) => {
209 this.total = res.data.total; 254 this.total = res.data.total;
210 this.roles = res.data.list; 255 this.roles = res.data.list;
211 this.listLoading = false; 256 this.listLoading = false;
212 //NProgress.done(); 257 //NProgress.done();
213 }).catch((error) => { 258 }).catch((error) => {
214 259
215 - this.listLoading = false;  
216 - if(null!= error.response && error.response!==undefined){  
217 - let status= error.response.status;  
218 - let msg = error.response.statusText;  
219 - alert(status+msg); 260 + this.listLoading = false;
  261 + if(null!= error.response && error.response!==undefined){
  262 + let status= error.response.status;
  263 + let msg = error.response.statusText;
  264 + alert(status+msg);
220 }else { 265 }else {
221 - alert(error); 266 + alert(error);
222 } 267 }
223 268
224 }); 269 });
225 270
226 }, 271 },
227 272
  273 + //获取部门列表
  274 + getdepartmentNames() {
228 275
229 - //获取部门列表  
230 - getdepartmentNames() {  
231 -  
232 - this.listLoading = true;  
233 - //NProgress.start();  
234 - getDepartmentList().then((res) => {  
235 - this.total = res.data.total;  
236 - this.departmentNameList = res.data.list;  
237 - this.listLoading = false;  
238 - //NProgress.done();  
239 - }).catch((error) => { 276 + this.listLoading = true;
  277 + //NProgress.start();
  278 + getDepartmentList().then((res) => {
  279 + this.total = res.data.total;
  280 + this.departmentNameList = res.data.list;
  281 + this.listLoading = false;
  282 + //NProgress.done();
  283 + }).catch((error) => {
240 284
241 - this.listLoading = false;  
242 - if(null!= error.response && error.response!==undefined){  
243 - let status= error.response.status;  
244 - let msg = error.response.statusText;  
245 - alert(status+msg);  
246 - }else {  
247 - alert(error);  
248 - } 285 + this.listLoading = false;
  286 + if(null!= error.response && error.response!==undefined){
  287 + let status= error.response.status;
  288 + let msg = error.response.statusText;
  289 + alert(status+msg);
  290 + }else {
  291 + alert(error);
  292 + }
249 293
250 - }); 294 + });
251 295
252 - }, 296 + },
253 297
254 //获取权限列表 298 //获取权限列表
255 - getPermList() {  
256 - let para = {  
257 - pageNum: 1,  
258 - pageSize: 200  
259 - };  
260 - NProgress.start();  
261 - permList(para).then((res) => {  
262 - this.permissons = res.data.list;  
263 - NProgress.done();  
264 - }).catch((error) => {  
265 - if(null!= error.response && error.response!==undefined){  
266 - let status= error.response.status;  
267 - let msg = error.response.statusText;  
268 - alert(status+msg);  
269 - }else {  
270 - alert(error);  
271 - }  
272 - }); 299 + getPermList() {
  300 + let para = {
  301 + pageNum: 1,
  302 + pageSize: 200
  303 + };
  304 + NProgress.start();
  305 + permList(para).then((res) => {
  306 + this.permissons = res.data.list;
  307 + NProgress.done();
  308 + }).catch((error) => {
  309 + if(null!= error.response && error.response!==undefined){
  310 + let status= error.response.status;
  311 + let msg = error.response.statusText;
  312 + message({
  313 + // 饿了么的消息弹窗组件
  314 + message: status+msg,
  315 + type: "error"
  316 + });
  317 + }else {
  318 + alert(error);
  319 + }
  320 + });
273 321
274 - }, 322 + },
275 //删除 323 //删除
276 handleDel: function (index, row) { 324 handleDel: function (index, row) {
277 this.$confirm('确认删除该记录吗?', '提示', { 325 this.$confirm('确认删除该记录吗?', '提示', {
@@ -280,7 +328,7 @@ @@ -280,7 +328,7 @@
280 this.listLoading = true; 328 this.listLoading = true;
281 //NProgress.start(); 329 //NProgress.start();
282 let para = { roleId: row.roleId }; 330 let para = { roleId: row.roleId };
283 - remove(para).then((res) => { 331 + remove(para).then((res) => {
284 this.listLoading = false; 332 this.listLoading = false;
285 //NProgress.done(); 333 //NProgress.done();
286 this.$message({ 334 this.$message({
@@ -289,50 +337,65 @@ @@ -289,50 +337,65 @@
289 }); 337 });
290 this.getRoles(); 338 this.getRoles();
291 }).catch((error) => { 339 }).catch((error) => {
292 - this.listLoading = false;  
293 - alert(error); 340 + this.listLoading = false;
  341 + alert(error);
294 }); 342 });
295 }).catch(); 343 }).catch();
296 }, 344 },
297 - /** 345 + /**
298 * 显示编辑界面 346 * 显示编辑界面
299 - * @param index  
300 - * @param row 为这行的数据对象  
301 - */ 347 + * @param index
  348 + * @param row 为这行的数据对象
  349 + */
302 handleEdit: function (index, row) { 350 handleEdit: function (index, row) {
303 this.editFormVisible = true; 351 this.editFormVisible = true;
304 this.editForm = Object.assign({}, row); 352 this.editForm = Object.assign({}, row);
305 this.getdepartmentNames(); 353 this.getdepartmentNames();
306 }, 354 },
307 - setPerm: function (index, row) { 355 + setPerm: function (index, row) {
  356 + this.PermFormVisible = true;
  357 + this.getPermList();
308 var _this = this; 358 var _this = this;
309 this.permIds = []; 359 this.permIds = [];
310 - this.PermFormVisible = true;  
311 - this.permForm = Object.assign({}, row); 360 + this.permForm = Object.assign({}, row);
312 let rolePerms = this.permForm.permissions; 361 let rolePerms = this.permForm.permissions;
313 - if (util.checkNull(rolePerms)){  
314 - rolePerms.forEach(function (perm,v_index,v_arr) {  
315 - if(util.checkNull(perm)){  
316 - _this.permIds[v_index] = perm.permissionId; 362 + if (util.checkNull(rolePerms)){
  363 + rolePerms.forEach(function (perm,v_index,v_arr) {
  364 + if(util.checkNull(perm)){
  365 + _this.permIds[v_index] = perm.permissionId;
317 } 366 }
318 - });  
319 - }  
320 - this.getPermList();  
321 - }, 367 + });
  368 + }
  369 +
  370 + this.$nextTick(() => {
  371 +
  372 + //反向适配
  373 + this.$refs.tree.setCheckedKeys(this.permIds);
  374 + });
  375 + },
322 //显示新增界面，每次点开初始化数据 376 //显示新增界面，每次点开初始化数据
323 - handleAdd: function () { 377 + handleAdd: function (index,row) {
324 this.addFormVisible = true; 378 this.addFormVisible = true;
325 this.addForm = { 379 this.addForm = {
326 - username: '',  
327 - password: '',  
328 - sex: 1,  
329 - address: '',  
330 - realname: '',  
331 - email: '',  
332 - mobilephone: '',  
333 - age: 1 380 + description: '',
  381 + roleName: '',
  382 + roleSign: 1,
  383 + departmentId:'',
  384 + type: '',
  385 + businessLicense: '',
  386 + customsRegCode: '',
  387 + parentid: 0
  388 +
334 }; 389 };
335 - this.getdepartmentNames(); 390 + //如果新增下级
  391 + if(util.checkNull(row)){
  392 + //传递上级ID
  393 + let parentRole = Object.assign({}, row);
  394 + this.addForm.parentid = parentRole.roleId;
  395 + this.addForm.parentName = parentRole.roleName;
  396 + }
  397 +
  398 +// this.getdepartmentNames();
336 }, 399 },
337 //编辑 400 //编辑
338 editSubmit: function () { 401 editSubmit: function () {
@@ -347,16 +410,16 @@ @@ -347,16 +410,16 @@
347 para.permissions = null; 410 para.permissions = null;
348 para.roles = null; 411 para.roles = null;
349 // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); 412 // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
350 - /*  
351 - 查询之后格式this.filters.column.create_start_date中日期发生变化;  
352 - Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";  
353 - 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格  
354 - 式;  
355 - */ 413 + /*
  414 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  415 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  416 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  417 + 式;
  418 + */
356 /*moment 安装 npm install moment --save*/ 419 /*moment 安装 npm install moment --save*/
357 - para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');  
358 - this.editLoading = false;  
359 - edit(para).then((res) => { 420 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  421 + this.editLoading = false;
  422 + edit(para).then((res) => {
360 423
361 //NProgress.done(); 424 //NProgress.done();
362 this.$message({ 425 this.$message({
@@ -379,7 +442,7 @@ @@ -379,7 +442,7 @@
379 this.addLoading = true; 442 this.addLoading = true;
380 //NProgress.start(); 443 //NProgress.start();
381 let para = Object.assign({}, this.addForm); 444 let para = Object.assign({}, this.addForm);
382 - add(para).then((res) => { 445 + add(para).then((res) => {
383 this.addLoading = false; 446 this.addLoading = false;
384 //NProgress.done(); 447 //NProgress.done();
385 this.$message({ 448 this.$message({
@@ -395,33 +458,33 @@ @@ -395,33 +458,33 @@
395 }); 458 });
396 }, 459 },
397 //设置角色提交 460 //设置角色提交
398 - setPermSubmit: function () {  
399 - this.$refs.permForm.validate((valid) => {  
400 - if (valid) {  
401 - this.$confirm('确认提交吗？', '提示', {}).then(() => {  
402 - this.addLoading = true;  
403 - //NProgress.start();  
404 - let role = Object.assign({}, this.permForm);  
405 - let roleId = role.roleId;  
406 - let permissionIds = this.permIds 461 + setPermSubmit: function () {
  462 + this.$refs.permForm.validate((valid) => {
  463 + if (valid) {
  464 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  465 + this.addLoading = true;
  466 + //NProgress.start();
  467 + let role = Object.assign({}, this.permForm);
  468 + let roleId = role.roleId;
  469 + let permissionIds = this.$refs.tree.getCheckedKeys();
407 let para = {roleId,permissionIds}; 470 let para = {roleId,permissionIds};
408 - updateRolePerm(para).then((res) => {  
409 - this.addLoading = false;  
410 - if (res.status ===200) {  
411 - this.$message({  
412 - message: '提交成功',  
413 - type: 'success'  
414 - });  
415 - this.$refs['permForm'].resetFields();  
416 - }  
417 - //NProgress.done();  
418 - this.PermFormVisible = false;  
419 - this.getRoles();  
420 - }).catch(error => alert(error));  
421 - });  
422 - }  
423 - });  
424 - }, 471 + updateRolePerm(para).then((res) => {
  472 + this.addLoading = false;
  473 + if (res.status ===200) {
  474 + this.$message({
  475 + message: '提交成功',
  476 + type: 'success'
  477 + });
  478 + this.$refs['permForm'].resetFields();
  479 + }
  480 + //NProgress.done();
  481 + this.PermFormVisible = false;
  482 + this.getRoles();
  483 + }).catch(error => alert(error));
  484 + });
  485 + }
  486 + });
  487 + },
425 selsChange: function (sels) { 488 selsChange: function (sels) {
426 this.sels = sels; 489 this.sels = sels;
427 }, 490 },
@@ -434,7 +497,7 @@ @@ -434,7 +497,7 @@
434 this.listLoading = true; 497 this.listLoading = true;
435 //NProgress.start(); 498 //NProgress.start();
436 let para = { ids: ids }; 499 let para = { ids: ids };
437 - batchRemove(para).then((res) => { 500 + batchRemove(para).then((res) => {
438 this.listLoading = false; 501 this.listLoading = false;
439 //NProgress.done(); 502 //NProgress.done();
440 this.$message({ 503 this.$message({
@@ -446,6 +509,81 @@ @@ -446,6 +509,81 @@
446 }).catch(() => { 509 }).catch(() => {
447 510
448 }); 511 });
  512 + },
  513 + treeHandleCheckChange: function (data, checked, indeterminate) {
  514 + if(checked) {
  515 + this.permIds.push(data.permissionId);
  516 + }else {
  517 + this.permIds.splice(this.permIds.contains(data.permissionId),1);
  518 + }
  519 + console.log(data, checked, indeterminate);
  520 +
  521 + },
  522 + uniteParentSame(id,treeStatus){//当子节点全为未选中时父节点也变为未选中状态
  523 + let node = this.$refs.tree.getNode(permissionId);//获取当前节点的节点树
  524 + if (node.parent !== null && node.parent !== undefined) {
  525 + let parentNode = node.parent.data;//获取当前节点的父节点树
  526 + if (parentNode != undefined){//判断父节点是否存在
  527 + for (let i = 0; i < parentNode.children.length; i++) {
  528 + let checkedKeys = this.$refs.tree.getCheckedKeys();
  529 + let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
  530 + let selectNodes = checkedKeys.concat(hafCheckedKeys);//获取已选择树节点
  531 + let selected = selectNodes.indexOf(parentNode.children[i].permissionId); // -1当前节点的同级节点是否全部未选中
  532 + if (selected !== -1){
  533 + return;
  534 + }
  535 + }
  536 + }else {
  537 + return;
  538 + }
  539 + this.$refs.tree.setChecked(parentNode.permissionId, false);//修改节点为未选择
  540 + if(node.level>2){//判断是否是最上级节点
  541 + this.uniteParentSame(parentNode.permissionId,treeStatus)
  542 + }
  543 + }else {
  544 + return;
  545 + }
  546 + },
  547 +
  548 + // 统一处理子节点为相同的勾选状态
  549 + uniteChildSame(treeList, isSelected){
  550 + this.$refs.tree.setChecked(treeList.permissionId, isSelected);
  551 + if (treeList.children !== undefined){
  552 + for (let i = 0; i < treeList.children.length; i++) {
  553 + this.uniteChildSame(treeList.children[i], isSelected)
  554 + }
  555 + }
  556 + },
  557 + // 统一处理父节点为选中
  558 + selectedParent(currentObj){
  559 + let currentNode = this.$refs.tree.getNode(currentObj);
  560 + if (currentNode.parent.key !== undefined) {
  561 + this.$refs.tree.setChecked(currentNode.parent, true);
  562 + this.selectedParent(currentNode.parent)
  563 + }
  564 + },
  565 + clickDeal: function (currentObj, treeStatus){
  566 + // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
  567 + let selected = treeStatus.checkedKeys.indexOf(currentObj.permissionId); // -1未选中
  568 + // 选中
  569 + if (selected !== -1) {
  570 + // 子节点只要被选中父节点就被选中
  571 + this.selectedParent(currentObj);
  572 + // 统一处理子节点为相同的勾选状态
  573 + this.uniteChildSame(currentObj, true)
  574 + } else {
  575 + // 未选中 处理子节点全部未选中
  576 + if (currentObj.children !== undefined){
  577 + if (currentObj.children.length !== 0) {
  578 + this.uniteChildSame(currentObj, false)
  579 + }
  580 + //放开时为当子节点全为未选中时父节点也变为未选中状态 注释后就是父节点不和子节点强制绑定
  581 + // this.uniteParentSame(currentObj.id,treeStatus)//当子节点全为未选中时父节点也变为未选中状态
  582 + }
  583 + // else {
  584 + // this.uniteParentSame(currentObj.id,treeStatus)
  585 + // }
  586 + }
449 } 587 }
450 }, 588 },
451 mounted() { 589 mounted() {
@@ -19,11 +19,11 @@ @@ -19,11 +19,11 @@
19 </el-col> 19 </el-col>
20 20
21 <!--列表--> 21 <!--列表-->
22 - <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> 22 + <el-table :data="users" highlight-current-row border v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
23 <el-table-column type="selection" width="55"> 23 <el-table-column type="selection" width="55">
24 </el-table-column> 24 </el-table-column>
25 - <el-table-column type="index" width="60">  
26 - </el-table-column> 25 + <!--<el-table-column type="index" width="60">-->
  26 + <!--</el-table-column>-->
27 <el-table-column prop="userId" label="ID" width="100" sortable> 27 <el-table-column prop="userId" label="ID" width="100" sortable>
28 </el-table-column> 28 </el-table-column>
29 <el-table-column prop="username" label="账号" width="120" sortable> 29 <el-table-column prop="username" label="账号" width="120" sortable>
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 </el-table-column> 46 </el-table-column>
47 <el-table-column label="操作" width="250"> 47 <el-table-column label="操作" width="250">
48 <template slot-scope="scope"> 48 <template slot-scope="scope">
49 - <el-button size="small" @click="roleEdit(scope.$index, scope.row)">权限配置</el-button> 49 + <el-button size="small" @click="roleEdit(scope.$index, scope.row)">角色配置</el-button>
50 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 50 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
51 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> 51 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
52 </template> 52 </template>
@@ -91,7 +91,7 @@ @@ -91,7 +91,7 @@
91 <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number> 91 <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
92 </el-form-item> 92 </el-form-item>
93 <!--<el-form-item label="创建日期">--> 93 <!--<el-form-item label="创建日期">-->
94 - <!--<el-date-picker type="date" placeholder="创建日期" v-model="editForm.creattime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>--> 94 + <!--<el-date-picker type="date" placeholder="创建日期" v-model="editForm.creattime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
95 <!--</el-form-item>--> 95 <!--</el-form-item>-->
96 <el-form-item label="地址"> 96 <el-form-item label="地址">
97 <el-input type="textarea" v-model="editForm.address"></el-input> 97 <el-input type="textarea" v-model="editForm.address"></el-input>
@@ -110,7 +110,7 @@ @@ -110,7 +110,7 @@
110 accept="image/jpeg,image/jpg,image/png" 110 accept="image/jpeg,image/jpg,image/png"
111 :on-success="handleAvatarSuccess" 111 :on-success="handleAvatarSuccess"
112 :before-upload="beforeAvatarUpload" 112 :before-upload="beforeAvatarUpload"
113 - > 113 + >
114 <img v-if="faceImageUrl" :src="faceImageUrl" class="avatar"> 114 <img v-if="faceImageUrl" :src="faceImageUrl" class="avatar">
115 <i v-else class="el-icon-plus avatar-uploader-icon"></i> 115 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
116 </el-upload> 116 </el-upload>
@@ -126,7 +126,7 @@ @@ -126,7 +126,7 @@
126 <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false"> 126 <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
127 <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"> 127 <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
128 <el-form-item label="账号" prop="username"> 128 <el-form-item label="账号" prop="username">
129 - <el-input v-model="addForm.username"></el-input> 129 + <el-input v-model="addForm.username" aria-placeholder="用户名长度在5-11位,支持英文和数字"></el-input>
130 </el-form-item> 130 </el-form-item>
131 <el-form-item label="密码" prop="password"> 131 <el-form-item label="密码" prop="password">
132 <el-input v-model="addForm.password" type="password"></el-input> 132 <el-input v-model="addForm.password" type="password"></el-input>
@@ -147,7 +147,7 @@ @@ -147,7 +147,7 @@
147 </el-radio-group> 147 </el-radio-group>
148 </el-form-item> 148 </el-form-item>
149 <el-form-item label="年龄" prop="age"> 149 <el-form-item label="年龄" prop="age">
150 - <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number> 150 + <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
151 </el-form-item> 151 </el-form-item>
152 <el-form-item label="地址"> 152 <el-form-item label="地址">
153 <el-input type="textarea" v-model="addForm.address"></el-input> 153 <el-input type="textarea" v-model="addForm.address"></el-input>
@@ -168,10 +168,10 @@ @@ -168,10 +168,10 @@
168 <el-form-item label="账号"> 168 <el-form-item label="账号">
169 <span>{{roleEditForm.username}}</span> 169 <span>{{roleEditForm.username}}</span>
170 </el-form-item> 170 </el-form-item>
171 - <el-checkbox-group v-model="roleIds" size="small">  
172 - <el-checkbox-button v-for="role in roles" :label="role.roleId" :key="role.roleId" >{{role.description}}</el-checkbox-button>  
173 - </el-checkbox-group> 171 + <el-tree :data="roles" :props="treeDefaultProps" default-expand-all show-checkbox highlight-current check-strictly node-key="roleId" ref="tree" @check-change="treeHandleCheckChange">
  172 + </el-tree>
174 </el-form> 173 </el-form>
  174 +
175 <div slot="footer" class="dialog-footer"> 175 <div slot="footer" class="dialog-footer">
176 <el-button @click.native="roleFormVisible = false">取消</el-button> 176 <el-button @click.native="roleFormVisible = false">取消</el-button>
177 <el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button> 177 <el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button>
@@ -184,20 +184,24 @@ @@ -184,20 +184,24 @@
184 import util from '../../common/js/util' 184 import util from '../../common/js/util'
185 import NProgress from 'nprogress' 185 import NProgress from 'nprogress'
186 import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/user'; 186 import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/user';
187 - import { getList} from '../../api/role_api';  
188 - import moment from 'moment' 187 + import { getList} from '../../api/role_api';
  188 + import moment from 'moment'
189 export default { 189 export default {
190 data() { 190 data() {
191 return { 191 return {
192 filters: { 192 filters: {
193 - userName: '', 193 + userName: '',
194 realName: '' 194 realName: ''
195 }, 195 },
  196 + treeDefaultProps: {
  197 + children: 'children',
  198 + label: 'roleName',
  199 + },
196 users: [], 200 users: [],
197 total: 0, 201 total: 0,
198 - pageNum: 1,  
199 - pageSize: 10,  
200 - faceImageUrl: '', 202 + pageNum: 1,
  203 + pageSize: 10,
  204 + faceImageUrl: '',
201 listLoading: false, 205 listLoading: false,
202 sels: [],//列表选中列 206 sels: [],//列表选中列
203 //编辑界面是否显示 207 //编辑界面是否显示
@@ -210,12 +214,12 @@ @@ -210,12 +214,12 @@
210 }, 214 },
211 //编辑界面数据 215 //编辑界面数据
212 editForm: { 216 editForm: {
213 - userId: 1,  
214 - username: '', 217 + userId: 1,
  218 + username: '',
215 password: '', 219 password: '',
216 - sex: 1,  
217 - creattime: '',  
218 - address: '', 220 + sex: 1,
  221 + creattime: '',
  222 + address: '',
219 realname: '', 223 realname: '',
220 email: '', 224 email: '',
221 mobilephone: '', 225 mobilephone: '',
@@ -225,30 +229,33 @@ @@ -225,30 +229,33 @@
225 addFormVisible: false,//新增界面是否显示 229 addFormVisible: false,//新增界面是否显示
226 addLoading: false, 230 addLoading: false,
227 addFormRules: { 231 addFormRules: {
228 - username: [  
229 - { required: true, message: '请输入姓名', trigger: 'blur' } 232 + username: [
  233 + { required: true, message: '请输入姓名,用户名长度在5-11位,支持英文和数字', trigger: 'blur' },
  234 + ],
  235 + password: [
  236 + { required: true, message: '请输入密码,用户名长度在6-18位,支持英文和数字和非空字符', trigger: 'blur'}
230 ] 237 ]
231 }, 238 },
232 //用户角色配置 239 //用户角色配置
233 - roleFormVisible: false, 240 + roleFormVisible: false,
234 //新增界面数据 241 //新增界面数据
235 addForm: { 242 addForm: {
236 - username: '',  
237 - password: '',  
238 - sex: 1,  
239 - address: '',  
240 - realname: '',  
241 - email: '',  
242 - mobilephone: '', 243 + username: '',
  244 + password: '',
  245 + sex: 1,
  246 + address: '',
  247 + realname: '',
  248 + email: '',
  249 + mobilephone: '',
243 age: 1 250 age: 1
244 }, 251 },
245 - roleEditForm: {  
246 - userId: 1, 252 + roleEditForm: {
  253 + userId: 1,
247 username: "", 254 username: "",
248 roles: [] 255 roles: []
249 }, 256 },
250 roles: [], 257 roles: [],
251 - roleIds: [] 258 + roleIds: []
252 259
253 } 260 }
254 }, 261 },
@@ -257,9 +264,9 @@ @@ -257,9 +264,9 @@
257 formatSex: function (row, column) { 264 formatSex: function (row, column) {
258 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; 265 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
259 }, 266 },
260 - formatState: function (row, column) {  
261 - return row.state == true ? '是' : row.state == false ? '否' : '未知';  
262 - }, 267 + formatState: function (row, column) {
  268 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  269 + },
263 handleCurrentChange(val) { 270 handleCurrentChange(val) {
264 this.pageNum = val; 271 this.pageNum = val;
265 this.getUsers(); 272 this.getUsers();
@@ -267,21 +274,21 @@ @@ -267,21 +274,21 @@
267 //获取用户列表 274 //获取用户列表
268 getUsers:function() { 275 getUsers:function() {
269 let para = { 276 let para = {
270 - pageNum: this.pageNum,  
271 - pageSize: this.pageSize,  
272 - userName: this.filters.userName,  
273 - realName: this.filters.realName 277 + pageNum: this.pageNum,
  278 + pageSize: this.pageSize,
  279 + userName: this.filters.userName,
  280 + realName: this.filters.realName
274 }; 281 };
275 this.listLoading = true; 282 this.listLoading = true;
276 - getUserList(para).then((res) => {  
277 - let response = res.data.data; 283 + getUserList(para).then((res) => {
  284 + let response = res.data.data;
278 this.total = response.total; 285 this.total = response.total;
279 this.users = response.list; 286 this.users = response.list;
280 this.listLoading = false; 287 this.listLoading = false;
281 //NProgress.done(); 288 //NProgress.done();
282 }).catch((error) => { 289 }).catch((error) => {
283 - this.listLoading = false;  
284 - this.$message.error(error.toString()); 290 + this.listLoading = false;
  291 + this.$message.error(error.toString());
285 }); 292 });
286 293
287 }, 294 },
@@ -302,65 +309,73 @@ @@ -302,65 +309,73 @@
302 }); 309 });
303 this.getUsers(); 310 this.getUsers();
304 }).catch((error) => { 311 }).catch((error) => {
305 - this.listLoading = false;  
306 - alert(error); 312 + this.listLoading = false;
  313 + alert(error);
307 }); 314 });
308 }).catch(); 315 }).catch();
309 }, 316 },
310 - /** 317 + /**
311 * 显示编辑界面 318 * 显示编辑界面
312 - * @param index  
313 - * @param row 为这行的数据对象  
314 - */ 319 + * @param index
  320 + * @param row 为这行的数据对象
  321 + */
315 handleEdit: function (index, row) { 322 handleEdit: function (index, row) {
316 this.editFormVisible = true; 323 this.editFormVisible = true;
317 this.editForm = Object.assign({}, row); 324 this.editForm = Object.assign({}, row);
318 }, 325 },
319 - roleEdit: function (index, row) {  
320 - var _this = this;  
321 - _this.roleIds = [];  
322 - this.roleEditForm = Object.assign({}, row);  
323 - let userRoles = this.roleEditForm.roles;  
324 - if (util.checkNull(userRoles)){  
325 - userRoles.forEach(function (role,v_index,v_arr) {  
326 - _this.roleIds[v_index] = role.roleId;  
327 - }); 326 + roleEdit: function (index, row) {
  327 + this.roleFormVisible = true;
  328 + this.getRoles();
  329 + var _this = this;
  330 + _this.roleIds = [];
  331 + this.roleEditForm = Object.assign({}, row);
  332 + let roles = this.roleEditForm.roles;
  333 +
  334 + if (util.checkNull(roles)){
  335 + roles.forEach(function (role,v_index,v_arr) {
  336 + if (util.checkNull(role)) {
  337 + _this.roleIds[v_index] = role.roleId;
  338 + }
  339 + });
328 } 340 }
329 - this.getRoles();  
330 - },  
331 - getRoles() {  
332 - let para = {  
333 - pageNum: 1,  
334 - pageSize: 100  
335 - };  
336 - NProgress.start();  
337 - getList(para).then((res) => {  
338 - this.roles = res.data.list;  
339 - this.roleFormVisible = true;  
340 - NProgress.done();  
341 - }).catch((error) => {  
342 - if(null!= error.response && error.response!==undefined){  
343 - let status= error.response.status;  
344 - let msg = error.response.statusText;  
345 - alert(status+msg);  
346 - }else {  
347 - alert(error);  
348 - }  
349 - }); 341 + this.$nextTick(() => {
  342 + //反向适配
  343 + this.$refs.tree.setCheckedKeys(this.roleIds);
  344 + });
  345 + },
  346 + getRoles() {
  347 + let para = {
  348 + pageNum: 1,
  349 + pageSize: 100
  350 + };
  351 + NProgress.start();
  352 + getList(para).then((res) => {
  353 + this.roles = res.data.list;
  354 + NProgress.done();
  355 + }).catch((error) => {
  356 + if(null!= error.response && error.response!==undefined){
  357 + let status= error.response.status;
  358 + let msg = error.response.statusText;
  359 + alert(status+msg);
  360 + }else {
  361 + alert(error);
  362 + }
  363 + });
  364 +
350 365
351 - }, 366 + },
352 //显示新增界面，每次点开初始化数据 367 //显示新增界面，每次点开初始化数据
353 handleAdd: function () { 368 handleAdd: function () {
354 this.addFormVisible = true; 369 this.addFormVisible = true;
355 this.addForm = { 370 this.addForm = {
356 - username: '',  
357 - password: '',  
358 - sex: 1,  
359 - address: '',  
360 - realname: '',  
361 - email: '',  
362 - mobilephone: '',  
363 - age: 1 371 + username: '',
  372 + password: '',
  373 + sex: 1,
  374 + address: '',
  375 + realname: '',
  376 + email: '',
  377 + mobilephone: '',
  378 + age: 1
364 }; 379 };
365 }, 380 },
366 //编辑 381 //编辑
@@ -376,15 +391,15 @@ @@ -376,15 +391,15 @@
376 para.permissions = null; 391 para.permissions = null;
377 para.roles = null; 392 para.roles = null;
378 // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); 393 // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
379 - /*  
380 - 查询之后格式this.filters.column.create_start_date中日期发生变化;  
381 - Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";  
382 - 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格  
383 - 式;  
384 - */ 394 + /*
  395 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  396 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  397 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  398 + 式;
  399 + */
385 /*moment 安装 npm install moment --save*/ 400 /*moment 安装 npm install moment --save*/
386 // para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss'); 401 // para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
387 - this.editLoading = false; 402 + this.editLoading = false;
388 editUser(para).then((res) => { 403 editUser(para).then((res) => {
389 404
390 //NProgress.done(); 405 //NProgress.done();
@@ -419,8 +434,11 @@ @@ -419,8 +434,11 @@
419 this.addFormVisible = false; 434 this.addFormVisible = false;
420 this.getUsers(); 435 this.getUsers();
421 }).catch(error => { 436 }).catch(error => {
422 - this.addLoading = false;  
423 - alert(error.message); 437 + this.addLoading = false;
  438 + this.$message({
  439 + message: error.message,
  440 + type: 'error'
  441 + });
424 }); 442 });
425 }); 443 });
426 } 444 }
@@ -451,39 +469,51 @@ @@ -451,39 +469,51 @@
451 469
452 }); 470 });
453 }, 471 },
454 - roleEditSubmit: function () {  
455 - this.$confirm('确认提交吗？', '提示', {}).then(() => { 472 + roleEditSubmit: function () {
  473 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
456 // this.editLoading = true; 474 // this.editLoading = true;
457 - let userId = this.roleEditForm.userId;  
458 - let roleIds = this.roleIds;  
459 - let para = {userId,roleIds};  
460 - setUserRole(para).then((res) => {  
461 - if (res.status ===200) {  
462 - alert("ok"); 475 + let userId = this.roleEditForm.userId;
  476 + let roleIds = this.$refs.tree.getCheckedKeys();
  477 + let para = {userId,roleIds};
  478 + setUserRole(para).then((res) => {
  479 + if (res.status ===200) {
  480 + this.$message({
  481 + message: '岗位设置成功',
  482 + type: 'success'
  483 + });
463 } 484 }
464 this.getUsers(); 485 this.getUsers();
465 - this.roleFormVisible = false;  
466 - }).catch(err => {  
467 - alert(err); 486 + this.roleFormVisible = false;
  487 + }).catch(err => {
  488 + alert(err);
468 }); 489 });
469 - console.log(para); 490 + console.log(para);
470 }); 491 });
471 - },  
472 - handleAvatarSuccess: function(response){  
473 - this.faceImageUrl = 'http://127.0.0.1:7003/'+response.data;  
474 }, 492 },
475 - beforeAvatarUpload: function () { 493 + handleAvatarSuccess: function(response){
  494 + this.faceImageUrl = 'http://127.0.0.1:7003/'+response.data;
  495 + },
  496 + beforeAvatarUpload: function () {
476 497
477 - } 498 + },
  499 + treeHandleCheckChange: function (data, checked, indeterminate) {
  500 + if(checked) {
  501 + this.roleIds.push(data.roleId);
  502 + }else {
  503 + this.roleIds.splice(this.roleIds.contains(data.roleId),1);
  504 + }
  505 +// console.log(data, checked, indeterminate);
  506 + console.log(this.roleIds);
  507 + }
478 }, 508 },
479 mounted() { 509 mounted() {
480 this.getUsers(); 510 this.getUsers();
481 }, 511 },
482 computed: { 512 computed: {
483 - hideShow() {//当图片多于一张的时候，就隐藏上传框  
484 - return this.file === '' ? false : true  
485 - }  
486 - }, 513 + hideShow() {//当图片多于一张的时候，就隐藏上传框
  514 + return this.file === '' ? false : true
  515 + }
  516 + },
487 } 517 }
488 518
489 </script> 519 </script>