|
| 1 | +<script setup lang="ts"> |
| 2 | +import { computed, onMounted, ref } from 'vue' |
| 3 | +import SystemResourceApplicationApi from '@/api/admin/system/resource-management/application/application' |
| 4 | +import SystemCommonApi from '@/api/admin/system/common' |
| 5 | +import SystemWorkspaceApi from '@/api/admin/system/workspace' |
| 6 | +import SystemResourceTriggerApi from '@/api/admin/system/resource-management/resource-trigger' |
| 7 | +import type { ApplicationDetail, Dict, OptionItem } from '@/api/types' |
| 8 | +import { useStore } from '@/stores' |
| 9 | +import { datetimeFormat } from '@/utils/time' |
| 10 | +import { APPLICATION_TYPE } from '@/api/enums' |
| 11 | +import { isWorkFlow } from '@/utils/application' |
| 12 | +import { |
| 13 | + AuthorizeApplicationAction, |
| 14 | + ExportApplicationAction, |
| 15 | + DeleteApplicationAction, |
| 16 | + TriggerApplicationAction, |
| 17 | +} from '@/views/application/application-card/action-dropdown' |
| 18 | +
|
| 19 | +const { auth } = useStore() |
| 20 | +
|
| 21 | +/* 工具分页与筛选 */ |
| 22 | +const loading = ref(false) |
| 23 | +const operationLoading = ref(false) |
| 24 | +const applicationData = ref<ApplicationDetail[]>([]) |
| 25 | +const pagination = ref({ currentPage: 1, pageSize: 20, total: 0 }) |
| 26 | +const applicationQuery = ref<Dict<unknown>>() |
| 27 | +const creatorOptions = ref<OptionItem<string>[]>([]) |
| 28 | +const workspaceOptions = ref<OptionItem<string>[]>([]) |
| 29 | +const selectedWorkspaceIds = ref<string[]>([]) |
| 30 | +const searchFields = computed(() => [ |
| 31 | + { label: '创建者', value: 'create_user', options: creatorOptions.value, remoteMethod: loadCreatorOptions }, |
| 32 | + { label: '名称', value: 'name' }, |
| 33 | + { |
| 34 | + label: '类型', |
| 35 | + value: 'type', |
| 36 | + options: [ |
| 37 | + { value: APPLICATION_TYPE.WORK_FLOW, label: '高级' }, |
| 38 | + { value: APPLICATION_TYPE.SIMPLE, label: '简易' }, |
| 39 | + ], |
| 40 | + }, |
| 41 | +]) |
| 42 | +const selectedStatusType = ref<string[]>([]) |
| 43 | +const applicationStatusOptions = computed(() => [ |
| 44 | + { value: true, label: '已发布' }, |
| 45 | + { value: false, label: '未发布' }, |
| 46 | +]) |
| 47 | +
|
| 48 | +function loadCreatorOptions(keyword: string) { |
| 49 | + return SystemCommonApi.getAllUsers(keyword ? { nick_name: keyword } : undefined).then((users) => { |
| 50 | + creatorOptions.value = users.map(({ id, nick_name }) => ({ value: id, label: nick_name })) |
| 51 | + }) |
| 52 | +} |
| 53 | +
|
| 54 | +function loadApplicationPage() { |
| 55 | + loading.value = true |
| 56 | + return SystemResourceApplicationApi.getApplicationPage(pagination.value, { |
| 57 | + ...applicationQuery.value, |
| 58 | + ...(selectedWorkspaceIds.value.length ? { workspace_ids: JSON.stringify(selectedWorkspaceIds.value) } : {}), |
| 59 | + ...(selectedStatusType.value.length ? { status: JSON.stringify(selectedStatusType.value) } : {}), |
| 60 | + }) |
| 61 | + .then((page) => { |
| 62 | + applicationData.value = page.records |
| 63 | + pagination.value.total = page.total |
| 64 | + }) |
| 65 | + .finally(() => { |
| 66 | + loading.value = false |
| 67 | + }) |
| 68 | +} |
| 69 | +
|
| 70 | +function handleSearchChange(query?: Dict<unknown>) { |
| 71 | + applicationQuery.value = query |
| 72 | + return handleFilterChange() |
| 73 | +} |
| 74 | +
|
| 75 | +function handleFilterChange() { |
| 76 | + pagination.value.currentPage = 1 |
| 77 | + return loadApplicationPage() |
| 78 | +} |
| 79 | +
|
| 80 | +onMounted(() => { |
| 81 | + loadApplicationPage() |
| 82 | + if (auth.isEE) { |
| 83 | + SystemWorkspaceApi.getSystemWorkspaceList().then((workspaces) => { |
| 84 | + workspaceOptions.value = workspaces.flatMap(({ id, name }) => (id ? [{ value: id, label: name }] : [])) |
| 85 | + }) |
| 86 | + } |
| 87 | +}) |
| 88 | +</script> |
| 89 | + |
| 90 | +<template> |
| 91 | + <MkViewLayout> |
| 92 | + <template #default="{ Header, title }"> |
| 93 | + <component :is="Header"> |
| 94 | + <h4>{{ title }}</h4> |
| 95 | + <MkComplexSearch :fields="searchFields" @change="handleSearchChange" /> |
| 96 | + </component> |
| 97 | + <MkTable |
| 98 | + v-model:pagination-config="pagination" |
| 99 | + v-loading="loading || operationLoading" |
| 100 | + :data="applicationData" |
| 101 | + :max-table-height="210" |
| 102 | + @current-change="loadApplicationPage" |
| 103 | + @size-change="loadApplicationPage" |
| 104 | + > |
| 105 | + <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip> |
| 106 | + <template #default="{ row }"> |
| 107 | + <div class="flex-align-center gap-2"> |
| 108 | + <ApplicationIcon :icon="row.icon" class="shrink-0" /> |
| 109 | + <span class="truncate" :title="row.name">{{ row.name }}</span> |
| 110 | + </div> |
| 111 | + </template> |
| 112 | + </el-table-column> |
| 113 | + <el-table-column prop="type" label="类型" width="150"> |
| 114 | + <template #default="{ row }"> |
| 115 | + <el-tag v-if="isWorkFlow(row.type)" type="warning" size="small">高级</el-tag> |
| 116 | + <el-tag v-else type="primary" class="default" size="small">简易</el-tag> |
| 117 | + </template> |
| 118 | + </el-table-column> |
| 119 | + <el-table-column label="状态" width="150"> |
| 120 | + <template #header> |
| 121 | + <MkTableFilter |
| 122 | + mode="multiple" |
| 123 | + v-model="selectedStatusType" |
| 124 | + label="状态" |
| 125 | + :options="applicationStatusOptions" |
| 126 | + @change="handleFilterChange" |
| 127 | + /> |
| 128 | + </template> |
| 129 | + <template #default="{ row }"> |
| 130 | + <MkStatusLabel :active="row.is_publish" active-text="已发布" inactive-text="未发布" inactive-icon="icon_time_filled" /> |
| 131 | + </template> |
| 132 | + </el-table-column> |
| 133 | + <el-table-column v-if="auth.isEE" prop="workspace_name" min-width="160" show-overflow-tooltip> |
| 134 | + <template #header> |
| 135 | + <MkTableFilter mode="multiple" v-model="selectedWorkspaceIds" label="工作空间" :options="workspaceOptions" @change="handleFilterChange" /> |
| 136 | + </template> |
| 137 | + </el-table-column> |
| 138 | + <el-table-column prop="nick_name" label="创建者" min-width="120" show-overflow-tooltip /> |
| 139 | + <el-table-column label="发布时间" width="180"> |
| 140 | + <template #default="{ row }">{{ datetimeFormat(row.publish_time) || '-' }}</template> |
| 141 | + </el-table-column> |
| 142 | + <el-table-column label="创建时间" width="180"> |
| 143 | + <template #default="{ row }">{{ datetimeFormat(row.create_time) }}</template> |
| 144 | + </el-table-column> |
| 145 | + <el-table-column label="操作" width="120" fixed="right"> |
| 146 | + <template #default="{ row }"> |
| 147 | + <div class="flex-align-center"> |
| 148 | + <!-- 更多工具操作 --> |
| 149 | + <MkTableMoreDropdown persistent> |
| 150 | + <!-- TODO 对话&管理 --> |
| 151 | + |
| 152 | + <!-- 资源授权 --> |
| 153 | + <AuthorizeApplicationAction label="资源授权" :application="row" /> |
| 154 | + <!-- 智能体触发器 --> |
| 155 | + <TriggerApplicationAction label="触发器" :api="SystemResourceTriggerApi" :application="row" /> |
| 156 | + <!-- 导出 --> |
| 157 | + <ExportApplicationAction v-model:loading="operationLoading" label="导出" :api="SystemResourceApplicationApi" :application="row" /> |
| 158 | + <!-- 删除 --> |
| 159 | + <DeleteApplicationAction |
| 160 | + v-model:loading="operationLoading" |
| 161 | + label="删除" |
| 162 | + :api="SystemResourceApplicationApi" |
| 163 | + :application="row" |
| 164 | + @delete="loadApplicationPage" |
| 165 | + /> |
| 166 | + </MkTableMoreDropdown> |
| 167 | + </div> |
| 168 | + </template> |
| 169 | + </el-table-column> |
| 170 | + </MkTable> |
| 171 | + </template> |
| 172 | + </MkViewLayout> |
| 173 | +</template> |
0 commit comments