fix bug

src/app/routes/supply-management/model/import-supply/import-supply.component.html

@@ -4,42 +4,47 @@
  * @Author       : Shiming
  * @Date         : 2021-12-03 11:10:14
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-03-02 09:46:36
+ * @LastEditTime : 2022-03-02 20:29:46
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\supply-management\\model\\import-supply\\import-supply.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <div *ngIf="status">
   <sf #sf mode="edit" [schema]="schema" [ui]="ui" button="none">
-    <ng-template sf-template="resourceCode2" let-me let-ui="ui" let-schema="schema">
+    <ng-template sf-template="fileName" let-me let-ui="ui" let-schema="schema">
-      <input readonly nz-input placeholder="请选择上传文件" [(ngModel)]="files2" />
+      <nz-input-group [nzSuffix]="inputClearTpl">
-      <nz-upload
+        <input type="text" readonly nz-input [(ngModel)]="me.formProperty.value" placeholder="请上传文件" />
-        [nzAction]="service.$api_upload_url"
+      </nz-input-group>
-        [nzName]="'multipartFile'"
+      <ng-template #inputClearTpl>
-        [nzHeaders]="{ authorization: 'authorization-text' }"
+        <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="me.formProperty.value"
+          (click)="clearFile()"></i>
+      </ng-template>
+    </ng-template>
+    <ng-template sf-template="file" let-me let-ui="ui" let-schema="schema">
+
+      <nz-upload [nzAction]="uploadUrl" [nzName]="'multipartFile'" [nzHeaders]="{ authorization: 'authorization-text' }"
         [(nzFileList)]="files"
-        (nzChange)="handleChange($event)"
+        [nzAccept]="'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'"
-        [nzShowUploadList]="false"
+        (nzChange)="handleChange($event)" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload" [nzLimit]="1">
-        [nzBeforeUpload]="beforeUpload"
-      >
         <div>
-          <button nz-button style="color: #ff4d4f; margin-top: 5px">
+          <button nzType="primary" nz-button>
             <i nz-icon nzType="upload"></i>
             上传文件
           </button>
         </div>
       </nz-upload>
-      <span style="color: #ff4d4f; font-size: 12px;margin-left: 10px; cursor: pointer;" (click)="downFile()">下载导入模板</span>
+      <span style="color: #ff4d4f; font-size: 12px;margin-left: 10px; cursor: pointer;"
-      <div style="color: #ff4d4f; font-size: 12px; margin-top: 5px; width: 400px">仅支持XLX / XLSX文件格式，最多不能超过100行数据</div>
+        (click)="downFile()">下载导入模板</span>
+      <div style="color: #ff4d4f; font-size: 12px; margin-top: 5px; width: 400px">仅支持XLS / XLSX文件格式，最多不能超过100行数据</div>
     </ng-template>
   </sf>
-  <sv-container col="1" >
+  <div>
-    <sv style="height: 20px;">注意：</sv>
+    <p class="mb-xs">注意：</p>
-    <sv style="height: 20px;">1、第一次上传请点击下载模板</sv>
+    <p class="mb-xs">1、第一次上传请点击下载模板</p>
-    <sv style="height: 20px;">2、请不要调整模板顺序</sv>
+    <p class="mb-xs">2、请不要调整模板顺序</p>
-    <sv style="height: 20px;">3、必填字段请务必填写</sv>
+    <p class="mb-xs">3、必填字段请务必填写</p>
-    <sv style="height: 20px;">4、如果不清楚字段值，请参考货源发布功能</sv>
+    <p class="mb-xs">4、如果不清楚字段值，请参考货源发布功能</p>
-    <sv style="height: 20px;">5、发布成功后，可在货源列表-待接单查看</sv>
+    <p class="mb-xs">5、发布成功后，可在货源列表-待接单查看</p>
-  </sv-container>
+    <div>
 </div>
 <div *ngIf="!status">
   文件上传成功！成功xx条，失败xx条！

