zy-pc/src/app/views/inspection-configuration-item/inspection-configuration-item.component.html

<div class="inspectionConfigurationItem">
  <div class="list-template inspectionConfigurationItemTable">
    <div class="list-template__content">
      <div class="list-template__bottom">
        <div class="list-template__top" nz-row>
          <div nz-col nzXl='18' class="list-template__searchBox">
            <button nz-button class="btn default" (click)="goBack()">返回</button>
          </div>
          <div nz-col nzLg="6" class="list-template__btns">
            <button nz-button class="btn default" (click)="addModal()">新增巡检项</button>
          </div>
        </div>
        <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
          [nzLoading]="loading1"  [nzScroll]="{ y: tableHeight + 'px' }">
          <thead>
            <tr class="thead">
              <th nzWidth="13%">巡检项</th>
              <th nzWidth="13%">是否必填</th>
              <th nzWidth="13%">默认值</th>
              <th nzWidth="13%">排序号</th>
              <th nzWidth="13%">填写方式</th>
              <th nzWidth="13%">异常显示</th>
              <th nzWidth="22%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of listOfData;let i = index">
              <td>{{data.name}}</td>
              <td>{{data.required === 1 ? '是' : (data.required === 0 ? '否' : '')}}</td>
              <td>{{data.defaultValue}}</td>
              <td>{{data.orders}}</td>
              <td>{{data.type?.name}}</td>
              <td>{{data.showError === 1 ? '是' : (data.showError === 0 ? '否' : '')}}</td>
              <td>
                <div class="coop">
                  <span (click)="showDelModal(data,'您确认要删除吗？','删除','del')">删除</span>
                  <span (click)="edit(data)">编辑</span>
                  <span (click)="showModelInspectionConfigurationItem(data)" *ngIf="data.type.value === '1' || data.type.value === '2' || data.type.value === '3'">选择项配置</span>
                  <span (click)="showDelModal(data,'您确认要隐藏吗？','隐藏','hidden')" *ngIf="inspectionConfigurationDetail.status.value === '1' && data.display === 1">隐藏</span>
                  <span (click)="showDelModal(data,'您确认要显示吗？','显示','show')" *ngIf="inspectionConfigurationDetail.status.value === '1' && data.display === 0">显示</span>
                </div>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>

    <!-- 新增/编辑巡检项模态框 -->
    <div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="modal">
      <div class="modalBody">
        <div class="title">{{modelName}}巡检项<i class="icon_transport transport-guanbi" (click)="hideAddModal()"></i></div>
        <div class="content">
          <form nz-form [formGroup]="validateForm" class="addForm">
            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzRequired nzFor="name">巡检项名称</nz-form-label>
              <nz-form-control [nzSpan]="18" nzErrorTip="请输入巡检项名称!">
                <nz-input-group>
                  <input formControlName="name" nz-input placeholder="请输入巡检项名称">
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzRequired nzFor="orders">排&nbsp;&nbsp;&nbsp;序&nbsp;&nbsp;&nbsp;号</nz-form-label>
              <nz-form-control [nzSpan]="18" nzErrorTip="请输入排序号!">
                <nz-input-group>
                  <nz-input-number class="w100" formControlName="orders" nzPlaceHolder="请输入排序号" [nzMin]="0" [nzStep]="1" [nzPrecision]="0"></nz-input-number>
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzRequired nzFor="type">填&nbsp;写&nbsp;方&nbsp;式</nz-form-label>
              <nz-form-control [nzSpan]="18" nzErrorTip="请选择填写方式!">
                <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="type" nzShowSearch
                  nzPlaceHolder="请选择填写方式" nzServerSearch (ngModelChange)="changeType($event)">
                  <ng-container *ngFor="let data of dispatchMethods">
                    <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.value"></nz-option>
                  </ng-container>
                  <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                    <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="validateForm.value.type !== null && validateForm.value.type !== '8'">
              <nz-form-label [nzSpan]="6" nzRequired nzFor="required">是&nbsp;否&nbsp;必&nbsp;填</nz-form-label>
              <nz-form-control [nzSpan]="18" nzErrorTip="请选择是否必填!">
                <nz-radio-group formControlName="required">
                  <label nz-radio [nzValue]="1">是</label>
                  <label nz-radio [nzValue]="0">否</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
            <!-- 数值 -->
            <ng-container *ngIf="validateForm.value.type === '4'">
              <nz-form-item>
                <nz-form-label [nzSpan]="6" nzRequired nzFor="checkType">判&nbsp;断&nbsp;形&nbsp;式</nz-form-label>
                <nz-form-control [nzSpan]="18" nzErrorTip="请选择判断形式!">
                  <nz-radio-group formControlName="checkType" (ngModelChange)="changeCheckType($event)">
                    <label nz-radio [nzValue]="1">标准正负值</label>
                    <label nz-radio [nzValue]="2">范围值</label>
                  </nz-radio-group>
                </nz-form-control>
              </nz-form-item>
              <!-- 标准正负值 -->
              <ng-container *ngIf="validateForm.value.checkType == 1">
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzRequired nzFor="valuex">标&nbsp;&nbsp;&nbsp;准&nbsp;&nbsp;&nbsp;值</nz-form-label>
                  <nz-form-control [nzSpan]="18" nzErrorTip="请输入标准值!">
                    <nz-input-group>
                      <nz-input-number class="w100" formControlName="valuex" nzPlaceHolder="请输入标准值"></nz-input-number>
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzRequired nzFor="valueGap">正负范围值</nz-form-label>
                  <nz-form-control [nzSpan]="18" nzErrorTip="请输入正负范围值!">
                    <nz-input-group>
                      <nz-input-number class="w100" formControlName="valueGap" nzPlaceHolder="请输入正负范围值"></nz-input-number>
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </ng-container>
              <!-- 范围值 -->
              <ng-container *ngIf="validateForm.value.checkType == 2">
                <div class="form_item_wrap" nz-row>
                  <nz-form-item nz-col [nzSpan]="12">
                    <nz-form-label [nzSpan]="12" nzRequired nzFor="valueLow">范&nbsp;&nbsp;&nbsp;围&nbsp;&nbsp;&nbsp;值</nz-form-label>
                    <nz-form-control [nzSpan]="12" nzErrorTip="请输入最小值!">
                      <nz-input-group>
                        <nz-input-number formControlName="valueLow" nzPlaceHolder="最小值"></nz-input-number>
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                  <span nz-col [nzSpan]="2" style="display: flex;padding-top: 10px;justify-content: center;padding-right: 12px;">至</span>
                  <nz-form-item nz-col [nzSpan]="10">
                    <nz-form-label [nzSpan]="10" nzRequired nzFor="valueUp" hidden>范&nbsp;&nbsp;&nbsp;围&nbsp;&nbsp;&nbsp;值</nz-form-label>
                    <nz-form-control [nzSpan]="14" nzErrorTip="请输入最大值!">
                      <nz-input-group>
                        <nz-input-number formControlName="valueUp" nzPlaceHolder="最大值"></nz-input-number>
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </ng-container>
              <nz-form-item *ngIf="validateForm.value.checkType !== null">
                <nz-form-label [nzSpan]="6" nzRequired nzFor="defaultValueNumber">默&nbsp;&nbsp;&nbsp;认&nbsp;&nbsp;&nbsp;值</nz-form-label>
                <nz-form-control [nzSpan]="18" nzErrorTip="请输入默认值!">
                  <nz-input-group>
                    <nz-input-number class="w100" formControlName="defaultValueNumber" nzPlaceHolder="请输入默认值"></nz-input-number>
                  </nz-input-group>
                </nz-form-control>
              </nz-form-item>
            </ng-container>

            <nz-form-item *ngIf="validateForm.value.type === '5' || validateForm.value.type === '6'">
              <nz-form-label [nzSpan]="6" nzRequired nzFor="defaultValueString">默&nbsp;&nbsp;&nbsp;认&nbsp;&nbsp;&nbsp;值</nz-form-label>
              <nz-form-control [nzSpan]="18" nzErrorTip="请输入默认值!">
                <nz-input-group>
                  <input formControlName="defaultValueString" nz-input placeholder="请输入默认值">
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="validateForm.value.type === '5' || validateForm.value.type === '6' || validateForm.value.type === '7'">
              <nz-form-label [nzSpan]="6" nzRequired nzFor="showError">异&nbsp;常&nbsp;显&nbsp;示</nz-form-label>
              <nz-form-control [nzSpan]="18" nzErrorTip="请选择异常显示!">
                <nz-radio-group formControlName="showError">
                  <label nz-radio [nzValue]="1">是</label>
                  <label nz-radio [nzValue]="0">否</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
          </form>
        </div>
        <div class=" display_flex justify-content_flex-center">
          <button nzType="primary" nz-button (click)="submitForm()" [nzLoading]="btnLoading">确认</button>
          <button class="btn cancel" nz-button nzType="default" (click)="hideAddModal()">取消</button>
        </div>
      </div>
    </div>
    <!-- 新增/编辑巡检项页码模态框 -->
    <div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="pageModal">
      <div class="modalBody">
        <div class="title">{{modelName}}巡检项页码<i class="icon_transport transport-guanbi" (click)="hideAddPageModal()"></i></div>
        <div class="content">
          <form nz-form [formGroup]="validatePageForm" class="addForm">
            <nz-form-item>
              <nz-form-label [nzSpan]="4" nzRequired nzFor="name">标题</nz-form-label>
              <nz-form-control [nzSpan]="20" nzErrorTip="请输入标题!">
                <nz-input-group>
                  <input formControlName="name" nz-input placeholder="请输入标题">
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
          </form>
        </div>
        <div class=" display_flex justify-content_flex-center">
          <button nzType="primary" nz-button (click)="submitPageForm()" [nzLoading]="btnLoading">确认</button>
          <button class="btn cancel" nz-button nzType="default" (click)="hideAddPageModal()">取消</button>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
      (confirmDelEvent)="confirmDel()" [content]="tipsMsg1"></app-dialog-delete>
  </div>
  <div class="inspectionConfigurationItemPage">
    <div class="inspectionConfigurationItemPageBox">
      <div class="head">
        <button nz-button class="btn default" (click)="addPageModal()">新增</button>
      </div>
      <overlay-scrollbars #osComponentRef1 class="content" [ngStyle]="{height: tableHeight + 46 + 'px'}">
        <div class="contentItem active" [ngClass]="{ active: pageActiveId == data.id }" (click)="clickPage(data)"
          *ngFor="let data of pageList">
          <div class="title">
            <span class="name">标题：</span>
            <span class="value">{{ data.name }}</span>
          </div>
          <div class="contentPage">
            <div class="title">
              <span class="name">页码：</span>
              <span class="value">{{ data.orders }}</span>
            </div>
            <div class="btns">
              <span class="icon_transport transport-weibiaoti2010104" (click)="editPage(data)"></span>
              <span class="icon_transport transport-shanchu1" (click)="showDelModal(data,'您确认要删除吗？','删除','delPage')"></span>
            </div>
          </div>
        </div>
      </overlay-scrollbars>
    </div>
  </div>
</div>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo">
</app-prompt-modal>

<!-- 选择项配置 -->
<app-inspection-configuration-item-prompt-modal
  *ngIf="inspectionConfigurationItemPromptModalShow"
  [show]="inspectionConfigurationItemPromptModalShow"
  [coopData]="coopData"
  (closeModelHs)="closeModelInspectionConfigurationItem($event)"
  (confirmModelHs)="confirmModelInspectionConfigurationItem($event)"
></app-inspection-configuration-item-prompt-modal>