条码预制生成预制码

src/app/views/barcode-prefabrication/barcode-prefabrication.component.html

@@ -24,7 +24,7 @@
             <td>{{ data.codeType ? data.codeType.name : '' }}</td>
             <td>
               <div class="coop">
-                <span *ngIf="coopBtns.generateQRcode" (click)="generateQRcode(data.id)">生成</span>
+                <span *ngIf="coopBtns.generateQRcode" (click)="generateQRcode(data)">生成</span>
                 <span *ngIf="coopBtns.edit" (click)="edit(data)">修改</span>
                 <span *ngIf="coopBtns.del" (click)="del(data)">删除</span>
               </div>
@@ -89,39 +89,26 @@
 <!-- 生成模态框 -->
 <div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="generateModal">
   <div class="modalBody">
-    <div class="title">生成条码预制<i class="icon_transport transport-guanbi" (click)="hideGenerateModal()"></i>
+    <div class="title">条码生成<i class="icon_transport transport-guanbi" (click)="hideGenerateModal()"></i>
     </div>
     <overlay-scrollbars #osComponentRef1 class="content">
       <form nz-form [formGroup]="validateGenerateForm" class="addForm" (ngSubmit)="submitGenerateForm()">
-        <nz-form-item>
+        <nz-form-item *ngIf="coopData.snConfigDTO.dateType">
-          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="title">预制名称</nz-form-label>
+          <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="date">选择日期（{{dateText}}）</nz-form-label>
-          <nz-form-control nzErrorTip="请填写预制名称!">
+          <nz-form-control nzErrorTip="请选择日期（{{dateText}}）!">
-            <nz-input-group>
+            <div>
-              <input nz-input formControlName="title" placeholder="请填写预制名称" />
+              <nz-year-picker class="w100" *ngIf="isYear && !isMonth && !isDay" formControlName="date" nzPlaceHolder="请选择日期（{{dateText}}）"></nz-year-picker>
-            </nz-input-group>
+              <nz-month-picker class="w100" *ngIf="isYear && isMonth && !isDay" formControlName="date" nzPlaceHolder="请选择日期（{{dateText}}）"></nz-month-picker>
+              <nz-date-picker class="w100" *ngIf="isYear && isMonth && isDay" formControlName="date" nzPlaceHolder="请选择日期（{{dateText}}）"></nz-date-picker>
+            </div>
           </nz-form-control>
         </nz-form-item>
         <nz-form-item>
