ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/configDefine/SettingEditor.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+
+import {
+    JaButton,
+    JaForm,
+    JaFormItem,
+    JaInput,
+    JaSelect,
+    JaInputNumber,
+    JaMapItemList,
+    JaSwitch,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import {
+    type AppSetting, type CreateAppSettingCommand, type UpdateAppSettingCommand,
+    useAppSettingApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {ref} from "vue";
+import type {EditorMode} from "@/views/appManage/types";
+
+const visible = ref(false);
+const props = defineProps<{
+    appId: string,
+    appServiceId?: string,
+    mode?: EditorMode,
+    settingId?: string,
+    addTo?: string | null,
+    dataVersion?: number
+}>();
+const emits = defineEmits<{
+    (e: "success", g: AppSetting): void
+}>();
+const initData: CreateAppSettingCommand & UpdateAppSettingCommand = {
+    appInstance: {
+        id: props.appId
+    },
+    appService: {
+        id: props.appServiceId ?? '0'
+    },
+    dataType: "String",
+    dataVersion: 0,
+    defaultValue: undefined,
+    description: "",
+    enumValues: undefined,
+    group: undefined,
+    groupId: '0',
+    groupName: "",
+    id: '0',
+    maxLength: 0,
+    maxNumber: '0',
+    minLength: 0,
+    minNumber: '0',
+    multiValued: false,
+    name: "",
+    valueWithKey: false
+}
+const validator = useBackendValidations(Object.keys(initData));
+const loading = useLoading(validator.axios);
+const api = useAppSettingApi(validator.axios);
+const formRef = ref<typeof JaForm>()
+const state = ref<{
+    title?: string,
+    formData: CreateAppSettingCommand & UpdateAppSettingCommand
+}>({
+    formData: {...initData}
+})
+const valueDataType: { [key in AppSetting["dataType"]]: string } = {
+    String: "文本",
+    Boolean: "布尔",
+    Integer: "整数",
+    Long: "长整数",
+    Decimal: "小数",
+    Enum: "枚举",
+    DATE: "日期",
+    TIMESTAMP: "日期时间",
+};
+
+function init() {
+    if (props.mode === 'create') {
+        state.value.title = '创建配置项'
+        state.value.formData = {
+            ...initData,
+            appInstance: {
+                id: props.appId
+            },
+            appService: {
+                id: props.appServiceId ?? '0'
+            },
+            group: props.addTo ? {
+                id: props.addTo
+            } : undefined
+        };
+    } else {
+        state.value.title = '修改配置项'
+        api.getById(props.settingId!, props.dataVersion!).then(g => {
+            state.value.formData = {
+                ...g,
+                appService: {
+                    id: props.appServiceId!
+                },
+                group: props.addTo ? {
+                    id: props.addTo
+                } : undefined
+            };
+        })
+    }
+}
+
+function submit() {
+    if (props.mode === 'create') {
+        formRef.value?.validate(() => api.create(state.value.formData).then(g => {
+            emits('success', g);
+            visible.value = false;
+        }))
+    } else {
+        formRef.value?.validate(() => api.update(state.value.formData).then(g => {
+            emits('success', g);
+            visible.value = false;
+        }))
+    }
+}
+
+defineExpose({
+    show() {
+        visible.value = true
+    },
+    close() {
+        visible.value = false
+    }
+})
+
+function isNumberType(dataType: typeof initData.dataType) {
+    return dataType === 'Decimal' || dataType === 'Integer' || dataType === 'Long';
+}
+
+function onMultiValueChanged() {
+    console.log('multivalue changed')
+    if (state.value.formData.multiValued) {
+        state.value.formData.valueWithKey = false;
+    }
+}
+
+function onKeyWithValueChanged() {
+    console.log("keywithvalue changed")
+    if (state.value.formData.valueWithKey) {
+        state.value.formData.multiValued = false;
+    }
+}
+
+</script>
+
+<template>
+    <el-drawer destroy-on-close
+               :title="state.title"
+               v-model="visible"
+               @open="init">
+        <ja-form
+            ref="formRef"
+            :model="state"
+            :validator="validator">
+            <ja-form-item label="配置项名称" prop="name" required>
+                <ja-input v-focus/>
+            </ja-form-item>
+            <ja-form-item label="配置项说明" prop="description">
+                <ja-input type="textarea"/>
+            </ja-form-item>
+            <ja-form-item label="配置值数据类型" prop="dataType">
+                <ja-select style="width: 100%">
+                    <ElOption
+                        v-for="(item, key) in valueDataType"
+                        :key="key"
+                        :value="key"
+                        :label="item"
+                    ></ElOption>
+                </ja-select>
+            </ja-form-item>
+            <template v-if="state.formData.dataType === 'String'">
+                <ja-form-item label="文本最小长度" prop="minLength">
+                    <ja-input-number
+                        style="width: 100%"
+                        :precision="0"
+                    ></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="文本最大长度" prop="maxLength">
+                    <ja-input-number
+                        style="width: 100%"
+                        :precision="0"
+                    ></ja-input-number>
+                </ja-form-item>
+            </template>
+            <template v-if="isNumberType(state.formData.dataType)">
+                <ja-form-item label="最小值" prop="minNumber">
+                    <ja-input-number
+                        style="width: 100%"
+                        :precision="0"
+                    ></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="最大值" prop="maxNumber">
+                    <ja-input-number
+                        style="width: 100%"
+                        :precision="0"
+                    ></ja-input-number>
+                </ja-form-item>
+            </template>
+            <template v-if="state.formData.dataType === 'Enum'">
+                <ja-form-item label="枚举定义" prop="enumValues">
+                    <ja-map-item-list value-type="String"/>
+                </ja-form-item>
+            </template>
+            <ja-form-item label="是否多值（数组）" prop="multiValued"
+                          v-if="isNumberType(state.formData.dataType) || state.formData.dataType === 'String'">
+                <ja-switch @change="onMultiValueChanged()"/>
+            </ja-form-item>
+            <ja-form-item label="是否映射" prop="valueWithKey">
+                <ja-switch @change="onKeyWithValueChanged()"/>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+
+import {Delete, Edit, Plus, QuestionFilled, Refresh} from "@element-plus/icons-vue";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {JaButton, useAppInstances} from "@jari-ace/element-plus-component";
+import {
+    type AppService,
+    useLoading,
+    type DataSourceDefinition,
+    useDataSourceApi, type AppInstance
+} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+import {pageSizes} from "@/hooks/usePageSize";
+import {VxeColumn, VxeTable} from "vxe-table";
+import CreateNewDialog from "@/views/appManage/dataSourceDefine/createNewDidalog.vue";
+import EditDialog from "@/views/appManage/dataSourceDefine/editDialog.vue";
+import ServiceSelector from "@/views/appManage/components/ServiceSelector.vue";
+import {ElMessageBox} from "element-plus";
+
+const props = defineProps<{
+    appId: string
+}>();
+const currentService = ref<AppService>();
+const loading = useLoading();
+const {getById: getAppById} = useAppInstances();
+const appInfo = ref<AppInstance>();
+const dataSources = ref<DataSourceDefinition[]>([]);
+const api = useDataSourceApi();
+const page = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+const createNewDlgVisible = ref(false);
+const editingDataSource = ref<DataSourceDefinition>();
+const editDlgVisible = ref(false);
+
+async function loadData() {
+    if (!props.appId) {
+        return
+    }
+    appInfo.value = await getAppById(props.appId);
+    if (!currentService.value) return;
+    const r = await api.queryByApp(
+        appInfo.value.name,
+        currentService.value?.name ?? "",
+        page.value - 1,
+        pageSize.value);
+    dataSources.value = r.content;
+    total.value = r.totalElements;
+}
+
+function createNew() {
+    createNewDlgVisible.value = true;
+}
+
+function onEditClick(ds: DataSourceDefinition) {
+    editingDataSource.value = ds;
+    editDlgVisible.value = true;
+}
+
+async function onDeleteClick(ds: DataSourceDefinition) {
+    await ElMessageBox.confirm("确定要删除此数据源定义吗？", "确认删除");
+    await api.delete(ds.id, ds.dataVersion);
+    await loadData();
+}
+
+async function onSetMainClick(ds: DataSourceDefinition) {
+    await api.setAsMain(ds.id);
+    await loadData();
+}
+
+watch(currentService, loadData);
+loadData();
+
+</script>
+
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            数据源定义
+            <el-tooltip
+                content="注册应用中需要使用的数据源。">
+                <el-icon>
+                    <question-filled/>
+                </el-icon>
+            </el-tooltip>
+            <el-divider direction="vertical"></el-divider>
+            <el-tooltip content="选择应用服务">
+                <service-selector :app-id="props.appId" v-model="currentService"></service-selector>
+            </el-tooltip>
+        </template>
+        <template #toolbar>
+            <el-space>
+                <ja-button type="success"
+                           :icon="Plus"
+                           tooltip="新建数据源"
+                           shortcut="Alt+N"
+                           @click="createNew">
+                    新建
+                </ja-button>
+                <ja-button plain
+                           :icon="Refresh"
+                           tooltip="重新加载数据"
+                           @click="loadData"
+                           shortcut="Alt+R">刷新
+                </ja-button>
+            </el-space>
+        </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, height: 40 }"
+                        :data="dataSources"
+                        class="vxe-table--scrollbar">
+                        <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                        <vxe-column field="name" title="数据源标识" show-overflow width="250px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="databaseType" title="数据库类型" show-overflow
+                                    width="150px"
+                                    show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="readonly" title="是否只读" show-overflow
+                                    show-header-overflow width="120px">
+                            <template #default="{row}">
+                                <el-tag v-if="row.readonly"
+                                        type="success">是
+                                </el-tag>
+                                <el-tag v-else
+                                        type="danger">否
+                                </el-tag>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="readonly" title="是否主数据源" show-overflow
+                                    show-header-overflow width="120px">
+                            <template #default="{row}">
+                                <el-tag v-if="row.mainDatasource"
+                                        type="success">是
+                                </el-tag>
+                                <el-tag v-else
+                                        type="danger">否
+                                </el-tag>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="jdbcUrl" title="JDBC URL" show-overflow
+                                    show-header-overflow></vxe-column>
+                        <vxe-column title="操作" fixed="right" width="280px" show-overflow
+                                    show-header-overflow>
+                            <template #default="{ row }">
+                                <!-- row.disabled -->
+                                <el-button link type="warning" :icon="Edit"
+                                           @click="onEditClick(row)">编辑
+                                </el-button>
+                                <el-button link type="primary" :icon="Edit"
+                                           v-if="!row.mainDatasource"
+                                           @click="onSetMainClick(row)">设置为主数据源
+                                </el-button>
+                                <el-button link type="danger" :icon="Delete"
+                                           @click="onDeleteClick(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="page"
+                        @current-change="loadData"
+                        @size-change="loadData"
+                        :total="total"/>
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+    <create-new-dialog :app-name="appInfo?.name" v-model="createNewDlgVisible" @success="loadData"
+                       :service-name="currentService?.name"></create-new-dialog>
+    <edit-dialog :data-source="editingDataSource" v-model="editDlgVisible"
+                 @success="loadData"></edit-dialog>
+</template>
+
+<style scoped lang="scss">
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>

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

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import {reactive, ref} from 'vue';
+import {
+    createAxiosWithoutCache,
+    type CreateDataSourceCommand, type SchemaPropertyDescriptor,
+    useDataSourceApi, useLoading
+} from "@jari-ace/app-bolts";
+import {JaForm, useBackendValidations} from "@jari-ace/element-plus-component";
+import {ElForm, type FormRules} from "element-plus";
+import {CaretBottom} from "@element-plus/icons-vue";
+
+const visible = defineModel<boolean>({
+    required: true,
+    default: false
+})
+const props = defineProps<{
+    appName?: string,
+    serviceName?: string
+}>();
+const state = ref({
+    formData: createNewForm()
+})
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const api = useDataSourceApi(axios);
+const dbTypes = ref<string[]>([]);
+const createProps = ref<SchemaPropertyDescriptor[]>();
+const emits = defineEmits(["success"]);
+
+function createNewForm() {
+    return {
+        /**
+         * 应用名
+         */
+        appName: props.appName,
+        /**
+         * 数据源所属服务名
+         */
+        serviceName: props.serviceName,
+        /**
+         * 数据源标识
+         */
+        name: "",
+        /**
+         * 数据库名称
+         */
+        databaseType: "H2",
+        /**
+         * 是否创建新库(在数据库中执行新建schema命令）
+         */
+        createNew: true,
+        /**
+         * 实体类子包名
+         */
+        packageName: "",
+        /**
+         * 是否只读库
+         */
+        readonly: false,
+        /**
+         * 数据库创建属性参数
+         */
+        properties: {} as Record<string, string>
+    } as CreateDataSourceCommand;
+}
+
+async function init() {
+    state.value.formData = createNewForm();
+    dbTypes.value = await api.getSupportedDbs();
+    await onModeChanged();
+}
+
+const rules = ref<FormRules<any>>({});
+
+async function onModeChanged() {
+    if (state.value.formData.createNew) {
+        createProps.value = await api.getCreateSchemaProperties(state.value.formData.databaseType);
+    } else {
+        createProps.value = await api.getConnectionProperties(state.value.formData.databaseType);
+    }
+    state.value.formData.properties = {} as Record<string, string>;
+
+    rules.value = {};
+    if (createProps.value) {
+        for (let p of createProps.value) {
+            state.value.formData.properties[p.name] = p.defaultValue;
+            rules.value[p.name] = {
+                required: true,
+                message: p.caption + '不能为空',
+                trigger: 'blur'
+            }
+        }
+    }
+}
+
+const form = ref<InstanceType<typeof JaForm>>();
+const form1 = ref<InstanceType<typeof ElForm>>();
+
+async function submit() {
+    if (!form1.value || !form.value) return;
+    await form1.value.validate((valid) => {
+        if (valid) {
+            form.value?.validate(() => api.create(state.value.formData)
+                                          .then(() => {
+                                              emits('success');
+                                              visible.value = false;
+                                          }))
+        }
+    })
+}
+
+async function testConnClick() {
+    const f = state.value.formData;
+    await api.testConnection(f.databaseType, f.properties);
+}
+
+</script>
+
+<template>
+    <el-drawer append-to-body destroy-on-close title="创建数据源"
+               v-model="visible" @open="init">
+        <el-scrollbar>
+            <ja-form :validator="validator" :model="state" ref="form">
+                <ja-form-item label="数据源标识" prop="name" required>
+                    <ja-input v-focus></ja-input>
+                </ja-form-item>
+                <ja-form-item label="数据库类型" prop="databaseType" required>
+                    <ja-select @change="onModeChanged">
+                        <el-option v-for="db in dbTypes" :key="db" :label="db" :value="db"/>
+                    </ja-select>
+                </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="createNew">
+                    <ja-radio-group @change="onModeChanged">
+                        <el-radio-button :value="true">新建数据库/用户模式</el-radio-button>
+                        <el-radio-button :value="false">使用现有数据库/用户模式
+                        </el-radio-button>
+                    </ja-radio-group>
+                </ja-form-item>
+            </ja-form>
+            <el-form :model="state.formData.properties" label-position="top" size="small"
+                     inline-message :rules="rules" ref="form1" require-asterisk-position="right">
+                <el-form-item>
+                    <el-text type="info" v-if="state.formData.createNew" style="font-weight: 600">
+                        <el-icon>
+                            <caret-bottom></caret-bottom>
+                        </el-icon>
+                        数据库连接配置
+                    </el-text>
+                </el-form-item>
+                <el-form-item v-for="p in createProps"
+                              :key="p.name" :label="p.caption" label-position="top"
+                              :prop="p.name" :required="p.required">
+                    <el-input v-model="state.formData.properties[p.name]"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <ja-button type="primary" plain shortcut="Alt+T" @click="testConnClick"
+                       v-if="!state.formData.createNew" :loading="loading"
+                       style="float:left;">测试连接
+            </ja-button>
+            <ja-button type="primary" shortcut="Alt+Enter" @click="submit" :disabled="loading"
+                       :loading="loading">确定
+            </ja-button>
+            <el-button plain @click="visible=false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>