16 changed files with 387 additions and 21 deletions
@ -0,0 +1,128 @@ |
|||||||
|
<!-- <p>站点预案!</p> --> |
||||||
|
<div class="stationPlanBox" id="stationPlanBox"> |
||||||
|
<div class="orbox"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'组织机构'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="or"> |
||||||
|
<nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent |
||||||
|
[nzExpandAll]="nzExpandAll" nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)" |
||||||
|
[nzTreeTemplate]="nzTreeTemplate" [nzExpandedIcon]=""></nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.origin.parentId == null; else elseTemplate"> |
||||||
|
<img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt=""> |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
<img src="../../../assets/images/point.png" alt=""> |
||||||
|
</ng-template> |
||||||
|
<span>{{ node.title }}</span> |
||||||
|
<img (click)="expand($event,node)" *ngIf="node.isExpanded && node.children.length != 0 " |
||||||
|
src="../../../assets/images/expand.png" alt=""> |
||||||
|
<img (click)="expand($event,node)" *ngIf="!node.isExpanded && node.children.length != 0" |
||||||
|
src="../../../assets/images/unexpand.png" alt=""> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="stationList"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'站点管理'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="search"> |
||||||
|
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group> |
||||||
|
<input required nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group> |
||||||
|
<input required nz-input type="text" formControlName="linkman" placeholder="请输入联系人" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="searchParams"> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group> |
||||||
|
<input required nz-input type="text" formControlName="phone" placeholder="请输入电话" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="btn"> |
||||||
|
<nz-form-control> |
||||||
|
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
|
||||||
|
<nz-form-item class="btn"> |
||||||
|
<nz-form-control> |
||||||
|
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||||
|
[nzType]="'sync'"></i>重置</button> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="tablebox"> |
||||||
|
<div class="table"> |
||||||
|
<div nz-row class="th"> |
||||||
|
<div nz-col nzSpan="2" style="text-align: right;box-sizing: border-box;padding-right: 20px;"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="6"> |
||||||
|
加油站名称 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
区域 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
所属公司 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
联系人 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
联系电话 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
操作 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tbody"> |
||||||
|
<div nz-row class="tr" *ngFor="let item of list"> |
||||||
|
<div nz-col nzSpan="2" style="text-align: right;box-sizing: border-box;padding-right: 20px;"> |
||||||
|
<span class="ziying">自营</span> |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="6"> |
||||||
|
中化山东省淄博市第6加油站 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
山东-淄博 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
中化某某公司 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
张三三 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
0566-5897888 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
<span class="look" (click)="look()">查看</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate" |
||||||
|
nzShowQuickJumper></nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
.stationPlanBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px 24px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.orbox { |
||||||
|
height: 100%; |
||||||
|
width: 360px; |
||||||
|
margin-right: 40px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.or { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.3); |
||||||
|
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%); |
||||||
|
margin-top: 12px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px 12px; |
||||||
|
nz-tree{ |
||||||
|
background: none; |
||||||
|
color: #C4E2FC; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.stationList { |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.search { |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 22px; |
||||||
|
padding-right: 33px; |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
margin-top: 14px; |
||||||
|
margin-bottom: 22px; |
||||||
|
|
||||||
|
form { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
input { |
||||||
|
background: none; |
||||||
|
border: 1px solid #91CCFF; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.searchParams { |
||||||
|
width: 28%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 5%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.table { |
||||||
|
color: white; |
||||||
|
flex: 1; |
||||||
|
width: 96%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.th { |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
background: rgba(35, 153, 255, 0.2); |
||||||
|
border: 1px solid rgba(35, 217, 255, 0.4); |
||||||
|
box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset; |
||||||
|
color: #23D9FF; |
||||||
|
} |
||||||
|
|
||||||
|
.tbody { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.tr { |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
border-bottom: 1px solid #0d3761; |
||||||
|
|
||||||
|
div { |
||||||
|
color: #91CCFF; |
||||||
|
|
||||||
|
.look { |
||||||
|
color: #36A2FF; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin-top: 26px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
import { Component, OnInit, ViewChild } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { TreeService } from 'src/app/service/tree.service'; |
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||||
|
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; |
||||||
|
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
@Component({ |
||||||
|
selector: 'app-plan-admin', |
||||||
|
templateUrl: './plan-admin.component.html', |
||||||
|
styleUrls: ['./plan-admin.component.scss'] |
||||||
|
}) |
||||||
|
export class PlanAdminComponent implements OnInit { |
||||||
|
validateForm!: FormGroup; |
||||||
|
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||||
|
constructor(private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { } |
||||||
|
list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] |
||||||
|
ngOnInit(): void { |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
name: [null], |
||||||
|
linkman: [null], |
||||||
|
phone: [null] |
||||||
|
}); |
||||||
|
this.getAllOrganization() |
||||||
|
} |
||||||
|
submitForm(): void { |
||||||
|
for (const i in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[i].markAsDirty(); |
||||||
|
this.validateForm.controls[i].updateValueAndValidity(); |
||||||
|
} |
||||||
|
} |
||||||
|
resetForm(e: MouseEvent): void { |
||||||
|
e.preventDefault(); |
||||||
|
this.validateForm.reset(); |
||||||
|
for (const key in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[key].markAsPristine(); |
||||||
|
this.validateForm.controls[key].updateValueAndValidity(); |
||||||
|
} |
||||||
|
} |
||||||
|
//获取所有组织机构
|
||||||
|
nodes: any = [] |
||||||
|
nzExpandAll = false |
||||||
|
getAllOrganization() { |
||||||
|
this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => { |
||||||
|
data.result.items.forEach(element => { |
||||||
|
element.key = element.code |
||||||
|
element.title = element.displayName |
||||||
|
}); |
||||||
|
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||||
|
this.nzExpandAll = true |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
look() { |
||||||
|
this.router.navigate(['/plan/petrolStation']) |
||||||
|
} |
||||||
|
nzExpandedKeys: any = [] |
||||||
|
activatedNode?: NzTreeNode; |
||||||
|
//点击tree节点
|
||||||
|
activeNode(data: NzFormatEmitEvent): void { |
||||||
|
this.activatedNode = data.node!; |
||||||
|
// console.log(data)
|
||||||
|
} |
||||||
|
|
||||||
|
expand(e, node) { |
||||||
|
e.stopPropagation() |
||||||
|
node.isExpanded = !node.isExpanded |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1009 B |
|
After Width: | Height: | Size: 524 B |
|
After Width: | Height: | Size: 1021 B |
Loading…
Reference in new issue