<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
|
>
|
<departTree
|
:depart="userDepart"
|
@selectDepart="selectDepart"
|
></departTree>
|
</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>
|
import departTree from "@/components/departTree/index.vue";
|
export default {
|
components: {
|
departTree,
|
},
|
data() {
|
return {
|
user: {},
|
userDepart: {},
|
createUserRules: {},
|
roleList: [],
|
departList: [],
|
mylabel: "",
|
defaultProps: {
|
children: "children",
|
label: "departName",
|
},
|
tempName: "",
|
tempRole: [],
|
};
|
},
|
created() {
|
this.user = JSON.parse(JSON.stringify(this.userInfo));
|
this.tempName = this.user.depart[0].departName;
|
|
this.userDepart = {
|
departId: this.user.depart[0].departId,
|
departName: this.user.depart[0].departName,
|
};
|
// 获取所有角色列表
|
this.getRoleList();
|
// 获取当前用户角色列表
|
this.getUserRole(this.user.id);
|
},
|
methods: {
|
// 修改部门
|
changeDepart(data) {
|
this.departList.forEach((item) => {
|
if (item.id === data) {
|
this.user.departName = item.departName;
|
}
|
});
|
},
|
// 修改用户信息
|
handleUser() {
|
const { flag, user, tempName, tempRole, isArraySame } = this;
|
let umsDepartManage = { userId: user.id, departId: user.departId };
|
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: "put",
|
url:
|
`/sccg/depart/user_update_depart?userId=` +
|
user.id +
|
"&departId=" +
|
user.departId,
|
}).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: "put",
|
url:
|
"sccg/depart/user_update_Role?id=" +
|
user.id +
|
"&roles=" +
|
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;
|
});
|
},
|
|
selectDepart(depart) {
|
if (depart) {
|
this.user.departId = depart.departId;
|
this.user.departName = depart.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>
|
