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

<div class="bigbox">
    <div class="titlebox">
        <div class="titleitembox">
            <div class="item" [ngClass]="{'selectedItem': selectedItem == '封面'}" (click)="clickTitleItem('封面')">
                1.封面
            </div>
            <div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)"
                [ngClass]="{'selectedItem': selectedItem == item.groupName}">
                {{key + 2}}.{{item.groupName}}
            </div>
        </div>
        <div class="btnbox">
            <button mat-stroked-button>
                <mat-icon>visibility</mat-icon> 预览
            </button>
            <button mat-flat-button color="primary">
                <mat-icon>save</mat-icon> 提交
            </button>
        </div>
    </div>
    <div class="contentbox">
        <div class="leftbox">

        </div>
        <div class="mainbox">
            <!-- 封面 -->
            <div class="cover" *ngIf="selectedItem == '封面'">
                <p class="planNum">
                    预案编号: <input type="text" name="" id="">
                </p>
                <h1>{{planName}}</h1>
                <ul *ngIf="unitData">
                    <li>
                        <div>
                            对象名称：
                        </div>
                        <div>
                            {{unitData.name}}
                        </div>
                    </li>
                    <li>
                        <div>
                            单位性质：
                        </div>
                        <div>
                            {{unitData.buildingTypes[0].name}}
                        </div>
                    </li>
                    <li>
                        <div>
                            <span class="redspan">*</span>预案级别：
                        </div>
                        <div>
                            <ng-container *ngIf="planLevel == '5'; else elseTemplate">
                                Ⅴ级
                            </ng-container>
                            <ng-template #elseTemplate>
                                Ⅲ级
                            </ng-template>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span class="redspan">*</span>灾害类型：
                        </div>
                        <div>
                            <select ngModel="0">
                                <option value="0">火灾</option>
                                <option value="1">抢险救援</option>
                                <option value="2">其他</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <div>
                            防火级别：
                        </div>
                        <div>

                        </div>
                    </li>
                    <li>
                        <div>
                            防火管辖：
                        </div>
                        <div>
                            {{unitData.organizationName}}
                        </div>
                    </li>
                    <li>
                        <div>
                            灭火责任队站：
                        </div>
                        <div>

                        </div>
                    </li>
                    <li>
                        <div>
                            制作人职务/姓名：
                        </div>
                        <div>
                            <input type="text" style="width: 160px;margin-right: 10px;">
                            <input type="text" style="width: 50px;">
                        </div>
                    </li>
                    <li>
                        <div>
                            审核人职务/姓名：
                        </div>
                        <div>

                        </div>
                    </li>
                    <li>
                        <div>
                            审核时间：
                        </div>
                        <div>

                        </div>
                    </li>
                </ul>
            </div>
            <!-- 模板页面 -->
            <div *ngFor="let item of planTemplateData;let key = index">
                <div *ngIf="selectedItem == item.groupName">
                    <!-- <p>{{item.groupName}}</p> -->
                    <div class="centerBox" *ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'">
                        <div class="boxHead">
                            <span>{{item.groupName}}</span>
                        </div>
                        <div class="boxBody" *ngFor="let element of item.attribute">
                            <div class="boxBodyHead">
                                <span>{{element.headName}}</span>
                            </div>
                            <div class="body">
                                <!--表格类型-->
                                <table *ngIf="element.level==1">
                                  <thead>
                                     <th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"
                                       placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
                                  </thead>
                                </table>
                                <!--文本区域-->
                                <textarea style="width: 100%;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%;"
                                   *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
                                <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">
                                     <input type="text" placeholder="请输入内容" style="width: 60%;" [(ngModel)]="itemthj.body">
                                </div>
                               </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="keyImg" *ngIf="item.groupName == '重点图示'">
                        <div class="keyImgItem" *ngFor="let i of item.attribute;let key = index">
                            <div class="keyImgTitle">
                                <input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
                                <mat-icon class="deleteItem" *ngIf="key != 0" (click)="deleteItem(key)">delete</mat-icon>
                            </div>
                            <div class="keyImgImg">

                                <div class="uploadBtn">
                                    <button mat-stroked-button>
                                        <mat-icon>add</mat-icon>上传图片
                                    </button>
                                    <input (change)="filechange($event)" type="file" name="" id="">
                                </div>
                               
                            </div>
                            
                        </div>
                        <!-- 增加分组 -->
                        <div class="addkeyImgItem">
                            <button mat-flat-button color="primary" (click)="addkeyImgItem()">
                                增加分组
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightbox">

        </div>
    </div>
</div>