被服视图

src/app/app-routing.module.ts

@@ -62,6 +62,11 @@ const routes: Routes = [
     loadChildren: () => import('./views/specimen-view2/specimen-view2.module').then(m => m.SpecimenView2Module),
     canActivate: [SpecimenView2Guard]
   },
+  // 洗涤批次视图
+  {
+    path: 'washingBatchView',
+    loadChildren: () => import('./views/washing-batch-view/washing-batch-view.module').then(m => m.WashingBatchViewModule),
+  },
   // 全局业务查看
   {
     path: 'disinfectionSupply',

src/app/views/washing-batch-view/washing-batch-view-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { WashingBatchViewComponent } from "./washing-batch-view.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: WashingBatchViewComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class WashingBatchViewRoutingModule {}

src/app/views/washing-batch-view/washing-batch-view.component.html

@@ -0,0 +1,60 @@
+<div class="washingBatchView">
+  <!-- 头部 -->
+  <div class="head">
+    <div class="logo"><img [src]="tool.logoUrl" [alt]="tool.logoTitle"></div>
+    <div class="title">被服洗涤</div>
+  </div>
+  <!-- 主体 -->
+  <div class="main">
+    <div class="search top display_flex justify-content_space-between align-items_center">
+      <div class="flex_1 display_flex">
+        <div class="searchItem">
+          <span class="label">父级被服分类</span>：
+          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
+            nzPlaceHolder="请选择父级被服分类" [(ngModel)]="searchDto.parent">
+            <ng-container *ngFor="let data of parentList">
+              <nz-option [nzLabel]="data.name" [nzValue]="data.id"></nz-option>
+            </ng-container>
+          </nz-select>
+        </div>
+        <div class="searchItem">
+          <span class="label">被服分类</span>：
+          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
+            nzPlaceHolder="请选择被服分类" [(ngModel)]="searchDto.child">
+            <ng-container *ngFor="let data of childList">
+              <nz-option [nzLabel]="data.name" [nzValue]="data.id"></nz-option>
+            </ng-container>
+          </nz-select>
+        </div>
+      </div>
+      <div class="display_flex align-items_center">
+        <button nzType="primary" nz-button>搜索</button>
+        <button nzType="primary" nz-button>打印功能</button>
+        <button nzType="primary" nz-button>查看异常</button>
+        <button nzType="primary" nz-button>批量送回</button>
+      </div>
+    </div>
+    <div class="list">
+      <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
+        [nzLoading]="loading" [nzScroll]="{ x: '100%', y: scrollY + 'px' }">
+        <thead>
+          <tr class="thead">
+            <th nzLeft="0px" nzAlign="center" nzWidth="50px" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked"
+              (nzCheckedChange)="checkAll($event)"></th>
+            <th [nzLeft]="first ? '50px' : null" [nzRight]="last ? '0px' : null" nzAlign="center" [nzWidth]="(first || last) ? '150px' : '70px'" *ngFor="let row of rows;let first = first;let last = last;">{{ row }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of listOfData;let index=index;" (click)="selectedListData(data)">
+            <td nzLeft="0px" nzAlign="center" nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
+            <td [nzLeft]="first ? '50px' : null" [nzRight]="last ? '0px' : null" nzAlign="center" *ngFor="let row of data;let first = first;let last = last;">{{ row }}</td>
+          </tr>
+        </tbody>
+      </nz-table>
+    </div>
+    <div class="bottom">
+      <strong>总件数：1365件</strong>
+      <strong>总费用：4089.4元</strong>
+    </div>
+  </div>
+</div>

src/app/views/washing-batch-view/washing-batch-view.component.less

@@ -0,0 +1,113 @@
+@import "../../../../src/theme.less";
+:host {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #F9FAFB;
+  .washingBatchView{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    // 头部
+    .head{
+      height: 130px;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      .logo{
+        width: 300px;
+        height: 100%;
+        padding: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-right: 1px solid #E7E7E7;
+        img{
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+
+      .title{
+        font-size: 30px;
+        font-weight: bold;
+        color: @primary-color;
+        margin-left: 30px;
+      }
+    }
+
+    // 主体
+    .main{
+      margin: 20px;
+      background-color: #fff;
+      border: 1px solid #E3E3E3;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .search{
+        height: 75px;
+        &.top {
+          height: 74px;
+          padding: 0 16px;
+          line-height: 74px;
+          border-bottom: 1px solid #e5e9ed;
+          position: relative;
+          z-index: 2;
+
+          & > div {
+            input {
+              width: 224px;
+            }
+
+            button {
+              margin-left: 8px;
+              width: 117px;
+              height: 45px;
+              font-size: 20px;
+            }
+          }
+        }
+        .searchItem {
+          font-size: 20px;
+          .label {
+            margin-left: 16px;
+            color: #333;
+            display: inline-block;
+            text-align-last: justify;
+            text-align: justify;
+          }
+          .formItem {
+            width: 150px;
+            font-size: 18px;
+          }
+        }
+      }
+      .list{
+        flex: 1;
+        th{
+          background-color: #7FD98A!important;
+          color: #fff!important;
+          font-size: 22px;
+        }
+        td{
+          font-size: 20px;
+          &:first-of-type{
+            font-size: 22px;
+          }
+        }
+      }
+      .bottom{
+        height: 90px;
+        padding-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+        strong{
+          font-size: 22px;
+          margin-right: 25px;
+          color: @primary-color;
+        }
+      }
+    }
+  }
+}

src/app/views/washing-batch-view/washing-batch-view.component.ts

@@ -0,0 +1,142 @@
+import { Component, OnInit, AfterViewInit, HostListener } from "@angular/core";
+import { ToolService } from 'src/app/services/tool.service';
+import { fromEvent } from 'rxjs';
+import { MainService } from 'src/app/services/main.service';
+
+@Component({
+  selector: "app-washing-batch-view",
+  templateUrl: "./washing-batch-view.component.html",
+  styleUrls: ["./washing-batch-view.component.less"],
+})
+export class WashingBatchViewComponent implements OnInit, AfterViewInit {
+  constructor(
+    public tool: ToolService,
+    private mainService: MainService,
+  ){}
+
+  ngOnInit() {
+    this.hosId = this.tool.getCurrentHospital().id;
+    this.getParentList();
+    this.getChildList();
+  }
+
+  ngAfterViewInit(){
+    this.resizeInit();
+  }
+  _timer = null;
+  @HostListener('window:resize')
+  resizeInit(){
+    clearTimeout(this._timer);
+    this._timer = setTimeout(() => {
+      this.scrollY = window.innerHeight - 383;
+    }, 500)
+  }
+
+  listOfData: any[] = [
+    ['眼科康复科睡', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+    ['大势科室', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18.05],
+  ]; //表格数据
+  loading:boolean = false;
+  isAllDisplayDataChecked = false; //当前页是否全选
+  mapOfCheckedId: { [key: string]: boolean } = {};
+  checkedDepIds = []; //已选中单列id
+  scrollY:number = 0;
+  hosId:any;
+  searchDto:any = {
+    parent: null,
+  }
+  parentList: Array<any> = []; //父级分类数据字典信息
+  childList: Array<any> = []; //分类数据字典信息
+  rows:any[] = ['', '双单', '洗手衣上', '大包布', '中包布', '隔离衣', '无菌巾', '小洞巾', '大洞巾', '小毛巾', '病员服', '仪器套', '裤腿', '床套', '沙发套', '窗帘', '隔帘', '浴巾', '件数', '费用/元'];
+
+  // 全选
+  checkAll(value: boolean): void {
+    this.listOfData.forEach((item) => {
+      this.mapOfCheckedId[item.id] = value;
+    });
+    this.refreshStatus();
+  }
+
+  // 单选
+  refreshStatus(): void {
+    this.isAllDisplayDataChecked = this.listOfData.every(
+      (item) => this.mapOfCheckedId[item.id]
+    );
+    let arr = [];
+    for (var k in this.mapOfCheckedId) {
+      if (this.mapOfCheckedId[k]) {
+        arr.push(Number(k));
+      }
+    }
+    this.checkedDepIds = arr;
+  }
+
+  // 整行操作
+  selectedListData(data) {
+    this.mapOfCheckedId[data.id] = !this.mapOfCheckedId[data.id];
+    this.refreshStatus();
+  }
+
+  // 获取父级分类
+  getParentList() {
+    let postData = {
+      idx: 0,
+      sum: 9999,
+      dictionaryTree: {
+        hosId: this.hosId,
+        level: 1,
+        key: 'clothes_type_parent',
+        deleted: 0,
+      },
+    };
+    this.mainService
+      .getFetchDataList("simple/data", "dictionaryTree", postData)
+      .subscribe((result) => {
+        if(result.status == 200){
+          this.parentList = result.list || [];
+        }
+      });
+  }
+
+  // 获取分类
+  getChildList() {
+    let postData = {
+      idx: 0,
+      sum: 9999,
+      dictionaryTree: {
+        hosId: this.hosId,
+        level: 2,
+        key: 'clothes_type',
+        deleted: 0,
+      },
+    };
+    this.mainService
+      .getFetchDataList("simple/data", "dictionaryTree", postData)
+      .subscribe((result) => {
+        if(result.status == 200){
+          this.childList = result.list || [];
+        }
+      });
+  }
+}
+

src/app/views/washing-batch-view/washing-batch-view.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { WashingBatchViewRoutingModule } from './washing-batch-view-routing.module';
+import { ShareModule } from 'src/app/share/share.module';
+import { WashingBatchViewComponent } from './washing-batch-view.component';
+
+
+@NgModule({
+  declarations: [WashingBatchViewComponent],
+  imports: [
+    CommonModule,
+    WashingBatchViewRoutingModule,
+    ShareModule
+  ]
+})
+export class WashingBatchViewModule { }