shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[修改]预案模板页面样式跟编辑逻辑修改

tangshan
陈敬瑜 3 years ago
parent
9e9e42ee83
commit
e40d065b37
6 changed files with 268 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  2. 67
      src/app/ui/plan-template/plan-template.component.html
  3. 28
      src/app/ui/plan-template/plan-template.component.scss
  4. 151
      src/app/ui/plan-template/plan-template.component.ts
  5. 34
      src/app/ui/plan-template/updatal.html
  6. 3
      src/app/ui/ui.module.ts

8
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
Unescape View File

@ -806,7 +806,7 @@
<div class="building" *ngIf="element.surveyName=='单位基本信息'||element.surveyName=='建筑信息'">
<div *ngFor="let info of element.attinf;let infoi=index">
<div *ngIf="info.completed" class="onetext">
<input type="text" placeholder="请输入内容" style="width: 30%;background-color: #F9F9F9;text-align: center;" [(ngModel)]="info.propertyName" *ngIf="pattern == 'edit'">
<input type="text" placeholder="请输入内容" style="width: 30%;background-color: #F9F9F9;text-align: center;" [(ngModel)]="info.propertyName" *ngIf="pattern == 'edit'" [readonly]='info.zdy==undefined'>
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #FFFFFF;" [(ngModel)]="info.value" *ngIf="pattern == 'edit'">
<!-- <input type="text" style="width: 30%;background-color: #FFFFFF;color: #999;" [(ngModel)]="info.olddata" *ngIf="pattern == 'edit'&&oldData" readonly> -->
<!-- <span style="width: 30%;background-color: #FFFFFF;color: #999;" *ngIf="pattern == 'edit'&&oldData">{{info.olddata||'无原数据'}}</span> -->
@ -838,7 +838,7 @@
width: 100%;
background-color: #FFFBE8;
text-align: center;">
<input type="text" placeholder="请输入内容" [(ngModel)]="attack.name">
<input type="text" placeholder="请输入内容" [(ngModel)]="attack.name" [readonly]='attack.zdy==undefined'>
<img src="../../../assets/images/delyello.png" *ngIf="pattern == 'edit'&&attack.zdy!=undefined"
(click)='unitDel(element.surveyName,uniti,attacki)'>
<img src="../../../assets/images/addyello.png"
@ -848,7 +848,7 @@
<div class="fileBody">
<div *ngFor="let info of attack.facilityItems;let filenum=index">
<div *ngIf="info.completed" class="onetext">
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #F9F9F9;text-align: center;" [(ngModel)]="info.name" *ngIf="pattern == 'edit'">
<input type="text" placeholder="请输入内容" style="width: 40%;background-color: #F9F9F9;text-align: center;" [(ngModel)]="info.name" *ngIf="pattern == 'edit'" [readonly]='info.zdy==undefined'>
<input type="text" placeholder="请输入内容" style="width: 57%;background-color: #FFFFFF;" [(ngModel)]="info.value" *ngIf="pattern == 'edit'">
<img src="../../../assets/images/deletered.png" *ngIf="pattern == 'edit'&&info.zdy" (click)='unitDel(element.surveyName,uniti,attacki,filenum)'>
<table *ngIf="pattern == 'look'" style="width: 100%;border-collapse: collapse;">
@ -876,7 +876,7 @@
<!-- 四周毗邻 -->
<div class="fouradj" *ngIf="element.surveyName=='四周毗邻'">
<div class="fourTexttwo" *ngFor="let info of element.attinf;let infoi=index">
<input type="text" placeholder="请输入内容" style="width: 30%;background-color: #F9F9F9;text-align: center;" [(ngModel)]="info.name" *ngIf="pattern == 'edit'">
<input type="text" placeholder="请输入内容" style="width: 30%;background-color: #F9F9F9;text-align: center;" [(ngModel)]="info.name" *ngIf="pattern == 'edit'" [readonly]='info.zdy==undefined'>
<input type="text" placeholder="请输入内容" style="width: 65%;background-color: #FFFFFF;" [(ngModel)]="info.value" *ngIf="pattern == 'edit'">
<img style="position: relative;bottom: 30px;left: 347px;" src="../../../assets/images/deletered.png" (click)='unitDel(element.surveyName,uniti,infoi)' *ngIf="pattern == 'edit'&&info.zdy">
<table *ngIf="pattern == 'look'" style="width: 100%;border-collapse: collapse;">

67
src/app/ui/plan-template/plan-template.component.html
Unescape View File