-          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="snConfig">序号名称</nz-form-label>
+          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="count">生成数量</nz-form-label>
-          <nz-form-control nzErrorTip="请选择序号名称!">
+          <nz-form-control nzErrorTip="请选择生成数量!">
-            <nz-select (nzOnSearch)="changeInp($event)" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear formControlName="snConfig" nzPlaceHolder="请选择序号名称">
+            <div style="margin-top: 15px;">
-              <ng-container *ngFor="let option of snConfigs">
+              <nz-input-number nz-input formControlName="count" nzPlaceHolder="请填写生成数量" [nzMin]="1" [nzStep]="1" [nzPrecision]="0"></nz-input-number>
-                <nz-option *ngIf="!isLoading" [nzLabel]="option.title" [nzValue]="option.id"></nz-option>
+            </div>
-              </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>
-          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="codeType">条码样式</nz-form-label>
-          <nz-form-control nzErrorTip="请选择条码样式!">
-            <nz-select [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear
-              formControlName="codeType" nzPlaceHolder="请选择条码样式">
-              <nz-option [nzLabel]="data.name" [nzValue]="data.id" *ngFor="let data of codeTypes">
-              </nz-option>
-            </nz-select>
           </nz-form-control>
         </nz-form-item>
       </form>
@@ -142,3 +129,36 @@
 
 <!-- 遮罩 -->
 <app-mask *ngIf="maskFlag"></app-mask>
+
+<!-- 打印二维码的内容 -->
+<div id="print-section" hidden>
+  <table>
+    <tr style="width: 80mm;height: 60mm;overflow: hidden;box-sizing: border-box;page-break-inside:avoid;" *ngFor="let item of codeList">
+      <td style="padding:0;">
+        <div style="display: flex;justify-content: center;align-items: center;height: 15mm;background-color: #F4EE17;-webkit-print-color-adjust: exact;font-size: 5mm;letter-spacing: 1mm;font-weight: bold;">
+          医疗废物标签
+        </div>
+        <div style="display:flex;overflow: hidden;height: 45mm;">
+          <img [src]="item.qrCode" style="height: 100%;box-shadow: 1mm #f2f2f2;">
+          <div style="flex: 1;">
+            <div style="font-size: 3mm;margin: 2mm 1mm 1mm;">医废序号:{{item.clinicalWasteSn}}</div>
+            <div style="font-size: 3mm;margin: 1mm;">科室名称:_______________</div>
+            <div style="font-size: 3mm;margin: 1mm; overflow: hidden;">
+              <p style="float: left;margin: 0;">医废类型:</p>
+              <ul style="margin:0;padding: 0;list-style-type: none;float: right;">
+                <li><span style="display: inline-block;width: 3mm;height: 3mm;border:1px solid #000;position: relative;top: 0.5mm;margin-right: 1mm;"></span>感染性废物</li>
+                <li style="margin-top: 1mm;"><span style="display: inline-block;width: 3mm;height: 3mm;border:1px solid #000;position: relative;top: 0.5mm;margin-right: 1mm;"></span>感染性废物</li>
+                <li style="margin-top: 1mm;"><span style="display: inline-block;width: 3mm;height: 3mm;border:1px solid #000;position: relative;top: 0.5mm;margin-right: 1mm;"></span>感染性废物</li>
+                <li style="margin-top: 1mm;"><span style="display: inline-block;width: 3mm;height: 3mm;border:1px solid #000;position: relative;top: 0.5mm;margin-right: 1mm;"></span>感染性废物</li>
+                <li style="margin-top: 1mm;"><span style="display: inline-block;width: 3mm;height: 3mm;border:1px solid #000;position: relative;top: 0.5mm;margin-right: 1mm;"></span>感染性废物</li>
+                <li style="margin-top: 1mm;"><span style="display: inline-block;width: 3mm;height: 3mm;border:1px solid #000;position: relative;top: 0.5mm;margin-right: 1mm;"></span>感染性废物</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </table>
+</div>
+<button ngxPrint printSectionId="print-section" #printBtn hidden [printStyle]="{ '@page': { margin: '0 !important' }, 'body': { margin: '0 !important' } }">打印</button>
+

src/app/views/barcode-prefabrication/barcode-prefabrication.component.less

@@ -42,7 +42,6 @@
       margin-top: 12px;
 
       div {
-        text-align: center;
         margin: 0;
 
         &.icon {

src/app/views/barcode-prefabrication/barcode-prefabrication.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { FormBuilder, Validators, FormGroup } from "@angular/forms";
+import { FormBuilder, Validators, FormGroup, FormControl } from "@angular/forms";
 
 import { MainService } from "../../services/main.service";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx";
@@ -8,6 +8,7 @@ import { ToolService } from "../../services/tool.service";
 import { NzMessageService } from "ng-zorro-antd";
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { format } from 'date-fns';
 
 @Component({
   selector: "app-barcode-prefabrication",
@@ -15,6 +16,7 @@ import { debounceTime } from 'rxjs/operators';
   styleUrls: ["./barcode-prefabrication.component.less"],
 })
 export class BarcodePrefabricationComponent implements OnInit {
+  @ViewChild('printBtn', { static: false }) printBtn: ElementRef<HTMLElement>;
   @ViewChild("osComponentRef1", {
     read: OverlayScrollbarsComponent,
     static: false,
@@ -224,8 +226,30 @@ export class BarcodePrefabricationComponent implements OnInit {
   }
 
   // 生成
-  generateQRcode(id) {
+  dateText: string = '';
-    this.coopId = id;
+  isYear: boolean = false;
+  isMonth: boolean = false;
+  isDay: boolean = false;
+  generateQRcode(data) {
+    this.coopData = data;
+    if(this.coopData.snConfigDTO.dateType){
+      this.dateText = '';
+      this.isYear = false;
+      this.isMonth = false;
+      this.isDay = false;
+      if(this.coopData.snConfigDTO.dateType.name.includes('y')){
+        this.dateText += '年';
+        this.isYear = true;
+      }
+      if(this.coopData.snConfigDTO.dateType.name.includes('m')){
+        this.dateText += '月';
+        this.isMonth = true;
+      }
+      if(this.coopData.snConfigDTO.dateType.name.includes('d')){
+        this.dateText += '日';
+        this.isDay = true;
+      }
+    }
     this.showGenerateModal();
   }
 
@@ -243,40 +267,47 @@ export class BarcodePrefabricationComponent implements OnInit {
   // 初始化新增form表单
   initGenerateForm() {
     this.validateGenerateForm = this.fb.group({
-      title: [null, [Validators.required]],
+      date: [null, [Validators.required]],
-      snConfig: [null, [Validators.required]],
+      count: [1, [Validators.required]],
-      codeType: [null, [Validators.required]],
     });
+    if(this.coopData.snConfigDTO.dateType){
+      this.validateGenerateForm.addControl(
+        'date',
+        new FormControl(null, Validators.required)
+      );
+    }else{
+      this.validateGenerateForm.removeControl('date');
+    }
   }
   // 生成表单提交
+  codeList: any[] = [];
   submitGenerateForm(): void {
-    // todo
+    console.log(this.validateGenerateForm.value)
-    return;
+    for (const i in this.validateGenerateForm.controls) {
-    for (const i in this.validateForm.controls) {
+      this.validateGenerateForm.controls[i].markAsDirty({ onlySelf: true });
-      this.validateForm.controls[i].markAsDirty({ onlySelf: true });
+      this.validateGenerateForm.controls[i].updateValueAndValidity();
-      this.validateForm.controls[i].updateValueAndValidity();
     }
-    if (this.validateForm.invalid) return;
+    if (this.validateGenerateForm.invalid) return;
     this.btnLoading = true;
-    let data:any = {
+    let postData:any = {
-      title: this.validateForm.value.title,
+      count: this.validateGenerateForm.value.count,
-      snConfig: this.validateForm.value.snConfig,
+      date: this.validateGenerateForm.value.date ? format(this.validateGenerateForm.value.date, 'yyyy-MM-dd HH:mm:ss') : undefined,
-      codeType: this.validateForm.value.codeType ? { id: this.validateForm.value.codeType } : undefined,
+      id: this.coopData.id,
-      hosId: this.hosId,
     };
-    if (!this.add) {
-      data = {...data, ...this.coopData};
-    }
     this.mainService
-      .simplePost("addData", "precastCode", data)
+      .coopWorkerOrder("generatePrecastCode", postData)
       .subscribe((data) => {
         this.btnLoading = false;
-        this.hideModal();
+        this.hideGenerateModal();
-        this.initForm();
+        this.initGenerateForm();
-        if (data.status == 200) {
+        if (data.state == 200) {
-          this.showPromptModal(this.add ? "新增" : "编辑", true, "");
+          this.codeList = data.data || [];
+          // 打印
+          setTimeout(()=>{
+            this.printBtn.nativeElement.click();
+          }, )
         } else {
-          this.showPromptModal(this.add ? "新增" : "编辑", false, data.msg);
+          this.showPromptModal("生成", false, data.msg);
         }
       });
   }

src/app/views/barcode-prefabrication/barcode-prefabrication.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { BarcodePrefabricationRoutingModule } from './barcode-prefabrication-routing.module';
 import { BarcodePrefabricationComponent } from './barcode-prefabrication.component';
 import { ShareModule } from 'src/app/share/share.module';
+import { NgxPrintModule } from 'ngx-print';
 
 
 @NgModule({
@@ -13,7 +14,8 @@ import { ShareModule } from 'src/app/share/share.module';
   imports: [
     CommonModule,
     BarcodePrefabricationRoutingModule,
-    ShareModule
+    ShareModule,
+    NgxPrintModule,
   ]
 })
 export class BarcodePrefabricationModule { }

src/app/views/serial-number-setting/serial-number-setting.component.html

@@ -70,9 +70,9 @@
         <nz-form-item>
           <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="length">自增长位数</nz-form-label>
           <nz-form-control nzErrorTip="请填写自增长位数!">
-            <nz-input-group>
+            <div style="margin-top: 15px;">
               <nz-input-number nz-input formControlName="length" nzPlaceHolder="请填写自增长位数" [nzMin]="1" [nzStep]="1" [nzPrecision]="0"></nz-input-number>
-            </nz-input-group>
+            </div>
           </nz-form-control>
         </nz-form-item>
         <nz-form-item>

src/app/views/serial-number-setting/serial-number-setting.component.less

@@ -42,7 +42,6 @@
       margin-top: 12px;
 
       div {
-        text-align: center;
         margin: 0;
 
         &.icon {