1

src/app/pages/goods/goods-type/goods-type.component.html

@@ -1,20 +1,19 @@
-<form nz-form [formGroup]="searchForm">
+
+<form nz-form [formGroup]="searchForm" class="search_form" [nzLayout]="'vertical'">
   <div nz-row [nzGutter]="24">
-    <div nz-col [nzSpan]="8" *ngFor="let item of goodsTypeSearch">
+    <div nz-col [nzSpan]="6"  *ngFor="let item of goodsTypeSearch">
       <nz-form-item>
         <nz-form-label>{{item.title}}</nz-form-label>
         <nz-form-control>
-          <input nz-input formControlName="{{item.formControlName}}" />
+          <input nz-input formControlName="{{item.formControlName}}" placeholder="请输入" />
         </nz-form-control>
       </nz-form-item>
     </div>
 
-    <div nz-col [nzSpan]="8">
-      <div class="search-area">
-        <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
-        <button nz-button (click)="searchFormReset()">重置</button>
-<!--        <button nz-button [nzType]="'primary'" (click)="showEdit(true, null)">创建</button>-->
-      </div>
+    <div nz-col [nzSpan]="6" class="search-area">
+      <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">查询</button>
+      <button nz-button (click)="searchForm.reset()">重置</button>
+      <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">创建</button>
     </div>
   </div>
 </form>

src/app/pages/goods/goods-type/goods-type.component.less

@@ -1,6 +1,12 @@
-.search-area {
-  text-align: center;
+[nz-form-label] {
+  overflow: visible;
 }
 button {
   margin-left: 8px;
 }
+.submit-btn {
+  width: 150px;
+}
+.search-area {
+  margin-top: 30px;
+}

src/app/pages/goods/goods-type/goods-type.component.ts

@@ -10,6 +10,7 @@ import {NzMessageService} from "ng-zorro-antd/message";
 import {NzModalService} from "ng-zorro-antd/modal";
 import {NgForOf} from "@angular/common";
 import {goodsTypeSearch} from "../../../data/goods/goods.namespace";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
 
 @Component({
   selector: 'app-goods-type',
@@ -25,7 +26,9 @@ import {goodsTypeSearch} from "../../../data/goods/goods.namespace";
         NzInputDirective,
         NzRowDirective,
         ReactiveFormsModule,
-    NgForOf
+        NgForOf,
+        NzOptionComponent,
+        NzSelectComponent
     ],
   templateUrl: './goods-type.component.html',
   styleUrl: './goods-type.component.less'
@@ -48,10 +51,5 @@ export class GoodsTypeComponent {
   searchFormSubmit(): void {
   }
 
-  // 搜索表单重置
-  searchFormReset(): void {
-    this.searchForm.reset();
-  }
-
   protected readonly goodsTypeSearch = goodsTypeSearch;
 }