fix: layout setting form change

biaogebusy · Feb 2, 2024 · 86c1d77 · 86c1d77
1 parent 2ddfea7
commit 86c1d77
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 38 deletions.
diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
@@ -14,7 +14,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
 import { map } from 'lodash-es';
 import { DOCUMENT } from '@angular/common';
 import { ScreenService } from '@core/service/screen.service';
-import { getLayoutSetting } from '@modules/builder/factory/getLayoutSetting';
+import { getComponentSetting } from '@modules/builder/factory/getComponentSetting';
 import { IManageMedia, IMediaSelect } from '@core/interface/manage/IManage';
 
 @Injectable({
@@ -212,10 +212,10 @@ export class BuilderState {
     this.saveLocalVersions();
   }
 
-  onLayoutSetting(content: any, pageIndex: number, uuid: string): void {
+  onComponentSetting(content: any, pageIndex: number, uuid: string): void {
     const data: ILayoutSetting = {
       type: 'layout-setting',
-      fields: getLayoutSetting(content),
+      fields: getComponentSetting(content),
       uuid,
       pageIndex,
       content,

diff --git a/src/app/modules/builder/factory/getBlockSetting.ts b/src/app/modules/builder/factory/getBlockSetting.ts
@@ -3,7 +3,6 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 export function getBlockSetting(layout: any): FormlyFieldConfig[] {
   let responsive: FormlyFieldConfig[] = [
     {
-      key: 'responsive',
       fieldGroup: [
         {
           key: 'row',
@@ -71,7 +70,6 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
   ];
   let flexLayout: FormlyFieldConfig[] = [
     {
-      key: 'flex',
       className: 'layout-setting width-100',
       fieldGroupClassName: 'display-flex flex-wrap width-100',
       fieldGroup: [
@@ -205,7 +203,6 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
   ];
   let styles: FormlyFieldConfig[] = [
     {
-      key: 'styles',
       className: 'width-100',
       fieldGroup: [
         {
@@ -367,17 +364,17 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
         onInit: (formGroup: any) => {
           const { form, model } = formGroup;
           form.valueChanges.subscribe((value: any) => {
-            const { styles } = value;
+            const { style } = value;
             model.style = {
               ...model.style,
-              paddingTop: styles.style['paddingTop'] + 'px',
-              paddingRight: styles.style['paddingRight'] + 'px',
-              paddingBottom: styles.style['paddingBottom'] + 'px',
-              paddingLeft: styles.style['paddingLeft'] + 'px',
-              marginTop: styles.style['marginTop'] + 'px',
-              marginRight: styles.style['marginRight'] + 'px',
-              marginBottom: styles.style['marginBottom'] + 'px',
-              marginLeft: styles.style['marginLeft'] + 'px',
+              paddingTop: style['paddingTop'] + 'px',
+              paddingRight: style['paddingRight'] + 'px',
+              paddingBottom: style['paddingBottom'] + 'px',
+              paddingLeft: style['paddingLeft'] + 'px',
+              marginTop: style['marginTop'] + 'px',
+              marginRight: style['marginRight'] + 'px',
+              marginBottom: style['marginBottom'] + 'px',
+              marginLeft: style['marginLeft'] + 'px',
             };
           });
         },
@@ -387,6 +384,7 @@ export function getBlockSetting(layout: any): FormlyFieldConfig[] {
   let fields: FormlyFieldConfig[] = [
     {
       type: 'tabs',
+      key: 'block',
       fieldGroup: [
         {
           templateOptions: {

diff --git a/...dules/builder/factory/getLayoutSetting.ts → ...es/builder/factory/getComponentSetting.ts b/...dules/builder/factory/getLayoutSetting.ts → ...es/builder/factory/getComponentSetting.ts
@@ -1,7 +1,8 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { getLayoutAlign } from './getBlockSetting';
+import { getSwiper } from './getSwiper';
 
-export function getLayoutSetting(content: any): FormlyFieldConfig[] {
+export function getComponentSetting(content: any): FormlyFieldConfig[] {
   const fields: FormlyFieldConfig[] = [
     {
       type: 'tabs',
@@ -361,5 +362,19 @@ export function getLayoutSetting(content: any): FormlyFieldConfig[] {
     ];
     fields[0].fieldGroup?.push(...flexConfig);
   }
+
+  if (content.type === 'swiper') {
+    fields[0].fieldGroup?.push({
+      templateOptions: {
+        label: '参数',
+      },
+      fieldGroup: [
+        {
+          type: 'tabs',
+          fieldGroup: getSwiper(content)[0].fieldGroup,
+        },
+      ],
+    });
+  }
   return fields;
 }
diff --git a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
@@ -41,7 +41,6 @@ export class LayoutSettingComponent implements OnInit, OnDestroy {
     this.builder.selectedMedia$
       .pipe(takeUntil(this.destroy$))
       .subscribe(({ img, value }) => {
-        console.log(value);
         const { src, fileName } = img;
         const { level } = value;
         const bgImg = {

diff --git a/src/app/modules/builder/main/popup-select/popup-select.component.html b/src/app/modules/builder/main/popup-select/popup-select.component.html
@@ -8,9 +8,11 @@
       </div>
     </div>
   </div>
-  <div class="popup" #popup *ngIf="widget$ | async as widget">
-    <div class="hover-show">
-      <app-dynamic-component [inputs]="widget"></app-dynamic-component>
-    </div>
+  <div class="popup" #popup>
+    <ng-container *ngIf="widget$ | async as widget">
+      <div class="hover-show">
+        <app-dynamic-component [inputs]="widget"></app-dynamic-component>
+      </div>
+    </ng-container>
   </div>
 </div>
diff --git a/src/app/modules/builder/main/popup-select/popup-select.component.ts b/src/app/modules/builder/main/popup-select/popup-select.component.ts
@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   Inject,
   Input,
   OnInit,
@@ -20,7 +21,7 @@ import { createPopper } from '@popperjs/core';
 })
 export class PopupSelectComponent implements OnInit {
   @Input() content: IPopupSelect;
-  @ViewChild('popup') popup: any;
+  @ViewChild('popup', { static: false }) popup: ElementRef;
   public widget$: Subject<any> = new Subject();
   constructor(
     private builder: BuilderState,
@@ -58,18 +59,20 @@ export class PopupSelectComponent implements OnInit {
   }
 
   onHover(widget: any, ele: any): void {
-    this.widget$.next(widget.content);
-    createPopper(ele, this.popup.nativeElement, {
-      placement: 'top',
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 20],
+    if (this.popup?.nativeElement) {
+      this.widget$.next(widget.content);
+      createPopper(ele, this.popup.nativeElement, {
+        placement: 'top',
+        strategy: 'fixed',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 20],
+            },
           },
-        },
-      ],
-    });
+        ],
+      });
+    }
   }
 }
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.html
@@ -15,9 +15,9 @@
     <div class="item" (click)="onDelete(index)" *ngIf="isPreview" [matTooltip]="'移除'" matTooltipPosition="above">
       <app-btn [content]="{label:'',color:'primary', mode: 'icon' ,icon:{svg:'delete',inline:true } }"></app-btn>
     </div>
-    <div class="item" (click)="onEditor(content, index)" *ngIf="!isStory" [matTooltip]="'编辑组件通用配置'"
+    <div class="item" (click)="onSetting(content, index)" *ngIf="!isStory" [matTooltip]="'编辑组件通用配置'"
       matTooltipPosition="above">
       <app-btn [content]="{label:'',color:'primary', mode: 'icon' ,icon:{svg:'tune-vertical',inline:true } }"></app-btn>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts b/src/app/uiux/widgets/builder/component-toolbar/component-toolbar.component.ts
@@ -57,7 +57,7 @@ export class ComponentToolbarComponent implements OnInit {
     this.builder.upDownComponent(index, direction);
   }
 
-  onEditor(content: any, pageIndex: number): void {
+  onSetting(content: any, pageIndex: number): void {
     const { type } = content;
     const component = type ? content : content.content;
     const uuid = Date.now().toString();
@@ -79,7 +79,7 @@ export class ComponentToolbarComponent implements OnInit {
         },
       });
     } else {
-      this.builder.onLayoutSetting(component, pageIndex, uuid);
+      this.builder.onComponentSetting(component, pageIndex, uuid);
     }
   }