src/app/routes/supply-management/model/import-supply/import-supply.component.ts

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-03-01 15:13:03
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-03-02 10:32:15
+ * @LastEditTime : 2022-03-02 20:57:36
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\supply-management\\model\\import-supply\\import-supply.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -18,6 +18,7 @@ import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
 import { Observable, Observer, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { SupplyManagementService } from '../../services/supply-management.service';
+import { apiConf } from '@conf/api.conf';
 
 @Component({
   selector: 'app-supply-management-import-supply',
@@ -30,6 +31,8 @@ export class SupplyManagementImportSupplyComponent implements OnInit {
   files2: any;
   schema: SFSchema = {};
   ui: SFUISchema = {};
+  fileName: any;
+  uploadUrl = apiConf.file_upload_url;
   @ViewChild('sf', { static: false }) sf!: SFComponent;
   constructor(
     private modal: NzModalRef,
@@ -70,17 +73,18 @@ export class SupplyManagementImportSupplyComponent implements OnInit {
               let str =q.replace(/^\s+|\s+$/g,"");
               if (str) {
                 this.getRegionCode(str);
+                this.getRegionCode2(str);
               }
             }
           } as SFSelectWidgetSchema
         },
-        resourceCode: {
+        netTranName: {
           type: 'string',
           title: '网络货运人',
           ui: {
-            widget: 'select',
+            widget: 'text',
-            placeholder: '请选择'
+          },
-          } as SFSelectWidgetSchema
+          default: '确认货主后带出'
         },
         enterpriseProjectId: {
           type: 'string',
@@ -90,21 +94,29 @@ export class SupplyManagementImportSupplyComponent implements OnInit {
             placeholder: '请选择'
           } as SFSelectWidgetSchema
         },
-        resourceCode2: {
+        fileName: {
           type: 'string',
           title: '导入货源信息',
           ui: {
             widget: 'custom'
           }
         },
+        file: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'custom'
+          }
+        },
       },
-      required: ['shipperAppUserId', 'enterpriseProjectId','resourceCode2',],
+      required: ['shipperAppUserId', 'enterpriseProjectId','netTranName','fileName'],
     };
     this.ui = {
       '*': {
+        spanLabelFixed: 130,
         grid: { span: 20 },
       },
-      '$resourceCode2': {
+      '$fileName': {
         spanLabelFixed: 130,
         grid: { span: 20 },
       },
@@ -134,22 +146,15 @@ export class SupplyManagementImportSupplyComponent implements OnInit {
   getRegionCode2(regionCode: any) {
     console.log(regionCode);
     return this.service
-      .request(this.service.$api_getNetworkTransporter, { id: regionCode })
+      .request(this.service.$api_getNetworkTransporter, { id: regionCode }).subscribe((res: any) => {
-      .pipe(
+        console.log(res?.netTranName)
-        map(res =>
+        console.log(res?.networkTransporter)
-          res.map((item: any) => ({
+        this.sf.getProperty('/netTranName')!.widget.reset(res?.netTranName);
-            label: item.projectName,
+        this.sf.setValue('/netTranName', res?.netTranName)
-            value: item.id
-          }))
-        )
-      )
-      .subscribe(res => {
-        // this.sf.getProperty('/enterpriseProjectId')!.schema.enum = res;
-        // this.sf.getProperty('/enterpriseProjectId')!.widget.reset(res);
       });
   }
   save(): void {
-    console.log(this.files)
+    console.log(this.sf.value)
     // this.service.request(this.service.$api_update_price, { id, freightType, freightPrice, resourceCode, rule, resourceId }).subscribe(res => {
     //   if (res) {
     //     this.msgSrv.success('保存成功');
@@ -162,33 +167,28 @@ export class SupplyManagementImportSupplyComponent implements OnInit {
     this.modal.destroy();
   }
   handleChange(info: NzUploadChangeParam): void {
-    switch (info.file.status) {
+    switch (info?.file?.status) {
       case 'uploading':
         break;
       case 'done':
-        let fileList = [...info.fileList];
+        let file = info?.file;
-        // 2. Read from response and show file link
+        let fileName = file?.response.name;
-        fileList = fileList.map((file: any) => {
+        this.sf?.setValue('/fileName', fileName);
-          if (file.response) {
+        this.sf?.setValue('/file', file?.response?.url);
-            file.url = file.response.data.fullFilePath;
-          }
-          return file;
-        });
-        this.files2 = fileList[0].name
         break;
       case 'error':
-        this.service.msgSrv.error('网络错误');
+        this.service.msgSrv.error('出错误了');
         break;
     }
   }
   beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
     return new Observable((observer: Observer<boolean>) => {
-      const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+      // const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-      if (!isJpgOrPng) {
+      // if (!isJpgOrPng) {
-        this.service.msgSrv.error('仅支持XLX / XLSX文件格式');
+      //   this.service.msgSrv.error('仅支持XLX / XLSX文件格式');
-        observer.complete();
+      //   observer.complete();
-        return;
+      //   return;
-      }
+      // }
       // tslint:disable-next-line: no-non-null-assertion
       const isLt2M = file.size! / 1024 / 1024 < 3;
       if (!isLt2M) {
@@ -196,10 +196,15 @@ export class SupplyManagementImportSupplyComponent implements OnInit {
         observer.complete();
         return;
       }
-      observer.next(isJpgOrPng && isLt2M);
+      observer.next(isLt2M);
       observer.complete();
     });
   };
+  clearFile() {
+    this.fileName = null;
+    this.sf?.setValue('/fileName', null);
+    this.sf?.setValue('/file', null);
+  }
   downFile() {
    this.service.downloadFile(this.service.$api_exportGoodsResourceOperateTemplate);
   }

src/conf/api.conf.ts

@@ -9,5 +9,9 @@ export const apiConf = {
   /**
    * 文件上传路径(水印)
    */
-  waterFileUpload: `/api/mdc/pbc/upload/multipartFile/watermarkFile`
+  waterFileUpload: `/api/mdc/pbc/upload/multipartFile/watermarkFile`,
+  /**
+   * 上传文件，返回fileModel
+   */
+  file_upload_url: '/api/mdc/pbc/upload/multipartFile/fileModel'
 };