修改代码

src/app/admin/config-manage/goods-type/goods-type.component.html

@@ -81,8 +81,22 @@
         </nz-form-item>
         <nz-form-item>
             <nz-form-label [nzSpan]="4" nzRequired>图片</nz-form-label>
-            <nz-form-control [nzSpan]="20" nzErrorTip="请输入标题!">
-                <input nz-input placeholder="请输入标题..."  [formControlName]="'title'" />
+            <nz-form-control [nzSpan]="20" nzErrorTip="请上传图片!">
+                <nz-upload
+                        nzAction="{{WEB_SERVE_URL}}/fileUpload/uploadfile"
+                        nzListType="picture-card"
+                        [(nzFileList)]="imgFile"
+                        [nzShowButton]="imgFile.length < 1"
+                        [nzPreview]="handlePreview"
+                >
+                    <i nz-icon nzType="plus"></i>
+                    <div class="ant-upload-text">上传图片</div>
+                </nz-upload>
+                <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
+                    <ng-template #modalContent>
+                        <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
+                    </ng-template>
+                </nz-modal>
             </nz-form-control>
         </nz-form-item>
     </form>

src/app/admin/config-manage/goods-type/goods-type.component.ts

@@ -2,10 +2,19 @@ import { Component, OnInit } from '@angular/core';
 import {environment} from '../../../../environments/environment';
 import {FormBuilder, FormGroup, Validators} from '_@angular_forms@9.0.7@@angular/forms';
 import {IconService} from '../../../services/icon.service';
-import {NzMessageService} from '_ng-zorro-antd@9.3.0@ng-zorro-antd';
+import {NzMessageService, NzUploadFile} from '_ng-zorro-antd@9.3.0@ng-zorro-antd';
 import {Router} from '_@angular_router@9.0.7@@angular/router';
 import {ConfigService} from '../../../services/config.service';
 
+function getBase64(file: File): Promise<string | ArrayBuffer | null> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+
 @Component({
   selector: 'app-goods-type',
   templateUrl: './goods-type.component.html',
@@ -13,7 +22,7 @@ import {ConfigService} from '../../../services/config.service';
 })
 export class GoodsTypeComponent implements OnInit {
 
-  WEB_SERVE_URL = environment.imageUrl;
+  WEB_SERVE_URL = environment.baseUrl;
   searchForm: FormGroup; // 搜索框
   requestData = []; // 列表数据
   total: number; // 页码
@@ -21,9 +30,12 @@ export class GoodsTypeComponent implements OnInit {
   pageSize = 10; // 条码
   loading = true;
   isVisible = false;
-  id;
+  editFlag = false;
+  id: number;
   validateForm!: FormGroup;
-
+  imgFile = [];
+  previewImage: string | undefined = '';
+  previewVisible = false;
   constructor(
       private form: FormBuilder,
       private config: ConfigService,
@@ -44,11 +56,20 @@ export class GoodsTypeComponent implements OnInit {
     });
     this.validateForm = this.fb.group({
       title: [null, [Validators.required]],
-      img: [null, [Validators.required]],
     });
     this.getRequest(true, this.searchForm.value);
   }
 
+  // 图片查看
+  handlePreview = async (file: NzUploadFile) => {
+    if (!file.url && !file.preview) {
+      // tslint:disable-next-line:no-non-null-assertion
+      file.preview = await getBase64(file.originFileObj!);
+    }
+    this.previewImage = file.url || file.preview;
+    this.previewVisible = true;
+  }
+
   // 查询列表
   public getRequest(reset: boolean = false, whereObject: object) {
 
@@ -91,7 +112,43 @@ export class GoodsTypeComponent implements OnInit {
   }
 
   handleOk(): void {
-    this.isVisible = false;
+    // tslint:disable-next-line:forin
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+      if (this.validateForm.controls[i].errors != null) {
+        this.message.error('必填项不能为空');
+        return;
+      }
+    }
+
+    if (this.imgFile.length !== 0) {
+      if (this.imgFile[0]['response'] != null) {
+        this.validateForm.value.img = this.imgFile[0]['response']['return_data'][0];
+      } else {
+        this.validateForm.value.img = this.imgFile[0].name;
+      }
+    }
+    if (this.editFlag) {
+      this.validateForm.value.id = this.id;
+      this.config.insertGoodsType(this.validateForm.value, data => {
+        if (data['return_code'] === '000000') {
+          this.message.success('修改成功');
+        } else {
+          this.message.create('error', '修改失败');
+        }
+      });
+    } else {
+
+      this.config.insertGoodsType(this.validateForm.value, data => {
+        console.log(data);
+        if (data['return_code'] === '000000') {
+          this.message.success('添加成功');
+        } else {
+          this.message.create('error', data['return_msg']);
+        }
+      });
+    }
   }
 
   handleCancel(): void {

src/app/services/config.service.ts

@@ -31,8 +31,8 @@ export class ConfigService {
    * @param  callBack   回调
    * @return data 返回结果
    */
-  public addCompanyAndUser(params: object, callBack) {
-    this.http.post(environment.baseUrl + 'bsCompany/addCompanyAndUser', params).subscribe(data => {
+  public insertGoodsType(params: object, callBack) {
+    this.http.post(environment.baseUrl + 'highGoodsType/insertGoodsType', params).subscribe(data => {
       callBack(data);
     });
   }