ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/dtoDefine/types.ts

@@ -0,0 +1,42 @@
+import type {
+    DtoDefinitionReference,
+    DtoPropertyCreateOption,
+    EntityDefinitionReference,
+    ProjectedPropertyDefinition,
+    PropertyDataType
+} from "@jari-ace/app-bolts";
+
+export interface DtoTreeNodeData {
+    id: string,
+    label: string,
+    name: string,
+    caption: string,
+    leaf?: boolean,
+    dataType: PropertyDataType,
+    asInterface: boolean,
+    mapLoad: boolean,
+    loadOnly: boolean,
+    eventKeyWord?: boolean,
+    dateTimeFormat?: string,
+    entityType?: EntityDefinitionReference,
+    properties?: ProjectedPropertyDefinition[],
+    createOption?: DtoPropertyCreateOption,
+    propertyRef: ProjectedPropertyDefinition,
+    path: string,
+    newDtoName?: string,
+    existDto?: DtoDefinitionReference,
+    localize?: boolean
+}
+
+export interface DtoTreeNode extends DtoTreeNodeData {
+    children: DtoTreeNode[],
+    parent?: DtoTreeNode,
+}
+
+export interface FormData {
+    selectedNode?: DtoTreeNodeData
+}
+
+export interface TreeFormData {
+    selectedNode?: DtoTreeNode
+}

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

