朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 733767681a259a1f888039ceaf8872819430ca2d 1 个父辈 30549815

用户登录适配权限目录问题，登陆后已适配，一刷新 vue router就初始化为以前的了 未解决

内嵌 并排对比
正在显示 13 个修改的文件 包含 1342 行增加 和 116 行删除
@@ -23,11 +23,19 @@ module.exports = { @@ -23,11 +23,19 @@ module.exports = {
23 }, 23 },
24 dev: { 24 dev: {
25 env: require('./dev.env'), 25 env: require('./dev.env'),
26 - port: 8081, 26 + port: 8082,
27 autoOpenBrowser: true, 27 autoOpenBrowser: true,
28 assetsSubDirectory: 'static', 28 assetsSubDirectory: 'static',
29 assetsPublicPath: '/', 29 assetsPublicPath: '/',
30 - proxyTable: {}, 30 + proxyTable: {
  31 + '/api':{
  32 + target: 'http://127.0.0.1:7003',//设置你调用的接口域名和端口号 别忘了加http
  33 + changeOrigin: true,
  34 + pathRewrite: {
  35 + '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
  36 + }
  37 + }
  38 + },
31 // CSS Sourcemaps off by default because relative paths are "buggy" 39 // CSS Sourcemaps off by default because relative paths are "buggy"
32 // with this option, according to the CSS-Loader README 40 // with this option, according to the CSS-Loader README
33 // (https://github.com/webpack/css-loader#sourcemaps) 41 // (https://github.com/webpack/css-loader#sourcemaps)
@@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
16 "eslint": "^5.14.1", 16 "eslint": "^5.14.1",
17 "font-awesome": "^4.7.0", 17 "font-awesome": "^4.7.0",
18 "install": "^0.12.2", 18 "install": "^0.12.2",
  19 + "moment": "^2.24.0",
19 "npm": "^6.8.0", 20 "npm": "^6.8.0",
20 "nprogress": "^0.2.0", 21 "nprogress": "^0.2.0",
21 "vue": "^2.2.2", 22 "vue": "^2.2.2",
1 -import axios from 'axios'; 1 +import axios from 'axios'
  2 +import Vue from 'vue'
2 3
3 -let base = 'http://127.0.0.1:7003';  
4 -axios.defaults.baseURL = 'http://127.0.0.1:7003'; 4 +// let base = 'http://127.0.0.1:7003';
  5 +axios.defaults.baseURL = 'http://localhost:8082/api';
  6 +Vue.prototype.$http = axios;
5 7
6 export const requestLogin = params => { 8 export const requestLogin = params => {
7 return axios({ 9 return axios({
8 method: 'POST', 10 method: 'POST',
9 url: '/login', 11 url: '/login',
10 data: params, 12 data: params,
  13 + withCredentials: true,
11 transformRequest: [function (data) { 14 transformRequest: [function (data) {
12 // Do whatever you want to transform the data 15 // Do whatever you want to transform the data
13 let ret = '' 16 let ret = ''
@@ -23,15 +26,45 @@ export const requestLogin = params => { @@ -23,15 +26,45 @@ export const requestLogin = params => {
23 }) 26 })
24 // return axios.post(`${base}/login`, params).then(res => res.data); 27 // return axios.post(`${base}/login`, params).then(res => res.data);
25 }; 28 };
  29 +export const getuserMenus = params => { return axios.get(`/perm/userMenus`, { params: params }); };
26 30
27 -export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); }; 31 +export const getUserList = params => { return axios.get(`/user/list`, { params: params }); };
28 32
29 -export const getUserListPage = params => { return axios.get(`${base}/user/list`, { params: params }); }; 33 +export const getUserListPage = params => { return axios({
  34 + method: 'GET',
  35 + url: `/user/list`,
  36 + data: params,
  37 + headers: {
  38 + 'Content-Type': 'application/json;charset=UTF-8'
  39 + }
  40 + // withCredentials: true
  41 +}) };
30 42
31 -export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); }; 43 +export const removeUser = params => { return axios({
  44 + method: 'DELETE',
  45 + url: `/user/del`,
  46 + data: params,
  47 + headers: {
  48 + 'Content-Type': 'application/json;charset=UTF-8'
  49 + }
  50 +})};
32 51
33 export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); }; 52 export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); };
34 53
35 -export const editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); }; 54 +export const editUser = params => { return axios({
  55 + method: 'PUT',
  56 + url: `/user/edit`,
  57 + data: params,
  58 + headers: {
  59 + 'Content-Type': 'application/json;charset=UTF-8'
  60 + }
  61 +})};
36 62
37 -export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); };  
  63 +export const addUser = params => { return axios({
  64 + method: 'POST',
  65 + url: `/user/add`,
  66 + data: params,
  67 + headers: {
  68 + 'Content-Type': 'application/json;charset=UTF-8'
  69 + }
  70 +})};
  1 +import axios from 'axios'
  2 +
  3 +axios.defaults.baseURL = 'http://localhost:8082/api';
  4 +let base = axios.defaults.baseURL+'/perm';
  5 +
  6 +
  7 +export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
  8 +
  9 +
  10 +export const remove = params => { return axios({
  11 + method: 'DELETE',
  12 + url: `${base}/del`,
  13 + data: params,
  14 + headers: {
  15 + 'Content-Type': 'application/json;charset=UTF-8'
  16 + }
  17 +})};
  18 +
  19 +//批量删除
  20 +export const batchRemove = params => { return axios.get(`${base}/user/batchremove`, { params: params }); };
  21 +
  22 +export const edit = params => { return axios({
  23 + method: 'PUT',
  24 + url: `${base}/edit`,
  25 + data: params,
  26 + headers: {
  27 + 'Content-Type': 'application/json;charset=UTF-8'
  28 + }
  29 +})};
  30 +
  31 +export const add = params => { return axios({
  32 + method: 'POST',
  33 + url: `${base}/add`,
  34 + data: params,
  35 + headers: {
  36 + 'Content-Type': 'application/json;charset=UTF-8'
  37 + }
  38 +})};
  1 +import axios from 'axios'
  2 +
  3 +axios.defaults.baseURL = 'http://localhost:8082/api';
  4 +let base = axios.defaults.baseURL+'/role';
  5 +
  6 +
  7 +export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
  8 +
  9 +
  10 +export const remove = params => { return axios({
  11 + method: 'DELETE',
  12 + url: `${base}/del`,
  13 + data: params,
  14 + headers: {
  15 + 'Content-Type': 'application/json;charset=UTF-8'
  16 + }
  17 +})};
  18 +
  19 +//批量删除
  20 +export const batchRemove = params => { return axios.get(`${base}/user/batchremove`, { params: params }); };
  21 +
  22 +export const edit = params => { return axios({
  23 + method: 'PUT',
  24 + url: `${base}/edit`,
  25 + data: params,
  26 + headers: {
  27 + 'Content-Type': 'application/json;charset=UTF-8'
  28 + }
  29 +})};
  30 +
  31 +export const add = params => { return axios({
  32 + method: 'POST',
  33 + url: `${base}/add`,
  34 + data: params,
  35 + headers: {
  36 + 'Content-Type': 'application/json;charset=UTF-8'
  37 + }
  38 +})};
@@ -9,8 +9,17 @@ import store from './vuex/store' @@ -9,8 +9,17 @@ import store from './vuex/store'
9 import Vuex from 'vuex' 9 import Vuex from 'vuex'
10 //import NProgress from 'nprogress' 10 //import NProgress from 'nprogress'
11 //import 'nprogress/nprogress.css' 11 //import 'nprogress/nprogress.css'
12 -import routes from './routes' 12 +import rout from './routes'
13 import Mock from './mock' 13 import Mock from './mock'
  14 +
  15 +
  16 +//定义一个全局过滤器实现日期格式化
  17 +Vue.filter('datefmt',function(input,fmtstring){
  18 +
  19 + return moment(input).format(fmtstring)
  20 +
  21 +})
  22 +
14 Mock.bootstrap(); 23 Mock.bootstrap();
15 import 'font-awesome/css/font-awesome.min.css' 24 import 'font-awesome/css/font-awesome.min.css'
16 25
@@ -21,16 +30,21 @@ Vue.use(Vuex) @@ -21,16 +30,21 @@ Vue.use(Vuex)
21 //NProgress.configure({ showSpinner: false }); 30 //NProgress.configure({ showSpinner: false });
22 31
23 const router = new VueRouter({ 32 const router = new VueRouter({
24 - routes 33 + routes:rout.routes
25 }) 34 })
26 - 35 +//判断本地存储的用户栏目列表是否存在，如果存在则加载路由
  36 +if(sessionStorage.getItem('menu')){
  37 + rout.setUserMenus(JSON.parse(sessionStorage.getItem('menu')));
  38 + router.options.routes = rout.routes
  39 +}
