标准样式修改

projects/admin/src/app/pages/standard/standard-form/standard-form.component.html

@@ -46,7 +46,12 @@
                     </div>
                 </nz-form-label>
                 <nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12">
-                    <nz-select
+                    <nz-checkbox-group class="org-list"
+                                       [(ngModel)]="listOfOption"
+                                       [ngModelOptions]="{standalone: true}">
+
+                    </nz-checkbox-group>
+                    <!-- <nz-select
                                [nzMode]="'multiple'"
                                nzShowSearch
                                nzServerSearch
@@ -57,7 +62,7 @@
                                (nzOnSearch)="searchOrg($event)">
                         <nz-option *ngFor="let o of listOfOption" [nzLabel]="o.text"
                                    [nzValue]="o.value"></nz-option>
-                    </nz-select>
+                    </nz-select> -->
                     <!-- <div>
                         <nz-tag class="px-3 py-1" *ngFor="let v of vendors">
                             <span>{{v.label}}</span>

projects/admin/src/app/pages/standard/standard-form/standard-form.component.less

@@ -0,0 +1,7 @@
+.org-list {
+    ::ng-deep {
+        .ant-checkbox-group-item {
+            margin-bottom: 6px;
+        }
+    }
+}

projects/admin/src/app/pages/standard/standard-form/standard-form.component.ts

@@ -9,6 +9,12 @@ import { FormValidators } from "@cdk/validators";
 import { NzMessageService } from "ng-zorro-antd/message";
 import { Subject, debounceTime, distinctUntilChanged, filter, finalize, map, switchMap } from "rxjs";
 
+interface CheckboxItem {
+	value: number | string;
+	label: string;
+	checked?: boolean;
+}
+
 @Component({
 	selector: "app-standard-form",
 	templateUrl: "./standard-form.component.html",
@@ -43,11 +49,11 @@ export class StandardFormComponent {
 
 	state: any;
 
-	// nzPopoverVisible = false;
+	vendors: OrgDTO[] = [];
 
-	// vendors: OptionItemInterface[] = [];
+	// nzPopoverVisible = false;
 
-	listOfOption: Array<{ value: number | string; text: string }> = [];
+	listOfOption: (OrgDTO & CheckboxItem)[] = [];
 
 	nzFilterOption = (): boolean => true;
 
@@ -55,27 +61,32 @@ export class StandardFormComponent {
 		this.formGroup = this.fb.group({
 			id: this.fb.control("", []),
 			name: this.fb.control("", [FormValidators.required()]),
-			vendors: this.fb.control([], [FormValidators.required()]),
+			// vendors: this.fb.control([], [FormValidators.required()]),
 			overflow: this.fb.control("0", [FormValidators.required()]),
 		});
 		if (this.state) {
 			this.formGroup.patchValue(this.state);
-			if (Array.isArray(this.state.vendors)) {
+			// if (Array.isArray(this.state.vendors)) {
-				this.api.getOrgList({ vendors: this.state.vendors }).subscribe((data) => {
+			// 	this.api.getOrgList({ vendors: this.state.vendors }).subscribe((data) => {
-					const listOfOption: Array<{ value: number; text: string }> = [];
+			// 		const listOfOption: Array<{ value: number; label: string }> = [];
-					data.forEach((item) => {
+			// 		data.forEach((item) => {
-						listOfOption.push({
+			// 			listOfOption.push({
-							value: item.id,
+			// 				value: item.id,
-							text: item.name,
+			// 				label: item.name,
-						});
+			// 			});
-					});
+			// 		});
-					this.listOfOption = listOfOption;
+			// 		this.listOfOption = listOfOption;
-					this.formGroup.patchValue(this.state);
+			// 		this.formGroup.patchValue(this.state);
-				});
+			// 	});
-			}
+			// }
 		}
 		this.api.getOrgList().subscribe((res) => {
-			this.listOfOption = res;
+			this.listOfOption = res as unknown as (OrgDTO & CheckboxItem)[];
+			if (Array.isArray(this.state?.vendors)) {
+				this.listOfOption = this.listOfOption.map((i) => {
+					return { ...i, checked: this.state.vendors.includes(i.id) };
+				});
+			}
 		});
 		// this.orgSearch$
 		// 	.pipe(
@@ -124,6 +135,7 @@ export class StandardFormComponent {
 					foodCategoryWeek: this.state?.foodCategoryWeek,
 					ingredient: this.state?.ingredient,
 					...this.formGroup.value,
+					vendors: this.listOfOption.filter((f) => f.checked).map((i) => i.id),
 				})
 				.pipe(
 					finalize(() => {

projects/cdk/src/services/api.service.ts

@@ -202,6 +202,7 @@ export class ApiService {
 					...i,
 					value: i.id.toString(),
 					text: i.name,
+					label: i.name,
 				}));
 			}),
 			tap((r) => {

projects/cdk/src/shared/components/org-select/org-select.component.html

@@ -1,12 +1,9 @@
 <nz-select
-           nzShowSearch
+
-           nzServerSearch
            nzPlaceHolder="请选择单位"
-           [nzShowArrow]="false"
+
-           [nzFilterOption]="nzFilterOption"
            [(ngModel)]="value"
-           (ngModelChange)="onSelectChange($event)"
+           (ngModelChange)="onSelectChange($event)">
-           (nzOnSearch)="searchOrg($event)">
     <nz-option *ngFor="let o of listOfOption" [nzLabel]="o.label"
                [nzValue]="o.value">
     </nz-option>

projects/cdk/src/shared/components/org-select/org-select.component.ts

@@ -30,24 +30,16 @@ export class OrgSelectComponent implements OnInit, ControlValueAccessor {
 	listOfOption: OptionItemInterface[] = [];
 
 	ngOnInit(): void {
-		this.orgSearch$
+		this.api.getOrgList().subscribe((data) => {
-			.pipe(
+			const listOfOption: Array<OptionItemInterface> = [];
-				filter((f) => !!f),
+			data.forEach((item) => {
-				debounceTime(500),
+				listOfOption.push({
-				distinctUntilChanged(),
+					value: String(item.id),
-				takeUntil(this.destroy$),
+					label: item.name,
-				switchMap((term: string) => this.api.getOrgList({ keyword: term }))
-			)
-			.subscribe((data) => {
-				const listOfOption: Array<OptionItemInterface> = [];
-				data.forEach((item) => {
-					listOfOption.push({
-						value: String(item.id),
-						label: item.name,
-					});
 				});
-				this.listOfOption = listOfOption;
 			});
+			this.listOfOption = listOfOption;
+		});
 	}
 
 	ngOnDestroy(): void {