ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/commandDefine/components/CommandParamEditor.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import {
+    type AggregateDefinition,
+    type AppService,
+    type CommandDefinitionReference,
+    type CommandParamDefinition,
+    createAxiosWithoutCache,
+    type CreateCommandDefinitionCommand,
+    type CreateCommandParamDefinitionCommand,
+    type DtoDefinitionReference,
+    type UpdateCommandDefinitionCommand, type UpdateCommandParamDefinitionCommand,
+    useCommandApi,
+    useDtoApi,
+    useLoading
+} 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',
+    cmd?: CommandDefinitionReference,
+    cmdParam?: CommandParamDefinition,
+    sortIndex?: number
+}>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const title = ref("");
+const state = ref({
+    formData: initFormData()
+})
+const axios = createAxiosWithoutCache()
+const api = useCommandApi(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(): CreateCommandParamDefinitionCommand | UpdateCommandParamDefinitionCommand {
+    return {
+        id: '0',
+        dataVersion: 0,
+        /**
+         * 参数所属的命令
+         */
+        command: props.cmd,
+        /**
+         * 参数名
+         */
+        name: '',
+        /**
+         * 参数绑定类型
+         */
+        bindingType: 'REQUEST_BODY',
+        /**
+         * 数据类型
+         */
+        dataType: 'ENTITY',
+        /**
+         * DTO类型
+         */
+        dto: undefined,
+        /**
+         * 集合类型
+         */
+        collectionType: 'NONE',
+        /**
+         * Map键类型（当集合类型为MAP时必须指定）
+         */
+        mapKeyDataType: undefined,
+        /**
+         * 描述
+         */
+        description: '',
+
+        dateTimeFormat: '',
+        /**
+         * 能否为空
+         */
+        notNull: false,
+        sortIndex: props.sortIndex
+    }
+}
+
+async function onOpen() {
+    await loadDtos()
+    if (props.mode === 'create') {
+        if (!props.cmd) {
+            throw new Error('cmd参数不能为空')
+        }
+        state.value.formData = initFormData()
+        title.value = '创建命令参数定义'
+    } else {
+        if (!props.cmdParam) {
+            throw new Error('cmdParam参数不能为空')
+        }
+        title.value = '修改命令参数定义'
+        const cmd = await api.getParamById(props.cmdParam.id!);
+        state.value.formData = {
+            ...cmd,
+            dto: dtos.value.find(d => d.id === cmd.dto?.id)
+        }
+    }
+}
+
+async function loadDtos() {
+    if (!props.cmd?.appName) return;
+    dtos.value = await dtoApi.getAllByApp(props.cmd.appName)
+}
+
+function submit() {
+    if (props.mode === 'create') {
+        formRef.value?.validate(
+            () => api.createParam({
+                ...state.value.formData,
+                command: props.cmd
+            } as CreateCommandParamDefinitionCommand)
+                     .then(r => {
+                         emits('success', r)
+                         visible.value = false
+                     }))
+    } else {
+        formRef.value?.validate(
+            () => api.updateParam(state.value.formData as UpdateCommandParamDefinitionCommand)
+                     .then(r => {
+                         emits('success', r)
+                         visible.value = false
+                     })
+        )
+    }
+}
+
+watch(() => state.value.formData, () => {
+    if (state.value.formData.dataType === 'ENTITY') {
+        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="cmd?.appName"
+                             :service-name="cmd?.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'"/>
+                    <el-option value="REQUEST_BODY" label="请求负载(Request Body)"
+                               :disabled="state.formData.dataType !== 'ENTITY'"/>
+                    <el-option value="REQUEST_PARAM" label="请求参数(Request Param)"
+                               :disabled="state.formData.dataType === 'ENTITY'"/>
+                </ja-select>
+            </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/commandDefine/components/ConstraintsEditor.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import {
+    type AppInstance,
+    type ConstraintProvider, type EntityBase,
+    type UpdateCommandParamConstraintDefinitionCommand
+} from "@jari-ace/app-bolts";
+import {
+    type CommandParamConstraintDefinition,
+    type CommandParamDefinitionReference,
+    createAxiosWithoutCache,
+    useCommandApi,
+    useConstraintApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {nextTick, ref} from "vue";
+import {Minus} from "@element-plus/icons-vue";
+import {
+    getParameterComponent,
+    getParameterComponentProps
+} from "@/views/appManage/entityDefine/uilts";
+import {JaDropdownButton, useAppInstances} from "@jari-ace/element-plus-component";
+import {type CommandParamDefinition} from "@jari-ace/app-bolts";
+import {ElScrollbar} from "element-plus";
+
+interface Constraint extends CommandParamConstraintDefinition {
+    provider: ConstraintProvider,
+    state: 'unchanged' | 'modified' | 'new' | 'deleted'
+}
+
+const props = defineProps<{
+    appName?: string,
+    paramDef?: CommandParamDefinitionReference
+}>()
+const constraints = ref<Constraint[]>([])
+const singleCstProvider = ref<ConstraintProvider[]>()
+const axios = createAxiosWithoutCache()
+const api = useCommandApi(axios)
+const param = ref<CommandParamDefinition>()
+const loading = useLoading(axios)
+const cstApi = useConstraintApi(axios)
+const deletedConstraints: Constraint[] = []
+const visible = defineModel<boolean>({
+    default: false
+})
+const allProviders = ref<ConstraintProvider[]>([])
+const app = ref<AppInstance>()
+const scrollRef = ref<InstanceType<typeof ElScrollbar>>()
+
+async function loadConstraints() {
+    if (!props.paramDef) {
+        return [] as CommandParamConstraintDefinition[]
+    }
+    return await api.getConstrainsByParam(props.paramDef.id!);
+}
+
+function filterSupportedProviders() {
+    const f = param.value
+    singleCstProvider.value = allProviders.value.filter(
+        p => (
+                 p.supportCollection === (
+                     f?.collectionType !== 'NONE'
+                 )
+                 || (
+                     f?.collectionType === 'NONE'
+                     && (
+                         f?.dataType === 'STRING'
+                         || f?.dataType === 'ENUM'
+                     )
+                 )
+             )
+             && p.supportedDataTypes.findIndex(t => t
+                                                    === f?.dataType)
+             >= 0
+             && (
+                 (
+                     !p.canRepeat
+                     && !constraints.value.some((
+                             c => c.constraintName
+                                  === p.constraintName
+                         )
+                     ) || p.canRepeat
+                 )
+             ) && p.singleProperty)
+}
+const apps = useAppInstances()
+async function onOPen() {
+    if (!props.paramDef) {
+        throw new Error('paramDef 参数不能为空')
+    }
+    if (!props.appName) {
+        throw new Error('appName 参数不能为空')
+    }
+    app.value = await apps.getByName(props.appName)
+    const [providers, csts, p] = await Promise.all([
+        cstApi.getConstraintProviders(),
+        loadConstraints(),
+        api.getParamById(props.paramDef.id!)
+    ])
+    allProviders.value = providers
+    param.value = p
+    filterSupportedProviders()
+    deletedConstraints.splice(0)
+    constraints.value = csts.map(c => (
+        {
+            ...c,
+            constraintParameters: c.constraintParameters ?? [],
+            provider: providers.find(p => p.constraintName === c.constraintName),
+            state: 'unchanged'
+        } as Constraint
+    ))
+}
+
+function onConstraintChanged(c: Constraint) {
+    if (c.state === 'unchanged') {
+        c.state = 'modified';
+    }
+}
+
+function onDelConstraintClick(c: Constraint) {
+    const id = constraints.value.findIndex(x => x.id === c.id);
+    if (id >= 0) {
+        constraints.value.splice(id, 1);
+        if (c.state !== 'new') {
+            deletedConstraints.push(c);
+            c.state = 'deleted';
+        }
+    }
+}
+
+function scrollToBottom(scrollbar: InstanceType<typeof ElScrollbar> | undefined) {
+    if (!scrollbar) return;
+    scrollbar.scrollTo(0, scrollbar.$el.scrollHeight); // 滚动到底部
+}
+
+function onAddConstraintClick(p: ConstraintProvider) {
+    const id = Date.now().toString();
+    constraints.value.push({
+        id: id,
+        constraintName: p.constraintName,
+        provider: p,
+        message: "",
+        constraintParameters: {},
+        dataVersion: 0,
+        state: 'new',
+        releaseSource: "",
+        sourceId: '0',
+        payloads: [],
+        groups: []
+    })
+    filterSupportedProviders()
+    //nextTick(() => scrollToBottom(cstScrollbar.value));
+}
+
+async function submit() {
+    await api.batchUpdateConstraints(props.paramDef!,
+        constraints.value.filter(c => c.state === 'new')
+                   .map(c => (
+                       {
+                           ...c,
+                           paramDefinition: props.paramDef
+                       }
+                   )),
+        constraints.value.filter(c => c.state
+                                      === 'modified') as UpdateCommandParamConstraintDefinitionCommand[],
+        deletedConstraints as EntityBase[]
+    )
+    visible.value = false
+}
+</script>
+
+<template>
+    <el-drawer title="参数约束定义" v-loading="loading" @open="onOPen" destroy-on-close
+               append-to-body v-model="visible">
+        <ja-dropdown-button type="success" size="default"
+                            plain
+                            cirlce
+                            shortcut="Alt+O"
+                            buttonText="添加约束"
+                            style="margin-bottom: 8px;"
+                            @command="onAddConstraintClick">
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item
+                        tabindex="0"
+                        v-for="item in singleCstProvider"
+                        :key="item.constraintName"
+                        :command="item">
+                        {{ item.localeCaption }}
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </ja-dropdown-button>
+        <el-scrollbar ref="scrollRef"
+                      style="height: calc(100% - 48px); ">
+            <div style="display: flex; flex-direction: column; gap: 8px;">
+                <el-card shadow="hover" v-for="c in constraints" :key="c.id">
+                    <template #header>
+                        <div style="font-weight: 550; font-size: 14px;">
+                            {{
+                                c.provider?.localeCaption ?? c.provider?.constraintName
+                            }}
+                            <div style="float:right">
+                                <ja-button circle :icon="Minus" size="small"
+                                           @click="onDelConstraintClick(c)"
+                                           tooltip="删除"></ja-button>
+                            </div>
+                        </div>
+                    </template>
+                    <el-form size="small" label-position="top">
+                        <el-form-item v-for="d in c.provider?.propertyDescriptors.filter(d => d.dataType !== 'LIST')"
+                                      :key="d.name" :label="d.localeCaption">
+                            <component
+                                :is="getParameterComponent(d.dataType)"
+                                v-model="c.constraintParameters![d.name]"
+                                v-bind="getParameterComponentProps(d.dataType)"
+                                @change="onConstraintChanged(c)"></component>
+                        </el-form-item>
+                        <el-form-item label="验证失败的提示信息">
+                            <ja-input-i18n-raw v-model="c.message" v-focus size="small"
+                                               :app-id="app?.id"
+                                               @change="onConstraintChanged(c)">
+                            </ja-input-i18n-raw>
+                        </el-form-item>
+                    </el-form>
+                </el-card>
+            </div>
+        </el-scrollbar>
+        <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/commandDefine/components/CreateEntityOperationsEditor.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache,
+    type CreateEntityOperationCommandsCommand,
+    useCommandApi,
+    useEntityApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {ref} from "vue";
+import {
+    JaForm,
+    JaRolePicker,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import {type EntityDefinition} from "@jari-ace/app-bolts";
+
+const props = defineProps<{
+    entityId?: string
+}>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const state = ref({
+    formData: initFormData()
+})
+const axios = createAxiosWithoutCache()
+const api = useCommandApi(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 emits = defineEmits(['success'])
+const entity = ref<EntityDefinition>()
+
+function initFormData(): CreateEntityOperationCommandsCommand {
+    return {
+        entityId: props.entityId ?? "",
+        roleName: undefined,
+        operations: ['CREATE', 'UPDATE', 'DELETE']
+    }
+}
+
+async function onOpen() {
+    if (!props.entityId) {
+        throw new Error('props.entityId不能为空');
+    }
+    state.value.formData = initFormData()
+    entity.value = await entityApi.getById(props.entityId);
+}
+
+function submit() {
+    formRef.value?.validate(
+        () => api.createEntityOperations(state.value.formData)
+                 .then(r => {
+                     emits('success', r)
+                     visible.value = false
+                 }))
+}
+</script>
+
+<template>
+    <el-drawer 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>
+                {{ entity?.name }}
+            </ja-form-item>
+            <ja-form-item prop="operations" label="要生成的操作命令">
+                <ja-checkbox-group>
+                    <el-checkbox-button value="CREATE" label="创建"/>
+                    <el-checkbox-button value="UPDATE" label="更新"/>
+                    <el-checkbox-button value="DELETE" label="删除"/>
+                </ja-checkbox-group>
+            </ja-form-item>
+            <ja-form-item label="生成的操作命令要绑定的角色" prop="roleName">
+                <ja-role-picker :app-name="entity?.dataSource.appName"></ja-role-picker>
+            </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>