349 lines
10 KiB
TypeScript
349 lines
10 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
|
|
import { HttpClientService } from '../../../../services/http-client.service';
|
|
import { Router,ActivatedRoute } from '@angular/router';
|
|
import { NzMessageService } from 'ng-zorro-antd';
|
|
import { Observable } from 'rxjs';
|
|
|
|
import 'ztree';
|
|
declare var $: any;
|
|
declare var jQuery: any;
|
|
|
|
@Component({
|
|
selector: 'app-user-management-modify',
|
|
templateUrl: './user-management-modify.component.html',
|
|
styleUrls: ['./user-management-modify.component.scss','../../../main.scss']
|
|
})
|
|
export class UserManagementModifyComponent implements OnInit {
|
|
validateForm: FormGroup;
|
|
statusParamsTree:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
|
status:1,
|
|
}
|
|
statusParamsRole:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
|
status:1,
|
|
}
|
|
visible = false; //控制抽屉显示
|
|
treeSelected:any;
|
|
orgDetail:any=''; //所选机构详情
|
|
orgList:any=[]; //机构列表
|
|
orgSeletedBtn:any=true; //控制机构选择按钮
|
|
nodeList:any=[];
|
|
saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
|
|
roleList:any=[]; //保存所选角色
|
|
listOfRole:any=[]; //角色列表
|
|
nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
|
|
oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
|
|
checkNameStatus:any=''; //检测账号唯一性的图标状态
|
|
modifyType:any=1; //当前页面操作类型 1 新增用户 2 编辑用户
|
|
userId:any=''; //用户ID 修改的用户ID
|
|
userDetail:any={}; //用户详情
|
|
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
|
status:1,
|
|
}
|
|
isLoadingSave:any=false;
|
|
constructor(
|
|
private fb: FormBuilder,
|
|
private http:HttpClientService,
|
|
private route:ActivatedRoute,
|
|
private router:Router,
|
|
private message: NzMessageService,
|
|
) { }
|
|
|
|
ngOnInit() {
|
|
// // 页面监听 动态改变表单高度
|
|
// $('#main-container').height('height',(document.documentElement.clientHeight-106+'px'));
|
|
this.queryRole();
|
|
this.validateForm = this.fb.group({
|
|
real_name:[ '', [ Validators.required ] ],
|
|
login_name:[ '', [ Validators.required ] ],
|
|
password:[ '', [ Validators.required ] ],
|
|
identify_num:[ ''],
|
|
email:[ ''],
|
|
mobile:[ ''],
|
|
sex:['m'],
|
|
status:['1'],
|
|
role:[''],
|
|
remark: ['']
|
|
});
|
|
//取路由参数
|
|
this.route.queryParams.subscribe(routeParams=>{
|
|
this.modifyType=routeParams.operateType;
|
|
//routeParams 1新增 2修改
|
|
if(routeParams.operateType==2){
|
|
this.userId=routeParams.id;
|
|
this.queryUserDetail();
|
|
}else{
|
|
this.statusParamsDetail.status=3;
|
|
}
|
|
})
|
|
}
|
|
//获取用户详情
|
|
queryUserDetail(){
|
|
this.http.get('/sysapi/setting/user/detail/list', { uid:this.userId }).subscribe((json)=>{
|
|
if(json.is_success){
|
|
if(json.body){
|
|
this.statusParamsDetail.status=3;
|
|
this.userDetail=json.body;
|
|
let detail=json.body;
|
|
this.validateForm.setValue({
|
|
real_name:detail.real_name,
|
|
login_name:detail.login_name,
|
|
password:detail.password,
|
|
identify_num:detail.identify_num,
|
|
email:detail.email,
|
|
mobile:detail.mobile,
|
|
sex:detail.sex,
|
|
status:detail.status,
|
|
role:'',
|
|
remark:detail.remark,
|
|
})
|
|
this.oldLoginName=detail.login_name;
|
|
if(detail.orgList&&detail.orgList.length>0){
|
|
this.orgDetail=detail.orgList[0];
|
|
}
|
|
if(detail.roleList&&detail.roleList.length>0){
|
|
detail.roleList.forEach(item=>{
|
|
this.roleList.push(item.rid)
|
|
})
|
|
}
|
|
}else{
|
|
this.statusParamsDetail.status=4;
|
|
}
|
|
}else{
|
|
this.statusParamsDetail.status=0;
|
|
}
|
|
})
|
|
}
|
|
//检验系统账号的唯一性
|
|
checkName(){
|
|
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
|
|
this.nameOnly = true;
|
|
this.checkNameStatus='success';
|
|
return false;
|
|
}
|
|
this.checkNameStatus='validating';
|
|
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
|
|
if (json.is_success) {
|
|
if(json.body){
|
|
this.checkNameStatus='success';
|
|
this.nameOnly = true;
|
|
}else{
|
|
this.checkNameStatus='error';
|
|
this.nameOnly = false;
|
|
}
|
|
} else {
|
|
this.message.error(`账号验证接口错误`)
|
|
}
|
|
|
|
})
|
|
}
|
|
//机构树，搜索功能
|
|
searchNode() {
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
|
zTree.cancelSelectedNode()
|
|
var key = $("#key");
|
|
var value = $.trim(key.get(0).value);
|
|
var keyType = "name";
|
|
this.nodeList = zTree.getNodesByParamFuzzy(keyType, value);
|
|
if (value) {
|
|
for (var i = this.nodeList.length - 1; i >= 0; i--) {
|
|
zTree.selectNode(this.nodeList[i], true, false);
|
|
}
|
|
}
|
|
}
|
|
//删除机构标签
|
|
tagClose(event){
|
|
this.orgSeletedBtn=true;
|
|
this.orgDetail='';
|
|
}
|
|
//保存选择机构
|
|
treeSave(){
|
|
if(this.treeSelected){
|
|
this.orgDetail=this.treeSelected;
|
|
this.visible = false;
|
|
this.orgSeletedBtn=false;
|
|
}else{
|
|
//如果没有选择机构,提示请选择机构
|
|
this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
|
|
}
|
|
}
|
|
//打开机构树抽屉
|
|
open(): void {
|
|
this.treeSelected='';
|
|
this.statusParamsTree.status=1;
|
|
this.visible = true;
|
|
this.initTree();
|
|
|
|
}
|
|
//关闭机构选择页面
|
|
close(): void {
|
|
this.visible = false;
|
|
}
|
|
submitForm(){
|
|
this.saveCheck=true;
|
|
for (const i in this.validateForm.controls) {
|
|
this.validateForm.controls[ i ].markAsDirty();
|
|
this.validateForm.controls[ i ].updateValueAndValidity();
|
|
}
|
|
if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0&&this.nameOnly){
|
|
//再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
|
|
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
|
|
this.nameOnly = true;
|
|
this.checkNameStatus='success';
|
|
this.submitConfirm(2);
|
|
return false;
|
|
}
|
|
this.checkNameStatus='validating';
|
|
//再次验证用户名唯一性
|
|
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
|
|
if (json.is_success) {
|
|
if(json.body){
|
|
this.checkNameStatus='success';
|
|
this.nameOnly = true;
|
|
//表单处理
|
|
this.submitConfirm(this.modifyType);
|
|
}else{
|
|
this.checkNameStatus='error';
|
|
this.nameOnly = false;
|
|
return false;
|
|
}
|
|
} else {
|
|
this.message.error(`账号验证接口错误`)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//确认提交表单 type 1 新增 2修改
|
|
submitConfirm(type){
|
|
let item=this.validateForm.value;
|
|
let params={
|
|
real_name: item.real_name,
|
|
login_name: item.login_name,
|
|
password: item.password,
|
|
mobile: item.mobile,
|
|
sex: item.sex,
|
|
identify_num: item.identify_num,
|
|
email: item.email,
|
|
status: item.status,
|
|
remark: item.remark,
|
|
orgList: [],
|
|
roleList: [],
|
|
};
|
|
this.roleList.forEach(option=>{
|
|
params.roleList.push({
|
|
rid:option
|
|
})
|
|
})
|
|
this.orgList.forEach(option=>{
|
|
if(option.id==this.orgDetail.id){
|
|
params.orgList.push(option)
|
|
}
|
|
})
|
|
this.isLoadingSave=true;
|
|
if(type==1){
|
|
this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
|
|
this.isLoadingSave=false;
|
|
if (json.is_success) {
|
|
this.message.success(`新增成功`);
|
|
this.router.navigate(['app/system/users'])
|
|
} else {
|
|
this.message.error(`新增失败`)
|
|
}
|
|
})
|
|
}else if(type==2){
|
|
this.http.put('/sysapi/setting/user/updateById/'+this.userId, params).subscribe((json) => {
|
|
this.isLoadingSave=false;
|
|
if (json.is_success) {
|
|
this.message.success(`修改成功`);
|
|
this.router.navigate(['app/system/users'])
|
|
} else {
|
|
this.message.error(`修改失败`)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//取消 返回列表页
|
|
cancel(){
|
|
this.router.navigate(['app/system/users'])
|
|
}
|
|
//获取角色列表
|
|
queryRole(): void {
|
|
this.statusParamsRole.status=1;
|
|
this.http.get('/sysapi/setting/role/list', {page_index: '1',page_size: '100',}).subscribe((json) => {
|
|
if (json.is_success) {
|
|
this.listOfRole = json.body.list;
|
|
if(json.body.list&&json.body.list.length>0){
|
|
this.statusParamsRole.status=3;
|
|
}else{
|
|
this.statusParamsRole.status=4;
|
|
}
|
|
} else {
|
|
this.statusParamsRole.status=0;
|
|
}
|
|
})
|
|
}
|
|
//树模型参数设置
|
|
public zNodes: any[];
|
|
setting = {
|
|
data: {
|
|
simpleData: {
|
|
enable: true
|
|
}
|
|
},
|
|
view: {
|
|
showLine: true,
|
|
dblClickExpand: false,
|
|
showIcon:true
|
|
},
|
|
callback: {
|
|
//节点点击事件
|
|
onClick: (event, treeId, treeNode, clickFlag) => {
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
|
this.treeSelected=treeNode;
|
|
},
|
|
},
|
|
};
|
|
//获取机构列表，树模型数据处理
|
|
initTree(){
|
|
//获取目录列表
|
|
this.statusParamsTree.status=1;
|
|
this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
|
|
if(json.is_success){
|
|
if(json.body.length>0){
|
|
this.orgList=json.body;
|
|
this.statusParamsTree.status=3;
|
|
let children=[];
|
|
for(var i=0;i<json.body.length;i++){
|
|
let option=json.body[i];
|
|
option.name=option.organization;
|
|
if(option.pid){
|
|
option.pId=option.pid;
|
|
}else{
|
|
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
|
|
}
|
|
}
|
|
json.body.push({
|
|
name:"全部机构",
|
|
isParent:true,
|
|
open:true,
|
|
id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
|
|
})
|
|
}else{
|
|
//数据为空
|
|
this.statusParamsTree.status=4;
|
|
}
|
|
}else{
|
|
//请求失败
|
|
this.statusParamsTree.status=0;
|
|
}
|
|
this.zNodes=json.body;
|
|
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
|
let node = zTree.getNodes();
|
|
})
|
|
|
|
}
|
|
|
|
|
|
}
|