ace-front-end 1.0.0

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

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import {
+    Delete,
+    Edit,
+    Plus,
+    QuestionFilled,
+    Refresh,
+    Setting
+} from "@element-plus/icons-vue";
+import {VxeColumn, VxeTable, type VxeTablePropTypes, type VxeTableInstance} from "vxe-table";
+import {
+    type AppService,
+    type AppSetting,
+    type AppSettingGroup,
+    useAppSettingApi,
+    useAppSettingGroupApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {nextTick, reactive, ref, watch} from "vue";
+import {JaButton} from "@jari-ace/element-plus-component";
+import type {GroupedSetting} from "@/views/globalManage/globalSetting/types";
+import ValueEditor from "@/components/settingValueEditor/ValueEditor.vue"
+import GroupEditor from "@/views/appManage/configDefine/GroupEditor.vue";
+import SettingEditor from "./SettingEditor.vue";
+import type {EditorMode} from "@/views/appManage/types";
+import {ElMessageBox} from "element-plus";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import ServiceSelector from "@/views/appManage/components/ServiceSelector.vue";
+
+const props = defineProps<{
+    appId: string,
+    type: 'update' | 'define'
+}>()
+
+const loading = useLoading();
+const groupApi = useAppSettingGroupApi();
+const settingApi = useAppSettingApi();
+const state = ref<{
+    settings: GroupedSetting[],
+    editingSetting?: GroupedSetting,
+    currentService?: AppService,
+    services?: AppService[],
+    editorMode?: EditorMode,
+    addTo?: GroupedSetting,
+    editingGroup?: GroupedSetting,
+    title: string,
+    titleRemark: string,
+    opColumnWidth: string;
+}>({
+    settings: [],
+    title: props.type == 'define' ? '配置定义' : "应用配置",
+    opColumnWidth: props.type == 'define' ? '360px' : "120px",
+    titleRemark: props.type == 'define' ? '定义和管理应用服务的配置项' : "管理应用配置，设置应用配置值"
+});
+const tableRef = ref<VxeTableInstance<GroupedSetting>>();
+const editorDlg = ref<typeof ValueEditor>();
+const treeConfig = reactive<VxeTablePropTypes.TreeConfig<GroupedSetting>>({
+    transform: true,
+    rowField: 'tid',
+    expandAll: true,
+    parentField: 'parentId',
+    lazy: true,
+    hasChildField: 'hasChildren',
+    loadMethod({row}) {
+        // 异步加载子节点
+        return fetchChildren(row)
+    }
+})
+const dlgGroupEditor = ref<typeof GroupEditor>();
+const dlgSettingEditor = ref<typeof SettingEditor>();
+watch(() => state.value.currentService, () => {
+    if (state.value.currentService) {
+        loadRoots();
+    }
+})
+
+function buildGroupData(g: AppSettingGroup) {
+    return {
+        tid: "g" + g.id.toString(), //树节点
+        id: g.id,
+        name: g.name,
+        description: g.description,
+        hasChildren: g.hasChildren,
+        isGroup: true,
+        dataVersion: g.dataVersion,
+        parentId: g.parentId ? "g" + g.parentId.toString() : undefined
+    } as GroupedSetting;
+}
+
+function buildSettingData(c: AppSetting) {
+    return {
+        tid: "c" + c.id.toString(), //树节点
+        id: c.id,
+        name: c.name,
+        description: c.description,
+        hasChildren: false,
+        parentId: c.groupId ? "g" + c.groupId.toString() : undefined,
+        isGroup: false,
+        dataVersion: c.dataVersion,
+        value: c.multiValued ? "[列表值]" : (
+            c.valueWithKey ? "[映射值]" : c.value
+        ),
+        setting: c
+    } as unknown as GroupedSetting;
+}
+
+async function loadRoots() {
+    const rootGroups = await groupApi.getRoots(state.value!.currentService!.id);
+    const rootSettings = await settingApi.getRootByServiceId(state.value!.currentService!.id);
+    const settings: GroupedSetting[] = [];
+    settings.push(...rootGroups.map(g => buildGroupData(g)));
+    settings.push(...rootSettings.map(c => buildSettingData(c)));
+    state.value.settings = settings;
+
+    const t = tableRef.value;
+    if (!t) return;
+    await nextTick(() => t.setAllTreeExpand(true))
+}
+
+function fetchChildren(group: GroupedSetting) {
+    return settingApi.getByGroup(group.id)
+                     .then(settings => {
+                         return settings.map(c => buildSettingData(c))
+                     }).then(async settings => {
+            const groups = await groupApi.getChildren(group.id);
+            settings.push(...groups.map(g => buildGroupData(g)))
+            return settings;
+        })
+}
+
+function updateValue(setting: GroupedSetting) {
+    state.value.editingSetting = setting;
+    editorDlg.value?.show();
+}
+
+function reloadAndExpandNode(row: GroupedSetting) {
+    const t = tableRef.value;
+    if (!t) return;
+    t.reloadTreeExpand(row);
+    groupApi.getById(row.id).then(np => {
+        t.setRow(row, buildGroupData(np))
+    })
+}
+
+function reloadParentAndChildren(parent?: GroupedSetting | null) {
+    if (parent) {
+        parent.hasChildren = true;
+        reloadAndExpandNode(parent);
+    } else {
+        loadRoots();
+    }
+}
+
+function onSettingEditSuccess() {
+    const t = tableRef.value;
+    if (!t) return;
+    if (state.value.editorMode == 'update') {
+        const id = state.value.editingSetting?.id;
+        const dataVersion = state.value.editingSetting?.setting?.dataVersion;
+        if (id != undefined && dataVersion !== undefined) {
+            settingApi.getById(id, dataVersion + 1).then(s => {
+                const editing = state.value.editingSetting;
+                if (!editing) return;
+                const newRow = buildSettingData(s);
+                t.setRow(editing, newRow);
+            })
+        }
+    } else {
+        reloadParentAndChildren(state.value.addTo);
+        ElMessageBox.confirm("是否继续添加？").then(() => dlgSettingEditor.value?.show())
+    }
+}
+
+function onGroupEditSuccess(g: AppSettingGroup) {
+    const t = tableRef.value;
+    if (!t) return;
+    if (state.value.editorMode === 'create') {
+        reloadParentAndChildren(state.value.addTo);
+        ElMessageBox.confirm("是否继续添加？").then(() => dlgGroupEditor.value?.show())
+    } else if (state.value.editorMode === 'update') {
+        t.setRow(state.value.editingGroup, buildGroupData(g));
+    }
+}
+
+function updateGroup(row: GroupedSetting) {
+    state.value.editingGroup = row;
+    state.value.editorMode = 'update';
+    state.value.addTo = undefined;
+    dlgGroupEditor.value?.show();
+}
+
+function createSubGroup(row?: GroupedSetting) {
+    const t = tableRef.value;
+    if (!t) return;
+    state.value.editingGroup = row;
+    state.value.editorMode = 'create';
+    state.value.addTo = row;
+    dlgGroupEditor.value?.show();
+}
+
+function updateSetting(row: GroupedSetting) {
+    state.value.editorMode = 'update';
+    state.value.editingSetting = row;
+    dlgSettingEditor.value?.show();
+}
+
+function createSubSetting(row?: GroupedSetting) {
+    state.value.addTo = row;
+    state.value.editorMode = 'create';
+    state.value.editingSetting = undefined;
+    dlgSettingEditor.value?.show();
+}
+
+function reloadParentOfDeletedNode(row: GroupedSetting) {
+    const t = tableRef.value;
+    if (!t) return;
+    const p = t.getParentRow(row);
+    if (p) {
+        t.reloadTreeExpand(p);
+        groupApi.getById(p.id).then(np => {
+            const npData = buildGroupData(np);
+            t.setRow(p, npData);
+        })
+    } else loadRoots();
+}
+
+function deleteRow(row: GroupedSetting) {
+    ElMessageBox.confirm("确定删除指定项？")
+                .then(() => {
+                    if (row.isGroup) {
+                        groupApi.delete(row.id, row.dataVersion)
+                                .then(() => {
+                                    reloadParentOfDeletedNode(row);
+                                })
+                    } else {
+                        const s = row.setting;
+                        state.value.editingSetting = row;
+                        if (s) {
+                            settingApi.delete([{id: s.id, dataVersion: s.dataVersion}])
+                                      .then(() => {
+                                          reloadParentOfDeletedNode(row);
+                                      });
+                        }
+                    }
+                })
+}
+</script>
+
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            {{ state.title }}
+            <el-tooltip :content="state.titleRemark">
+                <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="state.currentService"></service-selector>
+                <el-select v-model="state.currentService" style="width:200px">
+                    <el-option v-for="s in state.services" :key="s.id"
+                               :value="s.id" :label="s.name"></el-option>
+                </el-select>
+            </el-tooltip>
+        </template>
+        <template #toolbar>
+            <el-space>
+                <ja-button type="success"
+                           :icon="Plus"
+                           tooltip="新建根配置组"
+                           shortcut="Alt+G"
+                           v-if="props.type==='define'"
+                           @click="createSubGroup(undefined)">
+                    新建配置组
+                </ja-button>
+                <ja-button type="success"
+                           :icon="Plus"
+                           tooltip="新建根配置项"
+                           shortcut="Alt+N"
+                           v-if="props.type==='define'"
+                           @click="createSubSetting(undefined)">
+                    新建配置项
+                </ja-button>
+                <ja-button plain
+                           :icon="Refresh"
+                           tooltip="重新加载数据"
+                           @click="loadRoots"
+                           shortcut="Alt+R">刷新
+                </ja-button>
+            </el-space>
+        </template>
+        <template #body>
+            <vxe-table
+                :tree-config="treeConfig"
+                :loading="loading"
+                size="small"
+                :data="state.settings"
+                height="100%"
+                ref="tableRef"
+                :column-config="{resizable: true}"
+                :row-config="{ isHover: true }"
+                class="vxe-table--scrollbar">
+                <vxe-column fixed="left" field="name" title="配置项名" width="240px" tree-node>
+                </vxe-column>
+                <vxe-column field="description" title="说明"></vxe-column>
+                <vxe-column field="value" title="配置值" width="180px"></vxe-column>
+                <vxe-column title="操作" fixed="right" :width="state.opColumnWidth">
+                    <template #default="{ row }">
+                        <el-button link type="warning" :icon="Edit"
+                                   v-if="row.isGroup && props.type==='define'"
+                                   @click="updateGroup(row)">
+                            编辑
+                        </el-button>
+                        <el-button link type="success" :icon="Plus"
+                                   v-if="row.isGroup && props.type==='define'"
+                                   @click="createSubGroup(row)">
+                            新建子组
+                        </el-button>
+                        <el-button link type="success" :icon="Plus"
+                                   v-if="row.isGroup && props.type==='define'"
+                                   @click="createSubSetting(row)">
+                            新建子项
+                        </el-button>
+                        <el-button link type="warning" :icon="Edit"
+                                   v-if="!row.isGroup && props.type==='define'"
+                                   @click="updateSetting(row)">
+                            配置定义
+                        </el-button>
+                        <el-button link type="primary" :icon="Setting" v-if="!row.isGroup"
+                                   @click="updateValue(row)">配置值
+                        </el-button>
+                        <el-button link type="danger" :icon="Delete" @click="deleteRow(row)"
+                                   v-if="props.type==='define'">
+                            删除
+                        </el-button>
+                    </template>
+                </vxe-column>
+                <template #empty>
+                    <el-empty/>
+                </template>
+            </vxe-table>
+        </template>
+    </app-manage-layout>
+    <value-editor :setting="state.editingSetting" ref="editorDlg"
+                  @success="onSettingEditSuccess"></value-editor>
+    <group-editor ref="dlgGroupEditor" :mode="state.editorMode!"
+                  :app-service-id="state.currentService?.id"
+                  :app-id="props.appId" @success="onGroupEditSuccess"
+                  :group-id="state.editingGroup?.id" :add-to="state.addTo?.id"></group-editor>
+    <setting-editor ref="dlgSettingEditor" :app-id="props.appId"
+                    :app-service-id="state.currentService?.id"
+                    :add-to="state.addTo?.id" :setting-id="state.editingSetting?.id"
+                    :mode="state.editorMode" @success="onSettingEditSuccess"
+                    :data-version="state.editingSetting?.setting?.dataVersion"></setting-editor>
+</template>
+
+
+<style lang="scss" scoped>
+.global-setting-page {
+    height: 100%;
+
+    &__body {
+        height: calc(100% - 56px);
+        display: flex;
+        flex-direction: column;
+
+        .user-list {
+            float: left;
+            width: 100%;
+            height: calc(100% - 56px);
+            overflow-y: auto;
+        }
+
+        .table-tools {
+            padding: 12px 16px;
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    }
+
+    h3 {
+        margin: 0;
+    }
+}
+
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>
+

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {
+    JaButton,
+    JaForm,
+    JaFormItem,
+    JaInput, useBackendValidations
+} from "@jari-ace/element-plus-component";
+import {type AppSettingGroup, useAppSettingGroupApi, useLoading} from "@jari-ace/app-bolts";
+import type {EditorMode} from "@/views/appManage/types";
+
+const visible = ref(false);
+const props = defineProps<{
+    appId: string,
+    appServiceId?: string,
+    mode?: EditorMode,
+    groupId?: string,
+    addTo?: string | null
+}>();
+const emits = defineEmits<{
+    (e: "success", g: AppSettingGroup): void
+}>();
+
+const initData: AppSettingGroup = {
+    appInstance: {
+        id: props.appId
+    },
+    appService: {
+        id: props.appServiceId!
+    },
+    dataVersion: 0,
+    description: "",
+    hasChildren: false,
+    id: '0',
+    name: "",
+    parentId: '0',
+    releaseSource: ""
+}
+
+const state = ref<{
+    title?: string,
+    formData: AppSettingGroup
+}>({
+    formData: {...initData}
+})
+const validator = useBackendValidations(Object.keys(initData));
+const loading = useLoading(validator.axios);
+const api = useAppSettingGroupApi(validator.axios);
+const formRef = ref<typeof JaForm>()
+
+function init() {
+    if (props.mode === 'create') {
+        state.value.title = '创建配置组'
+        state.value.formData = {...initData};
+    } else {
+        state.value.title = '修改配置组'
+        api.getById(props.groupId!).then(g => {
+            state.value.formData = g;
+        })
+    }
+}
+
+function submit() {
+    const group = state.value.formData;
+    if (props.mode === 'create') {
+        formRef.value?.validate(() => api.create({
+            addTo: props.addTo ? {
+                id: props.addTo
+            } : undefined,
+            appInstance: {
+                id: props.appId,
+            },
+            appService: {
+                id: props.appServiceId!
+            },
+            description: group.description,
+            name: group.name
+        }).then(g => {
+            emits('success', g);
+            visible.value = false;
+        }))
+    } else {
+        formRef.value?.validate(() => api.update({
+            dataVersion: group.dataVersion,
+            id: group.id,
+            description: group.description,
+            name: group.name
+        }).then(g => {
+            emits('success', g);
+            visible.value = false;
+        }))
+    }
+}
+
+defineExpose({
+    show() {
+        visible.value = true
+    },
+    close() {
+        visible.value = 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/>
+            </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>