<template>
|
<div class="s-authority-management">
|
<div class="authority-table s-table" v-if="display">
|
<el-table
|
highlight-current-row
|
:data="userList"
|
style="width: 100%"
|
:header-cell-style="{background:'#f8f8f8',color:'#222222'}"
|
>
|
<el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
|
<el-table-column :align="'center'" prop="username" label="用户名"></el-table-column>
|
<el-table-column :align="'center'" prop="role" label="角色">
|
<template slot-scope="scope">{{scope.row.sysRoles | roles}}</template>
|
</el-table-column>
|
<el-table-column label="操作" :align="'center'">
|
<template slot-scope="scope">
|
<el-tooltip content="编辑" placement="top" popper-class="atooltip">
|
<i
|
class="el-icon-edit"
|
style="font-size: 18px;"
|
@click="handleEdit(scope.$index, scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top" popper-class="atooltip" v-show="false">
|
<!-- :disabled="scope.row.sysRoles | roles | isSuper" -->
|
<i
|
class="el-icon-delete"
|
style="font-size: 18px; color:red;"
|
@click="handleDelete(scope.$index, scope.row)"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="authority-details" v-if="!display">
|
<el-form label-width="80px" :rules="rules" ref="editForm" :model="editForm">
|
<el-form-item label="用户名" style="width:580px" prop="username">
|
<!-- <el-input v-model="editForm.username" placeholder="请输入" size="small"></el-input> -->
|
<span class="m10" v-if="editForm.username == 'admin' || editForm.username == 'basic'">{{editForm.username}}</span>
|
<el-input v-model="editForm.username" size="small" v-else></el-input>
|
</el-form-item>
|
|
<el-form-item label="新密码" style="width:580px" v-show="loginUser != editForm.username">
|
<el-input show-password v-model="editForm.newPwd" placeholder="请输入密码" size="small"></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="确认密码"
|
style="width:580px"
|
prop="checkPass"
|
v-show="loginUser != editForm.username"
|
>
|
<el-input show-password v-model="editForm.checkPass" placeholder="请输入再次输入密码" size="small"></el-input>
|
</el-form-item>
|
|
<el-form-item label="权限配置" style="width:580px;">
|
<!-- <el-transfer
|
id="e-transfer"
|
:titles="['全部角色', '当前角色']"
|
v-model="editForm.roleIds"
|
:props="{key: 'id', label: 'name'}"
|
:data="roledata"
|
></el-transfer>-->
|
|
<el-tree
|
ref="treeMenus"
|
:data="sysMenus"
|
:props="props"
|
node-key="id"
|
:default-checked-keys="userMenus"
|
show-checkbox
|
check-on-click-node
|
default-expand-all
|
style="margin-top: 10px;"
|
></el-tree>
|
</el-form-item>
|
|
<el-form-item style="width:580px;">
|
<el-button type="primary" style="float: right" @click="save" size="small">保存</el-button>
|
<el-button type="info" style="margin-right: 10px;float: right" @click="goback" size="small">返回</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import { getUsers, getSysMenus, updataUser, getUserMenus } from "@/api/user"
|
|
export default {
|
name: "AuthorityManage",
|
filters: {
|
roles(roles) {
|
return roles.map(r => {
|
return r.name
|
}).join(' ')
|
},
|
isSuper(roles) {
|
return roles.indexOf("超级管理员") >= 0
|
}
|
},
|
data() {
|
const generateData = _ => {
|
const data = [];
|
for (let i = 1; i <= 15; i++) {
|
data.push({
|
key: i,
|
label: `备选项 ${i}`,
|
disabled: i % 4 === 0
|
});
|
}
|
return data;
|
};
|
const validateCheckPass = (rule, value, callback) => {
|
if (value !== this.editForm.newPwd) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback()
|
}
|
};
|
var checkUserName = (rule, value, callback) => {
|
if (value && value !== ''){
|
let regEn = /^[A-Za-z_@.]{2,10}$/
|
console.log("用户名校验！",value)
|
if (!regEn.test(value)) {
|
callback(new Error('请输入2位到10位字母的用户名，不能以数字开头，且不能包含汉字'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
return {
|
display: true,
|
loginUser: JSON.parse(sessionStorage.getItem('userInfo')).username,
|
acknewpwd: "",
|
sysMenus: [],
|
userMenus: [],
|
rolevalue: [],
|
userList: [],
|
editForm: {},
|
props: {
|
label: 'name'
|
},
|
rules: {
|
username: [
|
{ validator: checkUserName, trigger: 'blur' }
|
],
|
checkPass: [
|
{ validator: validateCheckPass, trigger: 'change' }
|
]
|
}
|
};
|
},
|
mounted() {
|
this.fetchUserList();
|
this.fetchSysMenus();
|
this.initEditForm();
|
},
|
methods: {
|
initEditForm() {
|
this.editForm = {
|
id: "",
|
username: "",
|
newPwd: "",
|
checkPass: "",
|
menuIds: []
|
}
|
},
|
handleEdit(index, row) {
|
this.initEditForm()
|
this.display = !this.display;
|
this.editForm.id = row.id;
|
this.editForm.username = row.username;
|
this.userMenus = []
|
getUserMenus({ userId: row.id }).then(rsp => {
|
if (rsp && rsp.success) {
|
this.userMenus = rsp.data.menus.map(menu => {
|
return menu.id
|
})
|
}
|
})
|
|
},
|
handleDelete(index, row) {
|
this.$notify({
|
type: "warning",
|
message: "无法删除该用户"
|
})
|
},
|
goback() {
|
this.display = !this.display;
|
},
|
save() {
|
this.$refs.editForm.validate((valid) => {
|
if (valid) {
|
this.editForm.menuIds = this.$refs.treeMenus.getCheckedKeys()
|
updataUser(this.editForm).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "修改成功"
|
})
|
}
|
})
|
}
|
});
|
},
|
fetchUserList() {
|
getUsers().then(rsp => {
|
if (rsp && rsp.success) {
|
this.userList = rsp.data;
|
}
|
})
|
},
|
fetchSysMenus() {
|
getSysMenus().then(rsp => {
|
if (rsp && rsp.success) {
|
this.sysMenus = rsp.data;
|
}
|
})
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.s-authority-management {
|
height: 100%;
|
width: 100%;
|
.authority-table,
|
.authority-details {
|
height: 100%;
|
width: 100%;
|
margin-top: 40px;
|
}
|
#e-transfer {
|
.el-button--primary {
|
color: #fff;
|
background-color: #bfbfbf;
|
border-color: #bfbfbf;
|
}
|
.el-button--primary:focus,
|
.el-button--primary:hover {
|
background: #4c4c4c;
|
border-color: #4c4c4c;
|
color: #fff;
|
}
|
.el-transfer-panel
|
.el-transfer-panel__header
|
.el-checkbox
|
.el-checkbox__label {
|
font-size: 14px;
|
}
|
}
|
.el-form-item__content {
|
text-align: left;
|
input {
|
max-width: 498px;
|
}
|
}
|
}
|
</style>
|
