ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/entityDefine/components/PropertyEditor.vue

@@ -0,0 +1,956 @@
+<script setup lang="ts">
+import {
+    type AppInstance,
+    type ConstraintProvider,
+    createAxiosWithoutCache,
+    type CreateOrderByDescriptorCommand,
+    type CreatePropertyCommand,
+    type EntityDefinition,
+    type EntityDefinitionReference,
+    type FileConfiguration,
+    type ProjectedFileConfiguration,
+    type ProjectedPropertyDefinition,
+    type ProjectedStringIdTemplate,
+    type PropertyCollectionType,
+    type PropertyDataType,
+    type PropertyDataTypes,
+    type PropertyDefinitionReference,
+    type StringIdTemplate,
+    type UpdatePropertyCommand,
+    useEntityApi,
+    useEnumApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {computed, nextTick, ref, watch} from "vue";
+import {
+    JaDatePicker,
+    JaDropdownButton,
+    JaForm,
+    JaInput,
+    JaInputI18nRaw,
+    JaInputNumber,
+    JaPropertyPickerRaw,
+    JaRolePicker,
+    JaSwitch,
+    JaTimePicker,
+    useAppInstances,
+    useBackendValidations, useConstraintProviders,
+    useEntities, useEntityPropDataTypes, useFileConfigurations,
+    useNumberTemplates
+} from "@jari-ace/element-plus-component";
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {ElMessage, ElScrollbar} from "element-plus";
+import {
+    type EditingOrderByDescriptor,
+    getParameterComponent,
+    getParameterComponentProps,
+    scrollToBottom,
+    useConstraintsEditor
+} from "@/views/appManage/entityDefine/uilts";
+import FileConfigEditor from '../../registerUpload/components/Editor.vue';
+import StringIdTemplateEditor from '../../numberTemplate/components/Editor.vue';
+import EnumPicker from "@/components/enumPicker/EnumPicker.vue";
+
+const props = defineProps<{
+    mode: 'create' | 'update',
+    entity?: EntityDefinition,
+    property?: ProjectedPropertyDefinition,
+    appName?: string,
+    serviceName?: string,
+    dataSourceId?: string,
+    properties?: ProjectedPropertyDefinition[],
+}>()
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+})
+const title = ref<string>("");
+const state = ref<{
+    formData: CreatePropertyCommand | UpdatePropertyCommand
+}>({
+    formData: newPropertyCommand()
+});
+const axios = createAxiosWithoutCache();
+const api = useEntityApi(axios);
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const loading = useLoading();
+const form = ref<InstanceType<typeof JaForm>>();
+const emits = defineEmits(["success", "closed"]);
+const activeTab = ref("general");
+const enumApi = useEnumApi(axios);
+const appInfo = ref<AppInstance>()
+const entities = ref<EntityDefinitionReference[]>();
+let manualNamed: boolean = false;
+const canBePrimaryKey = computed(() => {
+    const dt = state.value.formData?.dataType;
+    return !props.entity?.autoId && dt != 'BLOB' && dt != 'CLOB'
+           && dt != 'ENUM' && dt != 'ENTITY' && dt != 'ATTACHMENT'
+           && dt != 'I18N_STRING' && dt != 'BOOLEAN';
+})
+const reverseProperties = computed(() => {
+    return propertiesForOrderBy.value?.filter(p => p.dataType == 'ENTITY'
+                                                   && p.collectionType == 'NONE') ?? [];
+})
+const isTreeStructure = computed(() => props.entity?.treeStructure && 'NONE'
+                                       !== props.entity?.treeStructure)
+const isCollection = computed(() => state.value.formData?.collectionType !== 'NONE');
+const isMap = computed(() => state.value.formData?.collectionType === 'MAP');
+const isEntity = computed(() => state.value.formData?.dataType === 'ENTITY');
+const isEnum = computed(() => state.value.formData?.dataType === 'ENUM');
+const isAttach = computed(() => state.value.formData?.dataType === 'ATTACHMENT');
+const isAutoNumber = computed(() => state.value.formData?.dataType === 'AUTO_NUMBER');
+const orderBys = ref<EditingOrderByDescriptor[]>([]);
+let deletedOrderBys: EditingOrderByDescriptor[] = [];
+const propertiesForOrderBy = ref<ProjectedPropertyDefinition[]>([]);
+let currentEntityType: EntityDefinitionReference | undefined;
+const baseScrollbar = ref<InstanceType<typeof ElScrollbar>>();
+const providers = ref<ConstraintProvider[]>([]);
+let allProviders: ConstraintProvider[] = [];
+const dataTypes = ref<PropertyDataTypes>();
+const fileConfigs = ref<ProjectedFileConfiguration[]>();
+const fileConfigEditorVisible = ref(false);
+const templates = ref<ProjectedStringIdTemplate[]>()
+const templateEditorVisible = ref(false);
+const originalCollectionType = ref<PropertyCollectionType>('NONE');
+const defaultValueComponent = ref<any>();
+const defaultValueComponentProps = ref<any>()
+const {getDataTypes} = useEntityPropDataTypes()
+const {getConstraintProviders} = useConstraintProviders()
+const {getFileConfigurations} = useFileConfigurations()
+const {getNumberTemplates} = useNumberTemplates()
+const {getEntities} = useEntities()
+const {
+    constraints,
+    deletedConstraints,
+    cstScrollbar,
+    onConstraintChanged,
+    onDelConstraintClick,
+    onAddConstraintClick
+} = useConstraintsEditor();
+
+function newPropertyCommand() {
+    return {
+        /**
+         * 所属实体
+         */
+        entity: {
+            id: props.entity?.id,
+            dataVersion: props.entity?.dataVersion,
+            name: props.entity?.name,
+            caption: props.entity?.caption
+        },
+        /**
+         * 属性名
+         */
+        name: "",
+        /**
+         * 存储列名
+         */
+        columnName: "",
+        /**
+         * 标题
+         */
+        caption: "",
+        /**
+         * 备注
+         */
+        comment: "",
+        /**
+         * 数据类型
+         */
+        dataType: "STRING",
+        /**
+         * 属性值的集合类型
+         */
+        collectionType: "NONE",
+        /**
+         * 表名
+         */
+        collectionTableName: "",
+        /**
+         * 键类型
+         */
+        mapKeyDataType: "STRING",
+
+        /**
+         * 映射键所属的枚举类型
+         */
+        mapKeyEnum: undefined,
+        /**
+         * Map键列名
+         */
+        mapKeyColumnName: "",
+        /**
+         * dataType为实体的属性引用的实体类型
+         */
+        entityType: undefined,
+        /**
+         * 一对多双向关系中对方的关联属性
+         */
+        mappedByProperty: undefined,
+        /**
+         * 枚举类型属性引用的枚举类型
+         */
+        enumType: undefined,
+        /**
+         * 对关联实体的级联操作
+         */
+        cascadeType: [],
+        /**
+         * 是否自动删除移出集合的孤立实体
+         */
+        orphanRemoval: false,
+        /**
+         * 关联方式
+         */
+        relationMode: undefined,
+        /**
+         * 非实体集合是否保持有序
+         */
+        orderedCollection: true,
+        /**
+         * 有序集合类型，并且元素为实体类型，使用OrderBy指定排序字段
+         */
+        createdOrderByDescriptors: [],
+        /**
+         * 属性上定义的约束
+         */
+        createdConstraints: [],
+        /**
+         * 能否为空
+         */
+        notNull: false,
+        /**
+         * 是否主键
+         */
+        primaryKey: false,
+        /**
+         * 文本类型长度
+         */
+        size: 255,
+        /**
+         * 附件配置标识
+         */
+        attachConfigKey: "",
+        /**
+         * 编码模版名称
+         */
+        numberTemplateName: "",
+        /**
+         *缺省值
+         */
+        defaultValue: ""
+    } as CreatePropertyCommand;
+}
+
+const apps = useAppInstances()
+
+async function init() {
+    appInfo.value = await apps.getByName(props.appName!)
+    title.value = props.mode === 'create' ? '创建属性定义' : '修改属性定义';
+    loadEntities();
+    loadDataTypes();
+    await loadConstraintProviders();
+    if (props.mode === 'create') {
+        state.value.formData = newPropertyCommand();
+        orderBys.value = [];
+        constraints.value = [];
+        activeTab.value = "general";
+    } else {
+        if (!props.entity || !props.property) return;
+        const r = await api.getProperty(props.property.id);
+        originalCollectionType.value = r.collectionType;
+        state.value.formData = r as UpdatePropertyCommand;
+        if (isEntity.value) {
+            loadPropertiesForOrderBy();
+            currentEntityType = state.value.formData?.entityType;
+            orderBys.value = r.orderByDescriptors?.map(d => (
+                {
+                    ...d,
+                    state: 'unmodified',
+                }
+            )) ?? [];
+        }
+        if (r.constraints) {
+            constraints.value = r.constraints
+                                 .filter(
+                                     c => allProviders
+                                              .findIndex(p =>
+                                                  p.constraintName === c.constraintName) >= 0)
+                                 .map(c => (
+                                     {
+                                         ...c,
+                                         state: 'unmodified',
+                                         provider: allProviders.find(p =>
+                                             p.constraintName
+                                             === c.constraintName)
+                                     }
+                                 ))
+        } else {
+            constraints.value = [];
+        }
+    }
+    deletedOrderBys = [];
+    deletedConstraints.value = [];
+    getSupportedProviders();
+    manualNamed = false;
+}
+
+function onClosed() {
+    //关闭后要清理状态，防止再打开其它
+    state.value.formData = newPropertyCommand();
+    emits("closed")
+}
+
+async function loadDataTypes() {
+    dataTypes.value = await getDataTypes()
+}
+
+async function loadConstraintProviders() {
+    const r = await getConstraintProviders()
+    allProviders = r.filter(p => p.singleProperty);
+}
+
+async function loadFileConfigs(searchKey?: string) {
+    if (!props.serviceName) return
+    const configs = await getFileConfigurations(props.serviceName)
+    if (searchKey && searchKey.length > 0) {
+        fileConfigs.value = configs.filter(c => c.configKey.indexOf(searchKey) > -1);
+    } else {
+        fileConfigs.value = [...configs];
+    }
+}
+
+async function loadNumberTemplates(nameToSearch?: string) {
+    if (!props.appName) return
+    const _templates = await getNumberTemplates(props.appName)
+    if (nameToSearch && nameToSearch.length > 0) {
+        templates.value = _templates.filter(t => t.name.indexOf(nameToSearch) > -1);
+    } else {
+        templates.value = [..._templates];
+    }
+}
+
+function getSupportedProviders() {
+    const f = state.value.formData;
+    providers.value = allProviders.filter(
+        p => (
+                 p.supportCollection === (
+                     f.collectionType !== 'NONE'
+                 )
+                 || (
+                     f.collectionType === 'NONE' && (
+                         f.dataType === 'STRING'
+                         || f.dataType === 'I18N_STRING'
+                         || f.dataType === 'ENUM'
+                     )
+                 )
+             )
+             && p.supportedDataTypes.findIndex(t => t === f.dataType) >= 0
+             && (
+                 (
+                     !p.canRepeat && !constraints.value.some((
+                             c => c.constraintName === p.constraintName
+                         )
+                     ) || p.canRepeat
+                 )
+             ))
+}
+
+async function loadEntities() {
+    if (!props.dataSourceId) return;
+    entities.value = await getEntities(props.dataSourceId);
+}
+
+async function loadPropertiesForOrderBy() {
+    propertiesForOrderBy.value = await api.getProperties(state.value.formData?.entityType?.id
+                                                         ?? '0');
+}
+
+function submit() {
+    if (!form.value) return;
+    if (isEntity.value) {
+        for (let o of orderBys.value) {
+            if (!o.orderByProperty) {
+                ElMessage.error('排序属性不能为空!')
+                return;
+            }
+            if (!o.sortIndex) {
+                ElMessage.error('序号不能为空!')
+                return;
+            }
+        }
+    }
+    if (props.mode === 'create') {
+        const cmd = state.value.formData as CreatePropertyCommand;
+        if (cmd.dataType === 'ATTACHMENT') {
+            cmd.size = 36;
+        }
+        cmd.createdOrderByDescriptors = orderBys.value.map(o => (
+            {
+                ...o,
+                orderByProperty: o.orderByProperty!,
+                sourceId: undefined
+            } as CreateOrderByDescriptorCommand
+        ));
+        cmd.createdConstraints = constraints.value.map(c => (
+            {
+                ...c,
+                entity: {
+                    id: props.entity!.id,
+                    dataVersion: props.entity!.dataVersion,
+                    name: props.entity!.name
+                } as EntityDefinitionReference,
+                properties: [] as PropertyDefinitionReference[],
+                sourceId: undefined
+            }
+        ))
+        form.value.validate(() => api.createProperty(cmd)
+                                     .then(() => {
+                                         emits('success');
+                                         visible.value = false;
+                                     }));
+    } else {
+        const cmd = state.value.formData as UpdatePropertyCommand;
+        if (cmd.dataType === 'ATTACHMENT') {
+            cmd.size = 36;
+        }
+        cmd.createdOrderByDescriptors = orderBys.value.filter(o => o.state === 'new').map(o => (
+            {
+                ...o,
+                definedOnProperty: props.property,
+                orderByProperty: o.orderByProperty!,
+                sourceId: undefined
+            }
+        ));
+        cmd.updatedOrderByDescriptors = orderBys.value.filter(o => o.state === 'modified')
+                                                .map(o => (
+                                                    {
+                                                        ...o,
+                                                        definedOnProperty: o.definedOnProperty!,
+                                                        orderByProperty: o.orderByProperty!,
+                                                    }
+                                                ));
+        cmd.deletedOrderByDescriptors = deletedOrderBys;
+        cmd.createdConstraints = constraints.value.filter(c => c.state === 'new').map(o => (
+            {
+                ...o,
+                entity: {
+                    id: props.entity!.id,
+                    dataVersion: props.entity!.dataVersion,
+                    name: props.entity!.name
+                } as EntityDefinitionReference,
+                properties: [] as PropertyDefinitionReference[],
+                sourceId: undefined
+            }
+        ));
+        cmd.updatedConstraints = constraints.value.filter(c => c.state === 'modified');
+        cmd.deletedConstraints = deletedConstraints.value;
+        form.value.validate(() => api.updateProperty(cmd)
+                                     .then(() => {
+                                         emits('success');
+                                         visible.value = false;
+                                     }));
+    }
+}
+
+function pascalToCamelCase(input?: string) {
+    if (!input) return "";
+    return input.charAt(0).toLowerCase() + input.slice(1);
+}
+
+function pascalToUnderscore(input?: string) {
+    if (!input) return "";
+    return input
+        .replace(/([A-Z])/g, '_$1')
+        .toLowerCase()               // 转换为大写
+        .replace(/^_/, '');
+}
+
+function onAddOrderByClick() {
+    const sortIndex = orderBys.value.length > 0 ? Math.max(...orderBys.value.map(o => o.sortIndex))
+                                                  + 1 : 1;
+    const id = Date.now().toString();
+    orderBys.value.push({
+        dataVersion: 0,
+        definedOnProperty: undefined,
+        direction: "ASC",
+        id: id.toString(),
+        orderByProperty: undefined,
+        releaseSource: "",
+        sortIndex: sortIndex,
+        state: 'new'
+    })
+    nextTick(() => scrollToBottom(baseScrollbar.value));
+}
+
+function onDeleteOrderByClick(o: EditingOrderByDescriptor) {
+    const id = orderBys.value.findIndex(x => x.id === o.id);
+    if (id >= 0) {
+        orderBys.value.splice(id, 1);
+        if (o.state != 'new') {
+            deletedOrderBys.push(o);
+            o.state = 'deleted'
+        }
+    }
+}
+
+function onCreateFileConfigClick() {
+    fileConfigEditorVisible.value = true;
+}
+
+function onFileConfigCreated(fileConfig: FileConfiguration) {
+    state.value.formData.attachConfigKey = fileConfig.configKey;
+}
+
+function onCreateNumberTemplateClick() {
+    templateEditorVisible.value = true;
+}
+
+function onNumberTemplateCreated(template: StringIdTemplate) {
+    state.value.formData.numberTemplateName = template.name;
+}
+
+watch(() => state.value.formData, async () => {
+    const f = state.value.formData;
+    if (isEntity && !f.relationMode) {
+        f.relationMode = 'MANY_TO_ONE';
+    }
+    if (isEntity.value && f.relationMode === 'ONE_TO_MANY' && !isCollection.value) {
+        f.collectionType = 'LIST';
+    }
+    if (isEntity.value && f.relationMode !== 'ONE_TO_MANY' && isCollection.value) {
+        f.collectionType = 'NONE';
+    }
+    if (isEntity.value && props.mode === 'create' && !manualNamed && !isCollection.value) {
+        const camel = pascalToCamelCase(f.entityType?.name);
+        if (f.name !== camel) {
+            f.name = camel;
+        }
+        const caption = (
+            await api.getById(f.entityType!.id)
+        ).caption;
+        if (f.caption !== caption) {
+            f.caption = caption;
+        }
+    }
+    if (isEnum.value && props.mode === 'create' && !manualNamed && !isCollection.value) {
+        const camel = pascalToCamelCase(f.enumType?.name);
+        if (f.name !== camel) {
+            f.name = camel;
+        }
+        const caption = (
+            await enumApi.getById(f.enumType!.id)
+        ).caption;
+        if (f.caption !== caption) {
+            f.caption = caption;
+        }
+    }
+    if (f.entityType !== currentEntityType) {
+        currentEntityType = f.entityType;
+        loadPropertiesForOrderBy();
+    }
+    if (isAttach.value && isCollection.value) {
+        f.collectionType = 'NONE';
+    }
+    if (isAutoNumber.value && isCollection.value) {
+        f.collectionType = 'NONE';
+    }
+    getSupportedProviders();
+
+}, {
+    deep: true
+})
+
+function setupDefaultValueComponent() {
+    const type = state.value.formData.dataType;
+    if (type === 'STRING' || type === 'I18N_STRING' || type === 'CLOB' || type === 'ENUM' || type
+        === 'CHAR' || type === 'ATTACHMENT' || type === 'AUTO_NUMBER') {
+        defaultValueComponent.value = JaInput
+    } else if (type === 'LONG' || type === 'INTEGER' || type === 'SHORT' || type === 'BYTE') {
+        defaultValueComponent.value = JaInputNumber
+        defaultValueComponentProps.value = {
+            precision: 0,
+            step: 1
+        }
+    } else if (type === 'DECIMAL') {
+        defaultValueComponent.value = JaInputNumber
+        defaultValueComponentProps.value = {
+            precision: 2,
+            step: 0.01
+        }
+    } else if (type === 'DATETIME') {
+        defaultValueComponent.value = JaDatePicker
+        defaultValueComponentProps.value = {
+            type: "datetime",
+            format: "YYYY-MM-DD HH:mm:ss",
+            valueFormat: "YYYY-MM-DD HH:mm:ss"
+        }
+    } else if (type === 'DATE') {
+        defaultValueComponent.value = JaDatePicker
+        defaultValueComponentProps.value = {
+            type: "date",
+            format: "YYYY-MM-DD",
+            valueFormat: "YYYY-MM-DD"
+        }
+    } else if (type === 'TIME') {
+        defaultValueComponent.value = JaTimePicker
+        defaultValueComponentProps.value = {
+            format: "HH:mm:ss",
+            valueFormat: "HH:mm:ss"
+        }
+    } else if (type === 'BOOLEAN') {
+        defaultValueComponent.value = JaSwitch
+        defaultValueComponentProps.value = undefined
+    } else {
+        defaultValueComponent.value = undefined
+        defaultValueComponentProps.value = undefined
+    }
+}
+
+watch(() => state.value.formData.dataType, () => {
+    if (isEntity.value) {
+        loadPropertiesForOrderBy();
+    }
+    setupDefaultValueComponent();
+})
+
+setupDefaultValueComponent()
+
+watch(constraints, getSupportedProviders, {
+    deep: true
+})
+</script>
+
+<template>
+    <el-drawer destroy-on-close append-to-body v-model="visible" :title="title"
+               @open="init" @closed="onClosed">
+        <el-tabs v-model="activeTab" type="card" style="height: 100%">
+            <el-tab-pane label="基本定义" name="general" style="height: 100%;">
+                <el-scrollbar class="el-form-scrollbar"
+                              ref="baseScrollbar">
+                    <ja-form :validator="validator" :model="state" ref="form">
+                        <ja-form-item label="属性名称" prop="name" required>
+                            <ja-input v-focus @input="manualNamed=true"></ja-input>
+                        </ja-form-item>
+                        <ja-form-item label="属性标题" prop="caption" required>
+                            <ja-input-i18n-raw :app-id="appInfo?.id" size="small"
+                                               v-model="state.formData.caption"></ja-input-i18n-raw>
+                        </ja-form-item>
+                        <ja-form-item label="存储列名" prop="columnName"
+                                      v-if="!(isEntity && isCollection)">
+                            <ja-input @input="manualNamed=true"></ja-input>
+                        </ja-form-item>
+                        <ja-form-item label="备注" prop="comment">
+                            <ja-input></ja-input>
+                        </ja-form-item>
+                        <ja-form-item label="是否主键" prop="primaryKey" required
+                                      v-if="canBePrimaryKey">
+                            <ja-input></ja-input>
+                        </ja-form-item>
+                        <ja-form-item label="是否树区分字段" prop="treeDiscriminator"
+                                      v-if="isTreeStructure && !isCollection">
+                            <ja-switch></ja-switch>
+                        </ja-form-item>
+                        <ja-form-item label="不能为空" prop="notNull"
+                                      v-if="!(isCollection && isEntity)">
+                            <ja-switch/>
+                        </ja-form-item>
+                        <ja-form-item label="缺省值" prop="defaultValue"
+                                      v-if="defaultValueComponent">
+                            <ja-input/>
+                            <!--                            <component :is="defaultValueComponent"-->
+                            <!--                                       v-bind="defaultValueComponentProps"/>-->
+                        </ja-form-item>
+                        <ja-form-item label="数据类型" prop="dataType" required>
+                            <ja-select filterable>
+                                <el-option
+                                    v-for="dt in (dataTypes ? Object.keys(dataTypes as object): [])"
+                                    :key="dt"
+                                    :label="dataTypes ? dataTypes[dt as PropertyDataType]: undefined"
+                                    :value="dt"></el-option>
+                            </ja-select>
+                        </ja-form-item>
+                        <ja-form-item label="附件配置" prop="attachConfigKey" required
+                                      v-if="isAttach">
+                            <ja-select filterable remote remote-show-suffix
+                                       placeholder="请选择附件配置"
+                                       :remote-method="loadFileConfigs"
+                                       :loading="loading">
+                                <template #footer>
+                                    <el-button type="primary" link @click="onCreateFileConfigClick"
+                                               style="width: 100%; text-align: left">
+                                        新建附件配置
+                                    </el-button>
+                                    <file-config-editor mode="create"
+                                                        v-model="fileConfigEditorVisible"
+                                                        @success="onFileConfigCreated"
+                                                        :app-service-name="serviceName"
+                                                        :app-name="appName"
+                                                        menu-type="develop">
+                                    </file-config-editor>
+                                </template>
+                                <el-option disabled value="" label="无可选项"
+                                           v-if="fileConfigs?.length === 0"></el-option>
+                                <el-option v-for="c in fileConfigs" :key="c.configKey"
+                                           :value="c.configKey" :label="c.configKey"></el-option>
+                            </ja-select>
+                        </ja-form-item>
+                        <ja-form-item label="编号规则" prop="numberTemplateName" required
+                                      v-if="isAutoNumber">
+                            <ja-select filterable remote remote-show-suffix
+                                       placeholder="请选择编号模板"
+                                       :remote-method="loadNumberTemplates"
+                                       :loading="loading">
+                                <template #footer>
+                                    <el-button type="primary" link
+                                               @click="onCreateNumberTemplateClick"
+                                               style="width: 100%;">
+                                        新建编号模板
+                                    </el-button>
+                                    <string-id-template-editor mode="new"
+                                                               v-model="templateEditorVisible"
+                                                               @success="onNumberTemplateCreated"
+                                                               :app-id="appInfo?.id"
+                                                               dev-mode="develop"></string-id-template-editor>
+                                </template>
+                                <el-option disabled value="" label="无可选项"
+                                           v-if="templates?.length === 0"></el-option>
+                                <el-option v-for="c in templates" :key="c.name"
+                                           :value="c.name" :label="c.name"></el-option>
+                            </ja-select>
+                        </ja-form-item>
+                        <ja-form-item label="文本长度" prop="size" required
+                                      v-if="state.formData.dataType === 'STRING'
+                                      || state.formData.dataType === 'I18N_STRING'
+                                      || state.formData.dataType === 'ENUM'
+                                      || state.formData.dataType === 'AUTO_NUMBER'">
+                            <ja-input-number></ja-input-number>
+                        </ja-form-item>
+                        <ja-form-item label="枚举类型" prop="enumType" required
+                                      v-if="state.formData.dataType === 'ENUM'">
+                            <enum-picker :app-name="appInfo?.name"
+                                         :service-name="serviceName"></enum-picker>
+                        </ja-form-item>
+                        <template v-if="isEntity">
+                            <ja-form-item label="关联实体" prop="entityType" required>
+                                <ja-select filterable value-key="id">
+                                    <el-option v-for="e in entities" :key="e.id"
+                                               :label="e.name + (e.caption ? ' (' + e.caption + ')' : '')"
+                                               :value="e"></el-option>
+                                </ja-select>
+                            </ja-form-item>
+                            <ja-form-item label="关联类型" prop="relationMode" required>
+                                <ja-radio-group>
+                                    <el-radio-button label="多对一"
+                                                     value="MANY_TO_ONE"></el-radio-button>
+                                    <el-radio-button label="一对多"
+                                                     value="ONE_TO_MANY"></el-radio-button>
+                                    <el-radio-button label="一对一"
+                                                     value="ONE_TO_ONE"></el-radio-button>
+                                </ja-radio-group>
+                            </ja-form-item>
+                            <ja-form-item label="对方关联属性" prop="mappedByProperty" required
+                                          v-if="state.formData.relationMode === 'ONE_TO_MANY'">
+                                <ja-select value-key="p" clearable>
+                                    <el-option v-for="p in reverseProperties" :key="p.id"
+                                               :label="p.name" :value="p"></el-option>
+                                </ja-select>
+                            </ja-form-item>
+                            <ja-form-item label="级联操作" prop="cascadeType">
+                                <ja-select multiple>
+                                    <el-option label="全部" value="ALL"></el-option>
+                                    <el-option label="新存" value="PERSIST"></el-option>
+                                    <el-option label="更新" value="MERGE"></el-option>
+                                    <el-option label="删除" value="REMOVE"></el-option>
+                                    <el-option label="刷新" value="REFRESH"></el-option>
+                                    <el-option label="脱离" value="DETACH"></el-option>
+                                </ja-select>
+                            </ja-form-item>
+                        </template>
+                        <ja-form-item label="集合类型" prop="collectionType"
+                                      v-if="!isEntity || state.formData.relationMode === 'ONE_TO_MANY'">
+                            <ja-radio-group>
+                                <el-radio-button label="单值" value="NONE"
+                                                 v-if="!isEntity"></el-radio-button>
+                                <el-radio-button label="List" value="LIST"
+                                                 :disabled="isAttach || isAutoNumber"></el-radio-button>
+                                <el-radio-button label="Set" value="SET"
+                                                 :disabled="isAttach || isAutoNumber || (props.mode === 'update' && originalCollectionType !== 'NONE')"></el-radio-button>
+                                <el-radio-button label="Map" value="MAP"
+                                                 :disabled="isAttach || isAutoNumber || (props.mode === 'update' && originalCollectionType !== 'NONE')"></el-radio-button>
+                            </ja-radio-group>
+                        </ja-form-item>
+                        <template v-if="isCollection">
+                            <ja-form-item label="集合存储表名" prop="collectionTableName" required
+                                          v-if="!(isEntity && isCollection)">
+                                <ja-input></ja-input>
+                            </ja-form-item>
+                            <template v-if="isMap">
+                                <ja-form-item label="Map键类型" prop="mapKeyDataType" required>
+                                    <ja-select filterable>
+                                        <el-option label="STRING" value="STRING"></el-option>
+                                        <el-option label="BOOLEAN" value="BOOLEAN"></el-option>
+                                        <el-option label="INTEGER" value="INTEGER"></el-option>
+                                        <el-option label="LONG" value="LONG"></el-option>
+                                        <el-option label="ENUM" value="ENUM"></el-option>
+                                        <el-option label="SHORT" value="SHORT"></el-option>
+                                        <el-option label="DECIMAL" value="DECIMAL"></el-option>
+                                        <el-option label="CHAR" value="CHAR"></el-option>
+                                        <el-option label="BYTE" value="BYTE"></el-option>
+                                    </ja-select>
+                                </ja-form-item>
+                                <ja-form-item label="Map键枚举类型" prop="mapKeyEnum" required
+                                              v-if="state.formData.mapKeyDataType === 'ENUM'">
+                                    <enum-picker :app-name="appInfo?.name"
+                                                 :service-name="serviceName"></enum-picker>
+                                </ja-form-item>
+                            </template>
+                            <ja-form-item label="保持有序" prop="orderedCollection"
+                                          v-if="!isEntity"
+                                          label-remark="加载数据时集合保持原顺序不变">
+                                <ja-switch></ja-switch>
+                            </ja-form-item>
+                        </template>
+                        <div class="order-by-list"
+                             v-if="isEntity && isCollection">
+                            <div class="order-by-list-row">
+                                <div class="order-by-list-row-title">按以下属性排序</div>
+                                <ja-button circle :icon="Plus" tooltip="添加排序属性" size="small"
+                                           @click="onAddOrderByClick"></ja-button>
+                            </div>
+                            <div class="order-by-list-row" v-for="o in orderBys"
+                                 v-if="orderBys.length > 0">
+                                <ja-property-picker-raw :entity-id="state.formData.entityType?.id"
+                                                        style="flex: auto"
+                                                        v-model="o.orderByProperty"></ja-property-picker-raw>
+                                <!--                            <el-select v-model="o.orderByProperty" value-key="id" size="small"-->
+                                <!--                                       @change="onOrderByChanged(o)" style="flex: auto;">-->
+                                <!--                                <el-option v-for="p in propertiesForOrderBy" :key="p.id"-->
+                                <!--                                           :label="p.name + (p.caption?  '(' + p.caption + ')' : '')"-->
+                                <!--                                           :value="p"></el-option>-->
+                                <!--                            </el-select>-->
+                                <el-radio-group v-model="o.direction" size="small"
+                                                style="flex: none;">
+                                    <el-radio-button label="升序" value="ASC"></el-radio-button>
+                                    <el-radio-button label="降序" value="DESC"></el-radio-button>
+                                </el-radio-group>
+                                <ja-button circle :icon="Minus" tooltip="删除" size="small"
+                                           @click="onDeleteOrderByClick(o)"></ja-button>
+                            </div>
+                            <div class="order-by-list-empty" v-else>暂未添加排序属性</div>
+                        </div>
+                        <ja-form-item label="读取属性值需要拥有的角色" prop="readRole"
+                                      label-remark="置空表示不限制访问，如果设置了读取角色，但是没有设置修改角色，那么默认修改也是需要该角色的">
+                            <ja-role-picker :app-name="props.appName"></ja-role-picker>
+                        </ja-form-item>
+                        <ja-form-item label="修改属性值需要拥有的角色" prop="writeRole"
+                                      label-remark="置空表示不限制修改权限">
+                            <ja-role-picker :app-name="props.appName"></ja-role-picker>
+                        </ja-form-item>
+                    </ja-form>
+
+                </el-scrollbar>
+            </el-tab-pane>
+            <el-tab-pane label="属性约束" name="constraints" style="height: 100%;">
+                <div style="width: 100%; height: 100%;  align-items: start;" class="gap-rows">
+                    <ja-dropdown-button type="success" size="default"
+                                        plain
+                                        cirlce
+                                        shortcut="Alt+O"
+                                        buttonText="添加约束"
+                                        @command="onAddConstraintClick">
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item
+                                    tabindex="0"
+                                    v-for="item in providers"
+                                    :key="item.constraintName"
+                                    :command="item">
+                                    {{ item.localeCaption }}
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </ja-dropdown-button>
+                    <el-scrollbar ref="cstScrollbar"
+                                  style="width: 100%; height: 100%; padding: 0 16px 0 0 !important; margin: 0 !important;">
+                        <div class="gap-rows">
+                            <el-card shadow="hover" v-for="c in constraints" :key="c.id">
+                                <template #header>
+                                    <div style="font-weight: 550; font-size: 14px;">
+                                        {{
+                                            c.provider?.localeCaption ?? c.provider?.constraintName
+                                        }}
+                                        <div style="float:right">
+                                            <ja-button circle :icon="Minus" size="small"
+                                                       @click="onDelConstraintClick(c)"
+                                                       tooltip="删除"></ja-button>
+                                        </div>
+                                    </div>
+                                </template>
+                                <el-form size="small" label-position="top">
+                                    <el-form-item
+                                        v-for="d in c.provider?.propertyDescriptors.filter(d => d.dataType !== 'LIST')"
+                                        :key="d.name" :label="d.localeCaption">
+                                        <component
+                                            :is="getParameterComponent(d.dataType)"
+                                            v-model="c.constraintParameters[d.name]"
+                                            v-bind="getParameterComponentProps(d.dataType)"
+                                            @change="onConstraintChanged(c)"></component>
+                                    </el-form-item>
+                                    <el-form-item label="验证失败的提示信息">
+                                        <ja-input-i18n-raw v-model="c.message" v-focus size="small"
+                                                           :app-id="appInfo?.id"
+                                                           @change="onConstraintChanged(c)">
+                                        </ja-input-i18n-raw>
+                                    </el-form-item>
+                                </el-form>
+                            </el-card>
+                        </div>
+                        <el-empty v-if="constraints.length === 0"></el-empty>
+                    </el-scrollbar>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+
+        <template #footer>
+            <ja-button type="primary" shortcut="Alt+Enter" @click="submit" :loading="loading"
+                       :disabled="loading">确定
+            </ja-button>
+            <el-button plain @click="visible=false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+.gap-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.order-by-list {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &-row {
+        flex: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        &-title {
+            flex: auto;
+            font-size: 12px;
+            font-weight: 550;
+        }
+    }
+
+    &-empty {
+        text-align: center;
+    }
+
+}
+</style>