ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/dataSourceDefine/editDialog.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache, type DataSourceDefinition,
+    type UpdateDataSourceCommand,
+    useDataSourceApi, useLoading
+} from "@jari-ace/app-bolts";
+import {ref} from "vue";
+import {JaForm, useBackendValidations} from "@jari-ace/element-plus-component";
+
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+})
+const props = defineProps<{
+    dataSource?: DataSourceDefinition
+}>();
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useDataSourceApi(axios);
+const emits = defineEmits(["success"]);
+const state = ref<{
+    formData: UpdateDataSourceCommand
+}>({
+    formData: {
+        id: '0',
+        dataVersion: 0,
+        /**
+         * 数据源标识
+         */
+        name: "",
+        /**
+         * 数据库类型
+         */
+        databaseType: "",
+        /**
+         * 是否只读库
+         */
+        readonly: false,
+        /**
+         * JDBC连接串
+         */
+        jdbcUrl: "",
+        /**
+         * 用户名
+         */
+        userName: "",
+        /**
+         * 密码
+         */
+        password: "",
+        /**
+         * 实体类所属java包名
+         */
+        packageName: "",
+
+        schemaName: ""
+    } as UpdateDataSourceCommand
+})
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const dbTypes = ref<string[]>([]);
+const jdbcProtocol = ref<string>("");
+const form = ref<InstanceType<typeof JaForm>>();
+
+async function init() {
+    dbTypes.value = await api.getSupportedDbs();
+    state.value.formData = {...await api.getById(props.dataSource!.id), password: ""};
+    jdbcProtocol.value = await api.getJdbcProtocol(state.value.formData.databaseType);
+}
+
+function submit() {
+    form.value?.validate(() => api.update(state.value.formData).then(() => {
+        emits("success");
+        visible.value = false;
+    }))
+}
+
+async function onDbTypeChanged() {
+    jdbcProtocol.value = await api.getJdbcProtocol(state.value.formData.databaseType);
+}
+
+async function testConnClick() {
+    const f = state.value.formData;
+    await api.testJdbcConnection(f.databaseType, f.jdbcUrl, f.userName, f.password);
+}
+</script>
+
+<template>
+    <el-drawer destroy-on-close append-to-body title="修改数据源定义" v-model="visible"
+               @open="init">
+        <ja-form :model="state" :validator="validator" ref="form">
+            <ja-form-item label="数据源标识" prop="name" required>
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="实体类子包名" prop="packageName" required
+                          label-remark="设置属于此数据源的JPA实体类子包名，会与所属服务的基础包合成完整包名">
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="数据库类型" prop="databaseType" required>
+                <ja-select @change="onDbTypeChanged()">
+                    <el-option v-for="db in dbTypes" :key="db" :label="db" :value="db"/>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="是否只读" prop="readonly">
+                <ja-switch></ja-switch>
+            </ja-form-item>
+            <ja-form-item label="JDBC URL" prop="jdbcUrl" required>
+                <ja-input>
+                    <template #prepend>
+                        {{ jdbcProtocol }}
+                    </template>
+                </ja-input>
+            </ja-form-item>
+            <ja-form-item label="模式/数据库名" prop="schemaName" required>
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="用户名" prop="userName" required>
+                <ja-input></ja-input>
+            </ja-form-item>
+            <ja-form-item label="密码" prop="password">
+                <ja-input></ja-input>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button type="primary" plain shortcut="Alt+T" @click="testConnClick"
+                       :loading="loading" :disabled="loading"
+                       style="float:left;">测试连接
+            </ja-button>
+            <ja-button type="primary" shortcut="Alt+Enter" @click="submit" :loading="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/digitalSequence/DigitalSequence.vue

