11 changed files with 940 additions and 152 deletions
@ -0,0 +1,113 @@
|
||||
<div class="userBox" id="userBox"> |
||||
|
||||
<div class="orbox"> |
||||
<div class="topbox2"> |
||||
<div class="lefttop"> |
||||
组织机构 |
||||
</div> |
||||
<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 [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" |
||||
[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" |
||||
[nzExpandedIcon]="multiExpandedIconTpl" [nzHideUnMatched]="true" [nzTreeTemplate]="nzTreeTemplate"> |
||||
</nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div class="nodebox"> |
||||
<span class="name">{{ node.title }}</span> |
||||
<span class="name">({{node.origin.products? node.origin.products.usersCount : 0}})</span> |
||||
</div> |
||||
</ng-template> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||
|
||||
</ng-container> |
||||
|
||||
<ng-template #elseTemplate> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||
class="ant-tree-switcher-line-icon"></i> |
||||
</ng-template> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="box"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>用户列表</span> |
||||
<span><i nz-icon nzType="search"></i> {{usersNum}}名用户</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
<button style="display: none;" type="submit"></button> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox" #tablebox> |
||||
<nz-table #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false' |
||||
[nzPageSize]='16'> |
||||
<thead> |
||||
<tr> |
||||
<th></th> |
||||
<th>账号</th> |
||||
<th>姓名</th> |
||||
<!-- <th>角色/预警接收级别</th> --> |
||||
<th [width]="'13%'">所属机构</th> |
||||
<th [width]="'8%'">用户状态</th> |
||||
<th [width]="'8%'">备注</th> |
||||
<th [width]="'10%'">操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td><img src="../../../assets/images/user.png" alt=""></td> |
||||
<td>{{ data.userName }}</td> |
||||
<td>{{ data.name }}</td> |
||||
<!-- <td nzBreakWord> |
||||
<span style="margin-right: 8px;" *ngFor="let item of data.roleDisplayNames">{{item}}</span> |
||||
</td> --> |
||||
<td> |
||||
{{data.organizationName}} |
||||
</td> |
||||
<td> |
||||
<ng-container *ngIf="data.isActive; else elseTemplate"> |
||||
<span class="greenColor2">已启用</span> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<span class="redColor">已停用</span> |
||||
</ng-template> |
||||
</td> |
||||
<td> |
||||
{{data.note}} |
||||
</td> |
||||
<td class="operation"> |
||||
<span class="blueColor" (click)="okbinding(data)">确认绑定</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
<div class="pagination"> |
||||
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16" |
||||
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||
</nz-pagination> |
||||
<ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,223 @@
|
||||
.userBox { |
||||
width: 100%; |
||||
max-height: 680px; |
||||
background: #FFFFFF; |
||||
overflow: hidden; |
||||
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; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 12px; |
||||
|
||||
.lefttop { |
||||
span:nth-child(1) { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.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%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.message { |
||||
margin-top: 20px; |
||||
|
||||
i { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
i:hover { |
||||
color: #18bb18; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,205 @@
|
||||
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-binding", |
||||
templateUrl: "./binding.component.html", |
||||
styleUrls: ["./binding.component.scss"], |
||||
}) |
||||
export class BindingComponent implements OnInit { |
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
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 |
||||
) {} |
||||
|
||||
level; |
||||
getAllUrl; |
||||
addUrl; |
||||
editUrl; |
||||
deleteUrl; |
||||
CountsByOrganizations; |
||||
isAdmin: boolean; |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
search: [null], |
||||
}); |
||||
this.level = JSON.parse( |
||||
sessionStorage.getItem("userdata") |
||||
).organization.level; |
||||
this.getAllUrl = "/api/services/app/User/GetAll"; |
||||
this.CountsByOrganizations = |
||||
"/api/services/app/User/GetCountsByOrganizations"; |
||||
this.getAllOrganization(); |
||||
} |
||||
nzSelectedKeys: any[] = []; |
||||
defaultExpandedKeys = []; |
||||
IsContainsChildren = true; |
||||
searchValue = ""; |
||||
totalCount: string; |
||||
//获取所有用户
|
||||
usersLIst: any = []; |
||||
usersNum: string; |
||||
OrganizationUnitId; |
||||
loading: boolean; |
||||
organizationsList = []; |
||||
getAllUsers() { |
||||
this.loading = true; |
||||
let params = { |
||||
Keyword: this.validateForm.value.search |
||||
? this.validateForm.value.search |
||||
: "", |
||||
SkipCount: String(this.SkipCount), |
||||
MaxResultCount: String(this.MaxResultCount), |
||||
OrganizationUnitId: this.OrganizationUnitId, |
||||
IsContainsChildren: String(this.IsContainsChildren), |
||||
// Sorting: 'BuildingBasicInfo.Id asc'
|
||||
}; |
||||
this.http |
||||
.get(this.getAllUrl, { |
||||
params: params, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
this.usersLIst = data.result.items; |
||||
this.usersNum = data.result.totalCount; |
||||
this.loading = false; |
||||
}); |
||||
} |
||||
SkipCount: number = 0; //0 16 32 48
|
||||
MaxResultCount: number = 16; |
||||
pageChange($event) { |
||||
this.SkipCount = ($event - 1) * this.MaxResultCount; |
||||
this.getAllUsers(); |
||||
} |
||||
|
||||
//获取所有组织机构
|
||||
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; |
||||
await this.getuser(data.result.items); |
||||
resolve(data); |
||||
this.getAllUsers(); |
||||
}); |
||||
}); |
||||
} |
||||
async getuser(e) { |
||||
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", |
||||
IsUsersCountContainsChildren: String(this.IsContainsChildren), |
||||
}; |
||||
await new Promise<void>((resolve, reject) => { |
||||
this.http |
||||
.get(this.CountsByOrganizations, { |
||||
params: params, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
resolve(data); |
||||
this.organizationsList = data.result; |
||||
const arrs = e.map((item) => { |
||||
const data = this.organizationsList.find( |
||||
(i) => item.id == i.organizationId |
||||
); |
||||
return { |
||||
...item, |
||||
products: data ? data : false, |
||||
}; |
||||
}); |
||||
|
||||
for (let index = 0; index < arrs.length; index++) { |
||||
if (arrs[index].id == OrganizationUnitId) { |
||||
arrs[index].parentId = null; |
||||
} |
||||
arrs[index].title = arrs[index].displayName; |
||||
arrs[index].key = arrs[index].id; |
||||
} |
||||
|
||||
this.nodes = [...this.toTree.toTree(arrs)]; |
||||
this.defaultExpandedKeys = [this.nodes[0].id]; |
||||
this.nzSelectedKeys = [this.nodes[0].id]; |
||||
this.OrganizationUnitId = [this.nodes[0].id]; |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
//搜索框提交
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.getAllUsers(); |
||||
} |
||||
nzClick(event: NzFormatEmitEvent) { |
||||
this.nzSelectedKeys[0] = event.node.origin.id; |
||||
this.nzSelectedKeys = [...this.nzSelectedKeys]; |
||||
this.OrganizationUnitId = event.node.origin.id; |
||||
this.getAllUsers(); |
||||
} |
||||
okbinding(item) { |
||||
this.modal.confirm({ |
||||
nzTitle: "确定要绑定到此本地用户吗?", |
||||
nzOkText: "确定", |
||||
nzOkType: "primary", |
||||
nzOnOk: () => { |
||||
this.http |
||||
.post("/api/services/app/User/SetSinochemUserLocal", null, { |
||||
params: { |
||||
sinochemUserId: this.data.userId, |
||||
localUserId: item.id, |
||||
}, |
||||
}) |
||||
.subscribe(() => { |
||||
this.message.create("success", "绑定成功"); |
||||
}); |
||||
}, |
||||
nzCancelText: "取消", |
||||
nzOnCancel: () => console.log("Cancel"), |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,99 @@
|
||||
<div class="userBox" id="userBox"> |
||||
|
||||
<!-- <div class="orbox"> |
||||
<div class="topbox2"> |
||||
<div class="lefttop"> |
||||
组织机构 |
||||
</div> |
||||
<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 [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandedKeys]="defaultExpandedKeys" |
||||
[nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" [nzExpandedIcon]="multiExpandedIconTpl" |
||||
[nzHideUnMatched]="true" [nzTreeTemplate]="nzTreeTemplate"> |
||||
</nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div class="nodebox"> |
||||
<span class="name">{{ node.title }}</span> |
||||
<span class="name">({{node.origin.products? node.origin.products.usersCount : 0}})</span> |
||||
</div> |
||||
</ng-template> |
||||
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||
|
||||
</ng-container> |
||||
|
||||
<ng-template #elseTemplate> |
||||
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i> |
||||
</ng-template> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
</div> --> |
||||
<div class="box"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>中台用户列表</span> |
||||
<span><i nz-icon nzType="search"></i> {{listConfig.totalCount}}名用户</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
<button style="display: none;" type="submit"></button> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox" #tablebox> |
||||
<nz-table #basicTable [nzLoading]="listConfig.loading" [nzData]="listConfig.usersLIst" [nzShowPagination]='false' |
||||
[nzPageSize]='16'> |
||||
<thead> |
||||
<tr> |
||||
<th></th> |
||||
<th>账号</th> |
||||
<th>账号id</th> |
||||
<th>绑定的本地用户id</th> |
||||
<th [width]="'8%'">备注</th> |
||||
<th [width]="'10%'">操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td><img src="../../../assets/images/user.png" alt=""></td> |
||||
<td>{{ data.loginName }}</td> |
||||
<td>{{ data.userId }}</td> |
||||
<td> |
||||
{{data.localUserId}} |
||||
</td> |
||||
<td> |
||||
{{data.detail}} |
||||
</td> |
||||
<td class="operation"> |
||||
<span class="blueColor" (click)="binding(data)">绑定本地用户</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
<div class="pagination"> |
||||
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="listConfig.totalCount" [nzPageSize]="16" |
||||
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||
</nz-pagination> |
||||
<ng-template #totalTemplate let-total> 16条/页,共{{listConfig.totalCount}}条 </ng-template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,172 @@
|
||||
.userBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #FFFFFF; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
overflow: hidden; |
||||
display: flex; |
||||
position: relative; |
||||
|
||||
.treebox { |
||||
display: flex; |
||||
flex: 1; |
||||
overflow: auto; |
||||
flex-direction: column; |
||||
box-sizing: border-box; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.check { |
||||
width: 100%; |
||||
float: right; |
||||
} |
||||
|
||||
.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; |
||||
// overflow: auto; |
||||
padding-top: 20px; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 12px; |
||||
|
||||
.lefttop { |
||||
span:nth-child(1) { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
overflow: 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; |
||||
} |
||||
|
||||
@ -0,0 +1,104 @@
|
||||
import { |
||||
Component, |
||||
OnInit, |
||||
TemplateRef, |
||||
ViewChild, |
||||
ViewContainerRef, |
||||
} from "@angular/core"; |
||||
import { FormBuilder, FormGroup } from "@angular/forms"; |
||||
import { NzFormatEmitEvent } 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"; |
||||
import { BindingComponent } from "./binding/binding.component"; |
||||
@Component({ |
||||
selector: "app-user-binding", |
||||
templateUrl: "./user-binding.component.html", |
||||
styleUrls: ["./user-binding.component.scss"], |
||||
}) |
||||
export class UserBindingComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
constructor( |
||||
private fb: FormBuilder, |
||||
private http: HttpClient, |
||||
private toTree: TreeService, |
||||
private modal: NzModalService, |
||||
private viewContainerRef: ViewContainerRef |
||||
) {} |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
search: [null], |
||||
}); |
||||
|
||||
this.getAllUsers(); |
||||
// this.getAllOrganization();
|
||||
} |
||||
|
||||
listConfig = { |
||||
loading: false, |
||||
usersLIst: [], |
||||
totalCount: 0, |
||||
IsContainsChildren: true, |
||||
searchValue: "", |
||||
OrganizationUnitId: "", |
||||
}; |
||||
getAllUsers() { |
||||
this.listConfig.loading = true; |
||||
let params = { |
||||
Keyword: this.validateForm.value.search |
||||
? this.validateForm.value.search |
||||
: "", |
||||
SkipCount: String(this.SkipCount), |
||||
MaxResultCount: String(this.MaxResultCount), |
||||
// OrganizationUnitId: this.OrganizationUnitId,
|
||||
// IsBindingLocal: true,
|
||||
// IsActive:true,
|
||||
// IsContainsChildren: String(this.listConfig.IsContainsChildren),
|
||||
}; |
||||
this.http |
||||
.get(this.getAllUrl, { |
||||
params: params, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
console.log("中台用户列表", data); |
||||
this.listConfig.usersLIst = data.result.items; |
||||
this.listConfig.totalCount = data.result.totalCount; |
||||
this.listConfig.loading = false; |
||||
}); |
||||
} |
||||
SkipCount: number = 0; //0 16 32 48
|
||||
MaxResultCount: number = 16; |
||||
pageChange($event) { |
||||
this.SkipCount = ($event - 1) * this.MaxResultCount; |
||||
this.getAllUsers(); |
||||
} |
||||
getAllUrl = "/api/services/app/User/GetSinochemUsers"; |
||||
|
||||
//搜索框提交
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
this.getAllUsers(); |
||||
} |
||||
|
||||
binding(data) { |
||||
const modal = this.modal.create({ |
||||
nzTitle: "绑定本地用户", |
||||
nzContent: BindingComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 1500, |
||||
nzFooter: null, |
||||
nzMaskClosable: false, |
||||
nzComponentParams: { |
||||
data: JSON.parse(JSON.stringify(data)), |
||||
}, |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
modal.afterClose.subscribe((result) => this.getAllUsers()); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue