ace-front-end 1.0.0

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

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import {
+    type AppRelease,
+    createAxiosWithoutCache,
+    useLoading,
+    useReleaseApi, type VersioningAction, type ReleaseMileStone
+} from "@jari-ace/app-bolts";
+import {reactive, ref, watch} from "vue";
+import type {ElForm} from "element-plus";
+import {InfoFilled} from "@element-plus/icons-vue";
+
+const props = defineProps<{
+    appName: string | undefined,
+    mode: 'create' | 'update',
+    editing: AppRelease | undefined;
+}>();
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useReleaseApi(axios);
+const currentRelease = ref<AppRelease>();
+const displayRelease = ref<AppRelease>();
+const visible = defineModel<boolean>({
+    default: false
+})
+const title = ref("");
+const form = reactive<{
+    versioningAction: VersioningAction,
+    milestone: ReleaseMileStone,
+    releaseNote: string
+}>({
+    versioningAction: "INCREASE_MILESTONE_VERSION",
+    milestone: 'SNAPSHOT',
+    releaseNote: ''
+})
+const emits = defineEmits(['submit']);
+const theForm = ref<InstanceType<typeof ElForm>>()
+let initialVer = false;
+
+function updateVersions() {
+    const cur = currentRelease.value;
+    const dis = displayRelease.value;
+    if (!cur || !dis) return;
+    switch (form.versioningAction) {
+        case 'INCREASE_MAJOR_VERSION':
+            dis.majorVersion = cur.majorVersion + 1;
+            dis.minorVersion = 0;
+            dis.patchVersion = 0;
+            dis.milestone = 'SNAPSHOT';
+            dis.milestoneVersion = 1;
+            break;
+        case 'INCREASE_MINOR_VERSION':
+            dis.majorVersion = cur.majorVersion;
+            dis.minorVersion = cur.minorVersion + 1;
+            dis.patchVersion = 0;
+            dis.milestone = 'SNAPSHOT';
+            dis.milestoneVersion = 1;
+            break;
+        case 'INCREASE_PATCH_VERSION':
+            dis.majorVersion = cur.majorVersion;
+            dis.minorVersion = cur.minorVersion;
+            dis.patchVersion = cur.patchVersion + 1;
+            dis.milestone = 'SNAPSHOT';
+            dis.milestoneVersion = 1;
+            break;
+        case 'CHANGE_MILESTONE':
+            dis.majorVersion = cur.majorVersion;
+            dis.minorVersion = cur.minorVersion;
+            dis.patchVersion = cur.patchVersion;
+            dis.milestone = cur.milestone;
+            if (dis.milestone === 'SNAPSHOT') {
+                dis.milestone = 'ALPHA';
+            } else if (dis.milestone === 'ALPHA') {
+                dis.milestone = 'BETA';
+            } else if (dis.milestone === 'BETA') {
+                dis.milestone = 'RC';
+            } else if (dis.milestone === 'RC') {
+                dis.milestone = 'STABLE';
+            }
+            if (dis.milestone !== cur.milestone) {
+                dis.milestoneVersion = 1;
+            } else {
+                dis.milestoneVersion = cur.milestoneVersion;
+            }
+            break;
+        case 'INCREASE_MILESTONE_VERSION':
+            dis.majorVersion = cur.majorVersion;
+            dis.minorVersion = cur.minorVersion;
+            dis.patchVersion = cur.patchVersion;
+            dis.milestone = cur.milestone;
+            dis.milestoneVersion = cur.milestoneVersion + 1;
+            break;
+    }
+    form.milestone = dis.milestone;
+}
+
+async function onOpen() {
+    if (!props.appName) return;
+    if (props.mode === 'create') {
+        title.value = '发布新版本'
+        currentRelease.value = await api.getLatest(props.appName);
+        initialVer = !currentRelease.value.appName;
+        if (initialVer) {
+            currentRelease.value = {
+                appName: "",
+                dataVersion: 0,
+                id: '0',
+                majorVersion: 0,
+                milestone: 'SNAPSHOT',
+                milestoneVersion: 1,
+                minorVersion: 0,
+                patchVersion: 0,
+                releaseNote: "",
+                releaseTime: "",
+                releasedBy: ""
+            }
+            form.versioningAction = 'INCREASE_MINOR_VERSION';
+        } else {
+            form.versioningAction = 'INCREASE_MILESTONE_VERSION';
+        }
+        displayRelease.value = {...currentRelease.value};
+        form.milestone = displayRelease.value.milestone;
+        form.releaseNote = '';
+        updateVersions();
+    } else {
+        title.value = '修改发布说明'
+        if (!props.editing) throw Error('未指定要修改的应用发布信息');
+        currentRelease.value = props.editing;
+        displayRelease.value = props.editing;
+        form.releaseNote = props.editing.releaseNote;
+        form.milestone = props.editing.milestone;
+    }
+}
+
+async function onSubmit() {
+    theForm.value?.validate(async (valid) => {
+        if (valid) {
+            if (props.mode === 'create') {
+                if (initialVer) {
+                    await api.createInitial({
+                        appName: props.appName!,
+                        releaseNote: form.releaseNote
+                    })
+                } else {
+                    await api.create({
+                        appName: props.appName!,
+                        versioningAction: form.versioningAction,
+                        milestone: form.milestone,
+                        releaseNote: form.releaseNote
+                    })
+                }
+            } else {
+                await api.update({id: props.editing!.id, releaseNote: form.releaseNote});
+            }
+            visible.value = false;
+            emits('submit');
+        }
+    })
+}
+
+watch(() => form.versioningAction, updateVersions);
+
+</script>
+
+<template>
+    <el-drawer v-model="visible" destroy-on-close append-to-body :title="title" @open="onOpen">
+        <el-form ref="theForm" size="small" label-position="top" :model="form" inline-message
+                 :rules="{releaseNote:  [{message:'发布说明不能为空', required: true}]}">
+            <el-form-item label="当前版本号" v-if="!initialVer">
+                <el-text>
+                    {{ currentRelease?.majorVersion }}.{{
+                        currentRelease?.minorVersion
+                    }}.{{ currentRelease?.patchVersion }}-{{
+                        currentRelease?.milestone
+                    }}{{
+                        currentRelease?.milestone == 'SNAPSHOT' || currentRelease?.milestone
+                        == 'STABLE' ? '' : currentRelease?.milestoneVersion
+                    }}
+                </el-text>
+            </el-form-item>
+            <el-form-item v-if="mode=='create' && initialVer" label="发布初始版本">
+            </el-form-item>
+            <el-form-item label="版本号升级方案" v-if="mode=='create' && !initialVer">
+                <el-radio-group v-model="form.versioningAction">
+                    <el-radio-button label="增加主版本号"
+                                     value="INCREASE_MAJOR_VERSION"></el-radio-button>
+                    <el-radio-button label="增加次版本号"
+                                     value="INCREASE_MINOR_VERSION"></el-radio-button>
+                    <el-radio-button label="增加修订号"
+                                     value="INCREASE_PATCH_VERSION"></el-radio-button>
+                    <el-radio-button label="改变里程碑"
+                                     :disabled="currentRelease?.milestone==='STABLE'"
+                                     value="CHANGE_MILESTONE"></el-radio-button>
+                    <el-radio-button label="增加里程碑版本号"
+                                     :disabled="currentRelease?.milestone === 'STABLE'"
+                                     value="INCREASE_MILESTONE_VERSION"></el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="里程碑"
+                          v-if="form.versioningAction === 'CHANGE_MILESTONE'">
+                <el-select v-model="form.milestone">
+                    <el-option label="ALPHA" value="ALPHA"
+                               :disabled="currentRelease?.milestone !== 'SNAPSHOT'"></el-option>
+                    <el-option label="BETA" value="BETA"
+                               :disabled="currentRelease?.milestone !== 'SNAPSHOT'
+                               && currentRelease?.milestone !== 'BETA'"></el-option>
+                    <el-option label="RC" value="RC"
+                               :disabled="currentRelease?.milestone == 'RC' || currentRelease?.milestone === 'STABLE'"></el-option>
+                    <el-option label="STABLE" value="STABLE"
+                               :disabled="currentRelease?.milestone == 'STABLE'"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="预计新版本号" v-if="mode=='create'">
+                <el-text>
+                    {{ displayRelease?.majorVersion }}.{{
+                        displayRelease?.minorVersion
+                    }}.{{ displayRelease?.patchVersion }}-{{
+                        form?.milestone
+                    }}{{
+                        form?.milestone == 'STABLE' ? '' : (
+                            form?.milestone === 'SNAPSHOT' ? (
+                                    ' [' + displayRelease?.milestoneVersion
+                                    + ']'
+                                ) :
+                                displayRelease?.milestoneVersion
+                        )
+                    }}
+                </el-text>
+            </el-form-item>
+            <el-form-item label="发布说明" required prop="releaseNote">
+                <el-input type="textarea" v-model="form.releaseNote" :rows="5"
+                          placeholder="请列举添加的新特性或修复的问题"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-text type="warning">
+                    <el-icon>
+                        <info-filled></info-filled>
+                    </el-icon>
+                    提示：新增实体在发布后，'自动ID'、'支持发布'等特性将被限制修改
+                </el-text>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button type="primary" :loading="loading" @click="onSubmit" :disabled="loading"
+                       shortcut="Alt+Enter">确定
+            </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/appRouter/AppRouter.vue