27 router.beforeEach((to, from, next) => { 40 router.beforeEach((to, from, next) => {
28 //NProgress.start(); 41 //NProgress.start();
29 if (to.path == '/login') { 42 if (to.path == '/login') {
30 sessionStorage.removeItem('user'); 43 sessionStorage.removeItem('user');
  44 + sessionStorage.removeItem('menu');
31 } 45 }
32 let user = JSON.parse(sessionStorage.getItem('user')); 46 let user = JSON.parse(sessionStorage.getItem('user'));
33 - if (!user && to.path != '/login') { 47 + if (!user && to.path != '/login' && !sessionStorage.getItem('menu')) {
34 next({ path: '/login' }) 48 next({ path: '/login' })
35 } else { 49 } else {
36 next() 50 next()
@@ -2,9 +2,12 @@ import Login from './views/Login.vue' @@ -2,9 +2,12 @@ import Login from './views/Login.vue'
2 import NotFound from './views/404.vue' 2 import NotFound from './views/404.vue'
3 import Home from './views/Home.vue' 3 import Home from './views/Home.vue'
4 import Main from './views/Main.vue' 4 import Main from './views/Main.vue'
5 -import Table from './views/nav1/Table.vue'  
6 -import Form from './views/nav1/Form.vue'  
7 -import user from './views/nav1/user.vue' 5 +// import Table from './views/nav1/Table.vue'
  6 +import Role from './views/nav1/role.vue'
  7 +import Perm from './views/nav1/perm.vue'
  8 +// import Form from './views/nav1/Form.vue'
  9 +
  10 +import User from './views/nav1/user.vue'
8 import Page4 from './views/nav2/Page4.vue' 11 import Page4 from './views/nav2/Page4.vue'
9 import Page5 from './views/nav2/Page5.vue' 12 import Page5 from './views/nav2/Page5.vue'
10 import Page6 from './views/nav3/Page6.vue' 13 import Page6 from './views/nav3/Page6.vue'
@@ -14,26 +17,36 @@ let routes = [ @@ -14,26 +17,36 @@ let routes = [
14 { 17 {
15 path: '/login', 18 path: '/login',
16 component: Login, 19 component: Login,
17 - name: '', 20 + name: '登录',
18 hidden: true 21 hidden: true
19 }, 22 },
20 { 23 {
21 path: '/404', 24 path: '/404',
22 component: NotFound, 25 component: NotFound,
23 - name: '', 26 + name: '错误',
24 hidden: true 27 hidden: true
25 }, 28 },
26 - // { path: '/main', component: Main },  
27 { 29 {
28 path: '/', 30 path: '/',
29 component: Home, 31 component: Home,
30 - name: '导航一',  
31 - iconCls: 'el-icon-message',//图标样式class 32 + name: '',
  33 + leaf: true,
  34 + iconCls: 'el-icon-menu',
32 children: [ 35 children: [
33 - { path: '/main', component: Main, name: '主页', hidden: false },  
34 - { path: '/table', component: Table, name: '用户管理' },  
35 - { path: '/form', component: Form, name: 'Form' },  
36 - { path: '/user', component: user, name: '列表' }, 36 + { path: '/main', component: Main, name: '首页', hidden: false },
  37 + ]
  38 + },
  39 + // { path: '/test', component: Main },
  40 + {
  41 + path: '/',
  42 + component: Home,
  43 + name: '用户管理',
  44 + iconCls: 'el-icon-setting',//图标样式class
  45 + children: [
  46 + { path: '/user', component: User, name: '用户管理' },
  47 + { path: '/role', component: Role, name: '角色管理' },
  48 + { path: '/perm', component: Perm, name: '权限管理' },
  49 +
37 ] 50 ]
38 }, 51 },
39 { 52 {
@@ -72,4 +85,10 @@ let routes = [ @@ -72,4 +85,10 @@ let routes = [
72 } 85 }
73 ]; 86 ];
74 87
75 -export default routes;  
  88 +let setUserMenus = function (list) {
  89 + routes = list;
  90 + let s= 1;
  91 +}
  92 +export default {
  93 + routes,setUserMenus
  94 +};
@@ -23,8 +23,7 @@ @@ -23,8 +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"  
27 - unique-opened router v-show="!collapsed"> 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">
28 <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">
29 <el-submenu :index="index+''" v-if="!item.leaf"> 28 <el-submenu :index="index+''" v-if="!item.leaf">
30 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> 29 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
@@ -75,7 +74,7 @@ @@ -75,7 +74,7 @@
75 export default { 74 export default {
76 data() { 75 data() {
77 return { 76 return {
78 - sysName:'VUEADMIN', 77 + sysName:'流浪地球管理系统',
79 collapsed:false, 78 collapsed:false,
80 sysUserName: '', 79 sysUserName: '',
81 sysUserAvatar: '', 80 sysUserAvatar: '',
@@ -239,6 +238,9 @@ @@ -239,6 +238,9 @@
239 flex:0 0 230px; 238 flex:0 0 230px;
240 width: 230px; 239 width: 230px;
241 } 240 }
  241 + .menu-expanded ul{
  242 + width: 230px;
  243 + }
242 .content-container { 244 .content-container {
243 // background: #f1f2f7; 245 // background: #f1f2f7;
244 flex:1; 246 flex:1;
@@ -32,19 +32,20 @@ @@ -32,19 +32,20 @@
32 </template> 32 </template>
33 33
34 <script> 34 <script>
35 - import { requestLogin } from '../api/api'; 35 + import { requestLogin,getuserMenus } from '../api/api';
  36 + import routes from '../routes'
36 //import NProgress from 'nprogress' 37 //import NProgress from 'nprogress'
37 export default { 38 export default {
38 data() { 39 data() {
39 return { 40 return {
40 vedioCanPlay: true, 41 vedioCanPlay: true,
41 fixStyle: '', 42 fixStyle: '',
42 - logining: false,  
43 - ruleForm2: { 43 + logining: false,
  44 + ruleForm2: {
44 account: 'admin', 45 account: 'admin',
45 checkPass: '123456' 46 checkPass: '123456'
46 - },  
47 - rules2: { 47 + },
  48 + rules2: {
48 account: [ 49 account: [
49 { required: true, message: '请输入账号', trigger: 'blur' }, 50 { required: true, message: '请输入账号', trigger: 'blur' },
50 //{ validator: validaePass } 51 //{ validator: validaePass }
@@ -53,8 +54,9 @@ @@ -53,8 +54,9 @@
53 { required: true, message: '请输入密码', trigger: 'blur' }, 54 { required: true, message: '请输入密码', trigger: 'blur' },
54 //{ validator: validaePass2 } 55 //{ validator: validaePass2 }
55 ] 56 ]
56 - },  
57 - checked: true 57 + },
  58 + checked: true,
  59 + userMenus: []
58 }; 60 };
59 }, 61 },
60 methods: { 62 methods: {
@@ -64,6 +66,33 @@ @@ -64,6 +66,33 @@
64 handleReset2() { 66 handleReset2() {
65 this.$refs.ruleForm2.resetFields(); 67 this.$refs.ruleForm2.resetFields();
66 }, 68 },
  69 + /**
  70 + * 处理登陆后的账号对应的菜单
  71 + * @param menuList
  72 + */
  73 + handleMenuList: function (router,menu) {
  74 + var _self = this;
  75 + var routerName = "";
  76 + router.forEach(function (v_router) {
  77 + routerName = v_router.name;
  78 + menu.forEach(function (v_menu) {
  79 + //查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
  80 + let result = menu.find(item => {
  81 + return item.name === routerName;
  82 + });
  83 +
  84 + //匹配到继续判断是否子元素,有子元素继续递归
  85 + if (result) {
  86 + if(v_router.children) {
  87 + _self.handleMenuList(v_router.children,v_menu.children);
  88 + }
  89 + //没有则可以移除
  90 + }else {
  91 + router.splice(router.findIndex(itm => itm.name === routerName ),1);
  92 + }
  93 + })
  94 + })
  95 + },
67 handleSubmit2: function (ev) { 96 handleSubmit2: function (ev) {
68 var _this = this; 97 var _this = this;
69 this.$refs.ruleForm2.validate((valid) => { 98 this.$refs.ruleForm2.validate((valid) => {
@@ -78,7 +107,6 @@ @@ -78,7 +107,6 @@
78 let status = res.status; 107 let status = res.status;
79 let user = res.data.principal; 108 let user = res.data.principal;
80 let loginSuccess = res.data.authenticated; 109 let loginSuccess = res.data.authenticated;
81 -  
82 if (status !== 200) { 110 if (status !== 200) {
83 let msg = "登录错误"; 111 let msg = "登录错误";
84 this.$message({ 112 this.$message({
@@ -87,7 +115,15 @@ @@ -87,7 +115,15 @@
87 }); 115 });
88 } else if (loginSuccess) { 116 } else if (loginSuccess) {
89 sessionStorage.setItem('user', JSON.stringify(user)); 117 sessionStorage.setItem('user', JSON.stringify(user));
90 - this.$router.push({path: '/table'}); 118 + getuserMenus('').then(res => {
  119 + if(res && res.status===200){
  120 + _this.userMenus = res.data.list;
  121 + this.handleMenuList(routes.routes,_this.userMenus);
  122 + //本地存储用户目录 ，防刷新目录丢失用
  123 + sessionStorage.setItem('menu', JSON.stringify(routes.routes));
  124 + }
  125 + });
  126 + this.$router.push({path: '/main'});
91 } 127 }
92 }).catch(error => { 128 }).catch(error => {
93 let msg = error.message; 129 let msg = error.message;
@@ -96,10 +132,8 @@ @@ -96,10 +132,8 @@
96 type: "error" 132 type: "error"
97 }); 133 });
98 this.logining = false; 134 this.logining = false;
99 - console.log(_this);  
100 }); 135 });
101 } else { 136 } else {
102 - console.log('error submit!!');  
103 return false; 137 return false;
104 } 138 }
105 }); 139 });
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form :inline="true" :model="filters"> 5 <el-form :inline="true" :model="filters">
6 <el-form-item> 6 <el-form-item>
7 - <el-input v-model="filters.ext1" placeholder="姓名"></el-input> 7 + <el-input v-model="filters.realname" placeholder="姓名"></el-input>
8 </el-form-item> 8 </el-form-item>
9 <el-form-item> 9 <el-form-item>
10 <el-input v-model="filters.username" placeholder="账号"></el-input> 10 <el-input v-model="filters.username" placeholder="账号"></el-input>
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
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>
30 </el-table-column> 30 </el-table-column>
31 - <el-table-column prop="ext1" label="姓名" width="120" sortable> 31 + <el-table-column prop="realname" label="姓名" width="120" sortable>
32 </el-table-column> 32 </el-table-column>
33 <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable> 33 <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
34 </el-table-column> 34 </el-table-column>
@@ -40,6 +40,10 @@ @@ -40,6 +40,10 @@
40 </el-table-column> 40 </el-table-column>
41 <el-table-column prop="address" label="地址" min-width="180" sortable> 41 <el-table-column prop="address" label="地址" min-width="180" sortable>
42 </el-table-column> 42 </el-table-column>
  43 + <el-table-column prop="email" label="Email" min-width="180" sortable>
  44 + </el-table-column>
  45 + <el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable>
  46 + </el-table-column>
43 <el-table-column label="操作" width="150"> 47 <el-table-column label="操作" width="150">
44 <template slot-scope="scope"> 48 <template slot-scope="scope">
45 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 49 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
@@ -61,12 +65,21 @@ @@ -61,12 +65,21 @@
61 <el-form-item label="ID"> 65 <el-form-item label="ID">
62 <span>{{editForm.userId}}</span> 66 <span>{{editForm.userId}}</span>
63 </el-form-item> 67 </el-form-item>
64 - <el-form-item label="姓名" prop="username">  
65 - <el-input v-model="editForm.username" auto-complete="off"></el-input> 68 + <el-form-item label="账号">
  69 + <span>{{editForm.username}}</span>
66 </el-form-item> 70 </el-form-item>
67 <el-form-item label="密码" prop="password"> 71 <el-form-item label="密码" prop="password">
68 <el-input v-model="editForm.password" auto-complete="off" type="password"></el-input> 72 <el-input v-model="editForm.password" auto-complete="off" type="password"></el-input>
69 </el-form-item> 73 </el-form-item>
  74 + <el-form-item label="姓名" prop="realname">
  75 + <el-input v-model="editForm.realname" auto-complete="off"></el-input>
  76 + </el-form-item>
  77 + <el-form-item label="电话" prop="mobilephone">
  78 + <el-input v-model="editForm.mobilephone" auto-complete="off"></el-input>
  79 + </el-form-item>
  80 + <el-form-item label="Email" prop="email">
  81 + <el-input v-model="editForm.email" auto-complete="off"></el-input>
  82 + </el-form-item>
70 <el-form-item label="性别"> 83 <el-form-item label="性别">
71 <el-radio-group v-model="editForm.sex"> 84 <el-radio-group v-model="editForm.sex">
72 <el-radio class="radio" label="1" >男</el-radio> 85 <el-radio class="radio" label="1" >男</el-radio>
@@ -76,12 +89,18 @@ @@ -76,12 +89,18 @@
76 <el-form-item label="年龄"> 89 <el-form-item label="年龄">
77 <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number> 90 <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
78 </el-form-item> 91 </el-form-item>
79 - <el-form-item label="生日">  
80 - <el-date-picker type="date" placeholder="选择日期" v-model="editForm.creattime"></el-date-picker>  
81 - </el-form-item> 92 + <!--<el-form-item label="创建日期">-->
  93 + <!--<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-form-item>-->
82 <el-form-item label="地址"> 95 <el-form-item label="地址">
83 <el-input type="textarea" v-model="editForm.address"></el-input> 96 <el-input type="textarea" v-model="editForm.address"></el-input>
84 </el-form-item> 97 </el-form-item>
  98 + <el-form-item label="启用">
  99 + <el-radio-group v-model="editForm.state">
  100 + <el-radio class="radio" label="true" >是</el-radio>
  101 + <el-radio class="radio" label="false" >否</el-radio>
  102 + </el-radio-group>
  103 + </el-form-item>
85 </el-form> 104 </el-form>
86 <div slot="footer" class="dialog-footer"> 105 <div slot="footer" class="dialog-footer">
87 <el-button @click.native="editFormVisible = false">取消</el-button> 106 <el-button @click.native="editFormVisible = false">取消</el-button>
@@ -92,23 +111,32 @@ @@ -92,23 +111,32 @@
92 <!--新增界面--> 111 <!--新增界面-->
93 <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false"> 112 <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
94 <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"> 113 <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
95 - <el-form-item label="姓名" prop="name">  
96 - <el-input v-model="addForm.name" auto-complete="off"></el-input> 114 + <el-form-item label="账号" prop="username">
  115 + <el-input v-model="addForm.username"></el-input>
  116 + </el-form-item>
  117 + <el-form-item label="密码" prop="password">
  118 + <el-input v-model="addForm.password" type="password"></el-input>
  119 + </el-form-item>
  120 + <el-form-item label="姓名" prop="realname">
  121 + <el-input v-model="addForm.realname"></el-input>
  122 + </el-form-item>
  123 + <el-form-item label="电话" prop="mobilephone">
  124 + <el-input v-model="addForm.mobilephone"></el-input>
  125 + </el-form-item>
  126 + <el-form-item label="Email" prop="email">
  127 + <el-input v-model="addForm.email"></el-input>
97 </el-form-item> 128 </el-form-item>
98 <el-form-item label="性别"> 129 <el-form-item label="性别">
99 <el-radio-group v-model="addForm.sex"> 130 <el-radio-group v-model="addForm.sex">
100 - <el-radio class="radio" :label="1">男</el-radio>  
101 - <el-radio class="radio" :label="0">女</el-radio> 131 + <el-radio class="radio" label="1">男</el-radio>
  132 + <el-radio class="radio" label="0">女</el-radio>
102 </el-radio-group> 133 </el-radio-group>
103 </el-form-item> 134 </el-form-item>
104 - <el-form-item label="年龄">  
105 - <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>  
106 - </el-form-item>  
107 - <el-form-item label="生日">  
108 - <el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker> 135 + <el-form-item label="年龄" prop="age">
  136 + <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
109 </el-form-item> 137 </el-form-item>
110 <el-form-item label="地址"> 138 <el-form-item label="地址">
111 - <el-input type="textarea" v-model="addForm.addr"></el-input> 139 + <el-input type="textarea" v-model="addForm.address"></el-input>
112 </el-form-item> 140 </el-form-item>
113 </el-form> 141 </el-form>
114 <div slot="footer" class="dialog-footer"> 142 <div slot="footer" class="dialog-footer">
@@ -122,17 +150,19 @@ @@ -122,17 +150,19 @@
122 <script> 150 <script>
123 import util from '../../common/js/util' 151 import util from '../../common/js/util'
124 //import NProgress from 'nprogress' 152 //import NProgress from 'nprogress'
125 - import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';  
126 - 153 + import { getUserList, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
  154 + import moment from 'moment'
127 export default { 155 export default {
128 data() { 156 data() {
129 return { 157 return {
130 filters: { 158 filters: {
131 - name: '' 159 + username: '',
  160 + realname: ''
132 }, 161 },
133 users: [], 162 users: [],
134 total: 0, 163 total: 0,
135 pageNum: 1, 164 pageNum: 1,
  165 + pageSize: 5,
136 listLoading: false, 166 listLoading: false,
137 sels: [],//列表选中列 167 sels: [],//列表选中列
138 //编辑界面是否显示 168 //编辑界面是否显示
@@ -149,25 +179,31 @@ @@ -149,25 +179,31 @@
149 username: '', 179 username: '',
150 password: '', 180 password: '',
151 sex: 1, 181 sex: 1,
152 - age: 0,  
153 creattime: '', 182 creattime: '',
154 - address: '' 183 + address: '',
  184 + realname: '',
  185 + email: '',
  186 + mobilephone: '',
  187 + state: 'true'
155 }, 188 },
156 189
157 addFormVisible: false,//新增界面是否显示 190 addFormVisible: false,//新增界面是否显示
158 addLoading: false, 191 addLoading: false,
159 addFormRules: { 192 addFormRules: {
160 - name: [ 193 + username: [
161 { required: true, message: '请输入姓名', trigger: 'blur' } 194 { required: true, message: '请输入姓名', trigger: 'blur' }
162 ] 195 ]
163 }, 196 },
164 //新增界面数据 197 //新增界面数据
165 addForm: { 198 addForm: {
166 - name: '',  
167 - sex: -1,  
168 - age: 0,  
169 - birth: '',  
170 - addr: '' 199 + username: '',
  200 + password: '',
  201 + sex: 1,
  202 + address: '',
  203 + realname: '',
  204 + email: '',
  205 + mobilephone: '',
  206 + age: 1
171 } 207 }
172 208
173 } 209 }
@@ -177,6 +213,9 @@ @@ -177,6 +213,9 @@
177 formatSex: function (row, column) { 213 formatSex: function (row, column) {
178 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; 214 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
179 }, 215 },
  216 + formatState: function (row, column) {
  217 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  218 + },
180 handleCurrentChange(val) { 219 handleCurrentChange(val) {
181 this.pageNum = val; 220 this.pageNum = val;
182 this.getUsers(); 221 this.getUsers();
@@ -185,16 +224,23 @@ @@ -185,16 +224,23 @@
185 getUsers() { 224 getUsers() {
186 let para = { 225 let para = {
187 pageNum: this.pageNum, 226 pageNum: this.pageNum,
188 - name: this.filters.name 227 + pageSize: this.pageSize,
  228 + username: this.filters.username
189 }; 229 };
190 this.listLoading = true; 230 this.listLoading = true;
191 //NProgress.start(); 231 //NProgress.start();
192 - getUserListPage(para).then((res) => { 232 + getUserList(para).then((res) => {
193 this.total = res.data.total; 233 this.total = res.data.total;
194 this.users = res.data.list; 234 this.users = res.data.list;
195 this.listLoading = false; 235 this.listLoading = false;
196 //NProgress.done(); 236 //NProgress.done();
  237 + }).catch((error) => {
  238 + this.listLoading = false;
  239 + let res= error.response.data;
  240 +
  241 + alert(res.msg);
197 }); 242 });
  243 +
198 }, 244 },
199 //删除 245 //删除
200 handleDel: function (index, row) { 246 handleDel: function (index, row) {
@@ -203,7 +249,7 @@ @@ -203,7 +249,7 @@
203 }).then(() => { 249 }).then(() => {
204 this.listLoading = true; 250 this.listLoading = true;
205 //NProgress.start(); 251 //NProgress.start();
206 - let para = { id: row.id }; 252 + let para = { userId: row.userId };
207 removeUser(para).then((res) => { 253 removeUser(para).then((res) => {
208 this.listLoading = false; 254 this.listLoading = false;
209 //NProgress.done(); 255 //NProgress.done();
@@ -212,10 +258,11 @@ @@ -212,10 +258,11 @@
212 type: 'success' 258 type: 'success'
213 }); 259 });
214 this.getUsers(); 260 this.getUsers();
  261 + }).catch((error) => {
  262 + this.listLoading = false;
  263 + alert(error);
215 }); 264 });
216 - }).catch(() => {  
217 -  
218 - }); 265 + }).catch();
219 }, 266 },
220 /** 267 /**
221 * 显示编辑界面 268 * 显示编辑界面
@@ -226,15 +273,18 @@ @@ -226,15 +273,18 @@
226 this.editFormVisible = true; 273 this.editFormVisible = true;
227 this.editForm = Object.assign({}, row); 274 this.editForm = Object.assign({}, row);
228 }, 275 },
229 - //显示新增界面 276 + //显示新增界面，每次点开初始化数据
230 handleAdd: function () { 277 handleAdd: function () {
231 this.addFormVisible = true; 278 this.addFormVisible = true;
232 this.addForm = { 279 this.addForm = {
233 - name: '',  
234 - sex: -1,  
235 - age: 0,  
236 - birth: '',  
237 - addr: '' 280 + username: '',
  281 + password: '',
  282 + sex: 1,
  283 + address: '',
  284 + realname: '',
  285 + email: '',
  286 + mobilephone: '',
  287 + age: 1
238 }; 288 };
239 }, 289 },
240 //编辑 290 //编辑
@@ -245,9 +295,22 @@ @@ -245,9 +295,22 @@
245 this.editLoading = true; 295 this.editLoading = true;
246 //NProgress.start(); 296 //NProgress.start();
247 let para = Object.assign({}, this.editForm); 297 let para = Object.assign({}, this.editForm);
248 - para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); 298 + //不需要提交的 去掉，后端不好接收
  299 + para.authorities = null;
  300 + para.permissions = null;
  301 + para.roles = null;
  302 +// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  303 + /*
  304 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  305 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  306 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  307 + 式;
  308 + */
  309 + /*moment 安装 npm install moment --save*/
  310 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  311 + this.editLoading = false;
249 editUser(para).then((res) => { 312 editUser(para).then((res) => {
250 - this.editLoading = false; 313 +
251 //NProgress.done(); 314 //NProgress.done();
252 this.$message({ 315 this.$message({
253 message: '提交成功', 316 message: '提交成功',
@@ -256,7 +319,7 @@ @@ -256,7 +319,7 @@
256 this.$refs['editForm'].resetFields(); 319 this.$refs['editForm'].resetFields();
257 this.editFormVisible = false; 320 this.editFormVisible = false;
258 this.getUsers(); 321 this.getUsers();
259 - }); 322 + }).catch(error => alert(error));
260 }); 323 });
261 } 324 }
262 }); 325 });
@@ -280,7 +343,7 @@ @@ -280,7 +343,7 @@
280 this.$refs['addForm'].resetFields(); 343 this.$refs['addForm'].resetFields();
281 this.addFormVisible = false; 344 this.addFormVisible = false;
282 this.getUsers(); 345 this.getUsers();
283 - }); 346 + }).catch(error => alert(error));
284 }); 347 });
285 } 348 }
286 }); 349 });
  1 +<template>
  2 + <section>
  3 + <!--工具条-->
  4 + <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5 + <el-form :inline="true" :model="filters">
  6 + <el-form-item>
  7 + <el-input v-model="filters.roleName" placeholder="权限名称"></el-input>
  8 + </el-form-item>
  9 + <el-form-item>
  10 + <el-button type="primary" v-on:click="getRoles()">查询</el-button>
  11 + </el-form-item>
  12 + <el-form-item>
  13 + <el-button type="primary" @click="handleAdd">新增</el-button>
  14 + </el-form-item>
  15 + </el-form>
  16 + </el-col>
  17 +
  18 + <!--列表-->
  19 + <el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
  20 + <el-table-column type="selection" width="55">
  21 + </el-table-column>
  22 + <el-table-column type="index" width="60">
  23 + </el-table-column>
  24 + <el-table-column prop="permissionId" label="ID" width="100" sortable>
  25 + </el-table-column>
  26 + <el-table-column prop="permissionName" label="权限名称" min-width="200" sortable>
  27 + </el-table-column>
  28 + <el-table-column prop="description" label="描述" min-width="200" sortable>
  29 + </el-table-column>
  30 + <el-table-column prop="permissionSign" label="排序" width="100" sortable>
  31 + </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">
  35 + <template slot-scope="scope">
  36 + <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>
  38 + </template>
  39 + </el-table-column>
  40 + </el-table>
  41 +
  42 + <!--工具条-->
  43 + <el-col :span="24" class="toolbar">
  44 + <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
  45 + <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
  46 + </el-pagination>
  47 + </el-col>
  48 +
  49 + <!--编辑界面-->
  50 + <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
  51 + <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  52 + <el-form-item label="ID">
  53 + <span>{{editForm.roleId}}</span>
  54 + </el-form-item>
  55 + <el-form-item label="权限名称">
  56 + <el-input v-model="editForm.roleName" auto-complete="off" placeholder="请输入权限名称：例如:ROLE_name"></el-input>
  57 + </el-form-item>
  58 + <el-form-item label="权限描述">
  59 + <el-input v-model="editForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
  60 + </el-form-item>
  61 + <el-form-item label="权限排序">
  62 + <el-input v-model="editForm.roleSign" auto-complete="off" placeholder="请输入权限排序：例如:数字123"></el-input>
  63 + </el-form-item>
  64 + <!--<el-form-item label="创建日期">-->
  65 + <!--<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>-->
  66 + <!--</el-form-item>-->
  67 + </el-form>
  68 + <div slot="footer" class="dialog-footer">
  69 + <el-button @click.native="editFormVisible = false">取消</el-button>
  70 + <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
  71 + </div>
  72 + </el-dialog>
  73 +
  74 + <!--新增界面-->
  75 + <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
  76 + <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
  77 + <el-form-item label="权限名称" prop="permissionName">
  78 + <el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
  79 + </el-form-item>
  80 + <el-form-item label="权限描述" prop="description">
  81 + <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
  82 + </el-form-item>
  83 + <el-form-item label="权限路径" prop="url">
  84 + <el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>
  85 + </el-form-item>
  86 + <el-form-item label="权限排序" prop="permissionSign">
  87 + <el-input v-model="addForm.permissionSign" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
  88 + </el-form-item>
  89 + <el-form-item label="父目录ID" prop="parentId">
  90 + <el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
  91 + </el-form-item>
  92 + <el-form-item label="父目录ID" prop="parentId">
  93 + <el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
  94 + </el-form-item>
  95 + </el-form>
  96 + <div slot="footer" class="dialog-footer">
  97 + <el-button @click.native="addFormVisible = false">取消</el-button>
  98 + <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
  99 + </div>
  100 + </el-dialog>
  101 + </section>
  102 +</template>
  103 +
  104 +<script>
  105 + import util from '../../common/js/util'
  106 + //import NProgress from 'nprogress'
  107 + import { getList, remove, batchRemove, edit, add } from '../../api/perm_api';
  108 + import moment from 'moment'
  109 + export default {
  110 + data() {
  111 + return {
  112 + filters: {
  113 + roleName: ''
  114 + },
  115 + tableList: [],
  116 + total: 0,
  117 + pageNum: 1,
  118 + pageSize: 5,
  119 + listLoading: false,
  120 + sels: [],//列表选中列
  121 + //编辑界面是否显示
  122 + editFormVisible: false,
  123 + editLoading: false,
  124 + editFormRules: {
  125 + roleName: [
  126 + { required: true, message: '请输入权限名称', trigger: 'blur' }
  127 + ]
  128 + },
  129 + //编辑界面数据
  130 + editForm: {
  131 + roleId: 1,
  132 + description: '',
  133 + roleName: '',
  134 + roleSign: 1
  135 + },
  136 +
  137 + addFormVisible: false,//新增界面是否显示
  138 + addLoading: false,
  139 + addFormRules: {
  140 + roleName: [
  141 + { required: true, message: '请输入权限名称', trigger: 'blur' }
  142 + ],
  143 + description: [
  144 + { required: true, message: '请输入权限描述', trigger: 'blur' }
  145 + ]
  146 + },
  147 + //新增界面数据
  148 + addForm: {
  149 + description: '',
  150 + roleName: '',
  151 + roleSign: 1
  152 + }
  153 +
  154 + }
  155 + },
  156 + methods: {
  157 + //性别显示转换
  158 + formatSex: function (row, column) {
  159 + return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  160 + },
  161 + formatState: function (row, column) {
  162 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  163 + },
  164 + handleCurrentChange(val) {
  165 + this.pageNum = val;
  166 + this.getTableList();
  167 + },
  168 + //获取列表
  169 + getTableList() {
  170 + let para = {
  171 + pageNum: this.pageNum,
  172 + pageSize: this.pageSize,
  173 + roleName: this.filters.roleName
  174 + };
  175 + this.listLoading = true;
  176 + //NProgress.start();
  177 + getList(para).then((res) => {
  178 + this.total = res.data.total;
  179 + this.tableList = res.data.list;
  180 + this.listLoading = false;
  181 + //NProgress.done();
  182 + }).catch((error) => {
  183 +
  184 + this.listLoading = false;
  185 + if(null!= error.response && error.response!==undefined){
  186 + let status= error.response.status;
  187 + let msg = error.response.statusText;
  188 + alert(status+msg);
  189 + }else {
  190 + alert(error);
  191 + }
  192 +
  193 +
  194 +
  195 + });
  196 +
  197 + },
  198 + //删除
  199 + handleDel: function (index, row) {
  200 + this.$confirm('确认删除该记录吗?', '提示', {
  201 + type: 'warning'
  202 + }).then(() => {
  203 + this.listLoading = true;
  204 + //NProgress.start();
  205 + let para = { userId: row.userId };
  206 + remove(para).then((res) => {
  207 + this.listLoading = false;
  208 + //NProgress.done();
  209 + this.$message({
  210 + message: '删除成功',
  211 + type: 'success'
  212 + });
  213 + this.getRoles();
  214 + }).catch((error) => {
  215 + this.listLoading = false;
  216 + alert(error);
  217 + });
  218 + }).catch();
  219 + },
  220 + /**
  221 + * 显示编辑界面
  222 + * @param index
  223 + * @param row 为这行的数据对象
  224 + */
  225 + handleEdit: function (index, row) {
  226 + this.editFormVisible = true;
  227 + this.editForm = Object.assign({}, row);
  228 + },
  229 + //显示新增界面，每次点开初始化数据
  230 + handleAdd: function () {
  231 + this.addFormVisible = true;
  232 + this.addForm = {
  233 + username: '',
  234 + password: '',
  235 + sex: 1,
  236 + address: '',
  237 + realname: '',
  238 + email: '',
  239 + mobilephone: '',
  240 + age: 1
  241 + };
  242 + },
  243 + //编辑
  244 + editSubmit: function () {
  245 + this.$refs.editForm.validate((valid) => {
  246 + if (valid) {
  247 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  248 + this.editLoading = true;
  249 + //NProgress.start();
  250 + let para = Object.assign({}, this.editForm);
  251 + //不需要提交的 去掉，后端不好接收
  252 + para.authorities = null;
  253 + para.permissions = null;
  254 + para.roles = null;
  255 +// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  256 + /*
  257 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  258 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  259 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  260 + 式;
  261 + */
  262 + /*moment 安装 npm install moment --save*/
  263 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  264 + this.editLoading = false;
  265 + edit(para).then((res) => {
  266 +
  267 + //NProgress.done();
  268 + this.$message({
  269 + message: '提交成功',
  270 + type: 'success'
  271 + });
  272 + this.$refs['editForm'].resetFields();
  273 + this.editFormVisible = false;
  274 + this.getRoles();
  275 + }).catch(error => alert(error));
  276 + });
  277 + }
  278 + });
  279 + },
  280 + //新增
  281 + addSubmit: function () {
  282 + this.$refs.addForm.validate((valid) => {
  283 + if (valid) {
  284 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  285 + this.addLoading = true;
  286 + //NProgress.start();
  287 + let para = Object.assign({}, this.addForm);
  288 + para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  289 + add(para).then((res) => {
  290 + this.addLoading = false;
  291 + //NProgress.done();
  292 + this.$message({
  293 + message: '提交成功',
  294 + type: 'success'
  295 + });
  296 + this.$refs['addForm'].resetFields();
  297 + this.addFormVisible = false;
  298 + this.getRoles();
  299 + }).catch(error => alert(error));
  300 + });
  301 + }
  302 + });
  303 + },
  304 + selsChange: function (sels) {
  305 + this.sels = sels;
  306 + },
  307 + //批量删除
  308 + batchRemove: function () {
  309 + var ids = this.sels.map(item => item.id).toString();
  310 + this.$confirm('确认删除选中记录吗？', '提示', {
  311 + type: 'warning'
  312 + }).then(() => {
  313 + this.listLoading = true;
  314 + //NProgress.start();
  315 + let para = { ids: ids };
  316 + batchRemove(para).then((res) => {
  317 + this.listLoading = false;
  318 + //NProgress.done();
  319 + this.$message({
  320 + message: '删除成功',
  321 + type: 'success'
  322 + });
  323 + this.getRoles();
  324 + });
  325 + }).catch(() => {
  326 +
  327 + });
  328 + }
  329 + },
  330 + mounted() {
  331 + this.getTableList();
  332 + }
  333 + }
  334 +
  335 +</script>
  336 +
  337 +<style scoped>
  338 +
  339 +</style>
  1 +<template>
  2 + <section>
  3 + <!--工具条-->
  4 + <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5 + <el-form :inline="true" :model="filters">
  6 + <el-form-item>
  7 + <el-input v-model="filters.roleName" placeholder="角色名称"></el-input>
  8 + </el-form-item>
  9 + <el-form-item>
  10 + <el-button type="primary" v-on:click="getRoles()">查询</el-button>
  11 + </el-form-item>
  12 + <el-form-item>
  13 + <el-button type="primary" @click="handleAdd">新增</el-button>
  14 + </el-form-item>
  15 + </el-form>
  16 + </el-col>
  17 +
  18 + <!--列表-->
  19 + <el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
  20 + <el-table-column type="selection" width="55">
  21 + </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>
  25 + </el-table-column>
  26 + <el-table-column prop="roleName" label="角色名称" min-width="200" sortable>
  27 + </el-table-column>
  28 + <el-table-column prop="description" label="角色描述" min-width="200" sortable>
  29 + </el-table-column>
  30 + <el-table-column prop="roleSign" label="排序" width="100" sortable>
  31 + </el-table-column>
  32 + <el-table-column label="操作" min-width="150">
  33 + <template slot-scope="scope">
  34 + <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  35 + <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
  36 + </template>
  37 + </el-table-column>
  38 + </el-table>
  39 +
  40 + <!--工具条-->
  41 + <el-col :span="24" class="toolbar">
  42 + <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
  43 + <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
  44 + </el-pagination>
  45 + </el-col>
  46 +
  47 + <!--编辑界面-->
  48 + <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
  49 + <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  50 + <el-form-item label="ID">
  51 + <span>{{editForm.roleId}}</span>
  52 + </el-form-item>
  53 + <el-form-item label="角色名称">
  54 + <el-input v-model="editForm.roleName" auto-complete="off" placeholder="请输入角色名称：例如:ROLE_name"></el-input>
  55 + </el-form-item>
  56 + <el-form-item label="角色描述">
  57 + <el-input v-model="editForm.description" auto-complete="off" placeholder="请输入角色描述：例如:用户管理员"></el-input>
  58 + </el-form-item>
  59 + <el-form-item label="角色排序">
  60 + <el-input v-model="editForm.roleSign" auto-complete="off" placeholder="请输入角色排序：例如:数字123"></el-input>
  61 + </el-form-item>
  62 + <!--<el-form-item label="创建日期">-->
  63 + <!--<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>-->
  64 + <!--</el-form-item>-->
  65 + </el-form>
  66 + <div slot="footer" class="dialog-footer">
  67 + <el-button @click.native="editFormVisible = false">取消</el-button>
  68 + <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
  69 + </div>
  70 + </el-dialog>
  71 +
  72 + <!--新增界面-->
  73 + <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
  74 + <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
  75 + <el-form-item label="角色名称" prop="roleName">
  76 + <el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入角色名称：例如:ROLE_name"></el-input>
  77 + </el-form-item>
  78 + <el-form-item label="角色描述" prop="description">
  79 + <el-input v-model="addForm.description" auto-complete="off" placeholder="请输入角色描述：例如:用户管理员"></el-input>
  80 + </el-form-item>
  81 + <el-form-item label="角色排序" prop="roleSign">
  82 + <el-input v-model="addForm.roleSign" auto-complete="off" placeholder="请输入角色排序：例如:数字123"></el-input>
  83 + </el-form-item>
  84 + </el-form>
  85 + <div slot="footer" class="dialog-footer">
  86 + <el-button @click.native="addFormVisible = false">取消</el-button>
  87 + <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
  88 + </div>
  89 + </el-dialog>
  90 + </section>
  91 +</template>
  92 +
  93 +<script>
  94 + import util from '../../common/js/util'
  95 + //import NProgress from 'nprogress'
  96 + import { getList, remove, batchRemove, edit, add } from '../../api/role_api';
  97 + import moment from 'moment'
  98 + export default {
  99 + data() {
  100 + return {
  101 + filters: {
  102 + roleName: ''
  103 + },
  104 + roles: [],
  105 + total: 0,
  106 + pageNum: 1,
  107 + pageSize: 5,
  108 + listLoading: false,
  109 + sels: [],//列表选中列
  110 + //编辑界面是否显示
  111 + editFormVisible: false,
  112 + editLoading: false,
  113 + editFormRules: {
  114 + roleName: [
  115 + { required: true, message: '请输入角色名称', trigger: 'blur' }
  116 + ]
  117 + },
  118 + //编辑界面数据
  119 + editForm: {
  120 + roleId: 1,
  121 + description: '',
  122 + roleName: '',
  123 + roleSign: 1
  124 + },
  125 +
  126 + addFormVisible: false,//新增界面是否显示
  127 + addLoading: false,
  128 + addFormRules: {
  129 + roleName: [
  130 + { required: true, message: '请输入角色名称', trigger: 'blur' }
  131 + ],
  132 + description: [
  133 + { required: true, message: '请输入角色描述', trigger: 'blur' }
  134 + ]
  135 + },
  136 + //新增界面数据
  137 + addForm: {
  138 + description: '',
  139 + roleName: '',
  140 + roleSign: 1
  141 + }
  142 +
  143 + }
  144 + },
  145 + methods: {
  146 + //性别显示转换
  147 + formatSex: function (row, column) {
  148 + return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  149 + },
  150 + formatState: function (row, column) {
  151 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  152 + },
  153 + handleCurrentChange(val) {
  154 + this.pageNum = val;
  155 + this.getRoles();
  156 + },
  157 + //获取列表
  158 + getRoles() {
  159 + let para = {
  160 + pageNum: this.pageNum,
  161 + pageSize: this.pageSize,
  162 + roleName: this.filters.roleName
  163 + };
  164 + this.listLoading = true;
  165 + //NProgress.start();
  166 + getList(para).then((res) => {
  167 + this.total = res.data.total;
  168 + this.roles = res.data.list;
  169 + this.listLoading = false;
  170 + //NProgress.done();
  171 + }).catch((error) => {
  172 +
  173 + this.listLoading = false;
  174 + if(null!= error.response && error.response!==undefined){
  175 + let status= error.response.status;
  176 + let msg = error.response.statusText;
  177 + alert(status+msg);
  178 + }else {
  179 + alert(error);
  180 + }
  181 +
  182 +
  183 +
  184 + });
  185 +
  186 + },
  187 + //删除
  188 + handleDel: function (index, row) {
  189 + this.$confirm('确认删除该记录吗?', '提示', {
  190 + type: 'warning'
  191 + }).then(() => {
  192 + this.listLoading = true;
  193 + //NProgress.start();
  194 + let para = { userId: row.userId };
  195 + remove(para).then((res) => {
  196 + this.listLoading = false;
  197 + //NProgress.done();
  198 + this.$message({
  199 + message: '删除成功',
  200 + type: 'success'
  201 + });
  202 + this.getRoles();
  203 + }).catch((error) => {
  204 + this.listLoading = false;
  205 + alert(error);
  206 + });
  207 + }).catch();
  208 + },
  209 + /**
  210 + * 显示编辑界面
  211 + * @param index
  212 + * @param row 为这行的数据对象
  213 + */
  214 + handleEdit: function (index, row) {
  215 + this.editFormVisible = true;
  216 + this.editForm = Object.assign({}, row);
  217 + },
  218 + //显示新增界面，每次点开初始化数据
  219 + handleAdd: function () {
  220 + this.addFormVisible = true;
  221 + this.addForm = {
  222 + username: '',
  223 + password: '',
  224 + sex: 1,
  225 + address: '',
  226 + realname: '',
  227 + email: '',
  228 + mobilephone: '',
  229 + age: 1
  230 + };
  231 + },
  232 + //编辑
  233 + editSubmit: function () {
  234 + this.$refs.editForm.validate((valid) => {
  235 + if (valid) {
  236 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  237 + this.editLoading = true;
  238 + //NProgress.start();
  239 + let para = Object.assign({}, this.editForm);
  240 + //不需要提交的 去掉，后端不好接收
  241 + para.authorities = null;
  242 + para.permissions = null;
  243 + para.roles = null;
  244 +// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  245 + /*
  246 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  247 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  248 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  249 + 式;
  250 + */
  251 + /*moment 安装 npm install moment --save*/
  252 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  253 + this.editLoading = false;
  254 + edit(para).then((res) => {
  255 +
  256 + //NProgress.done();
  257 + this.$message({
  258 + message: '提交成功',
  259 + type: 'success'
  260 + });
  261 + this.$refs['editForm'].resetFields();
  262 + this.editFormVisible = false;
  263 + this.getRoles();
  264 + }).catch(error => alert(error));
  265 + });
  266 + }
  267 + });
  268 + },
  269 + //新增
  270 + addSubmit: function () {
  271 + this.$refs.addForm.validate((valid) => {
  272 + if (valid) {
  273 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  274 + this.addLoading = true;
  275 + //NProgress.start();
  276 + let para = Object.assign({}, this.addForm);
  277 + para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  278 + add(para).then((res) => {
  279 + this.addLoading = false;
  280 + //NProgress.done();
  281 + this.$message({
  282 + message: '提交成功',
  283 + type: 'success'
  284 + });
  285 + this.$refs['addForm'].resetFields();
  286 + this.addFormVisible = false;
  287 + this.getRoles();
  288 + }).catch(error => alert(error));
  289 + });
  290 + }
  291 + });
  292 + },
  293 + selsChange: function (sels) {
  294 + this.sels = sels;
  295 + },
  296 + //批量删除
  297 + batchRemove: function () {
  298 + var ids = this.sels.map(item => item.id).toString();
  299 + this.$confirm('确认删除选中记录吗？', '提示', {
  300 + type: 'warning'
  301 + }).then(() => {
  302 + this.listLoading = true;
  303 + //NProgress.start();
  304 + let para = { ids: ids };
  305 + batchRemove(para).then((res) => {
  306 + this.listLoading = false;
  307 + //NProgress.done();
  308 + this.$message({
  309 + message: '删除成功',
  310 + type: 'success'
  311 + });
  312 + this.getRoles();
  313 + });
  314 + }).catch(() => {
  315 +
  316 + });
  317 + }
  318 + },
  319 + mounted() {
  320 + this.getRoles();
  321 + }
  322 + }
  323 +
  324 +</script>
  325 +
  326 +<style scoped>
  327 +
  328 +</style>
