ace-front-end 1.0.0

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useLoading, createAxiosWithoutCache, useFlowDefinitionApi, type ProjectedFlowDefinitionDto, type CreateFlowDefinitionCommand, type WorkNoResetStyle } from '@jari-ace/app-bolts'
+import { JaButton, JaForm, useBackendValidations } from '@jari-ace/element-plus-component'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps<{
+    appName: string
+}>();
+
+const visible = defineModel<boolean>({
+    default: false
+});
+
+const axios = createAxiosWithoutCache();
+const api = useFlowDefinitionApi(axios);
+const loading = useLoading(axios);
+const form = ref<InstanceType<typeof JaForm>>();
+const emit = defineEmits(["success"]);
+
+// 可用标签选项，从API获取
+const availableTags = ref<string[]>([]);
+
+// 标签加载状态
+const tagLoading = ref<boolean>(false);
+
+const state = ref({
+    formData: newFlowDefinition()
+});
+
+// 初始化流程定义表单数据
+function newFlowDefinition(): CreateFlowDefinitionCommand {
+    return {
+        /**
+         * 流程唯一标识
+         */
+        flowKey: "",
+        /**
+         * 流程标题
+         */
+        flowCaption: "",
+        /**
+         * 流程所属应用
+         */
+        appName: props.appName,
+        /**
+         * 排序索引
+         */
+        sortIndex: 0,
+        /**
+         * 业务标签
+         */
+        bizTags: [],
+        /**
+         * 工作文号生成编码规则
+         */
+        workNoTemplate: "#flow + '-' + #year + '-' + #sn",
+        /**
+         * 工作文号流水重置方式
+         */
+        workNoResetStyle: 'BY_YEAR',
+        /**
+         * 工作文号流水号位数
+         */
+        workNoSnSize: 5,
+        /**
+         * 表单页面路径
+         */
+        formPagePath: "",
+        /**
+         * 监控角色名
+         */
+        roleAdmin: "",
+        /**
+         * 查询角色名
+         */
+        roleQuery: ""
+    };
+}
+
+// 表单验证器
+const validator = useBackendValidations(Object.keys(newFlowDefinition()), axios);
+
+// 获取所有可用标签
+async function fetchAvailableTags() {
+    tagLoading.value = true;
+    try {
+        availableTags.value = await api.getTags(props.appName);
+    } catch (error: any) {
+        ElMessage.error(error.message || "获取标签失败");
+    } finally {
+        tagLoading.value = false;
+    }
+}
+
+// 打开抽屉时初始化数据
+async function onOpen() {
+    state.value.formData = newFlowDefinition();
+    // 获取所有可用标签
+    await fetchAvailableTags();
+}
+
+// 提交表单
+async function submit() {
+    form.value?.validate(async () => {
+        // 调用创建API
+        await api.create(state.value.formData);
+        visible.value = false;
+        emit('success');
+    });
+}
+</script>
+
+<template>
+    <el-drawer append-to-body v-model="visible" @open="onOpen" destroy-on-close title="创建流程定义" size="600px">
+        <ja-form :model="state" :validator="validator" ref="form">
+            <ja-form-item label="流程名称" prop="flowCaption" required>
+                <ja-input placeholder="输入流程名称"></ja-input>
+            </ja-form-item>
+            <ja-form-item label="流程标识" prop="flowKey" required>
+                <ja-input v-model="state.formData.flowKey" placeholder="输入流程标识"></ja-input>
+            </ja-form-item>
+            <ja-form-item label="表单页面路径" prop="formPagePath" required>
+                <ja-input v-model="state.formData.formPagePath" placeholder="输入表单页面路径"></ja-input>
+            </ja-form-item>
+            <ja-form-item label="文号模板" prop="workNoTemplate" required>
+                <ja-input v-model="state.formData.workNoTemplate" placeholder="输入工作文号模板，如：NO-#year-#sn"></ja-input>
+            </ja-form-item>
+            <ja-form-item label="文号重置方式" prop="workNoResetStyle" required>
+                <el-select v-model="state.formData.workNoResetStyle" placeholder="选择文号重置方式">
+                    <el-option label="永不重置" value="NEVER"></el-option>
+                    <el-option label="按年重置" value="BY_YEAR"></el-option>
+                    <el-option label="按季度重置" value="BY_SEASON"></el-option>
+                    <el-option label="按月重置" value="BY_MONTH"></el-option>
+                    <el-option label="按周重置" value="BY_WEEK"></el-option>
+                    <el-option label="按天重置" value="BY_DAY"></el-option>
+                </el-select>
+            </ja-form-item>
+            <ja-form-item label="流水号位数" prop="workNoSnSize" required>
+                <ja-input-number v-model="state.formData.workNoSnSize" :min="1" placeholder="输入流水号位数"></ja-input-number>
+            </ja-form-item>
+            <ja-form-item label="排序索引" prop="sortIndex" required>
+                <ja-input-number :min="0" placeholder="输入排序索引"></ja-input-number>
+            </ja-form-item>
+            <ja-form-item label="业务标签" prop="bizTags">
+                <ja-select multiple placeholder="选择或输入业务标签" filterable allow-create style="width: 100%"
+                    :loading="tagLoading">
+                    <el-option v-for="tag in availableTags" :key="tag" :label="tag" :value="tag"></el-option>
+                </ja-select>
+            </ja-form-item>
+            <ja-form-item label="监控角色名" prop="roleAdmin">
+                <ja-role-picker :app-name="props.appName"></ja-role-picker>
+            </ja-form-item>
+            <ja-form-item label="查询角色名" prop="roleQuery">
+                <ja-role-picker :app-name="props.appName"></ja-role-picker>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button type="primary" @click="submit" :loading="loading" shortcut="Ctrl+Enter">
+                创建
+            </ja-button>
+            <el-button @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/views/appManage/processDefinition/ProcessDefinition.vue