@ -65,7 +65,7 @@
<span style="margin-left: 2px;">自定义</span>
</div>
<div *ngIf="item.groupName!='预案附件'&&item.groupName!='交通水源'&&item.groupName!='重点图示'" class="addinfo" (click)='addAttribute(zi,item.groupName)'>
<img src="../../../assets/images/update.png" style="height: 15px;margin-top: 4px;margin-left: 5px;">
<img [src]="item.groupName=='单位概况'?'../../../assets/images/update.png':'../../../assets/images/add.png'" style="height: 15px;margin-top: 4px;margin-left: 5px;">
<span style="margin-left: 2px;">{{item.groupName=='单位概况'?'编辑':'新增'}}</span>
</div>
<div class="delinfo" (click)='deleteGroup(item.groupName)'>
@ -212,7 +212,19 @@
<div class="attack" *ngFor="let attackitem of element.attinf;let i=index">
<div class="attackLeft">
<div class="attackleftHead">
<div class="headName">
<input type="text" [(ngModel)]='attackitem.head' placeholder="请输入内容">
</div>
<div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" (click)='threeTop(zi,suri,i)'>
<img src="../../../assets/images/downpaixu.png" alt="" (click)='threeDown(zi,suri,i)'>
<button mat-raised-button color="primary" style="margin-left: 10px;" (click)='updataHl(zi,suri,i)'><img
src="../../../assets/images/updatabai.png"> 编辑</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img
src="../../../assets/images/deletehui.png"> 删除</button>
</div>
</div>
<div class="attackleftTable">
<table>
@ -223,17 +235,7 @@
</table>
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;margin-right: 2px;position: relative;top: 2px;" (click)='threeTop(zi,suri,i)'>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;margin-right: 5px;position: relative;top: 2px;" (click)='threeDown(zi,suri,i)'>
<button mat-raised-button color="primary" (click)='attackAdd(element.surveyName,i,8)'><img
src="../../../assets/images/addbai.png"> 新增</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img
src="../../../assets/images/deletehui.png"> 删除</button>
</div>
</div>
</div>
</div>
<!--自定义属性-->
@ -241,8 +243,19 @@
<div class="attack" *ngFor="let zdy of element.attinf;let attributei=index">
<div class="attackLeft">
<div class="attackleftHead">
<div class="headName">
<input type="text" placeholder="请输入内容" [(ngModel)]="zdy.headName">
</div>
<div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 3px;" (click)='adyTop(suri,attributei)'>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 3px;left: 1px;margin-right: 5px;" (click)='adyDown(suri,attributei)'>
<button mat-raised-button color="primary" (click)='updataHl(zi,suri,attributei)'
*ngIf="zdy.level==1||zdy.level==2"><img src="../../../assets/images/updatabai.png"> 编辑</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='zdyDelDisaster(suri,attributei)'><img src="../../../assets/images/deletehui.png">
删除</button>
</div>
</div>
<div class="attackleftTable">
<!--表格类型-->
<table *ngIf="zdy.level==1">
@ -271,17 +284,6 @@
</div> -->
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 3px;" (click)='adyTop(suri,attributei)'>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 3px;left: 1px;margin-right: 5px;" (click)='adyDown(suri,attributei)'>
<button mat-raised-button color="primary" (click)='zdyattackAdd(suri,attributei,zdy.level)'
*ngIf="zdy.level==1"><img src="../../../assets/images/addbai.png"> 新增</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='zdyDelDisaster(suri,attributei)'><img src="../../../assets/images/deletehui.png">
删除</button>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
@ -292,8 +294,20 @@
<div class="attack" *ngFor="let element of item.attribute;let attributei=index">
<div class="attackLeft">
<div class="attackleftHead">
<div class="headName">
<input type="text" placeholder="请输入内容" [(ngModel)]="element.headName">
</div>
<div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 3px;left: 1px;" (click)='zaiTop(zi,attributei)'>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 3px;margin-left: 5px;" (click)='zaiDown(zi,attributei)'>
<button mat-raised-button color="primary" style="margin-left: 15px;" (click)='updataHl(zi,attributei)'
*ngIf="element.level==1||element.level==2"><img src="../../../assets/images/updatabai.png"> 编辑</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png">
删除</button>
</div>
</div>
<div class="attackleftTable">
<!--表格类型-->
<table *ngIf="element.level==1">
@ -322,8 +336,7 @@
</div> -->
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<!-- <div class="rightButton">
<img src="../../../assets/images/toppaixu.png" alt="" style="height: 15px;position: relative;top: 3px;" (click)='zaiTop(zi,attributei)'>
<img src="../../../assets/images/downpaixu.png" alt="" style="height: 15px;position: relative;top: 3px;left: 1px;margin-right: 5px;" (click)='zaiDown(zi,attributei)'>
<button mat-raised-button color="primary" (click)='attackAdd(item.groupName,attributei,element.level)'
@ -331,8 +344,8 @@
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png">
删除</button>
</div>
</div>
</div> -->
</div>
</div>
</mat-expansion-panel>