@@ -4,46 +4,208 @@ @@ -4,46 +4,208 @@
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form :inline="true" :model="filters"> 5 <el-form :inline="true" :model="filters">
6 <el-form-item> 6 <el-form-item>
7 - <el-input v-model="filters.name" placeholder="姓名"></el-input> 7 + <el-input v-model="filters.realname" placeholder="姓名"></el-input>
8 </el-form-item> 8 </el-form-item>
9 <el-form-item> 9 <el-form-item>
10 - <el-button type="primary" v-on:click="getUser">查询</el-button> 10 + <el-input v-model="filters.username" placeholder="账号"></el-input>
  11 + </el-form-item>
  12 + <el-form-item>
  13 + <el-button type="primary" v-on:click="getUsers">查询</el-button>
  14 + </el-form-item>
  15 + <el-form-item>
  16 + <el-button type="primary" @click="handleAdd">新增</el-button>
11 </el-form-item> 17 </el-form-item>
12 </el-form> 18 </el-form>
13 </el-col> 19 </el-col>
14 20
15 <!--列表--> 21 <!--列表-->
16 - <template>  
17 - <el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">  
18 - <el-table-column type="index" width="60">  
19 - </el-table-column>  
20 - <el-table-column prop="name" label="姓名" width="120" sortable>  
21 - </el-table-column>  
22 - <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>  
23 - </el-table-column>  
24 - <el-table-column prop="age" label="年龄" width="100" sortable>  
25 - </el-table-column>  
26 - <el-table-column prop="birth" label="生日" width="120" sortable>  
27 - </el-table-column>  
28 - <el-table-column prop="addr" label="地址" min-width="180" sortable>  
29 - </el-table-column>  
30 - </el-table>  
31 - </template> 22 + <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
  23 + <el-table-column type="selection" width="55">
  24 + </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>
  28 + </el-table-column>
  29 + <el-table-column prop="username" label="账号" width="120" sortable>
  30 + </el-table-column>
  31 + <el-table-column prop="realname" label="姓名" width="120" sortable>
  32 + </el-table-column>
  33 + <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
  34 + </el-table-column>
  35 + <el-table-column prop="mobilephone" label="电话" width="125" sortable>
  36 + </el-table-column>
  37 + <el-table-column prop="creattime" label="创建时间" width="170" sortable>
  38 + </el-table-column>
  39 + <el-table-column prop="updatetime" label="更新时间" width="170" sortable>
  40 + </el-table-column>
  41 + <el-table-column prop="address" label="地址" min-width="180" sortable>
  42 + </el-table-column>
  43 + <el-table-column prop="email" label="Email" min-width="180" sortable>
  44 + </el-table-column>
  45 + <el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable>
  46 + </el-table-column>
  47 + <el-table-column label="操作" width="150">
  48 + <template slot-scope="scope">
  49 + <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  50 + <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
  51 + </template>
  52 + </el-table-column>
  53 + </el-table>
  54 +
  55 + <!--工具条-->
  56 + <el-col :span="24" class="toolbar">
  57 + <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
  58 + <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
  59 + </el-pagination>
  60 + </el-col>
