ace-front-end 1.0.0

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

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import {
+    type EntityDefinitionReference,
+    useDtoApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {createAxiosWithoutCache, useEntityApi} from "@jari-ace/app-bolts";
+import {useEntities} from "@jari-ace/element-plus-component";
+import {reactive, ref, watch} from "vue";
+import {ElForm, ElFormItem, ElMessage, type FormRules} from "element-plus";
+import CreateDtoPropFromEntityPropEditor
+    from "@/views/appManage/dtoDefine/CreateDtoPropFromEntityPropEditor.vue";
+import {QuestionFilled} from "@element-plus/icons-vue";
+
+const visible = defineModel<boolean>({
+    required: false,
+    default: false
+})
+const props = defineProps<{
+    entityId?: string,
+    dataSourceId?: string,
+    appId?: string,
+    serviceName?: string
+}>();
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const entityApi = useEntityApi(axios);
+const entities = ref<EntityDefinitionReference[]>();
+const selectedEntityId = ref(props.entityId);
+const api = useDtoApi(axios);
+const formRef = ref<InstanceType<typeof ElForm>>();
+const propEditorRef = ref<InstanceType<typeof CreateDtoPropFromEntityPropEditor>>();
+const suggestDtoName = ref<{ key: string }[]>([])
+let rootCaption: string;
+let nameIndexes: Record<string, number> = {};
+const {getEntities} = useEntities()
+
+interface FormData {
+    rootDtoName?: string
+    asInterface: boolean
+    mapLoad: boolean
+    loadOnly: boolean
+}
+
+const formData = ref<FormData>({
+    asInterface: false,
+    mapLoad: false,
+    loadOnly: false
+});
+
+const rules = reactive<FormRules<FormData>>({
+    rootDtoName: [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {pattern: /^[A-Z][A-Za-z0-9]*$/, message: "必须符合Pascal规范", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ]
+})
+
+async function loadEntities() {
+    if (!props.dataSourceId) return;
+    entities.value = await getEntities(props.dataSourceId);
+    await initSelectedEntity();
+}
+
+function submit() {
+    formRef.value?.validate(async valid => {
+        if (valid) {
+            propEditorRef.value?.validate(async valid => {
+                if (valid) {
+                    const checkedKeys = propEditorRef.value!.getCheckedKeys();
+                    if (!checkedKeys || checkedKeys.length == 0) {
+                        ElMessage.error("请至少选择一项DTO的属性")
+                        return;
+                    }
+                    const refEntity = entities.value!.find(e => e.id === selectedEntityId.value);
+                    if (!refEntity) {
+                        throw Error(selectedEntityId + '不是有效的实体定义ID')
+                    }
+                    await api.createFromEntity(propEditorRef.value!.buildCreateCommand(
+                        refEntity,
+                        formData.value.rootDtoName!,
+                        rootCaption,
+                        formData.value.asInterface,
+                        formData.value.mapLoad,
+                        formData.value.loadOnly));
+                    visible.value = false;
+                }
+            })
+        }
+    })
+}
+
+const initSelectedEntity = async () => {
+    if (!selectedEntityId.value) {
+        return;
+    }
+    const entity = await entityApi.getById(selectedEntityId.value);
+    nameIndexes = {};
+    if (entity) {
+        let rootDtoName = entity.name + "DTO";
+        suggestDtoName.value = [
+            {key: "Create" + entity.name + "Command"},
+            {key: "Update" + entity.name + "Command"},
+            {key: "Delete" + entity.name + "Command"},
+            {key: entity.name + "Reference"},
+            {key: entity.name + "Project"},
+            {key: entity.name + "Present"},
+            {key: entity.name + "DTO"}
+        ]
+        const max = await api.getMaxNameIndex(props.serviceName!, rootDtoName);
+        formData.value.rootDtoName = rootDtoName + (
+                                     max + 1
+        ).toString();
+        nameIndexes[rootDtoName] = max + 1;
+        rootCaption = entity.caption;
+    }
+};
+
+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)
+}
+
+watch(selectedEntityId, initSelectedEntity)
+watch(() => props.entityId, () => {
+    selectedEntityId.value = props.entityId
+})
+</script>
+
+<template>
+    <el-drawer title="参照实体创建DTO定义" destroy-on-close append-to-body v-model="visible"
+               @open="loadEntities" size="40%">
+        <el-form ref="formRef" size="small" label-position="top" style="height: calc(100% - 183px)"
+                 :model="formData" :rules="rules"
+                 require-asterisk-position="right" inline-message>
+            <el-form-item label="要参照的实体">
+                <el-select filterable v-model="selectedEntityId">
+                    <el-option v-for="e in entities" :key="e.id" :value="e.id"
+                               :label="e.name + ' ' + e.caption"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="新DTO名称" prop="rootDtoName">
+                <el-autocomplete v-model="formData.rootDtoName"
+                                 value-key="key"
+                                 :fetch-suggestions="queryDtoNameSuggestions"
+                                 highlight-first-item
+                                 clearable></el-autocomplete>
+            </el-form-item>
+            <el-space spacer="&nbsp;&nbsp;&nbsp;&nbsp;">
+                <el-form-item label="生成为接口" label-position="left">
+                    <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.asInterface"></el-switch>
+                </el-form-item>
+                <el-form-item label="加载映射" label-position="left" v-if="!formData.asInterface">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            加载映射
+                            <el-tooltip raw-content
+                                        content="启用后，映射转换为对应实体时，先从数据库加载同ID实体再复制属性值，<br/>否则新建实体再复制属性值">
+                                <el-icon>
+                                    <question-filled>
+                                    </question-filled>
+                                </el-icon>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <el-switch v-model="formData.mapLoad"></el-switch>
+                </el-form-item>
+                <el-form-item label="只加载" label-position="left"
+                              v-if="formData.mapLoad && !formData.asInterface">
+                    <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.loadOnly"></el-switch>
+                </el-form-item>
+            </el-space>
+            <create-dto-prop-from-entity-prop-editor :app-id="appId" :service-name="serviceName"
+                                                     ref="propEditorRef"
+                                                     :entity-id="selectedEntityId">
+            </create-dto-prop-from-entity-prop-editor>
+        </el-form>
+        <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">
+
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            DTO定义
+            <el-tooltip content="注册应用中的DTO类型，DTO可以用作命令和查询的参数或结果类型">
+                <el-icon>
+                    <question-filled/>
+                </el-icon>
+            </el-tooltip>
+            <el-divider direction="vertical"></el-divider>
+            <el-tooltip content="选择应用服务">
+                <service-selector :app-id="props.appId" v-model="currentService"
+                                  style="width: 230px"></service-selector>
+            </el-tooltip>
+        </template>
+        <template #body>
+            <div class="entity-page-body">
+                <left-panel :current-service="currentService" :app-id="appId"
+                            @current-changed="onCurrentDtoChanged"
+                            @entity-updated="onEntityUpdated"></left-panel>
+                <right-panel :cur-dto="currentDto"
+                             :app-name="app?.name"
+                             :service-name="currentService?.name"></right-panel>
+            </div>
+        </template>
+    </app-manage-layout>
+</template>
+
+<script setup lang="ts">
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {QuestionFilled} from "@element-plus/icons-vue";
+import ServiceSelector from "@/views/appManage/components/ServiceSelector.vue";
+import {
+    type AppInstance,
+    type AppService,
+    type DtoDefinitionReference
+} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+import LeftPanel from "@/views/appManage/dtoDefine/components/LeftPanel.vue";
+import RightPanel from "@/views/appManage/dtoDefine/components/RightPanel.vue";
+import {useAppInstances} from "@jari-ace/element-plus-component";
+
+const props = defineProps<{
+    appId: string
+}>();
+const currentService = ref<AppService>();
+const currentDto = ref<DtoDefinitionReference>();
+const {getById: getAppById} = useAppInstances()
+const app = ref<AppInstance>()
+
+async function loadApp() {
+    console.log('loadApp(', props.appId, ')')
+    if (!props.appId) {
+        app.value = undefined
+    }
+    app.value = await getAppById(props.appId)
+    console.log('appInstances.getById(', props.appId, ') = ', app.value)
+}
+function onCurrentDtoChanged(e?: DtoDefinitionReference) {
+    currentDto.value = e;
+}
+
+function onEntityUpdated(e?: DtoDefinitionReference) {
+    currentDto.value = undefined;
+    currentDto.value = e;
+}
+
+watch(()=>props.appId, loadApp, {immediate: true})
+</script>
+
+<style scoped lang="scss">
+.entity-page-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import {
+    type EntityDefinitionReference,
+    createAxiosWithoutCache,
+    useLoading,
+    type DtoDefinitionReference,
+    type CreateDtoDefinitionCommand, type UpdateDtoDefinitionCommand, type AppService, useDtoApi
+} from "@jari-ace/app-bolts";
+import {ref} from "vue";
+import {
+    JaForm,
+    useBackendValidations,
+    JaInputI18nRaw
+} from "@jari-ace/element-plus-component";
+
+
+const props = defineProps<{
+    appService?: AppService,
+    mode: 'create' | 'update',
+    dto?: DtoDefinitionReference
+}>()
+
+
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+})
+const title = ref("")
+const state = ref<{
+    formData: (CreateDtoDefinitionCommand | UpdateDtoDefinitionCommand) & {
+        refEntity?: EntityDefinitionReference
+    }
+}>({
+    formData: newDtoCommand()
+})
+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 appId = ref('0')
+
+function newDtoCommand() {
+    return {
+        /**
+         * 应用名
+         */
+        appName: props.appService?.appInstance?.name,
+
+        /**
+         * 服务名
+         */
+        serviceName: props.appService?.name,
+
+        /**
+         * DTO 名称（Pascal 命名）
+         */
+        name: "",
+
+        /**
+         * 标题
+         */
+        caption: ""
+    } as CreateDtoDefinitionCommand;
+}
+
+async function init() {
+    if (props.appService == null) {
+        throw new Error("应用服务参数不能为空")
+    }
+    title.value = props.mode === 'create' ? '创建DTO定义' : '修改DTO定义';
+    appId.value = props.appService?.appInstance.id
+    if (props.mode === 'create') {
+        state.value.formData = newDtoCommand();
+    } else {
+        if (!props.dto) return;
+        state.value.formData = await api.getById(props.dto.id);
+    }
+}
+
+async function submit() {
+    if (!form.value) return;
+    if (props.mode === 'create') {
+        let cmd = state.value.formData as CreateDtoDefinitionCommand;
+        form.value.validate(() => api.create(cmd)
+                                     .then(e => {
+                                         emits('success', e);
+                                         visible.value = false;
+                                     }));
+    } else {
+        form.value.validate(() => api.update(state.value.formData as UpdateDtoDefinitionCommand)
+                                     .then(e => {
+                                         emits('success', e);
+                                         visible.value = false;
+                                     }));
+    }
+}
+
+
+</script>
+
+<template>
+    <el-drawer destroy-on-close append-to-body v-model="visible" :title="title"
+               @open="init">
+        <ja-form :validator="validator" :model="state" ref="form">
+            <ja-form-item label="DTO名称" prop="name" required>
+                <ja-input v-focus></ja-input>
+            </ja-form-item>
+            <ja-form-item label="DTO标题" prop="caption" required>
+                <ja-input-i18n-raw :app-id="appId" size="small"
+                                   v-model="state.formData.caption"></ja-input-i18n-raw>
+            </ja-form-item>
+            <ja-form-item label="参照实体定义" v-if="state.formData.refEntity">
+                <el-text>{{ state.formData.refEntity.name }}</el-text>
+            </ja-form-item>
+            <ja-form-item label="生成为接口" prop="asInterface"
+                          label-remark="发布生成代码时此DTO生成为interface而不是class">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="加载映射" prop="mapLoad"
+                          label-remark="启用后，映射转换为对应实体时，先从数据库加载同ID实体再复制属性值，<br/>否则新建实体再复制属性值"
+                          v-if="state.formData.refEntity && !state.formData.asInterface">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="只加载"
+                          label-remark="启用后，映射加载对应实体后，<br/>不会将DTO的属性值复制到实体上"
+                          v-if="state.formData.refEntity && !state.formData.asInterface"
+                          prop="loadOnly">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+        </ja-form>
+        <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">
+
+</style>