巡检执行-详情

src/app/share/inspection-execute-detail/inspection-execute-detail.component.html

@@ -0,0 +1,124 @@
+<div class="detail" *ngIf="!maskFlag">
+  <div class="title">
+    查看详情<i class="icon_transport transport-guanbi" (click)="close()"></i>
+  </div>
+  <div class="box">
+    <div class="tab display_flex">
+      <div
+        [ngClass]="{ item: true, flex_1: true, checked: tabType == 1 }"
+        (click)="checkTab(1)"
+      >
+        基础信息
+      </div>
+      <div
+        [ngClass]="{ item: true, flex_1: true, checked: tabType == 4 }"
+        (click)="checkTab(4)"
+      >
+        日志
+      </div>
+    </div>
+
+    <!-- 基础信息 -->
+    <overlay-scrollbars
+      #osComponentRef3
+      style="flex: 1"
+      *ngIf="tabType == 1"
+    >
+      <div class="content orders">
+        <div class="inner">
+          <div class="top">
+            <div class="info" nz-row>
+              <div nz-col nzSpan="8">
+                单号：{{ orderInfo.code }}
+              </div>
+              <div nz-col nzSpan="8">
+                计划主题：{{ orderInfo.inspectionDTO?.name }}
+              </div>
+              <div nz-col nzSpan="8">
+                批次号：{{ orderInfo.batchNo }}
+              </div>
+            </div>
+          </div>
+          <div class="top">
+            <div class="info" nz-row>
+              <div nz-col nzSpan="8">
+                巡检点：{{ orderInfo.inspectionNodeDTO?.name }}
+              </div>
+              <div nz-col nzSpan="8">
+                巡检单：{{ orderInfo.inspectionDTO?.inspectionFormDTO?.name }}
+              </div>
+              <div nz-col nzSpan="8">
+                创建时间：{{ orderInfo.addTime | date:'yyyy-MM-dd HH:mm' }}
+              </div>
+            </div>
+          </div>
+          <div class="top">
+            <div class="info" nz-row>
+              <div nz-col nzSpan="8">
+                签到方式：{{ orderInfo.signType?.name }}
+              </div>
+              <div nz-col nzSpan="8">
+                执行人：{{ orderInfo.userDTO?.name || orderInfo.groupDTO?.groupName }}
+              </div>
+              <div nz-col nzSpan="8">
+                状态：{{ orderInfo.status?.name }}
+              </div>
+            </div>
+          </div>
+          <div class="top">
+            <div class="info" nz-row>
+              <div nz-col nzSpan="8">
+                截至时间：{{ orderInfo.overtime | date:'yyyy-MM-dd HH:mm' }}
+              </div>
+              <div nz-col nzSpan="8">
+                完成时间：{{ orderInfo.completeTime | date:'yyyy-MM-dd HH:mm' }}
+              </div>
+              <div nz-col nzSpan="8">
+                是否异常：<span [ngClass]="orderInfo.exception === 1 ? 'red': ''">{{ orderInfo.exception === 1 ? '是' : '否' }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </overlay-scrollbars>
+    <!-- 日志 -->
+    <overlay-scrollbars
+      #osComponentRef2
+      style="flex:1;"
+      *ngIf="tabType == 4"
+    >
+      <div class="content jifen">
+        <div class="table">
+          <nz-table class="integralTable" [nzData]="list" nzSize="middle" [nzShowPagination]="null" [nzLoading]="hsLoading" [nzScroll]="{ y: '500px' }">
+            <thead>
+              <tr class="thead">
+                <th nzWidth="8%">序号</th>
+                <th nzWidth="23%">操作动作</th>
+                <th nzWidth="23%">操作时间</th>
+                <th nzWidth="23%">操作人</th>
+                <th nzWidth="23%">备注</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let item of list; let i = index">
+                <td>{{ i + 1 }}</td>
+                <td>{{ item.operationType?.name }}</td>
+                <td>{{ item.operationTime | date:'yyyy-MM-dd HH:mm' }}</td>
+                <td>{{ item.username }}</td>
+                <td>{{ item.remarks }}</td>
+              </tr>
+            </tbody>
+          </nz-table>
+        </div>
+      </div>
+    </overlay-scrollbars>
+  </div>
+  <div class="btns">
+    <button class="btn cancel" nz-button nzType="default" (click)="close()">
+      关闭
+    </button>
+  </div>
+</div>
+
+<!-- 遮罩 -->
+<app-mask *ngIf="maskFlag"></app-mask>

src/app/share/inspection-execute-detail/inspection-execute-detail.component.less

@@ -0,0 +1,544 @@
+@import "../../../../src/theme.less";
+:host {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  // min-height: 580px;
+  border-radius: 5px;
+  background: #fff;
+  color: #333;
+  font-size: 14px;
+  padding: 12px 20px;
+  position: relative;
+  padding-bottom: 70px;
+
+  .pagination{
+    margin: 8px;
+    text-align: right;
+  }
+
+  .title {
+    font-size: 18px;
+    text-align: center;
+    line-height: 24px;
+    margin: 0;
+    margin-bottom: 12px;
+    position: relative;
+
+    i {
+      position: absolute;
+      right: 0;
+      top: 0;
+      font-size: 20px;
+      color: #666;
+      cursor: pointer;
+      padding: 0 5px;
+    }
+  }
+
+  & > .box {
+    width: 1160px;
+    border: 1px solid #e5e9ed;
+    border-radius: 5px;
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .tab {
+      width: 100%;
+      height: 60px;
+      border-bottom: 1px solid #e5e9ed;
+
+      .item {
+        cursor: pointer;
+        text-align: center;
+        line-height: 60px;
+        height: 100%;
+        border-right: 1px solid #e5e9ed;
+
+        &:nth-last-child(1) {
+          border: none;
+        }
+
+        &.checked {
+          background: #F0F6ED;
+        }
+      }
+    }
+
+    .content {
+      width: 100%;
+      // min-height: 453px;
+      display: flex;
+      flex-direction: column;
+
+      &.orders {
+        background: #fff;
+        padding: 16px;
+        .inner{
+          background: #f9fafb;
+          border-radius: 8px;
+          width: 100%;
+          border: 1px solid #D9D9D9;
+          overflow: hidden;
+          padding: 10px 0;
+        }
+      }
+
+      & .top {
+        padding: 10px 32px;
+        overflow: hidden;
+
+        .num {
+          font-size: 16px;
+          overflow: hidden;
+          margin-bottom: 6px;
+
+          .left {
+            float: left;
+            font-weight: 600;
+          }
+
+          .right {
+            float: right;
+          }
+        }
+
+        .info {
+          color: #666;
+
+          .jiaji {
+            margin: 0;
+            margin-top: 8px;
+          }
+        }
+      }
+
+      & > .center {
+        padding: 27px 0 17px 0;
+        border-bottom: 1px solid #e5e9ed;
+        font-size: 12px;
+        background: #fff;
+
+        .box {
+          display: flex;
+          justify-content: center;
+
+          .steps {
+            &:nth-last-child(1) {
+              .line {
+                display: none !important;
+              }
+            }
+
+            .step {
+              .info {
+                width: 90px;
+                text-align: center;
+                display: inline-block;
+                vertical-align: top;
+
+                i {
+                  color: #e5e9ed;
+
+                  &.green {
+                    color: @primary-color;
+                  }
+                }
+              }
+
+              p {
+                margin: 0;
+              }
+
+              .line {
+                display: inline-block;
+                width: 60px;
+                height: 2px;
+                background: #e5e9ed;
+              }
+            }
+          }
+        }
+      }
+
+      & > .bottom {
+        flex: 1;
+        padding: 25px 32px;
+        background: #f9fafb;
+
+        .amplification {
+          display: flex;
+          justify-content: flex-end;
+          margin-bottom: 8px;
+        }
+
+        .urgent {
+          input {
+            width: 600px;
+          }
+
+          .candelBtn {
+            margin-left: 20px;
+          }
+        }
+
+        .table {
+          width: 100%;
+          height: 100%;
+          min-height: 160px;
+          background: #fff;
+          border-radius: 5px;
+
+          .thead {
+            background-image: repeating-linear-gradient(
+              to right,
+              @bg-start,
+              @bg-end 100%
+            ) !important;
+
+            th {
+              color: #fff !important;
+              text-align: center;
+              font-size: 12px;
+              border: none;
+            }
+          }
+
+          .detailDrugTable {
+            .thead {
+              background-image: repeating-linear-gradient(
+                to right,
+                @bg-start,
+                @bg-end 50%
+              ) !important;
+            }
+          }
+
+          .ant-table-tbody {
+            tr {
+              text-align: center;
+              font-size: 12px;
+              border: none;
+
+              td {
+                border: none;
+                position: relative;
+              }
+            }
+
+            tr:nth-child(2n) {
+              background: #f9fafb;
+            }
+          }
+        }
+
+        .info {
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          border-radius: 5px;
+          border: 1px solid #e5e9ed;
+          padding: 24px 28px 14px 28px;
+          margin-bottom: 8px;
+
+          .top {
+            .left {
+              border-right: 1px dashed #e5e9ed;
+
+              p {
+                padding: 0 70px 0 102px;
+                overflow: hidden;
+
+                & > span:nth-child(1) {
+                  float: left;
+                }
+
+                & > span:nth-child(2) {
+                  float: right;
+                  color: #666;
+                  text-align: right;
+                  max-width: 175px;
+                }
+              }
+            }
+
+            .right {
+              p {
+                padding: 0 102px 0 70px;
+                overflow: hidden;
+
+                span:nth-child(1) {
+                  float: left;
+                }
+
+                span:nth-child(2) {
+                  float: right;
+                  color: #666;
+                  text-align: right;
+                }
+              }
+            }
+          }
+
+          .wait {
+            text-align: center;
+            margin-top: 7px;
+
+            i {
+              font-size: 24px;
+              color: #62c26d;
+            }
+
+            span {
+              color: #62c26d;
+            }
+          }
+        }
+      }
+
+      &.pingjia {
+        .msg {
+          width: 100%;
+          height: 50px;
+          line-height: 50px;
+          padding-left: 32px;
+          border-bottom: 1px solid #e5e9ed;
+
+          div {
+            display: inline-block;
+            margin-right: 100px;
+          }
+        }
+
+        .con {
+          padding: 16px 32px;
+          min-height: 360px;
+        }
+      }
+
+      & > .form {
+        .ant-form-item {
+          padding: 0 32px 13px 32px;
+          margin-bottom: 0;
+          border-bottom: 1px solid #e5e9ed;
+
+          &:nth-last-child(1) {
+            border: none;
+          }
+        }
+
+        .ant-form-item-label {
+          line-height: 34px;
+          text-align: left;
+        }
+      }
+
+      & > .mediation {
+        padding: 16px 32px;
+
+        .item {
+          border-bottom: 1px solid #e5e9ed;
+          padding-top: 10px;
+
+          .label {
+            line-height: 28px;
+            margin-top: 10px;
+          }
+
+          .info {
+            line-height: 28px;
+            color: #999;
+            padding-bottom: 20px;
+          }
+        }
+      }
+
+      &.jifen {
+        padding: 16px;
+
+        & > .table {
+          width: 100%;
+          height: 100%;
+          min-height: 160px;
+          padding: 6px;
+          background: #fff;
+          border: 1px solid #e5e9ed;
+          border-radius: 5px;
+          overflow: hidden;
+
+          .thead {
+            background-image: repeating-linear-gradient(
+              to right,
+              @bg-start,
+              @bg-end 100%
+            ) !important;
+
+            th {
+              color: #fff !important;
+              text-align: center;
+              font-size: 12px;
+              border: none;
+              background: transparent;
+            }
+          }
+
+          .ant-table-tbody {
+            tr {
+              text-align: center;
+              font-size: 12px;
+              border: none;
+
+              td {
+                border: none;
+              }
+            }
+
+            tr:nth-child(2n) {
+              background: #f9fafb;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+
+    .btn {
+      margin: 9px;
+      margin-bottom: 0;
+    }
+  }
+
+  .ant-table {
+    border: none !important;
+  }
+}
+
+// 撤回工单
+.recallOrder {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+
+  .modalBody {
+    width: 350px;
+    height: 220px;
+    background: #fff;
+    border-radius: 5px;
+    padding: 10px 20px;
+    color: #333;
+
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 18px;
+      position: relative;
+
+      i {
+        position: absolute;
+        right: 0;
+        top: 0;
+        font-size: 20px;
+        color: #666;
+        cursor: pointer;
+        padding: 0 5px;
+      }
+    }
+
+    .content {
+      width: 310px;
+      height: 117px;
+      background: #f9fafb;
+      border: 1px solid #e5e9ed;
+      border-radius: 5px;
+      overflow: hidden;
+      margin-top: 12px;
+
+      div {
+        text-align: center;
+        margin: 0;
+
+        &.icon {
+          margin-top: 17px;
+
+          i {
+            color: #ff3b53;
+            font-size: 30px !important;
+
+            &.transport-wenhao {
+              color: #f5a523;
+            }
+          }
+        }
+
+        &.defeat {
+          color: #333;
+          font-size: 18px;
+        }
+
+        &:nth-child(3) {
+          font-size: 14px;
+          color: #666;
+        }
+      }
+
+      .conditions {
+        padding: 16px 20px;
+
+        div {
+          text-align: left;
+        }
+      }
+    }
+
+    button {
+      margin-top: 10px;
+
+      &.btn {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.txtC {
+  text-align: center;
+}
+.ji {
+  position: absolute;
+  right: 0px;
+  top: -3px;
+  width: 30px;
+}

src/app/share/inspection-execute-detail/inspection-execute-detail.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { MainService } from "../../services/main.service";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx";
+import { NzMessageService } from "ng-zorro-antd";
+import { ToolService } from 'src/app/services/tool.service';
+@Component({
+  selector: "app-inspection-execute-detail",
+  templateUrl: "./inspection-execute-detail.component.html",
+  styleUrls: ["./inspection-execute-detail.component.less"],
+})
+export class InspectionExecuteDetailComponent implements OnInit {
+  @ViewChild("osComponentRef1", {
+    read: OverlayScrollbarsComponent,
+    static: false,
+  })
+  osComponentRef1: OverlayScrollbarsComponent;
+  @ViewChild("osComponentRef2", {
+    read: OverlayScrollbarsComponent,
+    static: false,
+  })
+  osComponentRef2: OverlayScrollbarsComponent;
+  constructor(
+    private message: NzMessageService,
+    private route: ActivatedRoute,
+    private mainService: MainService,
+    private tool: ToolService,
+  ) {}
+  maskFlag: any = false;
+  id: number; //id
+  orderInfo: any; //详情信息
+  hosId;
+
+  ngOnInit() {
+    this.hosId = this.tool.getCurrentHospital().id;
+    this.tabType = this.route.snapshot.params.type || 1;
+    this.getInfo();
+  }
+
+  // 获取详情
+  hsLoading:boolean = false;
+  getInfo() {
+    this.id = +this.route.snapshot.paramMap.get("id");
+    this.maskFlag = this.message.loading("正在加载中..", {
+      nzDuration: 0,
+    }).messageId;
+    this.mainService
+      .getFetchData("simple/data", "inspectionTask", this.id)
+      .subscribe((data) => {
+        this.orderInfo = data.data || {};
+        this.list = this.orderInfo.logList || [];
+        this.message.remove(this.maskFlag);
+        this.maskFlag = false;
+      });
+  }
+
+  // 获取列表
+  pageIndex: number = 1;//表格当前页码
+  pageSize: number = 10;//表格每页展示条数
+  total: number = 0;//表格总数据量
+  list: any = [];
+  // 切换tab栏
+  tabType: number = 1; //tab栏
+  checkTab(type) {
+    this.tabType = type;
+  }
+
+  // 关闭弹框
+  close() {
+    history.go(-1);
+  }
+
+}

src/app/share/share.module.ts

@@ -51,6 +51,7 @@ import { BloodHistoryPromptModalComponent } from './blood-history-prompt-modal/b
 import { MedicalWasteHistoryPromptModalComponent } from './medical-waste-history-prompt-modal/medical-waste-history-prompt-modal.component';
 import { MedicalWasteLogPromptModalComponent } from './medical-waste-log-prompt-modal/medical-waste-log-prompt-modal.component';
 import { OutgoingRecordDetailComponent } from './outgoing-record-detail/outgoing-record-detail.component';
+import { InspectionExecuteDetailComponent } from './inspection-execute-detail/inspection-execute-detail.component';
 
 @NgModule({
   declarations: [
@@ -78,6 +79,7 @@ import { OutgoingRecordDetailComponent } from './outgoing-record-detail/outgoing
     AppraiseDetailComponent,
     OrderDetailComponent,
     OutgoingRecordDetailComponent,
+    InspectionExecuteDetailComponent,
     DateTransformPipe,
     DataToNamePipe,
     DialogDeleteComponent,
@@ -138,6 +140,7 @@ import { OutgoingRecordDetailComponent } from './outgoing-record-detail/outgoing
     AppraiseDetailComponent,
     OrderDetailComponent,
     OutgoingRecordDetailComponent,
+    InspectionExecuteDetailComponent,
     CommonModule,
     NgZorroAntdModule,
     FormsModule,

src/app/views/inspection-execute/inspection-execute-routing.module.ts

@@ -1,10 +1,21 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { InspectionExecuteComponent } from './inspection-execute.component';
+import { InspectionExecuteDetailComponent } from 'src/app/share/inspection-execute-detail/inspection-execute-detail.component';
 
 
 const routes: Routes = [
-  { path: '', component: InspectionExecuteComponent }
+  {
+    path: '',
+    component: InspectionExecuteComponent,
+    children: [
+      {
+        // 查看详情
+        path: 'inspectionExecuteDetail/:id',
+        component: InspectionExecuteDetailComponent,
+      }
+    ]
+  }
 ];
 
 @NgModule({

src/app/views/inspection-execute/inspection-execute.component.html

@@ -43,8 +43,8 @@
         </div>
       </div>
       <div nz-col nzLg="8" class="list-template__btns">
-        <button nz-button *ngIf="coopBtns.del" class="btn default" (click)="showDelModal(data,'您确认要删除选中的巡检任务吗？','删除','delList')">批量删除</button>
-        <button nz-button *ngIf="coopBtns.designate" class="btn default ml8" (click)="showInspectionExecuteAssign()">批量指派</button>
+        <button nz-button *ngIf="coopBtns.del" [disabled]="!checkedDepIds.length" class="btn default" (click)="showDelModal(data,'您确认要删除选中的巡检任务吗？','删除','delList')">批量删除</button>
+        <button nz-button *ngIf="coopBtns.designate" [disabled]="!checkedDepIds.length" class="btn default ml8" (click)="showInspectionExecuteAssign()">批量指派</button>
         <button nz-button class="btn default ml8" (click)='search()'>搜索</button>
         <button nz-button class="btn default ml8" (click)='reset()'>重置</button>
       </div>
@@ -68,10 +68,10 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of listOfData;let i = index" (click)="selectedListData(data)">
-            <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
+            <td nzShowCheckbox [nzDisabled]="data.status.value != 1" [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
             <td>{{data.code}}</td>
             <td>{{data.inspectionDTO?.name}}<br>{{data.batchNo}}</td>
-            <td>{{data.inspectionNodeDTO?.name}}<br>{{data.inspectionFormDTO?.inspectionFormDTO?.name}}</td>
+            <td>{{data.inspectionNodeDTO?.name}}<br>{{data.inspectionDTO?.inspectionFormDTO?.name}}</td>
             <td>{{data.overtime | date:'yyyy-MM-dd HH:mm'}}</td>
             <td>{{data.signType?.name}}</td>
             <td>{{data.userDTO?.name || data.groupDTO?.groupName}}</td>
@@ -79,7 +79,7 @@
             <td>{{data.status?.name}}</td>
             <td>
               <div class="coop">
-                <span *ngIf="coopBtns.look" (click)="edit(data)">查看</span>
+                <span *ngIf="coopBtns.look" (click)="detail($event,data.id)">查看</span>
                 <span *ngIf="coopBtns.designate && data.status.value == 1" (click)="showInspectionExecuteAssign(data)">指派</span>
                 <span *ngIf="coopBtns.del" (click)="showDelModal(data,'您确认要删除选中的巡检任务吗？','删除','del')">删除</span>
               </div>
@@ -113,3 +113,6 @@
 
 <!-- 遮罩 -->
 <app-mask *ngIf="maskFlag"></app-mask>
+
+<!-- 查看详情 -->
+<router-outlet></router-outlet>

src/app/views/inspection-execute/inspection-execute.component.ts

@@ -63,6 +63,12 @@ export class InspectionExecuteComponent implements OnInit {
   // 初始化增删改按钮
   coopBtns: any = {};
 
+  // 查看
+  detail(e, id) {
+    e.stopPropagation();
+    this.router.navigateByUrl("/main/inspectionExecute/inspectionExecuteDetail/" + id);
+  }
+
   // 派单给人
   inspectionExecuteAssignPromptModalShow = false;
   showInspectionExecuteAssign(data?) {
@@ -106,7 +112,9 @@ export class InspectionExecuteComponent implements OnInit {
   mapOfCheckedId: { [key: string]: boolean } = {};
   checkedDepIds:any[] = []; //已选中单列id
   refreshStatus(): void {
-    let listOfData = this.listOfData;
+    let listOfData = this.listOfData.filter(
+      (item) => item.status.value == 1
+    );
     this.isAllDisplayDataChecked = listOfData.every(
       (item) => this.mapOfCheckedId[item.id]
     );
@@ -120,6 +128,9 @@ export class InspectionExecuteComponent implements OnInit {
   }
   // 整行操作
   selectedListData(data) {
+    if (data.status.value != 1) {
+      return;
+    }
     this.mapOfCheckedId[data.id] = !this.mapOfCheckedId[data.id];
     this.refreshStatus();
   }
@@ -127,7 +138,9 @@ export class InspectionExecuteComponent implements OnInit {
   isAllDisplayDataChecked = false; //当前页是否全选
   checkAll(value: boolean): void {
     this.listOfData.forEach((item) => {
-      this.mapOfCheckedId[item.id] = value;
+      if (item.status.value == 1) {
+        this.mapOfCheckedId[item.id] = value;
+      }
     });
     this.refreshStatus();
   }