zy-pc/src/app/components/incidentManagement/incident-create/incident-create.component.html

<!--
 * @Author: seimin
 * @Date: 2024-10-24 13:47:40
 * @LastEditors: seimin
 * @LastEditTime: 2024-10-25 15:47:50
 * @Description: 创建
-->
<!-- 新建工单 -->
<div class="newOrder display_flex justify-content_flex-center align-items_center">
  <div class="modalBody">
    <div class="title" *ngIf="currentTabIndex === '故障报修'">
      <div class="newTop">
        <div class="name">故障工单编辑</div>
        <div class="newTopItem">
          <span class="grayFont required">院区：</span>
          <nz-select style="width: 160px" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzPlaceHolder="请选择院区" [(ngModel)]="incidentModel.hosId" (ngModelChange)="changeApplyHospital($event)" nzAllowClear [nzDisabled]="buildType === '编辑事件'">
            <ng-container *ngFor="let option of applicationHospitalList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.hosName" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
        <div class="newTopItem">
          <span class="grayFont required">申请科室：</span>
          <nz-select style="width: 160px" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch (nzOnSearch)="changeInp('itsm', $event)" nzPlaceHolder="请选择申请科室" [(ngModel)]="incidentModel.department" (ngModelChange)="changeApplyDept($event)" nzAllowClear (nzOpenChange)="openChangeApplyDept($event)">
            <ng-container *ngFor="let option of applicationDeptList">
              <nz-option *ngIf="!isLoadingApply" [nzLabel]="option.dept" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoadingApply" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
        <div class="newTopItem">
          <span class="grayFont">申请人：</span>
          <ng-container *ngIf="buildType === '报修转事件'">{{incidentMsg.requesterName}}</ng-container>
          <ng-container *ngIf="buildType !== '报修转事件'">
            <nz-select style="width: 160px" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch (nzOnSearch)="changeCommonInp('requester', $event)" nzPlaceHolder="请选择申请人" [(ngModel)]="incidentModel.requester" (ngModelChange)="changeApplyRequester($event)" nzAllowClear (nzOpenChange)="openChangeApplyRequester($event)">
              <ng-container *ngFor="let option of applicationRequesterList">
                <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
              </ng-container>
              <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
              </nz-option>
            </nz-select>
            <label nz-checkbox [(ngModel)]="isRelatedDepartment" (ngModelChange)="changeApplyRelatedDepartment($event)" class="ml8">关联查</label>
          </ng-container>
        </div>
      </div>
    </div>
    <div nz-row class="content">
      <div nz-col nzSpan="15" class="col left">
        <div class="tabs">
          <div class="tabs__inner" #tab>
            <div class="tabs__wrap" [style.transform]="'translateX(' + disX + 'px)'">
              <ng-container *ngFor="let item of workTypesArrange;let index = index;">
                <div [ngClass]="{ tab: true, checked: currentTabIndex == item.key}" (click)="tabClick(item.key)">
                  {{ item.key }}
                </div>
              </ng-container>
            </div>
          </div>
          <div class="tabs__operate" *ngIf="workTypesFlag && incidentModel.department">
            <i
              class="tabs__Icon--right icon_transport transport-xiangzuo"
              (click)="toLeft()"
            ></i>
            <i
              class="tabs__Icon--left icon_transport transport-xiangzuo"
              (click)="toRight()"
            ></i>
          </div>
        </div>
        <!-- 底部tab页 -->
        <div class="bottomWrap">
          <ng-container *ngFor="let item of workTypesArrange;let index = index;">
            <!-- 故障报修 -->
            <overlay-scrollbars #osComponentRef15 class="bottom_req" *ngIf="currentTabIndex === '故障报修'">
              <div class="req">
                <div class="row">
                  <div class="col flex4">
                    <span class="name">详细地址：</span>
                    <nz-select class="w100" [(ngModel)]="incidentModel.area" (ngModelChange)="changeApplyBuilding($event)" nzAllowClear nzPlaceHolder="请选择楼栋">
                      <nz-option [nzValue]="item.id" [nzLabel]="item.buildingName" *ngFor="let item of applicationBuildingList"></nz-option>
                    </nz-select>
                  </div>
                  <div class="col flex3">
                    <nz-select class="w100" [(ngModel)]="incidentModel.place" nzAllowClear nzPlaceHolder="请选择楼层">
                      <nz-option [nzValue]="item.id" [nzLabel]="item.floorName" *ngFor="let item of applicationFloorList"></nz-option>
                    </nz-select>
                  </div>
                  <div class="col flex7">
                    <input nz-input placeholder="请填写详细地址" [(ngModel)]="incidentModel.houseNumber" />
                  </div>
                </div>

                <div class="row gap8">
                  <div class="col">
                    <span class="name">科室电话：</span>
                    <ng-container *ngIf="incidentMsg.deptManyPhone">{{incidentMsg.deptManyPhone|stringToFirstValue}}<em (click)="importPhone(incidentMsg.deptManyPhone, true)">引入</em></ng-container>
                  </div>
                  <div class="col">
                    <span class="name">报修人电话：</span>
                    <ng-container *ngIf="incidentMsg.requesterPhone">{{incidentMsg.requesterPhone}}<em (click)="importPhone(incidentMsg.requesterPhone)">引入</em></ng-container>
                  </div>
                  <div class="col">

                  </div>
                </div>

                <div class="row gap8">
                  <div class="col">
                    <span class="name">联系人：</span>
                    <input class="w100" nz-input placeholder="请填写联系人" [(ngModel)]="incidentModel.contacts" />
                  </div>
                  <div class="col">
                    <span class="name required">联系电话：</span>
                    <input class="w100" nz-input placeholder="请填写联系电话" [(ngModel)]="incidentModel.contactsInformation" />
                  </div>
                  <div class="col">
                    <span class="name">责任部门：</span>
                    {{incidentModel.duty ? incidentModel.duty.hosName : ''}}
                  </div>
                </div>

                <div class="row gap8">
                  <div class="col">
                    <span class="name required">故障现象：</span>
                    <nz-select class="w100" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch (nzOnSearch)="changeCommonInp('category', $event)" nzPlaceHolder="请选择故障现象" [(ngModel)]="incidentModel.category" (ngModelChange)="changeApplyCategory($event)" (nzOpenChange)="openChangeApplyCategory($event)">
                      <ng-container *ngFor="let option of applicationCategoryList">
                        <nz-option *ngIf="!isLoading" [nzLabel]="option.mutiCategory" [nzValue]="option.id"></nz-option>
                      </ng-container>
                      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
                      </nz-option>
                    </nz-select>
                  </div>
                </div>

                <div class="row gap8">
                  <div class="col alignItemsStart">
                    <span class="name required">故障描述：</span>
                    <nz-input-group [nzSuffix]="suffixTemplate">
                      <textarea class="w100" nz-input rows="4" placeholder="请填写故障描述" [(ngModel)]="incidentModel.description"></textarea>
                    </nz-input-group>
                    <span #suffixTemplate class="ant-input-clear-icon ml8" *ngIf="incidentModel.description" (click)="incidentModel.description = null">清空</span>
                  </div>
                </div>

                <div class="row gap8">
                  <div class="col">
                    <span class="name required">优先级：</span>
                    <nz-select class="w100" [(ngModel)]="incidentModel.priorityId" nzAllowClear nzPlaceHolder="请选择优先级" [nzDisabled]="buildType === '编辑事件'">
                      <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of applicationPriorityList"></nz-option>
                    </nz-select>
                  </div>
                  <div class="col">
                    <span class="name">事件来源：</span>
                    <nz-select class="w100" [(ngModel)]="incidentModel.source" nzAllowClear nzPlaceHolder="请选择事件来源">
                      <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of applicationSourceList"></nz-option>
                    </nz-select>
                  </div>
                  <div class="col">
                    <span class="name">预约时间：</span>
                    <nz-date-picker style="width: 150px;" [(ngModel)]="incidentModel.yyTime" nzShowTime></nz-date-picker>
                  </div>
                </div>

                <div class="row gap8">
                  <div class="col">
                    <span class="name">报修图片：</span>
                    <div class="value w100 upload">
                      <ng-container *ngIf="repairImgs.length === 0">
                        <nz-upload nzListType="picture-card" [(nzFileList)]="fileList" [nzShowUploadList]="showUploadList" [nzPreview]="handlePreview" nzFileType="image/jpeg,image/png" nzAccept="image/jpeg,image/png" [nzShowButton]="fileList.length < 3" [nzBeforeUpload]="beforeUpload" [nzAction]="temporarilyUrl" [nzSize]="10240">
                          <i nz-icon nzType="plus"></i>
                          <div class="ant-upload-text">上传照片</div>
                        </nz-upload>
                        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
                          <ng-template #modalContent>
                            <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                          </ng-template>
                        </nz-modal>
                        <div class="tips">(支持JPG/PNG格式图片，单张大小10M以内)</div>
                      </ng-container>
                      <div class="thumbList" *ngIf="repairImgs.length > 0">
                        <div class="thumb" *ngFor="let item of repairImgs;let index = index;" (click)="previewImageHandler(repairImgs, index)"><img [src]="item.thumbFilePath" alt=""></div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row gap8" *ngIf="buildType !== '编辑事件'">
                  <div class="col">
                    <span class="name required">处理组：</span>
                    <nz-select class="w100" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch (nzOnSearch)="changeCommonInp('group', $event)" nzPlaceHolder="请选择处理组" [(ngModel)]="incidentModel.group" (ngModelChange)="changeApplyGroup($event)" (nzOpenChange)="openChangeApplyGroup($event)">
                      <ng-container *ngFor="let option of applicationGroupList">
                        <nz-option *ngIf="!isLoading" [nzLabel]="option.groupName" [nzValue]="option.id"></nz-option>
                      </ng-container>
                      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
                      </nz-option>
                    </nz-select>
                  </div>
                  <div class="col">
                    <span class="name">处理人：</span>
                    <nz-select class="w100" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch (nzOnSearch)="changeCommonInp('user', $event)" nzPlaceHolder="请选择处理人" [(ngModel)]="incidentModel.user" (nzOpenChange)="openChangeApplyUser($event)" nzAllowClear>
                      <ng-container *ngFor="let option of applicationUserList">
                        <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
                      </ng-container>
                      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
                      </nz-option>
                    </nz-select>
                  </div>
                  <div class="col"></div>
                </div>
              </div>
            </overlay-scrollbars>
          </ng-container>
        </div>
      </div>
      <div nz-col nzSpan="9" class="col right">
        <div class="rightTitle">
          <div class="rightTitle_tab" [class.active]="currentRTab == tab.id" *ngFor="let tab of rightTitle_tab;" (click)="rightTitleHandler(tab.id)">{{ tab.name }}</div>
        </div>
        <!-- 近期维修 start -->
        <div class="cots_body weifenpai top185" *ngIf="currentRTab == 2">
          <overlay-scrollbars #osComponentRef16 [ngStyle]="{ height: '100%' }">
            <div *ngIf="itsmOrders.length && !loading6">
              <div class="list listsTypeColor" *ngFor="let data of itsmOrders">
                <div class="left_cots" style="width: 96%;">
                  <!-- 工单 -->
                  <div class="gongdan">
                    <span class="left">{{ data.incidentsign }}</span>
                    <span class="right">
                      <span>{{ data.state?.name }}</span>
                    </span>
                  </div>
                  <!-- 描述 -->
                  <div class="didian">
                    <span class="left">
                      {{ data.description }}
                    </span>
                  </div>
                  <!-- 时间 -->
                  <div class="shijian">
                    <span class="left"></span>
                    <span class="right">
                      {{ data.acceptDate | date: "MM-dd HH:mm" }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="no_data" *ngIf="itsmOrders.length == 0 && !loading6">
              暂无数据
            </div>
            <div class="no_data" *ngIf="loading6">
              <div class="loadingFull display_flex justify-content_flex-center align-items_center">
                <div class="loadingFullInner">
                  <img src="../../../assets/images/loading.gif" alt="" />
                  <div>加载中...</div>
                </div>
              </div>
            </div>
          </overlay-scrollbars>
        </div>
        <!-- 近期维修 end -->
        <!-- 知识库 start -->
        <div class="cots_body weifenpai top185" *ngIf="currentRTab == 3">
          <overlay-scrollbars #osComponentRef17 [ngStyle]="{ height: '100%' }">
            <div *ngIf="knowageList.length && !loading7">
              <div class="list listsTypeColor" *ngFor="let data of knowageList" style="height: auto;overflow: hidden;">
                <div class="left_cots" style="width: 96%;height: auto;">
                  <!-- 工单 -->
                  <div class="gongdan" style="font-size: 16px;">
                    <span class="left ellipsis-oneline w100" nz-tooltip [nzTooltipTitle]="data.title">{{data.title}}</span>
                  </div>
                  <!-- 描述 -->
                  <div class="didian" style="font-size: 12px;height: auto;">
                    <span class="left noEllipsis">{{data.content | stripHtml}}</span>
                  </div>
                  <!-- 时间 -->
                  <div class="shijian" style="height: auto;line-height: normal;overflow: hidden;padding-bottom: 16px;">
                    <span class="right">
                      <button nz-button nzType="primary" (click)="importKnowage(data)">引用</button>
                      <button class="ml8" nz-button nzType="primary" (click)="showKnowledgeModal(data)">查看</button>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="no_data" *ngIf="knowageList.length == 0 && !loading7">
              暂无数据
            </div>
            <div class="no_data" *ngIf="loading7">
              <div class="loadingFull display_flex justify-content_flex-center align-items_center">
                <div class="loadingFullInner">
                  <img src="../../../assets/images/loading.gif" alt="" />
                  <div>加载中...</div>
                </div>
              </div>
            </div>
          </overlay-scrollbars>
        </div>
        <!-- 知识库 end -->
      </div>
    </div>
    <div class="btns display_flex justify-content_flex-center align-items_center">
      <ng-container *ngIf="currentTabIndex === '故障报修' && buildType !== '编辑事件'">
        <label nz-checkbox [(ngModel)]="isBuildOrderAgagin" *ngIf="buildType !== '报修转事件' && buildType !== '留言转事件'">是否连续建单</label>
        <button nz-button class="btn" nzType="primary" (click)="directOrder()">
          直接解决
        </button>
        <button nz-button class="btn" nzType="primary" (click)="assignOrder()">
          建单并派单
        </button>
        <button nz-button class="btn" nzType="primary" (click)="temporaryStorage()">
          暂存
        </button>
      </ng-container>
      <ng-container *ngIf="currentTabIndex === '故障报修' && buildType === '编辑事件'">
        <button nz-button class="btn" nzType="primary" (click)="saveOrder()">
          保存
        </button>
      </ng-container>
      <button class="btn cancel" nz-button nzType="default" (click)="newOrderCancel()">
        取消
      </button>
    </div>
  </div>
</div>

<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>

<!-- 图片预览 -->
<app-image-viewer [imageUrl]="imgs" hidden *ngIf="isPreview" [isPreviewNow]="true" [initialViewIndex]="initialViewIndex"></app-image-viewer>

<!-- 知识库查看 -->
<app-knowledge-look (cancelKnowledgeModal)="cancelKnowledgeModal()" *ngIf="isShowKnowledge" [knowledgeData]="coopData"></app-knowledge-look>