ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/globalManage/departmentManage/components/Editor.vue

@@ -0,0 +1,164 @@
+<template>
+    <el-drawer
+        width="360"
+        class="xxx-editor-sfc"
+        :title="state.title"
+        v-model="visible"
+        @opened="init"
+        :destroy-on-close="true"
+        @close="onClosing">
+        <el-scrollbar>
+            <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="shortCode">
+                    <ja-input/>
+                </ja-form-item>
+                <ja-form-item label="是否实体部门" prop="entity">
+                    <ja-checkbox> 实体部门</ja-checkbox>
+                </ja-form-item>
+
+            </ja-form>
+            <extended-attr-render :attr-defs="state.attrDefs"
+                                  v-model="state.formData.attributes as Record<string,never>"/>
+        </el-scrollbar>
+        <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>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {
+    type ProjectedDepartment,
+    useDepartmentApi,
+    type CreateDepartmentCommand,
+    type UpdateDepartmentCommand,
+    useLoading,
+    type AceAxiosRequestConfig,
+    useDepartmentAttrDefApi,
+    type DepartmentAttributeDef,
+} from "@jari-ace/app-bolts";
+import {useBackendValidations} from "@jari-ace/element-plus-component";
+import ExtendedAttrRender from "../../components/ExtendedAttrRender.vue";
+import {JaForm, JaFormItem, JaInput, JaCheckbox, JaButton} from "@jari-ace/element-plus-component";
+
+type editorType = "create" | "update" | "subCreate";
+
+type Props = {
+    modelValue: boolean;
+    type: editorType;
+    realmId: string;
+    data: ProjectedDepartment | null;
+};
+const formRef = ref<typeof JaForm>();
+const props = defineProps<Props>();
+const emits = defineEmits(["update:modelValue", "success"]);
+const initData: CreateDepartmentCommand | UpdateDepartmentCommand = {
+    name: "",
+    shortCode: "",
+    entity: false,
+    attributes: {}
+} as CreateDepartmentCommand;
+const validator = useBackendValidations(Object.keys(initData))
+const departmentApi = useDepartmentApi(validator.axios);
+const attrDefApi = useDepartmentAttrDefApi(validator.axios);
+const loading = useLoading(validator.axios)
+const state = reactive<{
+    formData: CreateDepartmentCommand | UpdateDepartmentCommand;
+    title: string;
+    attrDefs?: DepartmentAttributeDef[]
+}>({
+    formData: {...initData},
+    title: "",
+});
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+let requestConfig: AceAxiosRequestConfig
+const submit = () => {
+    requestConfig = {}
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        formRef.value?.validate(() => departmentApi
+            .update(state.formData as UpdateDepartmentCommand, requestConfig)
+            .then(() => {
+                emits("success");
+                visible.value = false;
+            }));
+    } else {
+        let tempFormData: CreateDepartmentCommand;
+        if (props.type === "create") {
+            tempFormData = {
+                ...state.formData,
+                realmId: props.realmId,
+            };
+            //创建根节点不能有父级节点ID
+            delete tempFormData.parentId;
+        } else {
+            tempFormData = {
+                ...state.formData,
+                realmId: props.realmId,
+                parentId: props.data?.id,
+            };
+        }
+        formRef.value?.validate(() => departmentApi
+            .create(tempFormData, requestConfig)
+            .then(() => {
+                emits("success");
+                visible.value = false;
+            }));
+    }
+};
+
+const init = () => {
+    //获取部门扩展属性
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        if (!props.data) {
+            throw new Error("未传入参数【data】");
+        }
+        //更新模式需要将数据回显
+        state.title = "修改部门";
+        state.formData = {
+            ...props.data,
+            realmId: props.realmId,
+            entity: (
+                props.data.entity ?? false
+            ),
+            attributes: props.data.attributes ?? {},
+        };
+    } else {
+        if (props.type === "create") {
+            state.title = "创建部门";
+        } else {
+            if (!props.data) {
+                throw new Error("未传入参数【data】");
+            }
+            state.title = `创建[${props.data.name}]下级部门`;
+        }
+        //创建模式重置表单
+        state.formData = {...initData};
+    }
+    attrDefApi.getAll().then(res => state.attrDefs = res);
+};
+
+function onClosing() {
+    validator.axios.cancel(requestConfig)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/views/globalManage/eventCompensate/Index.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import {Delete, Edit, Key, Plus, Refresh, RefreshRight} from "@element-plus/icons-vue";
+import {pageSizes} from "@/hooks/usePageSize";
+import {
+    type AppInstance,
+    type AppService,
+    type ProjectedDomainProcessFailedBatch,
+    createAxiosWithoutCache,
+    useAppApi,
+    useAppServiceApi, useEventCompensationApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps<{
+    realmId: string;
+}>()
+
+const axios = createAxiosWithoutCache()
+const loading = useLoading()
+const serviceApi = useAppServiceApi(axios)
+const appApi = useAppApi(axios)
+const apps = ref<AppInstance[]>()
+const services = ref<AppService[]>()
+const selectedApp = ref<AppInstance>()
+const api = useEventCompensationApi(axios)
+const failedEvents = ref<ProjectedDomainProcessFailedBatch[]>()
+const selectedService = ref<AppService>()
+const page = ref(1)
+const pageSize = ref(50)
+const total = ref(0)
+
+async function loadApps() {
+    apps.value = await appApi.getAll(true)
+}
+
+async function loadData() {
+    if (selectedService.value) {
+        const p = await api.getFailedBatches(selectedService.value.name,
+            page.value - 1, pageSize.value)
+        failedEvents.value = p.content
+        total.value = p.totalElements
+    } else {
+        failedEvents.value = []
+    }
+}
+
+watch(selectedApp, async () => {
+    if (selectedApp.value) {
+        services.value = await serviceApi.getByApp(selectedApp.value.id)
+    } else {
+        services.value = []
+    }
+})
+
+watch(selectedService, loadData)
+
+onMounted(() => loadApps())
+
+async function compensate(batch: ProjectedDomainProcessFailedBatch) {
+    if (!selectedService.value) return
+    await api.retryHandle(selectedService.value.name, batch.id)
+    loadData()
+}
+
+async function deleteBatch(batch: ProjectedDomainProcessFailedBatch) {
+    if (!selectedService.value) return
+    await api.deleteEventBatch(selectedService.value.name, batch.id)
+    loadData()
+}
+</script>
+
+<template>
+    <div class="event-compensate-page" id="ext-app-page-root">
+        <manage-header>
+            <template #title>事件补偿</template>
+            <template #tools>
+                <el-space>
+                    <el-select v-model="selectedApp" style="width: 180px" value-key="id"
+                               placeholder="请选择应用">
+                        <el-option v-for="a in apps" :key="a.id" :value="a" :label="a.caption"/>
+                    </el-select>
+                    <el-select v-model="selectedService" value-key="id" style="width:180px"
+                               placeholder="请选择服务">
+                        <el-option v-for="a in services" :key="a.id" :value="a" :label="a.name"/>
+                    </el-select>
+                    <ja-button
+                        :icon="Refresh"
+                        plain
+                        @click="loadData"
+                        :loading="loading"
+                        tooltip="重新加载数据"
+                        shortcut="Alt+R">刷新
+                    </ja-button>
+                </el-space>
+            </template>
+        </manage-header>
+        <div class="event-compensate__body">
+            <div class="user-list">
+                <vxe-table
+                    :loading="loading"
+                    size="small"
+                    stripe
+                    height="100%"
+                    ref="tableRef"
+                    :column-config="{resizable: true}"
+                    :row-config="{ isHover: true }"
+                    :checkbox-config="{range: true, checkField: 'isChecked'}"
+                    :data="failedEvents"
+                    class="vxe-table--scrollbar">
+                    <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                    <vxe-column fixed="left" field="id" title="处理批次ID"
+                                width="240px">
+                        <template #default="{ row }">
+                            {{
+                                (
+                                    row.id as string
+                                ).substring(0, 6)
+                            }}
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="eventType" title="事件类型" width="240"></vxe-column>
+                    <vxe-column field="processorName" title="处理器" width="120px">
+                    </vxe-column>
+                    <vxe-column field="errorMessage" title="异常信息"></vxe-column>
+                    <vxe-column title="操作" fixed="right" width="280px">
+                        <template #default="{ row }">
+                            <!-- row.disabled -->
+                            <el-button link type="warning" :icon="RefreshRight"
+                                       @click="compensate(row)"
+                            >执行补偿
+                            </el-button>
+                            <el-button link type="danger" :icon="Delete"
+                                       @click="deleteBatch(row)">删除
+                            </el-button>
+                        </template>
+                    </vxe-column>
+                    <template #empty>
+                        <el-empty/>
+                    </template>
+                </vxe-table>
+            </div>
+            <div class="table-tools">
+                <el-pagination
+                    background
+                    :page-sizes="pageSizes"
+                    @current-change="loadData"
+                    @size-change="loadData"
+                    layout="total, sizes, prev, pager, next"
+                    v-model:page-size="pageSize"
+                    v-model:current-page="page"
+                    :total="total"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.event-compensate-page {
+    height: 100%;
+
+    .event-compensate__body {
+        height: calc(100% - 56px);
+        display: flex;
+        flex-direction: column;
+
+        .user-list {
+            float: left;
+            width: 100%;
+            height: calc(100% - 56px);
+            overflow-y: hidden;
+        }
+
+        .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/globalManage/externalAppManage/ExternalAppManage.vue

@@ -0,0 +1,305 @@
+<template>
+    <div class="external-app-page" id="ext-app-page-root">
+        <manage-header>
+            <template #title>外部应用管理</template>
+            <template #tools>
+                <el-space>
+                    <ja-button type="success"
+                               :icon="Plus"
+                               tooltip="创建外部应用"
+                               @click="createApp"
+                               shortcut="Alt+N">新建
+                    </ja-button>
+                    <ja-button type="danger"
+                               :icon="Delete"
+                               tooltip="删除选中的外部应用"
+                               @click="deleteApp"
+                               shortcut="Alt+D">删除
+                    </ja-button>
+                    <ja-button
+                        :icon="Refresh"
+                        plain
+                        @click="refreshData"
+                        :loading="loading"
+                        tooltip="重新加载数据"
+                        shortcut="Alt+R">刷新
+                    </ja-button>
+                </el-space>
+            </template>
+        </manage-header>
+        <div class="external-app-page__body">
+            <div class="user-list">
+                <vxe-table
+                    :loading="loading"
+                    size="small"
+                    stripe
+                    height="100%"
+                    ref="tableRef"
+                    :column-config="{resizable: true}"
+                    :row-config="{ isHover: true }"
+                    :sort-config="sortConfig"
+                    :checkbox-config="{range: true, checkField: 'isChecked'}"
+                    :data="state.apps"
+                    class="vxe-table--scrollbar"
+                    @sort-change="onSort"
+                    @checkbox-all="selectAllChangeEvent"
+                    @checkbox-change="selectChangeEvent">
+                    <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                    <vxe-column fixed="left" type="checkbox" width="40"></vxe-column>
+                    <vxe-column fixed="left" field="name" title="应用标识" sortable
+                                width="240px"></vxe-column>
+                    <vxe-column field="caption" title="应用名称" sortable width="240"></vxe-column>
+                    <vxe-column field="enabled" title="是否启用" sortable width="120px">
+                        <template #default="{ row }">
+                            <!-- row.disabled -->
+                            <el-tag v-if="!row.enabled" type="danger" effect="light">已禁用
+                            </el-tag>
+                            <el-tag v-else type="success" effect="light">已启用</el-tag>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="rootUrl" title="应用根路径" sortable></vxe-column>
+                    <vxe-column title="操作" fixed="right" width="280px">
+                        <template #default="{ row }">
+                            <!-- row.disabled -->
+                            <el-button link type="warning" :icon="Edit" @click="updateApp(row)"
+                            >编辑
+                            </el-button>
+                            <el-button link type="primary" :icon="Key"
+                                       @click="openRenewSecretDialog(row)">访问密码
+                            </el-button>
+                            <el-button link type="danger" :icon="Delete"
+                                       @click="deleteApp(null,row)">删除
+                            </el-button>
+                        </template>
+                    </vxe-column>
+                    <template #empty>
+                        <el-empty/>
+                    </template>
+                </vxe-table>
+            </div>
+            <div class="table-tools">
+                <el-pagination
+                    background
+                    :page-sizes="pageSizes"
+                    @current-change="loadData()"
+                    @size-change="refreshData()"
+                    layout="total, sizes, prev, pager, next"
+                    v-model:page-size="state.pageSize"
+                    v-model:current-page="state.currentPage"
+                    :total="state.total"/>
+            </div>
+            <editor :realm-id="props.realmId"
+                    v-model="state.editorVisible"
+                    :data="state.editorData"
+                    :type="state.editorType"
+                    @success="editorSuccess"/>
+            <renew-secret ref="dlgRenewSecret" :app-id="currentApp?.id"/>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {Delete, Edit, Key, Plus, Refresh} from "@element-plus/icons-vue";
+import {JaButton} from "@jari-ace/element-plus-component";
+import ManageHeader from "@/components/header/ManageHeader.vue";
+import {VxeColumn, VxeTable, type VxeTableEvents, type VxeTablePropTypes} from "vxe-table";
+import {
+    type DeleteExternalAppCommand,
+    type ProjectedExternalApp,
+    type SortDescriptor,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {computed, reactive, ref, watch} from "vue";
+import {useExternalAppApi} from "@jari-ace/app-bolts";
+import Editor from './components/Editor.vue'
+import RenewSecret from "./components/RenewSecret.vue";
+import {pageSizes} from "@/hooks/usePageSize";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+let currentSort: SortDescriptor | null = null;
+const dlgRenewSecret = ref<typeof RenewSecret>();
+const loading = useLoading();
+type Checkable = { isChecked: boolean }
+type CheckableExtApp = ProjectedExternalApp & Checkable;
+const currentApp = ref<CheckableExtApp | null>(null);
+const state = reactive<{
+    editorVisible: boolean;
+    editorType: "create" | "update";
+    editorData: CheckableExtApp | null;
+    apps: CheckableExtApp[];
+    currentPage: number;
+    total: number;
+    pageSize: number;
+    checkedApps: CheckableExtApp[];
+    nameQuery?: string
+}>({
+    pageSize: 50,
+    currentPage: 1,
+    total: 0,
+    editorType: "create",
+    editorVisible: false,
+    editorData: null,
+    apps: [],
+    checkedApps: [],
+});
+const currentPage = computed(() => {
+    return state.currentPage - 1;
+});
+const api = useExternalAppApi();
+
+function loadData() {
+    let sort = "name,asc";
+    if (currentSort) {
+        sort = currentSort.field + ',' + (currentSort.order || 'asc');
+    }
+    api.getByRealm(props.realmId,
+        currentPage.value,
+        state.pageSize,
+        sort
+    )
+       .then(res => {
+           state.apps = res.content.map(a => {
+               const r = a as CheckableExtApp;
+               r.isChecked = state.checkedApps.some(checked => checked.id === a.id);
+               return r;
+           })
+           state.total = res.totalElements;
+       })
+}
+
+function refreshData() {
+    state.currentPage = 1;
+    state.checkedApps = [];
+    loadData()
+}
+
+function openRenewSecretDialog(app: CheckableExtApp) {
+    currentApp.value = app;
+    dlgRenewSecret.value?.open()
+}
+
+const sortConfig = ref<VxeTablePropTypes.SortConfig<CheckableExtApp>>({
+    remote: true,
+    trigger: 'cell'
+})
+const props = defineProps<{
+    realmId: string;
+}>();
+const selectAllChangeEvent = (data: { checked: boolean }) => {
+    if (data.checked) {
+        state.checkedApps = state.apps;
+    } else {
+        state.checkedApps = [];
+    }
+};
+
+const selectChangeEvent = (data: { checked: boolean; row: CheckableExtApp; rowIndex: number }) => {
+    if (data.checked) {
+        state.checkedApps.push(data.row);
+    } else {
+        state.checkedApps = state.checkedApps.filter((user) => user.id !== data.row.id);
+    }
+};
+
+const onSort: VxeTableEvents.SortChange<CheckableExtApp> = ({sortList}) => {
+    if (sortList && sortList.length > 0) {
+        currentSort = sortList.map((item) => {
+            return {
+                field: (
+                    item.column.sortBy ?? item.field
+                ) as string,
+                order: item.order
+            };
+        })[0];
+    } else {
+        currentSort = null;
+    }
+    refreshData();
+}
+watch(
+    () => props.realmId,
+    () => {
+        refreshData();
+    }
+);
+
+const createApp = () => {
+    state.editorType = "create";
+    state.editorVisible = true;
+};
+
+const updateApp = (data: CheckableExtApp) => {
+    state.editorType = "update";
+    state.editorData = data;
+    state.editorVisible = true;
+};
+
+const deleteApp = (event: Event | null, data?: CheckableExtApp) => {
+    if (!data && state.checkedApps.length === 0) {
+        ElMessage.warning({
+            message: "请先选择要删除的外部应用"
+        })
+        return;
+    }
+    ElMessageBox.confirm(`您确认要删除选中的外部应用吗？`, "删除外部应用", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+                .then(() => {
+                    let commands: DeleteExternalAppCommand[]
+                    if (data) {
+                        commands = [{id: data.id, dataVersion: data.dataVersion}]
+                    } else {
+                        commands = state.checkedApps.map(a => {
+                            return {
+                                id: a.id,
+                                dataVersion: a.dataVersion
+                            }
+                        })
+                    }
+                    api.delete(commands).then(() => {
+                        loadData();
+                    });
+                });
+};
+
+const editorSuccess = () => {
+    loadData();
+};
+
+refreshData()
+</script>
+
+<style scoped>
+.external-app-page {
+    height: 100%;
+
+    .external-app-page__body {
+        height: calc(100% - 56px);
+        display: flex;
+        flex-direction: column;
+
+        .user-list {
+            float: left;
+            width: 100%;
+            height: calc(100% - 56px);
+            overflow-y: hidden;
+        }
+
+        .table-tools {
+            padding: 12px 16px;
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    }
+
+    h3 {
+        margin: 0;
+    }
+}
+
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>