[新增]预案在线编制灾情设定表格输入框类型新增

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

@@ -125,9 +125,11 @@
                         <div class="boxHead">
                             <span>{{item.groupName}}</span>
                         </div>
-                        <div class="boxBody" *ngFor="let element of item.attribute">
+                        <div class="boxBody" *ngFor="let element of item.attribute;let i=index">
                             <div class="boxBodyHead">
                                 <span>{{element.headName}}</span>
+                                <img src="../../../assets/images/deleteblue.png" *ngIf="element.level==1" (click)='delTd(key,i)'>
+                                <img src="../../../assets/images/add.png" *ngIf="element.level==1" (click)='addTd(key,i)'>
                             </div>
                             <div class="body">
                                 <!--表格类型-->
@@ -136,14 +138,26 @@
                                      <th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"
                                        placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
                                   </thead>
+                                  <tbody>
+                                     <!--  <tr>
+                                          <td><input type="text"placeholder="请输入内容" ></td>
+                                          <td><input type="text"placeholder="请输入内容" ></td>
+                                          <td><input type="text"placeholder="请输入内容" ></td>
+                                      </tr> -->
+                                      <tr *ngFor="let itemtr of element.tabletr">
+                                          <td *ngFor="let itemtd of itemtr.tabletd;let tabletdi=index;TrackBy:trackByFn">
+                                              <input type="text" placeholder="请输入" [(ngModel)]="itemtr.tabletd[tabletdi]">
+                                          </td>
+                                      </tr>
+                                  </tbody>
                                 </table>
                                 <!--文本区域-->
-                                <textarea style="width: 100%;height: 100px;" *ngIf="element.level==3" [(ngModel)]="element.tableth"></textarea>
+                                <textarea style="width: 99%;height: 100px;" *ngIf="element.level==3" [(ngModel)]="element.tableth"></textarea>
                                 <!--输入框-->
-                            <div class="inputtext" *ngIf="element.level==2">
-                                <div class="inputj" style="height: 100%;width: 100%;"
+                                <div class="inputtext" *ngIf="element.level==2">
+                                  <div class="inputj" style="height: 100%;width: 100%;"
                                    *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
-                                <div style="height: 100%;width: 100%;"
+                                    <div style="height: 100%;width: 100%;"
                                    *ngFor="let itemthj of element.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
                                    <input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;"
                                       [(ngModel)]="itemthj.head">

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss

@@ -122,6 +122,7 @@
                 height: 100%;
                 display: flex;
                 flex-direction: column;
+                overflow-y: auto;
                 .boxHead{
                     height: 40px;
                     width: 100%;
@@ -153,6 +154,13 @@
                             line-height: 40px;
                             color: #B99A00;
                         }
+                        img{
+                            width: 20px;
+                            height: 20px;
+                            float: right;
+                            margin-top: 10px;
+                            margin-right: 10px;
+                        }
                     }
                     .body{
                         width: 100%;
@@ -182,6 +190,21 @@
                                 outline: none;
                             }
                         }
+                        td{
+                            border: 1px solid #999;
+                            height: 40px;
+                            font-size: 16px;
+                            text-align: center;
+                            input {
+                                background-color: #FFFFFF;
+                                text-align: center;
+                                height: 100%;
+                                width: 100%;
+                                font-size: 16px;
+                                border: none;
+                                outline: none;
+                            }
+                        }
                         .inputtext {
                             width: 100%;
                             height: 100%;

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

@@ -4,11 +4,12 @@
  * @Author: sueRimn
  * @Date: 2021-06-16 13:56:54
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-06-17 10:01:26
+ * @LastEditTime: 2021-06-17 15:15:17
  */
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-create-plan-online-five',
@@ -17,7 +18,7 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class CreatePlanOnlineFiveComponent implements OnInit {
 
-  constructor(private http: HttpClient, private route: ActivatedRoute) { }
+  constructor(private http: HttpClient, private route: ActivatedRoute,public snackBar: MatSnackBar) { }
 
 
   planName: string //预案名称
@@ -49,6 +50,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
 
   selectedItem: string = '封面'
   clickTitleItem(item) {
+    this.addNumber=-1
     item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
   }
   planTemplateData: any
@@ -65,6 +67,41 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
   trackByFn(index){
     return index
   }
+  //表格增加一行
+  addNumber=-1
+  addTd(key,i){
+    this.addNumber++
+    //this.planTemplateData[key].attribute[i].push({tabletr:[]})
+    if(this.planTemplateData[key].attribute[i].tabletr==undefined){
+      this.planTemplateData[key].attribute[i].tabletr=[]
+    }
+    this.planTemplateData[key].attribute[i].tabletr.push({tabletd:[]})
+    for(var j=0;j<this.planTemplateData[key].attribute[i].tableth.length;j++){
+      if(this.planTemplateData[key].attribute[i].tabletr!=undefined){
+        this.planTemplateData[key].attribute[i].tabletr[this.planTemplateData[key].attribute[i].tabletr.length-1].tabletd.push('')
+      }
+      else{
+        this.planTemplateData[key].attribute[i].tabletr[this.addNumber].tabletd.push('')
+      }
+    }
+    console.log(this.planTemplateData)
+  }
+  //表格删除一行
+  delTd(key,i){
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    if(this.planTemplateData[key].attribute[i].tabletr!=undefined){
+      this.planTemplateData[key].attribute[i].tabletr.splice(this.planTemplateData[key].attribute[i].tabletr.length-1,1)
+      this.addNumber--
+      if(this.planTemplateData[key].attribute[i].tabletr.length==0){
+        this.addNumber=-1
+      }
+    }else{
+      this.snackBar.open('请先增加一行!','确定',config);
+    }
+    
+  }
 
 }
 

src/app/plan-management/plan-management.module.ts

@@ -66,6 +66,7 @@ import { GkhtmlPsViewer } from './open-plan/open-plan.component';
 import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component';
 import { CreatePlanOnlineFiveComponent } from './create-plan-online-five/create-plan-online-five.component';
 import { CreatePlanOnlineThreeComponent } from './create-plan-online-three/create-plan-online-three.component'
+import { TreeDiagramModule } from '../ui/ng-tree-diagram/src/ng-tree-diagram';
 
 @NgModule({
   declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName,
@@ -117,7 +118,8 @@ import { CreatePlanOnlineThreeComponent } from './create-plan-online-three/creat
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
-    MatTreeModule
+    MatTreeModule,
+    TreeDiagramModule
   ],
   exports: [PlanType, AuditSatus, PlanLevel, state]
 })