表单生成需要选择时间区间

src/app/views/form-management/form-management.component.html

@@ -2,7 +2,9 @@
   <div class="list-template__content">
     <div class="list-template__top" nz-row>
       <div nz-col nzXl='15' class="list-template__searchBox"></div>
-      <div nz-col nzXl="9" class="list-template__btns"></div>
+      <div nz-col nzXl="9" class="list-template__btns">
+        <button nz-button class="btn default ml8" (click)="checkFixedTab('formManagement')">表单生成</button>
+      </div>
     </div>
     <div class="list-template__bottom">
       <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
@@ -10,12 +12,14 @@
         <thead>
           <tr class="thead">
             <th nzWidth="4%">序号</th>
-            <th nzWidth="16%">表单号</th>
-            <th nzWidth="16%">发起时间</th>
-            <th nzWidth="16%">发起人</th>
-            <th nzWidth="16%">包含类型</th>
-            <th nzWidth="16%">工单数</th>
-            <th nzWidth="16%">操作</th>
+            <th nzWidth="12%">表单号</th>
+            <th nzWidth="12%">发起时间</th>
+            <th nzWidth="12%">发起人</th>
+            <th nzWidth="12%">包含类型</th>
+            <th nzWidth="12%">工单数</th>
+            <th nzWidth="12%">开始时间</th>
+            <th nzWidth="12%">结束时间</th>
+            <th nzWidth="12%">操作</th>
           </tr>
         </thead>
         <tbody>
@@ -26,6 +30,8 @@
             <td>{{ data.addUserDTO?data.addUserDTO.name:'无' }}</td>
             <td>{{ data.taskTypeDTO?data.taskTypeDTO.taskName:'无' }}</td>
             <td>{{data.total}}</td>
+            <td>{{data.startTime?(data.startTime|date:'yyyy-MM-dd HH:mm:ss'):'无'}}</td>
+            <td>{{data.endTime?(data.endTime|date:'yyyy-MM-dd HH:mm:ss'):'无'}}</td>
             <td>
               <div class="coop">
                 <button nz-button nzType="link" (click)="lookView(data)">查看视图</button>
@@ -43,50 +49,51 @@
   </div>
 </div>
 
-<!-- 右侧悬浮框 -->
-<div id="fixedMenu" class="fixed">
-  <div class="left" *ngIf="fixedTab == 'formManagement'">
-    <!-- 表单生成 -->
-    <div class="con" *ngIf="fixedTab == 'formManagement'">
-      <div class="title">表单生成</div>
+<!-- 表单生成按钮todo -->
+<div class="newOrder newOrder_todo display_flex justify-content_flex-center align-items_center" *ngIf="fixedTab == 'formManagement'">
+  <div class="modalBody">
+    <p class="title">
+      表单生成
+      <i class="icon_transport transport-guanbi" (click)="formManagementCancel()"></i>
+    </p>
+    <div class="content">
       <overlay-scrollbars [ngStyle]="{ height: '206px' }" class="conditions">
         <div nz-row>
-          <div nz-col nzSpan="6">其他临床服务：</div>
-          <div nz-col nzSpan="18">
+          <div nz-col nzSpan="5">日期选择：</div>
+          <div nz-col nzSpan="19">
+              <nz-range-picker nzShowTime [nzAllowClear]="false" nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="dateRange"></nz-range-picker>
+          </div>
+        </div>
+        <div nz-row class="mt8">
+          <div nz-col nzSpan="5">其他临床服务：</div>
+          <div nz-col nzSpan="19">
             <nz-radio-group [(ngModel)]="tasktypeId">
               <label nz-radio [nzValue]="option.id" *ngFor="let option of taskTypes">{{option.taskName}}</label>
             </nz-radio-group>
           </div>
         </div>
       </overlay-scrollbars>
-      <div class="btns display_flex justify-content_flex-center">
-        <button
-          nz-button
-          nzType="primary"
-          nzValue="small"
-          (click)="saveFormManagement()"
-        >
-          确认
-        </button>
-      </div>
     </div>
-  </div>
-  <div class="right">
-    <div class="fixedMenu hujiaozhongxin">
-      <div class="menuItems">
-        <button
-          nz-button
-          nzType="link"
-          class="item itemLink"
-          (click)="checkFixedTab('formManagement')"
-        >
-          表单生成
-        </button>
-      </div>
+    <div class="btns display_flex justify-content_flex-center align-items_center">
+      <button
+        nz-button
+        class="btn"
+        nzType="primary"
+        (click)="saveFormManagement()"
+      >
+        确认
+      </button>
+      <button
+        class="btn cancel"
+        nz-button
+        nzType="default"
+        (click)="formManagementCancel()"
+      >
+        取消
+      </button>
     </div>
   </div>
-  <div *ngIf="fixedTab != ''" (click)="fixedTab = ''" class="fixedMark"></div>
-</div>
+  </div>
 
 <!-- 表单生成 -->
 <div class="newOrder display_flex justify-content_flex-center align-items_center" *ngIf="fixedTab == 'formManagementTable'">

src/app/views/form-management/form-management.component.less

@@ -388,59 +388,6 @@
       }
     }
   }