@@ -0,0 +1,80 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            实体定义
+            <el-tooltip content="注册应用中的实体类型">
+                <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"
+                            @ds-changed="onDataSourceChanged"
+                            @current-changed="onCurrentEntityChanged"
+                            @entity-updated="onEntityUpdated"></left-panel>
+                <right-panel :cur-entity="currentEntity" :data-source-id="currentDataSource?.id"
+                             :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 DataSourceDefinitionReference, type EntityDefinitionReference,
+} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+import LeftPanel from "@/views/appManage/entityDefine/components/LeftPanel.vue";
+import RightPanel from "@/views/appManage/entityDefine/components/RightPanel.vue";
+import {useAppInstances} from "@jari-ace/element-plus-component";
+
+const props = defineProps<{
+    appId: string
+}>();
+const currentService = ref<AppService>();
+const currentEntity = ref<EntityDefinitionReference>();
+const currentDataSource = ref<DataSourceDefinitionReference>();
+const {getById: getAppById} = useAppInstances()
+const app = ref<AppInstance>();
+async function loadApp() {
+    if (!props.appId) {
+        app.value = undefined
+        return
+    }
+    app.value = await getAppById(props.appId)
+}
+
+function onCurrentEntityChanged(e?: EntityDefinitionReference) {
+    currentEntity.value = e;
+}
+
+function onDataSourceChanged(e?: DataSourceDefinitionReference) {
+    currentDataSource.value = e;
+}
+
+function onEntityUpdated(e?: EntityDefinitionReference) {
+    currentEntity.value = undefined;
+    currentEntity.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/entityDefine/components/AggregateEditor.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {
+    type CreateAggregateDefinitionCommand,
+    createAxiosWithoutCache,
+    type DataSourceDefinitionReference,
+    type UpdateAggregateDefinitionCommand,
+    useAggregateApi, useLoading
+} from "@jari-ace/app-bolts";
+import {JaForm, useBackendValidations} from "@jari-ace/element-plus-component";
+
+const visible = defineModel<boolean>({
+    default: false
+})
+const props = defineProps<{
+    mode: 'create' | 'update',
+    aggregateId?: string,
+    datasource?: DataSourceDefinitionReference
+}>()
+const title = ref("")
+const state = ref<{
+    formData: CreateAggregateDefinitionCommand & UpdateAggregateDefinitionCommand
+}>({
+    formData: createNewForm()
+});
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios)
+const api = useAggregateApi(axios)
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const formRef = ref<InstanceType<typeof JaForm>>();
+const emits = defineEmits(["created"]);
+
+function createNewForm() {
+    return {
+        id: '0',
+        dataVersion: 0,
+        name: "",
+        description: "",
+        datasource: props.datasource
+    } as CreateAggregateDefinitionCommand & UpdateAggregateDefinitionCommand
+}
+
+async function init() {
+    if (props.mode === 'create') {
+        title.value = '创建聚合定义'
+        state.value.formData = createNewForm()
+    } else {
+        title.value = '修改聚合定义'
+        state.value.formData = {
+            ...await api.getById(props.aggregateId!),
+            datasource: props.datasource!
+        }
+    }
+}
+
+function submit() {
+    formRef.value?.validate(() => {
+        if (props.mode === 'create') {
+            return api.create(state.value.formData).then(dto => {
+                visible.value = false
+                emits("created", dto)
+            })
+        } else {
+            return api.update(state.value.formData).then(() => {
+                visible.value = false
+            })
+        }
+    })
+}
+</script>
+
+<template>
+    <el-drawer :title="title" @open="init" append-to-body destroy-on-close v-model="visible">
+        <ja-form :model="state" :validator="validator" ref="formRef">
+            <ja-form-item prop="name" label="聚合名称">
+                <ja-input/>
+            </ja-form-item>
+            <ja-form-item prop="description" label="聚合说明">
+                <ja-input/>
+            </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>

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

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import {
+    type EntityDefinitionReference,
+    type CreateEntityCommand,
+    type UpdateEntityCommand,
+    type DataSourceDefinitionReference,
+    type AggregateDefinition,
+    createAxiosWithoutCache,
+    useEntityApi, useLoading, useAggregateApi, type EntityDefinition
+} from "@jari-ace/app-bolts";
+import { ref, watch } from "vue";
+import {
+    JaForm,
+    useBackendValidations,
+    JaInputI18nRaw, useEntities, useAppInstances
+} from "@jari-ace/element-plus-component";
+import AggregateEditor from "@/views/appManage/entityDefine/components/AggregateEditor.vue";
+import { Edit } from "@element-plus/icons-vue";
+
+const props = defineProps<{
+    mode: 'create' | 'update',
+    entity?: EntityDefinitionReference,
+    dataSource?: DataSourceDefinitionReference
+}>()
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+})
+const title = ref("")
+const state = ref<{
+    formData: CreateEntityCommand & UpdateEntityCommand
+}>({
+    formData: newEntityCommand()
+})
+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"])
+const appId = ref('0')
+const aggregates = ref<AggregateDefinition[]>([]);
+const createSameNamedAggregate = ref(false);
+const aggregateApi = useAggregateApi(axios);
+let sameNamedAggregate: AggregateDefinition | undefined = undefined;
+const aggregateEditorVisible = ref(false);
+const aggregateEditMode = ref<'create' | 'update'>('create')
+const loadedEntity = ref<EntityDefinition>()
+const { refreshEntitiesCache } = useEntities()
+const { getByName: getAppByName } = useAppInstances()
+
+function newEntityCommand() {
+    return {
+        id: '-1',
+        dataVersion: 0,
+        /**
+         * 数据源
+         */
+        dataSource: props.dataSource,
+        /**
+         * 实体名
+         */
+        name: "",
+        /**
+         * 标题
+         */
+        caption: "",
+        /**
+         * 备注
+         */
+        comment: "",
+        /**
+         * 表名
+         */
+        tableName: "",
+        /**
+         * 是否不可更改，true表示数据不可更改
+         */
+        immutable: false,
+        /**
+         * 实体的树结构类型
+         */
+        treeStructure: 'NONE',
+        /**
+         * 树节点路径掩码（路径树）
+         */
+        pathTreeNodeMask: "444444",
+        /**
+         * 是否可回收实体
+         */
+        recyclable: false,
+        /**
+         * 是否添加dataVersion字段，以支持并发乐观锁
+         */
+        enableDataVersion: true,
+        /**
+         * 是否自动生成主键
+         */
+        autoId: true,
+        /**
+         * 是否涉密数据(添加密级字段)
+         */
+        sensitive: false,
+        /**
+         * 是否导入实体，对于导入实体不生成Liquibase代码
+         */
+        imported: false,
+        /**
+         * 是否流程表单
+         */
+        flowForm: false
+    } as CreateEntityCommand & UpdateEntityCommand;
+}
+
+async function init() {
+    if (!props.dataSource) {
+        throw new Error("dataSource参数不能为空")
+    }
+    title.value = props.mode === 'create' ? '创建实体定义' : '修改实体定义';
+    appId.value = (await getAppByName(props.dataSource.appName)).id
+    if (props.mode === 'create') {
+        createSameNamedAggregate.value = true;
+        state.value.formData = newEntityCommand();
+    } else {
+        if (!props.entity) return;
+        createSameNamedAggregate.value = false;
+        loadedEntity.value = await api.getById(props.entity.id);
+        state.value.formData = loadedEntity.value
+    }
+    await loadAggregate()
+    sameNamedAggregate = undefined;
+}
+
+async function loadAggregate() {
+    if (props.dataSource)
+        aggregates.value = await aggregateApi.getByDatasource(props.dataSource.id);
+}
+
+async function submit() {
+    if (!form.value) return;
+    if (props.mode === 'create') {
+        let cmd = state.value.formData as CreateEntityCommand;
+        if (createSameNamedAggregate.value) {
+            if (!sameNamedAggregate) {
+                sameNamedAggregate = await aggregateApi.create({
+                    datasource: props.dataSource!,
+                    description: cmd.caption,
+                    name: cmd.name,
+                }, {
+                    showSuccessMessage: false
+                });
+            }
+            cmd = {
+                ...cmd,
+                aggregate: sameNamedAggregate
+            }
+        }
+        form.value.validate(() => api.create(cmd)
+            .then(e => {
+                refreshEntitiesCache(props.dataSource!.id)
+                emits('success', e);
+                visible.value = false;
+            }));
+    } else {
+        form.value.validate(() => api.update(state.value.formData as UpdateEntityCommand)
+            .then(e => {
+                refreshEntitiesCache(props.dataSource!.id)
+                emits('success', e);
+                visible.value = false;
+            }));
+    }
+}
+
+function showCreateAggregateEditor() {
+    aggregateEditMode.value = 'create'
+    aggregateEditorVisible.value = true
+}
+
+function showUpdateAggregateEditor() {
+    aggregateEditMode.value = 'update'
+    aggregateEditorVisible.value = true
+}
+
+async function onAggregateCreated(agg: AggregateDefinition) {
+    await loadAggregate()
+    state.value.formData.aggregate = aggregates.value.find(a => a.id === agg.id)
+}
+
+watch(() => state.value.formData.supportPublish, () => {
+    if (state.value.formData.supportPublish) {
+        state.value.formData.autoId = true
+        state.value.formData.enableDataVersion = true
+    }
+})
+
+</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="实体名称" prop="name" required>
+                <ja-input v-focus></ja-input>
+            </ja-form-item>
+            <ja-form-item label="实体标题" 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="存储表名" prop="tableName" required>
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="属于聚合" prop="aggregate">
+                <div style="display: flex; gap: 8px; width: 100%;" v-if="!createSameNamedAggregate">
+                    <ja-select value-key="id" style="flex: auto; width: 100%">
+                        <el-option v-for="a in aggregates" :key="a.id" :label="a.name" :value="a" />
+                        <template #footer>
+                            <el-button link style="width: 100%" @click="showCreateAggregateEditor">
+                                新建聚合
+                            </el-button>
+                        </template>
+                    </ja-select>
+                    <ja-button link :icon="Edit" type="primary" tooltip="修改聚合"
+                        @click="showUpdateAggregateEditor"></ja-button>
+                </div>
+                <el-switch active-text="同名聚合(自动创建)" v-if="mode === 'create'"
+                    v-model="createSameNamedAggregate"></el-switch>
+            </ja-form-item>
+            <ja-form-item label="是否只读实体" prop="immutable">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="可回收实体" prop="recyclable" label-remark="支持虚拟删除">
+                <ja-switch
+                    :disabled="mode === 'update' && state.formData.recyclable && loadedEntity?.released"></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="自动ID" prop="autoId" label-remark="添加长整型ID属性，保存实体时自动生成ID值">
+                <ja-switch :disabled="mode !== 'create' && loadedEntity?.released"></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="乐观锁防止并发写入冲突" prop="enableDataVersion" label-remark="添加数据版本号字段">
+                <ja-switch :disabled="mode !== 'create' && loadedEntity?.released"></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="是否涉密数据" prop="sensitive" label-remark="添加密级字段">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="是否组织资产" prop="orgAssets" label-remark="添加创建人、创建部门等字段">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="支持发布" prop="supportPublish" label-remark="支持将数据发布到其他平台站点">
+                <ja-switch :disabled="mode !== 'create' && loadedEntity?.released"></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="是否流程表单" prop="flowForm" label-remark="标识该实体是否为流程表单">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="树结构类型" prop="treeStructure" label-remark="添加树结构字段">
+                <ja-radio-group :disabled="mode !== 'create' && loadedEntity?.released">
+                    <el-radio-button label="非树结构" value="NONE"></el-radio-button>
+                    <el-radio-button label="路径树" value="PATH_TREE"></el-radio-button>
+                    <el-radio-button label="链接树" value="LINK_TREE"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item label="树节点路径掩码" prop="pathTreeNodeMask" label-remark="
+            路径掩码声明了树的层级数和每层级节点可以容纳的最大子节点数。<br/>
+            例如：掩码`2344`长度4位表示树最多可以有4层，第一位数字`2`表示第一层最多有99个节点，<br/>
+            第二位数字`3`表示第一层的每个节点最多可以有999个子节点，<br/>
+            第3位数字`4`表示第二层的每个节点最多可以有9999个子节点，依次类推。<br/>
+            修改时路径掩码只能增加长度扩展新的层级，如果修改已有位数会导致节点路径生成异常。<br/>
+            所以在系统投入使用前，应仔细考虑树的容量需求，预留足够掩码位数。" v-if="state.formData.treeStructure === 'PATH_TREE'">
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="备注" prop="comment">
+                <ja-input></ja-input>
+            </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>
+    <aggregate-editor :mode="aggregateEditMode" :aggregate-id="state.formData.aggregate?.id"
+        v-model="aggregateEditorVisible" @created="onAggregateCreated" :datasource="dataSource"></aggregate-editor>
+</template>
+
+<style scoped lang="scss"></style>