32 61
  62 + <!--编辑界面-->
  63 + <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
  64 + <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  65 + <el-form-item label="ID">
  66 + <span>{{editForm.userId}}</span>
  67 + </el-form-item>
  68 + <el-form-item label="账号">
  69 + <span>{{editForm.username}}</span>
  70 + </el-form-item>
  71 + <el-form-item label="密码" prop="password">
  72 + <el-input v-model="editForm.password" auto-complete="off" show-password></el-input>
  73 + </el-form-item>
  74 + <el-form-item label="姓名" prop="realname">
  75 + <el-input v-model="editForm.realname" auto-complete="off"></el-input>
  76 + </el-form-item>
  77 + <el-form-item label="电话" prop="mobilephone">
  78 + <el-input v-model="editForm.mobilephone" auto-complete="off"></el-input>
  79 + </el-form-item>
  80 + <el-form-item label="Email" prop="email">
  81 + <el-input v-model="editForm.email" auto-complete="off"></el-input>
  82 + </el-form-item>
  83 + <el-form-item label="性别">
  84 + <el-radio-group v-model="editForm.sex">
  85 + <el-radio class="radio" label="1" >男</el-radio>
  86 + <el-radio class="radio" label="0" >女</el-radio>
  87 + </el-radio-group>
  88 + </el-form-item>
  89 + <el-form-item label="年龄">
  90 + <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
  91 + </el-form-item>
  92 + <!--<el-form-item label="创建日期">-->
  93 + <!--<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-form-item>-->
  95 + <el-form-item label="地址">
  96 + <el-input type="textarea" v-model="editForm.address"></el-input>
  97 + </el-form-item>
  98 + <el-form-item label="启用">
  99 + <el-radio-group v-model="editForm.state">
  100 + <el-radio class="radio" label="true" >是</el-radio>
  101 + <el-radio class="radio" label="false" >否</el-radio>
  102 + </el-radio-group>
  103 + </el-form-item>
  104 + </el-form>
  105 + <div slot="footer" class="dialog-footer">
  106 + <el-button @click.native="editFormVisible = false">取消</el-button>
  107 + <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
  108 + </div>
  109 + </el-dialog>
  110 +
  111 + <!--新增界面-->
  112 + <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
  113 + <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
  114 + <el-form-item label="账号" prop="username">
  115 + <el-input v-model="addForm.username"></el-input>
  116 + </el-form-item>
  117 + <el-form-item label="密码" prop="password">
  118 + <el-input v-model="addForm.password" type="password"></el-input>
  119 + </el-form-item>
  120 + <el-form-item label="姓名" prop="realname">
  121 + <el-input v-model="addForm.realname"></el-input>
  122 + </el-form-item>
  123 + <el-form-item label="电话" prop="mobilephone">
  124 + <el-input v-model="addForm.mobilephone"></el-input>
  125 + </el-form-item>
  126 + <el-form-item label="Email" prop="email">
  127 + <el-input v-model="addForm.email"></el-input>
  128 + </el-form-item>
  129 + <el-form-item label="性别">
  130 + <el-radio-group v-model="addForm.sex">
  131 + <el-radio class="radio" label="1">男</el-radio>
  132 + <el-radio class="radio" label="0">女</el-radio>
  133 + </el-radio-group>
  134 + </el-form-item>
  135 + <el-form-item label="年龄" prop="age">
  136 + <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
  137 + </el-form-item>
  138 + <el-form-item label="地址">
  139 + <el-input type="textarea" v-model="addForm.address"></el-input>
  140 + </el-form-item>
  141 + </el-form>
  142 + <div slot="footer" class="dialog-footer">
  143 + <el-button @click.native="addFormVisible = false">取消</el-button>
  144 + <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
  145 + </div>
  146 + </el-dialog>