@@ -0,0 +1,163 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            数字序列
+            <el-tooltip>
+                <template #content>
+                    数字序列采用Leaf算法支持在分布式计算环境下生成唯一数值编号。<br/>数字序列由开发人员在代码中定义，首次分配序号时自动注册到这里。
+                    <br/>管理员可以定义每个数字序列的取数步进增量，这个增量决定了号段分配的间隔时间。
+                    <br/>请根据最小分配时间间隔合理调整数字序列的步进增量，使分配间隔保持在合适值(例如1小时)，避免频繁分配号段，造成系统性能下降。
+                    <br/>如果增量设置为1，那么序列是按照时间顺序严格递增的，但是每次分配新序号都产生数据库IO，如果过于频繁，就会有很大的性能负载。
+                </template>
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <div
+                style="flex:1; display: flex; flex-direction: row-reverse;
+                     width: 100%">
+                <ja-button :icon="Refresh" plain @click="loadData"
+                           :loading="loading"
+                           tooltip="重新加载数据" shortcut="Alt+R"> 刷新
+                </ja-button>
+            </div>
+        </template>
+        <template #body>
+            <div style="height:100%; display: flex; flex-direction: column;">
+                <div style="flex: auto;">
+                    <vxe-table
+                        :loading="loading"
+                        size="small"
+                        stripe
+                        ref="tableRef"
+                        height="100%"
+                        :column-config="{resizable: true}"
+                        :row-config="{ isHover: true }"
+                        :data="data"
+                        class="vxe-table--scrollbar">
+                        <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                        <vxe-column field="name" title="序列名称" show-overflow
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="size" title="步进增量" show-overflow width="150px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="max" title="最大值" show-overflow width="150px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="timeOfLastAlloc" title="最近分配时间" show-overflow
+                                    width="250px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="minTimeGap" title="最小分配间隔" show-overflow
+                                    width="150px"
+                                    show-header-overflow>
+                            <template #default="{ row }">
+                                {{
+                                    row.minTimeGap ? (
+                                        row.minTimeGap < 1000
+                                            ? row.minTimeGap + "毫秒"
+                                            : Math.round(row.minTimeGap / 10) / 100 + "秒"
+                                    ) : null
+                                }}
+                            </template>
+                        </vxe-column>
+                        <vxe-column title="操作" fixed="right" width="200px" show-overflow
+                                    show-header-overflow>
+                            <template #default="{ row }">
+                                <!-- row.disabled -->
+                                <el-button link type="primary" :icon="Edit"
+                                           @click="onEditClick(row)">调整步进增量
+                                </el-button>
+                            </template>
+                        </vxe-column>
+                        <template #empty>
+                            <el-empty/>
+                        </template>
+                    </vxe-table>
+                </div>
+                <div style="flex:none; display: flex; flex-direction: row-reverse; padding: 12px">
+                    <el-pagination
+                        background
+                        :page-sizes="pageSizes"
+                        layout="total, sizes, prev, pager, next"
+                        v-model:page-size="pageSize"
+                        v-model:current-page="currentPage"
+                        @current-change="loadData"
+                        @size-change="loadData"
+                        :total="total"/>
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+    <el-dialog destroy-on-close draggable title="调整步进增量" v-model="editorVisible"
+               width="320px">
+        <el-form size="small">
+            <el-form-item label-position="top" label="步进增量">
+                <el-input-number v-model="editingSize"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="primary" @click="onEditOkClick">确定</el-button>
+            <el-button plain @click="editorVisible=false">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {Edit, QuestionFilled, Refresh} from "@element-plus/icons-vue";
+import {
+    type LeafSegment, useAppApi,
+    useLeafSegmentApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {EditOutlined} from "@ant-design/icons-vue";
+import {VxeColumn, VxeTable} from "vxe-table";
+import {ref, watch} from "vue";
+import {pageSizes} from "@/hooks/usePageSize";
+
+const loading = useLoading();
+const api = useLeafSegmentApi();
+const data = ref<LeafSegment[]>();
+const pageSize = ref(50);
+const currentPage = ref(1);
+const total = ref(0);
+const appApi = useAppApi();
+const props = defineProps<{
+    appId?: string
+}>();
+const editorVisible = ref(false);
+const currentSegment = ref<LeafSegment>();
+const editingSize = ref(0);
+
+async function loadData() {
+    if (!props.appId) return;
+    const app = await appApi.getById(props.appId);
+    const res = await api.getByApp(app.name, currentPage.value - 1, pageSize.value);
+    data.value = res.content;
+    total.value = res.totalElements;
+}
+
+function onEditClick(row: LeafSegment) {
+    currentSegment.value = row;
+    editingSize.value = row.size;
+    editorVisible.value = true;
+}
+
+async function onEditOkClick() {
+    if (!currentSegment.value) return;
+    await api.update(currentSegment.value.id, editingSize.value);
+    loadData();
+    editorVisible.value = false;
+}
+
+watch(() => props.appId, loadData)
+loadData();
+</script>
+
+<style scoped>
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>

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

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import {
+    type AppInstance,
+    createAxiosWithoutCache, type CreateDtoPropDefFromEntityCommand,
+    type DtoDefinitionReference,
+    type DtoPropertyCreateOption, type EntityDefinitionReference,
+    type ProjectDtoDefinition,
+    type ProjectedPropertyDefinition, type PropertyDataType, type PropertyDataTypes,
+    useDtoApi, useEntityApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {reactive, ref, watch} from "vue";
+import {ElForm, ElFormItem, type FormRules} from "element-plus";
+import {useAppInstances} from "@jari-ace/element-plus-component";
+import CreateDtoPropFromEntityPropEditor
+    from "@/views/appManage/dtoDefine/CreateDtoPropFromEntityPropEditor.vue";
+import {QuestionFilled} from "@element-plus/icons-vue";
+import {useDateFormatQuery} from "@/hooks/useDateFormats";
+
+const props = defineProps<{
+    appId?: string,
+    entityId?: string,
+    serviceName?: string,
+    property?: ProjectedPropertyDefinition
+}>()
+const visible = defineModel<boolean>()
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useDtoApi(axios);
+const app = ref<AppInstance>();
+const dtos = ref<ProjectDtoDefinition[]>()
+const existsDtos = ref<DtoDefinitionReference[]>();
+const optItemRef = ref<InstanceType<typeof ElFormItem>>();
+const propEditorRef = ref<InstanceType<typeof CreateDtoPropFromEntityPropEditor>>();
+const formRef = ref<InstanceType<typeof ElForm>>();
+const dateTimeFormats = ref<string>
+let newDtoCaption = "";
+
+interface FormData {
+    name?: string,
+    caption?: string,
+    localize?: boolean,
+    eventKeyWord?: boolean,
+    dataType?: PropertyDataType,
+    dateTimeFormat?: string,
+    createOption?: DtoPropertyCreateOption,
+    existDto?: DtoDefinitionReference,
+    newDtoName?: string,
+    asInterface?: boolean,
+    mapLoad?: boolean,
+    loadOnly?: boolean,
+    entityType?: EntityDefinitionReference,
+    selectedDtos?: DtoDefinitionReference[]
+}
+
+const formData = ref<FormData>({})
+
+const rules = reactive<FormRules<FormData>>({
+    "selectedDtos": [
+        {
+            validator: (rule, value, callback) => {
+                if (!Array.isArray(value) || value.length === 0) {
+                    callback(new Error('不能为空'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur'
+        }
+    ],
+    "name": [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {pattern: /^[a-z][A-Za-z0-9]*$/, message: "必须符合Camel规范", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ],
+    "caption": [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ],
+    "createOption": [
+        {required: true, message: "必须选择一项", trigger: "blur"},
+        {enum: ['USE_EXIST_DTO', 'CREATE_DTO', 'FLATTEN'], message: "选项值不合法", trigger: "blur"}
+    ],
+    "newDtoName": [
+        {required: true, message: "不能为空", trigger: "blur"},
+        {pattern: /^[A-Z][A-Za-z0-9]*$/, message: "必须符合Pascal规范", trigger: "blur"},
+        {max: 255, message: "最大长度不能超过255", trigger: "blur"}
+    ],
+    "existDto": [
+        {required: true, message: "不能为空", trigger: "blur"}
+    ]
+})
+const apps = useAppInstances()
+async function loadApp() {
+    if (!props.appId) return;
+    app.value = await apps.getById(props.appId);
+}
+
+function cloneObjects<T>(obj: T, count: number): T[] {
+    return Array.from({length: count}, () => (
+        {...obj}
+    ));
+}
+
+async function submit() {
+    formRef.value?.validate(valid => {
+        if (valid) {
+            const doSubmit = async () => {
+                const d = formData.value;
+                const createPropCmd = {
+                    name: d.name,
+                    caption: d.caption,
+                    createOption: d.createOption,
+                    existDto: d.existDto,
+                    localize: d.localize,
+                    dateTimeFormat: d.dateTimeFormat,
+                    eventKeyWord: d.eventKeyWord,
+                    entityPropertyRef: props.property
+                } as CreateDtoPropDefFromEntityCommand;
+                if (d.dataType === 'ENTITY' && d.createOption !== 'USE_EXIST_DTO') {
+                    createPropCmd.createDtoCommand = propEditorRef.value?.buildCreateCommand(
+                        d.entityType!,
+                        d.newDtoName!,
+                        newDtoCaption,
+                        d.asInterface ?? false,
+                        d.mapLoad ?? false,
+                        d.loadOnly ?? false
+                    )
+                }
+                await api.appendPropToDtos({
+                    addToDtos: formData.value.selectedDtos!,
+                    createPropCommands: cloneObjects(createPropCmd, formData.value.selectedDtos!.length)
+                });
+                visible.value = false;
+            }
+            if (propEditorRef.value) {
+                propEditorRef.value?.validate(valid1 => {
+                    if (valid1) {
+                        doSubmit();
+                    }
+                })
+            } else {
+                doSubmit();
+            }
+        }
+    })
+}
+
+const loadProperty = async () => {
+    if (!props.property) {
+        formData.value = {}
+        return;
+    }
+    const p = await useEntityApi(axios).getProperty(props.property.id)
+    formData.value = {
+        name: p.name,
+        caption: p.caption,
+        dataType: p.dataType,
+        entityType: p.entityType
+    }
+}
+
+async function onOpen() {
+    if (!props.entityId || !props.property) {
+        throw Error('初始化参数entityId或property不能为空')
+    }
+    formData.value.selectedDtos = [];
+    formData.value = {};
+    dtos.value = await api.getByRefEntityWithoutProp(props.entityId, props.property.id);
+    await loadProperty();
+}
+
+function getDtoOptionLabel(dto: ProjectDtoDefinition) {
+    return (
+               dto.flatten ? "(扁平化) " : ""
+           ) + dto.name;
+}
+
+async function onCreateOptionChanged(value?: string | number | boolean) {
+    if (value === "USE_EXIST_DTO") {
+        if (!existsDtos.value || existsDtos.value.length == 0) {
+            existsDtos.value = await api.getByRefEntity(props.property!.entityType!.id);
+        }
+    } else {
+        if (formData.value.dataType === 'ENTITY') {
+            if (value === 'FLATTEN') {
+                formData.value.newDtoName = formData.value.entityType!.name + "DTO";
+            }
+            if (value === 'CREATE_DTO') {
+                let dtoName = formData.value.entityType!.name + "DTO";
+                let max = await api.getMaxNameIndex(props.serviceName!, dtoName);
+                const entity = await useEntityApi(axios).getById(formData.value.entityType!.id);
+                newDtoCaption = entity.caption;
+                formData.value.newDtoName = dtoName + (
+                                            max + 1
+                ).toString();
+            }
+        }
+    }
+    optItemRef.value?.clearValidate();
+}
+
+watch(() => props.appId, loadApp)
+
+loadApp();
+</script>
+
+<template>
+    <el-drawer append-to-body destroy-on-close title="添加属性到关联DTO" @open="onOpen" size="40%"
+               v-model="visible">
+        <el-form ref="formRef" label-position="top" inline-message :model="formData" :rules="rules"
+                 size="small" require-asterisk-position="right">
+            <el-form-item label="要添加属性的DTO" prop="selectedDtos" required>
+                <el-select multiple value-key="id" v-model="formData.selectedDtos">
+                    <el-option v-for="dto in dtos" :key="dto.id" :value="dto"
+                               :label="getDtoOptionLabel(dto)"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="属性名称" required prop="name">
+                <el-input v-model="formData.name" ref="inputRef">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="属性标题" required prop="caption">
+                <ja-input-i18n-raw :app-id="appId" size="small"
+                                   v-model="formData.caption"></ja-input-i18n-raw>
+            </el-form-item>
+            <el-form-item label="嵌套DTO选项" required prop="createOption"
+                          v-if="formData.dataType === 'ENTITY'"
+                          ref="optItemRef">
+                <el-radio-group v-model="formData.createOption"
+                                @change="onCreateOptionChanged">
+                    <el-radio-button value="CREATE_DTO"
+                                     :disabled="formData.dataType !== 'ENTITY'">
+                        新建DTO
+                    </el-radio-button>
+                    <el-radio-button value="USE_EXIST_DTO"
+                                     :disabled="formData.dataType !== 'ENTITY'">
+                        使用现有DTO
+                    </el-radio-button>
+                    <el-radio-button value="FLATTEN">扁平化</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="新DTO名称" required prop="newDtoName"
+                          v-if="formData.createOption === 'CREATE_DTO'">
+                <el-input v-model="formData.newDtoName"></el-input>
+            </el-form-item>
+            <el-space>
+                <el-form-item label="审计关键字" v-if="formData.dataType !== 'ENTITY'
+                && props.property?.collectionType === 'NONE'">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            审计关键字
+                            <el-tooltip raw-content
+                                        content="当前DTO作为事件数据审计时，将取此属性值作为关键字">
+                                <el-icon>
+                                    <question-filled>
+                                    </question-filled>
+                                </el-icon>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <el-switch v-model="formData.eventKeyWord"></el-switch>
+                </el-form-item>
+                <el-form-item label="生成为接口" label-position="left"
+                              v-if="formData.createOption === 'CREATE_DTO'">
+                    <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.createOption === 'CREATE_DTO' && !formData.asInterface">
+                    <template #label>
+                        <el-text style="font-weight: bold">
+                            加载映射
+                            <el-tooltip raw-content
+                                        content="启用后，DTO映射转换为对应实体时，先从数据库加载同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.createOption === 'CREATE_DTO' && formData.mapLoad && !formData.asInterface"
+                              style="margin-left: 32px">
+                    <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>
+            <el-form-item label="请选择现存DTO" required prop="existDto"
+                          v-if="formData.createOption === 'USE_EXIST_DTO'">
+                <el-select v-model="formData.existDto" filterable
+                           value-key="id">
+                    <el-option v-for="d in existsDtos" :key="d.id" :value="d"
+                               :label="d.name"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="日期时间格式" prop="dateTimeFormat"
+            v-if="formData.dataType === 'DATE' || formData.dataType === 'DATETIME' || formData.dataType === 'TIME'">
+                <el-autocomplete v-model="formData.dateTimeFormat" :fetch-suggestions="useDateFormatQuery">
+                </el-autocomplete>
+            </el-form-item>
+            <el-form-item label="是否翻译为本地化文本"
+                          v-if="formData.dataType === 'I18N_STRING'">
+                <el-switch v-model="formData.localize"></el-switch>
+            </el-form-item>
+            <create-dto-prop-from-entity-prop-editor
+                v-if="formData.entityType && formData.createOption && formData.createOption !== 'USE_EXIST_DTO'"
+                :app-id="appId"
+                :service-name="serviceName"
+                ref="propEditorRef"
+                :parent-prop="property?.name"
+                :entity-id="formData.entityType?.id">
+            </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>