8 changed files with 272 additions and 252 deletions
@ -0,0 +1,35 @@
|
||||
<div class="orbox"> |
||||
<div class="topbox"> |
||||
<div class="righttop"> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
||||
</nz-input-group> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="treeTitle"> |
||||
<span>组织机构</span> |
||||
<label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">包含子节点</label> |
||||
</div> |
||||
<div class="treebox"> |
||||
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" |
||||
[nzExpandedKeys]="defaultExpandedKeys" [nzTreeTemplate]="nzTreeTemplate" nzBlockNode |
||||
[nzExpandedIcon]="multiExpandedIconTpl"> |
||||
</nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div class="nodebox"> |
||||
<span class="name">{{ node.title }}</span> |
||||
<div class="operation"> |
||||
<span class="blueColor" (click)="okbinding(node)">绑定机构</span> |
||||
</div> |
||||
</div> |
||||
</ng-template> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length !== 0"> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||
class="ant-tree-switcher-line-icon"></i> |
||||
</ng-container> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
</div> |
||||
@ -1,224 +1,76 @@
|
||||
.userBox { |
||||
width: 100%; |
||||
max-height: 680px; |
||||
background: #FFFFFF; |
||||
overflow: hidden; |
||||
|
||||
.orbox { |
||||
width: 100%; |
||||
max-height: 600px; |
||||
overflow-y: auto; |
||||
margin-right: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.treebox { |
||||
display: flex; |
||||
position: relative; |
||||
|
||||
.treebox { |
||||
display: flex; |
||||
flex: 1; |
||||
overflow: auto; |
||||
flex-direction: column; |
||||
box-sizing: border-box; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.topbox2 { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 20px; |
||||
|
||||
.lefttop { |
||||
height: 36px; |
||||
line-height: 36px; |
||||
color: #000; |
||||
margin-right: 10px; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.righttop { |
||||
flex: 1; |
||||
height: 36px; |
||||
display: flex; |
||||
|
||||
nz-input-group { |
||||
height: 36px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.orbox { |
||||
width: 260px; |
||||
min-width: 250px; |
||||
overflow-y: auto; |
||||
margin-right: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.treeTitle { |
||||
width: 100%; |
||||
height: 55px; |
||||
line-height: 55px; |
||||
margin-top: 12px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
color: #000D21; |
||||
box-sizing: border-box; |
||||
padding: 0 10px; |
||||
background: rgba(145, 204, 255, 0.2); |
||||
border: 1px solid rgba(145, 204, 255, 0.2); |
||||
|
||||
span { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
div { |
||||
flex: 1; |
||||
width: 100px; |
||||
margin-left: 55px; |
||||
} |
||||
} |
||||
|
||||
.nodebox { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
tbody { |
||||
tr { |
||||
td:nth-child(1) { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
.operation { |
||||
i { |
||||
cursor: pointer; |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.box { |
||||
flex: 1; |
||||
padding-top: 20px; |
||||
display: flex; |
||||
overflow: auto; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.topbox { |
||||
|
||||
.topbox2 { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 12px; |
||||
|
||||
margin-top: 20px; |
||||
|
||||
.lefttop { |
||||
span:nth-child(1) { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
height: 36px; |
||||
line-height: 36px; |
||||
color: #000; |
||||
margin-right: 10px; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
|
||||
.righttop { |
||||
flex: 1; |
||||
height: 36px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
height: 36px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.pagination { |
||||
margin: 15px 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.ortype { |
||||
width: 36px; |
||||
height: 20px; |
||||
background: #2399FF; |
||||
opacity: 1; |
||||
border-radius: 2px; |
||||
font-size: 12px; |
||||
margin-right: 8px; |
||||
color: #fff; |
||||
text-align: center; |
||||
} |
||||
|
||||
.resetPasswordContent { |
||||
z-index: 999; |
||||
width: 380px; |
||||
height: 138px; |
||||
position: absolute; |
||||
left: 30%; |
||||
top: 30%; |
||||
|
||||
|
||||
|
||||
.treeTitle { |
||||
width: 100%; |
||||
height: 55px; |
||||
line-height: 55px; |
||||
margin-top: 12px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
justify-content: space-between; |
||||
color: #000d21; |
||||
box-sizing: border-box; |
||||
padding-left: 40px; |
||||
color: #000; |
||||
border-radius: 5px; |
||||
border-radius: 2px; |
||||
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%); |
||||
background: #fff; |
||||
|
||||
.titlebox { |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
span { |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
i { |
||||
font-size: 26px; |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
.close { |
||||
position: absolute; |
||||
right: 2px; |
||||
top: -22px; |
||||
font-size: 16px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.move { |
||||
position: absolute; |
||||
left: -32px; |
||||
top: -22px; |
||||
cursor: move; |
||||
} |
||||
padding: 0 10px; |
||||
background: rgba(145, 204, 255, 0.2); |
||||
border: 1px solid rgba(145, 204, 255, 0.2); |
||||
|
||||
span { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.message { |
||||
margin-top: 20px; |
||||
|
||||
i { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
i:hover { |
||||
color: #18bb18; |
||||
} |
||||
|
||||
div { |
||||
flex: 1; |
||||
width: 100px; |
||||
margin-left: 55px; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
.nodebox { |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
@ -1,15 +1,116 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
import { |
||||
Component, |
||||
Input, |
||||
OnInit, |
||||
TemplateRef, |
||||
ViewChild, |
||||
ViewContainerRef, |
||||
} from "@angular/core"; |
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||
import { |
||||
NzFormatEmitEvent, |
||||
NzTreeComponent, |
||||
NzTreeNodeOptions, |
||||
} from "ng-zorro-antd/tree"; |
||||
import { NzModalService } from "ng-zorro-antd/modal"; |
||||
import { NzMessageService } from "ng-zorro-antd/message"; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { TreeService } from "src/app/service/tree.service"; |
||||
import { NzNotificationService } from "ng-zorro-antd/notification"; |
||||
@Component({ |
||||
selector: 'app-or-binding-model', |
||||
templateUrl: './or-binding-model.component.html', |
||||
styleUrls: ['./or-binding-model.component.scss'] |
||||
selector: "app-or-binding-model", |
||||
templateUrl: "./or-binding-model.component.html", |
||||
styleUrls: ["./or-binding-model.component.scss"], |
||||
}) |
||||
export class OrBindingModelComponent implements OnInit { |
||||
@Input() data?: any; |
||||
constructor( |
||||
private fb: FormBuilder, |
||||
private modal: NzModalService, |
||||
private viewContainerRef: ViewContainerRef, |
||||
private message: NzMessageService, |
||||
private http: HttpClient, |
||||
private toTree: TreeService, |
||||
private notification: NzNotificationService, |
||||
private notificationService: NzNotificationService |
||||
) {} |
||||
|
||||
constructor() { } |
||||
level; |
||||
getAllUrl; |
||||
addUrl; |
||||
editUrl; |
||||
deleteUrl; |
||||
isAdmin: boolean; |
||||
|
||||
ngOnInit(): void { |
||||
this.level = JSON.parse( |
||||
sessionStorage.getItem("userdata") |
||||
).organization.level; |
||||
this.getAllUrl = "/api/services/app/User/GetAll"; |
||||
this.getAllOrganization(); |
||||
} |
||||
nzSelectedKeys: any[] = []; |
||||
defaultExpandedKeys = []; |
||||
IsContainsChildren = true; |
||||
searchValue = ""; |
||||
totalCount: string; |
||||
//获取所有用户
|
||||
|
||||
//获取所有组织机构
|
||||
nodes: any = []; |
||||
organization; |
||||
async getAllOrganization() { |
||||
let OrganizationUnitId = |
||||
sessionStorage.getItem("isGasStation") == "true" |
||||
? JSON.parse(sessionStorage.getItem("userdataOfgasstation")) |
||||
.organization.id |
||||
: JSON.parse(sessionStorage.getItem("userdata")).organization.id; |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true", |
||||
}; |
||||
await new Promise<void>((resolve, reject) => { |
||||
this.http |
||||
.get("/api/services/app/Organization/GetAll", { |
||||
params: params, |
||||
}) |
||||
.subscribe(async (data: any) => { |
||||
this.organization = data.result.items; |
||||
for (let index = 0; index < data.result.items.length; index++) { |
||||
if (data.result.items[index].id == OrganizationUnitId) { |
||||
data.result.items[index].parentId = null; |
||||
} |
||||
data.result.items[index].title = |
||||
data.result.items[index].displayName; |
||||
data.result.items[index].key = data.result.items[index].id; |
||||
} |
||||
this.nodes = [...this.toTree.toTree(data.result.items)]; |
||||
this.defaultExpandedKeys = [this.nodes[0].id]; |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
okbinding(item) { |
||||
console.log(this.data); |
||||
console.log(item); |
||||
this.modal.confirm({ |
||||
nzTitle: "确定要绑定到此机构吗?", |
||||
nzOkText: "确定", |
||||
nzOkType: "primary", |
||||
nzOnOk: () => { |
||||
this.http |
||||
.post("/api/services/app/Organization/SetSinoOrgLocal", null, { |
||||
params: { |
||||
sinoOrgId: this.data.organId, |
||||
localOrgId: item.key, |
||||
}, |
||||
}) |
||||
.subscribe(() => { |
||||
this.message.create("success", "绑定成功"); |
||||
}); |
||||
}, |
||||
nzCancelText: "取消", |
||||
nzOnCancel: () => console.log("Cancel"), |
||||
}); |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue