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