@farris/cli 2.0.2 → 2.0.3

package/templates/lib/components/common/src/entity/base-property.ts

@@ -0,0 +1,129 @@
+import { DesignerComponentInstance, DgControl } from "@/components/designer-canvas";
+import { cloneDeep } from "lodash-es";
+
+/**
+ * 控件属性基类
+ */
+export class BaseControlProperty {
+    public componentId: string;
+
+    public viewModelId: string;
+
+    public eventsEditorUtils: any;
+
+    public formSchemaUtils: any;
+    public formMetadataConverter: any;
+    public designViewModelUtils: any;
+    public designViewModelField: any;
+    public controlCreatorUtils: any;
+    public designerHostService: any;
+
+    schemaService: any = null;
+
+    metadataService: any = null;
+
+    protected propertyConfig = {
+        type: 'object',
+        categories: {}
+    };
+
+    constructor(componentId: string, designerHostService: any) {
+        this.componentId = componentId;
+        this.designerHostService = designerHostService;
+        this.eventsEditorUtils = designerHostService['eventsEditorUtils'];
+        this.formSchemaUtils = designerHostService['formSchemaUtils'];
+        this.formMetadataConverter = designerHostService['formMetadataConverter'];
+        this.viewModelId = this.formSchemaUtils?.getViewModelIdByComponentId(componentId) || '';
+        this.designViewModelUtils = designerHostService['designViewModelUtils'];
+        this.controlCreatorUtils = designerHostService['controlCreatorUtils'];
+        this.metadataService = designerHostService['metadataService'];
+        this.schemaService = designerHostService['schemaService'];
+    }
+
+    getTableInfo() {
+        return this.schemaService?.getTableInfoByViewModelId(this.viewModelId);
+    }
+
+    setDesignViewModelField(propertyData: any) {
+        const bindingFieldId = propertyData.binding && propertyData.binding.type === 'Form' && propertyData.binding.field;
+        // 视图模型中[字段更新时机]属性现在要在控件上维护，所以在控件上复制一份属性值
+        if (bindingFieldId) {
+            if (!this.designViewModelField) {
+                const dgViewModel = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+                this.designViewModelField = dgViewModel.fields.find(f => f.id === bindingFieldId);
+            }
+            propertyData.updateOn = this.designViewModelField?.updateOn;
+        }
+    }
+
+    getBasicPropConfig(propertyData: any): any {
+        return {
+            description: 'Basic Information',
+            title: '基本信息',
+            properties: {
+                id: {
+                    description: '组件标识',
+                    title: '标识',
+                    type: 'string',
+                    readonly: true
+                },
+                type: {
+                    description: '组件类型',
+                    title: '控件类型',
+                    type: 'select',
+                    editor: {
+                        type: 'combo-list',
+                        textField: 'name',
+                        valueField: 'value',
+                        editable: false,
+                        data: [{ value: propertyData.type, name: DgControl[propertyData.type] && DgControl[propertyData.type].name }]
+                    }
+                }
+            }
+        };
+
+    }
+
+
+    protected getAppearanceConfig(propertyData = null): any {
+        return {
+            title: "外观",
+            description: "Appearance",
+            properties: {
+                class: {
+                    title: "class样式",
+                    type: "string",
+                    description: "组件的CSS样式",
+                    $converter: "/converter/appearance.converter"
+                },
+                style: {
+                    title: "style样式",
+                    type: "string",
+                    description: "组件的样式",
+                    $converter: "/converter/appearance.converter"
+                }
+            }
+        };
+    }
+
+    /**
+     * 
+     * @param propertyId 
+     * @param componentInstance 
+     * @returns 
+     */
+    public updateElementByParentContainer(propertyId: string, componentInstance: DesignerComponentInstance) {
+        // 1、定位控件父容器
+        const parentContainer = componentInstance && componentInstance.parent && componentInstance.parent['schema'];
+        if (!parentContainer) {
+            return;
+        }
+        const index = parentContainer.contents.findIndex(c => c.id === propertyId);
+        // 通过cloneDeep方式的触发更新
+        const controlSchema = cloneDeep(parentContainer.contents[index]);
+        // 5、替换控件
+        parentContainer.contents.splice(index, 1);
+        parentContainer.contents.splice(index, 0, controlSchema);
+    }
+
+}