33 </section> 147 </section>
34 </template> 148 </template>
  149 +
35 <script> 150 <script>
36 - import { getUserList } from '../../api/api'; 151 + import util from '../../common/js/util'
37 //import NProgress from 'nprogress' 152 //import NProgress from 'nprogress'
  153 + import { getUserList, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
  154 + import moment from 'moment'
38 export default { 155 export default {
39 data() { 156 data() {
40 return { 157 return {
41 filters: { 158 filters: {
42 - name: '' 159 + username: '',
  160 + realname: ''
43 }, 161 },
44 - loading: false,  
45 - users: [  
46 - ] 162 + users: [],
  163 + total: 0,
  164 + pageNum: 1,
  165 + pageSize: 5,
  166 + listLoading: false,
  167 + sels: [],//列表选中列
  168 + //编辑界面是否显示
  169 + editFormVisible: false,
  170 + editLoading: false,
  171 + editFormRules: {
  172 + name: [
  173 + { required: true, message: '请输入姓名', trigger: 'blur' }
  174 + ]
  175 + },
  176 + //编辑界面数据
  177 + editForm: {
  178 + userId: 1,
  179 + username: '',
  180 + password: '',
  181 + sex: 1,
  182 + creattime: '',
  183 + address: '',
  184 + realname: '',
  185 + email: '',
  186 + mobilephone: '',
  187 + state: 'true'
  188 + },
  189 +
  190 + addFormVisible: false,//新增界面是否显示
  191 + addLoading: false,
  192 + addFormRules: {
  193 + username: [
  194 + { required: true, message: '请输入姓名', trigger: 'blur' }
  195 + ]
  196 + },
  197 + //新增界面数据
  198 + addForm: {
  199 + username: '',
  200 + password: '',
  201 + sex: 1,
  202 + address: '',
  203 + realname: '',
  204 + email: '',
  205 + mobilephone: '',
  206 + age: 1
  207 + }
  208 +
47 } 209 }
48 }, 210 },
49 methods: { 211 methods: {
@@ -51,24 +213,171 @@ @@ -51,24 +213,171 @@
51 formatSex: function (row, column) { 213 formatSex: function (row, column) {
52 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; 214 return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
53 }, 215 },
  216 + formatState: function (row, column) {
  217 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  218 + },
  219 + handleCurrentChange(val) {
  220 + this.pageNum = val;
  221 + this.getUsers();
  222 + },
54 //获取用户列表 223 //获取用户列表
55 - getUser: function () { 224 + getUsers() {
56 let para = { 225 let para = {
57 - name: this.filters.name 226 + pageNum: this.pageNum,
  227 + pageSize: this.pageSize,
  228 + username: this.filters.username
58 }; 229 };
59 - this.loading = true; 230 + this.listLoading = true;
60 //NProgress.start(); 231 //NProgress.start();
61 - getUserList(para).then((res) => {  
62 - this.users = res.data.users;  
63 - this.loading = false; 232 + getUserList(para).then((res) => {
  233 + this.total = res.data.total;
  234 + this.users = res.data.list;
  235 + this.listLoading = false;
64 //NProgress.done(); 236 //NProgress.done();
  237 + }).catch((error) => {
  238 + this.listLoading = false;
  239 + let res= error.response.data;
  240 +
  241 + alert(res.msg);
  242 + });
  243 +
  244 + },
  245 + //删除
  246 + handleDel: function (index, row) {
  247 + this.$confirm('确认删除该记录吗?', '提示', {
  248 + type: 'warning'
  249 + }).then(() => {
  250 + this.listLoading = true;
  251 + //NProgress.start();
  252 + let para = { userId: row.userId };
  253 + removeUser(para).then((res) => {
  254 + this.listLoading = false;
  255 + //NProgress.done();
  256 + this.$message({
  257 + message: '删除成功',
  258 + type: 'success'
  259 + });
  260 + this.getUsers();
  261 + }).catch((error) => {
  262 + this.listLoading = false;
  263 + alert(error);
  264 + });
  265 + }).catch();
  266 + },
  267 + /**
  268 + * 显示编辑界面
  269 + * @param index
  270 + * @param row 为这行的数据对象
  271 + */
  272 + handleEdit: function (index, row) {
  273 + this.editFormVisible = true;
  274 + this.editForm = Object.assign({}, row);
  275 + },
  276 + //显示新增界面，每次点开初始化数据
  277 + handleAdd: function () {
  278 + this.addFormVisible = true;
  279 + this.addForm = {
  280 + username: '',
  281 + password: '',
  282 + sex: 1,
  283 + address: '',
  284 + realname: '',
  285 + email: '',
  286 + mobilephone: '',
  287 + age: 1
  288 + };
  289 + },
  290 + //编辑
  291 + editSubmit: function () {
  292 + this.$refs.editForm.validate((valid) => {
  293 + if (valid) {
  294 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  295 + this.editLoading = true;
  296 + //NProgress.start();
  297 + let para = Object.assign({}, this.editForm);
  298 + //不需要提交的 去掉，后端不好接收
  299 + para.authorities = null;
  300 + para.permissions = null;
  301 + para.roles = null;
  302 +// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  303 + /*
  304 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  305 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  306 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  307 + 式;
  308 + */
  309 + /*moment 安装 npm install moment --save*/
  310 + para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  311 + this.editLoading = false;
  312 + editUser(para).then((res) => {
  313 +
  314 + //NProgress.done();
  315 + this.$message({
  316 + message: '提交成功',
  317 + type: 'success'
  318 + });
  319 + this.$refs['editForm'].resetFields();
  320 + this.editFormVisible = false;
  321 + this.getUsers();
  322 + }).catch(error => alert(error));
  323 + });
  324 + }
  325 + });
  326 + },
  327 + //新增
  328 + addSubmit: function () {
  329 + this.$refs.addForm.validate((valid) => {
  330 + if (valid) {
  331 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  332 + this.addLoading = true;
  333 + //NProgress.start();
  334 + let para = Object.assign({}, this.addForm);
  335 + para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  336 + addUser(para).then((res) => {
  337 + this.addLoading = false;
  338 + //NProgress.done();
  339 + this.$message({
  340 + message: '提交成功',
  341 + type: 'success'
  342 + });
  343 + this.$refs['addForm'].resetFields();
  344 + this.addFormVisible = false;
  345 + this.getUsers();
  346 + }).catch(error => alert(error));
  347 + });
  348 + }
  349 + });
  350 + },
  351 + selsChange: function (sels) {
  352 + this.sels = sels;
  353 + },
  354 + //批量删除
  355 + batchRemove: function () {
  356 + var ids = this.sels.map(item => item.id).toString();
  357 + this.$confirm('确认删除选中记录吗？', '提示', {
  358 + type: 'warning'
  359 + }).then(() => {
  360 + this.listLoading = true;
  361 + //NProgress.start();
  362 + let para = { ids: ids };
  363 + batchRemoveUser(para).then((res) => {
  364 + this.listLoading = false;
  365 + //NProgress.done();
  366 + this.$message({
  367 + message: '删除成功',
  368 + type: 'success'
  369 + });
  370 + this.getUsers();
  371 + });
  372 + }).catch(() => {
  373 +
65 }); 374 });
66 } 375 }
67 }, 376 },
68 mounted() { 377 mounted() {
69 - this.getUser(); 378 + this.getUsers();
70 } 379 }
71 - }; 380 + }
72 381
73 </script> 382 </script>
74 383