ace-front-end 1.0.0

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

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache,
+    type CreateQueryParamDefinitionCommand,
+    type DtoDefinitionReference,
+    type QueryDefinitionReference,
+    type QueryParamDefinition,
+    type UpdateQueryParamDefinitionCommand,
+    useDtoApi,
+    useLoading, useQueryApi
+} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+import {JaForm, JaRolePicker, useBackendValidations} from "@jari-ace/element-plus-component";
+import EnumPicker from "@/components/enumPicker/EnumPicker.vue";
+import {useDateFormatQuery} from "@/hooks/useDateFormats";
+
+const props = defineProps<{
+    mode: 'create' | 'update',
+    query?: QueryDefinitionReference,
+    queryParam?: QueryParamDefinition,
+    sortIndex?: number
+}>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const title = ref("");
+const state = ref({
+    formData: initFormData()
+})
+const axios = createAxiosWithoutCache()
+const api = useQueryApi(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'])
+
+function initFormData(): CreateQueryParamDefinitionCommand | UpdateQueryParamDefinitionCommand {
+    return {
+        id: '0',
+        dataVersion: 0,
+        /**
+         * 参数所属的命令
+         */
+        query: props.query,
+        /**
+         * 参数名
+         */
+        name: '',
+        /**
+         * 参数绑定类型
+         */
+        bindingType: 'REQUEST_BODY',
+        /**
+         * 数据类型
+         */
+        dataType: 'ENTITY',
+
+        dateTimeFormat: '',
+        /**
+         * DTO类型
+         */
+        dto: undefined,
+        /**
+         * 集合类型
+         */
+        collectionType: 'NONE',
+        /**
+         * Map键类型（当集合类型为MAP时必须指定）
+         */
+        mapKeyDataType: undefined,
+        /**
+         * 描述
+         */
+        description: '',
+        /**
+         * 能否为空
+         */
+        notNull: false,
+        /**
+         * 序号
+         */
+        sortIndex: props.sortIndex,
+
+        /**
+         * 非前段调用参数，仅在repository上使用
+         */
+        notFrontendParam: false
+    }
+}
+
+async function onOpen() {
+    await loadDtos()
+    if (props.mode === 'create') {
+        if (!props.query) {
+            throw new Error('query参数不能为空')
+        }
+        state.value.formData = initFormData()
+        title.value = '创建查询参数定义'
+    } else {
+        if (!props.queryParam) {
+            throw new Error('queryParam参数不能为空')
+        }
+        title.value = '修改查询参数定义'
+        const param = await api.getParamById(props.queryParam.id!);
+        state.value.formData = {
+            ...param,
+            dto: dtos.value.find(d => d.id === param.dto?.id)
+        } as UpdateQueryParamDefinitionCommand
+    }
+}
+
+async function loadDtos() {
+    if (!props.query?.appName) return;
+    dtos.value = await dtoApi.getAllByApp(props.query.appName)
+}
+
+function submit() {
+    if (props.mode === 'create') {
+        formRef.value?.validate(
+            () => api.createParam({
+                ...state.value.formData,
+                query: props.query
+            } as CreateQueryParamDefinitionCommand)
+                     .then(r => {
+                         emits('success', r)
+                         visible.value = false
+                     }))
+    } else {
+        formRef.value?.validate(
+            () => api.updateParam(state.value.formData as UpdateQueryParamDefinitionCommand)
+                     .then(r => {
+                         emits('success', r)
+                         visible.value = false
+                     })
+        )
+    }
+}
+
+watch(() => state.value.formData, () => {
+    if (state.value.formData.dataType === 'ENTITY' || state.value.formData.collectionType !== 'NONE') {
+        state.value.formData.bindingType = 'REQUEST_BODY'
+    } else {
+        if (state.value.formData.bindingType === 'REQUEST_BODY') {
+            state.value.formData.bindingType = 'PATH_VARIABLE'
+        }
+    }
+}, {
+    deep: true
+})
+</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="notNull" label="不能为空">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item prop="sortIndex" label="排序号" required>
+                <ja-input-number/>
+            </ja-form-item>
+            <ja-form-item prop="description" label="参数说明" required>
+                <ja-input/>
+            </ja-form-item>
+            <ja-form-item prop="dataType" label="数据类型" required>
+                <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 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-item label="枚举类型" prop="enumType" required
+                          v-if="state.formData.dataType === 'ENUM'">
+                <enum-picker :app-name="query?.appName"
+                             :service-name="query?.serviceName"></enum-picker>
+            </ja-form-item>
+            <ja-form-item prop="mapKeyDataType" label="MAP的键类型" required
+                          v-if="state.formData.collectionType === 'MAP'">
+                <ja-select>
+                    <el-option value="STRING" label="字符串"/>
+                    <el-option value="BOOLEAN" 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="dto" label="DTO类型" required
+                          v-if="state.formData.dataType === '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="collectionType" label="集合类型" required>
+                <ja-radio-group>
+                    <el-radio-button label="非集合" value="NONE"></el-radio-button>
+                    <el-radio-button label="LIST" value="LIST"
+                                     :disabled="state.formData.bindingType === 'REQUEST_BODY'"></el-radio-button>
+                    <el-radio-button label="SET" value="SET"
+                                     :disabled="state.formData.bindingType === 'REQUEST_BODY'"></el-radio-button>
+                    <el-radio-button label="MAP" value="MAP"
+                                     :disabled="state.formData.bindingType === 'REQUEST_BODY'"></el-radio-button>
+                </ja-radio-group>
+            </ja-form-item>
+            <ja-form-item prop="bindingType" label="绑定方法" required
+                          label-remark="设置参数如何从HTTP请求中取值">
+                <ja-select>
+                    <el-option value="PATH_VARIABLE" label="路径变量(Path Variable)"
+                               :disabled="state.formData.dataType === 'ENTITY' || state.formData.collectionType !== 'NONE'"/>
+                    <el-option value="REQUEST_BODY" label="请求负载(Request Body)"
+                               :disabled="state.formData.dataType !== 'ENTITY' && state.formData.collectionType === 'NONE'"/>
+                    <el-option value="REQUEST_PARAM" label="请求参数(Request Param)"
+                               :disabled="state.formData.dataType === 'ENTITY' || state.formData.collectionType !== 'NONE'"/>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item prop="notFrontendParam" label="非前端调用参数" label-remark="只为spring data jpa的repository查询方法添加此参数，接口、Controller和Service上不添加次参数">
+                <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>

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

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import {
+    type QueryDefinition,
+    type QueryDefinitionReference, type QueryParamDefinition,
+    useLoading, useQueryApi
+} from "@jari-ace/app-bolts";
+import {
+    createAxiosWithoutCache,
+} from "@jari-ace/app-bolts";
+import {computed, ref, watch} from "vue";
+import {Delete, DocumentChecked, Edit} from "@element-plus/icons-vue";
+import {VxeColumn, VxeTable} from "vxe-table";
+import QueryParamEditor from "@/views/appManage/queryDefine/components/QueryParamEditor.vue";
+import ConstraintsEditor from "@/views/appManage/queryDefine/components/ConstraintsEditor.vue";
+import {ElMessageBox} from "element-plus";
+
+const props = defineProps<{
+    currentQuery?: QueryDefinitionReference
+}>()
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios)
+const api = useQueryApi(axios)
+const cmd = ref<QueryDefinition>()
+const params = ref<QueryParamDefinition[]>()
+const paramEditorVisible = ref(false)
+const paramEditorMode = ref<'create' | 'update'>('create')
+const editingParam = ref<QueryParamDefinition>()
+const newSortIndex = ref<number>()
+const reloadCommand = async () => {
+    if (props.currentQuery) {
+        cmd.value = await api.getById(props.currentQuery.id!)
+        await reloadParams()
+    } else {
+        cmd.value = undefined;
+        params.value = [];
+    }
+}
+const cstEditorVisible = ref(false)
+
+const reloadParams = async () => {
+    if (!cmd.value) return;
+    params.value = await api.getParamsByQuery(cmd.value.id!)
+}
+
+const returnType = computed(() => {
+    let type: string | undefined = cmd?.value?.returnType
+    if (type === 'ENTITY') {
+        type = cmd?.value?.returnDto?.name
+    }
+    if (cmd?.value?.collectionType !== 'NONE') {
+        type = cmd.value?.collectionType + '<' + type + '>'
+    }
+    return type
+})
+
+function paramReturnType(param: QueryParamDefinition) {
+    let type: string | undefined = param.dataType
+    if (type === 'ENTITY') {
+        type = param.dto?.name
+    }
+    if (param.collectionType !== 'NONE') {
+        if (param.collectionType === 'MAP') {
+            type = 'MAP<' + param.mapKeyDataType + ', ' + type + ">"
+        } else {
+            type = param.collectionType + '<' + type + '>'
+        }
+    }
+    return type
+}
+
+function onCreateParamClick() {
+    newSortIndex.value = Math.max(...(
+        params.value?.map(p => p.sortIndex ?? 1) ?? [1]
+    )) + 10
+    paramEditorMode.value = 'create'
+    paramEditorVisible.value = true
+}
+
+function onEditParamClick(param: QueryParamDefinition) {
+    editingParam.value = param
+    paramEditorMode.value = 'update'
+    paramEditorVisible.value = true
+}
+
+async function onDeleteParamClick(param: QueryParamDefinition) {
+    await ElMessageBox.confirm('确定要删除此参数？', '确认删除')
+    await api.deleteParam(param.id!, param.dataVersion!)
+    await reloadParams()
+}
+
+function onEditConstraints(param: QueryParamDefinition) {
+    editingParam.value = param
+    cstEditorVisible.value = true
+}
+
+function pascalToKebab(pascalStr: string): string {
+    // 利用正则表达式匹配所有大写字母，并在其前添加连字符（但字符串开头除外）
+    return pascalStr
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .toLowerCase();
+}
+
+const fullPath = computed(() => {
+    let r = "/" + (
+        cmd.value?.serviceName ?? ""
+    ) + "/" + pascalToKebab(cmd.value?.aggregate?.name ?? "")
+
+    if (cmd.value?.requestPath && cmd.value?.requestPath.length > 0) {
+        if (cmd.value.requestPath.startsWith('/')) {
+            r = r + cmd.value.requestPath
+        } else {
+            r = r + '/' + cmd.value?.requestPath
+        }
+    }
+    for (let p of params.value ?? []) {
+        if (p.bindingType === 'PATH_VARIABLE') {
+            r = r + "/{" + p.name + "}"
+        }
+    }
+    return r;
+})
+
+watch(() => props.currentQuery, reloadCommand)
+
+defineExpose({
+    reloadCommand
+})
+</script>
+
+<template>
+    <div class="command-right-panel">
+        <div v-if="cmd" style="height: 100%">
+            <div class="command-right-panel_header">
+                <el-text
+                    style="font-size:18px;font-weight: bold; display: flex; align-items: center; gap:4px">
+                    {{ currentQuery?.name }}
+                    <span class="command-right-panel_desc">
+                    {{ cmd?.description }} &nbsp;
+                    </span>
+                    <el-tag type="success" v-if="cmd?.noAuthRequired">公开</el-tag>
+                </el-text>
+            </div>
+            <div class="command-right-panel_cmd_detail">
+                <span style="font-weight: 450">返回：</span>{{ returnType }}
+            </div>
+            <div class="command-right-panel_cmd_detail">
+                <span style="font-weight: 450">路径：</span>
+                <el-tag>{{ cmd?.httpMethod }}</el-tag>
+                {{ fullPath }}
+            </div>
+            <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                <div style="font-weight: 450">查询参数</div>
+                <div style="flex: 1; text-align: right;">
+                    <ja-button size="default" type="success" plain tooltip="新增查询参数"
+                               shortcut="Alt+N" @click="onCreateParamClick">新增
+                    </ja-button>
+                </div>
+            </div>
+            <vxe-table
+                :loading="loading"
+                size="small"
+                stripe
+                ref="tableRef"
+                style="height: calc(100% - 180px)"
+                :column-config="{resizable: true}"
+                :row-config="{ isHover: true, height: 40}"
+                :data="params"
+                class="vxe-table--scrollbar">
+                <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                <vxe-column field="name" title="属性名称" show-overflow="ellipsis"
+                            width="150px" show-header-overflow>
+                </vxe-column>
+                <vxe-column field="dataType" title="数据类型" show-overflow="ellipsis"
+                            width="250" show-header-overflow>
+                    <template #default="{row}">
+                        {{ paramReturnType(row) }}
+                    </template>
+                </vxe-column>
+                <vxe-column field="bindingType" title="绑定方式" show-overflow="ellipsis"
+                            width="100"
+                            show-header-overflow>
+                    <template #default="{row}">
+                        <el-tag>
+                            {{
+                                row.bindingType === 'PATH_VARIABLE' ? '路径变量' : (
+                                    row.bindingType === 'REQUEST_BODY' ? '请求负载' : '请求参数'
+                                )
+                            }}
+                        </el-tag>
+                    </template>
+                </vxe-column>
+                <vxe-column field="description" title="参数说明" show-overflow="ellipsis"
+                            show-header-overflow>
+                </vxe-column>
+                <vxe-column title="操作" fixed="right" width="260px"
+                            show-overflow="ellipsis"
+                            show-header-overflow>
+                    <template #default="{ row }">
+                        <el-button link type="primary" :icon="DocumentChecked"
+                                   @click="onEditConstraints(row)">约束定义
+                        </el-button>
+                        <el-button link type="warning" :icon="Edit"
+                                   @click="onEditParamClick(row)">编辑
+                        </el-button>
+                        <el-button link type="danger" :icon="Delete"
+                                   @click="onDeleteParamClick(row)">删除
+                        </el-button>
+                    </template>
+                </vxe-column>
+                <template #empty>
+                    <el-empty/>
+                </template>
+            </vxe-table>
+        </div>
+        <el-empty v-else description="请选择查询定义查看"></el-empty>
+    </div>
+    <query-param-editor :mode="paramEditorMode" :query="currentQuery" :sort-index="newSortIndex"
+                        v-model="paramEditorVisible"
+                        :query-param="editingParam"
+                        @success="reloadParams"></query-param-editor>
+    <constraints-editor :app-name="currentQuery?.appName" v-model="cstEditorVisible"
+                        :param-def="editingParam"></constraints-editor>
+</template>
+
+<style scoped lang="scss">
+.command-right-panel {
+    margin: 16px;
+    flex: 9;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: normal;
+    height: 100%;
+
+    &_header {
+        padding: 8px 0;
+    }
+
+    &_desc {
+        color: var(--el-color-info-light-3);
+    }
+
+    &_cmd_detail {
+        padding: 8px 0;
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/registerMessenger/Editor.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {
+    createAxiosWithoutCache,
+    type CreateMessengerCommand, type ProjectedMessenger,
+    type UpdateMessengerCommand, useLoading, useMessengerApi
+} from "@jari-ace/app-bolts";
+import {JaButton, JaForm, useBackendValidations} from "@jari-ace/element-plus-component";
+
+const props = defineProps<{
+    appName: string,
+    mode: 'create' | 'update',
+    messenger?: ProjectedMessenger
+}>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios)
+const api = useMessengerApi(axios);
+const validator = useBackendValidations(Object.keys(newMessenger()), axios);
+const form = ref<InstanceType<typeof JaForm>>();
+const emit = defineEmits(["success"]);
+const state = ref<{
+    formData: CreateMessengerCommand | UpdateMessengerCommand
+}>({
+    formData: newMessenger()
+});
+
+function newMessenger() {
+    return {
+        /**
+         * 信使名称，唯一名
+         */
+        name: '',
+        /**
+         * 信使描述
+         */
+        description: '',
+        /**
+         * 是否禁用
+         */
+        disabled: false,
+        /**
+         * 配置Json
+         */
+        configJson: "",
+        /**
+         * 应用名
+         */
+        appName: props.appName
+    } as CreateMessengerCommand;
+}
+
+async function onOpen() {
+    if (props.mode === 'create') {
+        state.value.formData = newMessenger();
+    } else {
+        state.value.formData = await api.getById(props.messenger!.id) as UpdateMessengerCommand;
+    }
+}
+
+function submit() {
+    if (props.mode === 'create') {
+        form.value?.validate(() => api.create(state.value.formData as CreateMessengerCommand)
+                                      .then(() => {
+                                          visible.value = false;
+                                          emit('success');
+                                      }))
+    } else {
+        form.value?.validate(() => api.update(state.value.formData as UpdateMessengerCommand)
+                                      .then(() => {
+                                          visible.value = false;
+                                          emit('success');
+                                      }))
+    }
+}
+</script>
+
+<template>
+    <el-drawer append-to-body v-model="visible" @open="onOpen"
+               :title="props.mode === 'create' ? '创建信使': '修改信使'">
+        <ja-form :model="state" :validator="validator" ref="form">
+            <ja-form-item label="信使名称" prop="name">
+                <ja-input v-focus></ja-input>
+            </ja-form-item>
+            <ja-form-item label="是否禁用" prop="disabled">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="信使说明" prop="description">
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="信使配置JSON" prop="configJson">
+                <ja-input type="textarea" row="6"></ja-input>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button type="primary" @click="submit" :loading="loading" :disabled="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button plain @click="visible=false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>