package/templates/lib/components/common/src/entity/entity-schema.ts

@@ -0,0 +1,274 @@
+/* eslint-disable no-use-before-define */
+export interface FormSchema {
+    sourceUri: string;
+    id: string;
+    code: string;
+    name: string;
+    entities: FormSchemaEntity[];
+    variables: FormSchemaEntityField[];
+    eapiId: string;
+    extendProperties: { enableStdTimeFormat: boolean };
+    eapiCode?: string;
+    eapiName?: string;
+    eapiNameSpace?: string;
+    voPath?: string;
+    voNameSpace?: string;
+}
+
+/**
+ * 实体
+ */
+export interface FormSchemaEntity {
+    id: string;
+    code: string;
+    name: string;
+    label: string;
+    type: FormSchemaEntityType;
+}
+
+/**
+ * 字段类型枚举
+ */
+export enum FormSchemaEntityField$Type {
+    /**
+     * 简单类型字段
+     */
+    SimpleField = "SimpleField",
+    /**
+     * 关联/UDT类型字段
+     */
+    ComplexField = "ComplexField"
+}
+/**
+ * 字段编辑器对象
+ */
+export interface FormSchemaEntityFieldEditor {
+    $type: string;
+    [propName: string]: any;
+}
+export interface DesignViewModelField extends FormSchemaEntityField {
+    valueChanging: string;
+    valueChanged: string;
+    groupId: string;
+    groupName: string;
+    isSchemaRemoved?: boolean;
+    updateOn?: string;
+}
+/**
+ * 字段
+ */
+export interface FormSchemaEntityField {
+    $type: FormSchemaEntityField$Type;
+    id: string;
+    originalId: string;
+    code: string;
+    label: string;
+    bindingField: string;
+    name: string;
+    defaultValue?: any;
+    require?: boolean;
+    readonly?: boolean;
+    type: FormSchemaEntityFieldType;
+    editor?: FormSchemaEntityFieldEditor;
+    path?: string;
+    bindingPath?: string;
+    multiLanguage?: boolean;
+    expression?: any;
+}
+/**
+ * 字段类型对象中的类型枚举
+ */
+export enum FormSchemaEntityFieldType$Type {
+    /**
+     * 字符串
+     */
+    StringType = "StringType",
+    /**
+     * 备注
+     */
+    TextType = "TextType",
+    /**
+     * 数字（整数、浮点数）
+     */
+    NumericType = "NumericType",
+    /**
+     * 布尔
+     */
+    BooleanType = "BooleanType",
+    /**
+     * 日期
+     */
+    DateType = "DateType",
+    /**
+     * 日期时间
+     */
+    DateTimeType = "DateTimeType",
+    /**
+     * 枚举
+     */
+    EnumType = "EnumType",
+    /**
+     * 实体类
+     */
+    EntityType = "EntityType",
+    /**
+     * 分级码
+     */
+    HierarchyType = "HierarchyType",
+    /**
+     * 对象
+     */
+    ObjectType = "ObjectType",
+    /**
+     * 数字（大数据）
+     */
+    BigNumericType = "BigNumericType"
+}
+/**
+ * 字段类型中的名称
+ */
+export enum FormSchemaEntityFieldTypeName {
+    /**
+     * 简单类型字段
+     */
+    String = "String",
+    /**
+     * 日期时间
+     */
+    DateTime = "DateTime",
+    /**
+     * 日期
+     */
+    Date = "Date",
+    /**
+     * 枚举
+     */
+    Enum = "Enum",
+    /**
+     * 布尔
+     */
+    Boolean = "Boolean",
+    /**
+     * 数字
+     */
+    Number = "Number",
+    /**
+     * 备注
+     */
+    Text = "Text",
+    /**
+     * 大数字
+     */
+    BigNumber = "BigNumber"
+    /**
+     * 人员
+     */
+}
+/**
+ * 枚举类型
+ */
+export interface EnumData {
+    value: string;
+    name: string;
+}
+/**
+ * 实体
+ */
+export interface FormSchemaEntity {
+    id: string;
+    code: string;
+    name: string;
+    label: string;
+    type: FormSchemaEntityType;
+}
+/**
+ * 实体类型对象
+ */
+export interface FormSchemaEntityType {
+    $type: string;
+    name: string;
+    primary: string;
+    fields: FormSchemaEntityField[];
+    entities?: FormSchemaEntity[];
+    displayName?: string;
+}
+/**
+ * 字段类型对象
+ */
+export interface FormSchemaEntityFieldType {
+    $type: FormSchemaEntityFieldType$Type;
+    name: FormSchemaEntityFieldTypeName | any;
+    length?: number;
+    precision?: number;
+    valueType?: FormSchemaEntityFieldType;
+    enumValues?: EnumData[];
+    fields?: FormSchemaEntityField[];
+    displayName?: string;
+    primary?: string;
+    entities?: FormSchemaEntity[];
+    elementType?: GSPElementDataType;
+    extendProperty?: any;
+}
+/**
+ * 字段数据类型
+ */
+export enum GSPElementDataType {
+    /**
+     * 文本
+     */
+    String = "String",
+    /**
+     * 备注
+     */
+    Text = "Text",
+    /**
+     * 整数
+     */
+    Integer = "Integer",
+    /**
+     * 浮点数
+     */
+    Decimal = "Decimal",
+    /**
+     * 布尔型
+     */
+    Boolean = "Boolean",
+    /**
+     * 日期型
+     */
+    Date = "Date",
+    /**
+     * 日期时间型
+     */
+    DateTime = "DateTime",
+    /**
+     * 二进制
+     */
+    Binary = "Binary"
+}
+/**
+ * dom Json ViewModel 节点中states实体
+ */
+export interface FormVariable {
+    id: string;
+    code: string;
+    name: string;
+    value?: any;
+    type: string;
+    category: string;
+    fields?: any[];
+    defaultValue?: any;
+}
+/**
+ * 表单变量
+ */
+export interface DesignFormVariable extends FormVariable {
+    /**
+     * 分组ID
+     */
+    groupId: string;
+    /**
+     * 分组名称
+     */
+    groupName: string;
+}

