mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-29 16:12:55 +00:00
feat: layout
This commit is contained in:
wangdan-fit2cloud
parent
06f834b7e3
commit
ab46d7ab61
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition appear name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onBeforeUpdate } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const cachedViews: any = ref([])
|
||||
onBeforeUpdate(() => {
|
||||
const { name, meta } = route
|
||||
if (name && !cachedViews.value.includes(name)) {
|
||||
cachedViews.value.push(name)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<div class="breadcrumb ml-4 mt-4 mb-12 flex">
|
||||
<back-button :to="activeMenu" class="mt-4"></back-button>
|
||||
<el-dropdown
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
@command="changeMenu"
|
||||
class="w-full"
|
||||
style="display: block"
|
||||
>
|
||||
<div class="breadcrumb-hover flex-between cursor">
|
||||
<div class="flex align-center">
|
||||
<AppAvatar
|
||||
v-if="isApplication && isAppIcon(current?.icon)"
|
||||
shape="square"
|
||||
:size="24"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<img :src="current?.icon" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="isApplication"
|
||||
:name="current?.name"
|
||||
pinyinColor
|
||||
shape="square"
|
||||
class="mr-8"
|
||||
:size="24"
|
||||
/>
|
||||
|
||||
<AppAvatar
|
||||
v-else-if="isDataset && current?.type === '1'"
|
||||
class="mr-8 avatar-purple"
|
||||
shape="square"
|
||||
:size="24"
|
||||
>
|
||||
<img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="isDataset && current?.type === '2'"
|
||||
class="mr-8 avatar-purple"
|
||||
shape="square"
|
||||
:size="24"
|
||||
style="background: none"
|
||||
>
|
||||
<img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="24">
|
||||
<img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
|
||||
</AppAvatar>
|
||||
<div class="ellipsis" :title="current?.name">{{ current?.name }}</div>
|
||||
</div>
|
||||
|
||||
<el-button text>
|
||||
<el-icon><CaretBottom /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-scrollbar>
|
||||
<div style="max-height: 400px">
|
||||
<el-dropdown-menu>
|
||||
<template v-for="(item, index) in list" :key="index">
|
||||
<div :class="item.id === id ? 'dropdown-active' : ''">
|
||||
<el-dropdown-item :command="item.id">
|
||||
<div class="flex align-center">
|
||||
<AppAvatar
|
||||
v-if="isApplication && isAppIcon(item?.icon)"
|
||||
shape="square"
|
||||
:size="24"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<img :src="item?.icon" alt="" />
|
||||
</AppAvatar>
|
||||
|
||||
<AppAvatar
|
||||
v-else-if="isApplication"
|
||||
:name="item.name"
|
||||
pinyinColor
|
||||
class="mr-12"
|
||||
shape="square"
|
||||
:size="24"
|
||||
/>
|
||||
<AppAvatar
|
||||
v-else-if="isDataset && item.type === '1'"
|
||||
class="mr-12 avatar-purple"
|
||||
shape="square"
|
||||
:size="24"
|
||||
>
|
||||
<img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="isDataset && item.type === '2'"
|
||||
class="mr-8 avatar-purple"
|
||||
shape="square"
|
||||
:size="24"
|
||||
style="background: none"
|
||||
>
|
||||
<img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar v-else class="mr-12 avatar-blue" shape="square" :size="24">
|
||||
<img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
|
||||
</AppAvatar>
|
||||
<span class="ellipsis" :title="item?.name"> {{ item?.name }}</span>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="breadcrumb__footer border-t" style="padding: 8px 11px; min-width: 200px">
|
||||
<template v-if="isApplication">
|
||||
<div class="w-full text-left cursor" @click="openCreateDialog">
|
||||
<el-button link>
|
||||
<el-icon class="mr-4"><Plus /></el-icon>
|
||||
{{ $t('views.application.createApplication') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="isDataset">
|
||||
<div class="w-full text-left cursor" @click="openCreateDialog">
|
||||
<el-button link>
|
||||
<el-icon class="mr-4"><Plus /></el-icon> {{ $t('views.dataset.createDataset') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<CreateApplicationDialog ref="CreateApplicationDialogRef" @refresh="refresh" />
|
||||
<CreateDatasetDialog ref="CreateDatasetDialogRef" @refresh="refresh" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
|
||||
import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
|
||||
import CreateDatasetDialog from '@/views/dataset/component/CreateDatasetDialog.vue'
|
||||
import { isAppIcon, isWorkFlow } from '@/utils/application'
|
||||
import useStore from '@/stores'
|
||||
const { common, dataset, application } = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const {
|
||||
meta: { activeMenu },
|
||||
params: { id }
|
||||
} = route as any
|
||||
|
||||
onBeforeRouteLeave((to, from) => {
|
||||
common.saveBreadcrumb(null)
|
||||
})
|
||||
|
||||
const CreateDatasetDialogRef = ref()
|
||||
const CreateApplicationDialogRef = ref()
|
||||
const list = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const breadcrumbData = computed(() => common.breadcrumb)
|
||||
|
||||
const current = computed(() => {
|
||||
return list.value?.filter((v) => v.id === id)?.[0]
|
||||
})
|
||||
|
||||
const isApplication = computed(() => {
|
||||
return activeMenu.includes('application')
|
||||
})
|
||||
const isDataset = computed(() => {
|
||||
return activeMenu.includes('dataset')
|
||||
})
|
||||
|
||||
function openCreateDialog() {
|
||||
if (isDataset.value) {
|
||||
CreateDatasetDialogRef.value.open()
|
||||
} else if (isApplication.value) {
|
||||
CreateApplicationDialogRef.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
function changeMenu(id: string) {
|
||||
const lastMatched = route.matched[route.matched.length - 1]
|
||||
if (lastMatched) {
|
||||
if (isDataset.value) {
|
||||
router.push({ name: lastMatched.name, params: { id: id } })
|
||||
} else if (isApplication.value) {
|
||||
const type = list.value?.filter((v) => v.id === id)?.[0]?.type
|
||||
if (
|
||||
isWorkFlow(type) &&
|
||||
(lastMatched.name === 'AppSetting' || lastMatched.name === 'AppHitTest')
|
||||
) {
|
||||
router.push({ path: `/application/${id}/${type}/overview` })
|
||||
} else {
|
||||
router.push({
|
||||
name: lastMatched.name,
|
||||
params: { id: id, type: type }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getDataset() {
|
||||
loading.value = true
|
||||
dataset
|
||||
.asyncGetAllDataset()
|
||||
.then((res: any) => {
|
||||
list.value = res.data
|
||||
common.saveBreadcrumb(list.value)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
function getApplication() {
|
||||
loading.value = true
|
||||
application
|
||||
.asyncGetAllApplication()
|
||||
.then((res: any) => {
|
||||
list.value = res.data
|
||||
common.saveBreadcrumb(list.value)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
function refresh() {
|
||||
common.saveBreadcrumb(null)
|
||||
}
|
||||
onMounted(() => {
|
||||
if (!breadcrumbData.value) {
|
||||
if (isDataset.value) {
|
||||
getDataset()
|
||||
} else if (isApplication.value) {
|
||||
getApplication()
|
||||
}
|
||||
} else {
|
||||
list.value = breadcrumbData.value
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.dropdown-active) {
|
||||
background-color: var(--el-dropdown-menuItem-hover-fill);
|
||||
.el-dropdown-menu__item {
|
||||
color: var(--el-dropdown-menuItem-hover-color);
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
.breadcrumb-hover {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
&:hover {
|
||||
background-color: var(--app-text-color-light-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export { default as Sidebar } from './sidebar/index.vue'
|
||||
export { default as AppMain } from './app-main/index.vue'
|
||||
export { default as TopBar } from './top-bar/index.vue'
|
||||
export { default as AppHeader } from './app-header/index.vue'
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div v-if="(!menu.meta || !menu.meta.hidden) && showMenu()" class="sidebar-item">
|
||||
<el-sub-menu
|
||||
v-if="menu?.children && menu?.children.length > 0"
|
||||
:index="menu.path"
|
||||
popper-class="sidebar-container-popper"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
|
||||
</el-icon>
|
||||
<span>{{ $t(menu.meta?.title as string) }}</span>
|
||||
</template>
|
||||
<sidebar-item
|
||||
v-hasPermission="child.meta?.permission"
|
||||
v-for="(child, index) in menu?.children"
|
||||
:key="index"
|
||||
:menu="child"
|
||||
:activeMenu="activeMenu"
|
||||
>
|
||||
</sidebar-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item
|
||||
v-else
|
||||
ref="subMenu"
|
||||
:index="menu.path"
|
||||
popper-class="sidebar-popper"
|
||||
@click="clickHandle(menu)"
|
||||
>
|
||||
<template #title>
|
||||
<AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
|
||||
<span v-if="menu.meta && menu.meta.title">{{ $t(menu.meta?.title as string) }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
|
||||
import { isWorkFlow } from '@/utils/application'
|
||||
const props = defineProps<{
|
||||
menu: RouteRecordRaw
|
||||
activeMenu: any
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const {
|
||||
params: { id, type }
|
||||
} = route as any
|
||||
|
||||
function showMenu() {
|
||||
if (isWorkFlow(type)) {
|
||||
return props.menu.name !== 'AppHitTest'
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
function clickHandle(item?: any) {
|
||||
if (isWorkFlow(type) && item?.name === 'AppSetting') {
|
||||
router.push({ path: `/application/${id}/workflow` })
|
||||
}
|
||||
}
|
||||
const menuIcon = computed(() => {
|
||||
if (props.activeMenu === props.menu.path) {
|
||||
return props.menu.meta?.iconActive || props.menu?.meta?.icon
|
||||
} else {
|
||||
return props.menu?.meta?.icon
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sidebar-item {
|
||||
.sidebar-icon {
|
||||
font-size: 20px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.el-menu-item {
|
||||
padding: 13px 12px 13px 16px !important;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background: none;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
:deep(.el-sub-menu__title) {
|
||||
padding: 13px 12px 13px 16px !important;
|
||||
&:hover {
|
||||
background: none;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.el-sub-menu {
|
||||
.el-menu-item {
|
||||
padding-left: 43px !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="sidebar p-8">
|
||||
<div v-if="showBreadcrumb">
|
||||
<AppBreadcrumb />
|
||||
</div>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu :default-active="activeMenu" router>
|
||||
<sidebar-item
|
||||
v-hasPermission="menu.meta?.permission"
|
||||
v-for="(menu, index) in subMenuList"
|
||||
:key="index"
|
||||
:menu="menu"
|
||||
:activeMenu="activeMenu"
|
||||
>
|
||||
</sidebar-item>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getChildRouteListByPathAndName } from '@/router/index'
|
||||
import SidebarItem from './SidebarItem.vue'
|
||||
import AppBreadcrumb from './../breadcrumb/index.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const showBreadcrumb = computed(() => {
|
||||
const { meta } = route as any
|
||||
return (
|
||||
meta?.activeMenu &&
|
||||
(meta?.activeMenu.includes('dataset') || meta?.activeMenu.includes('application'))
|
||||
)
|
||||
})
|
||||
|
||||
const subMenuList = computed(() => {
|
||||
const { meta } = route
|
||||
return getChildRouteListByPathAndName(meta.parentPath, meta.parentName)
|
||||
})
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const { path, meta } = route
|
||||
return meta.active || path
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sidebar {
|
||||
.el-menu {
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { nextTick, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import useStore from '@/stores'
|
||||
import { DeviceType } from '@/enums/common'
|
||||
/** 参考 Bootstrap 的响应式设计 WIDTH = 768 */
|
||||
const WIDTH = 768
|
||||
|
||||
/** 根据大小变化重新布局 */
|
||||
export default () => {
|
||||
const { common } = useStore()
|
||||
const _isMobile = () => {
|
||||
const rect = document.body?.getBoundingClientRect()
|
||||
return rect.width - 1 < WIDTH
|
||||
}
|
||||
|
||||
const _resizeHandler = () => {
|
||||
if (!document.hidden) {
|
||||
const isMobile = _isMobile()
|
||||
common.toggleDevice(isMobile ? DeviceType.Mobile : DeviceType.Desktop)
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
window.addEventListener('resize', _resizeHandler)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (_isMobile()) {
|
||||
common.toggleDevice(DeviceType.Mobile)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', _resizeHandler)
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
·
|
||||
<template>
|
||||
<div class="app-top-bar-container border-b flex-center">
|
||||
<div class="logo">
|
||||
<LogoFull />
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<div></div>
|
||||
<TopMenu></TopMenu>
|
||||
<TopUrlMenu></TopUrlMenu>
|
||||
</div>
|
||||
<Avatar></Avatar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TopMenu from './top-menu/index.vue'
|
||||
import Avatar from './avatar/index.vue'
|
||||
import TopUrlMenu from './top-url-menu/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('layout.apiKey')"
|
||||
v-model="dialogVisible"
|
||||
width="800"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<el-card shadow="never" class="layout-bg mb-16">
|
||||
<el-text type="info" class="color-secondary">{{ $t('layout.apiServiceAddress') }}</el-text>
|
||||
<p style="margin-top: 10px">
|
||||
<span class="vertical-middle lighter break-all">
|
||||
{{ apiUrl }}
|
||||
</span>
|
||||
<el-button type="primary" text @click="copyClick(apiUrl)">
|
||||
<AppIcon iconName="app-copy"></AppIcon>
|
||||
</el-button>
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
<el-button type="primary" class="mb-16" @click="createApiKey">
|
||||
{{ $t('common.create') }}
|
||||
</el-button>
|
||||
<el-table :data="apiKey" class="mb-16" :loading="loading">
|
||||
<el-table-column prop="secret_key" label="API Key">
|
||||
<template #default="{ row }">
|
||||
<span class="vertical-middle lighter break-all">
|
||||
{{ row.secret_key }}
|
||||
</span>
|
||||
<el-button type="primary" text @click="copyClick(row.secret_key)">
|
||||
<AppIcon iconName="app-copy"></AppIcon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.status.label')" width="80">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" :label="$t('common.createDate')" width="170">
|
||||
<template #default="{ row }">
|
||||
{{ datetimeFormat(row.create_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.setting')" align="left" width="80">
|
||||
<template #default="{ row }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
|
||||
<el-button type="primary" text @click.stop="settingApiKey(row)">
|
||||
<el-icon><Setting /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
|
||||
<el-button type="primary" text @click="deleteApiKey(row)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { copyClick } from '@/utils/clipboard'
|
||||
import systemKeyApi from '@/api/system-api-key'
|
||||
import { datetimeFormat } from '@/utils/time'
|
||||
import { MsgSuccess, MsgConfirm } from '@/utils/message'
|
||||
import { t } from '@/locales'
|
||||
import SettingAPIKeyDialog from '@/views/application-overview/component/SettingAPIKeyDialog.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const {
|
||||
params: { id }
|
||||
} = route
|
||||
|
||||
const props = defineProps({
|
||||
userId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['addData'])
|
||||
|
||||
const apiUrl = window.location.origin + '/doc/'
|
||||
const SettingAPIKeyDialogRef = ref()
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
const loading = ref(false)
|
||||
const apiKey = ref<any>(null)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
apiKey.value = null
|
||||
}
|
||||
})
|
||||
|
||||
function settingApiKey(row: any) {
|
||||
SettingAPIKeyDialogRef.value.open(row, 'USER')
|
||||
}
|
||||
|
||||
function deleteApiKey(row: any) {
|
||||
MsgConfirm(
|
||||
// @ts-ignore
|
||||
`${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
|
||||
t(t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2')),
|
||||
{
|
||||
confirmButtonText: t('common.confirm'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
confirmButtonClass: 'danger'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
systemKeyApi.delAPIKey(row.id, loading).then(() => {
|
||||
MsgSuccess(t('common.deleteSuccess'))
|
||||
getApiKeyList()
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function changeState(bool: Boolean, row: any) {
|
||||
const obj = {
|
||||
is_active: bool
|
||||
}
|
||||
const str = bool
|
||||
? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
|
||||
: t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
|
||||
systemKeyApi.putAPIKey(row.id, obj, loading).then((res) => {
|
||||
MsgSuccess(str)
|
||||
getApiKeyList()
|
||||
})
|
||||
}
|
||||
|
||||
function createApiKey() {
|
||||
systemKeyApi.postAPIKey(loading).then((res) => {
|
||||
getApiKeyList()
|
||||
})
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
getApiKeyList()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function getApiKeyList() {
|
||||
systemKeyApi.getAPIKey().then((res) => {
|
||||
apiKey.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
getApiKeyList()
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scope></style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-model="aboutDialogVisible"
|
||||
class="about-dialog border-r-4"
|
||||
:class="!isDefaultTheme ? 'dialog-custom-header' : ''"
|
||||
>
|
||||
<template #header="{ titleId, titleClass }">
|
||||
<div class="logo flex-center" :id="titleId" :class="titleClass">
|
||||
<LogoFull height="59px" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="about-ui" v-loading="loading">
|
||||
<div class="flex">
|
||||
<span class="label">{{ $t('layout.about.authorize') }}</span><span>{{ licenseInfo?.corporation || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="label">{{ $t('layout.about.expiredTime') }}</span>
|
||||
<span
|
||||
>{{ licenseInfo?.expired || '-' }}
|
||||
<span class="danger" v-if="licenseInfo?.expired && fromNowDate(licenseInfo?.expired)"
|
||||
>（{{ fromNowDate(licenseInfo?.expired) }}）</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="label">{{ $t('layout.about.edition.label') }}</span>
|
||||
<span>{{ user.showXpack() ? $t('layout.about.edition.professional') : $t('layout.about.edition.community') }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="label">{{ $t('layout.about.version') }}</span><span>{{ user.version }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="label">{{ $t('layout.about.serialNo') }}</span><span>{{ licenseInfo?.serialNo || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="label">{{ $t('layout.about.remark') }}</span><span>{{ licenseInfo?.remark || '-' }}</span>
|
||||
</div>
|
||||
<div class="mt-16 flex align-center" v-if="user.showXpack()">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="onChange"
|
||||
v-hasPermission="new Role('ADMIN')"
|
||||
>
|
||||
<el-button class="border-primary mr-16">{{ $t('layout.about.update') }} License</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t text-center mt-16 p-16 pb-0">
|
||||
<el-text type="info">{{ $t('layout.copyright') }}</el-text>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import licenseApi from '@/api/license'
|
||||
import { fromNowDate } from '@/utils/time'
|
||||
import { Role } from '@/utils/permission/type'
|
||||
import useStore from '@/stores'
|
||||
const { user } = useStore()
|
||||
const isDefaultTheme = computed(() => {
|
||||
return user.isDefaultTheme()
|
||||
})
|
||||
|
||||
const aboutDialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const licenseInfo = ref<any>(null)
|
||||
const isUpdate = ref(false)
|
||||
|
||||
watch(aboutDialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
if (isUpdate.value) {
|
||||
window.location.reload()
|
||||
}
|
||||
isUpdate.value = false
|
||||
}
|
||||
})
|
||||
const open = () => {
|
||||
if (user.showXpack()) {
|
||||
getLicenseInfo()
|
||||
}
|
||||
|
||||
aboutDialogVisible.value = true
|
||||
}
|
||||
|
||||
const onChange = (file: any) => {
|
||||
let fd = new FormData()
|
||||
fd.append('license_file', file.raw)
|
||||
licenseApi.putLicense(fd, loading).then((res: any) => {
|
||||
getLicenseInfo()
|
||||
isUpdate.value = true
|
||||
})
|
||||
}
|
||||
function getLicenseInfo() {
|
||||
licenseApi.getLicense(loading).then((res: any) => {
|
||||
licenseInfo.value = res.data?.license
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.about-dialog {
|
||||
padding: 0 0 24px 0;
|
||||
width: 620px;
|
||||
font-weight: 400;
|
||||
.el-dialog__header {
|
||||
background: var(--app-header-bg-color);
|
||||
margin-right: 0;
|
||||
height: 140px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px 4px 0 0;
|
||||
&.show-close {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.el-dialog__title {
|
||||
height: 140px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.about-ui {
|
||||
margin: 0 auto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
margin-top: 24px;
|
||||
line-height: 36px;
|
||||
padding: 0 40px;
|
||||
|
||||
.label {
|
||||
width: 150px;
|
||||
text-align: left;
|
||||
color: var(--app-text-color-secondary);
|
||||
}
|
||||
}
|
||||
&.dialog-custom-header {
|
||||
.el-dialog__header {
|
||||
background: var(--el-color-primary-light-9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-model="resetPasswordDialog"
|
||||
:title="$t('views.login.resetPassword')"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<el-form
|
||||
class="reset-password-form"
|
||||
ref="resetPasswordFormRef1"
|
||||
:model="resetPasswordForm"
|
||||
:rules="rules1"
|
||||
>
|
||||
<p class="mb-8 lighter">{{ $t('views.login.newPassword') }}</p>
|
||||
<el-form-item prop="password" style="margin-bottom: 8px">
|
||||
<el-input
|
||||
type="password"
|
||||
class="input-item"
|
||||
v-model="resetPasswordForm.password"
|
||||
:placeholder="$t('views.login.enterPassword')"
|
||||
show-password
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="re_password">
|
||||
<el-input
|
||||
type="password"
|
||||
class="input-item"
|
||||
v-model="resetPasswordForm.re_password"
|
||||
:placeholder="$t('views.user.userForm.form.re_password.placeholder')"
|
||||
show-password
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
class="reset-password-form mb-24"
|
||||
ref="resetPasswordFormRef2"
|
||||
:model="resetPasswordForm"
|
||||
:rules="rules2"
|
||||
>
|
||||
<p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>
|
||||
<el-form-item style="margin-bottom: 8px">
|
||||
<el-input
|
||||
class="input-item"
|
||||
:disabled="true"
|
||||
v-bind:modelValue="user.userInfo?.email"
|
||||
:placeholder="t('views.user.userForm.form.email.placeholder')"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<div class="flex-between w-full">
|
||||
<el-input
|
||||
class="code-input"
|
||||
v-model="resetPasswordForm.code"
|
||||
:placeholder="$t('views.login.verificationCode.placeholder')"
|
||||
>
|
||||
</el-input>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="send-email-button ml-8"
|
||||
@click="sendEmail"
|
||||
:loading="loading"
|
||||
>
|
||||
{{
|
||||
isDisabled
|
||||
? `${$t('views.login.verificationCode.resend')}（${time}s）`
|
||||
: $t('views.login.verificationCode.getVerificationCode')
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="resetPasswordDialog = false">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="resetPassword">
|
||||
{{ $t('common.save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { MsgSuccess } from '@/utils/message'
|
||||
import UserApi from '@/api/user'
|
||||
import useStore from '@/stores'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { t } from '@/locales'
|
||||
const router = useRouter()
|
||||
const { user } = useStore()
|
||||
|
||||
const resetPasswordDialog = ref<boolean>(false)
|
||||
|
||||
const resetPasswordForm = ref<ResetCurrentUserPasswordRequest>({
|
||||
code: '',
|
||||
password: '',
|
||||
re_password: ''
|
||||
})
|
||||
|
||||
const resetPasswordFormRef1 = ref<FormInstance>()
|
||||
const resetPasswordFormRef2 = ref<FormInstance>()
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const isDisabled = ref<boolean>(false)
|
||||
const time = ref<number>(60)
|
||||
|
||||
const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.login.enterPassword'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: t('views.user.userForm.form.password.lengthMessage'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
re_password: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.user.userForm.form.re_password.requiredMessage'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: t('views.user.userForm.form.password.lengthMessage'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
|
||||
callback(new Error(t('views.user.userForm.form.re_password.validatorMessage')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
|
||||
// @ts-ignore
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.login.verificationCode.placeholder'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
/**
|
||||
* 发送验证码
|
||||
*/
|
||||
const sendEmail = () => {
|
||||
resetPasswordFormRef1.value?.validate().then(() => {
|
||||
UserApi.sendEmailToCurrent(loading).then(() => {
|
||||
MsgSuccess(t('views.login.verificationCode.successMessage'))
|
||||
isDisabled.value = true
|
||||
handleTimeChange()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleTimeChange = () => {
|
||||
if (time.value <= 0) {
|
||||
isDisabled.value = false
|
||||
time.value = 60
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
time.value--
|
||||
handleTimeChange()
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
resetPasswordForm.value = {
|
||||
code: '',
|
||||
password: '',
|
||||
re_password: ''
|
||||
}
|
||||
resetPasswordDialog.value = true
|
||||
resetPasswordFormRef1.value?.resetFields()
|
||||
resetPasswordFormRef2.value?.resetFields()
|
||||
}
|
||||
const resetPassword = () => {
|
||||
resetPasswordFormRef1.value?.validate().then(() => {
|
||||
resetPasswordFormRef2.value
|
||||
?.validate()
|
||||
.then(() => {
|
||||
return UserApi.resetCurrentUserPassword(resetPasswordForm.value)
|
||||
})
|
||||
.then(() => {
|
||||
return user.logout()
|
||||
})
|
||||
.then(() => {
|
||||
router.push({ name: 'login' })
|
||||
})
|
||||
})
|
||||
}
|
||||
const close = () => {
|
||||
resetPasswordDialog.value = false
|
||||
}
|
||||
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
<style lang="scss" scope></style>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<el-dropdown trigger="click" type="primary">
|
||||
<div class="flex-center cursor">
|
||||
<AppAvatar>
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
</AppAvatar>
|
||||
<span class="ml-8">{{ user.userInfo?.username }}</span>
|
||||
<el-icon class="el-icon--right">
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="avatar-dropdown">
|
||||
<div class="userInfo">
|
||||
<p class="bold mb-4" style="font-size: 14px">{{ user.userInfo?.username }}</p>
|
||||
<p>
|
||||
<el-text type="info">
|
||||
{{ user.userInfo?.email }}
|
||||
</el-text>
|
||||
</p>
|
||||
</div>
|
||||
<el-dropdown-item class="border-t p-8" @click="openResetPassword">
|
||||
{{ $t('views.login.resetPassword') }}
|
||||
</el-dropdown-item>
|
||||
<div v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')">
|
||||
<el-dropdown-item class="border-t p-8" @click="openAPIKeyDialog">
|
||||
{{ $t('layout.apiKey') }}
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
<el-dropdown-item class="border-t" style="padding: 0" @click.stop>
|
||||
<el-dropdown class="w-full" trigger="hover" placement="left-start">
|
||||
<div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
|
||||
<span> {{ $t('layout.language') }}</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu style="width: 180px">
|
||||
<el-dropdown-item
|
||||
v-for="(lang, index) in langList"
|
||||
:key="index"
|
||||
:value="lang.value"
|
||||
@click="changeLang(lang.value)"
|
||||
class="flex-between"
|
||||
>
|
||||
<span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
|
||||
lang.label
|
||||
}}</span>
|
||||
|
||||
<el-icon
|
||||
:class="lang.value === user.userInfo?.language ? 'primary' : ''"
|
||||
v-if="lang.value === user.userInfo?.language"
|
||||
>
|
||||
<Check />
|
||||
</el-icon>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="border-t" @click="openAbout">
|
||||
{{ $t('layout.about.title') }}
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item class="border-t" @click="logout">
|
||||
{{ $t('layout.logout') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<ResetPassword ref="resetPasswordRef"></ResetPassword>
|
||||
<AboutDialog ref="AboutDialogRef"></AboutDialog>
|
||||
<APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
|
||||
<UserPwdDialog ref="UserPwdDialogRef" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import useStore from '@/stores'
|
||||
import { useRouter } from 'vue-router'
|
||||
import ResetPassword from './ResetPassword.vue'
|
||||
import AboutDialog from './AboutDialog.vue'
|
||||
import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
|
||||
import APIKeyDialog from './APIKeyDialog.vue'
|
||||
import { ComplexPermission } from '@/utils/permission/type'
|
||||
import { langList } from '@/locales/index'
|
||||
import { useLocale } from '@/locales/useLocale'
|
||||
const { user } = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
const UserPwdDialogRef = ref()
|
||||
const AboutDialogRef = ref()
|
||||
const APIKeyDialogRef = ref()
|
||||
const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
|
||||
|
||||
// const { changeLocale } = useLocale()
|
||||
const changeLang = (lang: string) => {
|
||||
user.postUserLanguage(lang)
|
||||
// changeLocale(lang)
|
||||
}
|
||||
const openAbout = () => {
|
||||
AboutDialogRef.value?.open()
|
||||
}
|
||||
|
||||
function openAPIKeyDialog() {
|
||||
APIKeyDialogRef.value.open()
|
||||
}
|
||||
|
||||
const openResetPassword = () => {
|
||||
resetPasswordRef.value?.open()
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
user.logout().then(() => {
|
||||
router.push({ name: 'login' })
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (user.userInfo?.is_edit_password) {
|
||||
UserPwdDialogRef.value.open(user.userInfo)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.avatar-dropdown {
|
||||
min-width: 210px;
|
||||
|
||||
.userInfo {
|
||||
padding: 12px 11px;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item) {
|
||||
padding: 12px 11px;
|
||||
&:hover {
|
||||
background: var(--app-text-color-light-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div
|
||||
class="menu-item-container flex-center h-full"
|
||||
:class="isActive ? 'active' : ''"
|
||||
@click="router.push({ name: menu.name })"
|
||||
>
|
||||
<!-- <div class="icon">
|
||||
<AppIcon :iconName="menu.meta ? (menu.meta.icon as string) : '404'" />
|
||||
</div> -->
|
||||
<div class="title">
|
||||
{{ $t(menu.meta?.title as string) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const props = defineProps<{
|
||||
menu: RouteRecordRaw
|
||||
}>()
|
||||
|
||||
const isActive = computed(() => {
|
||||
const { name, path, meta } = route
|
||||
return (name == props.menu.name && path == props.menu.path) || meta?.activeMenu == props.menu.path
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.menu-item-container {
|
||||
margin-right: 28px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
font-size: 15px;
|
||||
margin-right: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--el-color-primary);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border-bottom: 3px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div class="top-menu-container flex align-center h-full">
|
||||
<MenuItem
|
||||
:menu="menu"
|
||||
v-hasPermission="menu.meta?.permission"
|
||||
v-for="(menu, index) in topMenuList"
|
||||
:key="index"
|
||||
>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { getChildRouteListByPathAndName } from '@/router/index'
|
||||
import MenuItem from './MenuItem.vue'
|
||||
|
||||
const topMenuList = computed(() => {
|
||||
return getChildRouteListByPathAndName('/', 'home')
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="$t('layout.github')"
|
||||
placement="top"
|
||||
v-if="user.themeInfo?.showProject"
|
||||
>
|
||||
<AppIcon
|
||||
iconName="app-github"
|
||||
class="cursor color-secondary mr-8 ml-8"
|
||||
style="font-size: 20px"
|
||||
@click="toUrl(user.themeInfo?.projectUrl)"
|
||||
></AppIcon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="$t('layout.wiki')"
|
||||
placement="top"
|
||||
v-if="user.themeInfo?.showUserManual"
|
||||
>
|
||||
<AppIcon
|
||||
iconName="app-reading"
|
||||
class="cursor color-secondary mr-8 ml-8"
|
||||
style="font-size: 20px"
|
||||
@click="toUrl(user.themeInfo?.userManualUrl)"
|
||||
></AppIcon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="$t('layout.forum')"
|
||||
placement="top"
|
||||
v-if="user.themeInfo?.showForum"
|
||||
>
|
||||
<AppIcon
|
||||
iconName="app-help"
|
||||
class="cursor color-secondary mr-16 ml-8"
|
||||
style="font-size: 20px"
|
||||
@click="toUrl(user.themeInfo?.forumUrl)"
|
||||
></AppIcon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import useStore from '@/stores'
|
||||
const { user } = useStore()
|
||||
function toUrl(url: string) {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import UserHeader from './layout-header/UserHeader.vue'
|
||||
import useStore from '@/stores'
|
||||
const { user } = useStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<div class="app-header">
|
||||
<UserHeader />
|
||||
</div>
|
||||
<div class="app-main">
|
||||
<AppMain />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div class="main-layout h-full flex">
|
||||
<div class="sidebar-container">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="view-container">
|
||||
<AppMain />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Sidebar, AppMain } from '../components'
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="app-layout">
|
||||
<AppHeader />
|
||||
<div class="app-main">
|
||||
<div class="main-layout h-full flex">
|
||||
<div class="sidebar-container">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="view-container">
|
||||
<AppMain />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AppHeader, Sidebar, AppMain } from '../components'
|
||||
import useStore from '@/stores'
|
||||
const { user } = useStore()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.app-layout {
|
||||
background-color: var(--app-layout-bg-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: var(--app-header-bg-color);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: var(--app-header-height) 0 0 !important;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
&.isExpire {
|
||||
padding-top: calc(var(--app-header-height) + 40px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
box-sizing: border-box;
|
||||
transition: width 0.28s;
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
background-color: var(--sidebar-bg-color);
|
||||
}
|
||||
.view-container {
|
||||
width: calc(100% - var(--sidebar-width));
|
||||
}
|
||||
|
|
@ -99,7 +99,6 @@ const promise: (
|
|||
}
|
||||
request
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
// blob类型的返回状态是response.status
|
||||
if (response.status === 200) {
|
||||
resolve(response?.data?.data || response)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
const ModelRouter = {
|
||||
path: '/model',
|
||||
name: 'model',
|
||||
meta: { title: 'views.model.title', permission: 'MODEL:READ' },
|
||||
redirect: '/model',
|
||||
component: () => import('@/layout/layout-template/AppLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/model',
|
||||
name: 'model-index',
|
||||
meta: { title: '模型主页', activeMenu: '/function-lib' },
|
||||
component: () => import('@/views/model/index.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default ModelRouter
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
import type { RouteRecordRaw } from 'vue-router'
|
||||
// const modules: any = import.meta.glob('./modules/*.ts', { eager: true })
|
||||
// const rolesRoutes: RouteRecordRaw[] = [...Object.keys(modules).map((key) => modules[key].default)]
|
||||
const modules: any = import.meta.glob('./modules/*.ts', { eager: true })
|
||||
const rolesRoutes: RouteRecordRaw[] = [...Object.keys(modules).map((key) => modules[key].default)]
|
||||
|
||||
export const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('@/views/HomeView.vue'),
|
||||
redirect: '/model',
|
||||
children: [...rolesRoutes],
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -17,12 +18,12 @@ export const routes: Array<RouteRecordRaw> = [
|
|||
{
|
||||
path: '/forget_password',
|
||||
name: 'ForgetPassword',
|
||||
component: () => import('@/views/login/ForgetPassword.vue')
|
||||
component: () => import('@/views/login/ForgetPassword.vue'),
|
||||
},
|
||||
{
|
||||
path: '/reset_password/:code/:email',
|
||||
name: 'ResetPassword',
|
||||
component: () => import('@/views/login/ResetPassword.vue')
|
||||
component: () => import('@/views/login/ResetPassword.vue'),
|
||||
},
|
||||
// {
|
||||
// path: '/:pathMatch(.*)',
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const useLoginStore = defineStore('login', {
|
|||
this.token = ok.token
|
||||
localStorage.setItem('token', ok.token)
|
||||
const user = useUserStore()
|
||||
return user.profile()
|
||||
return user.profile(loading)
|
||||
})
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ const useLoginStore = defineStore('user', {
|
|||
isDefaultTheme() {
|
||||
return !this.themeInfo?.theme || this.themeInfo?.theme === '#3370FF'
|
||||
},
|
||||
async profile() {
|
||||
return UserApi.getUserProfile().then((ok) => {
|
||||
this.userInfo = ok
|
||||
async profile(loading?: Ref<boolean>) {
|
||||
return UserApi.getUserProfile(loading).then((ok: { data: User }) => {
|
||||
this.userInfo = ok.data
|
||||
useLocalStorage<string>(localeConfigKey, 'en-US').value =
|
||||
ok.data?.language || this.getLanguage()
|
||||
// return this.asyncGetProfile()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('views.functionLib.functionForm.form.functionName.name')"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
append-to-body
|
||||
width="450"
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="fieldFormRef"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="form.name" maxlength="64" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
|
||||
<el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
|
||||
{{ isEdit ? $t('common.save') : $t('common.add') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { t } from '@/locales'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const fieldFormRef = ref()
|
||||
const loading = ref<boolean>(false)
|
||||
const isEdit = ref<boolean>(false)
|
||||
|
||||
const form = ref<any>({
|
||||
name: ''
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.functionLib.functionForm.form.functionName.placeholder'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const open = (row: any, edit: boolean) => {
|
||||
if (row) {
|
||||
form.value = cloneDeep(row)
|
||||
}
|
||||
isEdit.value = edit || false
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
emit('refresh', form.value, isEdit.value)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="`Logo ${$t('common.setting')}`"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
width="550"
|
||||
>
|
||||
<el-radio-group v-model="radioType" class="radio-block mb-16">
|
||||
<el-radio value="default">
|
||||
<p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
|
||||
<AppAvatar
|
||||
v-if="detail?.name"
|
||||
:name="detail?.name"
|
||||
pinyinColor
|
||||
class="mt-8 mb-8"
|
||||
shape="square"
|
||||
:size="32"
|
||||
/>
|
||||
</el-radio>
|
||||
|
||||
<el-radio value="custom">
|
||||
<p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
|
||||
<div class="flex mt-8">
|
||||
<AppAvatar
|
||||
v-if="fileURL"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
class="mr-16"
|
||||
>
|
||||
<img :src="fileURL" alt="" />
|
||||
</AppAvatar>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
accept="image/jpeg, image/png, image/gif"
|
||||
:on-change="onChange"
|
||||
>
|
||||
<el-button icon="Upload" :disabled="radioType !== 'custom'"
|
||||
>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.upload') }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="el-upload__tip info mt-8">
|
||||
{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit" :loading="loading">
|
||||
{{ $t('common.save') }}</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import functionLibApi from '@/api/function-lib'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { MsgError, MsgSuccess } from '@/utils/message'
|
||||
import { defaultIcon, isAppIcon } from '@/utils/application'
|
||||
import { t } from '@/locales'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const iconFile = ref<any>(null)
|
||||
const fileURL = ref<any>(null)
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
const loading = ref(false)
|
||||
const detail = ref<any>(null)
|
||||
const radioType = ref('default')
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
iconFile.value = null
|
||||
fileURL.value = null
|
||||
}
|
||||
})
|
||||
|
||||
const open = (data: any) => {
|
||||
radioType.value = isAppIcon(data.icon) ? 'custom' : 'default'
|
||||
fileURL.value = isAppIcon(data.icon) ? data.icon : null
|
||||
detail.value = cloneDeep(data)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const onChange = (file: any) => {
|
||||
//1、判断文件大小是否合法，文件限制不能大于10MB
|
||||
const isLimit = file?.size / 1024 / 1024 < 10
|
||||
if (!isLimit) {
|
||||
// @ts-ignore
|
||||
MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
|
||||
return false
|
||||
} else {
|
||||
iconFile.value = file
|
||||
fileURL.value = URL.createObjectURL(file.raw)
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (radioType.value === 'default') {
|
||||
emit('refresh', '/ui/favicon.ico')
|
||||
dialogVisible.value = false
|
||||
} else if (radioType.value === 'custom' && iconFile.value) {
|
||||
let fd = new FormData()
|
||||
fd.append('file', iconFile.value.raw)
|
||||
functionLibApi.putFunctionLibIcon(detail.value.id, fd, loading).then((res: any) => {
|
||||
emit('refresh', res.data)
|
||||
dialogVisible.value = false
|
||||
})
|
||||
} else {
|
||||
MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.uploadImagePrompt'))
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="
|
||||
isEdit
|
||||
? $t('views.template.templateForm.title.editParam')
|
||||
: $t('views.template.templateForm.title.addParam')
|
||||
"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="fieldFormRef"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<el-form-item :label="$t('views.functionLib.functionForm.form.paramName.label')" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
:placeholder="$t('views.functionLib.functionForm.form.paramName.placeholder')"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
@blur="form.name = form.name.trim()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('views.functionLib.functionForm.form.dataType.label')">
|
||||
<el-select v-model="form.type">
|
||||
<el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('views.functionLib.functionForm.form.source.label')">
|
||||
<el-select v-model="form.source">
|
||||
<el-option
|
||||
:label="$t('views.functionLib.functionForm.form.source.reference')"
|
||||
value="reference"
|
||||
/>
|
||||
<el-option
|
||||
:label="$t('views.functionLib.functionForm.form.source.custom')"
|
||||
value="custom"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('views.functionLib.functionForm.form.required.label')"
|
||||
@click.prevent
|
||||
>
|
||||
<el-switch size="small" v-model="form.is_required"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
|
||||
<el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
|
||||
{{ isEdit ? $t('common.save') : $t('common.add') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { t } from '@/locales'
|
||||
const typeOptions = ['string', 'int', 'dict', 'array', 'float']
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const fieldFormRef = ref()
|
||||
const loading = ref<boolean>(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const form = ref<any>({
|
||||
name: '',
|
||||
type: typeOptions[0],
|
||||
source: 'reference',
|
||||
is_required: true
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.functionLib.functionForm.form.paramName.placeholder'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
name: '',
|
||||
type: typeOptions[0],
|
||||
source: 'reference',
|
||||
is_required: true
|
||||
}
|
||||
isEdit.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const open = (row: any) => {
|
||||
if (row) {
|
||||
form.value = cloneDeep(row)
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
emit('refresh', form.value)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
|
||||
<template #header>
|
||||
<div class="flex align-center" style="margin-left: -8px">
|
||||
<el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
|
||||
<el-icon :size="20">
|
||||
<Back />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<h4>{{ $t('common.debug') }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div v-if="form.init_field_list.length > 0">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.initParam') }}
|
||||
</h4>
|
||||
<el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
|
||||
<DynamicsForm
|
||||
v-model="form.init_params"
|
||||
:model="form.init_params"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
:render_data="form.init_field_list"
|
||||
ref="dynamicsFormRef"
|
||||
>
|
||||
</DynamicsForm>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-if="form.debug_field_list.length > 0" class="mb-16">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.inputParam') }}
|
||||
</h4>
|
||||
<el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
|
||||
<el-form
|
||||
ref="FormRef"
|
||||
:model="form"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
hide-required-asterisk
|
||||
v-loading="loading"
|
||||
@submit.prevent
|
||||
>
|
||||
<template v-for="(item, index) in form.debug_field_list" :key="index">
|
||||
<el-form-item
|
||||
:label="item.name"
|
||||
:prop="'debug_field_list.' + index + '.value'"
|
||||
:rules="{
|
||||
required: item.is_required,
|
||||
message: $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
|
||||
trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<div class="flex">
|
||||
<span
|
||||
>{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
|
||||
>
|
||||
<el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="item.value"
|
||||
:placeholder="$t('views.functionLib.functionForm.form.param.inputPlaceholder')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="submit(FormRef)" :loading="loading">
|
||||
{{ $t('views.functionLib.functionForm.form.debug.run') }}
|
||||
</el-button>
|
||||
<div v-if="showResult" class="mt-8">
|
||||
<h4 class="title-decoration-1 mb-16 mt-16">
|
||||
{{ $t('views.functionLib.functionForm.form.debug.runResult') }}
|
||||
</h4>
|
||||
<div class="mb-16">
|
||||
<el-alert
|
||||
v-if="isSuccess"
|
||||
:title="$t('views.functionLib.functionForm.form.debug.runSuccess')"
|
||||
type="success"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
<el-alert
|
||||
v-else
|
||||
:title="$t('views.functionLib.functionForm.form.debug.runFailed')"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="lighter mb-8">{{ $t('views.functionLib.functionForm.form.debug.output') }}</p>
|
||||
|
||||
<el-card
|
||||
:class="isSuccess ? '' : 'danger'"
|
||||
class="pre-wrap"
|
||||
shadow="never"
|
||||
style="max-height: 350px; overflow: scroll"
|
||||
>
|
||||
{{ String(result) == '0' ? 0 : result || '-' }}
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import functionLibApi from '@/api/function-lib'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import DynamicsForm from '@/components/dynamics-form/index.vue'
|
||||
|
||||
const FormRef = ref()
|
||||
const dynamicsFormRef = ref()
|
||||
const loading = ref(false)
|
||||
const debugVisible = ref(false)
|
||||
const showResult = ref(false)
|
||||
const isSuccess = ref(false)
|
||||
const result = ref('')
|
||||
|
||||
const form = ref<any>({
|
||||
debug_field_list: [],
|
||||
code: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
init_params: {}
|
||||
})
|
||||
|
||||
watch(debugVisible, (bool) => {
|
||||
if (!bool) {
|
||||
showResult.value = false
|
||||
isSuccess.value = false
|
||||
result.value = ''
|
||||
form.value = {
|
||||
debug_field_list: [],
|
||||
code: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
init_params: {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
const validate = formEl ? formEl.validate() : Promise.resolve()
|
||||
Promise.all([dynamicsFormRef.value?.validate(), validate]).then(() => {
|
||||
functionLibApi.postFunctionLibDebug(form.value, loading).then((res) => {
|
||||
if (res.code === 500) {
|
||||
showResult.value = true
|
||||
isSuccess.value = false
|
||||
result.value = res.message
|
||||
} else {
|
||||
showResult.value = true
|
||||
isSuccess.value = true
|
||||
result.value = res.data
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const open = (data: any) => {
|
||||
if (data.input_field_list.length > 0) {
|
||||
data.input_field_list.forEach((item: any) => {
|
||||
form.value.debug_field_list.push({
|
||||
value: '',
|
||||
...item
|
||||
})
|
||||
})
|
||||
}
|
||||
form.value.code = data.code
|
||||
form.value.input_field_list = data.input_field_list
|
||||
form.value.init_field_list = data.init_field_list
|
||||
debugVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,518 @@
|
|||
<template>
|
||||
<el-drawer v-model="visible" size="60%" :before-close="close">
|
||||
<template #header>
|
||||
<h4>{{ title }}</h4>
|
||||
</template>
|
||||
<div>
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('views.functionLib.functionForm.title.baseInfo') }}
|
||||
</h4>
|
||||
<el-form
|
||||
ref="FormRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
v-loading="loading"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item
|
||||
:label="$t('views.functionLib.functionForm.form.functionName.label')"
|
||||
prop="name"
|
||||
>
|
||||
<div class="flex w-full">
|
||||
<div
|
||||
v-if="form.id"
|
||||
class="edit-avatar mr-12"
|
||||
@mouseenter="showEditIcon = true"
|
||||
@mouseleave="showEditIcon = false"
|
||||
>
|
||||
<AppAvatar
|
||||
v-if="isAppIcon(form.icon)"
|
||||
:id="form.id"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
>
|
||||
<img :src="String(form.icon)" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="form.name"
|
||||
:id="form.id"
|
||||
:name="form.name"
|
||||
pinyinColor
|
||||
shape="square"
|
||||
:size="32"
|
||||
/>
|
||||
<AppAvatar
|
||||
v-if="showEditIcon"
|
||||
:id="form.id"
|
||||
shape="square"
|
||||
class="edit-mask"
|
||||
:size="32"
|
||||
@click="openEditAvatar"
|
||||
>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</AppAvatar>
|
||||
</div>
|
||||
<AppAvatar shape="square" style="background: #34c724" class="mr-12" v-else>
|
||||
<img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
|
||||
</AppAvatar>
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
:placeholder="$t('views.functionLib.functionForm.form.functionName.placeholder')"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
@blur="form.name = form.name?.trim()"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('views.functionLib.functionForm.form.functionDescription.label')">
|
||||
<el-input
|
||||
v-model="form.desc"
|
||||
type="textarea"
|
||||
:placeholder="$t('views.functionLib.functionForm.form.functionDescription.placeholder')"
|
||||
maxlength="128"
|
||||
show-word-limit
|
||||
:autosize="{ minRows: 3 }"
|
||||
@blur="form.desc = form.desc?.trim()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!--
|
||||
<el-form-item prop="permission_type">
|
||||
<template #label>
|
||||
<span>{{ $t('views.functionLib.functionForm.form.permission_type.label') }}</span>
|
||||
</template>
|
||||
|
||||
<el-radio-group v-model="form.permission_type" class="card__radio">
|
||||
<el-row :gutter="16">
|
||||
<template v-for="(value, key) of PermissionType" :key="key">
|
||||
<el-col :span="12">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="mb-16"
|
||||
:class="form.permission_type === key ? 'active' : ''"
|
||||
>
|
||||
<el-radio :value="key" size="large">
|
||||
<p class="mb-4">{{ $t(value) }}</p>
|
||||
<el-text type="info">
|
||||
{{ $t(PermissionDesc[key]) }}
|
||||
</el-text>
|
||||
</el-radio>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
-->
|
||||
</el-form>
|
||||
<div class="flex-between">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.initParam') }}
|
||||
</h4>
|
||||
<el-button link type="primary" @click="openAddInitDialog()">
|
||||
<el-icon class="mr-4"><Plus /></el-icon> {{ $t('common.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table ref="initFieldTableRef" :data="form.init_field_list" class="mb-16">
|
||||
<el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')">
|
||||
<template #default="{ row }">
|
||||
<span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('dynamicsForm.paramForm.input_type.label')">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
|
||||
$t('dynamicsForm.input_type_list.TextInput')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
|
||||
$t('dynamicsForm.input_type_list.PasswordInput')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
|
||||
$t('dynamicsForm.input_type_list.Slider')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'SwitchInput'">{{
|
||||
$t('dynamicsForm.input_type_list.SwitchInput')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'SingleSelect'">{{
|
||||
$t('dynamicsForm.input_type_list.SingleSelect')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'MultiSelect'">{{
|
||||
$t('dynamicsForm.input_type_list.MultiSelect')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'RadioCard'">{{
|
||||
$t('dynamicsForm.input_type_list.RadioCard')
|
||||
}}</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'DatePicker'">{{
|
||||
$t('dynamicsForm.input_type_list.DatePicker')
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.required')">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.required" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.operation')" align="left" width="90">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddInitDialog(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
|
||||
<el-button type="primary" text @click="deleteInitField($index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex-between">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.inputParam') }}
|
||||
<el-text type="info" class="color-secondary">
|
||||
{{ $t('views.functionLib.functionForm.form.param.paramInfo1') }}
|
||||
</el-text>
|
||||
</h4>
|
||||
<el-button link type="primary" @click="openAddDialog()">
|
||||
<el-icon class="mr-4"><Plus /></el-icon> {{ $t('common.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table ref="inputFieldTableRef" :data="form.input_field_list" class="mb-16">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('views.functionLib.functionForm.form.paramName.label')"
|
||||
/>
|
||||
<el-table-column :label="$t('views.functionLib.functionForm.form.dataType.label')">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.required')">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch size="small" v-model="row.is_required" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="source"
|
||||
:label="$t('views.functionLib.functionForm.form.source.label')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.source === 'custom'
|
||||
? $t('views.functionLib.functionForm.form.source.custom')
|
||||
: $t('views.functionLib.functionForm.form.source.reference')
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.operation')" align="left" width="90">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddDialog(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
|
||||
<el-button type="primary" text @click="deleteField($index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('views.functionLib.functionForm.form.param.code') }}
|
||||
<span style="color: red; margin-left: -10px">*</span>
|
||||
<el-text type="info" class="color-secondary">
|
||||
{{ $t('views.functionLib.functionForm.form.param.paramInfo2') }}
|
||||
</el-text>
|
||||
</h4>
|
||||
|
||||
<div class="mb-8" v-if="showEditor">
|
||||
<CodemirrorEditor
|
||||
:title="$t('views.functionLib.functionForm.form.param.code')"
|
||||
v-model="form.code"
|
||||
@submitDialog="submitCodemirrorEditor"
|
||||
/>
|
||||
</div>
|
||||
<h4 class="title-decoration-1 mb-16 mt-16">
|
||||
{{ $t('common.param.outputParam') }}
|
||||
<el-text type="info" class="color-secondary">
|
||||
{{ $t('views.functionLib.functionForm.form.param.paramInfo1') }}
|
||||
</el-text>
|
||||
</h4>
|
||||
<div class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter">
|
||||
<span>{{ $t('common.result') }} {result}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button :loading="loading" @click="visible = false">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button :loading="loading" @click="openDebug">{{ $t('common.debug') }}</el-button>
|
||||
<el-button type="primary" @click="submit(FormRef)" :loading="loading">
|
||||
{{ isEdit ? $t('common.save') : $t('common.create') }}</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
|
||||
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
|
||||
<UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
|
||||
<EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshFunctionLib" />
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, nextTick } from 'vue'
|
||||
import FieldFormDialog from './FieldFormDialog.vue'
|
||||
import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
|
||||
import type { functionLibData } from '@/api/type/function-lib'
|
||||
import functionLibApi from '@/api/function-lib'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { MsgSuccess, MsgConfirm } from '@/utils/message'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { PermissionType, PermissionDesc } from '@/enums/model'
|
||||
import { t } from '@/locales'
|
||||
import UserFieldFormDialog from '@/workflow/nodes/base-node/component/UserFieldFormDialog.vue'
|
||||
import { isAppIcon } from '@/utils/application'
|
||||
import EditAvatarDialog from './EditAvatarDialog.vue'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
const props = defineProps({
|
||||
title: String
|
||||
})
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
const FieldFormDialogRef = ref()
|
||||
const FunctionDebugDrawerRef = ref()
|
||||
const UserFieldFormDialogRef = ref()
|
||||
const EditAvatarDialogRef = ref()
|
||||
const initFieldTableRef = ref()
|
||||
const inputFieldTableRef = ref()
|
||||
|
||||
const FormRef = ref()
|
||||
|
||||
const isEdit = ref(false)
|
||||
const loading = ref(false)
|
||||
const visible = ref(false)
|
||||
const showEditor = ref(false)
|
||||
const currentIndex = ref<any>(null)
|
||||
const showEditIcon = ref(false)
|
||||
|
||||
const form = ref<functionLibData>({
|
||||
name: '',
|
||||
desc: '',
|
||||
code: '',
|
||||
icon: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
permission_type: 'PRIVATE'
|
||||
})
|
||||
|
||||
watch(visible, (bool) => {
|
||||
if (!bool) {
|
||||
isEdit.value = false
|
||||
showEditor.value = false
|
||||
currentIndex.value = null
|
||||
form.value = {
|
||||
name: '',
|
||||
desc: '',
|
||||
code: '',
|
||||
icon: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
permission_type: 'PRIVATE'
|
||||
}
|
||||
FormRef.value?.clearValidate()
|
||||
}
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.functionLib.functionForm.form.functionName.requiredMessage'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
permission_type: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.functionLib.functionForm.form.permission_type.requiredMessage'),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
function onDragHandle() {
|
||||
// For init_field_list table
|
||||
if (initFieldTableRef.value) {
|
||||
const el = initFieldTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
|
||||
Sortable.create(el, {
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
onEnd: ({ newIndex, oldIndex }) => {
|
||||
if (newIndex === undefined || oldIndex === undefined) return
|
||||
if (newIndex !== oldIndex) {
|
||||
const item = form.value.init_field_list?.splice(oldIndex, 1)[0]
|
||||
form.value.init_field_list?.splice(newIndex, 0, item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// For input_field_list table
|
||||
if (inputFieldTableRef.value) {
|
||||
const el = inputFieldTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
|
||||
Sortable.create(el, {
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
onEnd: ({ newIndex, oldIndex }) => {
|
||||
if (newIndex === undefined || oldIndex === undefined) return
|
||||
if (newIndex !== oldIndex) {
|
||||
const item = form.value.input_field_list?.splice(oldIndex, 1)[0]
|
||||
form.value.input_field_list?.splice(newIndex, 0, item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function submitCodemirrorEditor(val: string) {
|
||||
form.value.code = val
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (isEdit.value || !areAllValuesNonEmpty(form.value)) {
|
||||
visible.value = false
|
||||
} else {
|
||||
MsgConfirm(t('common.tip'), t('views.functionLib.tip.saveMessage'), {
|
||||
confirmButtonText: t('common.confirm'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
visible.value = false
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
function areAllValuesNonEmpty(obj: any) {
|
||||
return Object.values(obj).some((value) => {
|
||||
return Array.isArray(value)
|
||||
? value.length !== 0
|
||||
: value !== null && value !== undefined && value !== ''
|
||||
})
|
||||
}
|
||||
|
||||
function openDebug() {
|
||||
FunctionDebugDrawerRef.value.open(form.value)
|
||||
}
|
||||
|
||||
function deleteField(index: any) {
|
||||
form.value.input_field_list?.splice(index, 1)
|
||||
}
|
||||
|
||||
function openAddDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
FieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function refreshFieldList(data: any) {
|
||||
if (currentIndex.value !== null) {
|
||||
form.value.input_field_list?.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
form.value.input_field_list?.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
}
|
||||
|
||||
function openAddInitDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
UserFieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function refreshInitFieldList(data: any) {
|
||||
if (currentIndex.value !== null) {
|
||||
form.value.init_field_list?.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
form.value.init_field_list?.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
UserFieldFormDialogRef.value.close()
|
||||
}
|
||||
|
||||
function refreshFunctionLib(data: any) {
|
||||
form.value.icon = data
|
||||
// console.log(data)
|
||||
}
|
||||
|
||||
function deleteInitField(index: any) {
|
||||
form.value.init_field_list?.splice(index, 1)
|
||||
}
|
||||
|
||||
function openEditAvatar() {
|
||||
EditAvatarDialogRef.value.open(form.value)
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid: any) => {
|
||||
if (valid) {
|
||||
// console.log(form.value)
|
||||
if (isEdit.value) {
|
||||
functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
|
||||
MsgSuccess(t('common.editSuccess'))
|
||||
emit('refresh', res.data)
|
||||
visible.value = false
|
||||
})
|
||||
} else {
|
||||
functionLibApi.postFunctionLib(form.value, loading).then((res) => {
|
||||
MsgSuccess(t('common.createSuccess'))
|
||||
emit('refresh')
|
||||
visible.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const open = (data: any) => {
|
||||
if (data) {
|
||||
isEdit.value = data?.id ? true : false
|
||||
form.value = cloneDeep(data)
|
||||
}
|
||||
visible.value = true
|
||||
setTimeout(() => {
|
||||
showEditor.value = true
|
||||
}, 100)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
|
||||
<template #header>
|
||||
<div class="flex align-center" style="margin-left: -8px">
|
||||
<el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
|
||||
<el-icon :size="20">
|
||||
<Back />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<h4>{{ $t('common.param.initParam') }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div v-if="form.init_field_list?.length > 0">
|
||||
<DynamicsForm
|
||||
v-model="form.init_params"
|
||||
:model="form.init_params"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
:render_data="form.init_field_list"
|
||||
ref="dynamicsFormRef"
|
||||
>
|
||||
</DynamicsForm>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="submit()" :loading="loading">
|
||||
{{ $t('common.save') }}
|
||||
</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import functionLibApi from '@/api/function-lib'
|
||||
import DynamicsForm from '@/components/dynamics-form/index.vue'
|
||||
import { MsgSuccess } from '@/utils/message'
|
||||
import { t } from '@/locales'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const dynamicsFormRef = ref()
|
||||
const loading = ref(false)
|
||||
const debugVisible = ref(false)
|
||||
|
||||
const form = ref<any>({
|
||||
init_params: {}
|
||||
})
|
||||
|
||||
watch(debugVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
init_params: {},
|
||||
is_active: false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const submit = async () => {
|
||||
dynamicsFormRef.value.validate().then(() => {
|
||||
functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading)
|
||||
.then((res) => {
|
||||
MsgSuccess(t('common.editSuccess'))
|
||||
emit('refresh')
|
||||
debugVisible.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const open = (data: any, is_active: boolean) => {
|
||||
if (data) {
|
||||
form.value = cloneDeep(data)
|
||||
form.value.is_active = is_active
|
||||
}
|
||||
const init_params = form.value.init_field_list
|
||||
.map((item: any) => {
|
||||
if (item.show_default_value === false) {
|
||||
return { [item.field]: undefined }
|
||||
}
|
||||
return { [item.field]: item.default_value }
|
||||
})
|
||||
.reduce((x: any, y: any) => ({ ...x, ...y }), {})
|
||||
form.value.init_params = { ...init_params, ...form.value.init_params }
|
||||
debugVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<el-drawer v-model="visibleInternalDesc" size="60%" :append-to-body="true">
|
||||
<template #header>
|
||||
<div class="flex align-center" style="margin-left: -8px">
|
||||
<el-button class="cursor mr-4" link @click.prevent="visibleInternalDesc = false">
|
||||
<el-icon :size="20">
|
||||
<Back />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<h4>详情</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<div class="flex-between">
|
||||
<div class="title flex align-center">
|
||||
<AppAvatar
|
||||
v-if="isAppIcon(functionDetail?.icon)"
|
||||
shape="square"
|
||||
:size="64"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<img :src="functionDetail?.icon" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="functionDetail?.name"
|
||||
:name="functionDetail?.name"
|
||||
pinyinColor
|
||||
shape="square"
|
||||
:size="64"
|
||||
class="mr-8"
|
||||
/>
|
||||
<div class="ml-16">
|
||||
<h3 class="mb-8">{{ functionDetail.name }}</h3>
|
||||
<el-text type="info" v-if="functionDetail?.desc">
|
||||
{{ functionDetail.desc }}
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<div @click.stop>
|
||||
<el-button type="primary" @click="addInternalFunction(functionDetail)">
|
||||
{{ $t('common.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<el-text type="info">
|
||||
<div>{{ $t('common.author') }}: MaxKB</div>
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<MdPreview
|
||||
ref="editorRef"
|
||||
editorId="preview-only"
|
||||
:modelValue="markdownContent"
|
||||
style="background: none"
|
||||
noImgZoomIn
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { isAppIcon } from '@/utils/application'
|
||||
const emit = defineEmits(['refresh', 'addFunction'])
|
||||
|
||||
const visibleInternalDesc = ref(false)
|
||||
const markdownContent = ref('')
|
||||
const functionDetail = ref<any>({})
|
||||
|
||||
watch(visibleInternalDesc, (bool) => {
|
||||
if (!bool) {
|
||||
markdownContent.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
const open = (data: any, detail: any) => {
|
||||
functionDetail.value = detail
|
||||
if (data) {
|
||||
markdownContent.value = cloneDeep(data)
|
||||
}
|
||||
visibleInternalDesc.value = true
|
||||
}
|
||||
|
||||
const addInternalFunction = (data: any) => {
|
||||
emit('addFunction', data)
|
||||
visibleInternalDesc.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('views.functionLib.functionForm.form.permission_type.label')"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
append-to-body
|
||||
width="450"
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="fieldFormRef"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<el-radio-group v-model="form.permission_type" class="radio-block">
|
||||
<el-radio value="PRIVATE" size="large">
|
||||
{{ $t('common.private') }}
|
||||
<el-text type="info">{{
|
||||
$t('views.template.templateForm.form.permissionType.privateDesc')
|
||||
}}</el-text>
|
||||
</el-radio>
|
||||
<el-radio value="PUBLIC" size="large">
|
||||
{{ $t('common.public') }}
|
||||
<el-text type="info">{{
|
||||
$t('views.template.templateForm.form.permissionType.publicDesc')
|
||||
}}</el-text>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
|
||||
<el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
|
||||
{{ isEdit ? $t('common.save') : $t('common.add') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { t } from '@/locales'
|
||||
import functionLibApi from '@/api/function-lib'
|
||||
import { MsgSuccess } from '@/utils/message'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const fieldFormRef = ref()
|
||||
const loading = ref<boolean>(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const form = ref<any>({
|
||||
permission_type: 'PRIVATE'
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
permission_type: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.functionLib.functionForm.form.paramName.placeholder'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
permission_type: 'PRIVATE'
|
||||
}
|
||||
isEdit.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const open = (row: any) => {
|
||||
if (row) {
|
||||
form.value = cloneDeep(row)
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
|
||||
MsgSuccess(t('common.editSuccess'))
|
||||
emit('refresh')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,623 @@
|
|||
<template>
|
||||
<div class="function-lib-list-container p-24" style="padding-top: 16px">
|
||||
<el-tabs v-model="functionType" @tab-change="tabChangeHandle">
|
||||
<el-tab-pane :label="$t('views.functionLib.title')" name="PUBLIC"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('views.functionLib.internalTitle')" name="INTERNAL"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="flex-between mb-16">
|
||||
<h4></h4>
|
||||
<div class="flex-between">
|
||||
<el-select
|
||||
v-if="functionType === 'PUBLIC'"
|
||||
v-model="selectUserId"
|
||||
class="mr-12"
|
||||
style="max-width: 240px; width: 150px"
|
||||
@change="searchHandle"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
@change="searchHandle"
|
||||
:placeholder="$t('views.functionLib.searchBar.placeholder')"
|
||||
prefix-icon="Search"
|
||||
class="w-240"
|
||||
style="max-width: 240px"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-loading.fullscreen.lock="
|
||||
(paginationConfig.current_page === 1 && loading) || changeStateloading
|
||||
"
|
||||
>
|
||||
<InfiniteScroll
|
||||
:size="functionLibList.length"
|
||||
:total="paginationConfig.total"
|
||||
:page_size="paginationConfig.page_size"
|
||||
v-model:current_page="paginationConfig.current_page"
|
||||
@load="getList"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-row :gutter="15">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
:xl="6"
|
||||
class="mb-16"
|
||||
v-if="functionType === 'PUBLIC'"
|
||||
>
|
||||
<el-card shadow="hover" class="application-card-add" style="--el-card-padding: 8px">
|
||||
<div class="card-add-button flex align-center cursor p-8" @click="openCreateDialog()">
|
||||
<AppIcon iconName="app-add-application" class="mr-8"></AppIcon>
|
||||
{{ $t('views.functionLib.createFunction') }}
|
||||
</div>
|
||||
<el-divider style="margin: 8px 0" />
|
||||
<el-upload
|
||||
ref="elUploadRef"
|
||||
:file-list="[]"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:limit="1"
|
||||
:on-change="(file: any, fileList: any) => importFunctionLib(file)"
|
||||
class="card-add-button"
|
||||
>
|
||||
<div class="flex align-center cursor p-8">
|
||||
<AppIcon iconName="app-import" class="mr-8"></AppIcon>
|
||||
{{ $t('views.functionLib.importFunction') }}
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
:xl="6"
|
||||
v-for="(item, index) in functionLibList"
|
||||
:key="index"
|
||||
class="mb-16"
|
||||
>
|
||||
<CardBox
|
||||
v-if="functionType === 'PUBLIC'"
|
||||
:title="item.name"
|
||||
:description="item.desc"
|
||||
class="function-lib-card"
|
||||
@click="openCreateDialog(item)"
|
||||
:class="item.permission_type === 'PUBLIC' && !canEdit(item) ? '' : 'cursor'"
|
||||
>
|
||||
<template #icon>
|
||||
<AppAvatar
|
||||
v-if="isAppIcon(item?.icon)"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<img :src="item?.icon" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="item?.name"
|
||||
:name="item?.name"
|
||||
pinyinColor
|
||||
shape="square"
|
||||
:size="32"
|
||||
class="mr-8"
|
||||
/>
|
||||
</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-button">
|
||||
<el-tag
|
||||
class="info-tag"
|
||||
v-if="item.permission_type === 'PUBLIC'"
|
||||
style="height: 22px"
|
||||
>
|
||||
{{ $t('common.public') }}</el-tag
|
||||
>
|
||||
<el-tag
|
||||
class="danger-tag"
|
||||
v-else-if="item.permission_type === 'PRIVATE'"
|
||||
style="height: 22px"
|
||||
>
|
||||
{{ $t('common.private') }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="footer-content flex-between">
|
||||
<div>
|
||||
<span v-if="item.template_id"> {{ $t('common.author') }}: MaxKB</span>
|
||||
</div>
|
||||
<div @click.stop>
|
||||
<el-switch
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
v-model="item.is_active"
|
||||
@change="changeState($event, item)"
|
||||
size="small"
|
||||
class="mr-4"
|
||||
/>
|
||||
<el-divider direction="vertical" />
|
||||
<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="item.template_id"
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
@click.stop="addInternalFunction(item, true)"
|
||||
>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
{{ $t('common.edit') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="!item.template_id"
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
@click.stop="openCreateDialog(item)"
|
||||
>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
{{ $t('common.edit') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
v-if="!item.template_id"
|
||||
@click.stop="copyFunctionLib(item)"
|
||||
>
|
||||
<AppIcon iconName="app-copy"></AppIcon>
|
||||
{{ $t('common.copy') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="item.init_field_list?.length > 0"
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
@click.stop="configInitParams(item)"
|
||||
>
|
||||
<AppIcon iconName="app-operation" class="mr-4"></AppIcon>
|
||||
{{ $t('common.param.initParam') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
@click.stop="configPermission(item)"
|
||||
>
|
||||
<el-icon><User /></el-icon>
|
||||
{{ $t('views.functionLib.functionForm.form.permission_type.label') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
v-if="!item.template_id"
|
||||
@click.stop="exportFunctionLib(item)"
|
||||
>
|
||||
<AppIcon iconName="app-export"></AppIcon>
|
||||
{{ $t('common.export') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
|
||||
@click.stop="deleteFunctionLib(item)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
{{ $t('common.delete') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
<CardBox
|
||||
v-if="functionType === 'INTERNAL'"
|
||||
:title="item.name"
|
||||
:description="item.desc"
|
||||
class="function-lib-card"
|
||||
@click="openDescDrawer(item)"
|
||||
:class="item.permission_type === 'PUBLIC' && !canEdit(item) ? '' : 'cursor'"
|
||||
>
|
||||
<template #icon>
|
||||
<AppAvatar
|
||||
v-if="isAppIcon(item?.icon)"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<img :src="item?.icon" alt="" />
|
||||
</AppAvatar>
|
||||
<AppAvatar
|
||||
v-else-if="item?.name"
|
||||
:name="item?.name"
|
||||
pinyinColor
|
||||
shape="square"
|
||||
:size="32"
|
||||
class="mr-8"
|
||||
/>
|
||||
</template>
|
||||
<div class="status-button"></div>
|
||||
<template #footer>
|
||||
<div class="footer-content flex-between">
|
||||
<div>{{ $t('common.author') }}: MaxKB</div>
|
||||
<div @click.stop>
|
||||
<el-button type="primary" link @click="addInternalFunction(item)">
|
||||
{{ $t('common.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
<FunctionFormDrawer ref="FunctionFormDrawerRef" @refresh="refresh" :title="title" />
|
||||
<PermissionDialog ref="PermissionDialogRef" @refresh="refresh" />
|
||||
<AddInternalFunctionDialog
|
||||
ref="AddInternalFunctionDialogRef"
|
||||
@refresh="confirmAddInternalFunction"
|
||||
/>
|
||||
<InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
|
||||
<InternalDescDrawer ref="InternalDescDrawerRef" @addFunction="addInternalFunction" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch, nextTick } from 'vue'
|
||||
import { cloneDeep, get } from 'lodash'
|
||||
import functionLibApi from '@/api/function-lib'
|
||||
import FunctionFormDrawer from './component/FunctionFormDrawer.vue'
|
||||
import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
|
||||
import useStore from '@/stores'
|
||||
import applicationApi from '@/api/application'
|
||||
import { t } from '@/locales'
|
||||
import PermissionDialog from '@/views/function-lib/component/PermissionDialog.vue'
|
||||
import InitParamDrawer from '@/views/function-lib/component/InitParamDrawer.vue'
|
||||
import InternalDescDrawer from '@/views/function-lib/component/InternalDescDrawer.vue'
|
||||
import { isAppIcon } from '@/utils/application'
|
||||
import InfiniteScroll from '@/components/infinite-scroll/index.vue'
|
||||
import CardBox from '@/components/card-box/index.vue'
|
||||
import AddInternalFunctionDialog from '@/views/function-lib/component/AddInternalFunctionDialog.vue'
|
||||
|
||||
const { user } = useStore()
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const InternalDescDrawerRef = ref()
|
||||
const FunctionFormDrawerRef = ref()
|
||||
const PermissionDialogRef = ref()
|
||||
const AddInternalFunctionDialogRef = ref()
|
||||
const InitParamDrawerRef = ref()
|
||||
|
||||
const functionLibList = ref<any[]>([])
|
||||
|
||||
const paginationConfig = reactive({
|
||||
current_page: 1,
|
||||
page_size: 30,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const searchValue = ref('')
|
||||
const title = ref('')
|
||||
const changeStateloading = ref(false)
|
||||
|
||||
interface UserOption {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
const userOptions = ref<UserOption[]>([])
|
||||
|
||||
const selectUserId = ref('all')
|
||||
const elUploadRef = ref<any>()
|
||||
|
||||
const functionType = ref('PUBLIC')
|
||||
|
||||
watch(
|
||||
functionType,
|
||||
(val) => {
|
||||
paginationConfig.total = 0
|
||||
paginationConfig.current_page = 1
|
||||
functionLibList.value = []
|
||||
getList()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function tabChangeHandle() {
|
||||
selectUserId.value = 'all'
|
||||
searchValue.value = ''
|
||||
}
|
||||
|
||||
const canEdit = (row: any) => {
|
||||
return user.userInfo?.id === row?.user_id
|
||||
}
|
||||
|
||||
function openCreateDialog(data?: any) {
|
||||
// 有template_id的不允许编辑，是模板转换来的
|
||||
if (data?.template_id) {
|
||||
return
|
||||
}
|
||||
// console.log(data)
|
||||
title.value = data ? t('views.functionLib.editFunction') : t('views.functionLib.createFunction')
|
||||
if (data) {
|
||||
if (data?.permission_type !== 'PUBLIC' || canEdit(data)) {
|
||||
functionLibApi.getFunctionLibById(data?.id, changeStateloading).then((res) => {
|
||||
FunctionFormDrawerRef.value.open(res.data)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
FunctionFormDrawerRef.value.open(data)
|
||||
}
|
||||
}
|
||||
|
||||
async function openDescDrawer(row: any) {
|
||||
const index = row.icon.replace('icon.png', 'detail.md')
|
||||
const response = await fetch(index)
|
||||
const content = await response.text()
|
||||
InternalDescDrawerRef.value.open(content, row)
|
||||
}
|
||||
|
||||
function addInternalFunction(data?: any, isEdit?: boolean) {
|
||||
AddInternalFunctionDialogRef.value.open(data, isEdit)
|
||||
}
|
||||
|
||||
function confirmAddInternalFunction(data?: any, isEdit?: boolean) {
|
||||
if (isEdit) {
|
||||
functionLibApi.putFunctionLib(data?.id as string, data, loading).then((res) => {
|
||||
MsgSuccess(t('common.saveSuccess'))
|
||||
searchHandle()
|
||||
})
|
||||
} else {
|
||||
functionLibApi
|
||||
.addInternalFunction(data.id, { name: data.name }, changeStateloading)
|
||||
.then((res) => {
|
||||
MsgSuccess(t('common.addSuccess'))
|
||||
searchHandle()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function searchHandle() {
|
||||
if (user.userInfo) {
|
||||
localStorage.setItem(user.userInfo.id + 'function', selectUserId.value)
|
||||
}
|
||||
paginationConfig.total = 0
|
||||
paginationConfig.current_page = 1
|
||||
functionLibList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
async function changeState(bool: Boolean, row: any) {
|
||||
if (!bool) {
|
||||
MsgConfirm(
|
||||
`${t('views.functionLib.disabled.confirmTitle')}${row.name} ?`,
|
||||
t('views.functionLib.disabled.confirmMessage'),
|
||||
{
|
||||
confirmButtonText: t('views.functionLib.setting.disabled'),
|
||||
confirmButtonClass: 'danger'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const obj = {
|
||||
is_active: bool
|
||||
}
|
||||
functionLibApi.putFunctionLib(row.id, obj, changeStateloading).then((res) => {})
|
||||
})
|
||||
.catch(() => {
|
||||
row.is_active = true
|
||||
})
|
||||
} else {
|
||||
const res = await functionLibApi.getFunctionLibById(row.id, changeStateloading)
|
||||
if (
|
||||
!res.data.init_params &&
|
||||
res.data.init_field_list &&
|
||||
res.data.init_field_list.length > 0 &&
|
||||
res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value).length !==
|
||||
res.data.init_field_list.length
|
||||
) {
|
||||
InitParamDrawerRef.value.open(res.data, bool)
|
||||
row.is_active = false
|
||||
return
|
||||
}
|
||||
const init_params = res.data.init_field_list.reduce((acc: any, item: any) => {
|
||||
acc[item.field] = item.default_value
|
||||
return acc
|
||||
}, {})
|
||||
const obj = {
|
||||
is_active: bool,
|
||||
init_params: init_params,
|
||||
init_field_list: res.data.init_field_list
|
||||
}
|
||||
functionLibApi.putFunctionLib(row.id, obj, changeStateloading).then((res) => {})
|
||||
}
|
||||
}
|
||||
|
||||
function deleteFunctionLib(row: any) {
|
||||
MsgConfirm(
|
||||
`${t('views.functionLib.delete.confirmTitle')}${row.name} ?`,
|
||||
t('views.functionLib.delete.confirmMessage'),
|
||||
{
|
||||
confirmButtonText: t('common.confirm'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
confirmButtonClass: 'danger'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
functionLibApi.delFunctionLib(row.id, loading).then(() => {
|
||||
const index = functionLibList.value.findIndex((v) => v.id === row.id)
|
||||
functionLibList.value.splice(index, 1)
|
||||
MsgSuccess(t('common.deleteSuccess'))
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function copyFunctionLib(row: any) {
|
||||
title.value = t('views.functionLib.copyFunction')
|
||||
const obj = cloneDeep(row)
|
||||
delete obj['id']
|
||||
obj['name'] = obj['name'] + ` ${t('views.functionLib.functionForm.title.copy')}`
|
||||
FunctionFormDrawerRef.value.open(obj)
|
||||
}
|
||||
|
||||
function exportFunctionLib(row: any) {
|
||||
functionLibApi.exportFunctionLib(row.id, row.name, loading).catch((e: any) => {
|
||||
if (e.response.status !== 403) {
|
||||
e.response.data.text().then((res: string) => {
|
||||
MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function configPermission(item: any) {
|
||||
PermissionDialogRef.value.open(item)
|
||||
}
|
||||
|
||||
function configInitParams(item: any) {
|
||||
functionLibApi.getFunctionLibById(item?.id, changeStateloading).then((res) => {
|
||||
InitParamDrawerRef.value.open(res.data)
|
||||
})
|
||||
}
|
||||
|
||||
function importFunctionLib(file: any) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file.raw, file.name)
|
||||
elUploadRef.value.clearFiles()
|
||||
functionLibApi
|
||||
.importFunctionLib(formData, loading)
|
||||
.then(async (res: any) => {
|
||||
if (res?.data) {
|
||||
searchHandle()
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
if (e.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')
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
if (userOptions.value?.length === 0) {
|
||||
await getUserList()
|
||||
}
|
||||
const params = {
|
||||
...(searchValue.value && { name: searchValue.value }),
|
||||
...(functionType.value && { function_type: functionType.value }),
|
||||
...(selectUserId.value &&
|
||||
selectUserId.value !== 'all' && { select_user_id: selectUserId.value })
|
||||
}
|
||||
functionLibApi.getFunctionLib(paginationConfig, params, loading).then((res: any) => {
|
||||
res.data.records.forEach((item: any) => {
|
||||
if (user.userInfo && item.user_id === user.userInfo.id) {
|
||||
item.username = user.userInfo.username
|
||||
} else {
|
||||
item.username = userOptions.value.find((v) => v.value === item.user_id)?.label
|
||||
}
|
||||
})
|
||||
functionLibList.value = [...functionLibList.value, ...res.data.records]
|
||||
paginationConfig.total = res.data.total
|
||||
})
|
||||
}
|
||||
|
||||
function refresh(data: any) {
|
||||
if (data) {
|
||||
const index = functionLibList.value.findIndex((v) => v.id === data.id)
|
||||
if (user.userInfo && data.user_id === user.userInfo.id) {
|
||||
data.username = user.userInfo.username
|
||||
} else {
|
||||
data.username = userOptions.value.find((v) => v.value === data.user_id)?.label
|
||||
}
|
||||
functionLibList.value.splice(index, 1, data)
|
||||
}
|
||||
paginationConfig.total = 0
|
||||
paginationConfig.current_page = 1
|
||||
functionLibList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
async function getUserList() {
|
||||
const res = await applicationApi.getUserList('FUNCTION', loading)
|
||||
if (res.data) {
|
||||
userOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
label: item.username,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
if (user.userInfo) {
|
||||
const selectUserIdValue = localStorage.getItem(user.userInfo.id + 'function')
|
||||
if (selectUserIdValue && userOptions.value.find((v) => v.value === selectUserIdValue)) {
|
||||
selectUserId.value = selectUserIdValue
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.application-card-add {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
min-height: var(--card-min-height);
|
||||
border: 1px dashed var(--el-border-color);
|
||||
background: var(--el-disabled-bg-color);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-card-bg-color);
|
||||
background-color: var(--el-card-bg-color);
|
||||
}
|
||||
|
||||
.card-add-button {
|
||||
&:hover {
|
||||
border-radius: 4px;
|
||||
background: var(--app-text-color-light-1);
|
||||
}
|
||||
|
||||
:deep(.el-upload) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application-card {
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.function-lib-list-container {
|
||||
.status-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 15px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue