ace-front-end 1.0.0

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

@@ -0,0 +1,516 @@
+<script setup lang="ts">
+
+import {Check, Close, QuestionFilled} from "@element-plus/icons-vue";
+import {computed, nextTick, reactive, ref, watch} from "vue";
+import {ElForm, ElFormItem, ElInput, ElTree, type FormRules} from "element-plus";
+import type {DtoTreeNode, TreeFormData, FormData} from "@/views/appManage/dtoDefine/types";
+import {
+    type AppInstance,
+    createAxiosWithoutCache, type CreateDtoDefinitionFromEntityCommand,
+    type DtoDefinitionReference, type EntityDefinitionReference, type ProjectedPropertyDefinition,
+    useDtoApi,
+    useEntityApi
+} from "@jari-ace/app-bolts";
+import {useAppInstances} from "@jari-ace/element-plus-component";
+import {useDateFormatQuery} from "@/hooks/useDateFormats";
+
+const props = defineProps<{
+    appId?: string,
+    serviceName?: string,
+    entityId?: string,
+    parentProp?: string
+}>();
+const axios = createAxiosWithoutCache();
+const entityApi = useEntityApi(axios);
+const api = useDtoApi(axios);
+const app = ref<AppInstance>();
+const treeRef = ref<InstanceType<typeof ElTree>>();
+const inputRef = ref<InstanceType<typeof ElInput>>();
+const formRef = ref<InstanceType<typeof ElForm>>();
+const existsDtos = ref<DtoDefinitionReference[]>();
+const optItemRef = ref<InstanceType<typeof ElFormItem>>();
+const suggestDtoName = ref<{ key: string }[]>([])
+let nameIndexes: Record<string, number> = {}
+
+const treeProps = {
+    label: 'label',
+    children: 'children',
+    isLeaf: 'leaf',
+}
+
+const roots = ref<DtoTreeNode[]>([]);
+const getAllKeys = (nodes: DtoTreeNode[]): string[] =>
+    nodes.flatMap(node => [node.path, ...(
+        node.children ? getAllKeys(node.children) : []
+    )])
+
+const rules = reactive<FormRules<FormData>>({
+    "selectedNode.name": [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {pattern: /^[a-z][A-Za-z0-9]*$/, message: "必须符合Camel规范", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ],
+    "selectedNode.caption": [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ],
+    "selectedNode.createOption": [
+        {required: true, message: "必须选择一项", trigger: "blur"},
+        {enum: ['USE_EXIST_DTO', 'CREATE_DTO', 'FLATTEN'], message: "选项值不合法", trigger: "blur"}
+    ],
+    "selectedNode.newDtoName": [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {pattern: /^[A-Z][A-Za-z0-9]*$/, message: "必须符合Pascal规范", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ],
+    "selectedNode.existDto": [
+        {required: true, message: "不能为空", trigger: "blur"}
+    ]
+})
+
+function checkAll() {
+    const allNodeKeys = getAllKeys(roots.value)
+    treeRef.value!.setCheckedKeys(allNodeKeys)
+}
+
+function uncheckAll() {
+    treeRef.value!.setCheckedKeys([]);
+}
+
+const formData = ref<TreeFormData>({});
+
+function treeCurrentChanged(currentData: DtoTreeNode) {
+    if (!currentData) return;
+    formRef.value?.validate(valid => {
+        if (valid) {
+            formData.value.selectedNode = currentData;
+            if (currentData.dataType !== 'ENTITY') {
+                currentData.createOption = "FLATTEN";
+            }
+            inputRef.value?.focus();
+        } else {
+            nextTick(() => {
+                treeRef.value?.setCurrentKey(formData.value.selectedNode?.path)
+                inputRef.value?.focus();
+            })
+        }
+    })
+}
+
+function toPascalCase(str: string) {
+    return str[0].toUpperCase() + str.slice(1);
+}
+
+function mapToTreeNodes(properties: ProjectedPropertyDefinition[],
+                        parentPath: string,
+                        parent?: DtoTreeNode,
+                        flatten?: boolean) {
+    return properties.map(p => (
+        {
+            id: p.id,
+            label: p.name,
+            name: parent ? (
+                flatten ? (
+                              parent!.name ?? ""
+                          ) + toPascalCase(p.name) : p.name
+            ) : props.parentProp ? props.parentProp + toPascalCase(p.name) : p.name,
+            leaf: true,
+            dataType: p.dataType,
+            entityType: p.entityType,
+            caption: p.caption,
+            children: [],
+            path: parentPath && parentPath.length > 0 ? parentPath + "." + p.name : p.name,
+            parent: parent,
+            asInterface: false,
+            mapLoad: false,
+            loadOnly: false,
+            eventKeyWord: false,
+            propertyRef: p,
+            createOption: p.dataType === 'ENTITY' ? undefined : 'FLATTEN'
+        } as DtoTreeNode
+    ));
+}
+
+const hasChecked = computed(() => formData.value.selectedNode
+                                  && (
+                                      treeRef.value?.getCheckedKeys()
+                                             .findIndex(p => formData.value.selectedNode!.path
+                                                             === p) ?? -1
+                                  ) >= 0)
+
+async function onCreateOptionChanged(value?: string | number | boolean) {
+    const selectedNode = formData.value.selectedNode;
+    if (!selectedNode) return;
+    if (value === "USE_EXIST_DTO") {
+        const children = selectedNode.children;
+        for (let i = children.length - 1; i >= 0; i--) {
+            treeRef.value?.remove(children[i]);
+        }
+        existsDtos.value = await api.getByRefEntity(selectedNode.entityType!.id)
+
+    } else {
+        if (selectedNode.dataType === 'ENTITY') {
+            let children = selectedNode.children;
+            for (let i = children.length - 1; i >= 0; i--) {
+                treeRef.value?.remove(children[i]);
+            }
+            let properties = selectedNode.properties;
+            if (properties && properties.length > 0) {
+                children = mapToTreeNodes(
+                    properties,
+                    selectedNode.path,
+                    selectedNode,
+                    value === 'FLATTEN'
+                )
+            } else {
+                let nid: string;
+                if (selectedNode.entityType) {
+                    nid = selectedNode.entityType.id;
+                } else {
+                    return;
+                }
+                properties = await entityApi.getProperties(nid, false);
+                selectedNode.properties = properties;
+                children = mapToTreeNodes(properties,
+                    selectedNode.path,
+                    selectedNode,
+                    value === 'FLATTEN'
+                );
+            }
+            for (let child of children) {
+                treeRef.value?.append(child, selectedNode.path);
+            }
+            if (value === 'FLATTEN') {
+                selectedNode.newDtoName = selectedNode.entityType!.name + "DTO";
+            }
+            if (value === 'CREATE_DTO') {
+                let dtoName = selectedNode.entityType!.name + "DTO";
+                suggestDtoName.value = [
+                    {key: "Create" + selectedNode.entityType!.name + "Command"},
+                    {key: "Update" + selectedNode.entityType!.name + "Command"},
+                    {key: "Delete" + selectedNode.entityType!.name + "Command"},
+                    {key: selectedNode.entityType!.name + "Reference"},
+                    {key: selectedNode.entityType!.name + "Project"},
+                    {key: selectedNode.entityType!.name + "Present"},
+                    {key: selectedNode.entityType!.name + "DTO"}
+                ]
+                let max: number;
+                if (nameIndexes[dtoName]) {
+                    max = nameIndexes[dtoName];
+                } else {
+                    max = await api.getMaxNameIndex(props.serviceName!, dtoName);
+                }
+                selectedNode.newDtoName = dtoName + (
+                                          max + 1
+                ).toString();
+                nameIndexes[dtoName] = max + 1;
+            }
+            treeRef.value?.getNode(selectedNode.path).expand();
+        }
+    }
+    optItemRef.value?.clearValidate();
+}
+
+const queryDtoNameSuggestions = (queryString: string, cb: any) => {
+    const results = queryString
+        ? suggestDtoName.value.filter((suggestion: { key: string }) =>
+            suggestion.key.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
+        : suggestDtoName.value
+    // call callback function to return suggestions
+    cb(results)
+}
+const apps = useAppInstances()
+async function loadApp() {
+    if (!props.appId) return;
+    app.value = await apps.getById(props.appId);
+}
+
+watch(() => props.appId, loadApp)
+loadApp();
+
+async function refEntityChanged() {
+    if (!props.entityId) {
+        roots.value = [];
+        return;
+    }
+    roots.value = mapToTreeNodes(
+        await entityApi.getProperties(props.entityId, false),
+        "")
+    if (roots.value.length > 0) {
+        formData.value.selectedNode = roots.value[0];
+        treeRef.value?.setCurrentKey(formData.value.selectedNode.path);
+    } else {
+        formData.value.selectedNode = undefined;
+        treeRef.value?.setCurrentKey(undefined);
+    }
+    nameIndexes = {};
+}
+
+watch(() => props.entityId, refEntityChanged)
+refEntityChanged();
+
+function _buildCreateCommand(refEntity: EntityDefinitionReference,
+                             dtoName: string,
+                             caption: string,
+                             dtoProperties: DtoTreeNode[],
+                             asInterface: boolean,
+                             mapLoad: boolean,
+                             loadOnly: boolean,
+                             checkedKeyIndex: Record<string, boolean>) {
+    const cmd: CreateDtoDefinitionFromEntityCommand = {
+        refEntity: refEntity,
+        name: dtoName,
+        caption: caption,
+        createPropCommands: [],
+        asInterface,
+        mapLoad: mapLoad,
+        loadOnly: loadOnly
+    };
+    for (let p of dtoProperties) {
+        if (p.dataType === 'ENTITY' && p.createOption !== 'USE_EXIST_DTO') {
+            const children = p.children.filter(e => checkedKeyIndex[e.path])
+            const createDtoCmd = _buildCreateCommand(p.entityType!,
+                p.newDtoName!,
+                p.caption,
+                children,
+                p.asInterface,
+                p.mapLoad,
+                p.loadOnly,
+                checkedKeyIndex);
+            cmd.createPropCommands.push({
+                caption: p.caption,
+                createDtoCommand: createDtoCmd,
+                createOption: p.createOption!,
+                entityPropertyRef: p.propertyRef,
+                eventKeyWord: false,
+                existDto: p.existDto,
+                localize: p.localize,
+                name: p.name
+            })
+        } else {
+            cmd.createPropCommands.push({
+                caption: p.caption,
+                createDtoCommand: undefined,
+                createOption: p.createOption!,
+                entityPropertyRef: p.propertyRef,
+                eventKeyWord: p.eventKeyWord,
+                existDto: p.existDto,
+                localize: p.localize,
+                dateTimeFormat: p.dateTimeFormat,
+                name: p.name
+            })
+        }
+    }
+    return cmd;
+}
+
+defineExpose({
+    buildCreateCommand(refEntity: EntityDefinitionReference,
+                       dtoName: string,
+                       caption: string,
+                       asInterface: boolean,
+                       mapLoad: boolean,
+                       loadOnly: boolean) {
+        const checkedKeys = treeRef.value?.getCheckedKeys()
+
+        const keyIndex: Record<string, boolean> = {};
+        for (const k of checkedKeys!) {
+            keyIndex[k] = true;
+        }
+        return _buildCreateCommand(refEntity,
+            dtoName,
+            caption,
+            roots.value.filter(r => keyIndex[r.path]),
+            asInterface,
+            mapLoad,
+            loadOnly,
+            keyIndex,
+        )
+    },
+    getRoots() {
+        return roots.value
+    },
+    getCheckedKeys() {
+        return treeRef.value?.getCheckedKeys()
+    },
+    validate(callback: (valid: boolean) => void) {
+        formRef.value?.validate(callback);
+    }
+})
+</script>
+
+<template>
+    <el-form ref="formRef" size="small" label-position="top" style="height: 100%"
+             :model="formData" :rules="rules"
+             require-asterisk-position="right" inline-message>
+        <el-row style="height: 100%" :gutter="16">
+            <el-col :span="12" class="property-tree-view">
+                <el-form-item style="border-right: solid 1px var(--el-border-color);">
+                    <template #label style="width: 100%;">
+                        <div style="margin: 8px 0; font-weight: bold">
+                            请勾选要加入DTO的属性
+                            <ja-button circle :icon="Close" tooltip="全消" @click="uncheckAll"
+                                       style="float:right; margin-right: 8px;"
+                                       shortcut="Alt+C"/>
+                            <ja-button circle :icon="Check" tooltip="全选" @click="checkAll"
+                                       style="float:right;margin-right: 8px;" shortcut="Alt+A"/>
+                        </div>
+                    </template>
+                    <el-scrollbar
+                        style="width: 100%;">
+                        <el-tree ref="treeRef" :props="treeProps" highlight-current
+                                 :data="roots"
+                                 @current-change="treeCurrentChanged"
+                                 node-key="path"
+                                 show-checkbox check-on-click-node check-strictly
+                                 :expand-on-click-node="false">
+                        </el-tree>
+                    </el-scrollbar>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12" style="margin-top:8px;" v-if="hasChecked">
+                <el-form-item label="属性名称" required prop="selectedNode.name">
+                    <el-input v-model="formData.selectedNode!.name" ref="inputRef">
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="属性标题" required prop="selectedNode.caption">
+                    <ja-input-i18n-raw :app-id="appId" size="small"
+                                       v-model="formData.selectedNode!.caption"></ja-input-i18n-raw>
+                </el-form-item>
+                <el-form-item label="嵌套DTO选项" required prop="selectedNode.createOption"
+                              v-if="formData.selectedNode!.dataType === 'ENTITY'"
+                              ref="optItemRef">
+                    <el-radio-group v-model="formData.selectedNode!.createOption"
+                                    @change="onCreateOptionChanged">
+                        <el-radio-button value="CREATE_DTO"
+                                         :disabled="formData.selectedNode!.dataType !== 'ENTITY'">
+                            新建DTO
+                        </el-radio-button>
+                        <el-radio-button value="USE_EXIST_DTO"
+                                         :disabled="formData.selectedNode!.dataType !== 'ENTITY'">
+                            使用现有DTO
+                        </el-radio-button>
+                        <el-radio-button value="FLATTEN">扁平化</el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="新DTO名称" required prop="selectedNode.newDtoName"
+                              v-if="formData.selectedNode!.createOption === 'CREATE_DTO'">
+                    <el-autocomplete v-model="formData.selectedNode!.newDtoName"
+                                     value-key="key"
+                                     :fetch-suggestions="queryDtoNameSuggestions"
+                                     highlight-first-item
+                                     clearable></el-autocomplete>
+                </el-form-item>
+                <el-form-item label="审计关键字" v-if="formData.selectedNode!.dataType !== 'ENTITY'
+                && formData.selectedNode!.propertyRef!.collectionType === 'NONE'">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            审计关键字
+                            <el-tooltip raw-content
+                                        content="当前DTO作为事件数据审计时，将取此属性值作为关键字">
+                                <el-icon>
+                                    <question-filled>
+                                    </question-filled>
+                                </el-icon>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <el-switch v-model="formData.selectedNode!.eventKeyWord"></el-switch>
+                </el-form-item>
+                <el-form-item label="生成为接口">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            生成为接口
+                            <el-tooltip raw-content
+                                        content="发布生成代码时，此DTO生成为interface而不是class">
+                                <el-icon>
+                                    <question-filled>
+                                    </question-filled>
+                                </el-icon>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <el-switch v-model="formData.selectedNode!.asInterface"></el-switch>
+                </el-form-item>
+                <el-form-item label="加载映射"
+                              v-if="formData.selectedNode!.createOption === 'CREATE_DTO'">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            加载映射
+                            <el-tooltip raw-content
+                                        content="启用后，DTO映射转换为对应实体时，先从数据库加载同ID实体再复制属性值，<br/>否则新建实体再复制属性值">
+                                <el-icon>
+                                    <question-filled>
+                                    </question-filled>
+                                </el-icon>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <el-switch v-model="formData.selectedNode!.mapLoad"></el-switch>
+                </el-form-item>
+                <el-form-item label="只加载"
+                              v-if="formData.selectedNode!.mapLoad">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            只加载
+                            <el-tooltip raw-content
+                                        content="启用后，映射加载对应实体后，<br/>不会将DTO的属性值复制到实体上">
+                                <el-icon>
+                                    <question-filled>
+                                    </question-filled>
+                                </el-icon>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <el-switch v-model="formData.selectedNode!.loadOnly"></el-switch>
+                </el-form-item>
+                <el-form-item label="请选择现存DTO" required prop="selectedNode.existDto"
+                              v-if="formData.selectedNode!.createOption === 'USE_EXIST_DTO'">
+                    <el-select v-model="formData.selectedNode!.existDto" filterable
+                               value-key="id">
+                        <el-option v-for="d in existsDtos" :key="d.id" :value="d"
+                                   :label="d.name"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期时间格式" prop="dateTimeFormat"
+                              v-if="formData.selectedNode!.dataType === 'DATE'
+                              || formData.selectedNode!.dataType === 'DATETIME'
+                               || formData.selectedNode!.dataType === 'TIME'">
+                    <el-autocomplete v-model="formData.selectedNode!.dateTimeFormat"
+                                     :fetch-suggestions="useDateFormatQuery">
+                    </el-autocomplete>
+                </el-form-item>
+                <el-form-item label="是否翻译为本地化文本"
+                              v-if="formData.selectedNode!.dataType==='I18N_STRING'">
+                    <el-switch v-model="formData.selectedNode!.localize"></el-switch>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12" v-else>
+                <el-empty description="请选择属性"></el-empty>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+
+<style scoped lang="scss">
+.property-tree-view {
+    height: 100%;
+
+    :deep(.el-form-item__label) {
+        width: 100%;
+    }
+
+    :deep(.el-col) {
+        height: 100%;
+    }
+
+    :deep(.el-form-item--small) {
+        height: 100%;
+    }
+
+    :deep(.el-form-item__content) {
+        height: 100%;
+    }
+}
+</style>