package/templates/lib/components/common/src/entity/input-base-property.ts

@@ -0,0 +1,285 @@
+import { BaseControlProperty } from './base-property';
+import { DesignerComponentInstance } from "@/components/designer-canvas";
+import { SchemaDOMMapping } from "@/components/property-panel";
+import { canvasChanged } from "@/components/designer-canvas/src/composition/designer-canvas-changed";
+import { FormSchemaEntityFieldType$Type } from './entity-schema';
+
+export class InputBaseProperty extends BaseControlProperty {
+    constructor(componentId: string, designerHostService: any) {
+        super(componentId, designerHostService);
+    }
+
+    public getPropertyConfig(propertyData: any, componentInstance: DesignerComponentInstance) {
+        // 基本信息
+        this.propertyConfig.categories['basic'] = this.getBasicProperties(propertyData, componentInstance);
+        // 外观
+        this.propertyConfig.categories['appearance'] = this.getAppearanceProperties(propertyData, componentInstance);
+        // 编辑器
+        this.propertyConfig.categories['editor'] = this.getEditorProperties(propertyData);
+        return this.propertyConfig;
+    }
+
+    public getBasicProperties(propertyData, componentInstance): any {
+        const self = this;
+        this.setDesignViewModelField(propertyData);
+        return {
+            description: 'Basic Information',
+            title: '基本信息',
+            properties: {
+                id: {
+                    description: '组件标识',
+                    title: '标识',
+                    type: 'string',
+                    readonly: true
+                },
+                type: {
+                    description: '编辑器类型',
+                    title: '编辑器类型',
+                    type: 'string',
+                    refreshPanelAfterChanged: true,
+                    $converter: '/converter/change-editor.converter',
+                    editor: {
+                        type: 'combo-list',
+                        textField: 'value',
+                        valueField: 'key',
+                        editable: false,
+                        data: self.designViewModelField ? SchemaDOMMapping.getEditorTypesByMDataType(self.designViewModelField.type?.name) : SchemaDOMMapping.getAllInputTypes()
+                    }
+                },
+                label: {
+                    title: "标签",
+                    type: "string",
+                    $converter: '/converter/form-group-label.converter'
+                },
+                binding: {
+                    description: "绑定的表单字段",
+                    title: "绑定",
+                    editor: {
+                        type: "binding-selector",
+                        bindingType: { "enable": false },
+                        editorParams: {
+                            componentSchema: propertyData,
+                            needSyncToViewModel: true,
+                            viewModelId: this.viewModelId,
+                            designerHostService: this.designerHostService,
+                            disableOccupiedFields: true
+                        },
+                        textField: 'bindingField'
+                    }
+                }
+            },
+            setPropertyRelates(changeObject, prop) {
+                if (!changeObject) {
+                    return;
+                }
+                switch (changeObject && changeObject.propertyID) {
+                    case 'type': {
+                        self.changeControlType(propertyData, changeObject, componentInstance);
+                        break;
+                    }
+                    case 'label': {
+                        changeObject.needRefreshControlTree = true;
+                        break;
+                    }
+                }
+            }
+        };
+    }
+    public getAppearanceProperties(propertyData, componentInstance): any {
+
+        const self = this;
+        return {
+            title: "外观",
+            description: "Appearance",
+            properties: {
+                class: {
+                    title: "class样式",
+                    type: "string",
+                    description: "组件的CSS样式",
+                    $converter: "/converter/appearance.converter"
+                },
+                style: {
+                    title: "style样式",
+                    type: "string",
+                    description: "组件的样式",
+                    $converter: "/converter/appearance.converter"
+                }
+            },
+            setPropertyRelates(changeObject, prop) {
+                if (!changeObject) {
+                    return;
+                }
+                switch (changeObject && changeObject.propertyID) {
+                    case 'class':
+                        self.updateElementByParentContainer(propertyData.id, componentInstance);
+                        break;
+                }
+
+            }
+        };
+    };
+
+    public getEditorProperties(propertyData): any {
+        return this.getComponentConfig(propertyData);
+    }
+
+
+    /**
+     * 卡片控件：切换控件类型后事件
+     * @param propertyData 控件DOM属性
+     * @param newControlType 新控件类型
+     */
+    private changeControlType(propertyData, changeObject, componentInstance: DesignerComponentInstance) {
+        const newControlType = changeObject.propertyValue;
+
+        // 1、定位控件父容器
+        const parentContainer = componentInstance && componentInstance.parent && componentInstance.parent['schema'];
+        if (!parentContainer) {
+            return;
+        }
+
+        const index = parentContainer.contents.findIndex(c => c.id === propertyData.id);
+        const oldControl = parentContainer.contents[index];
+
+        let newControl;
+        // 2、记录绑定字段viewModel的变更
+        if (this.designViewModelField) {
+            const dgViewModel = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+            dgViewModel.changeField(this.designViewModelField.id, {
+                editor: {
+                    $type: newControlType
+                },
+                name: this.designViewModelField.name,
+                require: this.designViewModelField.require,
+                readonly: this.designViewModelField.readonly
+            }, false);
+            // 3、创建新控件
+            newControl = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, newControlType);
+        }
+        if (!newControl) {
+            newControl = this.controlCreatorUtils.createFormGroupWithoutField(newControlType);
+        }
+        //  4、保留原id样式等属性
+        Object.assign(newControl, {
+            id: oldControl.id,
+            appearance: oldControl.appearance,
+            size: oldControl.size,
+            label: oldControl.label,
+            binding: oldControl.binding,
+            visible: oldControl.visible
+        });
+        Object.assign(newControl.editor, {
+            isTextArea: newControl.isTextArea && oldControl.isTextArea,
+            placeholder: oldControl.editor?.placeholder,
+            holdPlace: oldControl.editor?.holdPlace,
+            readonly: oldControl.editor?.readonly,
+            required: oldControl.editor?.required,
+        });
+
+        // 5、替换控件
+        parentContainer.contents.splice(index, 1);
+        parentContainer.contents.splice(index, 0, newControl);
+        componentInstance.schema = Object.assign(oldControl, newControl);
+
+        // 6、暂时移除旧控件的选中样式（后续考虑更好的方式）
+        Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf<HTMLElement>).forEach(
+            (element: HTMLElement) => element.classList.remove('dgComponentSelected')
+        );
+
+        Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf<HTMLElement>).forEach(
+            (element: HTMLElement) => element.classList.remove('dgComponentFocused')
+        );
+        // 7、触发刷新
+        canvasChanged.value++;
+
+    }
+
+    public getComponentConfig(propertyData, info = {}, properties = {}, setPropertyRelates?: any) {
+        const editorBasic = Object.assign({
+            description: "编辑器",
+            title: "编辑器",
+            type: "input-group",
+            $converter: "/converter/property-editor.converter"
+        }, info);
+
+        const editorProperties = Object.assign({
+            readonly: {
+                description: "",
+                title: "只读",
+                type: "boolean",
+                editor: {
+                    enableClear: true,
+                    editable: true
+                }
+            },
+            disabled: {
+                description: "",
+                title: "禁用",
+                type: "boolean",
+                visible: false
+            },
+            required: {
+                description: "",
+                title: "必填",
+                type: "boolean",
+                visible: false
+            },
+            placeholder: {
+                description: "空值时，输入控件内的占位文本",
+                title: "提示文本",
+                type: "string",
+                visible: false
+
+            }
+        }, properties);
+
+        return { ...editorBasic, properties: { ...editorProperties }, setPropertyRelates };
+
+    }
+
+
+    /**
+     * 枚举项编辑器
+     * @param propertyData 
+     * @param valueField 
+     * @param textField 
+     * @returns 
+     */
+    protected getItemCollectionEditor(propertyData, valueField, textField) {
+        valueField = valueField || 'value';
+        textField = textField || 'name';
+        return {
+            editor: {
+                columns: [
+                    { field: valueField, title: '值', dataType: 'string' },
+                    { field: textField, title: '名称', dataType: 'string' },
+                    { field: 'disabled', title: '禁用', visible: false, dataType: 'boolean', editor: { type: 'switch' } },
+                ],
+                type: "item-collection-editor",
+                valueField: valueField,
+                nameField: textField,
+                requiredFields: [valueField, textField],
+                uniqueFields: [valueField, textField],
+                readonly: this.checkEnumDataReadonly(propertyData)
+            }
+        };
+    }
+    /**
+     * 判断枚举数据是否只读
+     * 1、没有绑定信息或者绑定变量，可以新增、删除、修改
+     * 2、绑定类型为字段，且字段为枚举字段，则不可新增、删除、修改枚举值。只能从be修改然后同步到表单上。
+     * @param propertyData 下拉框控件属性值
+     */
+    private checkEnumDataReadonly(propertyData: any): boolean {
+        // 没有绑定信息或者绑定变量
+        if (!propertyData.binding || propertyData.binding.type !== 'Form') {
+            return false;
+        }
+        if (this.designViewModelField && this.designViewModelField.type &&
+            this.designViewModelField.type.$type === FormSchemaEntityFieldType$Type.EnumType) {
+            // 低代码、零代码，枚举字段均不可以改
+            return true;
+        }
+        return false;
+    }
+}