13 changed files with 525 additions and 28 deletions
@ -0,0 +1,29 @@
|
||||
import { MatPaginatorIntl } from '@angular/material/paginator'; |
||||
|
||||
|
||||
const dutchRangeLabel = (page: number, pageSize: number, length: number) => { |
||||
if (length === 0 || pageSize === 0) { return `0 到 ${length}`; } |
||||
length = Math.max(length, 0); |
||||
const startIndex = page * pageSize; |
||||
const endIndex = startIndex < length ? |
||||
Math.min(startIndex + pageSize, length) : |
||||
startIndex + pageSize; |
||||
return `${startIndex + 1} - ${endIndex} / ${length}条`; |
||||
|
||||
} |
||||
|
||||
export function myPaginator() { |
||||
|
||||
const paginatorIntl = new MatPaginatorIntl(); |
||||
|
||||
paginatorIntl.itemsPerPageLabel = '每页条数:'; |
||||
|
||||
paginatorIntl.nextPageLabel = '下一页:'; |
||||
|
||||
paginatorIntl.previousPageLabel = '上一页:'; |
||||
|
||||
paginatorIntl.getRangeLabel = dutchRangeLabel; |
||||
|
||||
return paginatorIntl; |
||||
|
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
<div mat-dialog-title>创建建筑功能分区</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑名称:"> |
||||
<mat-option *ngFor="let item of data" [value]="item.id"> |
||||
{{item.name}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<p style="font-size: 14px;" *ngIf="!data.length">暂无数据,请您创建基本信息建筑模块</p> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,106 @@
|
||||
<div class="content"> |
||||
<div style="margin-top:16px"> |
||||
<!-- <mat-icon title="创建" (click)='addPartition()'>add_circle_outline</mat-icon> --> |
||||
</div> |
||||
|
||||
<mat-tab-group class="tableContent"> |
||||
|
||||
<mat-tab label="单位功能分区"> |
||||
<div style="overflow: auto; height: 100%;"> |
||||
<div style="margin: 30px 0 25px 5%;"> |
||||
<!-- <mat-icon title="创建" (click)='addCompany()'>add_circle_outline</mat-icon> |
||||
<mat-icon title="保存" style="margin-left: 25px;" (click)='preservation()'>description</mat-icon> |
||||
<mat-icon title="删除" style="margin-left: 25px;" (click)='delete()'>delete</mat-icon> --> |
||||
</div> |
||||
<table mat-table [dataSource]="companyFunctionalZoning"> |
||||
|
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-checkbox disabled (change)='changeCompany(element,$event)'></mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="region"> |
||||
<th mat-header-cell *matHeaderCellDef>区域</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput [(ngModel)]="element.region" type="text" maxlength="20"> |
||||
</mat-form-field> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="measure"> |
||||
<th mat-header-cell *matHeaderCellDef>面积</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput type="number" [(ngModel)]="element.area" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入数字"> |
||||
</mat-form-field> |
||||
<label style="margin-left: 5px;">m²</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="situation"> |
||||
<th mat-header-cell *matHeaderCellDef>基本情况</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<textarea readonly [(ngModel)]="element.details" maxlength="250"></textarea> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<p style="width: 100%; margin-top: 30px; text-align: center;" *ngIf="!companyFunctionalZoning.length">暂无数据</p> |
||||
</div> |
||||
</mat-tab> |
||||
|
||||
<mat-tab label="{{item.name}}" *ngFor="let item of allBuildingFunctionalZoning;let key = index"> |
||||
<div style="overflow: auto; height: 100%;"> |
||||
<div style="margin: 30px 0 25px 5%;"> |
||||
<!-- <mat-icon title="创建" (click)='addBuilding(item,key)'>add_circle_outline</mat-icon> |
||||
<mat-icon title="保存" (click)='preservationBuilding(item,key)' style="margin-left: 25px;">description</mat-icon> |
||||
<mat-icon title="删除" (click)='deleteBuilding(item,key)' style="margin-left: 25px;">delete</mat-icon> --> |
||||
</div> |
||||
<table mat-table [dataSource]="item.functionalZoning"> |
||||
|
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-checkbox disabled (change)='changeBuilding(element,$event,key)'></mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="region"> |
||||
<th mat-header-cell *matHeaderCellDef>区域</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput [(ngModel)]="element.region" type="text" maxlength="20"> |
||||
</mat-form-field> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="measure"> |
||||
<th mat-header-cell *matHeaderCellDef>面积</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-form-field class="example-full-width"> |
||||
<input readonly matInput type="number" [(ngModel)]="element.area" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入数字"> |
||||
</mat-form-field> |
||||
<label style="margin-left: 5px;">m²</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="situation"> |
||||
<th mat-header-cell *matHeaderCellDef>基本情况</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<textarea readonly [(ngModel)]="element.details" maxlength="250"></textarea> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
</mat-tab> |
||||
|
||||
</mat-tab-group> |
||||
</div> |
||||
@ -0,0 +1,32 @@
|
||||
.content { |
||||
width: 100%; |
||||
height: 90%; |
||||
overflow-y: auto; |
||||
padding: 10px 0 0 10px; |
||||
display: flex; |
||||
} |
||||
.tableContent { |
||||
margin-left: 10px; |
||||
width: 100%; |
||||
height: 100%; |
||||
table { |
||||
width: 90%; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
textarea { |
||||
border-radius: 5px; |
||||
padding: 5px; |
||||
width: 80%; |
||||
height: 36px; |
||||
resize: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
//icon统一样式 |
||||
.mat-icon { |
||||
cursor:pointer; |
||||
} |
||||
@ -0,0 +1,248 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { Router,ActivatedRoute } from '@angular/router'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-function-division-look', |
||||
templateUrl: './function-division.component.html', |
||||
styleUrls: ['./function-division.component.scss'] |
||||
}) |
||||
export class FunctionDivisionLookComponent implements OnInit { |
||||
|
||||
constructor(private router:Router,private route:ActivatedRoute,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.companyId = this.route.snapshot.queryParams.id |
||||
this.getAllCompany() |
||||
this.getAllBuilding() |
||||
} |
||||
|
||||
displayedColumns: string[] = ['checked', 'region', 'measure', 'situation']; |
||||
|
||||
companyId:any; //单位编号
|
||||
companyFunctionalZoning:any=[]; //所有单位功能分区属性
|
||||
selectFunctionalZoning:any=[]; //选中的单位功能分区属性
|
||||
|
||||
//获得所有单位功能分区属性
|
||||
getAllCompany () { |
||||
let companyId = this.route.snapshot.queryParams.id |
||||
this.http.get('/api/CompanyFunctionalDivisions',{params:{ |
||||
companyId:companyId |
||||
}}).subscribe((data:any)=>{ |
||||
this.companyFunctionalZoning = data |
||||
this.selectFunctionalZoning = [] |
||||
}) |
||||
} |
||||
|
||||
//新建单位功能分区属性
|
||||
addCompany () { |
||||
let companyId = this.route.snapshot.queryParams.id |
||||
let data = {companyId:companyId, region:'', area:0, details:''} |
||||
this.companyFunctionalZoning.push(data) |
||||
this.preservation() |
||||
} |
||||
|
||||
//保存单位功能分区属性
|
||||
preservation () { |
||||
let companyId = this.route.snapshot.queryParams.id |
||||
// console.log(123,companyId)
|
||||
if (this.companyFunctionalZoning.length) { |
||||
this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ |
||||
companyId:companyId |
||||
}}).subscribe(data=>{ |
||||
this.getAllCompany() |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('数据更新成功','确定',config); |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//单位功能分区checked选择
|
||||
changeCompany (ele,e) { |
||||
if (e.checked) { |
||||
this.selectFunctionalZoning.push(ele.id) |
||||
} else { |
||||
this.selectFunctionalZoning.splice(this.selectFunctionalZoning.findIndex(item => item === ele.id), 1) |
||||
} |
||||
} |
||||
|
||||
//删除单位功能分区属性
|
||||
delete () { |
||||
let companyId = this.route.snapshot.queryParams.id |
||||
if (this.selectFunctionalZoning.length) { |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
this.http.post('/api/CompanyFunctionalDivisions/Batch',this.companyFunctionalZoning,{params:{ |
||||
companyId:companyId |
||||
}}).subscribe(data=>{ |
||||
const options = { |
||||
headers: new HttpHeaders({'Content-Type': 'application/json',}), |
||||
body:this.selectFunctionalZoning} |
||||
this.http.delete(`/api/CompanyFunctionalDivisions/Batch`,options).subscribe(data=>{ |
||||
this.getAllCompany() |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('数据更新成功','确定',config); |
||||
}) |
||||
}) |
||||
} |
||||
} else if (!this.selectFunctionalZoning.length) { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择单位功能分区','确定',config); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//建筑功能分区↓
|
||||
allBuilding:any = []; //所有建筑
|
||||
allBuildingFunctionalZoning:any = []; //所有建筑的功能分区
|
||||
selectBuildingFunctionalZoning:any = []; //选中的建筑的功能分区
|
||||
|
||||
//获得所有建筑
|
||||
getAllBuilding () { |
||||
let companyId = this.route.snapshot.queryParams.id |
||||
this.http.get(`/api/Buildings`,{params:{ |
||||
companyId:companyId |
||||
}}).subscribe((data:any)=>{ |
||||
if (data.length) { |
||||
this.allBuilding = data |
||||
this.allBuilding.forEach(element => { //为每个建筑添加一个 功能分区对象
|
||||
element.functionalZoning = null |
||||
}); |
||||
this.getAllBuildingFunctionalZoning() |
||||
} |
||||
}) |
||||
} |
||||
|
||||
//获得所有建筑的功能分区
|
||||
getAllBuildingFunctionalZoning () { |
||||
this.selectBuildingFunctionalZoning = [] |
||||
this.allBuildingFunctionalZoning = [] |
||||
this.allBuilding.forEach(element => { |
||||
let data={buildingId: element.id} |
||||
this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ |
||||
if (data.length) { |
||||
element.functionalZoning = data |
||||
this.selectBuildingFunctionalZoning.push([]) //拥有建筑功能分区的提前push空数组
|
||||
this.allBuildingFunctionalZoning.push(element) } |
||||
}) |
||||
}); |
||||
} |
||||
|
||||
//封装函数刷新当前建筑功能分区
|
||||
updateCurrent (e,index) { |
||||
let data= {buildingId: e.id} |
||||
this.http.get(`/api/BuildingFunctionalDivisions`,{params:data}).subscribe((data:any)=>{ |
||||
this.selectBuildingFunctionalZoning[index] = [] |
||||
this.allBuildingFunctionalZoning[index].functionalZoning = data |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('数据更新成功','确定',config); |
||||
}) |
||||
} |
||||
|
||||
//创建建筑功能分区
|
||||
addPartition () { |
||||
} |
||||
|
||||
//创建建筑功能分区属性
|
||||
addBuilding (e,index) { |
||||
let data = {buildingId:e.id, region:'', area:0, details:''} |
||||
this.http.post('/api/BuildingFunctionalDivisions',data).subscribe(data=>{ |
||||
this.preservationBuilding(e,index) |
||||
}) |
||||
} |
||||
|
||||
//保存建筑功能分区属性
|
||||
preservationBuilding (e,index) { |
||||
let data ={buildingId:e.id} |
||||
this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ |
||||
this.updateCurrent(e,index) |
||||
}) |
||||
} |
||||
|
||||
//建筑功能分区checked选择
|
||||
changeBuilding (ele,e,index) { |
||||
if (e.checked) { |
||||
this.selectBuildingFunctionalZoning[index].push(ele.id) |
||||
} else { |
||||
this.selectBuildingFunctionalZoning[index].splice(this.selectBuildingFunctionalZoning[index].findIndex(item => item === ele.id), 1) |
||||
} |
||||
} |
||||
|
||||
//删除建筑功能分区
|
||||
deleteBuilding (e,index) { |
||||
if (this.selectBuildingFunctionalZoning[index].length) { |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
let data ={buildingId:e.id} |
||||
this.http.post(`/api/BuildingFunctionalDivisions/Batch`,this.allBuildingFunctionalZoning[index].functionalZoning,{params:data}).subscribe(data=>{ |
||||
const options = { |
||||
headers: new HttpHeaders({'Content-Type': 'application/json',}), |
||||
body:this.selectBuildingFunctionalZoning[index], |
||||
params:{buildingId:e.id}} |
||||
this.http.delete(`/api/BuildingFunctionalDivisions/Batch`,options).subscribe(data=>{ |
||||
this.selectBuildingFunctionalZoning[index].forEach((element,newIndex) => { |
||||
this.allBuildingFunctionalZoning[index].functionalZoning.splice(this.allBuildingFunctionalZoning[index].functionalZoning.findIndex(item=>item.id==element),1) |
||||
if (newIndex==this.selectBuildingFunctionalZoning[index].length-1) { |
||||
if (this.allBuildingFunctionalZoning[index].functionalZoning.length) { |
||||
this.updateCurrent(e,index) |
||||
} else { |
||||
this.selectBuildingFunctionalZoning.splice(index,1) |
||||
this.allBuildingFunctionalZoning.splice(index,1)} |
||||
} |
||||
}); |
||||
|
||||
|
||||
}) |
||||
}) |
||||
} |
||||
} else if (!this.selectBuildingFunctionalZoning[index].length) { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择建筑功能分区','确定',config); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//暂时无用
|
||||
@Component({ |
||||
selector: 'app-addPartitionAttribute', |
||||
templateUrl: './addPartitionAttribute.html', |
||||
styleUrls: ['./function-division.component.scss'] |
||||
}) |
||||
export class addPartitionAttribute2 { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<addPartitionAttribute2>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
Loading…
Reference in new issue