465 lines
17 KiB
TypeScript
465 lines
17 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 } from '@angular/router';
|
|
import { NzMessageService, NzModalRef, NzModalService } from 'ng-zorro-antd';
|
|
import { Observable } from 'rxjs';
|
|
|
|
import 'ztree';
|
|
declare var $: any;
|
|
declare var jQuery: any
|
|
|
|
@Component({
|
|
selector: 'app-department-management',
|
|
templateUrl: './department-management.component.html',
|
|
styleUrls: ['./department-management.component.scss']
|
|
})
|
|
export class DepartmentManagementComponent implements OnInit {
|
|
collectionSize: any;
|
|
treeSelected: any; //树模型-当前选中项
|
|
treeSelectedChild: any; //上级机构选择树
|
|
statusParamsTree: any = { //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
|
status: 1,
|
|
}
|
|
statusParamsUsers: any = { //接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
|
status: 1,
|
|
}
|
|
public TreeData: any;
|
|
public canDel: any = false;
|
|
public canEdit: any = false;
|
|
public search: any = {
|
|
page_index: '1',
|
|
page_size: '10',
|
|
real_name: '',
|
|
}
|
|
public orgDetail: any = ''; //左侧机构目录当前选中项机构的详情信息
|
|
public sekOrgDetail: any = '';
|
|
public orgSeleted: any = ''; //新增或者修改时，当前选中的所属机构的机构详情信息
|
|
public modifyType: any = '3'; //操作状态 1新增 2修改 3详情
|
|
public parentName: any = '';
|
|
public parentNode: any = ''; //当前选中机构的父级节点
|
|
public userList: any = ''; //机构负责人列表-详情时展示用户列表
|
|
public userSelecteds: any = []; //机构负责人已选用户-新增、修改时
|
|
public userData: any = []; //用户列表数据
|
|
saveCheck: any = false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
|
|
public visible: any = false;
|
|
public orgSeletedBtn: any = true; //控制机构选择按钮
|
|
validateForm: FormGroup;
|
|
visibleUsers: any = false;
|
|
isLoadingSave: any = false;
|
|
nameOnly: any = true; //系统账号是否唯一 true唯一 false重复
|
|
oldLoginName: any = ''; //修改时，保存原本的系统账号，用于检测唯一性
|
|
checkNameStatus: any = ''; //检测账号唯一性的图标状态
|
|
orgList: any = [];
|
|
confirmModal: NzModalRef;
|
|
constructor(
|
|
private fb: FormBuilder,
|
|
private http: HttpClientService,
|
|
private router: Router,
|
|
private message: NzMessageService,
|
|
private modal: NzModalService,
|
|
) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
$('.tree-box').css('height', (document.documentElement.clientHeight - 106 + 'px'));
|
|
$('.main-content').css('height', (document.documentElement.clientHeight - 106 + 'px'));
|
|
$(window).resize(function () {
|
|
$('.tree-box').css('height', (document.documentElement.clientHeight - 106 + 'px'));
|
|
$('.main-content').css('height', (document.documentElement.clientHeight - 106 + 'px'));
|
|
})
|
|
//表单实例化
|
|
this.validateForm = this.fb.group({
|
|
organization: ['', [Validators.required, Validators.maxLength(20)]],
|
|
shortName: ['', [Validators.maxLength(10)]],
|
|
code: ['', [Validators.required, Validators.maxLength(10)]],
|
|
contact_person: ['', [Validators.maxLength(10)]],
|
|
contact_method: ['', [Validators.maxLength(20)]],
|
|
organization_type: [''],
|
|
address: ['', [Validators.maxLength(30)]],
|
|
});
|
|
this.initTree();
|
|
this.queryTable();
|
|
}
|
|
//新增、修改 type 1新增 2修改
|
|
addModify(type) {
|
|
//数据清空重置
|
|
this.modifyType = type;
|
|
// this.validateForm.reset();
|
|
this.userSelecteds = [];
|
|
this.orgSeleted = '';
|
|
this.checkNameStatus = '';
|
|
this.nameOnly = true;
|
|
// this.validateForm.patchValue({ organization_type: 1, });
|
|
if (type == 1) {
|
|
this.sekOrgDetail = true;
|
|
this.zNodesChild = this.zNodes.concat();
|
|
$.fn.zTree.init($("#treeDemoChild"), this.settingChild, this.zNodesChild);
|
|
this.validateForm.patchValue({
|
|
organization: '',
|
|
shortName: '',
|
|
code: '',
|
|
contact_person: '',
|
|
contact_method: '',
|
|
organization_type: 1,
|
|
address: '',
|
|
});
|
|
} else if (type == 2) {
|
|
this.sekOrgDetail = false;
|
|
let item = this.orgDetail;
|
|
this.zNodesChild = this.zNodes.concat();
|
|
// for (let i = 0; i < this.zNodesChild.length; i++) {
|
|
// if (this.zNodesChild[i].id === item.id) {
|
|
// this.zNodesChild.splice(i, 1);
|
|
// break;
|
|
// }
|
|
// }
|
|
$.fn.zTree.init($("#treeDemoChild"), this.settingChild, this.zNodesChild);
|
|
this.validateForm.patchValue({
|
|
organization: item.organization,
|
|
shortName: item.shortName,
|
|
code: item.code,
|
|
contact_person: item.contact_person,
|
|
contact_method: item.contact_method,
|
|
organization_type: item.organization_type,
|
|
address: item.address,
|
|
});
|
|
this.orgSeleted = this.parentNode;
|
|
this.userList.forEach(option => {
|
|
option.checked = true;
|
|
option.disabled = false;
|
|
this.userSelecteds.push(option)
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
//删除
|
|
delete() {
|
|
this.confirmModal = this.modal.confirm({
|
|
nzTitle: '删除',
|
|
nzContent: '确定删除【' + this.orgDetail.organization + '】?',
|
|
nzOnOk: () => new Promise((resolve, reject) => {
|
|
if (this.userList && this.userList.length > 0) {
|
|
setTimeout(()=>{
|
|
this.message.error('删除失败，请删除此机构下的用户后再执行此操作！');
|
|
reject()
|
|
},500);
|
|
} else {
|
|
this.http.delete('/sysapi/setting/organization/delOrgByid/' + this.orgDetail.id).subscribe((json) => {
|
|
if (json.is_success) {
|
|
resolve();
|
|
this.message.success(`删除成功!`);
|
|
this.initTree();
|
|
} else {
|
|
reject();
|
|
this.message.error(`删除失败!`);
|
|
}
|
|
})
|
|
}
|
|
|
|
}).catch(() => console.log('Oops errors!'))
|
|
});
|
|
}
|
|
//保存
|
|
submitForm() {
|
|
let pid = '';
|
|
let userList = [];
|
|
this.orgSeleted ? pid = this.orgSeleted.id : pid = '';
|
|
if (this.userSelecteds && this.userSelecteds.length > 0) {
|
|
this.userSelecteds.forEach(item => {
|
|
userList.push({ uid: item.uid })
|
|
})
|
|
}
|
|
let params = Object.assign({}, this.validateForm.value, { pid: pid }, { userList: userList })
|
|
if (this.modifyType == 1) {
|
|
this.http.post('/sysapi/setting/organization/add/', params).subscribe((json) => {
|
|
if (json.is_success) {
|
|
this.message.success(`新增成功!`);
|
|
this.initTree();
|
|
} else {
|
|
this.message.error(`新增失败!`);
|
|
}
|
|
})
|
|
} else if (this.modifyType == 2) {
|
|
this.http.put('/sysapi/setting/organization/updateById/' + this.orgDetail.id, params).subscribe((json) => {
|
|
if (json.is_success) {
|
|
this.message.success(`修改成功!`);
|
|
this.initTree();
|
|
} else {
|
|
this.message.error(`修改失败!`);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//取消
|
|
cancel() {
|
|
this.modifyType = 3;
|
|
}
|
|
//保存机构负责人
|
|
userSave() {
|
|
this.userData.forEach(item => {
|
|
if (item.checked && !item.disabled) {
|
|
// 增加数据
|
|
this.userSelecteds = [...this.userSelecteds, item];
|
|
}
|
|
})
|
|
this.visibleUsers = false;
|
|
}
|
|
//保存选择机构
|
|
treeSave() {
|
|
if (this.treeSelectedChild) {
|
|
if (this.sekOrgDetail) {
|
|
//新增
|
|
} else {
|
|
//修改
|
|
if (this.orgDetail && this.orgDetail.id === this.treeSelectedChild.id) {
|
|
this.message.create('warning', '不能选择自己作为所属机构！');
|
|
this.close();
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
this.orgSeleted = this.treeSelectedChild;
|
|
this.close();
|
|
// this.visible = false;
|
|
// this.orgSeletedBtn=false;
|
|
} else {
|
|
//如果没有选择机构,提示请选择机构
|
|
this.message.create('warning', `请选择所属机构！`, { nzDuration: 2000 });
|
|
}
|
|
}
|
|
//打开机构负责人抽屉
|
|
openUsers() {
|
|
this.visibleUsers = true;
|
|
this.queryTable();
|
|
}
|
|
//处理机构负责人选择和数据回填
|
|
userSelect() {
|
|
if (this.userData) {
|
|
this.userData.forEach(item => {
|
|
this.userSelecteds.forEach(option => {
|
|
if (item.uid == option.uid) {
|
|
item.checked = true;
|
|
item.disabled = true;
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
//关闭用户选择抽屉
|
|
closeUser() {
|
|
this.visibleUsers = false;
|
|
}
|
|
//打开机构树抽屉
|
|
open(): void {
|
|
this.treeSelectedChild = '';
|
|
this.visible = true;
|
|
}
|
|
//关闭机构选择页面
|
|
close(): void {
|
|
this.visible = false;
|
|
}
|
|
//删除机构标签
|
|
tagClose(event) {
|
|
// this.orgSeletedBtn=true;
|
|
this.orgSeleted = '';
|
|
}
|
|
//删除机构负责人
|
|
delectConfirm(item) {
|
|
this.userSelecteds = this.userSelecteds.filter(function (option) {
|
|
return item.uid !== option.uid
|
|
})
|
|
}
|
|
//取消删除
|
|
delectCancel() {
|
|
|
|
}
|
|
|
|
//获取用户列表
|
|
queryTable(): void {
|
|
this.statusParamsUsers.status = 1;
|
|
this.http.get('/sysapi/setting/user/list', this.search).subscribe((json) => {
|
|
if (json.is_success) {
|
|
this.userData = json.body.list;
|
|
this.collectionSize = json.body.total;
|
|
if (json.body.list && json.body.list.length > 0) {
|
|
this.statusParamsUsers.status = 3;
|
|
this.userData.forEach(item => {
|
|
if (this.userSelecteds.length > 0) {
|
|
this.userSelecteds.forEach(option => {
|
|
if (item.uid == option.uid) {
|
|
item.checked = true;
|
|
item.disabled = true;
|
|
}
|
|
})
|
|
} else {
|
|
item.checked = false;
|
|
item.disabled = false;
|
|
}
|
|
})
|
|
} else {
|
|
this.statusParamsUsers.status = 4;
|
|
}
|
|
} else {
|
|
this.statusParamsUsers.status = 0;
|
|
}
|
|
})
|
|
}
|
|
//翻页
|
|
pageChange(event) {
|
|
this.search.page_index = event;
|
|
this.queryTable();
|
|
}
|
|
//修改时查询该系统下的所有用户
|
|
queryUserById(): void {
|
|
this.http.get('/sysapi/setting/organization/queryUserById/' + this.orgDetail.id).subscribe((json) => {
|
|
if (json.is_success) {
|
|
this.userList = json.body
|
|
} else {
|
|
|
|
}
|
|
})
|
|
}
|
|
//检验编码的唯一性
|
|
checkName() {
|
|
//处理修改的时候，修改的值为原来的值，这时候直接显示验证成功
|
|
if (this.modifyType == 2 && this.validateForm.value.code.trim() == this.oldLoginName) {
|
|
this.nameOnly = true;
|
|
this.checkNameStatus = 'success';
|
|
return false;
|
|
}
|
|
//拿用户输入的机构编码跟机构列表的编码对比，判断编码是否已经存在
|
|
let status = 'true';
|
|
this.orgList.forEach(item => {
|
|
if (this.validateForm.value.code.trim() == item.code) {
|
|
this.checkNameStatus = 'error';
|
|
this.nameOnly = false;
|
|
status = 'false';
|
|
return false;
|
|
}
|
|
});
|
|
if (status == 'true' && this.validateForm.value.code.trim()) {
|
|
this.checkNameStatus = 'success';
|
|
this.nameOnly = true;
|
|
}
|
|
}
|
|
//获取机构列表，树模型数据处理
|
|
initTree() {
|
|
//获取目录列表
|
|
this.statusParamsTree.status = 1;
|
|
this.http.get("/sysapi/setting/organization/list").subscribe(json => {
|
|
if (json.is_success) {
|
|
if (json.body.length > 0) {
|
|
this.statusParamsTree.status = 3;
|
|
this.orgList = json.body;
|
|
let children = [];
|
|
json.body.forEach(option => {
|
|
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();
|
|
if (json.body.length > 0) {
|
|
if (node[0].children && node[0].children.length > 0) {
|
|
zTree.selectNode(node[0].children[0])
|
|
zTree.setting.callback.onClick(null, zTree.setting.treeId, node[0].children[0])
|
|
} else {
|
|
zTree.selectNode(node[0])
|
|
zTree.setting.callback.onClick(null, zTree.setting.treeId, node[0])
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//树模型参数设置-左侧机构树
|
|
public zNodes: any[];
|
|
setting = {
|
|
data: {
|
|
simpleData: {
|
|
enable: true
|
|
}
|
|
},
|
|
view: {
|
|
showLine: true,
|
|
dblClickExpand: false,
|
|
showIcon: true
|
|
},
|
|
callback: {
|
|
//节点点击事件
|
|
onClick: (event, treeId, treeNode, clickFlag) => {
|
|
this.modifyType = 3;
|
|
this.parentName = '';
|
|
this.parentNode = '';
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
|
this.treeSelected = treeNode;
|
|
let isTopNode = this.treeSelected.getParentNode(); //是否为顶级节点 true不是顶级节点 false 为顶级节点
|
|
if (isTopNode) { //子节点
|
|
this.orgDetail = treeNode;
|
|
this.oldLoginName = this.orgDetail.code;
|
|
this.queryUserById();
|
|
if (this.treeSelected.children && this.treeSelected.children.length > 0) {
|
|
this.canDel = false;
|
|
this.canEdit = true;
|
|
} else {
|
|
this.canDel = true;
|
|
this.canEdit = true;
|
|
}
|
|
if (isTopNode.id == 'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc') {
|
|
//除去全部机构这层的第一层 也就是实际意义的顶层
|
|
} else {
|
|
this.parentName = isTopNode.name;
|
|
this.parentNode = isTopNode;
|
|
}
|
|
} else { //顶级节点
|
|
this.orgDetail = '';
|
|
this.canDel = false;
|
|
this.canEdit = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
//树模型参数设置-右侧机构树
|
|
public zNodesChild: any[];
|
|
settingChild = {
|
|
data: {
|
|
simpleData: {
|
|
enable: true
|
|
}
|
|
},
|
|
view: {
|
|
showLine: true,
|
|
dblClickExpand: false,
|
|
showIcon: true
|
|
},
|
|
callback: {
|
|
//节点点击事件
|
|
onClick: (event, treeId, treeNode, clickFlag) => {
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemoChild");
|
|
this.treeSelectedChild = treeNode;
|
|
},
|
|
},
|
|
};
|
|
|
|
}
|