<template>
|
<div class="updateUser">
|
<main>
|
<div class="mainContent">
|
<el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
|
label-position="right">
|
<!-- 选择角色 -->
|
<el-form-item class="optionItem" label="选择角色:" prop="role" v-if="flag.role">
|
<el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags>
|
<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 所属部门 -->
|
<el-form-item class="optionItem" label="所属部门:" prop="departmentId" v-else>
|
<el-select v-model="user.departName" placeholder="请选择所属部门" :disabled="!flag.depart">
|
<el-option :value="mylabel">
|
<el-tree ref="tree" :check-strictly="true" :data="departList" :props="defaultProps"
|
show-checkbox @check-change="handleCheck"
|
:default-checked-keys="[selectOrg.orgsid[0],]" default-expand-all node-key="id">
|
</el-tree>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<div class="optionBtn">
|
<el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
|
</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
</div>
|
</main>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
user: {
|
},
|
createUserRules: {
|
},
|
roleList: [
|
|
],
|
departList: [],
|
mylabel: "",
|
defaultProps: {
|
children: "children",
|
label: "departName",
|
},
|
selectOrg: {
|
orgsid: [],
|
},
|
tempName: '',
|
tempRole: []
|
}
|
},
|
created() {
|
this.user = JSON.parse(JSON.stringify(this.userInfo));
|
this.tempName = this.user.departName;
|
this.selectOrg.orgsid.push(this.user.departmentId);
|
// 获取所有角色列表
|
this.getRoleList();
|
// 获取当前用户角色列表
|
this.getUserRole(this.user.id)
|
// 获取全部部门列表
|
this.$axios.get('/sccg/depart/tree').then(res => {
|
this.departList = res.data;
|
})
|
},
|
methods: {
|
// 修改部门
|
changeDepart(data) {
|
this.departList.forEach(item => {
|
if (item.id === data) {
|
this.user.departName = item.departName;
|
}
|
})
|
},
|
// 修改用户信息
|
handleUser() {
|
const { flag, user, tempName, selectOrg, tempRole, isArraySame } = this;
|
this.$refs.user.validate((valid) => {
|
if (valid) {
|
user.isDy = `${user.isDy}`;
|
if (flag.depart) {
|
if (tempName === user.departName) {
|
this.$message({
|
type: 'warning',
|
message: '您的部门还未更改'
|
})
|
} else {
|
if (user.departName) {
|
this.$axios({
|
method: 'post',
|
url: `sccg/admin/update/${user.id}`,
|
data: {
|
"id": user.id,
|
"username": user.username,
|
"password": user.password,
|
"icon": user.icon,
|
"email": user.email,
|
"nickName": user.nickName,
|
"note": user.note,
|
"createTime": user.createTime,
|
"loginTime": user.loginTime,
|
"status": user.status ? 1 : 0,
|
"macAddress": user.macAddress,
|
"ipAddress": user.ipAddress,
|
"isDy": `${user.isDy}`,
|
"sex": `${user.sex}`,
|
"jobTitle": user.jobTitle,
|
"departmentId": selectOrg.orgsid[0],
|
"departName": user.departName,
|
"userType": user.userType,
|
"zj": user.zj,
|
"mobile": user.mobile,
|
}
|
})
|
.then(res => {
|
this.$message({
|
type: res.code === 200 ? 'success' : 'warning',
|
message: res.message,
|
})
|
this.getUserList();
|
this.$emit('closeDialog', { flag: false });
|
})
|
} else {
|
this.$message({
|
type: 'warning',
|
message: '用户部门不能为空'
|
})
|
}
|
}
|
|
} else {
|
if (user.role.length === 0) {
|
this.$message({
|
type: 'warning',
|
message: '用户角色不能为空',
|
})
|
}
|
else if (isArraySame(tempRole, user.role) && tempRole.length === user.role.length) {
|
this.$message({
|
type: 'warning',
|
message: '您还未更改角色',
|
})
|
}
|
else {
|
this.$axios({
|
method: 'post',
|
url: 'sccg/admin/role/update?adminId=' + user.id + '&roleIds=' + user.role,
|
})
|
.then(res => {
|
this.$message({
|
type: res.code === 200 ? 'success' : 'warning',
|
message: res.message,
|
})
|
this.getUserList();
|
this.$emit('closeDialog', { flag: false });
|
})
|
}
|
}
|
} else {
|
return false;
|
}
|
})
|
},
|
// 获取角色列表
|
getRoleList() {
|
this.$axios({
|
method: 'get',
|
url: 'sccg/role/listAll',
|
})
|
.then(res => {
|
this.roleList = res.data;
|
})
|
},
|
// 获取用户的角色列表
|
getUserRole(id) {
|
this.$axios({
|
method: 'get',
|
url: `sccg/admin/role/${id}`
|
})
|
.then(res => {
|
const arr = [];
|
res.data.forEach(item => {
|
arr.push(item.id);
|
})
|
this.user.role = arr;
|
this.tempRole = arr;
|
})
|
},
|
// 部门修改
|
handleCheck(data, checked) {
|
this.user.departName = data.departName;
|
// 获取当前选择的id在数组中的索引
|
const indexs = this.selectOrg.orgsid.indexOf(data.id);
|
// 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
|
if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
|
this.$message({
|
message: "只能选择一个部门！",
|
type: "warning",
|
showClose: true,
|
});
|
// 设置已选择的节点为false 很重要
|
this.$refs.tree.setChecked(data, false);
|
} else if (this.selectOrg.orgsid.length === 0 && checked) {
|
// 发现数组为空 并且是已选择
|
// 防止数组有值，首先清空，再push
|
this.selectOrg.orgsid = [];
|
this.selectOrg.orgsid.push(data.id);
|
} else if (
|
indexs >= 0 &&
|
this.selectOrg.orgsid.length === 1 &&
|
!checked
|
) {
|
// 再次直接进行赋值为空操作
|
this.selectOrg.orgsid = [];
|
this.user.departName = ''
|
}
|
},
|
// 判断数组是否相等
|
isArraySame(arr1, arr2) {
|
let flag = true
|
arr1.sort((a, b) => a - b)
|
arr2.sort((a, b) => a - b)
|
arr1.forEach(item => {
|
arr2.forEach(child => {
|
if (item !== child) {
|
flag = false
|
}
|
})
|
})
|
return flag
|
}
|
},
|
props: ['userInfo', 'flag', 'closeDialog', 'getUserList']
|
}
|
</script>
|
<style lang="scss" scoped>
|
.updateUser {
|
border-radius: 1px;
|
background-color: #09152f;
|
|
:deep(.el-tag) {
|
background-color: #09152f;
|
}
|
|
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
background-color: #09152f;
|
color: #4b9bb7;
|
}
|
|
main {
|
text-align: left;
|
padding: 0 55px;
|
background-color: #09152f;
|
padding-bottom: 50px;
|
|
.mainContent {
|
display: flex;
|
justify-content: center;
|
padding-top: 50px;
|
|
.el-form-item__content {
|
width: 400px;
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
|
.optionHandleSp {
|
display: flex;
|
|
.areaNumber,
|
.moreNumber {
|
flex: 1;
|
}
|
|
.telNumber {
|
flex: 2;
|
}
|
}
|
|
.optionBtn {
|
display: flex;
|
margin-top: 20px;
|
|
.btn {
|
padding: 12px 50px;
|
}
|
}
|
|
}
|
}
|
}
|
|
.updateUser::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
|
.updateUser::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
</style>
|
