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 nz-col [nzSpan]="6" class="search-area">
-      <div class="search-area">
+      <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">查询</button>
-        <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
+      <button nz-button (click)="searchForm.reset()">重置</button>
-        <button nz-button (click)="searchFormReset()">重置</button>
+      <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">创建</button>
-<!--        <button nz-button [nzType]="'primary'" (click)="showEdit(true, null)">创建</button>-->
-      </div>
     </div>
   </div>
 </form>

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

@@ -1,6 +1,12 @@
-.search-area {
+[nz-form-label] {
-  text-align: center;
+  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,23 +10,26 @@ 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',
   standalone: true,
-  imports: [
+    imports: [
-    FormsModule,
+        FormsModule,
-    NzButtonComponent,
+        NzButtonComponent,
-    NzColDirective,
+        NzColDirective,
-    NzFormControlComponent,
+        NzFormControlComponent,
-    NzFormDirective,
+        NzFormDirective,
-    NzFormItemComponent,
+        NzFormItemComponent,
-    NzFormLabelComponent,
+        NzFormLabelComponent,
-    NzInputDirective,
+        NzInputDirective,
-    NzRowDirective,
+        NzRowDirective,
-    ReactiveFormsModule,
+        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;
 }