28
src/app/ui/plan-template/plan-template.component.scss
Unescape View File

@ -253,15 +253,18 @@
display: flex;
flex-direction: row;
.attackLeft {
width: 70%;
width: 100%;
display: flex;
flex-direction: column;
.attackleftHead {
width: 100%;
height: 40px;
height: 50px;
//background-color: #ffd91d;
background-color: #FFFBE8;
opacity: 0.7;
display: flex;
.headName{
width: 80%;
height: 100%;
input {
background-color: #FFFBE8;
color: #B99A00;
@ -273,6 +276,24 @@
outline: none;
}
}
.rightButton{
height: 100%;
width: 20%;
float: right;
cursor: pointer;
img{
line-height: 50px;
}
button{
font-size: 16px;
margin-top: 8px;
}
/* margin-top: 20px;
margin-right: 8%; */
//margin-left: 40%;
}
}
.attackleftTable {
width: 100%;
thead,
@ -316,6 +337,7 @@
}
}
}
}
.attackRight {
width: 30%;

151
src/app/ui/plan-template/plan-template.component.ts
Unescape View File

@ -855,6 +855,126 @@ export class PlanTemplateComponent implements OnInit {
}
}
////修改多行文本，表格行列数量
updataHl(...num:number[]){
const dialogRef = this.dialog.open(updataHl, {//调用open方法打开对话框并且携带参数过去
width: '340px',
height:'350px',
disableClose:true,
data:JSON.parse(JSON.stringify(num.length<=2? this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]]:this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]]))
});
dialogRef.afterClosed().subscribe(result => {
if(result!=undefined){
if(num.length<=2){
//外层四种类型编辑行跟列
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].level==1){
//表格类型编辑列数
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tabletr==undefined){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tabletr = []
}
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.length<result.lieNumber){
//表格类型新增列数
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.length;i<result.lieNumber;i++){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.push('')
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tabletr!=undefined){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tabletr.forEach(element => {
element.tabletd.push('')
});
}
}
}else{
//表格类型减少列数
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.length;i>result.lieNumber;i--){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.splice(i-1,1)
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tabletr!=undefined){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tabletr.forEach((element) => {
element.tabletd.splice(element.tabletd.length-1,1)
});
}
}
}
}else if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].level==2){
//多行文本编辑行列
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.length<result.hNumber){
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.length;i<result.hNumber;i++){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.push([{body: '', head: ''}])
}
}else{
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.length;i>result.hNumber;i--){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.splice(i-1,1)
}
}
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].tableth.forEach((element,index,value) => {
if(value[index].length<result.lieNumber){
for(let a=value[index].length;a<result.lieNumber;a++){
value[index].push({body: '', head: ''})
}
}else{
for(let a=value[index].length;a>result.lieNumber;a--){
value[index].splice(index-1,1)
}
}
});
}
}else if(num.length<=3){
//进攻通道跟单位概况自定义
//表格类型编辑列数
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].level==1||this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].level==undefined){
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.length<result.lieNumber){
//表格类型新增列数
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.length;i<result.lieNumber;i++){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.push('')
/* if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tabletr!=undefined){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tabletr.forEach(element => {
element.tabletd.push('')
});
} */
}
}else{
//表格类型减少列数
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.length;i>result.lieNumber;i--){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.splice(i-1,1)
}
}
}
else if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].level==2){
//多行文本编辑行列
if(this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.length<result.hNumber){
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.length;i<result.hNumber;i++){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.push([{body: '', head: ''}])
}
}else{
for(let i=this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.length;i>result.hNumber;i--){
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.splice(i-1,1)
}
}
this.newleftTabledata[this.leftclicki].data[num[0]].attribute[num[1]].attinf[num[2]].tableth.forEach((element,index,value) => {
if(value[index].length<result.lieNumber){
for(let a=value[index].length;a<result.lieNumber;a++){
value[index].push({body: '', head: ''})
}
}else{
for(let a=value[index].length;a>result.lieNumber;a--){
value[index].splice(index-1,1)
}
}
});
}
}
console.log(this.newleftTabledata)
}
});
}
}
//新建预案
@Component({
@ -1370,3 +1490,34 @@ export class disaster{
}
}
//修改表格跟多行文本
@Component({
selector: 'updataHl',
templateUrl: './updatal.html',
styleUrls: ['./addKeyname.scss']
})
export class updataHl{
constructor(private http: HttpClient,public dialogRef: MatDialogRef<updataHl>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
ngOnInit(): void{
JSON.parse(JSON.stringify(this.data))
this.level=this.data.level
console.log(this.data,this.level)
}
level//类型
headName=this.data.headName||this.data.head//表头名称
lieNumber=this.data.zdy!=undefined?0:this.data.lieNumber//最小列数
hNumber=this.data.zdy!=undefined?0:this.data.hNumber//行数
//取消按钮
close(){
this.dialogRef.close();
}
//确定按钮
newdisaster(){
console.log(this.data)
let result={
lieNumber:this.level==2? this.data.tableth[0].length:this.data.tableth.length,
hNumber:this.data.tableth.length
}
this.dialogRef.close(result);
}
}

34
src/app/ui/plan-template/updatal.html
Unescape View File

@ -0,0 +1,34 @@
<div class="box">
<div class="top">
<span style="font-size: 20px;">修改内容</span>
</div>
<div class="queryField">
<label style="margin-right: 10px;">名称:</label>
<!-- <mat-form-field class="example-full-width">
<input matInput placeholder="请输入表头名称" [(ngModel)]="headName" autocomplete="off" readonly>
</mat-form-field> -->
<span>{{headName}}</span>
</div>
<div class="queryField" *ngIf="level==1||level==undefined">
<label style="margin-right: 10px;">列数:</label>
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="data.tableth.length" autocomplete="off" required min="0">
</mat-form-field>
</div>
<div class="queryField" *ngIf="level==2">
<label style="margin-right: 10px;">列数:</label>
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="data.tableth[0].length" autocomplete="off" required min="0">
</mat-form-field>
</div>
<div class="queryField" *ngIf="level==2">
<label style="margin-right: 10px;">行数:</label>
<mat-form-field class="example-full-width">
<input matInput type="number" [(ngModel)]="data.tableth.length" autocomplete="off" required min="0">
</mat-form-field>
</div>
<div class="bottom">
<button mat-raised-button color="primary" (click)='newdisaster()'>确定</button>
<button mat-raised-button style="margin-left: 50px;" (click)='close()'>取消</button>
</div>
</div>

3
src/app/ui/ui.module.ts
Unescape View File

@ -96,6 +96,7 @@ import { TreeDiagramModule } from './ng-tree-diagram/src/ng-tree-diagram';
import { zdyaddGroup } from './plan-template/plan-template.component'
import { zdyaddattinf } from './plan-template/plan-template.component'
import { zdydisaster } from './plan-template/plan-template.component'
import { updataHl} from './plan-template/plan-template.component'
@NgModule({
declarations: [UiComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,
@ -107,7 +108,7 @@ import { zdydisaster } from './plan-template/plan-template.component'
addBuiltInAttributeComponent, addOptionalComponent, addOptionalAttributeComponent, editBuiltInAttributeComponent, editOptionalAttributeComponent, CollectionToolsComponent, WorkingAreaComponent,
CreateBuilding, EditBuilding, leftFunctionalDomainComponent, editPlaneFigureComponent, saveOneDialog, saveTwoDialog, addDisposalNodeComponent, editDisposalNodeComponent, CollectionToolsPlanComponent,
CreateBuildingPlan, EditBuildingPlan, leftFunctionalDomainComponentPlan, editPlaneFigureComponentPlan, addOffices, editOffices, addBGCDisposalNodeComponent, CollectionToolsBuildingComponent, CreateBuildingBuilding,
EditBuildingBuilding, leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent, Organization, PlanTemplateComponent, addPlanname, upPlanname, addGroup, adddwsurvey, addattinf,disaster,zdyaddGroup,zdyaddattinf,zdydisaster],
EditBuildingBuilding, leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent, Organization, PlanTemplateComponent, addPlanname, upPlanname, addGroup, adddwsurvey, addattinf,disaster,zdyaddGroup,zdyaddattinf,zdydisaster,updataHl],
imports: [
CommonModule,

Write Preview
Loading…
Cancel
Save