UnisKB/ui/src/views/application/index.vue

333 lines
13 KiB
Vue

<template>
<LayoutContainer class="application-manage">
<template #left>
<h4 class="p-16 pb-0">{{ $t('views.application.title') }}</h4>
<folder-tree
:data="folderList"
:currentNodeKey="currentFolder?.id"
@handleNodeClick="folderClickHandel"
class="p-8"
/>
</template>
<ContentContainer :header="currentFolder?.name">
<template #search>
<div class="flex">
<div class="flex-between complex-search">
<el-select
class="complex-search__left"
v-model="search_type"
style="width: 120px"
@change="search_type_change"
>
<el-option :label="$t('common.creator')" value="create_user" />
<el-option :label="$t('common.name')" value="name" />
</el-select>
<el-input
v-if="search_type === 'name'"
v-model="search_form.name"
@change="getList"
:placeholder="$t('common.searchBar.placeholder')"
style="width: 220px"
clearable
/>
<el-select
v-else-if="search_type === 'create_user'"
v-model="search_form.create_user"
@change="getList"
clearable
style="width: 220px"
>
<el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
</el-select>
</div>
<el-dropdown trigger="click">
<el-button type="primary" class="ml-8">
{{ $t('common.create') }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu class="create-dropdown">
<el-dropdown-item @click="openCreateDialog">
<div class="flex">
<el-avatar shape="square" class="avatar-blue mt-4" :size="36">
<img
src="@/assets/application/icon_simple_application.svg"
style="width: 65%"
alt=""
/>
</el-avatar>
<div class="pre-wrap ml-8">
<div class="lighter">{{ $t('views.application.simple') }}</div>
<el-text type="info" size="small">{{
$t('views.application.simplePlaceholder')
}}</el-text>
</div>
</div>
</el-dropdown-item>
<el-dropdown-item @click="openCreateDialog('WORK_FLOW')">
<div class="flex">
<el-avatar shape="square" class="avatar-purple mt-4" :size="36">
<img
src="@/assets/application/icon_workflow_application.svg"
style="width: 65%"
alt=""
/>
</el-avatar>
<div class="pre-wrap ml-8">
<div class="lighter">{{ $t('views.application.workflow') }}</div>
<el-text type="info" size="small">{{
$t('views.application.workflowPlaceholder')
}}</el-text>
</div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<div>
<el-row v-if="applicationList.length > 0" :gutter="15">
<!-- <template v-for="(item, index) in datasetFolderList" :key="index">
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
<CardBox
:title="item.name"
:description="item.desc || $t('common.noData')"
class="cursor"
>
<template #icon>
<el-avatar shape="square" :size="32" style="background: none">
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
</el-avatar>
</template>
<template #subTitle>
<el-text class="color-secondary lighter" size="small">
{{ $t('common.creator') }}: {{ item.username }}
</el-text>
</template>
</CardBox>
</el-col>
</template> -->
<template v-for="(item, index) in applicationList" :key="index">
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
<CardBox
:title="item.name"
:description="item.desc"
class="cursor"
@click="router.push({ path: `/application/${item.id}/${item.type}/overview` })"
>
<template #icon>
<LogoIcon height="28px" style="width: 28px; height: 28px; display: block" />
</template>
<template #subTitle>
<el-text class="color-secondary" size="small">
<auto-tooltip :content="item.username">
{{ $t('common.creator') }}: {{ item.username }}
</auto-tooltip>
</el-text>
</template>
<div class="status-tag">
<el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
{{ $t('views.application.workflow') }}
</el-tag>
<el-tag class="blue-tag" v-else style="height: 22px">
{{ $t('views.application.simple') }}
</el-tag>
</div>
<template #footer>
<div class="footer-content">
<el-tooltip
effect="dark"
:content="$t('views.application.setting.demo')"
placement="top"
>
<el-button text @click.stop @click="getAccessToken(item.id)">
<AppIcon iconName="app-view"></AppIcon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
<el-button text @click.stop="settingApplication(item)">
<AppIcon iconName="Setting"></AppIcon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<span @click.stop>
<el-dropdown trigger="click">
<el-button text @click.stop>
<el-icon><MoreFilled /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="is_show_copy_button(item)"
@click="copyApplication(item)"
>
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.copy') }}
</el-dropdown-item>
<el-dropdown-item @click.stop="exportApplication(item)">
<AppIcon iconName="app-export"></AppIcon>
{{ $t('common.export') }}
</el-dropdown-item>
<el-dropdown-item icon="Delete" @click.stop="deleteApplication(item)">{{
$t('common.delete')
}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
</div>
</template>
<template #mouseEnter>
<div @click.stop>
<el-dropdown trigger="click">
<el-button text @click.stop>
<el-icon><MoreFilled /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
icon="Refresh"
@click.stop="syncDataset(item)"
v-if="item.type === 1"
>{{ $t('views.knowledge.setting.sync') }}</el-dropdown-item
>
<el-dropdown-item @click.stop="reEmbeddingDataset(item)">
<AppIcon iconName="app-vectorization"></AppIcon>
{{ $t('views.knowledge.setting.vectorization') }}
</el-dropdown-item>
<!--
<el-dropdown-item
icon="Connection"
@click.stop="openGenerateDialog(item)"
>{{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
>
<el-dropdown-item
icon="Setting"
@click.stop="router.push({ path: `/dataset/${item.id}/setting` })"
>
{{ $t('common.setting') }}</el-dropdown-item
>
<el-dropdown-item @click.stop="export_dataset(item)">
<AppIcon iconName="app-export"></AppIcon
>{{ $t('views.document.setting.export') }} Excel</el-dropdown-item
>
<el-dropdown-item @click.stop="export_zip_dataset(item)">
<AppIcon iconName="app-export"></AppIcon
>{{ $t('views.document.setting.export') }} ZIP</el-dropdown-item
>
<el-dropdown-item icon="Delete" @click.stop="deleteDataset(item)">{{
$t('common.delete')
}}</el-dropdown-item> -->
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</CardBox>
</el-col>
</template>
</el-row>
<el-empty :description="$t('common.noData')" v-else />
</div>
</ContentContainer>
<CreateApplicationDialog ref="CreateApplicationDialogRef" />
</LayoutContainer>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
import ApplicaitonApi from '@/api/application/application'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
import useStore from '@/stores'
import { numberFormat } from '@/utils/common'
import { t } from '@/locales'
import { useRouter } from 'vue-router'
const router = useRouter()
const { folder } = useStore()
const loading = ref(false)
const search_type = ref('name')
const search_form = ref<{
name: string
create_user: string
}>({
name: '',
create_user: '',
})
const user_options = ref<any[]>([])
const paginationConfig = reactive({
current_page: 1,
page_size: 30,
total: 0,
})
const folderList = ref<any[]>([])
const applicationList = ref<any[]>([])
const currentFolder = ref<any>({})
const CreateApplicationDialogRef = ref()
function openCreateDialog(type?: string) {
CreateApplicationDialogRef.value.open(currentFolder.value?.id || 'root', type)
// common
// .asyncGetValid(ValidType.Application, ValidCount.Application, loading)
// .then(async (res: any) => {
// if (res?.data) {
// CreateApplicationDialogRef.value.open()
// } else if (res?.code === 400) {
// MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
// cancelButtonText: t('common.confirm'),
// confirmButtonText: t('common.professional'),
// }).then(() => {
// window.open('https://maxkb.cn/pricing.html', '_blank')
// })
// }
// })
}
const search_type_change = () => {
search_form.value = { name: '', create_user: '' }
}
function getList() {
const params = {
folder_id: currentFolder.value?.id || 'root',
}
ApplicaitonApi.getApplication('default', paginationConfig, params, loading).then((res) => {
paginationConfig.total = res.data.total
applicationList.value = [...applicationList.value, ...res.data.records]
})
}
function getFolder() {
const params = {}
folder.asynGetFolder('default', 'APPLICATION', params, loading).then((res: any) => {
folderList.value = res.data
currentFolder.value = res.data?.[0] || {}
getList()
})
}
function folderClickHandel(row: any) {
currentFolder.value = row
applicationList.value = []
getList()
}
onMounted(() => {
getFolder()
})
</script>
<style lang="scss" scoped></style>