@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import {
+    type AppRouteBase,
+    type AppRouteReference,
+    type MoveRouteCommand,
+    useLoading,
+    useRouteApi,
+} from "@jari-ace/app-bolts";
+import {reactive, ref, watch} from "vue";
+import {Delete, Edit, Plus, QuestionFilled, Refresh} from "@element-plus/icons-vue";
+import {VxeColumn, VxeTable, type VxeTableInstance, type VxeTablePropTypes} from "vxe-table";
+import {JaButton, useAppInstances} from "@jari-ace/element-plus-component";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {type EditorMode} from "./base";
+import Editor from "./components/Editor.vue";
+import {ElMessageBox} from "element-plus";
+
+const {getById: getAppById} = useAppInstances()
+
+const appName = ref<string>()
+
+interface RowData extends AppRouteBase {
+    children?: RowData[];
+}
+
+//定义组件名称
+defineOptions({ name: "PasswordEditor" });
+
+const tableRef = ref<VxeTableInstance<RowData>>();
+
+const props = defineProps<{
+    appId: string;
+}>();
+
+const loading = useLoading();
+
+const { getRoots, getChildren, deleteRoute, move } = useRouteApi();
+
+const editor = reactive<{
+    id?: string;
+    mode: EditorMode;
+    addTo?: AppRouteReference;
+    visible: boolean;
+    order: number;
+    parent?: RowData;
+}>({
+    mode: "create",
+    visible: false,
+    order: 1,
+});
+
+const routes = ref<AppRouteBase[]>([]);
+
+
+const treeConfig = reactive<VxeTablePropTypes.TreeConfig<RowData>>({
+    transform: true,
+    rowField: "id",
+    expandAll: false,
+    parentField: "parentId",
+    lazy: true,
+    hasChildField: "hasChildren",
+    loadMethod({ row }) {
+        return getChildrenList(row.id);
+    },
+});
+
+const rowDragConfig = reactive<VxeTablePropTypes.RowDragConfig<RowData>>({
+    isToChildDrag: true,
+    isCrossDrag: true,
+
+    // isSelfToChildDrag: true,
+    async dragEndMethod(data) {
+        const command: MoveRouteCommand = {
+            id: data.dragRow.id,
+            dataVersion: data.dragRow.dataVersion,
+            releaseSource: data.dragRow.releaseSource,
+            sourceId: data.dragRow.sourceId,
+        };
+        // 判断是否是子级拖动
+        if(data.dragToChild){
+            //判断父节点类型是否是目录如果不是则不可拖动
+            if(data.newRow.routeType!=='DIRECTORY'){
+                ElMessage.warning("目标路由类型错误，必须是菜单类型。")
+                return false;
+            }
+            //如果是子级拖动不用添加placeAfter
+            command.parent = {
+                id: data.newRow.id,
+                sourceId: data.newRow.sourceId,
+                releaseSource: data.newRow.releaseSource,
+                name: data.newRow.name,
+                appName: data.newRow.appName,
+            };
+        }else{
+            //获取父级数据
+            const parent = await tableRef.value?.getTreeParentRow(data.newRow);
+            //判断是否有父级  没有父级说明是根节点则不传
+            if (parent) {
+                command.parent = {
+                    id: parent.id,
+                    sourceId: parent.sourceId,
+                    releaseSource: parent.releaseSource,
+                    name: parent.name,
+                    appName: parent.appName,
+                };
+            }
+            //如果没有父级则是根节点
+            const rows: RowData[] = parent?.children || routes.value;
+            let afterNode: RowData | undefined;
+
+            //根据 data.dragPos 判断是放在哪
+
+            if (data.dragPos === "top") {
+                //需要找到新位置之前的节点
+                console.log('top--------------',data)
+                rows.forEach((item, index) => {
+                    if (item.id === data.newRow.id) {
+
+                        console.log('top--------------prev',item,index)
+                        //如果索引是第一个则不需要处理
+                        if (index === 0) return;
+                        afterNode = rows[index - 1];
+                        console.log('top--------------afterNode',afterNode)
+                    }
+                });
+            } else {
+                afterNode = data.newRow;
+            }
+
+            if (afterNode) {
+                command.placeAfter = {
+                    id: afterNode.id,
+                    sourceId: afterNode.sourceId,
+                    releaseSource: afterNode.releaseSource,
+                    name: afterNode.name,
+                    appName: afterNode.appName,
+                };
+            }
+        }
+        try {
+            await move(command);
+            return true;
+        } catch (e) {
+            return false;
+        }
+
+        //找到最新定位节点的位置
+    },
+});
+
+const getList = async () => {
+    if (!props.appId) return;
+    appName.value = (await getAppById(props.appId)).name;
+    routes.value = await getRoots(appName.value);
+};
+
+const createRoute = () => {
+    let maxOrder = 1;
+    routes.value.forEach((item) => {
+        if (item.order > maxOrder) {
+            maxOrder = item.order;
+        }
+    });
+    editor.order = maxOrder + 10;
+    editor.visible = true;
+};
+
+const getChildrenList = (parentId: string) => {
+    return new Promise<AppRouteBase[]>((resolve) => {
+        getChildren(parentId)
+            .then((data) => {
+                resolve(data);
+            })
+            .catch((error) => {
+                console.log(error);
+                resolve([]);
+            });
+    });
+};
+
+const createChildRoute = (row: RowData) => {
+    //首先获取兄弟节点的数据
+    // reloadTreeExpand
+    tableRef.value?.setTreeExpand(row, true).then(() => {
+        let maxOrder = 1;
+        row.children?.forEach((child) => {
+            if (child.order > maxOrder) {
+                maxOrder = child.order;
+            }
+        });
+        const { id, sourceId, releaseSource, name, appName } = row;
+        editor.mode = "createChildren";
+        editor.addTo = { id, sourceId, releaseSource, name, appName };
+        editor.visible = true;
+        editor.order = maxOrder + 10;
+    });
+};
+
+const updateRoute = (row: AppRouteBase) => {
+    editor.mode = "update";
+    editor.id = row.id;
+    editor.visible = true;
+};
+
+const deleteRow = (row: AppRouteBase) => {
+    ElMessageBox.confirm("确定删除指定项？").then(() => {
+        deleteRoute({
+            id: row.id,
+            dataVersion: row.dataVersion,
+            releaseSource: row.releaseSource,
+            sourceId: row.sourceId,
+        }).then(() => {
+            //删除成功后
+            getList();
+        });
+    });
+};
+
+const handleSuccess = () => {
+    getList();
+};
+
+watch(()=>props.appId, getList)
+
+getList();
+</script>
+
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            路由定义
+            <el-tooltip>
+                <el-icon>
+                    <question-filled />
+                </el-icon>
+                <template #content>
+                    定义和管理应用中的路由。<br />
+                    平台将根据定义的路由，生成应用路由和菜单。
+                </template>
+            </el-tooltip>
+        </template>
+        <template #toolbar>
+            <el-space>
+                <ja-button
+                    type="success"
+                    :icon="Plus"
+                    tooltip="新建根路由"
+                    shortcut="Alt+N"
+                    @click="createRoute"
+                >
+                    <!--          @click="createRole(undefined)"-->
+                    新建路由
+                </ja-button>
+                <ja-button
+                    plain
+                    :icon="Refresh"
+                    tooltip="重新加载数据"
+                    shortcut="Alt+R"
+                    @click="getList"
+                    >刷新
+                    <!--          @click="loadRoots"-->
+                </ja-button>
+            </el-space>
+        </template>
+        <template #body>
+            <vxe-table
+                :tree-config="treeConfig"
+                :loading="loading"
+                size="small"
+                :data="routes"
+                height="100%"
+                ref="tableRef"
+                :column-config="{ resizable: true }"
+                :row-config="{ isHover: true, drag: true }"
+                :row-drag-config="rowDragConfig"
+                class="vxe-table--scrollbar"
+            >
+                <vxe-column
+                    fixed="left"
+                    field="title"
+                    title="标题"
+                    tree-node
+                    drag-sort
+                    class-name="app-router_custom-title-cell"
+                    style="background-color: #0c193d"
+                >
+                    <template #header="{ column }">
+                        <div style="display: flex;align-items: center;gap:6px;">
+                            标题
+                            <el-tooltip>
+                                <el-icon>
+                                    <question-filled />
+                                </el-icon>
+                                <template #content>
+                                   ctrl+鼠标左键将行拖拽为目标行的<i><b>子路由</b></i>，目标行类型必须为目录并且必须处于展开过状态(子节点已加载)。
+                                </template>
+                            </el-tooltip>
+                        </div>
+                    </template>
+                    <template #default="{ row }">
+                        <div class="menu-title">
+                            <i :class="row.icon" class="menu-icon"></i>{{ row.title }}
+                        </div>
+                    </template>
+                </vxe-column>
+                <vxe-column field="name" title="路由名称"></vxe-column>
+                <vxe-column field="path" title="路径">
+                    <template #default="{ row }">
+                       {{row.path}}
+                    </template>
+                </vxe-column>
+                <vxe-column field="description" title="路由类型">
+                    <template #default="{ row }">
+                        <el-tag v-if="row.routeType === 'DIRECTORY'" type="primary">目录</el-tag>
+                        <el-tag v-if="row.routeType === 'MENU'" type="success">菜单</el-tag>
+                        <el-tag v-if="row.routeType === 'IFRAME'" type="info">内嵌</el-tag>
+                        <el-tag v-if="row.routeType === 'LINK'" type="warning">外链</el-tag>
+                    </template>
+                </vxe-column>
+                <vxe-column title="操作" fixed="right" width="360px">
+                    <template #default="{ row }">
+                        <el-button link type="warning" :icon="Edit" @click="updateRoute(row)">
+                            编辑
+                        </el-button>
+                        <el-button v-if="row.routeType === 'DIRECTORY'" link type="success" :icon="Plus" @click="createChildRoute(row)">
+                            新建子路由
+                        </el-button>
+                        <!--            <el-button link type="primary"-->
+                        <!--                       @click="editCompositeRoles(row)">复合角色-->
+                        <!--            </el-button>-->
+
+                        <el-button link type="danger" :icon="Delete" @click="deleteRow(row)">
+                            删除
+                        </el-button>
+                    </template>
+                </vxe-column>
+                <template #empty>
+                    <el-empty />
+                </template>
+            </vxe-table>
+        </template>
+    </app-manage-layout>
+    <Editor
+        :mode="editor.mode"
+        v-model="editor.visible"
+        :appName="appName!"
+        :id="editor.id"
+        :addTo="editor.addTo"
+        :order="editor.order"
+        @success="handleSuccess"
+    />
+</template>
+
+<style>
+.app-router_custom-title-cell {
+    display: flex;
+    .vxe-tree-cell {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
+</style>
+<style scoped lang="scss">
+.menu-title {
+    display: flex;
+    align-items: center;
+
+    //justify-content: center;
+}
+
+.menu-icon {
+    font-size: 18px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+}
+</style>