朱兆平 / vue_cli · 提交

转到一个项目

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

系统设置 master

内嵌 并排对比
正在显示 15 个修改的文件 包含 793 行增加 和 555 行删除
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 }); };
... ...
... ... @@ -17,7 +17,7 @@ export default {
return axios({
method: 'GET',
url: url,
params: params,
params: params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
... ... @@ -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: {
... ...
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 }); };
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
\ No newline at end of file
... ...
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 }); };
... ...
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 }); };
... ...
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); };
export const getUserListPage = params => { return http.get(`/user/list`,params) };
... ...
var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
var DEFAULT_PATTERN = 'yyyy-MM-dd';
/**
* 根据数组 元素的“值” 来删除或者获取数据
* 使用方法arrList.splice(arrList.contains('c'),1)
*/
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return i; // 返回的这个 i 就是元素的索引下标，
}
}
return false;
}
function padding(s, len) {
var len = len - (s + '').length;
len = len - (s + '').length;
for (var i = 0; i < len; i++) { s = '0' + s; }
return s;
};
}
export default {
getQueryStringByName: function (name) {
... ... @@ -67,4 +80,4 @@ export default {
}
};
};
\ No newline at end of file
... ...
... ... @@ -53,7 +53,7 @@ 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: '部门管理' },
... ...
<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'">
<!-- {{collapsed?'':sysName}}-->水电费缴费平台
{{collapsed?'':sysName}}
</el-col>
<el-col :span="10">
<div class="tools" @click.prevent="collapse">
... ... @@ -23,7 +23,7 @@
<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" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<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>
... ... @@ -42,44 +42,50 @@
</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-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>
</el-row>
</div>
</section>
</el-col>
</el-row>
</template>
<script>
import rt from '../routes'
export default {
import rt from '../routes'
export default {
provide() {
return {
reload: this.reload
}
},
data() {
return {
sysName:'后勤管理平台',
sysName:'易通快速通关申报管理系统',
collapsed:false,
sysUserName: '',
sysUserAvatar: '',
isRouterAlive: true,
form: {
name: '',
region: '',
... ... @@ -93,6 +99,16 @@
}
},
methods: {
reload() {
this.$nextTick(function () {
this.$router.push({
path: this.$router.path,
query:{
t: new Date().getTime()
}
})
})
},
onSubmit() {
console.log('submit!');
},
... ... @@ -103,7 +119,7 @@
console.log('handleclose');
},
handleselect: function (a, b) {
console.log('handleselect!');
this.reload()
},
//退出登录
logout: function () {
... ... @@ -112,11 +128,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');
... ... @@ -135,7 +150,7 @@
}
},
mounted() {
var _this = this;
var _this = this;
var user = sessionStorage.getItem('user');
if (user) {
user = JSON.parse(user);
... ... @@ -145,10 +160,10 @@
//操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
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,7 +172,6 @@
<style scoped lang="scss">
@import '~scss_vars';
.container {
position: absolute;
top: 0px;
... ... @@ -166,7 +180,7 @@
.header {
height: 60px;
line-height: 60px;
background: $color-primary;
background: $color-primary url("/static/images/air-banner.png");
color:#fff;
.userinfo {
text-align: right;
... ... @@ -229,9 +243,6 @@
// position: absolute;
// top: 0px;
// bottom: 0px;
.el-menu{
height: 100%;
}
.collapsed{
width:60px;
.item{
... ... @@ -268,16 +279,21 @@
// bottom: 0px;
// left: 230px;
overflow-y: scroll;
padding: 20px;
padding: 10px;
.breadcrumb-container {
//margin-bottom: 15px;
.title {
width: 200px;
float: left;
color: #475669;
margin-left: 10px;
}
.breadcrumb-inner {
float: right;
margin-right:10px;
}
.el-breadcrumb{
line-height:36px;
}
}
.content-wrapper {
... ... @@ -287,4 +303,42 @@
}
}
}
</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>
\ No newline at end of file
... ...
... ... @@ -3,32 +3,32 @@
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">
<h3 class="title">系统登录</h3>
<el-form-item prop="account">
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
<el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
<el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-checkbox v-model="checked" checked class="remeberme">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
</el-form-item>
</el-form>
<div class="homepage-hero-module">
<div class="video-container">
<div :style="fixStyle" class="filter"></div>
<video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
<source src="/static/login/New-jumbo.mp4" type="video/mp4"/>
浏览器不支持 video 标签，建议升级浏览器。
<!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->
<!--浏览器不支持 video 标签，建议升级浏览器。-->
</video>
<div class="poster hidden" v-if="!vedioCanPlay">
<img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">
<div class="homepage-hero-module">
<div class="video-container">
<div :style="fixStyle" class="filter"></div>
<video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
<source src="/static/login/New-jumbo.mp4" type="video/mp4"/>
浏览器不支持 video 标签，建议升级浏览器。
<!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->
<!--浏览器不支持 video 标签，建议升级浏览器。-->
</video>
<div class="poster hidden" v-if="!vedioCanPlay">
<img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
... ... @@ -38,14 +38,14 @@
export default {
data() {
return {
vedioCanPlay: true,
fixStyle: '',
logining: false,
ruleForm2: {
account: 'admin',
checkPass: '123456'
},
rules2: {
vedioCanPlay: true,
fixStyle: '',
logining: false,
ruleForm2: {
account: '',
checkPass: ''
},
rules2: {
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
//{ validator: validaePass }
... ... @@ -54,132 +54,132 @@
{ required: true, message: '请输入密码', trigger: 'blur' },
//{ validator: validaePass2 }
]
},
checked: true,
userMenus: []
},
checked: true,
userMenus: []
};
},
methods: {
canplay() {
this.vedioCanPlay = true
},
canplay() {
this.vedioCanPlay = true
},
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleMenuList : function (router,menu) {
var _this = this;
var routerName = "";
var routerTemp = router.concat();
handleMenuList : function (router,menu) {
var _this = this;
var routerName = "";
var routerTemp = router.concat();
routerTemp.forEach(function (v_router,v_index,v_arr) {
routerName = v_router.name;
routerTemp.forEach(function (v_router,v_index,v_arr) {
routerName = v_router.name;
//查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
let result = menu.find(item => {
return item.name === routerName;
});
//查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
let result = menu.find(item => {
return item.name === routerName;
});
//匹配到继续判断是否子元素,有子元素继续递归
if (result) {
if (v_router.children && v_router.children.length>0) {
_this.handleMenuList(v_router.children, result.children);
}
}else {
//没有则可以移除
let deletRouter = router.findIndex(itm => itm.name === routerName );
router.splice(deletRouter,1);
}
});
console.log("longined router:");
console.log(routerName);
console.log(_this.$router.options.routes);
//匹配到继续判断是否子元素,有子元素继续递归
if (result) {
if (v_router.children && v_router.children.length>0) {
_this.handleMenuList(v_router.children, result.children);
}
}else {
//没有则可以移除
let deletRouter = router.findIndex(itm => itm.name === routerName );
router.splice(deletRouter,1);
}
});
console.log("longined router:");
console.log(routerName);
console.log(_this.$router.options.routes);
// 本地存储用户目录 ，防刷新目录丢失用
sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
},
handleSubmit2: function (ev) {
var _this = this;
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
//_this.$router.replace('/table');
this.logining = true;
//NProgress.start();
var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
http.login(loginParams).then(res => {
this.logining = false;
//NProgress.done();
let status = res.status;
let authentication = res.data.authentication;
let token = authentication.token;
let loginUserMenus = res.data.loginUserMenus;
if (status !== 200) {
let msg = "登录错误";
this.$message({
message: msg,
type: "error"
});
} else if (token) {
sessionStorage.setItem('user', JSON.stringify(authentication));
sessionStorage.setItem('token','Bearer '+ token);
//设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
//处理用户menu
_this.userMenus = loginUserMenus.list;
console.log("userMenus:");
console.log(_this.userMenus);
console.log(loginUserMenus.list);
let sysMenus = _this.$router.options.routes;
sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
},
handleSubmit2: function (ev) {
var _this = this;
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
//_this.$router.replace('/table');
this.logining = true;
//NProgress.start();
var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
http.login(loginParams).then(res => {
this.logining = false;
//NProgress.done();
let status = res.status;
let authentication = res.data.authentication;
let token = authentication.token;
let loginUserMenus = res.data.loginUserMenus;
if (status !== 200) {
let msg = "登录错误";
this.$message({
message: msg,
type: "error"
});
} else if (token) {
sessionStorage.setItem('user', JSON.stringify(authentication));
sessionStorage.setItem('token','Bearer '+ token);
//设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
//处理用户menu
_this.userMenus = loginUserMenus.list;
console.log("userMenus:");
console.log(_this.userMenus);
console.log(loginUserMenus.list);
let sysMenus = _this.$router.options.routes;
console.log("sysMenus:");
console.log(sysMenus);
console.log("sysMenus:");
console.log(sysMenus);
_this.handleMenuList(_this.$router.options.routes,_this.userMenus);
_this.handleMenuList(_this.$router.options.routes,_this.userMenus);
console.log("user:");
console.log(_this.$router.options.routes);
_this.$router.push({path: '/main'});
}
}).catch(error => {
this.$message({
message: error.toString(),
type: "error"
});
this.logining = false;
});
} else {
return false;
}
console.log("user:");
console.log(_this.$router.options.routes);
_this.$router.push({path: '/main'});
}
}).catch(error => {
this.$message({
message: error.toString(),
type: "error"
});
this.logining = false;
});
}
} else {
return false;
}
});
}
},
mounted:function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
let videoWidth
let videoHeight
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth
videoHeight = videoWidth * 0.5625
this.fixStyle = {
height: windowWidth * 0.5625 + 'px',
width: windowWidth + 'px',
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
'margin-left': 'initial'
}
} else {
videoHeight = windowHeight
videoWidth = videoHeight / 0.5625
this.fixStyle = {
height: windowHeight + 'px',
width: windowHeight / 0.5625 + 'px',
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
'margin-bottom': 'initial'
}
}
mounted:function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
let videoWidth
let videoHeight
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth
videoHeight = videoWidth * 0.5625
this.fixStyle = {
height: windowWidth * 0.5625 + 'px',
width: windowWidth + 'px',
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
'margin-left': 'initial'
}
} else {
videoHeight = windowHeight
videoWidth = videoHeight / 0.5625
this.fixStyle = {
height: windowHeight + 'px',
width: windowHeight / 0.5625 + 'px',
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
'margin-bottom': 'initial'
}
window.onresize()
}
}
window.onresize()
}
}
</script>
... ...
... ... @@ -5,7 +5,7 @@
</template>
<script>
import rt from '../routes'
import rt from '../routes'
export default {
}
... ...
... ... @@ -16,22 +16,26 @@
</el-col>
<!--列表-->
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<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">
</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" sortable>
</el-table-column>
<el-table-column prop="permissionId" label="ID" width="100" sortable>
<el-table-column prop="name" label="权限名称" min-width="150" sortable>
</el-table-column>
<el-table-column prop="name" label="权限名称" min-width="200" sortable>
<el-table-column prop="description" label="描述" min-width="120" sortable>
</el-table-column>
<el-table-column prop="description" label="描述" min-width="200" sortable>
<el-table-column prop="ismenu" label="是否目录" width="100" :formatter="formatState" sortable>
</el-table-column>
<el-table-column prop="permissionOrder" label="排序" width="100" sortable>
<el-table-column prop="url" label="访问路径" width="300" 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="100">
<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>
... ... @@ -133,70 +137,70 @@
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import { getList, remove, batchRemove, edit, add } from '../../api/perm_api';
import moment from 'moment'
import moment from 'moment'
export default {
data() {
return {
filters: {
name: ''
name: ''
},
tableList: [],
total: 0,
pageNum: 1,
pageSize: 10,
pageNum: 1,
pageSize: 100,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
roleName: [
roleName: [
{ required: true, message: '请输入权限名称', trigger: 'blur' }
]
},
//编辑界面数据
editForm: {
permissionId:'',
description: '',
name: '',
url: '',
path: '',
parentId: '',
ismenu: '',
permissionOrder:''
permissionId:'',
description: '',
name: '',
url: '',
path: '',
parentId: '',
ismenu: '',
permissionOrder:''
},
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
name: [
name: [
{ required: true, message: '请输入权限名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入权限描述', trigger: 'blur' }
description: [
{ required: true, message: '请输入权限描述', trigger: 'blur' }
],
paht: [
{ required: true, message: '请输入总路径', trigger: 'blur' }
],
url: [
{ required: true, message: '请输入权限路径', trigger: 'blur' }
],
paht: [
{ required: true, message: '请输入总路径', trigger: 'blur' }
],
url: [
{ required: true, message: '请输入权限路径', trigger: 'blur' }
],
permissionOrder: [
{ required: true, message: '请输入排序字段', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请输入父类ID', trigger: 'blur' }
]
permissionOrder: [
{ required: true, message: '请输入排序字段', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请输入父类ID', trigger: 'blur' }
]
},
//新增界面数据
addForm: {
description: '',
name: '',
url: '',
description: '',
name: '',
url: '',
path: '',
parentId: '',
ismenu: '',
permissionOrder:''
ismenu: '',
permissionOrder:''
}
... ... @@ -207,9 +211,9 @@
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
formatState: function (row, column) {
return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
this.getTableList();
... ... @@ -217,26 +221,26 @@
//获取列表
getTableList() {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.filters.name
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.filters.name
};
this.listLoading = true;
//NProgress.start();
getList(para).then((res) => {
getList(para).then((res) => {
this.total = res.data.total;
this.tableList = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
alert(error);
}
... ... @@ -252,7 +256,7 @@
this.listLoading = true;
//NProgress.start();
let para = { permissionId: row.permissionId };
remove(para).then((res) => {
remove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
... ... @@ -261,16 +265,16 @@
});
this.getTableList();
}).catch((error) => {
this.listLoading = false;
alert(error);
this.listLoading = false;
alert(error);
});
}).catch();
},
/**
/**
* 显示编辑界面
* @param index
* @param row 为这行的数据对象
*/
* @param index
* @param row 为这行的数据对象
*/
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
... ... @@ -279,14 +283,14 @@
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
};
},
//编辑
... ... @@ -297,9 +301,9 @@
this.editLoading = true;
//NProgress.start();
let para = Object.assign({}, this.editForm);
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
edit(para).then((res) => {
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
edit(para).then((res) => {
//NProgress.done();
this.$message({
... ... @@ -323,7 +327,7 @@
//NProgress.start();
let para = Object.assign({}, this.addForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
add(para).then((res) => {
add(para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
... ... @@ -350,7 +354,7 @@
this.listLoading = true;
//NProgress.start();
let para = { ids: ids };
batchRemove(para).then((res) => {
batchRemove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
... ...
... ... @@ -16,28 +16,38 @@
</el-col>
<!--列表-->
<el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<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="55">
</el-table-column>
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="roleId" label="ID" width="100" sortable>
<!--<el-table-column type="index" width="60">-->
<!--</el-table-column>-->
<el-table-column prop="roleId" label="ID" width="120">
</el-table-column>
<el-table-column prop="roleName" label="岗位/角色名称" min-width="200" sortable>
</el-table-column>
<el-table-column prop="departmentName" 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="160" >
</el-table-column>
<el-table-column prop="type" label="类型" min-width="80" sortable>
</el-table-column>
<el-table-column prop="businessLicense" label="工商代码" min-width="180" >
</el-table-column>
<el-table-column prop="description" label="岗位/角色描述" min-width="200" sortable>
<el-table-column prop="customsRegCode" label="海关备案代码" min-width="150" >
</el-table-column>
<el-table-column label="操作" min-width="260">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>
<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>
</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>
... ... @@ -76,23 +86,37 @@
<!--新增界面-->
<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-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="description">
<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="description">
<el-input v-model="addForm.businessLicense" auto-complete="off" placeholder="社会信用代码或者组织机构代码"></el-input>
</el-form-item>
<el-form-item label="海关备案代码" prop="description">
<el-input v-model="addForm.customsRegCode" 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>
... ... @@ -103,9 +127,11 @@
<!--权限设置界面-->
<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>
... ... @@ -120,66 +146,85 @@
import NProgress from 'nprogress'
import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
import { getList as getDepartmentList} from '../../api/department';
import { getList as permList } from '../../api/perm_api';
import moment from 'moment'
import { getList as permList } from '../../api/perm_api';
import moment from 'moment'
export default {
data() {
return {
filters: {
roleName: ''
roleName: ''
},
companyOption: [
{
label: "集团",
value: "集团"
},
{
label: "公司",
value: "公司"
}
],
treeDefaultProps: {
children: 'children',
label: 'name',
},
departmentNameList:[],
departmentNameList:[],
roles: [],
permissons: [],
permIds: [],
total: 0,
pageNum: 1,
pageSize: 5,
pageNum: 1,
pageSize: 5,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
roleName: [
roleName: [
{ required: true, message: '请输入岗位/角色名称', trigger: 'blur' }
]
},
//编辑界面数据
editForm: {
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
departmentId:''
},
//新增界面是否显示
//新增界面是否显示
addFormVisible: false,
//设置权限界面是否显示
PermFormVisible: false,
PermFormVisible: false,
addLoading: false,
addFormRules: {
roleName: [
roleName: [
{ required: true, message: '请输入岗位/角色名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入岗位/角色描述', trigger: 'blur' }
description: [
{ required: true, message: '请输入岗位/角色描述', trigger: 'blur' }
]
},
//新增界面数据
addForm: {
description: '',
roleName: '',
roleSign: 1,
departmentId:''
description: '',
roleName: '',
roleSign: 1,
departmentId:'',
type: '',
businessLicense: '',
customsRegCode: '',
parentName: ''
},
permForm: {
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
permissions: []
permForm: {
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
permissions: []
}
}
... ... @@ -189,9 +234,9 @@
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
this.getRoles();
... ... @@ -199,79 +244,82 @@
//获取角色列表
getRoles() {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
roleName: this.filters.roleName
pageNum: this.pageNum,
pageSize: this.pageSize,
roleName: this.filters.roleName
};
this.listLoading = true;
//NProgress.start();
getList(para).then((res) => {
getList(para).then((res) => {
this.total = res.data.total;
this.roles = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
alert(error);
}
});
},
//获取部门列表
getdepartmentNames() {
//获取部门列表
getdepartmentNames() {
this.listLoading = true;
//NProgress.start();
getDepartmentList().then((res) => {
this.total = res.data.total;
this.departmentNameList = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = true;
//NProgress.start();
getDepartmentList().then((res) => {
this.total = res.data.total;
this.departmentNameList = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
});
},
},
//获取权限列表
getPermList() {
let para = {
pageNum: 1,
pageSize: 200
};
NProgress.start();
permList(para).then((res) => {
this.permissons = res.data.list;
NProgress.done();
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
getPermList() {
let para = {
pageNum: 1,
pageSize: 200
};
NProgress.start();
permList(para).then((res) => {
this.permissons = res.data.list;
NProgress.done();
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
message({
// 饿了么的消息弹窗组件
message: status+msg,
type: "error"
});
}else {
alert(error);
}
});
},
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
... ... @@ -280,7 +328,7 @@
this.listLoading = true;
//NProgress.start();
let para = { roleId: row.roleId };
remove(para).then((res) => {
remove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
... ... @@ -289,50 +337,65 @@
});
this.getRoles();
}).catch((error) => {
this.listLoading = false;
alert(error);
this.listLoading = false;
alert(error);
});
}).catch();
},
/**
/**
* 显示编辑界面
* @param index
* @param row 为这行的数据对象
*/
* @param index
* @param row 为这行的数据对象
*/
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
this.getdepartmentNames();
},
setPerm: function (index, row) {
setPerm: function (index, row) {
this.PermFormVisible = true;
this.getPermList();
var _this = this;
this.permIds = [];
this.PermFormVisible = true;
this.permForm = Object.assign({}, row);
this.permForm = Object.assign({}, row);
let rolePerms = this.permForm.permissions;
if (util.checkNull(rolePerms)){
rolePerms.forEach(function (perm,v_index,v_arr) {
if(util.checkNull(perm)){
_this.permIds[v_index] = perm.permissionId;
if (util.checkNull(rolePerms)){
rolePerms.forEach(function (perm,v_index,v_arr) {
if(util.checkNull(perm)){
_this.permIds[v_index] = perm.permissionId;
}
});
}
this.getPermList();
},
});
}
this.$nextTick(() => {
//反向适配
this.$refs.tree.setCheckedKeys(this.permIds);
});
},
//显示新增界面，每次点开初始化数据
handleAdd: function () {
handleAdd: function (index,row) {
this.addFormVisible = true;
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
description: '',
roleName: '',
roleSign: 1,
departmentId:'',
type: '',
businessLicense: '',
customsRegCode: '',
parentid: 0
};
this.getdepartmentNames();
//如果新增下级
if(util.checkNull(row)){
//传递上级ID
let parentRole = Object.assign({}, row);
this.addForm.parentid = parentRole.roleId;
this.addForm.parentName = parentRole.roleName;
}
// this.getdepartmentNames();
},
//编辑
editSubmit: function () {
... ... @@ -347,16 +410,16 @@
para.permissions = null;
para.roles = null;
// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
/*
查询之后格式this.filters.column.create_start_date中日期发生变化;
Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
式;
*/
/*
查询之后格式this.filters.column.create_start_date中日期发生变化;
Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
式;
*/
/*moment 安装 npm install moment --save*/
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
edit(para).then((res) => {
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
edit(para).then((res) => {
//NProgress.done();
this.$message({
... ... @@ -379,7 +442,7 @@
this.addLoading = true;
//NProgress.start();
let para = Object.assign({}, this.addForm);
add(para).then((res) => {
add(para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
... ... @@ -395,33 +458,33 @@
});
},
//设置角色提交
setPermSubmit: function () {
this.$refs.permForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addLoading = true;
//NProgress.start();
let role = Object.assign({}, this.permForm);
let roleId = role.roleId;
let permissionIds = this.permIds
setPermSubmit: function () {
this.$refs.permForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addLoading = true;
//NProgress.start();
let role = Object.assign({}, this.permForm);
let roleId = role.roleId;
let permissionIds = this.$refs.tree.getCheckedKeys();
let para = {roleId,permissionIds};
updateRolePerm(para).then((res) => {
this.addLoading = false;
if (res.status ===200) {
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['permForm'].resetFields();
}
//NProgress.done();
this.PermFormVisible = false;
this.getRoles();
}).catch(error => alert(error));
});
}
});
},
updateRolePerm(para).then((res) => {
this.addLoading = false;
if (res.status ===200) {
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['permForm'].resetFields();
}
//NProgress.done();
this.PermFormVisible = false;
this.getRoles();
}).catch(error => alert(error));
});
}
});
},
selsChange: function (sels) {
this.sels = sels;
},
... ... @@ -434,7 +497,7 @@
this.listLoading = true;
//NProgress.start();
let para = { ids: ids };
batchRemove(para).then((res) => {
batchRemove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
... ... @@ -446,6 +509,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() {
... ...
... ... @@ -19,11 +19,11 @@
</el-col>
<!--列表-->
<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table :data="users" highlight-current-row border 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 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>
... ... @@ -46,7 +46,7 @@
</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="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>
... ... @@ -91,7 +91,7 @@
<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-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>
... ... @@ -110,7 +110,7 @@
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>
... ... @@ -126,7 +126,7 @@
<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-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>
... ... @@ -147,7 +147,7 @@
</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-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>
... ... @@ -168,10 +168,10 @@
<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-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>
... ... @@ -184,20 +184,24 @@
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'
import { getList} from '../../api/role_api';
import moment from 'moment'
export default {
data() {
return {
filters: {
userName: '',
userName: '',
realName: ''
},
treeDefaultProps: {
children: 'children',
label: 'roleName',
},
users: [],
total: 0,
pageNum: 1,
pageSize: 10,
faceImageUrl: '',
pageNum: 1,
pageSize: 10,
faceImageUrl: '',
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
... ... @@ -210,12 +214,12 @@
},
//编辑界面数据
editForm: {
userId: 1,
username: '',
userId: 1,
username: '',
password: '',
sex: 1,
creattime: '',
address: '',
sex: 1,
creattime: '',
address: '',
realname: '',
email: '',
mobilephone: '',
... ... @@ -225,30 +229,33 @@
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
username: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
username: [
{ required: true, message: '请输入姓名,用户名长度在5-11位,支持英文和数字', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码,用户名长度在6-18位,支持英文和数字和非空字符', trigger: 'blur'}
]
},
//用户角色配置
roleFormVisible: false,
roleFormVisible: false,
//新增界面数据
addForm: {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
},
roleEditForm: {
userId: 1,
roleEditForm: {
userId: 1,
username: "",
roles: []
},
roles: [],
roleIds: []
roleIds: []
}
},
... ... @@ -257,9 +264,9 @@
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
this.getUsers();
... ... @@ -267,21 +274,21 @@
//获取用户列表
getUsers:function() {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
userName: this.filters.userName,
realName: this.filters.realName
pageNum: this.pageNum,
pageSize: this.pageSize,
userName: this.filters.userName,
realName: this.filters.realName
};
this.listLoading = true;
getUserList(para).then((res) => {
let response = res.data.data;
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.listLoading = false;
this.$message.error(error.toString());
this.listLoading = false;
this.$message.error(error.toString());
});
},
... ... @@ -302,65 +309,73 @@
});
this.getUsers();
}).catch((error) => {
this.listLoading = false;
alert(error);
this.listLoading = false;
alert(error);
});
}).catch();
},
/**
/**
* 显示编辑界面
* @param index
* @param row 为这行的数据对象
*/
* @param index
* @param row 为这行的数据对象
*/
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
roleEdit: function (index, row) {
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;
});
roleEdit: function (index, row) {
this.roleFormVisible = true;
this.getRoles();
var _this = this;
_this.roleIds = [];
this.roleEditForm = Object.assign({}, row);
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();
},
getRoles() {
let para = {
pageNum: 1,
pageSize: 100
};
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;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
this.$nextTick(() => {
//反向适配
this.$refs.tree.setCheckedKeys(this.roleIds);
});
},
getRoles() {
let para = {
pageNum: 1,
pageSize: 100
};
NProgress.start();
getList(para).then((res) => {
this.roles = res.data.list;
NProgress.done();
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
},
//显示新增界面，每次点开初始化数据
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
};
},
//编辑
... ... @@ -376,15 +391,15 @@
para.permissions = null;
para.roles = null;
// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
/*
查询之后格式this.filters.column.create_start_date中日期发生变化;
Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
式;
*/
/*
查询之后格式this.filters.column.create_start_date中日期发生变化;
Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
式;
*/
/*moment 安装 npm install moment --save*/
// para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
this.editLoading = false;
editUser(para).then((res) => {
//NProgress.done();
... ... @@ -419,8 +434,11 @@
this.addFormVisible = false;
this.getUsers();
}).catch(error => {
this.addLoading = false;
alert(error.message);
this.addLoading = false;
this.$message({
message: error.message,
type: 'error'
});
});
});
}
... ... @@ -451,39 +469,51 @@
});
},
roleEditSubmit: function () {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
roleEditSubmit: function () {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
// this.editLoading = true;
let userId = this.roleEditForm.userId;
let roleIds = this.roleIds;
let para = {userId,roleIds};
setUserRole(para).then((res) => {
if (res.status ===200) {
alert("ok");
let userId = this.roleEditForm.userId;
let roleIds = this.$refs.tree.getCheckedKeys();
let para = {userId,roleIds};
setUserRole(para).then((res) => {
if (res.status ===200) {
this.$message({
message: '岗位设置成功',
type: 'success'
});
}
this.getUsers();
this.roleFormVisible = false;
}).catch(err => {
alert(err);
this.roleFormVisible = false;
}).catch(err => {
alert(err);
});
console.log(para);
console.log(para);
});
},
handleAvatarSuccess: function(response){
this.faceImageUrl = 'http://127.0.0.1:7003/'+response.data;
},
beforeAvatarUpload: function () {
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: {
hideShow() {//当图片多于一张的时候，就隐藏上传框
return this.file === '' ? false : true
}
},
hideShow() {//当图片多于一张的时候，就隐藏上传框
return this.file === '' ? false : true
}
},
}
</script>
... ...