ngx-axis-appforge 0.0.3 → 0.0.4

package/core/share/base-design-setting/base-design-setting.html

@@ -0,0 +1,50 @@
+<form [formGroup]="fg()" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="通用设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    组件ID
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="id" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    启用
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="inuse" [exclude]="exclude()" [scopeId]="scopeId()">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    权限
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-select nzMode="multiple" nzAllowClear formControlName="requiredPermissions">
+                        @for (en of allPermissions; track en[0]) {
+                        <nz-option [nzLabel]="en[1]" [nzValue]="en[0]"></nz-option>
+                        }
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    样式
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="style" [exclude]="exclude()" [scopeId]="scopeId()">
+                        <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        @if (showLine()) {
+        <div></div>
+        }
+    </nz-collapse>
+</form>

package/core/share/base-design-setting/base-design-setting.ts

@@ -0,0 +1,55 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, input, signal } from '@angular/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { DynamicDirective } from '../../directives/dynamic';
+import { FormValidators } from '../../utils/form-validators';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { AXIS_DESIGN_ALL_PERMISSIONS_TOKEN } from '../tokens';
+import { FunFieldOptions } from '../../models/fun-field.options';
+
+@Component({
+  selector: 'axis-base-design-setting',
+  imports: [NzCollapseModule, NzFormModule, FunField, NzSwitchModule, FormsModule, NzInputModule, ReactiveFormsModule, DynamicDirective, NzSelectModule],
+  templateUrl: './base-design-setting.html',
+  styleUrl: './base-design-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BaseDesignSetting implements AfterViewInit {
+
+  constructor(private element: ElementRef) { }
+
+  readonly showLine = signal(false);
+  readonly scopeId = input<string>();
+  readonly exclude = input<string[]>([]);
+  readonly allPermissions = Object.entries(inject(AXIS_DESIGN_ALL_PERMISSIONS_TOKEN));
+
+  fg = input.required<UntypedFormGroup>();
+
+  ngAfterViewInit(): void {
+    if (this.element.nativeElement.nextElementSibling) {
+      this.showLine.set(true);
+    }
+  }
+
+}
+
+export const baseFbConfig = {
+  id: [undefined, [FormValidators.required]],
+  inuse: [undefined, [FormValidators.requiredFun]],
+  requiredPermissions: [],
+  style: [],
+  triggeEvents: []
+};
+
+export const baseFunField: FunFieldOptions = {
+  inuse: {
+    defaultValue: true
+  },
+  style: {
+    defaultValue: undefined
+  }
+}

package/core/share/base-event-handler-descs.ts

@@ -0,0 +1,100 @@
+import { EventHandlerDesc, EventHandlerDescGroup } from "../models/event-desc";
+import { ApiHandler } from "./api-handler/api-handler";
+import { ArrayFilterHandler } from "./array-filter-handler/array-filter-handler";
+import { DataHandler } from "./data-handler/data-handler";
+import { MsgTipHandler } from "./msg-tip-handler/msg-tip-handler";
+import { RefreshDataSourceHandler } from "./refresh-data-source-handler/refresh-data-source-handler";
+import { RouteHandler } from "./route-handler/route-handler";
+import { SetDataSourceHandler } from "./set-data-source-handler/set-data-source-handler";
+
+export const baseEventHandlerDescs: { [name: string]: EventHandlerDesc } = {
+    api: {
+        name: "api",
+        icon: "api",
+        title: "调用接口",
+        target: "service",
+        dataComponent: ApiHandler,
+        events: [
+            {
+                name: "apiResponse",
+                title: "接口响应",
+                ds: {
+                    apiResponse: {
+                        tip: "示例数据"
+                    }
+                },
+            }
+        ]
+    },
+    setDataSource: {
+        name: "setDataSource",
+        title: "设置数据源",
+        icon: "database",
+        dataComponent: SetDataSourceHandler,
+        target: "scope",
+    },
+    refreshDataSource: {
+        name: "refreshDataSource",
+        title: "刷新数据源",
+        icon: "reload",
+        dataComponent: RefreshDataSourceHandler,
+        target: "scope",
+    },
+    setValue: {
+        name: "setValue",
+        title: "设置值",
+        icon: "flag",
+        dataComponent: DataHandler,
+        target: "component",
+    },
+    arrayFilter: {
+        name: "arrayFilter",
+        icon: "filter",
+        title: "数组过滤",
+        target: "service",
+        dataComponent: ArrayFilterHandler,
+        events: [
+            {
+                name: "output",
+                title: "数据输出",
+                ds: {
+                    outputArray: [{
+                        tip: "示例数据"
+                    }]
+                },
+            }
+        ]
+    },
+    msgTip: {
+        name: "msgTip",
+        icon: "bell",
+        title: "消息提醒",
+        target: "service",
+        dataComponent: MsgTipHandler
+    },
+    route: {
+        name: "route",
+        icon: "right-square",
+        title: "路由",
+        target: "service",
+        formStyle: {
+            labelSpan: 8
+        },
+        dataComponent: RouteHandler
+    },
+};
+
+export const baseEventHandlerDescGroups: EventHandlerDescGroup[] = [
+    {
+        groupName: "基础",
+        handlerDescs: [
+            baseEventHandlerDescs["api"],
+            baseEventHandlerDescs["setDataSource"],
+            baseEventHandlerDescs["refreshDataSource"],
+            baseEventHandlerDescs["setValue"],
+            baseEventHandlerDescs["arrayFilter"],
+            baseEventHandlerDescs["msgTip"],
+            baseEventHandlerDescs["route"],
+        ]
+    }
+];

package/core/share/common-menu/common-menu.html

@@ -0,0 +1,21 @@
+@if (canAddParent) {
+<li nz-menu-item (click)="addParent()">
+    <i nz-icon nzType="pic-center" nzTheme="outline"></i>
+    <nz-divider nzType="vertical"></nz-divider>
+    <span>添加父组件</span>
+</li>
+}
+@if (canAddChild) {
+<li nz-menu-item (click)="addChild()">
+    <i nz-icon nzType="plus" nzTheme="outline"></i>
+    <nz-divider nzType="vertical"></nz-divider>
+    <span>添加子组件</span>
+</li>
+}
+@if (canRemove) {
+<li nz-menu-item style="color: #f81d22" (click)="remove()">
+    <i nz-icon nzType="delete" nzTheme="outline"></i>
+    <nz-divider nzType="vertical"></nz-divider>
+    <span>删除</span>
+</li>
+}

package/core/share/common-menu/common-menu.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { BaseMenu } from '../../base/base-menu';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN } from '../tokens';
+
+@Component({
+  selector: 'axis-common-menu',
+  imports: [NzDividerModule, NzDropDownModule, NzIconModule],
+  templateUrl: './common-menu.html',
+  styleUrl: './common-menu.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommonMenu {
+
+  readonly baseMenu = input.required<BaseMenu>();
+  readonly chooseComponentFunc = inject(AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN);
+
+  get canAddParent(): boolean {
+    const { optionsNodes } = this.baseMenu();
+    return !optionsNodes.current.isRoot && (!!optionsNodes.parent?.canDrop && optionsNodes.parent?.dropType == "component");
+  }
+
+  get canAddChild(): boolean {
+    const { optionsNodes } = this.baseMenu();
+    return optionsNodes.current.dropType == "component" && (Array.isArray(optionsNodes.current.dropObj) || !optionsNodes.current.dropObj[optionsNodes.current.defaultDropIndex!])
+  }
+
+  get canRemove(): boolean {
+    return this.baseMenu().optionsNodes.current.canSetting;
+  }
+
+  addParent() {
+    this.chooseComponentFunc("wrap").subscribe(res => {
+      const { options, config } = res;
+      if (options && config) {
+        const { optionsNodes } = this.baseMenu();
+        const node = config.buildOptionsNodes?.({ currentObject: options });
+        if (node) {
+          const { treeNode } = node;
+          treeNode.dropObj[treeNode.defaultDropIndex!] = optionsNodes.current.options;
+          optionsNodes.parent!.dropObj[optionsNodes.current.indexOfParentObj!] = treeNode.options;
+          this.baseMenu().onChange();
+        }
+      }
+    });
+  }
+
+  addChild() {
+    this.chooseComponentFunc().subscribe(res => {
+      if (res.options) {
+        const { optionsNodes } = this.baseMenu();
+        optionsNodes.current.dropObj[optionsNodes.current.defaultDropIndex!] = res.options;
+        this.baseMenu().onChange();
+      }
+    });
+  }
+
+  remove() {
+    if (this.baseMenu().optionsNodes.current.isRoot) {
+      this.baseMenu().onChange(null);
+    } else {
+      if (Array.isArray(this.baseMenu().optionsNodes.current.parentObj)) {
+        this.baseMenu().optionsNodes.current.parentObj.splice(this.baseMenu().optionsNodes.current.indexOfParentObj as number, 1);
+      } else {
+        this.baseMenu().optionsNodes.current.parentObj[this.baseMenu().optionsNodes.current.indexOfParentObj!] = null;
+      }
+      this.baseMenu().onChange();
+    }
+  }
+
+}

package/core/share/data-handler/data-handler.html

@@ -0,0 +1,13 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label nzSpan="6">
+            数据
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="data" [noListen]="noListen()">
+                <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" [standalone]="true"
+                    ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+</form>

package/core/share/data-handler/data-handler.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject, signal } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { DynamicDirective } from '../../directives/dynamic';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { InputTrigger } from '../input-trigger/input-trigger';
+
+@Component({
+  selector: 'axis-data-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, DynamicDirective, NzInputModule, NzSwitchModule, NzRadioModule],
+  templateUrl: './data-handler.html',
+  styleUrl: './data-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DataHandler),
+      multi: true
+    }
+  ]
+})
+export class DataHandler extends FunFieldValueBase {
+  readonly noListen = inject(InputTrigger).noListen;
+  override fg: UntypedFormGroup = this.fb.group({
+    data: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    data: {
+      defaultValue: null,
+    },
+  };
+}

package/core/share/events-handler.service.ts

@@ -0,0 +1,185 @@
+import { HttpClient, HttpRequest } from '@angular/common/http';
+import { Inject, Injectable, Optional } from '@angular/core';
+import { catchError, from, map, mergeMap, Observable, of } from 'rxjs';
+import { ApiOptions } from '../models/api.options';
+import { EventHandlerOptions } from '../models/event.options';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EventsHandler } from '../models/event-handler';
+import { AXIS_EVENT_HANDLERS_TOKEN } from './tokens';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventsHandlerService implements EventsHandler {
+
+  constructor(private http: HttpClient, private msg: NzMessageService, private modal: NzModalService, private router: Router, @Optional() @Inject(AXIS_EVENT_HANDLERS_TOKEN) private otherHandlers?: EventsHandler[]) { }
+
+  onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined {
+    switch (e.name) {
+      case "api":
+        return this.apiEventHandler(e);
+      case "msgTip":
+        return this.msgTipEventHandler(e);
+      case "arrayFilter":
+        return this.arrayFilterEventHandler(e);
+      case "route":
+        return this.routeEventHandler(e);
+      default:
+        if (this.otherHandlers) {
+          for (const h of this.otherHandlers) {
+            const r = h.onEvents(e);
+            if (r != undefined) {
+              return r;
+            }
+          }
+        }
+        return undefined;
+    }
+  }
+
+  private apiEventHandler(e: EventHandlerOptions<ApiOptions>): Observable<boolean> {
+    const opt = e.data as ApiOptions;
+    return this.http.request(new HttpRequest(opt.method?.toUpperCase() as any || "GET", opt.url, opt.body))
+      .pipe(map((h: any) => h.body), catchError(e => of(undefined)), mergeMap(res => {
+        if (e.ref) {
+          return e.ref.triggeEvents("apiResponse", { ...e.tempDataSource, apiResponse: res }, e.triggeEvents);
+        } else {
+          return of(true);
+        }
+      }));
+  }
+
+  private msgTipEventHandler(e: EventHandlerOptions<any>): Observable<boolean> {
+    switch (e.data?.tipWay) {
+      case "modal":
+        switch (e.data?.type) {
+          case "info":
+            this.modal.info({
+              nzTitle: "提醒",
+              nzContent: e.data.content
+            });
+            break;
+          case "success":
+            this.modal.success({
+              nzTitle: "成功",
+              nzContent: e.data.content
+            });
+            break;
+          case "warning":
+            this.modal.warning({
+              nzTitle: "警告",
+              nzContent: e.data.content
+            });
+            break;
+          case "error":
+            this.modal.error({
+              nzTitle: "失败",
+              nzContent: e.data.content
+            });
+            break;
+        }
+        break;
+      case "message":
+        switch (e.data?.type) {
+          case "info":
+            this.msg.info(e.data.content);
+            break;
+          case "success":
+            this.msg.success(e.data.content);
+            break;
+          case "warning":
+            this.msg.warning(e.data.content);
+            break;
+          case "error":
+            this.msg.error(e.data.content);
+            break;
+        }
+        break;
+    }
+    return of(true);
+  }
+
+  private arrayFilterEventHandler(e: EventHandlerOptions<{ inputArray?: any[], filterData?: any, filterOptions?: { field: string, mode: string, effectFields: string[] }[] }>): Observable<boolean> {
+    const { inputArray, filterData, filterOptions } = e.data ?? {};
+    let outputArray: any[] | undefined | null;
+    if (!inputArray?.length || !filterOptions?.length || !filterData || !Object.keys(filterData).length) {
+      outputArray = inputArray;
+    } else {
+      outputArray = inputArray.filter((r: any) => {
+        return filterOptions!
+          .every(e => {
+            if (filterData[e.field] == undefined || (e.mode == "between" && filterData[e.field].length < 2)) {
+              return true;
+            }
+            const effectFields = e.effectFields || [e.field];
+            return effectFields.some(field => {
+              const rowData = r[field];
+              switch (e.mode) {
+                case "startsWith":
+                  return rowData?.startsWith(filterData[e.field]);
+                case "endsWith":
+                  return rowData?.endsWith(filterData[e.field]);
+                case "like":
+                  return rowData != null && String(rowData).toUpperCase().includes(filterData[e.field].toUpperCase());
+                case "equalGreater":
+                  return rowData != undefined && r[field] >= filterData[e.field];
+                case "equalLess":
+                  return rowData != undefined && r[field] <= filterData[e.field];
+                case "between":
+                  return rowData != undefined && r[field] >= filterData[e.field][0] && r[field] <= filterData[e.field][1];
+                case "containAll":
+                  return rowData != undefined && (!filterData[e.field].length || filterData[e.field].every((r: any) => rowData.includes(r)));
+                case "containAny":
+                  return rowData != undefined && (!filterData[e.field].length || filterData[e.field].some((r: any) => rowData.includes(r)));
+                default:
+                  return rowData == filterData[e.field];
+              }
+            });
+          });
+      });
+    }
+    return e.ref?.triggeEvents("output", { ...e.tempDataSource, outputArray }, e.triggeEvents) ?? of(true);;
+  }
+
+  private routeEventHandler(e: EventHandlerOptions<{ type: "web", newtab?: boolean, path: string | string[], params?: any }>): Observable<boolean> {
+    let { type, newtab, path } = e.data!;
+    switch (type) {
+      case "web":
+        if (newtab) {
+          let url: string | undefined;
+          if (typeof path == "string") {
+            url = path;
+          } else if (Array.isArray(path)) {
+            url = path.join("/");
+          }
+          if (url) {
+            window.open(url, "_blank");
+            return of(true);
+          }
+        } else {
+          let url: string[] | undefined;
+          if (typeof path == "string") {
+            if (path.startsWith("http")) {
+              window.open(path, "_self");
+              return of(true);
+            }
+            url = [path];
+          } else if (Array.isArray(path)) {
+            url = path;
+          }
+          if (url?.[0]) {
+            if (e.ref?.isDesign) {
+              this.msg.info("设计模式下禁止路由跳转");
+            } else {
+              const route = e.ref?.injector.get(ActivatedRoute);
+              return from(this.router.navigate(url, { relativeTo: route, queryParams: e.data?.params }));
+            }
+          }
+        }
+        break;
+    }
+    return of(false);
+  }
+}

package/core/share/fun-field/fun-field.css

@@ -0,0 +1,55 @@
+.black {
+  width: 100%;
+  height: 500px;
+  padding-left: 42px;
+}
+
+.modal .ant-modal-body {
+  padding: 0 !important;
+}
+
+nz-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+nz-list ::ng-deep nz-spin {
+  overflow: auto;
+}
+
+.code-row {
+  padding-left: 50px;
+}
+
+.success::placeholder {
+  color: #52c41a;
+}
+
+.warn::placeholder {
+  color: #faad14;
+}
+
+.error::placeholder {
+  color: #ff4d4f;
+}
+
+.scope-tag {
+  padding: 0px 20px;
+  font-size: 12px;
+  background: rgba(125, 125, 125, 0.1);
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.scope-tag:not(:first-child) {
+  margin-top: 8px;
+}
+
+nz-splitter ::ng-deep .ant-splitter-panel {
+  overflow-y: visible;
+}
+
+.scope-item-container {
+  width: 100%;
+  overflow: auto;
+}