Compare commits
1 Commits
master
...
test-asset
| Author | SHA1 | Date |
|---|---|---|
 邵佳豪
|
d44eaab73b | 5 months ago |
58 changed files with 1268 additions and 1923 deletions
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,121 @@
|
||||
<!-- <nz-modal nzWidth="1300px" [(nzVisible)]="isVisible" nzMaskClosable="false" nzTitle="请绑定用户" |
||||
(nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" :nzFooter=" " nzClosable="false" nzKeyboard="false"> |
||||
<ng-container *nzModalContent> |
||||
<div class="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="blue">绑定</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> |
||||
</ng-container> |
||||
</nz-modal> --> |
||||
@ -0,0 +1,234 @@
|
||||
.userBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
min-height: 600px; |
||||
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; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
@ -1,4 +0,0 @@
|
||||
<div class="box"> |
||||
<nz-tree #nzTreeComponent [nzSelectedKeys]="defaultSelectedKeys" [nzData]="nodes" |
||||
[nzExpandedKeys]="defaultExpandedKeys"></nz-tree> |
||||
</div> |
||||
@ -1,5 +0,0 @@
|
||||
.box { |
||||
max-height: 500px; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import { Component, Input, OnInit, ViewChild } from "@angular/core"; |
||||
import { NzModalRef } from "ng-zorro-antd/modal"; |
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { TreeService } from "src/app/service/tree.service"; |
||||
import { NzTreeComponent } from "ng-zorro-antd/tree"; |
||||
|
||||
@Component({ |
||||
selector: "app-change-or", |
||||
templateUrl: "./change-or.component.html", |
||||
styleUrls: ["./change-or.component.scss"], |
||||
}) |
||||
export class ChangeOrComponent implements OnInit { |
||||
@Input() data?: any; |
||||
@ViewChild("nzTreeComponent", { static: false }) |
||||
nzTreeComponent!: NzTreeComponent; |
||||
constructor( |
||||
private modal: NzModalRef, |
||||
private fb: FormBuilder, |
||||
private http: HttpClient, |
||||
private toTree: TreeService |
||||
) {} |
||||
|
||||
defaultExpandedKeys = []; |
||||
defaultSelectedKeys = []; |
||||
ngOnInit(): void { |
||||
this.getAllOrganization(); |
||||
// this.nzTreeComponent.getCheckedNodeList()
|
||||
} |
||||
|
||||
allOrList: any; |
||||
nodes: any; |
||||
getAllOrganization() { |
||||
let params = { |
||||
IsContainsChildren: "true", |
||||
}; |
||||
this.http |
||||
.get("/api/services/app/Organization/GetAll", { |
||||
params: params, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
console.log(data); |
||||
data.result.items.forEach((element) => { |
||||
element.key = element.id; |
||||
element.title = element.displayName; |
||||
}); |
||||
this.allOrList = data.result.items.filter((v) => !v.isGasStation); |
||||
this.nodes = [...this.toTree.toTree(this.allOrList)]; |
||||
}); |
||||
} |
||||
|
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: "this the result data" }); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue