[新增]左侧预案列表修改预案名称和级别弹窗

src/app/ui/plan-template/plan-template.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-19 15:50:20
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-05-20 17:03:52
+ * @LastEditTime: 2021-05-21 16:56:26
 -->
 <div class="box">
     <div class="boxleft">
@@ -18,17 +18,27 @@
             </div>
         </div>
         <div class="leftbox">
-            <div class="leftbody" *ngFor="let item of newleftTabledata">
+            <div class="leftbody" [ngClass]="{'selectedTr': item.name == planName}" *ngFor="let item of newleftTabledata;let i=index" (click)='planClick(item)'>
                 <div class="bodyname">
                     <span>{{item.name}}</span>
                 </div>
                 <div class="bodycz">
                     <span>{{item.level}}</span>
-                    <img src="../../../assets/images/updatehui.png">
-                    <img src="../../../assets/images/deletehui.png">
+                    <img  [src]="item.name == planName? '../../../assets/images/update.png':'../../../assets/images/updatehui.png'" (click)='upPlan(item,i)'>
+                    <img  [src]="item.name == planName? '../../../assets/images/deleteblue.png':'../../../assets/images/deletehui.png'" (click)='deletePlan(i)'>
                 </div>
             </div>
         </div>
     </div>
-    <div class="boxright"></div>
+    <div class="boxright">
+        <div class="righthead">
+            <div class="rightheadone">
+                <span>{{planName}}</span>
+            </div>
+            <div class="rightheadtwo">
+                <button mat-raised-button color="primary">新增分组</button>
+            </div>
+        </div>
+        <div class="rightbody"></div>
+    </div>
 </div>

src/app/ui/plan-template/plan-template.component.scss

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-19 15:50:20
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-05-20 15:46:44
+ * @LastEditTime: 2021-05-21 16:55:49
  */
 .box{
     height: 97%;
@@ -22,12 +22,13 @@
             height: 50px;
             width: 100%;
             display: flex;
+            justify-content: space-between;
             border-bottom: 1px solid #F7F8FA;
             span{
                 font-size: 16px;
             }
             .leftheadone{
-                width: 40%;
+                width: 60%;
                 height: 100%;
                 span{
                     margin: 10px 10px;
@@ -36,19 +37,19 @@
                 }
             }
             .leftheadtwo{
-                width: 20%;
+                width: 30%;
                 height: 100%;
-                margin-left: 50%;
                 cursor: pointer;
                 img{
                     position: relative;
                     top: 2px;
                 }
                 span{
-                    //margin-left: 70%;
+                    margin-left: 2px;
                     //margin: 10px 10px;
                     height: 50px;
                     line-height: 50px;
+                    color: #2196F3;
                 }
             }
         }
@@ -57,13 +58,21 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+            .selectedTr{
+                background-color: #E1F1FF;
+                span{
+                    color: #2196F3;
+                }
+            }
             .leftbody{
                 width: 100%;
                 height: 40px;
                 display: flex;
+                justify-content: space-between;
+                cursor: pointer;
                 .bodyname{
                     height: 40px;
-                    width: 60%;
+                    width: 70%;
                     span{
                         font-size: 16px;
                         height: 40px;
@@ -73,16 +82,17 @@
                 }
                 .bodycz{
                     height: 40px;
-                    width: 40%;
+                    width: 30%;
                     img{
                         margin-left: 10px;
+                        cursor: pointer;
                     }
                     span{
                         color: #B2BEC7;
                         font-size: 16px;
                         height: 40px;
                         line-height: 40px;
-                        margin-left: 30%;
+                        //margin-left: 30%;
                     }
                 }
             }
@@ -93,5 +103,34 @@
         height: 100%;
         width: 78%;
         background-color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        .righthead{
+            height: 50px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid #F7F8FA;
+            span{
+                font-size: 16px;
+            }
+            .rightheadone{
+                width: 50%;
+                height: 100%;
+                span{
+                    margin: 10px 10px;
+                    height: 50px;
+                    line-height: 50px;
+                }
+            }
+            .rightheadtwo{
+                width: 50%;
+                height: 100%;
+                button{
+                    margin-left: 80%;
+                    margin-top: 5px;
+                }
+            }
+        }
     }
 }

src/app/ui/plan-template/plan-template.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-19 15:50:20
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-05-20 17:02:03
+ * @LastEditTime: 2021-05-21 16:27:07
  */
 import { Component, Inject, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
@@ -34,17 +34,57 @@ export class PlanTemplateComponent implements OnInit {
   }
   //新建预案弹窗
   addKeyunit(){
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
     const dialogRef = this.dialog.open(addPlanname, {//调用open方法打开对话框并且携带参数过去
       width: '340px',
       height:'330px',
-      disableClose:true
-      
+      disableClose:true,
+      data:{plandata:this.newleftTabledata}
     });
     dialogRef.afterClosed().subscribe(result => {
+      console.log(result)
+      if(result!=undefined){
         this.newleftTabledata.push(result)
-      console.log(this.newleftTabledata); 
+        for(var i=0;i<this.newleftTabledata.length-2;i++){
+          if(this.newleftTabledata[i].name==result.name){
+            this.newleftTabledata.splice(this.newleftTabledata.length-1,1)
+          }
+        }
+      }
     });
   }
+  //删除预案
+  deletePlan(i){
+    let isTrue = confirm('您确定要删除该条预案吗')
+    if(isTrue){
+      this.newleftTabledata.splice(i,1)
+    }
+    
+  }
+  //修改预案名称和级别
+  upPlan(item,i){
+    const dialogRef = this.dialog.open(upPlanname, {//调用open方法打开对话框并且携带参数过去
+      width: '340px',
+      height:'330px',
+      disableClose:true,
+      data:{item:item}
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result)
+      if(result!=undefined){
+        this.newleftTabledata[i].name=result.name
+        this.newleftTabledata[i].level=result.level
+      }
+    });
+  }
+  //左侧预案模板点击事件
+  planName
+  planClick(item){
+    console.log(item)
+    this.planName=item.name
+  }
 
 }
 //新建预案
@@ -57,11 +97,58 @@ export class addPlanname{
   constructor(private http: HttpClient,public dialogRef: MatDialogRef<addPlanname>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
   unitname//预案名称
   level//预案级别
+  ngOnInit(): void {
+    console.log(this.data)
+  }
   //取消按钮
   close(){
     this.dialogRef.close();
   }
   newplan(){
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    if(this.unitname==undefined||this.unitname==''){
+      this.snackBar.open('请输入预案名称!','确定',config);
+    }
+    else if(this.level==undefined||this.level==''){
+      this.snackBar.open('请输入预案级别!','确定',config);
+    }else{
+      for(var i=0;i<this.data.plandata.length;i++){
+        if(this.data.plandata[i].name==this.unitname){
+          this.snackBar.open('预案名称重复，请重新建立预案模板!','确定',config);
+          this.unitname==''
+          this.level==''
+        }
+      }
+      let planData={
+        name:this.unitname,
+        level:this.level
+      }
+      this.dialogRef.close(planData)
+    }
+  }
+}
+//修改预案名称和级别
+@Component({
+  selector: 'upPlanname',
+  templateUrl: './upPlan.html',
+  styleUrls: ['./addKeyname.scss']
+})
+export class upPlanname{
+  constructor(private http: HttpClient,public dialogRef: MatDialogRef<addPlanname>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
+  unitname=this.data.item.name//预案名称
+  level=this.data.item.level//预案级别
+  ngOnInit(): void{
+    /* this.unitname=this.data.name
+    this.level=this.data.level */
+  }
+  //取消按钮
+  close(){
+    this.dialogRef.close();
+  }
+  //确定按钮
+  upplan(){
     const config = new MatSnackBarConfig();
     config.verticalPosition = 'top';
     config.duration = 3000

src/app/ui/plan-template/upPlan.html

@@ -0,0 +1,43 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2021-05-21 10:43:28
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-05-21 11:05:14
+-->
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2021-05-20 16:11:57
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2021-05-20 17:05:21
+-->
+<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="请输入预案名称" name="companyName"  autocomplete="off" [(ngModel)]="unitname" required>
+        </mat-form-field>
+      </div>
+      
+      
+      <div class="queryField">
+        <label style="margin-right: 10px;">预案级别:</label>
+        <mat-form-field>
+            <mat-select placeholder='请选择预案级别' name="unittype" [(ngModel)]="level" required>
+              <mat-option value="Ⅲ级">Ⅲ级</mat-option>
+              <mat-option value="Ⅳ级">Ⅳ级</mat-option>
+              <mat-option value="Ⅴ级">Ⅴ级</mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+    <div class="bottom">
+        <button mat-raised-button color="primary" (click)='upplan()'>确定</button>
+        <button mat-raised-button style="margin-left: 50px;" (click)="close()">取消</button>
+    </div>
+  </div>

src/app/ui/ui.module.ts

@@ -86,6 +86,7 @@ import {CollectionToolsBuildingComponent,CreateBuildingBuilding,EditBuildingBuil
 import {leftFunctionalDomainBuildingComponent,editPlaneFigureBuildingComponent} from './collection-tools-building/leftFunctionalDomain';
 import { PlanTemplateComponent } from './plan-template/plan-template.component'
 import { addPlanname } from './plan-template/plan-template.component'
+import { upPlanname } from './plan-template/plan-template.component'
 @NgModule({
   declarations: [UiComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,
     IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,CreateOrganization,EditOrganization,
@@ -96,7 +97,7 @@ import { addPlanname } 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],
+    EditBuildingBuilding,leftFunctionalDomainBuildingComponent,editPlaneFigureBuildingComponent,Organization, PlanTemplateComponent,addPlanname,upPlanname],
 
   imports: [
     CommonModule,