ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/queryDefine/components/LeftPanel.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import {
+    type AggregateDefinition,
+    type AppService, type QueryDefinition,
+    type QueryDefinitionReference,
+    useQueryApi
+} from "@jari-ace/app-bolts"
+import {createAxiosWithoutCache, useAggregateApi} from "@jari-ace/app-bolts"
+import {nextTick, ref, watch} from "vue"
+import {ElMessageBox, type ElTree, type FilterNodeMethodFunction} from "element-plus"
+import {Files, Search, SetUp} from "@element-plus/icons-vue";
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import QueryEditor from "@/views/appManage/queryDefine/components/QueryEditor.vue";
+import {debounce} from "lodash-es";
+
+const props = defineProps<{
+    service?: AppService
+}>();
+const axios = createAxiosWithoutCache()
+const aggApi = useAggregateApi(axios)
+const cmdApi = useQueryApi(axios)
+let aggregates: AggregateDefinition[]
+let queries: QueryDefinitionReference[]
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const treeProps = {
+    label: 'name',
+    children: 'queries',
+    isLeaf: 'leaf',
+    class: () => 'custom-node-style'
+}
+const roots = ref<TreeNode[]>([]);
+const queryEditMode = ref<'create' | 'update'>('create')
+const queryEditorVisible = ref(false)
+const queryToEdit = ref<QueryDefinitionReference>()
+const currentAggregate = ref<AggregateDefinition>()
+let currentNode: TreeNode | undefined = undefined;
+const currentQuery = defineModel<QueryDefinitionReference>()
+type TreeNodeData = QueryDefinitionReference | AggregateDefinition
+const aggNameToQuery = ref("")
+const debounceLoadAgg = debounce(async ()=> {
+    treeRef.value?.filter(aggNameToQuery.value)
+}, 500)
+
+interface TreeNode {
+    id: string
+    name?: string
+    leaf?: boolean
+    data: TreeNodeData
+    type: 'query' | 'aggregate'
+    queries: TreeNode[],
+    aggregate?: AggregateDefinition,
+    refreshQueries?: ((data: TreeNode[]) => void)
+    parent?: TreeNode
+}
+
+const filterNode: FilterNodeMethodFunction = (value: string, data: TreeNodeData) => {
+    if (!value) return true
+    const values = value.split(' ')
+    return values.every(v=> (data.name?.toLowerCase().includes(v.toLowerCase())) ?? false)
+}
+
+function getAggLabel(agg: AggregateDefinition) {
+    if (agg.description && agg.description.length > 0) {
+        return agg.name + " (" + agg.description + ")"
+    } else {
+        return agg.name
+    }
+}
+
+async function loadAggregates() {
+    if (!props.service) return [];
+    aggregates = await aggApi.getByServiceName(props.service.name)
+    return aggregates.map(a => (
+        {
+            id: 'a' + a.id,
+            name: getAggLabel(a),
+            leaf: false,
+            data: a,
+            type: 'aggregate',
+            aggregate: a,
+            queries: []
+        }
+    )) as TreeNode[]
+}
+
+function buildQueryNode(c: QueryDefinitionReference, parent: TreeNode) {
+    return {
+        id: 'c' + c.id,
+        name: c.name,
+        leaf: true,
+        data: c,
+        type: 'query',
+        parent: parent,
+        aggregate: parent.data as AggregateDefinition,
+        queries: []
+    };
+}
+
+async function loadQueries(node: TreeNode) {
+    if (node.type === 'aggregate') {
+        queries = await cmdApi.getByAggregate(node.data.id!)
+        return queries.map(c => buildQueryNode(c, node)) as TreeNode[]
+    } else {
+        return []
+    }
+}
+
+let rootResolve: ((data: TreeNode[]) => void) | undefined = undefined;
+
+watch(() => props.service, async () => {
+    if (rootResolve) {
+        rootResolve(await loadAggregates());
+    }
+})
+
+const loadNode = (node: Node, resolve: (data: TreeNode[]) => void) => {
+    node.data.resolve = resolve;
+    if (node.level === 0) {
+        rootResolve = resolve;
+        if (props.service) {
+            loadAggregates().then(r => {
+                resolve(r)
+            })
+        }
+    } else {
+        loadQueries(node.data as TreeNode).then(r => resolve(r))
+    }
+}
+
+function onCreateNew(node: TreeNode) {
+    currentNode = node
+    currentAggregate.value = node.data as AggregateDefinition
+    queryEditMode.value = 'create'
+    queryEditorVisible.value = true
+}
+
+function onEdit(node: TreeNode) {
+    currentNode = node
+    queryToEdit.value = node.data as QueryDefinitionReference
+    currentAggregate.value = node.aggregate
+    queryEditMode.value = 'update'
+    queryEditorVisible.value = true
+}
+
+async function onDelete(node: TreeNode) {
+    await ElMessageBox.confirm("确定要删除此查询定义吗？", "确认删除")
+    const cmd = await cmdApi.getById(node.data.id!)
+    await cmdApi.delete(cmd.id, cmd.dataVersion)
+    treeRef.value?.remove(node)
+}
+
+async function onCmdEditSuccess(c: QueryDefinition) {
+    if (queryEditMode.value === "create") {
+        treeRef.value?.append(buildQueryNode(c, currentNode!), currentNode!)
+    } else {
+        currentNode!.name = c.name
+    }
+    const t = currentQuery.value
+    currentQuery.value = undefined;
+    await nextTick()
+    currentQuery.value = t;
+}
+
+function onCurrentChange(node: TreeNode) {
+    if (node.type === 'query') {
+        currentQuery.value = node.data
+    } else {
+        currentQuery.value = undefined
+    }
+}
+
+async function onDeleteAgg(node: TreeNode) {
+    if (!node.aggregate) return;
+    await ElMessageBox.confirm("确定要删除此聚合吗？", "确认删除")
+    await aggApi.delete(node.aggregate.id, node.aggregate.dataVersion)
+    treeRef.value?.remove(node)
+}
+</script>
+
+<template>
+    <div style="flex:4">
+        <div style="padding: 12px 12px 0 12px">
+            <el-input placeholder="输入查询名检索" :suffix-icon="Search" @input="debounceLoadAgg"
+                      v-model="aggNameToQuery" v-focus></el-input>
+        </div>
+        <el-scrollbar style="padding: 16px;">
+            <el-tree ref="treeRef"
+                     :data="roots"
+                     lazy
+                     :filter-node-method="filterNode"
+                     :props="treeProps"
+                     :load="loadNode"
+                     class="query-tree"
+                     highlight-current
+                     @current-change="onCurrentChange"
+                     node-key="id">
+                <template #default="{data}">
+                    <div class="tree-node-content">
+                        <el-text class="tree-node-content-text">
+                            <el-icon v-if="data.type === 'aggregate'">
+                                <files/>
+                            </el-icon>
+                            <el-icon v-else>
+                                <set-up/>
+                            </el-icon>
+                            {{ data.name }}
+                        </el-text>
+                        <div class="tree-node-content-tools">
+                            <el-button link type="success" v-if="data.type=='aggregate'"
+                                       @click.stop="onCreateNew(data)">新增查询定义
+                            </el-button>
+                            <el-button link type="danger" v-if="data.type=='aggregate'"
+                                       @click.stop="onDeleteAgg(data)">删除
+                            </el-button>
+                            <el-button link type="primary" v-if="data.type==='query'"
+                                       @click="onEdit(data)">修改
+                            </el-button>
+                            <el-button link type="danger" v-if="data.type==='query'"
+                                       @click="onDelete(data)">删除
+                            </el-button>
+                        </div>
+                    </div>
+                </template>
+            </el-tree>
+        </el-scrollbar>
+    </div>
+
+    <query-editor :mode="queryEditMode" :app-service="service" :cmd-to-edit="queryToEdit"
+                  :aggregate="currentAggregate" @success="onCmdEditSuccess"
+                  v-model="queryEditorVisible"></query-editor>
+</template>
+
+<style scoped lang="scss">
+:deep(.query-tree) {
+    .custom-node-style {
+        .el-tree-node__content {
+            height: 42px;
+
+            .tree-node-content {
+                box-sizing: border-box;
+                width: 100%;
+                height: 100%;
+                position: relative;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                cursor: default;
+
+                &-text {
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                &-tools {
+                    display: none;
+                    position: absolute;
+                    right: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    padding: 0 8px;
+                }
+
+                &:hover {
+                    .tree-node-content-tools {
+                        display: block;
+                        background-color: var(--el-tree-node-hover-bg-color);
+                    }
+                }
+            }
+        }
+
+
+        &.is-current > .el-tree-node__content .tree-node-content:hover {
+            .tree-node-content-tools {
+                display: block;
+                background-color: var(--el-color-primary-light-9);
+            }
+        }
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/queryDefine/components/QueryEditor.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import {
+    type AggregateDefinition,
+    type AppService,
+    createAxiosWithoutCache,
+    type CreateQueryDefinitionCommand,
+    type DtoDefinitionReference, type EntityDefinitionReference,
+    type QueryDefinitionReference,
+    type UpdateQueryDefinitionCommand,
+    useDtoApi, useEntityApi,
+    useLoading,
+    useQueryApi
+} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+import {
+    JaForm, JaPropertyPickerRaw,
+    JaRolePicker,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import {Minus, Plus} from "@element-plus/icons-vue";
+import JpqlEditor from "./JpqlEditor.vue";
+
+const props = defineProps<{
+    mode: 'create' | 'update',
+    cmdToEdit?: QueryDefinitionReference,
+    aggregate?: AggregateDefinition,
+    appService?: AppService
+}>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const title = ref("");
+const state = ref({
+    formData: initFormData()
+})
+const axios = createAxiosWithoutCache()
+const api = useQueryApi(axios)
+const entityApi = useEntityApi(axios)
+const loading = useLoading(axios)
+const validator = useBackendValidations(Object.keys(state.value.formData), axios)
+const formRef = ref<InstanceType<typeof JaForm>>()
+const dtos = ref<DtoDefinitionReference[]>([])
+const dtoApi = useDtoApi(axios)
+const emits = defineEmits(['success'])
+const entities = ref<EntityDefinitionReference[]>()
+const selectedProperty = ref("")
+
+function initFormData(): CreateQueryDefinitionCommand | UpdateQueryDefinitionCommand {
+    return {
+        openToClient: true,
+        aggregate: props.aggregate,
+        appName: "",
+        collectionType: 'NONE',
+        dataVersion: 0,
+        description: "",
+        id: '0',
+        mapKeyDataType: 'STRING',
+        name: "",
+        noAuthRequired: false,
+        requestPath: "",
+        returnDto: undefined,
+        returnType: 'ENTITY',
+        returnEnum: undefined,
+        mapKeyEnum: undefined,
+        roleName: "",
+        serviceName: "",
+        httpMethod: 'GET',
+        lockType: 'NONE',
+        queryText: '',
+        dynamicQuery: false,
+        rawSql: false,
+        queryEntity: undefined,
+        graphProperties: []
+    }
+}
+
+async function onOpen() {
+    await Promise.all([loadDtos(), loadEntities()])
+    if (props.mode === 'create') {
+        state.value.formData = initFormData()
+        title.value = '创建查询定义'
+    } else {
+        if (!props.cmdToEdit) {
+            throw new Error('cmdToEdit参数不能为空')
+        }
+        title.value = '修改查询定义'
+        const cmd = await api.getById(props.cmdToEdit!.id!);
+        state.value.formData = {
+            ...cmd,
+            returnDto: dtos.value.find(d => d.id === cmd.returnDto?.id)
+        } as UpdateQueryDefinitionCommand
+    }
+}
+
+async function loadDtos() {
+    if (!props.appService) return;
+    dtos.value = await dtoApi.getAllByApp(props.appService.appInstance.name)
+}
+
+async function loadEntities() {
+    if (!props.appService) return;
+    entities.value = await entityApi.getAllByService(props.appService.name)
+}
+
+function addGraphProperty(p: string) {
+    if ((
+            state.value.formData.graphProperties?.indexOf(p) || -1
+        ) < 0)
+        state.value.formData.graphProperties?.push(p)
+    selectedProperty.value = ""
+}
+
+function removeGraphProperty(p: string) {
+    state.value.formData.graphProperties?.splice(state.value.formData.graphProperties?.indexOf(p), 1)
+}
+
+function submit() {
+    if (props.mode === 'create') {
+        formRef.value?.validate(
+            () => api.create({
+                ...state.value.formData,
+                appName: props.appService?.appInstance.name,
+                serviceName: props.appService?.name
+            } as CreateQueryDefinitionCommand)
+                     .then(r => {
+                         emits('success', r)
+                         visible.value = false
+                     }))
+    } else {
+        formRef.value?.validate(
+            () => api.update(state.value.formData as UpdateQueryDefinitionCommand)
+                     .then(r => {
+                         emits('success', r)
+                         visible.value = false
+                     })
+        )
+    }
+}
+
+watch(() => state.value.formData.returnDto, async () => {
+    if (state.value.formData.returnDto) {
+        const dto = await dtoApi.getById(state.value.formData.returnDto.id)
+        state.value.formData.queryEntity = dto.refEntity
+    }
+})
+</script>
+
+<template>
+    <el-drawer :title="title" v-model="visible" @open="onOpen" append-to-body destroy-on-close>
+        <ja-form :validator="validator" :model="state" ref="formRef">
+            <ja-form-item prop="name" label="查询名称" required>
+                <ja-input v-focus/>
+            </ja-form-item>
+            <ja-form-item prop="description" label="查询说明" required>
+                <ja-input/>
+            </ja-form-item>
+            <ja-form-item prop="httpMethod" label="请求方法" v-if="state.formData.openToClient">
+                <ja-radio-group>
+                    <el-radio-button value="GET" label="GET"/>
+                    <el-radio-button value="POST" label="POST"/>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item prop="requestPath" label="请求路径" v-if="state.formData.openToClient">
+                <ja-input/>
+            </ja-form-item>
+            <ja-form-item prop="noAuthRequired" label="公开接口" label-remark="无需登录即可调用"
+                          v-if="state.formData.openToClient">
+                <ja-radio-group>
+                    <el-radio-button label="公开" :value="true"></el-radio-button>
+                    <el-radio-button label="不公开" :value="false"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item prop="roleName" label="执行查询需要的拥有角色"
+                          v-if="state.formData.openToClient"
+                          label-remark="用户需被授予这里指定的角色才能调用查询接口，<br/>如果置空表示无需任何授权角色即可调用">
+                <ja-role-picker :app-name="props.appService?.appInstance.name"></ja-role-picker>
+            </ja-form-item>
+            <ja-form-item prop="returnType" label="返回数据类型"
+                          label-remark="命令执行后返回值的数据类型">
+                <ja-select>
+                    <el-option value="ENTITY" label="DTO"/>
+                    <el-option value="STRING" label="字符串"/>
+                    <el-option value="BOOLEAN" label="布尔"/>
+                    <el-option value="DATE" label="日期"/>
+                    <el-option value="DATETIME" label="日期时间"/>
+                    <el-option value="TIME" label="时间"/>
+                    <el-option value="INTEGER" label="整数"/>
+                    <el-option value="LONG" label="长整数"/>
+                    <el-option value="SHORT" label="短整数"/>
+                    <el-option value="BYTE" label="字节"/>
+                    <el-option value="DECIMAL" label="高精度数值"/>
+                    <el-option value="ENUM" label="枚举"/>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item prop="returnDto" label="返回的DTO类型"
+                          label-remark="注意：只有接口类型的DTO才支持查询中的结果字段使用别名"
+                          v-if="state.formData.returnType === 'ENTITY'">
+                <ja-select value-key="id" filterable>
+                    <el-option v-for="dto in dtos" :value="dto" :label="dto.name"
+                               :id="dto.id"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item prop="queryEntity" label="查询实体"
+                          required>
+                <ja-select value-key="id">
+                    <el-option v-for="e in entities" :label="e.name" :value="e"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="返回的枚举类型" prop="returnEnum" required
+                          v-if="state.formData.returnType === 'ENUM'">
+                <enum-picker :app-name="appService?.appInstance?.name"
+                             :service-name="appService?.name"></enum-picker>
+            </ja-form-item>
+            <ja-form-item prop="collectionType" label="返回值集合类型">
+                <ja-radio-group>
+                    <el-radio-button label="非集合" value="NONE"></el-radio-button>
+                    <el-radio-button label="分页" value="PAGE"></el-radio-button>
+                    <el-radio-button label="列表" value="LIST"></el-radio-button>
+                    <el-radio-button label="数据流" value="STREAM"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item prop="dynamicQuery" label="是否动态查询">
+                <ja-radio-group>
+                    <el-radio-button label="是" :value="true"></el-radio-button>
+                    <el-radio-button label="否" :value="false"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item prop="lockType" label="锁类型" v-if="!state.formData.dynamicQuery"
+                          label-remark="设置查询后是否对结果集对应的数据库行数据加锁">
+                <ja-radio-group>
+                    <el-radio-button label="不加锁" value="NONE"></el-radio-button>
+                    <el-radio-button label="乐观锁" value="OPTIMISTIC"></el-radio-button>
+                    <el-radio-button label="乐观写锁"
+                                     value="OPTIMISTIC_FORCE_INCREMENT"></el-radio-button>
+                    <el-radio-button label="共享锁(数据库)"
+                                     value="PESSIMISTIC_READ"></el-radio-button>
+                    <el-radio-button label="互斥锁(数据库)"
+                                     value="PESSIMISTIC_WRITE"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item prop="rawSql" label="查询语句类型" v-if="!state.formData.dynamicQuery">
+                <ja-radio-group>
+                    <el-radio-button label="JPQL" :value="false"></el-radio-button>
+                    <el-radio-button label="原生SQL" :value="true"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+    <ja-form-item prop="queryText" label="查询语句" v-if="!state.formData.dynamicQuery"
+                  label-remark="使用JPQL或原生SQL自定义查询。<br/>
+                  对于Repository中直接返回DTO的查询只能使用JPQL，而且必须在JPQL中使用new语句创建结果DTO。<br/>
+        平台支持new DTO构造函数的简写，生成代码时会自动补充完整。<br/>
+        <b>简写规则：</b><br/>
+        1. 构造函数名可以为任意标识符，例如new Student(a) 可以写为new Dto(a)<br/>
+        2. 首个参数必须是JPQL中结果实体的别名<br/>
+        3. DTO属性名与结果实体属性名一致的可以省略<br/>
+        4. DTO属性名与结果实体属性名不一致的，必须定义 <expr> as <dto_property_name><br/>
+        5. 嵌套DTO属性(DTO类型属性)，也必须定义as子句，as前面的表达式必须是new DTO构造函数，写法规则同前<br/>
+        <b>示例：</b><br/>
+        1. 简单构造函数，如果DTO属性名与实体属性名全部一致
+        <pre>select new dto(a) from Student a</pre>
+        2. DTO包含扩展属性的，例如生成学生Student的全名fullName属性
+        <pre>select new dto(a, concat(a.firstName, a.lastName) as fullName) from Student a</pre>
+        3. 嵌套DTO属性的，例如返回学生Student的老师teacher信息
+        <pre>select new stu(a, new tea(a.teacher) as teacher) from Student a">
+        <JpqlEditor v-model="state.formData.queryText" :entities="entities || []" :app-service="appService" />
+    </ja-form-item>
+            <ja-form-item label="级联加载属性" prop="graphProperties"
+                          v-if="!state.formData.dynamicQuery">
+                <div
+                    style="display: flex; flex-direction: column; gap: 8px; align-items: start">
+                    <div style="display:flex; gap: 8px">
+                        <ja-property-picker-raw :entity-id="state.formData.queryEntity?.id"
+                                                style="flex: auto"
+                                                v-model="selectedProperty"></ja-property-picker-raw>
+                        <el-button circle :icon="Plus"
+                                   @click="addGraphProperty(selectedProperty)"></el-button>
+                    </div>
+                    <el-tag v-for="p in state.formData.graphProperties" closable
+                            @close="removeGraphProperty(p)">{{ p }}
+                    </el-tag>
+                </div>
+            </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>