@@ -0,0 +1,362 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            流程定义
+            <el-tooltip>
+                <template #content>
+                    管理应用的流程定义，支持创建、编辑、签出、签入和删除操作。
+                </template>
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <div style="flex:1; display: flex; flex-direction: row-reverse; gap: 8px;
+                     width: 100%">
+                <ja-button type="info" :icon="Refresh" plain @click="loadData" :loading="loading" tooltip="重新加载数据"
+                    shortcut="Alt+R">
+                    刷新
+                </ja-button>
+                <ja-button type="success" :icon="Plus" :loading="loading" @click="onCreateNewClick" tooltip="新建流程定义"
+                    shortcut="Alt+N">新建
+                </ja-button>
+            </div>
+        </template>
+        <template #body>
+            <div style="height:100%; display: flex; flex-direction: column; padding: 8px; gap: 8px;">
+                <!-- 搜索区域 -->
+                <div style=" padding:  16px 16px 16px 8px; background: #f5f7fa; border-radius: 8px;">
+                    <el-form :inline="true" :model="searchForm" label-width="80px">
+                        <el-form-item label="流程名称">
+                            <el-input v-model="searchForm.flowCaption" placeholder="输入流程名称" clearable
+                                style="width: 200px;"></el-input>
+                        </el-form-item>
+                        <el-form-item label="流程标识">
+                            <el-input v-model="searchForm.flowKey" placeholder="输入流程标识" clearable
+                                style="width: 200px;"></el-input>
+                        </el-form-item>
+                        <el-form-item label="业务标签">
+                            <el-select v-model="searchForm.bizTags" placeholder="选择业务标签" clearable filterable
+                                style="width: 200px;" :loading="loading" multiple>
+                                <el-option v-for="tag in availableTags" :key="tag" :label="tag" :value="tag">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" :icon="Search" @click="onSearch">搜索</el-button>
+                            <el-button @click="resetSearch">重置</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+
+                <!-- 流程定义列表 -->
+                <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="flowDefinitions" class="vxe-table--scrollbar">
+                        <vxe-column field="flowCaption" title="流程名称" show-overflow width="200px" show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="flowKey" title="流程标识" show-overflow width="200px" show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="flowVersion" title="版本号" show-overflow width="100px" show-header-overflow>
+                            <template #default="{ row }">v{{ row.flowVersion }}</template>
+                        </vxe-column>
+                        <vxe-column title="状态" show-overflow width="100px" show-header-overflow>
+                            <template #default="{ row }">
+                                <el-tag v-if="row.published" type="success">已发布</el-tag>
+                                <el-tag v-else type="primary">已签出</el-tag>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="goLiveTime" title="启用时间" show-overflow width="180px" show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="createTime" title="创建时间" show-overflow width="180px" show-header-overflow>
+                        </vxe-column>
+                        <vxe-column field="publishTime" title="发布时间" show-overflow width="180px" show-header-overflow>
+                        </vxe-column>
+                        <vxe-column title="操作" fixed="right" show-overflow show-header-overflow>
+                            <template #default="{ row }">
+                                <el-button link type="primary" :icon="Edit" v-if="!row.published"
+                                    @click="onEditClick(row)">编辑
+                                </el-button>
+                                <el-button link type="warning" :icon="Check" @click="onCheckoutClick(row)"
+                                    v-if="row.published">签出
+                                </el-button>
+                                <el-button link type="success" :icon="Check" @click="onCheckinClick(row)"
+                                    v-if="!row.published">签入
+                                </el-button>
+                                <el-button link type="info" :icon="Close" @click="onCancelCheckoutClick(row)"
+                                    v-if="!row.published">取消签出
+                                </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>
+    <editor :app-name="appName" v-model="editorVisible" :mode="editMode" :definition="editingDefinition"
+        @success="loadData"></editor>
+
+    <!-- 签入对话框 -->
+    <el-dialog v-model="checkinDialogVisible" title="签入流程定义" width="500px">
+        <el-form :model="checkinForm" label-width="120px" label-position="top" size="small" ref="checkinFormRef"
+            :rules="checkinRules" inline-message>
+            <el-form-item label="流程标识" prop="flowKey">
+                <el-input v-model="checkinForm.flowKey" placeholder="输入流程标识" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="启用时间" prop="goLiveTime" required>
+                <el-date-picker v-model="checkinForm.goLiveTime" type="datetime" placeholder="选择启用时间"
+                    style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="是否发布到生产环境" prop="publishToProduction">
+                <el-switch v-model="checkinForm.publishToProduction"></el-switch>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="submitCheckinForm">
+                    确认签入
+                </el-button>
+                <el-button @click="checkinDialogVisible = false">取消</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useAppInstances } from "@jari-ace/element-plus-component";
+import { ElIcon, ElMessageBox, ElMessage, ElForm } from "element-plus";
+import { Delete, Edit, Plus, QuestionFilled, Refresh, Check, Search, Close } from "@element-plus/icons-vue";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import { useLoading, useFlowDefinitionApi, type ProjectedFlowDefinitionDto, type SearchFlowDefinitionDto, createAxiosWithoutCache } from "@jari-ace/app-bolts";
+import { VxeColumn, VxeTable } from "vxe-table";
+import { pageSizes } from "@/hooks/usePageSize";
+import Editor from "./Editor.vue";
+
+const props = defineProps<{
+    appId: string
+}>();
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useFlowDefinitionApi();
+const flowDefinitions = ref<ProjectedFlowDefinitionDto[]>();
+const apps = useAppInstances();
+const appName = ref<string>("");
+const page = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+const editingDefinition = ref<ProjectedFlowDefinitionDto>();
+const editorVisible = ref(false);
+const editMode = ref<'create' | 'update'>('create');
+const tableRef = ref<InstanceType<typeof VxeTable>>();
+
+// 业务标签相关
+const availableTags = ref<string[]>([]);
+
+// 搜索表单
+const searchForm = ref<SearchFlowDefinitionDto>({
+    flowKey: "",
+    flowCaption: "",
+    appName: "",
+    bizTags: []
+});
+
+// 加载业务标签
+async function loadTags() {
+    if (!appName.value) return;
+    try {
+        availableTags.value = await api.getTags(appName.value);
+    } catch (error) {
+        console.error("Failed to load tags:", error);
+    }
+}
+
+// 加载数据
+async function loadData() {
+    try {
+        appName.value = (
+            await apps.getById(props.appId)
+        ).name;
+
+        // 更新搜索条件中的应用名
+        searchForm.value.appName = appName.value;
+
+        // 加载业务标签
+        await loadTags();
+
+        // 调用搜索接口
+        const res = await api.searchFlowDefinitions(
+            searchForm.value,
+            page.value - 1,
+            pageSize.value
+        );
+
+        flowDefinitions.value = res.content;
+        total.value = res.totalElements;
+    } catch (error) {
+        ElMessage.error("加载流程定义失败，请重试");
+        console.error("Failed to load flow definitions:", error);
+    }
+}
+
+// 搜索操作
+async function onSearch() {
+    page.value = 1;
+    await loadData();
+}
+
+// 重置搜索
+function resetSearch() {
+    searchForm.value = {
+        flowKey: "",
+        flowCaption: "",
+        appName: appName.value,
+        bizTags: []
+    };
+    onSearch();
+}
+
+// 创建新流程定义
+function onCreateNewClick() {
+    editingDefinition.value = undefined;
+    editMode.value = 'create';
+    editorVisible.value = true;
+}
+
+// 编辑流程定义
+function onEditClick(row: ProjectedFlowDefinitionDto) {
+    editingDefinition.value = row;
+    editMode.value = 'update';
+    editorVisible.value = true;
+}
+
+// 签出流程定义
+async function onCheckoutClick(row: ProjectedFlowDefinitionDto) {
+    if (!row.flowKey) {
+        ElMessage.error("流程标识不能为空");
+        return;
+    }
+    await ElMessageBox.confirm(`确定要签出流程定义 "${row.flowCaption}" 吗？签出后将创建流程定义的新版本，并将其置于可编辑状态。`, '确认签出');
+    await api.checkOut({
+        appName: appName.value,
+        flowKey: row.flowKey
+    });
+    await loadData();
+}
+
+// 签入对话框相关状态
+const checkinDialogVisible = ref<boolean>(false);
+const checkinFormRef = ref<InstanceType<typeof ElForm>>();
+const checkinForm = ref<{
+    flowKey: string;
+    publishToProduction: boolean;
+    goLiveTime: string;
+}>({
+    flowKey: '',
+    publishToProduction: false,
+    goLiveTime: ''
+});
+// 签入表单验证规则
+const checkinRules = ref({
+    goLiveTime: [
+        { required: true, message: '启用时间不能为空', trigger: 'change' }
+    ]
+});
+const checkingRow = ref<ProjectedFlowDefinitionDto | null>(null);
+
+// 签入流程定义
+async function onCheckinClick(row: ProjectedFlowDefinitionDto) {
+    if (!row.flowKey) {
+        ElMessage.error("流程标识不能为空");
+        return;
+    }
+    // 设置当前签入的行数据
+    checkingRow.value = row;
+    // 初始化签入表单数据
+    checkinForm.value = {
+        flowKey: row.flowKey,
+        publishToProduction: false,
+        goLiveTime: ""
+    };
+    // 显示签入对话框
+    checkinDialogVisible.value = true;
+}
+
+// 提交签入表单
+async function submitCheckinForm() {
+    if (!checkingRow.value || !checkinForm.value.flowKey) {
+        ElMessage.error("流程标识不能为空");
+        return;
+    }
+
+    // 表单验证
+    if (!checkinFormRef.value) return;
+    const valid = await checkinFormRef.value.validate();
+    if (!valid) {
+        return;
+    }
+
+    await api.checkIn({
+        appName: appName.value,
+        flowKey: checkinForm.value.flowKey,
+        publishToProduction: checkinForm.value.publishToProduction,
+        goLiveTime: checkinForm.value.goLiveTime
+    });
+    checkinDialogVisible.value = false;
+    await loadData();
+}
+
+// 取消签出流程定义
+async function onCancelCheckoutClick(row: ProjectedFlowDefinitionDto) {
+    if (!row.flowKey) {
+        ElMessage.error("流程标识不能为空");
+        return;
+    }
+    await ElMessageBox.confirm(`确定要取消签出流程定义 "${row.flowCaption}" 吗？取消签出后将放弃当前版本的所有修改。`, '确认取消签出');
+    await api.cancelCheckout({
+        appName: appName.value,
+        flowKey: row.flowKey
+    });
+    await loadData();
+}
+
+// 删除流程定义
+async function onDeleteClick(row: ProjectedFlowDefinitionDto) {
+    if (!row.flowKey) {
+        ElMessage.error("流程标识不能为空");
+        return;
+    }
+    await ElMessageBox.confirm(`确定要删除流程定义 "${row.flowCaption}" 吗？`, '确认删除', {
+        type: 'warning'
+    });
+    await api.delete({
+        appName: appName.value,
+        flowKey: row.flowKey
+    });
+    await loadData();
+}
+
+// 监听appId变化，重新加载数据
+watch(() => props.appId, loadData);
+
+// 初始化加载数据
+loadData();
+</script>
+
+<style scoped>
+:deep(.vxe-table--border-line) {
+    border-left: 0 none !important;
+    border-right: 0 none !important;
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/queryDefine/Index.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+
+import {QuestionFilled} from "@element-plus/icons-vue"
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue"
+import ServiceSelector from "@/views/appManage/components/ServiceSelector.vue"
+import {
+    type AppService, type QueryDefinition,
+} from "@jari-ace/app-bolts"
+import {ref} from "vue"
+import LeftPanel from "@/views/appManage/queryDefine/components/LeftPanel.vue"
+import RightPanel from "@/views/appManage/queryDefine/components/RightPanel.vue"
+
+const props = defineProps<{
+    appId: string
+}>()
+const currentService = ref<AppService>()
+const currentQuery = ref<QueryDefinition>()
+const rightPanelRef = ref<InstanceType<typeof RightPanel>>()
+
+</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"
+                                  style="width: 230px"></service-selector>
+            </el-tooltip>
+        </template>
+        <template #body>
+            <div class="entity-page-body">
+                <left-panel :service="currentService" v-model="currentQuery"></left-panel>
+                <right-panel :current-query="currentQuery" ref="rightPanelRef"></right-panel>
+            </div>
+        </template>
+    </app-manage-layout>
+</template>
+
+<style scoped lang="scss">
+.entity-page-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+</style>