朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 0b46857988fa251bca82dc96b99efeb27d78e76e 1 个父辈 48bd44eb

修改界面

内嵌 并排对比
正在显示 23 个修改的文件 包含 1032 行增加 和 643 行删除
... ... @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>流浪地球项目</title>
<title>易通快速通关申报管理系统</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
... ... @@ -14,4 +14,4 @@
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -7,7 +7,7 @@ Vue.prototype.$http = axios;
export const getuserMenus = params => { return axios.get(`/perm/userMenus`, { params: params }); };
export const getUserList = params => { return axios.get(`/hqpt-user-center/user/list`, { params: params }); };
export const getUserList = params => { return axios.get(`/cloud-user-center/user/list`, { params: params }); };
export const getUserListPage = params => { return axios({
method: 'GET',
... ... @@ -55,4 +55,4 @@ export const setUserRole = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/company';
let base = '/cloud-user-center/company';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ... @@ -34,4 +34,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/department';
let base = '/cloud-user-center/department';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ... @@ -34,4 +34,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/group';
let base = '/cloud-user-center/group';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ... @@ -34,4 +34,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
... ... @@ -46,7 +46,7 @@ export default {
login: data =>{
return axios({
method: 'POST', // 请求协议
url: 'hqpt-user-center/login', // 请求的地址
url: 'cloud-user-center/login', // 请求的地址
data: qs.stringify(data), // post 请求的数据
timeout: 30000, // 超时时间, 单位毫秒
headers: {
... ... @@ -67,4 +67,4 @@ export default {
// headers: {},
// // axios 的配置
// config: {}
// }
\ No newline at end of file
// }
... ...
import axios from 'axios'
let base = '/hqpt-user-center/system/log';
let base = '/cloud-user-center/system/log';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ...
import axios from 'axios'
let base = '/hqpt-user-center/perm';
let base = '/cloud-user-center/perm';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ... @@ -34,4 +34,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/role';
let base = '/cloud-user-center/role';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ... @@ -43,4 +43,4 @@ export const updateRolePerm = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/come_car';
let base = '/cloud-user-center/come_car';
... ... @@ -35,4 +35,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/key';
let base = '/cloud-user-center/key';
... ... @@ -35,4 +35,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/maintain';
let base = '/cloud-user-center/maintain';
... ... @@ -35,4 +35,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/on_duty';
let base = '/cloud-user-center/on_duty';
... ... @@ -35,4 +35,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/inspection';
let base = '/cloud-user-center/inspection';
... ... @@ -35,4 +35,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
import http from './http.js'
let baseUrl = '/hqpt-user-center/user'
let baseUrl = '/cloud-user-center/user'
export const getUserList = params => { return http.get(`${baseUrl}/list`, params); };
... ... @@ -13,4 +13,4 @@ export const editUser = params => { return http.put(`/user/edit`,params)};
export const addUser = params => { return http.post(`/user/add`,params)};
export const setUserRole = params => { return http.put(`/user/roleset`,params)};
\ No newline at end of file
export const setUserRole = params => { return http.put(`/user/roleset`,params)};
... ...
import axios from 'axios'
let base = '/hqpt-user-center/water_stations_patrol';
let base = '/cloud-user-center/water_stations_patrol';
... ... @@ -35,4 +35,4 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
})};
... ...
... ... @@ -7,9 +7,9 @@ import Role from './views/nav1/role.vue'
import Perm from './views/nav1/perm.vue'
import LOG from './views/nav1/Log.vue'
import PreManifest from './views/agent/PreManifest.vue'
import Company from './views/nav1/company.vue'
import Department from './views/nav1/department.vue'
import Group from './views/nav1/groupcompany.vue'
// import Company from './views/nav1/company.vue'
// import Department from './views/nav1/department.vue'
// import Group from './views/nav1/groupcompany.vue'
import Process from './views/hqpt/Process.vue'
import Job from './views/hqpt/Job.vue'
// import Form from './views/nav1/Form.vue'
... ... @@ -58,12 +58,12 @@ let routes = [
iconCls: 'el-icon-setting',//图标样式class
children: [
{ path: '/user', component: User, name: '用户管理' },
{ path: '/role', component: Role, name: '岗位管理' },
{ path: '/role', component: Role, name: '组织机构' },
{ path: '/perm', component: Perm, name: '权限管理' },
{ path: '/log', component: LOG, name: '系统日志' },
{ path: '/department', component: Department, name: '部门管理' },
{ path: '/company', component: Company, name: '公司管理'},
{ path: '/group', component: Group, name: '集团管理'}
// { path: '/department', component: Department, name: '部门管理' },
// { path: '/company', component: Company, name: '公司管理'},
// { path: '/group', component: Group, name: '集团管理'}
]
},
{
... ... @@ -161,4 +161,4 @@ let handleMenuList = function (router,menu) {
}
export default {
routes,setUserMenus,handleMenuList,initRouters
};
\ No newline at end of file
};
... ...
<template>
<el-row class="container">
<el-row class="container darkmenu" style="margin-top: 0px;">
<el-col :span="24" class="header">
<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
<el-col :span="10" class="logo" align="center" :class="collapsed?'logo-collapse-width':'logo-width'">
{{collapsed?'':sysName}}
</el-col>
<el-col :span="10">
... ... @@ -11,75 +11,182 @@
</el-col>
<el-col :span="4" class="userinfo">
<el-dropdown trigger="hover">
<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
<span class="el-dropdown-link userinfo-inner"><img
:src="this.sysUserAvatar"/> {{sysUserName}}</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item>
<el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-col>
<el-col>
<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
<el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">
<el-form-item label="用户名" prop="name">
<span>{{sysUserName}}</span>
</el-form-item>
<el-form-item label="新密码" prop="newpwd">
<el-input type="password" v-model="resetForm.newpwd" autocomplete="off"
placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="renewpwd">
<el-input type="password" v-model="resetForm.renewpwd" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
<el-col :span="24" class="main">
<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
<!--导航菜单-->
<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">
<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">
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
v-if="!child.hidden">{{child.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i
:class="item.iconCls"></i>{{item.children[0].name}}
</el-menu-item>
</template>
</el-menu>
<!--导航菜单-折叠后-->
<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
<template v-if="!item.leaf">
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)"
@mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)"
@mouseout="showMenu(index,false)">
<li v-for="child in item.children" v-if="!child.hidden" :key="child.path"
class="el-menu-item" style="padding-left: 40px;"
:class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">
{{child.name}}
</li>
</ul>
</template>
<template v-else>
<li class="el-submenu">
<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>
</li>
</template>
<li class="el-submenu">
<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>
</li>
</ul>
</aside>
<section class="content-container">
<div class="grid-content bg-purple-light">
<el-col :span="24" class="breadcrumb-container">
<strong class="title">{{$route.name}}</strong>
<el-breadcrumb separator="/" class="breadcrumb-inner">
<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</div>
</section>
</template>
</li>
</ul>
</aside>
<section class="content-container">
<div class="grid-content bg-purple-light">
<el-col :span="24" class="breadcrumb-container">
<strong class="title">{{$route.name}}</strong>
<el-breadcrumb separator=">" class="breadcrumb-inner">
<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
</el-row>
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view :key="$route.path +$route.query.t"></router-view>
</transition>
</el-col>
</div>
</section>
</el-col>
</el-row>
</template>
<script>
import rt from '../routes'
export default {
import rt from '../routes'
import {editPass} from '../api/user';
import ElFormItem from "element-ui/packages/form/src/form-item";
export default {
provide() {
return {
reload: this.reload
}
},
components: {ElFormItem},
data() {
var validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入新密码'));
} else {
var ls = 0;
if (value.match(/([a-z])+/)) {
ls++;
}
if (value.match(/([0-9])+/)) {
ls++;
}
if (value.match(/([A-Z])+/)) {
ls++;
}
if ((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)) {
ls++;
}
if (value.toString().length < 8 || value.toString().length > 20) {
callback(new Error('密码长度为8 - 20个字符'));
ls = 0;
}
if (value.match(/([\u4E00-\u9FA5])+/)) {
callback(new Error('不能包含中文字符'));
ls = 0;
}
switch (ls) {
case 0:
this.passwordPercent = 0;
callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));
break;
case 1:
this.passwordPercent = 33;
callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));
break;
case 2:
this.passwordPercent = 66;
callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));
break;
case 3:
case 4:
this.passwordPercent = 100;
break;
default:
this.passwordPercent = 0;
break;
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.resetForm.newpwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
sysName:'后勤管理平台',
collapsed:false,
sysName: '易通快速通关申报管理系统',
collapsed: false,
sysUserName: '',
sysUserId: '',
sysUserAvatar: '',
isRouterAlive: true,
form: {
name: '',
region: '',
... ... @@ -89,10 +196,67 @@
type: [],
resource: '',
desc: ''
}
},
dialogFormVisible: false,
resetForm: {
newpwd: '',
renewpwd: '',
},
resetFormRules: {
newpwd: [
{required: true, validator: validatePass, trigger: 'blur'}
],
renewpwd: [
{required: true, validator: validatePass2, trigger: 'blur'}
]
},
editForm: {
userId: '',
password: '',
},
}
},
methods: {
reload() {
this.$nextTick(function () {
this.$router.push({
path: this.$router.path,
query: {
t: new Date().getTime()
}
})
})
},
editPass: function () {
this.dialogFormVisible = true;
},
submitEdit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.editForm.userId = this.sysUserId;
this.editForm.password = this.resetForm.renewpwd;
editPass(this.editForm).then(res => {
let response = res.data;
if (response.code == '200') {
this.$notify({
title: '密码修改成功',
message: '密码修改成功，退出请重新登录',
type: 'success'
});
this.dialogFormVisible = false;
} else {
this.$notify.error({
title: '密码修改失败',
message: '密码修改失败！！！'
});
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
onSubmit() {
console.log('submit!');
},
... ... @@ -103,7 +267,7 @@
console.log('handleclose');
},
handleselect: function (a, b) {
console.log('handleselect!');
this.reload()
},
//退出登录
logout: function () {
... ... @@ -112,11 +276,10 @@
//type: 'warning'
}).then(() => {
sessionStorage.removeItem('user');
sessionStorage.removeItem('menu');
//退出后初始化原来的路由
let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
console.log(sysRoutes);
sessionStorage.removeItem('menu');
//退出后初始化原来的路由
let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
console.log(sysRoutes);
_this.$router.options.routes = sysRoutes;
_this.$router.push('/login');
... ... @@ -127,28 +290,29 @@
},
//折叠导航栏
collapse:function(){
this.collapsed=!this.collapsed;
collapse: function () {
this.collapsed = !this.collapsed;
},
showMenu(i,status){
this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
showMenu(i, status) {
this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
}
},
mounted() {
var _this = this;
var _this = this;
var user = sessionStorage.getItem('user');
if (user) {
user = JSON.parse(user);
this.sysUserName = user.username || '';
this.sysUserId = user.userId || '';
this.sysUserAvatar = user.userface || '/static/images/faceDefault.jpg';
}
//操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
var userRouters = sessionStorage.getItem('menu');
if (userRouters) {
userRouters = JSON.parse(userRouters);
_this.$router.options.routes = userRouters;
console.log("home:");
console.log(_this.$router.options.routes);
userRouters = JSON.parse(userRouters);
_this.$router.options.routes = userRouters;
console.log("home:");
console.log(_this.$router.options.routes);
}
}
}
... ... @@ -157,24 +321,28 @@
<style scoped lang="scss">
@import '~scss_vars';
.container {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
.header {
height: 60px;
line-height: 60px;
background: $color-primary;
color:#fff;
background: $color-primary url("/static/images/air-banner.png");
color: #fff;
.userinfo {
text-align: right;
padding-right: 35px;
float: right;
.userinfo-inner {
cursor: pointer;
color:#fff;
color: #fff;
img {
width: 40px;
height: 40px;
... ... @@ -184,38 +352,45 @@
}
}
}
.logo {
//width:230px;
height:60px;
height: 60px;
font-size: 22px;
padding-left:20px;
padding-right:20px;
border-color: rgba(238,241,146,0.3);
padding-left: 20px;
padding-right: 20px;
border-color: rgba(238, 241, 146, 0.3);
border-right-width: 1px;
border-right-style: solid;
img {
width: 40px;
float: left;
margin: 10px 10px 10px 18px;
}
.txt {
color:#fff;
color: #fff;
}
}
.logo-width{
width:230px;
.logo-width {
width: 230px;
}
.logo-collapse-width{
width:60px
.logo-collapse-width {
width: 60px
}
.tools{
.tools {
padding: 0px 23px;
width:14px;
width: 14px;
height: 60px;
line-height: 60px;
cursor: pointer;
}
}
.main {
display: flex;
// background: #324057;
... ... @@ -223,63 +398,79 @@
top: 60px;
bottom: 0px;
overflow: hidden;
aside {
flex:0 0 230px;
flex: 0 0 230px;
width: 230px;
// position: absolute;
// top: 0px;
// bottom: 0px;
.el-menu{
height: 100%;
}
.collapsed{
width:60px;
.item{
.collapsed {
width: 60px;
.item {
position: relative;
}
.submenu{
position:absolute;
top:0px;
left:60px;
z-index:99999;
height:auto;
display:none;
.submenu {
position: absolute;
top: 0px;
left: 60px;
z-index: 99999;
height: auto;
display: none;
}
}
}
.menu-collapsed{
flex:0 0 60px;
.menu-collapsed {
flex: 0 0 60px;
width: 60px;
}
.menu-expanded{
flex:0 0 230px;
.menu-expanded {
flex: 0 0 230px;
width: 230px;
}
.menu-expanded ul{
.menu-expanded ul {
width: 230px;
}
.content-container {
// background: #f1f2f7;
flex:1;
flex: 1;
// position: absolute;
// right: 0px;
// top: 0px;
// bottom: 0px;
// left: 230px;
overflow-y: scroll;
padding: 20px;
padding: 10px;
background-color: #dfe6e9;
.breadcrumb-container {
//margin-bottom: 15px;
background: #bfcbd9;
.title {
width: 200px;
float: left;
color: #475669;
margin-left: 20px;
margin-top: 8px;
font-size: 16px;
}
.breadcrumb-inner {
float: right;
margin-right: 20px;
}
.el-breadcrumb {
line-height: 36px;
}
}
.content-wrapper {
background-color: #fff;
box-sizing: border-box;
... ... @@ -287,4 +478,50 @@
}
}
}
</style>
\ No newline at end of file
</style>
<style lang="scss">
.darkmenu {
.main {
aside {
.el-menu {
height: 100%;
background: #606060;
.el-menu-item {
i {
color: white;
}
color: white;
}
.el-menu-item.is-active {
color: #e6a23c;
}
.el-menu-item:hover, .el-menu-item:focus {
background-color: #1a4496;
}
.el-submenu {
ul.el-menu.el-menu--inline {
background: #303030;
}
.el-submenu__title {
color: white;
i {
color: white;
}
}
.el-submenu__title:hover {
background-color: #1a4496;
}
}
}
}
}
}
</style>
... ...
... ... @@ -15,26 +15,28 @@
</el-form>
</el-col>
<!--列表-->
<el-table :data="logs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="index" width="60">
<el-table :data="logs" highlight-current-row border v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="index" width="60" align="center">
</el-table-column>
<el-table-column prop="logid" label="ID" width="80" sortable>
<el-table-column prop="logid" label="ID" width="80" sortable align="center">
</el-table-column>
<el-table-column prop="username" label="操作账号" width="120" sortable>
<el-table-column prop="username" label="操作账号" width="120" sortable align="center">
</el-table-column>
<el-table-column prop="ip" label="IP" width="100" sortable>
<el-table-column prop="ip" label="IP" width="110" sortable align="center">
</el-table-column>
<el-table-column prop="logcreattime" label="操作时间" width="200" sortable>
<el-table-column prop="logcreattime" label="操作时间" width="200" sortable align="center">
</el-table-column>
<el-table-column prop="methodname" label="系统动作" width="120" sortable>
<el-table-column prop="methodname" label="系统动作" width="120" sortable align="center">
</el-table-column>
<el-table-column prop="operatenamecn" label="动作描述" width="120" sortable>
<el-table-column prop="operatenamecn" label="动作描述" width="120" sortable align="center">
</el-table-column>
<el-table-column prop="modelnamecn" label="操作模块" width="120" sortable>
<el-table-column prop="modelnamecn" label="操作模块" width="120" sortable align="center">
</el-table-column>
<el-table-column prop="classname" label="系统类" show-overflow-tooltip="true" width="100" sortable>
<el-table-column prop="classname" label="系统类" show-overflow-tooltip width="100" sortable align="center">
</el-table-column>
<el-table-column prop="result" label="操作结果" min-width="200" sortable>
<el-table-column prop="parameters" label="参数" show-overflow-tooltip width="100" sortable align="center">
</el-table-column>
<el-table-column prop="result" label="操作结果" min-width="200" sortable align="center">
</el-table-column>
</el-table>
... ... @@ -122,4 +124,4 @@
<style scoped>
</style>
\ No newline at end of file
</style>
... ...
... ... @@ -16,32 +16,36 @@
</el-col>
<!--列表-->
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55">
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
row-key="permissionId"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column type="index" width="60">
<!--<el-table-column type="index" width="60">-->
<!--</el-table-column>-->
<el-table-column prop="permissionId" label="ID" width="130" align="center" sortable>
</el-table-column>
<el-table-column prop="permissionId" label="ID" width="100" sortable>
<el-table-column prop="name" label="权限名称" min-width="150" align="center" sortable>
</el-table-column>
<el-table-column prop="name" label="权限名称" min-width="200" sortable>
<el-table-column prop="description" label="描述" min-width="120" align="center" sortable>
</el-table-column>
<el-table-column prop="description" label="描述" min-width="200" sortable>
<el-table-column prop="ismenu" label="是否目录" width="120" :formatter="formatState" align="center" sortable>
</el-table-column>
<el-table-column prop="permissionOrder" label="排序" width="100" sortable>
<el-table-column prop="url" label="访问路径" width="250" align="center" sortable>
</el-table-column>
<el-table-column prop="url" label="路径" width="100" sortable>
</el-table-column>
<el-table-column label="操作" min-width="150">
<el-table-column label="操作" min-width="150" align="center">
<template slot-scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
<el-button size="small" type="success" icon="el-icon-check" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-button type="danger" icon="el-icon-delete" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
</el-pagination>
</el-col>
... ... @@ -143,7 +147,7 @@
tableList: [],
total: 0,
pageNum: 1,
pageSize: 10,
pageSize: 10000,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
... ... @@ -208,7 +212,7 @@
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
... ... @@ -373,4 +377,4 @@
<style scoped>
</style>
\ No newline at end of file
</style>
... ...
... ... @@ -10,34 +10,46 @@
<el-button type="primary" v-on:click="getRoles()">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
<el-button type="success" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55">
<el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
default-expand-all
row-key="roleId"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection" width="60" align="center">
</el-table-column>
<el-table-column type="index" width="60">
<!--<el-table-column type="index" width="60">-->
<!--</el-table-column>-->
<el-table-column prop="roleId" label="ID" width="110" align="center">
</el-table-column>
<el-table-column prop="roleId" label="ID" width="100" sortable>
<el-table-column prop="roleName" label="岗位/角色名称" width="180" sortable align="center">
</el-table-column>
<el-table-column prop="roleName" label="岗位/角色名称" min-width="200" sortable>
<!--<el-table-column prop="departmentName" label="部门名称" min-width="200" sortable>-->
<!--</el-table-column>-->
<el-table-column prop="description" label="描述" min-width="100" align="center" >
</el-table-column>
<el-table-column prop="departmentName" label="部门名称" min-width="200" sortable>
<el-table-column prop="type" label="类型" min-width="100" sortable align="center">
</el-table-column>
<el-table-column prop="description" label="岗位/角色描述" min-width="200" sortable>
</el-table-column>
<el-table-column label="操作" min-width="260">
<!-- <el-table-column prop="businessLicense" label="工商代码" min-width="180" align="center">-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="customsRegCode" label="海关备案代码" min-width="150" align="center" >-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="mqcode" label="海关通道编号" min-width="150" align="center">-->
<!-- </el-table-column>-->
<el-table-column label="操作" width="230px" fixed="right" align="center">
<template slot-scope="scope">
<el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
<el-button type="success" size="small" @click="handleAdd(scope.$index, scope.row)" style="width:97px;margin-left: 1px;">新增下级</el-button>
<el-button type="warning" size="small" @click="setPerm(scope.$index, scope.row)" style="width:97px;margin-left: 1px;">设置权限</el-button>
<el-button type="primary" style="width:97px;margin-left: 1px;margin-top: 3px;" size="small" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)" style="width:97px;margin-left: 1px;">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
... ... @@ -45,67 +57,57 @@
</el-pagination>
</el-col>
<!--编辑界面-->
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="ID">
<span>{{editForm.roleId}}</span>
</el-form-item>
<el-form-item label="岗位名称">
<el-input v-model="editForm.roleName" auto-complete="off" placeholder="请输入岗位/角色名称：例如:ROLE_name"></el-input>
</el-form-item>
<el-form-item label="岗位描述">
<el-input v-model="editForm.description" auto-complete="off" placeholder="请输入岗位/角色描述：例如:用户管理员"></el-input>
</el-form-item>
<el-form-item label="部门名称">
<el-select v-model="editForm.departmentId" placeholder="请选择">
<el-option
v-for="item in departmentNameList"
:key="item.departmentId"
:label="item.departmentName"
:value="item.departmentId">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
<!--新增界面-->
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="岗位/角色名称" prop="roleName">
<el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入岗位/角色名称：例如:ROLE_name"></el-input>
<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
<el-form-item label="上级组织机构">
<span>{{addForm.parentName}}</span>
</el-form-item>
<el-form-item label="组织机构名称" prop="roleName">
<el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入组织机构名称：例如:公司名称"></el-input>
</el-form-item>
<el-form-item label="岗位/角色描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入岗位/角色描述：例如:用户管理员"></el-input>
<el-form-item label="组织机构描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="组织机构描述：例如:组织机构简介"></el-input>
</el-form-item>
<el-form-item label="部门名称" prop="roleSign">
<el-select v-model="addForm.departmentId" placeholder="请选择">
<el-form-item label="组织机构类型" prop="type">
<el-select
v-model="addForm.type"
filterable
allow-create
default-first-option
placeholder="请选择类型">
<el-option
v-for="item in departmentNameList"
:key="item.departmentId"
:label="item.departmentName"
:value="item.departmentId">
v-for="item in companyOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="工商企业代码" prop="businessLicense">-->
<!-- <el-input v-model="addForm.businessLicense" auto-complete="off" placeholder="社会信用代码或者组织机构代码"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="海关备案代码" prop="customsRegCode">-->
<!-- <el-input v-model="addForm.customsRegCode" auto-complete="off" placeholder="海关备案后返回的备案代码"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="海关通道编号" prop="mqcode">-->
<!-- <el-input v-model="addForm.mqcode" auto-complete="off" placeholder="海关通道编号"></el-input>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
<el-button type="primary" @click="dialogStatus==='create'?addSubmit():editSubmit()" :loading="addLoading" >提交</el-button>
</div>
</el-dialog>
<!--权限设置界面-->
<el-dialog title="岗位的权限设置" :visible.sync="PermFormVisible" :close-on-click-modal="false">
<el-form :model="permForm" label-width="80px" ref="permForm">
<el-checkbox-group v-model="permIds" size="small">
<el-checkbox v-for="perm in permissons" :label="perm.permissionId" :key="perm.permissionId">{{perm.name}}</el-checkbox>
</el-checkbox-group>
<el-tree :data="permissons" :props="treeDefaultProps"
@check="clickDeal"
show-checkbox highlight-current default-expand-all check-on-click-node check-strictly
node-key="permissionId" ref="tree">
</el-tree>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="PermFormVisible = false">取消</el-button>
... ... @@ -128,6 +130,20 @@
filters: {
roleName: ''
},
companyOption: [
{
label: "集团",
value: "集团"
},
{
label: "公司",
value: "公司"
}
],
treeDefaultProps: {
children: 'children',
label: 'name',
},
departmentNameList:[],
roles: [],
permissons: [],
... ... @@ -137,23 +153,11 @@
pageSize: 5,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
roleName: [
{ required: true, message: '请输入岗位/角色名称', trigger: 'blur' }
]
dialogMap: {
update: '编辑',
create: '新增',
},
//编辑界面数据
editForm: {
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
departmentId:''
},
dialogStatus: 'create',
//新增界面是否显示
addFormVisible: false,
//设置权限界面是否显示
... ... @@ -172,7 +176,13 @@
description: '',
roleName: '',
roleSign: 1,
departmentId:''
departmentId:'',
type: '',
businessLicense: '',
customsRegCode: '',
parentName: '',
mqcode: ''
},
permForm: {
roleId: 1,
... ... @@ -225,7 +235,6 @@
},
//获取部门列表
getdepartmentNames() {
... ... @@ -265,7 +274,11 @@
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
message({
// 饿了么的消息弹窗组件
message: status+msg,
type: "error"
});
}else {
alert(error);
}
... ... @@ -300,14 +313,16 @@
* @param row 为这行的数据对象
*/
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
this.getdepartmentNames();
this.addFormVisible = true;
this.dialogStatus= 'update',
this.addForm = Object.assign({}, row);
// this.getdepartmentNames();
},
setPerm: function (index, row) {
this.PermFormVisible = true;
this.getPermList();
var _this = this;
this.permIds = [];
this.PermFormVisible = true;
this.permForm = Object.assign({}, row);
let rolePerms = this.permForm.permissions;
if (util.checkNull(rolePerms)){
... ... @@ -317,31 +332,47 @@
}
});
}
this.getPermList();
this.$nextTick(() => {
//反向适配
this.$refs.tree.setCheckedKeys(this.permIds);
});
},
//显示新增界面，每次点开初始化数据
handleAdd: function () {
handleAdd: function (index,row) {
this.addFormVisible = true;
this.dialogStatus= 'create';
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
};
this.getdepartmentNames();
description: '',
roleName: '',
roleSign: 1,
departmentId:'',
type: '',
businessLicense: '',
customsRegCode: '',
mqcode: '',
parentid: 0
};
//如果新增下级
if(util.checkNull(row)){
//传递上级ID
let parentRole = Object.assign({}, row);
this.addForm.parentid = parentRole.roleId;
this.addForm.parentName = parentRole.roleName;
}
// this.getdepartmentNames();
},
//编辑
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
this.addLoading = true;
//NProgress.start();
let para = Object.assign({}, this.editForm);
let para = Object.assign({}, this.addForm);
//不需要提交的 去掉，后端不好接收
para.authorities = null;
para.permissions = null;
... ... @@ -354,8 +385,8 @@
式;
*/
/*moment 安装 npm install moment --save*/
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
// para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.addLoading = false;
edit(para).then((res) => {
//NProgress.done();
... ... @@ -363,8 +394,8 @@
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getRoles();
}).catch(error => alert(error));
});
... ... @@ -403,7 +434,7 @@
//NProgress.start();
let role = Object.assign({}, this.permForm);
let roleId = role.roleId;
let permissionIds = this.permIds
let permissionIds = this.$refs.tree.getCheckedKeys();
let para = {roleId,permissionIds};
updateRolePerm(para).then((res) => {
this.addLoading = false;
... ... @@ -446,6 +477,81 @@
}).catch(() => {
});
},
treeHandleCheckChange: function (data, checked, indeterminate) {
if(checked) {
this.permIds.push(data.permissionId);
}else {
this.permIds.splice(this.permIds.contains(data.permissionId),1);
}
console.log(data, checked, indeterminate);
},
uniteParentSame(id,treeStatus){//当子节点全为未选中时父节点也变为未选中状态
let node = this.$refs.tree.getNode(permissionId);//获取当前节点的节点树
if (node.parent !== null && node.parent !== undefined) {
let parentNode = node.parent.data;//获取当前节点的父节点树
if (parentNode != undefined){//判断父节点是否存在
for (let i = 0; i < parentNode.children.length; i++) {
let checkedKeys = this.$refs.tree.getCheckedKeys();
let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
let selectNodes = checkedKeys.concat(hafCheckedKeys);//获取已选择树节点
let selected = selectNodes.indexOf(parentNode.children[i].permissionId); // -1当前节点的同级节点是否全部未选中
if (selected !== -1){
return;
}
}
}else {
return;
}
this.$refs.tree.setChecked(parentNode.permissionId, false);//修改节点为未选择
if(node.level>2){//判断是否是最上级节点
this.uniteParentSame(parentNode.permissionId,treeStatus)
}
}else {
return;
}
},
// 统一处理子节点为相同的勾选状态
uniteChildSame(treeList, isSelected){
this.$refs.tree.setChecked(treeList.permissionId, isSelected);
if (treeList.children !== undefined){
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected)
}
}
},
// 统一处理父节点为选中
selectedParent(currentObj){
let currentNode = this.$refs.tree.getNode(currentObj);
if (currentNode.parent.key !== undefined) {
this.$refs.tree.setChecked(currentNode.parent, true);
this.selectedParent(currentNode.parent)
}
},
clickDeal: function (currentObj, treeStatus){
// 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.permissionId); // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedParent(currentObj);
// 统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true)
} else {
// 未选中 处理子节点全部未选中
if (currentObj.children !== undefined){
if (currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false)
}
//放开时为当子节点全为未选中时父节点也变为未选中状态 注释后就是父节点不和子节点强制绑定
// this.uniteParentSame(currentObj.id,treeStatus)//当子节点全为未选中时父节点也变为未选中状态
}
// else {
// this.uniteParentSame(currentObj.id,treeStatus)
// }
}
}
},
mounted() {
... ... @@ -457,4 +563,4 @@
<style scoped>
</style>
\ No newline at end of file
</style>
... ...
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.realName" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.userName" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.realName" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.userName" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="userId" label="ID" width="100" sortable>
</el-table-column>
<el-table-column prop="username" label="账号" width="120" sortable>
</el-table-column>
<el-table-column prop="realname" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="mobilephone" label="电话" width="125">
</el-table-column>
<el-table-column prop="creattime" label="创建时间" width="170" sortable>
</el-table-column>
<el-table-column prop="updatetime" label="更新时间" width="170" sortable>
</el-table-column>
<el-table-column prop="address" label="地址" min-width="180">
</el-table-column>
<el-table-column prop="email" label="Email" min-width="180">
</el-table-column>
<el-table-column prop="state" label="启用" width="100" :formatter="formatState" sortable>
</el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button size="small" @click="roleEdit(scope.$index, scope.row)">权限配置</el-button>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--列表-->
<el-table :data="users" highlight-current-row border v-loading="listLoading" @selection-change="selsChange"
style="width: 100%;">
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<!--<el-table-column type="index" width="60">-->
<!--</el-table-column>-->
<el-table-column prop="userId" label="ID" width="100" align="center" sortable>
</el-table-column>
<el-table-column prop="username" label="账号" width="120" align="center" sortable>
</el-table-column>
<el-table-column prop="realname" label="姓名" width="120" align="center" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" align="center" sortable>
</el-table-column>
<el-table-column prop="mobilephone" label="电话" width="130" align="center">
</el-table-column>
<el-table-column prop="creattime" label="创建时间" width="175" align="center" sortable>
</el-table-column>
<el-table-column prop="updatetime" label="更新时间" width="175" align="center" sortable>
</el-table-column>
<el-table-column prop="address" label="地址" min-width="180" align="center">
</el-table-column>
<el-table-column prop="email" label="Email" min-width="180" align="center">
</el-table-column>
<el-table-column prop="state" label="启用" width="100" :formatter="formatState" align="center" sortable>
</el-table-column>
<el-table-column label="操作" width="300px" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-setting" size="small" @click="roleEdit(scope.$index, scope.row)">角色配置</el-button>
<el-button size="small" type="success" icon="el-icon-check" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" icon="el-icon-delete" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="10"
:total="total" style="float:right;">
</el-pagination>
</el-col>
<!--编辑界面-->
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="ID">
<span>{{editForm.userId}}</span>
</el-form-item>
<el-form-item label="账号">
<span>{{editForm.username}}</span>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="editForm.password" auto-complete="off" type="password" show-password></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realname">
<el-input v-model="editForm.realname" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobilephone">
<el-input v-model="editForm.mobilephone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="editForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" label="1" >男</el-radio>
<el-radio class="radio" label="0" >女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<!--<el-form-item label="创建日期">-->
<!--<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>-->
<!--</el-form-item>-->
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.address"></el-input>
</el-form-item>
<el-form-item label="启用">
<el-radio-group v-model="editForm.state">
<el-radio class="radio" label="true" >是</el-radio>
<el-radio class="radio" label="false" >否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item lable="头像">
<el-upload
class="avatar-uploader"
action="http://127.0.0.1:7003/upload"
:show-file-list="true"
accept="image/jpeg,image/jpg,image/png"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="faceImageUrl" :src="faceImageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
<!--编辑界面-->
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="ID">
<span>{{editForm.userId}}</span>
</el-form-item>
<el-form-item label="账号">
<span>{{editForm.username}}</span>
</el-form-item>
<!-- <el-form-item label="密码" prop="password">-->
<!-- <el-input v-model="editForm.password" auto-complete="off" type="password" show-password></el-input>-->
<!-- </el-form-item>-->
<el-form-item label="姓名" prop="realname">
<el-input v-model="editForm.realname" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobilephone">
<el-input v-model="editForm.mobilephone" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="editForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" label="1">男</el-radio>
<el-radio class="radio" label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<!--<el-form-item label="创建日期">-->
<!--<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>-->
<!--</el-form-item>-->
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.address"></el-input>
</el-form-item>
<el-form-item label="启用">
<el-radio-group v-model="editForm.state">
<el-radio class="radio" label="true">是</el-radio>
<el-radio class="radio" label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item lable="头像">
<el-upload
class="avatar-uploader"
action="http://127.0.0.1:7003/upload"
:show-file-list="true"
accept="image/jpeg,image/jpg,image/png"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="faceImageUrl" :src="faceImageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
<!--新增界面-->
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="账号" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realname">
<el-input v-model="addForm.realname"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobilephone">
<el-input v-model="addForm.mobilephone"></el-input>
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="addForm.sex">
<el-radio class="radio" label="1">男</el-radio>
<el-radio class="radio" label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="addForm.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<!--新增界面-->
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="账号" prop="username">
<el-input v-model="addForm.username" aria-placeholder="用户名长度在5-11位,支持英文和数字"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realname">
<el-input v-model="addForm.realname"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobilephone">
<el-input v-model="addForm.mobilephone"></el-input>
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="addForm.sex">
<el-radio class="radio" label="1">男</el-radio>
<el-radio class="radio" label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="addForm.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<!--权限设置-->
<el-dialog title="权限设置" :visible.sync="roleFormVisible" :close-on-click-modal="false">
<el-form :model="roleEditForm" label-width="80px" ref="roleEditForm" >
<el-form-item label="ID">
<span>{{roleEditForm.userId}}</span>
</el-form-item>
<el-form-item label="账号">
<span>{{roleEditForm.username}}</span>
</el-form-item>
<el-checkbox-group v-model="roleIds" size="small">
<el-checkbox-button v-for="role in roles" :label="role.roleId" :key="role.roleId" >{{role.description}}</el-checkbox-button>
</el-checkbox-group>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="roleFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</section>
<!--权限设置-->
<el-dialog title="权限设置" :visible.sync="roleFormVisible" :close-on-click-modal="false">
<el-form :model="roleEditForm" label-width="80px" ref="roleEditForm">
<el-form-item label="ID">
<span>{{roleEditForm.userId}}</span>
</el-form-item>
<el-form-item label="账号">
<span>{{roleEditForm.username}}</span>
</el-form-item>
<el-tree :data="roles" :props="treeDefaultProps" default-expand-all show-checkbox highlight-current
check-strictly node-key="roleId" ref="tree" @check-change="treeHandleCheckChange">
</el-tree>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="roleFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="roleEditSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
import util from '../../common/js/util'
import NProgress from 'nprogress'
import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/user';
import { getList} from '../../api/role_api';
import util from '../../common/js/util'
import NProgress from 'nprogress'
import {getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole} from '../../api/user';
import {getList} from '../../api/role_api';
import moment from 'moment'
export default {
data() {
return {
filters: {
export default {
data() {
return {
filters: {
userName: '',
realName: ''
},
users: [],
total: 0,
realName: ''
},
treeDefaultProps: {
children: 'children',
label: 'roleName',
},
users: [],
total: 0,
pageNum: 1,
pageSize: 10,
faceImageUrl: '',
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
//编辑界面数据
editForm: {
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
name: [
{required: true, message: '请输入姓名', trigger: 'blur'}
],
mobilephone: [
{required: true, message: '请输入手机号码', trigger: ['blur', 'change']}
]
},
//编辑界面数据
editForm: {
userId: 1,
username: '',
password: '',
sex: 1,
creattime: '',
password: '',
sex: '1',
creattime: undefined,
address: '',
realname: '',
email: '',
mobilephone: '',
state: 'true'
},
realname: '',
email: '',
mobilephone: '',
state: true
},
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
username: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
//用户角色配置
{required: true, message: '请输入姓名,用户名长度在5-11位,支持英文和数字', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码,用户名长度在6-18位,支持英文和数字和非空字符', trigger: 'blur'}
],
mobilephone: [
{required: true, message: '请输入手机号码', trigger: ['blur', 'change']},
],
},
//用户角色配置
roleFormVisible: false,
//新增界面数据
addForm: {
//新增界面数据
addForm: {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
email: '',
mobilephone: '',
age: 1
},
age: 1
},
roleEditForm: {
userId: 1,
username: "",
roles: []
},
roles: [],
username: "",
roles: []
},
roles: [],
roleIds: []
}
},
methods: {
//性别显示转换
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
}
},
methods: {
//性别显示转换
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
this.getUsers();
},
//获取用户列表
getUsers:function() {
let para = {
handleCurrentChange(val) {
this.pageNum = val;
this.getUsers();
},
//获取用户列表
getUsers: function () {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
userName: this.filters.userName,
realName: this.filters.realName
};
this.listLoading = true;
};
this.listLoading = true;
getUserList(para).then((res) => {
let response = res.data.data;
this.total = response.total;
this.users = response.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.total = response.total;
this.users = response.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
this.$message.error(error.toString());
});
});
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = { userId: row.userId };
removeUser(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getUsers();
}).catch((error) => {
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = {userId: row.userId};
removeUser(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getUsers();
}).catch((error) => {
this.listLoading = false;
alert(error);
});
}).catch();
},
});
}).catch();
},
/**
* 显示编辑界面
* 显示编辑界面
* @param index
* @param row 为这行的数据对象
*/
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
roleEdit: function (index, row) {
this.roleFormVisible = true;
this.getRoles();
var _this = this;
_this.roleIds = [];
this.roleEditForm = Object.assign({}, row);
let userRoles = this.roleEditForm.roles;
if (util.checkNull(userRoles)){
userRoles.forEach(function (role,v_index,v_arr) {
_this.roleIds[v_index] = role.roleId;
let roles = this.roleEditForm.roles;
if (util.checkNull(roles)) {
roles.forEach(function (role, v_index, v_arr) {
if (util.checkNull(role)) {
_this.roleIds[v_index] = role.roleId;
}
});
}
this.getRoles();
}
this.$nextTick(() => {
//反向适配
this.$refs.tree.setCheckedKeys(this.roleIds);
});
},
getRoles() {
let para = {
... ... @@ -336,45 +361,45 @@
NProgress.start();
getList(para).then((res) => {
this.roles = res.data.list;
this.roleFormVisible = true;
NProgress.done();
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
if (null != error.response && error.response !== undefined) {
let status = error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(status + msg);
} else {
alert(error);
}
});
},
//显示新增界面，每次点开初始化数据
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
//显示新增界面，每次点开初始化数据
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
email: '',
mobilephone: '',
age: 1
};
},
//编辑
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
//NProgress.start();
let para = Object.assign({}, this.editForm);
//不需要提交的 去掉，后端不好接收
para.authorities = null;
para.permissions = null;
para.roles = null;
};
},
//编辑
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
//NProgress.start();
// let para = Object.assign({}, this.editForm);
//不需要提交的 去掉，后端不好接收
this.editForm.authorities = null;
this.editForm.permissions = null;
this.editForm.roles = null;
// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
/*
查询之后格式this.filters.column.create_start_date中日期发生变化;
... ... @@ -382,112 +407,127 @@
所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
式;
*/
/*moment 安装 npm install moment --save*/
/*moment 安装 npm install moment --save*/
// para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
editUser(para).then((res) => {
editUser(this.editForm).then((res) => {
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getUsers();
}).catch(error => alert(error));
});
}
});
},
//新增
addSubmit: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addLoading = true;
let para = Object.assign({}, this.addForm);
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getUsers();
}).catch(error => alert(error));
});
}
});
},
//新增
addSubmit: function () {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addLoading = true;
let para = Object.assign({}, this.addForm);
// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
addUser(para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getUsers();
}).catch(error => {
addUser(para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getUsers();
}).catch(error => {
this.addLoading = false;
alert(error.message);
});
});
}
});
},
selsChange: function (sels) {
this.sels = sels;
},
//批量删除
batchRemove: function () {
var ids = this.sels.map(item => item.userId).toString();
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = { ids: ids };
batchRemoveUser(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getUsers();
});
}).catch(() => {
this.$message({
message: error.message,
type: 'error'
});
});
});
}
});
},
selsChange: function (sels) {
this.sels = sels;
},
//批量删除
batchRemove: function () {
var ids = this.sels.map(item => item.userId).toString();
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = {ids: ids};
batchRemoveUser(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getUsers();
});
}).catch(() => {
});
},
});
},
roleEditSubmit: function () {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
// this.editLoading = true;
let userId = this.roleEditForm.userId;
let roleIds = this.roleIds;
let para = {userId,roleIds};
let roleIds = this.$refs.tree.getCheckedKeys();
let para = {userId, roleIds};
setUserRole(para).then((res) => {
if (res.status ===200) {
alert("ok");
}
this.getUsers();
if (res.status === 200) {
this.$message({
message: '岗位设置成功',
type: 'success'
});
}
this.getUsers();
this.roleFormVisible = false;
}).catch(err => {
alert(err);
});
});
console.log(para);
});
});
},
handleAvatarSuccess: function (response) {
this.faceImageUrl = 'http://127.0.0.1:7003/' + response.data;
},
handleAvatarSuccess: function(response){
this.faceImageUrl = 'http://127.0.0.1:7003/'+response.data;
},
beforeAvatarUpload: function () {
},
treeHandleCheckChange: function (data, checked, indeterminate) {
if (checked) {
this.roleIds.push(data.roleId);
} else {
this.roleIds.splice(this.roleIds.contains(data.roleId), 1);
}
// console.log(data, checked, indeterminate);
console.log(this.roleIds);
}
},
mounted() {
this.getUsers();
},
computed: {
},
mounted() {
this.getUsers();
},
computed: {
hideShow() {//当图片多于一张的时候，就隐藏上传框
return this.file === '' ? false : true
}
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
</style>
... ...