ace-front-end 1.0.0

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

@@ -0,0 +1,586 @@
+<script setup lang="ts">
+import {
+    type AppInstance,
+    type ConstraintProvider,
+    createAxiosWithoutCache,
+    type CreateDtoConstraintCommand,
+    type CreateDtoPropertyCommand,
+    type DtoDefinitionReference,
+    type DtoPropertyDefinition,
+    type DtoPropertyDefinitionReference,
+    type EnumDefinitionReference,
+    type PropertyCollectionType,
+    type PropertyDataType,
+    type PropertyDataTypes,
+    type UpdateDtoPropertyCommand,
+    useConstraintApi,
+    useDtoApi,
+    useEnumApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {computed, ref, watch} from "vue";
+import {
+    JaDropdownButton,
+    JaForm,
+    JaInputI18nRaw,
+    useAppInstances,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import {Minus, Plus} from "@element-plus/icons-vue";
+import EditDialog from '../../enumDefine/editDialog.vue'
+import {ElFormItem, ElScrollbar} from "element-plus";
+import {
+    getParameterComponent,
+    getParameterComponentProps,
+    useConstraintsEditor
+} from "@/views/appManage/dtoDefine/components/uilts";
+import {useDateFormatQuery} from "@/hooks/useDateFormats";
+
+const props = defineProps<{
+    mode: 'create' | 'update',
+    dto?: DtoDefinitionReference,
+    property?: DtoPropertyDefinition,
+    appName?: string,
+    serviceName?: string,
+    properties?: DtoPropertyDefinition[],
+}>()
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+})
+const title = ref<string>("");
+const state = ref<{
+    formData: CreateDtoPropertyCommand | UpdateDtoPropertyCommand
+}>({
+    formData: newPropertyCommand()
+});
+const axios = createAxiosWithoutCache();
+const api = useDtoApi(axios);
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const loading = useLoading();
+const form = ref<InstanceType<typeof JaForm>>();
+const emits = defineEmits(["success"]);
+const activeTab = ref("general");
+const enumApi = useEnumApi(axios);
+const enums = ref<EnumDefinitionReference[]>();
+const appInfo = ref<AppInstance>()
+const enumEditorVisible = ref(false);
+const existsDtos = ref<DtoDefinitionReference[]>();
+let manualNamed: boolean = false;
+
+const isCollection = computed(() => state.value.formData?.collectionType !== 'NONE');
+const isMap = computed(() => state.value.formData?.collectionType === 'MAP');
+const isEnum = computed(() => state.value.formData?.dataType === 'ENUM');
+
+const baseScrollbar = ref<InstanceType<typeof ElScrollbar>>();
+const providers = ref<ConstraintProvider[]>([]);
+const constraintApi = useConstraintApi(axios);
+let allProviders: ConstraintProvider[] = [];
+const dataTypes = ref<PropertyDataTypes>();
+const originalCollectionType = ref<PropertyCollectionType>('NONE');
+
+const {
+    constraints,
+    deletedConstraints,
+    cstScrollbar,
+    onConstraintChanged,
+    onDelConstraintClick,
+    onAddConstraintClick
+} = useConstraintsEditor();
+
+function newPropertyCommand() {
+    return {
+        /**
+         * 所属的 DTO 定义
+         */
+        dto: props.dto,
+
+        /**
+         * dto 属性名（camel 命名，最大 255 字节）
+         */
+        name: "",
+
+        /**
+         * 属性标题（最大 255 字节）
+         */
+        caption: "",
+
+        /**
+         * 是否不能为空
+         */
+        notNull: false,
+
+        /**
+         * 字符串长度限制
+         */
+        size: 255,
+
+        /**
+         * 数据类型（枚举）
+         */
+        dataType: "STRING",
+
+        dateTimeFormat: '',
+        /**
+         * 集合类型（枚举）
+         */
+        collectionType: "NONE",
+
+        /**
+         * Map 类型键的数据类型（枚举）
+         */
+        mapKeyDataType: undefined,
+
+        /**
+         * Map 键为枚举时的枚举引用类型
+         */
+        mapKeyEnum: undefined,
+
+        /**
+         * 属性本身为枚举时的枚举引用类型
+         */
+        enumType: undefined,
+
+        /**
+         * 属性引用的 DTO 类型
+         */
+        refDto: undefined,
+
+        /**
+         * 属性上定义的约束列表
+         */
+        createdConstraints: [],
+
+        /**
+         * 是否需要本地化，仅适用于 I18nString 类型
+         */
+        localize: false,
+        /**
+         * 说明
+         */
+        comment: "",
+
+        eventKeyWord: false,
+    } as CreateDtoPropertyCommand;
+}
+
+const apps = useAppInstances()
+
+async function init() {
+    appInfo.value = await apps.getByName(props.appName!)
+    title.value = props.mode === 'create' ? '创建属性定义' : '修改属性定义';
+    loadEnums();
+    loadDataTypes();
+    loadDtos();
+    await loadConstraintProviders();
+    if (props.mode === 'create') {
+        state.value.formData = newPropertyCommand();
+        constraints.value = [];
+        activeTab.value = "general";
+    } else {
+        if (!props.dto || !props.property) return;
+        const r = await api.getProperty(props.property.id);
+        originalCollectionType.value = r.collectionType;
+        state.value.formData = r as UpdateDtoPropertyCommand;
+        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 = [];
+        }
+    }
+    deletedConstraints.value = [];
+    getSupportedProviders();
+    manualNamed = false;
+}
+
+async function loadDataTypes() {
+    dataTypes.value = await api.getPropertyDataTypes()
+    if (props.mode === 'create' || !props.property?.refProperty) {
+        const {CLOB, ATTACHMENT, AUTO_NUMBER, I18N_STRING, ...newDataTypes} = dataTypes.value
+        dataTypes.value = newDataTypes
+    }
+}
+
+async function loadDtos() {
+    existsDtos.value = await api.getAllByApp(props.appName!)
+}
+
+async function loadConstraintProviders() {
+    allProviders = (
+        await constraintApi.getConstraintProviders()
+    ).filter(p => p.singleProperty);
+}
+
+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 loadEnums() {
+    if (!props.serviceName) {
+        enums.value = [];
+        return;
+    }
+    enums.value = await enumApi.getAllByService(props.serviceName!)
+}
+
+function submit() {
+    if (!form.value) return;
+    if (props.mode === 'create') {
+        const cmd = state.value.formData as CreateDtoPropertyCommand;
+        cmd.createdConstraints = constraints.value.map(c => (
+            {
+                ...c,
+                dto: {
+                    id: props.dto!.id,
+                    dataVersion: props.dto!.dataVersion,
+                    name: props.dto!.name
+                } as DtoDefinitionReference,
+                properties: [] as DtoPropertyDefinitionReference[],
+                sourceId: undefined
+            } as CreateDtoConstraintCommand
+        ))
+
+        form.value.validate(() => api.createProperty(cmd)
+                                     .then((data) => {
+                                         emits('success', data);
+                                         visible.value = false;
+                                     }));
+    } else {
+        const cmd = state.value.formData as UpdateDtoPropertyCommand;
+        console.log(cmd)
+        cmd.createdConstraints = constraints.value.filter(c => c.state === 'new').map(o => (
+            {
+                ...o,
+                dto: {
+                    id: props.dto!.id,
+                    dataVersion: props.dto!.dataVersion,
+                    name: props.dto!.name
+                } as DtoDefinitionReference,
+                properties: [] as DtoPropertyDefinitionReference[],
+                sourceId: undefined
+            }
+        ));
+        cmd.updatedConstraints = constraints.value.filter(c => c.state === 'modified');
+        cmd.deletedConstraints = deletedConstraints.value;
+        form.value.validate(() => api.updateProperty(cmd)
+                                     .then((data) => {
+                                         emits('success', data);
+                                         visible.value = false;
+                                     }));
+    }
+}
+
+function onCreateEnumClick() {
+    enumEditorVisible.value = true;
+}
+
+function pascalToCamelCase(input?: string) {
+    if (!input) return "";
+    return input.charAt(0).toLowerCase() + input.slice(1);
+}
+
+watch(() => state.value.formData, async () => {
+    const f = state.value.formData;
+    // if (f.collectionType !== 'NONE' && isEntity.value && f.relationMode
+    //     !== 'ONE_TO_MANY') {
+    //     f.relationMode = 'ONE_TO_MANY';
+    // }
+    // if (f.collectionType === 'NONE' && isEntity.value && (
+    //     f.relationMode
+    //     === 'ONE_TO_MANY' || !f.relationMode
+    // )) {
+    //     f.relationMode = 'MANY_TO_ONE';
+    // }
+
+    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;
+        }
+    }
+    getSupportedProviders();
+
+}, {
+    deep: true
+})
+watch(constraints, getSupportedProviders, {
+    deep: true
+})
+</script>
+
+<template>
+    <el-drawer destroy-on-close append-to-body v-model="visible" :title="title"
+               @open="init">
+        <el-tabs v-model="activeTab" type="card" style="height: 100%">
+            <el-tab-pane label="基本定义" name="general" style="height: 100%;">
+                <el-scrollbar style="margin-right: 0 !important;"
+                              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>
+                        <el-tag type="warning" style="margin: 8px 0 0 0;"
+                                v-if="!!property?.refProperty">
+                            以下值引用参照实体属性，不可修改
+                        </el-tag>
+                        <ja-form-item label="属性标题" prop="caption">
+                            <ja-input-i18n-raw :app-id="appInfo?.id" size="small"
+                                               :disabled="!!property?.refProperty"
+                                               v-model="state.formData.caption"></ja-input-i18n-raw>
+                        </ja-form-item>
+                        <ja-form-item label="备注" prop="comment">
+                            <ja-input :disabled="!!property?.refProperty"></ja-input>
+                        </ja-form-item>
+                        <ja-form-item label="不能为空" prop="notNull" v-if="!isCollection">
+                            <ja-switch :disabled="!!property?.refProperty"/>
+                        </ja-form-item>
+                        <ja-form-item label="数据类型" prop="dataType" required>
+                            <ja-select filterable :disabled="!!property?.refProperty">
+                                <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="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 :disabled="!!property?.refProperty"></ja-input-number>
+                        </ja-form-item>
+                        <ja-form-item label="枚举类型" prop="enumType" required
+                                      v-if="state.formData.dataType === 'ENUM'">
+                            <ja-select value-key="id"
+                                       :disabled="!!property?.refProperty">
+                                <el-option v-for="e in enums" :key="e.id" :label="e.name"
+                                           :value="e"></el-option>
+                                <template #footer>
+                                    <el-button link type="primary" :icon="Plus"
+                                               tooltip="添加新枚举" style="width: 100%;"
+                                               @click="onCreateEnumClick">添加枚举
+                                    </el-button>
+                                </template>
+                            </ja-select>
+                        </ja-form-item>
+                        <ja-form-item label="DTO类型" prop="refDto" required
+                                      v-if="state.formData.dataType === 'ENTITY'">
+                            <ja-select value-key="id" filterable
+                                       :disabled="!!property?.refProperty">
+                                <el-option v-for="d in existsDtos" :key="d.id" :label="d.name"
+                                           :value="d"></el-option>
+                            </ja-select>
+                        </ja-form-item>
+
+                        <ja-form-item label="集合类型" prop="collectionType">
+                            <ja-radio-group :disabled="!!property?.refProperty">
+                                <el-radio-button label="单值" value="NONE"></el-radio-button>
+                                <el-radio-button label="List" value="LIST"></el-radio-button>
+                                <el-radio-button label="Set" value="SET"></el-radio-button>
+                                <el-radio-button label="Map" value="MAP"></el-radio-button>
+                            </ja-radio-group>
+                        </ja-form-item>
+                        <template v-if="isCollection">
+                            <template v-if="isMap">
+                                <ja-form-item label="Map键类型" prop="mapKeyDataType" required
+                                              :disabled="!!property?.refProperty">
+                                    <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'">
+                                    <div style="display:flex; gap: 8px; width: 100%;">
+                                        <ja-select value-key="id" style="flex: 1; width: 100%;"
+                                                   :disabled="!!property?.refProperty">
+                                            <el-option v-for="e in enums" :key="e.id"
+                                                       :label="e.name"
+                                                       :value="e"></el-option>
+                                        </ja-select>
+                                        <ja-button circle :icon="Plus" tooltip="添加新枚举"
+                                                   :disabled="!!property?.refProperty"
+                                                   @click="onCreateEnumClick"></ja-button>
+                                    </div>
+                                </ja-form-item>
+                            </template>
+                        </template>
+                        <ja-form-item label="审计关键字"
+                                      label-remark="当前DTO作为事件数据审计时，将取此属性值作为关键字"
+                                      prop="eventKeyWord"
+                                      v-if="state.formData.dataType !== 'ENTITY' && state.formData.collectionType === 'NONE'">
+                            <ja-switch></ja-switch>
+                        </ja-form-item>
+                        <ja-form-item label="日期时间格式" prop="dateTimeFormat"
+                                      v-if="state.formData.dataType === 'DATE' || state.formData.dataType === 'DATETIME' || state.formData.dataType === 'TIME'">
+                            <ja-autocomplete :fetch-suggestions="useDateFormatQuery"
+                                             v-model="state.formData.dateTimeFormat">
+                            </ja-autocomplete>
+                        </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="添加约束"
+                                        :disabled="!!property?.refProperty"
+                                        @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
+                                            v-if="d.dataType === 'INTEGER' || d.dataType === 'DECIMAL'"
+                                            :is="getParameterComponent(d.dataType)"
+                                            v-model.number="c.constraintParameters[d.name]"
+                                            v-bind="getParameterComponentProps(d.dataType)"
+                                            @change="onConstraintChanged(c)">
+                                        </component>
+                                        <component
+                                            v-else
+                                            :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>
+    <edit-dialog mode="create" v-model="enumEditorVisible" :app-name="appInfo?.name"
+                 @success="loadEnums"
+                 :service-name="props.serviceName"></edit-dialog>
+</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>