-
-  .right {
-    // opacity: .5;
-    width: 80px;
-    float: left;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 5px 0 0 5px;
-    position: relative;
-    z-index: 8;
-
-    .fixedMenu {
-      border: 1px solid #e5e9ed;
-      color: @primary-color;
-      background: rgba(255, 255, 255, 0.5);
-      text-align: center;
-      border-radius: 5px 0 0 5px;
-      // box-shadow: -3px 4px 15px rgba(234, 233, 233, .5);
-
-      &.hujiaozhongxin {
-        margin-bottom: 5px;
-      }
-
-      .menuItems {
-        .item {
-          height: 35px;
-          line-height: 35px;
-          padding: 0 6px;
-          cursor: default;
-          border-bottom: 1px solid #e5e9ed;
-          user-select: none;
-          &.itemLink {
-            border-bottom: none;
-          }
-
-          &.checked {
-            background: #fff;
-            color: #52ab77;
-            opacity: 1;
-            box-shadow: -3px 4px 7px #eae9e9;
-          }
-        }
-
-        .others {
-          transition: height 0.4s linear;
-          overflow: hidden;
-        }
-      }
-
-      .arrow {
-        cursor: pointer;
-      }
-    }
-  }
 }
 
 // 表单生成弹框
@@ -452,6 +399,37 @@
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 999;
+  &.newOrder_todo{
+    .modalBody{
+      width: 625px;
+      height: auto;
+    }
+    .content{
+      padding: 16px;
+    }
+    .btns{
+      margin-top: 0;
+    }
+    .conditions {
+      & > .ant-row {
+        margin: 8px 0;
+        display: flex;
+        align-items: center;
+
+        .ant-row {
+          .ant-col-6 {
+            margin: 2px 0;
+          }
+        }
+
+        .checkAll {
+          width: 100%;
+          border-bottom: 1px solid rgb(233, 233, 233);
+          color: @primary-color;
+        }
+      }
+    }
+  }
 
   .modalBody {
     width: 1200px;

src/app/views/form-management/form-management.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { MainService } from "../../services/main.service";
 import { ToolService } from "../../services/tool.service";
 import { NzMessageService } from 'ng-zorro-antd';
+import { subDays, startOfHour, format } from 'date-fns';
 @Component({
   selector: "app-form-management",
   templateUrl: "./form-management.component.html",
@@ -26,11 +27,12 @@ export class FormManagementComponent implements OnInit {
   pageSize: number = 10; //表格每页展示条数
   listLength: number = 10; //表格总数据量
 
+  dateRange: any = [startOfHour(subDays(new Date().setHours(9), 1)), startOfHour(new Date().setHours(9))]; //日期选择
+
   ngOnInit() {
     this.hosId = this.tool.getCurrentHospital().id;
     this.getList();
     this.coopBtns = this.tool.initCoopBtns(this.route);
-    this.moveMenu();
     this.getTaskTypes();
   }
 
@@ -54,6 +56,9 @@ export class FormManagementComponent implements OnInit {
         gdState: {id: "433"},
         serTaskTypes: this.tasktypeId,
         time: 0,
+        reserveDate: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+        startTime1: this.dateRange[0] ? format(this.dateRange[0], 'yyyy-MM-dd HH:mm:ss') : undefined,
+        endTime1:  this.dateRange[1] ? format(this.dateRange[1], 'yyyy-MM-dd HH:mm:ss') : undefined,
       },
     };
     this.mainService.getFetchDataList("simple/data", "workOrder", postData).subscribe((data:any) => {
@@ -112,35 +117,9 @@ export class FormManagementComponent implements OnInit {
   // 切换右侧菜单Tab
   fixedTab: string = "";
   checkFixedTab(type: string) {
-    if (this.fixedTab == type) {
-      this.fixedTab = "";
-    } else {
-      this.fixedTab = type;
-    }
-  }
-
-  // 菜单拖拽
-  moveMenu() {
-    let fixedMenu = document.getElementById("fixedMenu");
-    if (!fixedMenu) return;
-    fixedMenu.onmousedown = function (e) {
-      fixedMenu.style.cursor = "move";
-      let y = e.clientY - fixedMenu.offsetTop;
-      document.onmousemove = function (ev) {
-        var _y = ev.clientY - y > 0 ? ev.clientY - y : 0;
-        var wh = window.innerHeight;
-        if (_y > wh - fixedMenu.clientHeight) {
-          _y = wh - fixedMenu.clientHeight;
-        }
-        fixedMenu.style.top = _y + "px";
-      };
-      document.onmouseup = function () {
-        fixedMenu.style.cursor = "default";
-        this.onmousemove = null;
-        this.onmouseup = null;
-      };
-      // return false;
-    };
+    this.dateRange = [startOfHour(subDays(new Date().setHours(9), 1)), startOfHour(new Date().setHours(9))];
+    this.tasktypeId = undefined;
+    this.fixedTab = type;
   }
 
   // 表格数据
@@ -173,6 +152,8 @@ export class FormManagementComponent implements OnInit {
       taskType: this.tasktypeId,
       hosId: this.hosId,
       deleteFlag: 0,
+      startTime: this.dateRange[0] ? format(this.dateRange[0], 'yyyy-MM-dd HH:mm:ss') : undefined,
+      endTime:  this.dateRange[1] ? format(this.dateRange[1], 'yyyy-MM-dd HH:mm:ss') : undefined,
     };
     this.isOkLoading = true;
     this.mainService