184 changed files with 8 additions and 12744 deletions
@ -1,26 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { computed, unref } from 'vue' |
|
||||||
import { Tooltip } from 'ant-design-vue' |
|
||||||
import { useFullscreen } from '@vueuse/core' |
|
||||||
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
|
|
||||||
defineOptions({ name: 'FullScreen' }) |
|
||||||
const { t } = useI18n() |
|
||||||
const { toggle, isFullscreen } = useFullscreen() |
|
||||||
// 重新检查全屏状态 |
|
||||||
isFullscreen.value = !!document.fullscreenElement |
|
||||||
|
|
||||||
const getTitle = computed(() => { |
|
||||||
return unref(isFullscreen) ? t('layout.header.tooltipExitFull') : t('layout.header.tooltipEntryFull') |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<Tooltip :title="getTitle" placement="bottom" :mouse-enter-delay="0.5"> |
|
||||||
<span @click="toggle"> |
|
||||||
<FullscreenOutlined v-if="!isFullscreen" /> |
|
||||||
<FullscreenExitOutlined v-else /> |
|
||||||
</span> |
|
||||||
</Tooltip> |
|
||||||
</template> |
|
||||||
@ -1,121 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { computed, ref, unref, watch } from 'vue' |
|
||||||
import { Avatar, List, Tag, Typography } from 'ant-design-vue' |
|
||||||
import type { ListItem } from './data' |
|
||||||
import { isNumber } from '@/utils/is' |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
list: { |
|
||||||
type: Array as PropType<ListItem[]>, |
|
||||||
default: () => [], |
|
||||||
}, |
|
||||||
pageSize: { |
|
||||||
type: [Boolean, Number] as PropType<boolean | number>, |
|
||||||
default: 5, |
|
||||||
}, |
|
||||||
currentPage: { |
|
||||||
type: Number, |
|
||||||
default: 1, |
|
||||||
}, |
|
||||||
titleRows: { |
|
||||||
type: Number, |
|
||||||
default: 1, |
|
||||||
}, |
|
||||||
descRows: { |
|
||||||
type: Number, |
|
||||||
default: 2, |
|
||||||
}, |
|
||||||
onTitleClick: { |
|
||||||
type: Function as PropType<(Recordable) => void>, |
|
||||||
}, |
|
||||||
}) |
|
||||||
const emit = defineEmits(['update:currentPage']) |
|
||||||
const current = ref(props.currentPage || 1) |
|
||||||
const getData = computed(() => { |
|
||||||
const { pageSize, list } = props |
|
||||||
if (pageSize === false) |
|
||||||
return [] |
|
||||||
const size = isNumber(pageSize) ? pageSize : 5 |
|
||||||
return list.slice(size * (unref(current) - 1), size * unref(current)) |
|
||||||
}) |
|
||||||
watch( |
|
||||||
() => props.currentPage, |
|
||||||
(v) => { |
|
||||||
current.value = v |
|
||||||
}, |
|
||||||
) |
|
||||||
const isTitleClickable = computed(() => !!props.onTitleClick) |
|
||||||
const getPagination = computed(() => { |
|
||||||
const { list, pageSize } = props |
|
||||||
// compatible line 104 |
|
||||||
// if typeof pageSize is boolean, Number(true) && 5 = 5, Number(false) && 5 = 0 |
|
||||||
const size = isNumber(pageSize) ? pageSize : Number(pageSize) && 5 |
|
||||||
if (size > 0 && list && list.length > size) { |
|
||||||
return { |
|
||||||
total: list.length, |
|
||||||
pageSize: size, |
|
||||||
// size: 'small', |
|
||||||
current: unref(current), |
|
||||||
onChange(page) { |
|
||||||
current.value = page |
|
||||||
emit('update:currentPage', page) |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
else { |
|
||||||
return false |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
function handleTitleClick(item: ListItem) { |
|
||||||
props.onTitleClick && props.onTitleClick(item) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<List class="display-none" bordered :pagination="getPagination"> |
|
||||||
<template v-for="item in getData" :key="item.id"> |
|
||||||
<List.Item class="cursor-pointer overflow-hidden p-1.5 transition-all delay-300"> |
|
||||||
<List.Item.Meta> |
|
||||||
<template #title> |
|
||||||
<div class="mb-2 font-normal"> |
|
||||||
<Typography.Paragraph |
|
||||||
style="width: 100%; margin-bottom: 0 !important" |
|
||||||
:style="{ cursor: isTitleClickable ? 'pointer' : '' }" |
|
||||||
:delete="!!item.titleDelete" |
|
||||||
:ellipsis="$props.titleRows && $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: !!item.title } : false" |
|
||||||
:content="item.title" |
|
||||||
@click="handleTitleClick(item)" |
|
||||||
/> |
|
||||||
<div v-if="item.extra" class="float-right mr-0 font-normal -mt-0.375"> |
|
||||||
<Tag class="mr-0" :color="item.color"> |
|
||||||
{{ item.extra }} |
|
||||||
</Tag> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<template #avatar> |
|
||||||
<Avatar v-if="item.avatar" class="mt-1" :src="item.avatar" /> |
|
||||||
<span v-else> {{ item.avatar }}</span> |
|
||||||
</template> |
|
||||||
|
|
||||||
<template #description> |
|
||||||
<div> |
|
||||||
<div v-if="item.description" class="text-xs/18"> |
|
||||||
<Typography.Paragraph |
|
||||||
style="width: 100%; margin-bottom: 0 !important" |
|
||||||
:ellipsis="$props.descRows && $props.descRows > 0 ? { rows: $props.descRows, tooltip: !!item.description } : false" |
|
||||||
:content="item.description" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div class="mt-1 text-xs/18"> |
|
||||||
{{ item.datetime }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</List.Item.Meta> |
|
||||||
</List.Item> |
|
||||||
</template> |
|
||||||
</List> |
|
||||||
</template> |
|
||||||
@ -1,192 +0,0 @@ |
|||||||
export interface ListItem { |
|
||||||
id: string |
|
||||||
avatar: string |
|
||||||
// 通知的标题内容
|
|
||||||
title: string |
|
||||||
// 是否在标题上显示删除线
|
|
||||||
titleDelete?: boolean |
|
||||||
datetime: string |
|
||||||
type: string |
|
||||||
read?: boolean |
|
||||||
description: string |
|
||||||
clickClose?: boolean |
|
||||||
extra?: string |
|
||||||
color?: string |
|
||||||
} |
|
||||||
|
|
||||||
export interface TabItem { |
|
||||||
key: string |
|
||||||
name: string |
|
||||||
list: ListItem[] |
|
||||||
unreadlist?: ListItem[] |
|
||||||
} |
|
||||||
|
|
||||||
export const tabListData: TabItem[] = [ |
|
||||||
{ |
|
||||||
key: '1', |
|
||||||
name: '通知', |
|
||||||
list: [ |
|
||||||
{ |
|
||||||
id: '000000001', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', |
|
||||||
title: '你收到了 14 份新周报', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-09', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000002', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', |
|
||||||
title: '你推荐的 曲妮妮 已通过第三轮面试', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-08', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000003', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', |
|
||||||
title: '这种模板可以区分多种通知类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
// read: true,
|
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000004', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '左侧图标用于区分不同的类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000005', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '标题可以设置自动显示省略号，本例中标题行数已设为1行，如果内容超过1行将自动截断并支持tooltip显示完整标题。', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000006', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '左侧图标用于区分不同的类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000007', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '左侧图标用于区分不同的类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000008', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '左侧图标用于区分不同的类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000009', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '左侧图标用于区分不同的类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000010', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', |
|
||||||
title: '左侧图标用于区分不同的类型', |
|
||||||
description: '', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '1', |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '2', |
|
||||||
name: '消息', |
|
||||||
list: [ |
|
||||||
{ |
|
||||||
id: '000000006', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', |
|
||||||
title: '曲丽丽 评论了你', |
|
||||||
description: '描述信息描述信息描述信息', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '2', |
|
||||||
clickClose: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000007', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', |
|
||||||
title: '朱偏右 回复了你', |
|
||||||
description: '这种模板用于提醒谁与你发生了互动', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '2', |
|
||||||
clickClose: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000008', |
|
||||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', |
|
||||||
title: '标题', |
|
||||||
description: |
|
||||||
'请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容', |
|
||||||
datetime: '2017-08-07', |
|
||||||
type: '2', |
|
||||||
clickClose: true, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '3', |
|
||||||
name: '待办', |
|
||||||
list: [ |
|
||||||
{ |
|
||||||
id: '000000009', |
|
||||||
avatar: '', |
|
||||||
title: '任务名称', |
|
||||||
description: '任务需要在 2017-01-12 20:00 前启动', |
|
||||||
datetime: '', |
|
||||||
extra: '未开始', |
|
||||||
color: '', |
|
||||||
type: '3', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000010', |
|
||||||
avatar: '', |
|
||||||
title: '第三方紧急代码变更', |
|
||||||
description: '冠霖 需在 2017-01-07 前完成代码变更任务', |
|
||||||
datetime: '', |
|
||||||
extra: '马上到期', |
|
||||||
color: 'red', |
|
||||||
type: '3', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000011', |
|
||||||
avatar: '', |
|
||||||
title: '信息安全考试', |
|
||||||
description: '指派竹尔于 2017-01-09 前完成更新并发布', |
|
||||||
datetime: '', |
|
||||||
extra: '已耗时 8 天', |
|
||||||
color: 'gold', |
|
||||||
type: '3', |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: '000000012', |
|
||||||
avatar: '', |
|
||||||
title: 'ABCD 版本发布', |
|
||||||
description: '指派竹尔于 2017-01-09 前完成更新并发布', |
|
||||||
datetime: '', |
|
||||||
extra: '进行中', |
|
||||||
color: 'blue', |
|
||||||
type: '3', |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { computed, onMounted } from 'vue' |
|
||||||
import { Badge, Tooltip } from 'ant-design-vue' |
|
||||||
import { BellOutlined } from '@ant-design/icons-vue' |
|
||||||
import { storeToRefs } from 'pinia' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { PageEnum } from '@/enums/pageEnum' |
|
||||||
import { useUserMessageStore } from '@/store/modules/userMessage' |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
|
|
||||||
const store = useUserMessageStore() |
|
||||||
const { unreadCount } = storeToRefs(store) |
|
||||||
const tips = computed<string>(() => { |
|
||||||
if (unreadCount.value === 0) |
|
||||||
return '查看站内信' |
|
||||||
|
|
||||||
return `查看站内信: 未读 ${unreadCount.value} 条` |
|
||||||
}) |
|
||||||
|
|
||||||
onMounted(async () => { |
|
||||||
// 通过store进行更新 |
|
||||||
store.updateUnreadCount() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<Tooltip :title="tips"> |
|
||||||
<Badge :count="unreadCount" :offset="[0, 15]" size="small" @click="go({ path: PageEnum.MESSAGE_PAGE })"> |
|
||||||
<BellOutlined /> |
|
||||||
</Badge> |
|
||||||
</Tooltip> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { computed, unref } from 'vue' |
|
||||||
import { Icon } from '@/components/Icon' |
|
||||||
|
|
||||||
import { useDesign } from '@/hooks/web/useDesign' |
|
||||||
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' |
|
||||||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting' |
|
||||||
import { triggerWindowResize } from '@/utils/event' |
|
||||||
|
|
||||||
defineOptions({ name: 'FoldButton' }) |
|
||||||
|
|
||||||
const { prefixCls } = useDesign('multiple-tabs-content') |
|
||||||
const { getShowMenu, setMenuSetting } = useMenuSetting() |
|
||||||
const { getShowHeader, setHeaderSetting } = useHeaderSetting() |
|
||||||
|
|
||||||
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader)) |
|
||||||
|
|
||||||
const getIcon = computed(() => (unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full')) |
|
||||||
|
|
||||||
function handleFold() { |
|
||||||
const isUnFold = unref(getIsUnFold) |
|
||||||
setMenuSetting({ |
|
||||||
show: isUnFold, |
|
||||||
hidden: !isUnFold, |
|
||||||
}) |
|
||||||
setHeaderSetting({ show: isUnFold }) |
|
||||||
triggerWindowResize() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<span :class="`${prefixCls}__extra-fold`" @click="handleFold"> |
|
||||||
<Icon :icon="getIcon" /> |
|
||||||
</span> |
|
||||||
</template> |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { RedoOutlined } from '@ant-design/icons-vue' |
|
||||||
import { useDesign } from '@/hooks/web/useDesign' |
|
||||||
import { useTabs } from '@/hooks/web/useTabs' |
|
||||||
|
|
||||||
defineOptions({ name: 'TabRedo' }) |
|
||||||
|
|
||||||
const loading = ref(false) |
|
||||||
|
|
||||||
const { prefixCls } = useDesign('multiple-tabs-content') |
|
||||||
const { refreshPage } = useTabs() |
|
||||||
|
|
||||||
async function handleRedo() { |
|
||||||
loading.value = true |
|
||||||
await refreshPage() |
|
||||||
setTimeout(() => { |
|
||||||
loading.value = false |
|
||||||
// Animation execution time |
|
||||||
}, 1200) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<span :class="`${prefixCls}__extra-redo`" @click="handleRedo"> |
|
||||||
<RedoOutlined :spin="loading" /> |
|
||||||
</span> |
|
||||||
</template> |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
import type { AppRouteModule } from '@/router/types' |
|
||||||
|
|
||||||
import { LAYOUT } from '@/router/constant' |
|
||||||
import { t } from '@/hooks/web/useI18n' |
|
||||||
|
|
||||||
const about: AppRouteModule = { |
|
||||||
path: '/about', |
|
||||||
name: 'About', |
|
||||||
component: LAYOUT, |
|
||||||
redirect: '/about/index', |
|
||||||
meta: { |
|
||||||
hideChildrenInMenu: true, |
|
||||||
icon: 'ant-design:pushpin-filled', |
|
||||||
title: t('routes.dashboard.about'), |
|
||||||
orderNo: 100000, |
|
||||||
}, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
path: 'index', |
|
||||||
name: 'AboutPage', |
|
||||||
component: () => import('@/views/base/about/index.vue'), |
|
||||||
meta: { |
|
||||||
title: t('routes.dashboard.about'), |
|
||||||
icon: 'ant-design:pushpin-filled', |
|
||||||
hideMenu: true, |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
} |
|
||||||
|
|
||||||
export default about |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
// github repo url
|
|
||||||
export const GITHUB_URL = 'https://gitee.com/xingyuv/vue-vben-admin' |
|
||||||
|
|
||||||
// vue-vben-admin-next-doc
|
|
||||||
export const DOC_URL = 'http://vben-doc.x-surge.com/' |
|
||||||
|
|
||||||
// site url
|
|
||||||
export const SITE_URL = 'http://static.yudao.iocoder.cn/mp/xinyu370.jpeg' |
|
||||||
@ -1,107 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { h } from 'vue' |
|
||||||
import { Tag } from 'ant-design-vue' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import type { DescItem } from '@/components/Description' |
|
||||||
import { Description, useDescription } from '@/components/Description' |
|
||||||
import { DOC_URL, GITHUB_URL, SITE_URL } from '@/settings/siteSetting' |
|
||||||
|
|
||||||
const { pkg, lastBuildTime } = __APP_INFO__ |
|
||||||
|
|
||||||
const { dependencies, devDependencies, name, version } = pkg |
|
||||||
|
|
||||||
const schema: DescItem[] = [] |
|
||||||
const devSchema: DescItem[] = [] |
|
||||||
|
|
||||||
const commonTagRender = (color: string) => curVal => h(Tag, { color }, () => curVal) |
|
||||||
const commonLinkRender = (text: string) => href => h('a', { href, target: '_blank' }, text) |
|
||||||
|
|
||||||
const infoSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
label: '版本', |
|
||||||
field: 'version', |
|
||||||
render: commonTagRender('blue'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '最后编译时间', |
|
||||||
field: 'lastBuildTime', |
|
||||||
render: commonTagRender('blue'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '文档地址', |
|
||||||
field: 'doc', |
|
||||||
render: commonLinkRender('文档地址'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '预览地址', |
|
||||||
field: 'preview', |
|
||||||
render: commonLinkRender('预览地址'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Github', |
|
||||||
field: 'github', |
|
||||||
render: commonLinkRender('Github'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '外包服务', |
|
||||||
field: 'outsourcing', |
|
||||||
render: commonLinkRender('外包服务'), |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const infoData = { |
|
||||||
version, |
|
||||||
lastBuildTime, |
|
||||||
doc: DOC_URL, |
|
||||||
preview: SITE_URL, |
|
||||||
github: GITHUB_URL, |
|
||||||
outsourcing: SITE_URL, |
|
||||||
} |
|
||||||
|
|
||||||
Object.keys(dependencies).forEach((key) => { |
|
||||||
schema.push({ field: key, label: key }) |
|
||||||
}) |
|
||||||
|
|
||||||
Object.keys(devDependencies).forEach((key) => { |
|
||||||
devSchema.push({ field: key, label: key }) |
|
||||||
}) |
|
||||||
|
|
||||||
const [register] = useDescription({ |
|
||||||
title: '生产环境依赖', |
|
||||||
data: dependencies, |
|
||||||
schema, |
|
||||||
column: 3, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerDev] = useDescription({ |
|
||||||
title: '开发环境依赖', |
|
||||||
data: devDependencies, |
|
||||||
schema: devSchema, |
|
||||||
column: 3, |
|
||||||
}) |
|
||||||
|
|
||||||
const [infoRegister] = useDescription({ |
|
||||||
title: '项目信息', |
|
||||||
data: infoData, |
|
||||||
schema: infoSchema, |
|
||||||
column: 2, |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper title="关于"> |
|
||||||
<template #headerContent> |
|
||||||
<div class="flex items-center justify-between"> |
|
||||||
<span class="flex-1"> |
|
||||||
<a :href="GITHUB_URL" target="_blank">{{ name }}</a> |
|
||||||
基于Vue3.0、Vite、 Ant-Design-Vue 、TypeScript |
|
||||||
的后台解决方案，目标是为中大型项目开发,提供现成的开箱解决方案及丰富的示例,原则上不会限制任何代码用于商用。<br> |
|
||||||
同时，我们也提供<a :href="SITE_URL" target="_blank">外包服务</a>。 |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<Description class="enter-y" @register="infoRegister" /> |
|
||||||
<Description class="enter-y my-4" @register="register" /> |
|
||||||
<Description class="enter-y" @register="registerDev" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { List, Switch } from 'ant-design-vue' |
|
||||||
import { msgNotifyList } from './data' |
|
||||||
import { CollapseContainer } from '@/components/Container/index' |
|
||||||
|
|
||||||
const ListItem = List.Item |
|
||||||
const ListItemMeta = List.Item.Meta |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<CollapseContainer title="新消息通知" :can-expan="false"> |
|
||||||
<List> |
|
||||||
<template v-for="item in msgNotifyList" :key="item.key"> |
|
||||||
<ListItem> |
|
||||||
<ListItemMeta> |
|
||||||
<template #title> |
|
||||||
{{ item.title }} |
|
||||||
<Switch class="float-right mr-7.5 mt-0" checked-children="开" un-checked-children="关" default-checked /> |
|
||||||
</template> |
|
||||||
<template #description> |
|
||||||
<div>{{ item.description }}</div> |
|
||||||
</template> |
|
||||||
</ListItemMeta> |
|
||||||
</ListItem> |
|
||||||
</template> |
|
||||||
</List> |
|
||||||
</CollapseContainer> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中 definition</div> |
|
||||||
</template> |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { VFormCreate } from '@/components/FormDesign' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { getForm } from '@/api/bpm/form' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmFormModal' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const formConfig = ref({ |
|
||||||
schemas: [], |
|
||||||
rule: [], |
|
||||||
option: {}, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
const res = await getForm(data.record.id) |
|
||||||
formConfig.value.schemas = res.fields |
|
||||||
formConfig.value.option = res.conf |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" title="表单详情" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<VFormCreate :form-config="formConfig" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { VFormDesign } from '@/components/FormDesign' |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<VFormDesign /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '表单名', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '备注', |
|
||||||
dataIndex: 'remark', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '表单名', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import BpmFormModal from './FormModal.vue' |
|
||||||
import { columns, searchFormSchema } from './form.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteForm, getFormPage } from '@/api/bpm/form' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmForm' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '流程表单列表', |
|
||||||
api: getFormPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 180, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
// openModal(true, { isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function openForm(record: Recordable) { |
|
||||||
if (typeof record.id === 'number') |
|
||||||
go({ name: 'BpmFormEditor', query: { id: record.id } }) |
|
||||||
} |
|
||||||
|
|
||||||
function openDetail(record: Recordable) { |
|
||||||
openModal(true, { record }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteForm(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['bpm:form:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'bpm:form:update', onClick: openForm.bind(null, record) }, |
|
||||||
{ icon: IconEnum.VIEW, label: t('action.detail'), auth: 'bpm:form:query', onClick: openDetail.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'bpm:form:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<BpmFormModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { formSchema } from './group.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { createUserGroup, getUserGroup, updateUserGroup } from '@/api/bpm/userGroup' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmGroupModal' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const isUpdate = ref(true) |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
resetFields() |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
isUpdate.value = !!data?.isUpdate |
|
||||||
if (unref(isUpdate)) { |
|
||||||
const res = await getUserGroup(data.record.id) |
|
||||||
setFieldsValue({ ...res }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() as any |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
if (unref(isUpdate)) |
|
||||||
await updateUserGroup(values) |
|
||||||
else |
|
||||||
await createUserGroup(values) |
|
||||||
|
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,134 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
import { getListSimpleUsers } from '@/api/system/user' |
|
||||||
|
|
||||||
let users: any[] = [] |
|
||||||
|
|
||||||
async function getUserList() { |
|
||||||
const res = await getListSimpleUsers() |
|
||||||
users = res |
|
||||||
} |
|
||||||
|
|
||||||
await getUserList() |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '组名', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '描述', |
|
||||||
dataIndex: 'description', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '成员', |
|
||||||
dataIndex: 'memberUserIds', |
|
||||||
width: 180, |
|
||||||
customRender: ({ record, text }) => { |
|
||||||
const names: any[] = [] |
|
||||||
if (text) { |
|
||||||
for (const userId of record.memberUserIds) { |
|
||||||
let isUser = false |
|
||||||
users.forEach((user) => { |
|
||||||
if (userId === user.id) { |
|
||||||
names.push(user.nickname) |
|
||||||
isUser = true |
|
||||||
} |
|
||||||
}) |
|
||||||
if (!isUser) |
|
||||||
names.push(`未知(${userId})`) |
|
||||||
} |
|
||||||
return useRender.renderTags(names) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '组名', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '状态', |
|
||||||
field: 'status', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '组名', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '描述', |
|
||||||
field: 'description', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '成员', |
|
||||||
field: 'memberUserIds', |
|
||||||
required: true, |
|
||||||
component: 'ApiTransfer', |
|
||||||
componentProps: { |
|
||||||
api: () => getListSimpleUsers(), |
|
||||||
showSearch: true, |
|
||||||
labelField: 'nickname', |
|
||||||
valueField: 'id', |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '状态', |
|
||||||
field: 'status', |
|
||||||
component: 'RadioGroup', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS), |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import GroupModal from './GroupModal.vue' |
|
||||||
import { columns, searchFormSchema } from './group.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteUserGroup, getUserGroupPage } from '@/api/bpm/userGroup' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmGroup' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '用户分组列表', |
|
||||||
api: getUserGroupPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openModal(true, { isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openModal(true, { record, isUpdate: true }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteUserGroup(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['bpm:user-group:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'bpm:user-group:update', onClick: handleEdit.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'bpm:user-group:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<GroupModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import type { FormSchema } from '@/components/Form' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { importModel } from '@/api/bpm/model' |
|
||||||
|
|
||||||
defineOptions({ name: 'ModelImportForm' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
|
|
||||||
const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '流程标识', |
|
||||||
field: 'key', |
|
||||||
component: 'Input', |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程名称', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程描述', |
|
||||||
field: 'description', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程文件', |
|
||||||
field: 'bpmnFile', |
|
||||||
component: 'FileUpload', |
|
||||||
componentProps: { |
|
||||||
maxCount: 1, |
|
||||||
fileType: 'file', |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
|
|
||||||
const [registerForm, { resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(() => { |
|
||||||
resetFields() |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
console.info(values) |
|
||||||
await importModel(values) |
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" title="导入流程" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { formSchema } from './model.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { createModel, getModel, updateModel } from '@/api/bpm/model' |
|
||||||
|
|
||||||
defineOptions({ name: 'ModelForm' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const isUpdate = ref(true) |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
resetFields() |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
isUpdate.value = !!data?.isUpdate |
|
||||||
if (unref(isUpdate)) { |
|
||||||
const res = await getModel(data.record.id) |
|
||||||
setFieldsValue({ ...res }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() as any |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
if (unref(isUpdate)) |
|
||||||
await updateModel(values) |
|
||||||
else |
|
||||||
await createModel(values) |
|
||||||
|
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>123</div> |
|
||||||
</template> |
|
||||||
@ -1,143 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import ModelModal from './ModelModal.vue' |
|
||||||
import ModelImportModal from './ModelImportModal.vue' |
|
||||||
import { columns, searchFormSchema } from './model.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteModel, deployModel, getModelPage } from '@/api/bpm/model' |
|
||||||
|
|
||||||
// import { getAccessToken, getTenantId } from '@/utils/auth' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmModel' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
const [registerImportModal, { openModal: openImportModal }] = useModal() |
|
||||||
|
|
||||||
// const uploadParams = ref({ |
|
||||||
// 'Authorization': `Bearer ${getAccessToken()}`, |
|
||||||
// 'tenant-id': getTenantId(), |
|
||||||
// }) |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '流程模型图列表', |
|
||||||
api: getModelPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openModal(true, { isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openModal(true, { record, isUpdate: true }) |
|
||||||
} |
|
||||||
|
|
||||||
/** 设计流程 */ |
|
||||||
function handleDesign(record: Recordable) { |
|
||||||
go({ name: 'BpmModelEditor', query: { modelId: record.id } }) |
|
||||||
} |
|
||||||
|
|
||||||
/** 点击任务分配按钮 */ |
|
||||||
function handleAssignRule(record: Recordable) { |
|
||||||
go({ name: 'BpmTaskAssignRuleList', query: { modelId: record.id } }) |
|
||||||
} |
|
||||||
|
|
||||||
/** 发布流程 */ |
|
||||||
async function handleDeploy(record: Recordable) { |
|
||||||
await deployModel(record.id) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
|
|
||||||
/** 跳转到指定流程定义列表 */ |
|
||||||
function handleDefinitionList(record: Recordable) { |
|
||||||
go({ name: 'BpmProcessDefinition', query: { modelId: record.key } }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteModel(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['bpm:model:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
<a-button v-auth="['bpm:model:import']" type="primary" :pre-icon="IconEnum.UPLOAD" @click="openImportModal"> |
|
||||||
{{ t('action.import') }} |
|
||||||
</a-button> |
|
||||||
<!-- <BasicUpload |
|
||||||
:max-size="20" |
|
||||||
:max-number="1" |
|
||||||
:empty-hide-preview="true" |
|
||||||
:upload-params="uploadParams" |
|
||||||
:api="importModel" |
|
||||||
class="my-5" |
|
||||||
:accept="['.bpmn', '.xml']" |
|
||||||
@change="reload" |
|
||||||
/> --> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'bpm:model:update', onClick: handleEdit.bind(null, record) }]" |
|
||||||
:drop-down-actions="[ |
|
||||||
{ icon: IconEnum.EDIT, label: '设计流程', auth: 'bpm:model:update', onClick: handleDesign.bind(null, record) }, |
|
||||||
{ icon: IconEnum.EDIT, label: '分配规则', auth: 'bpm:task-assign-rule:query', onClick: handleAssignRule.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.EDIT, |
|
||||||
label: '发布流程', |
|
||||||
auth: 'bpm:model:deploy', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDeploy.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.EDIT, |
|
||||||
label: '流程定义', |
|
||||||
auth: 'bpm:process-definition:query', |
|
||||||
onClick: handleDefinitionList.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'bpm:model:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<ModelModal @register="registerModal" @success="reload()" /> |
|
||||||
<ModelImportModal @register="registerImportModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,225 +0,0 @@ |
|||||||
import { Button, Switch } from 'ant-design-vue' |
|
||||||
import { h } from 'vue' |
|
||||||
import { getSimpleForms } from '@/api/bpm/form' |
|
||||||
import { updateModelState } from '@/api/bpm/model' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '编号', |
|
||||||
dataIndex: 'id', |
|
||||||
defaultHidden: true, |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程标识', |
|
||||||
dataIndex: 'key', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
customRender: ({ record }) => { |
|
||||||
return h(Button, { type: 'link', onClick: handleBpmnDetail.bind(null, record) }, () => record.formName) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程分类', |
|
||||||
dataIndex: 'category', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_MODEL_CATEGORY) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '表单信息', |
|
||||||
dataIndex: 'formType', |
|
||||||
width: 180, |
|
||||||
customRender: ({ record }) => { |
|
||||||
if (record.formId) |
|
||||||
return h(Button, { type: 'link', onClick: handleFormDetail.bind(null, record) }, () => record.formName) |
|
||||||
else if (record.formCustomCreatePath) |
|
||||||
return h(Button, { type: 'link', onClick: handleFormDetail.bind(null, record) }, () => record.formCustomCreatePath) |
|
||||||
else |
|
||||||
return useRender.renderTag('暂无表单') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '最新部署的流程定义', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
title: '流程版本', |
|
||||||
dataIndex: 'processDefinition.version', |
|
||||||
width: 160, |
|
||||||
customRender: ({ record }) => { |
|
||||||
if (record.processDefinition) |
|
||||||
return useRender.renderTag(`v${record.processDefinition.version}`) |
|
||||||
else |
|
||||||
return useRender.renderTag('未部署') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '激活状态', |
|
||||||
dataIndex: 'processDefinition.suspensionState', |
|
||||||
width: 100, |
|
||||||
customRender: ({ record }) => { |
|
||||||
if (record.processDefinition) { |
|
||||||
if (!Reflect.has(record, 'suspensionState')) |
|
||||||
record.pendingStatus = false |
|
||||||
|
|
||||||
return h(Switch, { |
|
||||||
checked: record.processDefinition.suspensionState === 1, |
|
||||||
checkedChildren: '激活', |
|
||||||
unCheckedChildren: '挂起', |
|
||||||
onChange(checked: boolean) { |
|
||||||
const newStatus = checked ? 0 : 1 |
|
||||||
const { createMessage } = useMessage() |
|
||||||
updateModelState(record.id, newStatus) |
|
||||||
.then(() => { |
|
||||||
record.status = newStatus |
|
||||||
createMessage.success('已成功修改流程状态') |
|
||||||
}) |
|
||||||
.catch(() => { |
|
||||||
createMessage.error('修改流程状态失败') |
|
||||||
}) |
|
||||||
.finally(() => { |
|
||||||
record.pendingStatus = false |
|
||||||
}) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '部署时间', |
|
||||||
dataIndex: 'processDefinition.deploymentTim', |
|
||||||
width: 180, |
|
||||||
customRender: ({ record }) => { |
|
||||||
if (record.processDefinition) |
|
||||||
return useRender.renderDate(record.processDefinition.deploymentTime) |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '流程标识', |
|
||||||
field: 'key', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程名称', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程分类', |
|
||||||
field: 'category', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程标识', |
|
||||||
field: 'key', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
dynamicDisabled: ({ values }) => !!values.id, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程名称', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
dynamicDisabled: ({ values }) => !!values.id, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程分类', |
|
||||||
field: 'category', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY) as any, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程描述', |
|
||||||
field: 'description', |
|
||||||
component: 'InputTextArea', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表单类型', |
|
||||||
field: 'formType', |
|
||||||
component: 'Select', |
|
||||||
ifShow: ({ values }) => !!values.id, |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE) as any, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程表单', |
|
||||||
field: 'formId', |
|
||||||
component: 'ApiSelect', |
|
||||||
ifShow: ({ values }) => !!values.id && values.formType === 10, |
|
||||||
componentProps: { |
|
||||||
api: () => getSimpleForms(), |
|
||||||
labelField: 'name', |
|
||||||
valueField: 'id', |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表单提交路由', |
|
||||||
field: 'formCustomCreatePath', |
|
||||||
component: 'Input', |
|
||||||
helpMessage: '自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create', |
|
||||||
ifShow: ({ values }) => !!values.id && values.formType === 20, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表单查看路由', |
|
||||||
field: 'formCustomViewPath', |
|
||||||
component: 'Input', |
|
||||||
helpMessage: '自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view', |
|
||||||
ifShow: ({ values }) => !!values.id && values.formType === 20, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
function handleBpmnDetail(record: Recordable) { |
|
||||||
console.info('handleBpmnDetail', record) |
|
||||||
} |
|
||||||
|
|
||||||
function handleFormDetail(record: Recordable) { |
|
||||||
if (record.formType === 10) { |
|
||||||
console.info('handleFormDetail') |
|
||||||
} |
|
||||||
else { |
|
||||||
const go = useGo() |
|
||||||
go({ path: record.formCustomCreatePath }) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { onMounted } from 'vue' |
|
||||||
import { formSchema } from './leave.data' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { createLeave } from '@/api/bpm/leave' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
|
|
||||||
defineOptions({ name: 'LeaveCreate' }) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
|
|
||||||
const [registerForm, { resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 140, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showResetButton: false, |
|
||||||
submitButtonOptions: { text: t('common.saveText') }, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() as any |
|
||||||
await createLeave(values) |
|
||||||
} |
|
||||||
finally { |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
resetFields() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper> |
|
||||||
<BasicForm class="mt-10 h-120 w-200" @register="registerForm" @submit="handleSubmit" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, ref } from 'vue' |
|
||||||
import { useRoute } from 'vue-router' |
|
||||||
import { descSchema } from './leave.data' |
|
||||||
import { Description, useDescription } from '@/components/Description' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { getLeave } from '@/api/bpm/leave' |
|
||||||
import { propTypes } from '@/utils/propTypes' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraJobModal' }) |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
id: propTypes.number.def(undefined), |
|
||||||
}) |
|
||||||
|
|
||||||
const { query } = useRoute() |
|
||||||
const datas = ref() |
|
||||||
|
|
||||||
const [registerDesc] = useDescription({ |
|
||||||
schema: descSchema, |
|
||||||
data: datas, |
|
||||||
}) |
|
||||||
|
|
||||||
async function getInfo() { |
|
||||||
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号 |
|
||||||
const res = await getLeave(props.id || queryId) |
|
||||||
datas.value = res |
|
||||||
} |
|
||||||
|
|
||||||
/** 初始化 */ |
|
||||||
onMounted(async () => { |
|
||||||
await getInfo() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper> |
|
||||||
<Description :column="1" @register="registerDesc" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { columns, searchFormSchema } from './leave.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { getLeavePage } from '@/api/bpm/leave' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { cancelProcessInstance } from '@/api/bpm/processInstance' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmLeave' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const go = useGo() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '请假列表', |
|
||||||
api: getLeavePage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 160, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
/** 添加操作 */ |
|
||||||
function handleCreate() { |
|
||||||
go({ name: 'OALeaveCreate' }) |
|
||||||
} |
|
||||||
|
|
||||||
/** 详情操作 */ |
|
||||||
function handleDetail(row) { |
|
||||||
go({ |
|
||||||
name: 'OALeaveDetail', |
|
||||||
query: { |
|
||||||
id: row.id, |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
/** 取消请假操作 */ |
|
||||||
async function cancelLeave(row) { |
|
||||||
// // 二次确认 |
|
||||||
// const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', { |
|
||||||
// confirmButtonText: t('common.ok'), |
|
||||||
// cancelButtonText: t('common.cancel'), |
|
||||||
// inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格 |
|
||||||
// inputErrorMessage: '取消原因不能为空', |
|
||||||
// }) |
|
||||||
const value = '' |
|
||||||
// 发起取消 |
|
||||||
await cancelProcessInstance(row.id, value) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
|
|
||||||
/** 审批进度 */ |
|
||||||
function handleProcessDetail(row) { |
|
||||||
go({ |
|
||||||
name: 'BpmProcessInstanceDetail', |
|
||||||
query: { |
|
||||||
id: row.processInstanceId, |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
发起请假 |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.SEARCH, label: t('action.detail'), auth: 'bpm:oa-leave:query', onClick: handleDetail.bind(null, record) }, |
|
||||||
{ icon: IconEnum.LOG, label: '进度', auth: 'bpm:oa-leave:query', onClick: handleProcessDetail.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.cancel'), |
|
||||||
auth: 'bpm:oa-leave:create', |
|
||||||
ifShow: () => { |
|
||||||
return record.result === 1 |
|
||||||
}, |
|
||||||
onClick: cancelLeave.bind(null, record), |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,158 +0,0 @@ |
|||||||
import type { DescItem } from '@/components/Description' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '申请编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'result', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '开始时间', |
|
||||||
dataIndex: 'startTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '结束时间', |
|
||||||
dataIndex: 'endTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请假类型', |
|
||||||
dataIndex: 'type', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_OA_LEAVE_TYPE) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '原因', |
|
||||||
dataIndex: 'reason', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '申请时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '请假类型', |
|
||||||
field: 'type', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '申请时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '结果', |
|
||||||
field: 'result', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT), |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '原因', |
|
||||||
field: 'reason', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '请假类型', |
|
||||||
field: 'type', |
|
||||||
required: true, |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE) as any, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '开始时间', |
|
||||||
field: 'startTime', |
|
||||||
required: true, |
|
||||||
component: 'DatePicker', |
|
||||||
componentProps: { |
|
||||||
showTime: true, |
|
||||||
format: 'YYYY-MM-DD HH:mm:ss', |
|
||||||
valueFormat: 'x', |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '结束时间', |
|
||||||
field: 'endTime', |
|
||||||
required: true, |
|
||||||
component: 'DatePicker', |
|
||||||
componentProps: { |
|
||||||
showTime: true, |
|
||||||
format: 'YYYY-MM-DD HH:mm:ss', |
|
||||||
valueFormat: 'x', |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '原因', |
|
||||||
field: 'reason', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const descSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
label: '请假类型', |
|
||||||
field: 'merchantOrderId', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderTag(curVal) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '开始时间', |
|
||||||
field: 'startTime', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderDate(curVal, 'YYYY-MM-DD') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '结束时间', |
|
||||||
field: 'endTime', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderDate(curVal, 'YYYY-MM-DD') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '原因', |
|
||||||
field: 'reason', |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,32 +0,0 @@ |
|||||||
import type { BasicColumn } from '@/components/Table' |
|
||||||
import { DICT_TYPE } from '@/utils/dict' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '流程名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程分类', |
|
||||||
dataIndex: 'category', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_MODEL_CATEGORY) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程版本', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderTag(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程描述', |
|
||||||
dataIndex: 'description', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { Card, Steps } from 'ant-design-vue' |
|
||||||
import { ref } from 'vue' |
|
||||||
import { columns } from './create.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import Icon from '@/components/Icon' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { getProcessDefinitionBpmnXML, getProcessDefinitionList } from '@/api/bpm/definition' |
|
||||||
import { createProcessInstance } from '@/api/bpm/processInstance' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmProcessInstanceCreate' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const current = ref(0) |
|
||||||
|
|
||||||
const bpmnXML = ref(null) // BPMN 数据 |
|
||||||
const selectProcessInstance = ref() // 选择的流程实例 |
|
||||||
|
|
||||||
const [registerTable] = useTable({ |
|
||||||
api: getProcessDefinitionList, |
|
||||||
columns, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
/** 处理选择流程的按钮操作 */ |
|
||||||
async function handleSelect(row) { |
|
||||||
// 设置选择的流程 |
|
||||||
selectProcessInstance.value = row |
|
||||||
|
|
||||||
// 情况一：流程表单 |
|
||||||
if (row.formType === 10) { |
|
||||||
// 设置表单 |
|
||||||
// setConfAndFields2(detailForm, row.formConf, row.formFields) |
|
||||||
// 加载流程图 |
|
||||||
bpmnXML.value = await getProcessDefinitionBpmnXML(row.id) |
|
||||||
// 情况二：业务表单 |
|
||||||
} |
|
||||||
else if (row.formCustomCreatePath) { |
|
||||||
await go({ |
|
||||||
path: row.formCustomCreatePath, |
|
||||||
}) |
|
||||||
// 这里暂时无需加载流程图，因为跳出到另外个 Tab； |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** 提交按钮 */ |
|
||||||
async function submitForm(formData) { |
|
||||||
// if (!fApi.value || !selectProcessInstance.value) |
|
||||||
// return |
|
||||||
|
|
||||||
// // 提交请求 |
|
||||||
// fApi.value.btn.loading(true) |
|
||||||
try { |
|
||||||
await createProcessInstance({ |
|
||||||
processDefinitionId: selectProcessInstance.value.id, |
|
||||||
variables: formData, |
|
||||||
}) |
|
||||||
// 提示 |
|
||||||
createMessage.success('发起流程成功') |
|
||||||
go() |
|
||||||
} |
|
||||||
finally { |
|
||||||
// fApi.value.btn.loading(false) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper> |
|
||||||
<div class="mx-auto my-0 mt-2.5 w-200"> |
|
||||||
<Steps :current="current"> |
|
||||||
<Steps.Step title="选择流程" /> |
|
||||||
<Steps.Step title="流程提交" /> |
|
||||||
</Steps> |
|
||||||
</div> |
|
||||||
<div class="m-5"> |
|
||||||
<BasicTable v-if="!selectProcessInstance" @register="registerTable"> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.SEND, label: '选择', onClick: handleSelect.bind(null, record) }, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<div v-if="selectProcessInstance"> |
|
||||||
<Card :title="`申请信息——【${selectProcessInstance.name}】`"> |
|
||||||
<template #extra> |
|
||||||
<a-button type="primary" @click="selectProcessInstance = undefined"> |
|
||||||
<Icon icon="ep:delete" /> 选择其它流程 |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<p>表单</p> |
|
||||||
<a-button type="primary" @click="submitForm"> |
|
||||||
提交 |
|
||||||
</a-button> |
|
||||||
<p>流程图</p> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>123</div> |
|
||||||
</template> |
|
||||||
@ -1,84 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { columns, searchFormSchema } from './processInstance.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { cancelProcessInstance, getMyProcessInstancePage } from '@/api/bpm/processInstance' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraApiErrorLog' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '我的流程列表', |
|
||||||
api: getMyProcessInstancePage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
/** 发起流程操作 */ |
|
||||||
function handleCreate() { |
|
||||||
go({ name: 'BpmProcessInstanceCreate' }) |
|
||||||
} |
|
||||||
|
|
||||||
/** 查看详情 */ |
|
||||||
function handleDetail(record: Recordable) { |
|
||||||
go({ name: 'BpmProcessInstanceDetail', query: { id: record.id } }) |
|
||||||
} |
|
||||||
|
|
||||||
/** 取消按钮操作 */ |
|
||||||
async function handleCancel(record: Recordable) { |
|
||||||
await cancelProcessInstance(record.id, 'TODO') |
|
||||||
createMessage.success('取消成功') |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['bpm:process-instance:query']" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
发起流程 |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: IconEnum.VIEW, |
|
||||||
label: t('action.detail'), |
|
||||||
auth: 'bpm:process-instance:query', |
|
||||||
onClick: handleDetail.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.cancel'), |
|
||||||
ifShow: record.result === 1, |
|
||||||
auth: 'bpm:process-instance:cancel', |
|
||||||
popConfirm: { |
|
||||||
title: t('action.cancel'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleCancel.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,118 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '流程编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 260, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程分类', |
|
||||||
dataIndex: 'category', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_MODEL_CATEGORY) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '当前审批任务', |
|
||||||
dataIndex: 'tasks', |
|
||||||
width: 120, |
|
||||||
customRender: ({ record }) => { |
|
||||||
if (record.tasks && record.tasks.length > 0) { |
|
||||||
const texts: any[] = [] |
|
||||||
record.tasks.forEach((val) => { |
|
||||||
texts.push(val.name) |
|
||||||
}) |
|
||||||
return useRender.renderTags(texts) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '结果', |
|
||||||
dataIndex: 'result', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '提交时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '结束时间', |
|
||||||
dataIndex: 'endTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '流程名称', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '所属流程', |
|
||||||
field: 'processDefinitionId', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '流程分类', |
|
||||||
field: 'category', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '状态', |
|
||||||
field: 'status', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS), |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '结果', |
|
||||||
field: 'result', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT), |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '提交时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { getDate } from '@/utils/dateUtil' |
|
||||||
import { DICT_TYPE } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '任务编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '任务名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '所属流程', |
|
||||||
dataIndex: 'processInstance.name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程发起人', |
|
||||||
dataIndex: 'processInstance.startUserNickname', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '结果', |
|
||||||
dataIndex: 'result', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '审批意见', |
|
||||||
dataIndex: 'reason', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '审批时间', |
|
||||||
dataIndex: 'endTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '耗时', |
|
||||||
dataIndex: 'durationInMillis', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return getDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '流程名', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { columns, searchFormSchema } from './done.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { getDoneTaskPage } from '@/api/bpm/task' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmDoneTask' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
|
|
||||||
const [registerTable] = useTable({ |
|
||||||
title: '审批列表', |
|
||||||
api: getDoneTaskPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function openDetail(record: Recordable) { |
|
||||||
console.info(record) |
|
||||||
} |
|
||||||
|
|
||||||
function handleAudit(record: Recordable) { |
|
||||||
go({ name: 'BpmProcessInstanceDetail', query: { id: record.id } }) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.VIEW, label: t('action.detail'), onClick: openDetail.bind(null, record) }, |
|
||||||
{ icon: IconEnum.VIEW, label: '流程', onClick: handleAudit.bind(null, record) }, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { columns, searchFormSchema } from './todo.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { getTodoTaskPage } from '@/api/bpm/task' |
|
||||||
|
|
||||||
defineOptions({ name: 'BpmTodoTask' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
|
|
||||||
const [registerTable] = useTable({ |
|
||||||
title: '审批列表', |
|
||||||
api: getTodoTaskPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleAudit(record: Recordable) { |
|
||||||
go({ name: 'BpmProcessInstanceDetail', query: { id: record.id } }) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction :actions="[{ icon: IconEnum.VIEW, label: '审批进度', onClick: handleAudit.bind(null, record) }]" /> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '任务编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '任务名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '所属流程', |
|
||||||
dataIndex: 'processInstance.name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '流程发起人', |
|
||||||
dataIndex: 'processInstance.startUserNickname', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '状态', |
|
||||||
dataIndex: 'suspensionState', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
if (text === 1) |
|
||||||
return useRender.renderTag('激活', 'success') |
|
||||||
else if (text === 2) |
|
||||||
return useRender.renderTag('挂起', 'warning') |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '流程名', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中 taskAssignRule</div> |
|
||||||
</template> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { infoSchema } from './apiAccessLog.data' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { Description, useDescription } from '@/components/Description/index' |
|
||||||
|
|
||||||
defineOptions({ name: 'AcessLogModal' }) |
|
||||||
|
|
||||||
const logData = ref() |
|
||||||
const [registerModalInner, { closeModal }] = useModalInner((record: Recordable) => { |
|
||||||
logData.value = record |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerDescription] = useDescription({ |
|
||||||
column: 1, |
|
||||||
schema: infoSchema, |
|
||||||
data: logData, |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" title="访问日志详情" width="800px" @register="registerModalInner" @ok="closeModal"> |
|
||||||
<Description @register="registerDescription" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,222 +0,0 @@ |
|||||||
import { h } from 'vue' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
import type { DescItem } from '@/components/Description/index' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '日志编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '用户编号', |
|
||||||
dataIndex: 'userId', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '用户类型', |
|
||||||
dataIndex: 'userType', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.USER_TYPE) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '应用名', |
|
||||||
dataIndex: 'applicationName', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求方法名', |
|
||||||
dataIndex: 'requestMethod', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求地址', |
|
||||||
dataIndex: 'requestUrl', |
|
||||||
width: 250, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求时间', |
|
||||||
dataIndex: 'beginTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '执行时长', |
|
||||||
dataIndex: 'duration', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderText(text.toString(), 'ms') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '操作结果', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 180, |
|
||||||
ellipsis: true, |
|
||||||
customRender: ({ record }) => { |
|
||||||
const success = record.resultCode === 0 |
|
||||||
return useRender.renderTag(success ? '成功' : '失败', success ? '#87d068' : '#f50') |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '用户编号', |
|
||||||
field: 'userId', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '用户类型', |
|
||||||
field: 'userType', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.USER_TYPE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '应用名', |
|
||||||
field: 'applicationName', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '请求地址', |
|
||||||
field: 'requestUrl', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '请求时间', |
|
||||||
field: 'beginTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '执行时长', |
|
||||||
field: 'duration', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '结果码', |
|
||||||
field: 'resultCode', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const httpMethods = [ |
|
||||||
{ value: 'GET', color: '#108ee9' }, |
|
||||||
{ value: 'POST', color: '#2db7f5' }, |
|
||||||
{ value: 'PUT', color: 'warning' }, |
|
||||||
{ value: 'DELETE', color: '#f50' }, |
|
||||||
] |
|
||||||
|
|
||||||
export const infoSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
label: '日志id', |
|
||||||
field: 'id', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '链路id', |
|
||||||
field: 'traceId', |
|
||||||
show: data => data && data.traceId && data.traceId !== '', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '应用名称', |
|
||||||
field: 'applicationName', |
|
||||||
labelMinWidth: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'userId', |
|
||||||
label: '用户id', |
|
||||||
render(value, data) { |
|
||||||
const tag = useRender.renderDict(data.userType, DICT_TYPE.USER_TYPE) |
|
||||||
const uidTag = useRender.renderTag(`uid: ${value}`) |
|
||||||
return h('span', {}, [tag, uidTag]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'resultCode', |
|
||||||
label: '请求结果', |
|
||||||
render(value) { |
|
||||||
return useRender.renderTag(value === 0 ? '成功' : '失败', value === 0 ? '#87d068' : '#f50') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'resultMsg', |
|
||||||
label: '响应信息', |
|
||||||
show(data) { |
|
||||||
return data && data.resultMsg && data.resultMsg !== '' |
|
||||||
}, |
|
||||||
render(value) { |
|
||||||
return h('span', { style: { color: 'red', fontWeight: 'bold' } }, value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'userIp', |
|
||||||
label: '请求ip', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'userAgent', |
|
||||||
label: 'userAgent', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'beginTime', |
|
||||||
label: '请求时间', |
|
||||||
render(value) { |
|
||||||
return useRender.renderDate(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'requestUrl', |
|
||||||
label: '请求路径', |
|
||||||
render(_, data) { |
|
||||||
if (!data) |
|
||||||
return '' |
|
||||||
|
|
||||||
const { requestMethod, requestUrl } = data |
|
||||||
const current = httpMethods.find(item => item.value === requestMethod.toUpperCase()) |
|
||||||
const methodTag = current ? useRender.renderTag(requestMethod, current.color) : requestMethod |
|
||||||
return h('span', {}, [methodTag, requestUrl]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'requestParams', |
|
||||||
label: '请求参数', |
|
||||||
render(value) { |
|
||||||
return useRender.renderJsonPreview(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'beginTime', |
|
||||||
label: '请求开始时间', |
|
||||||
render(value) { |
|
||||||
return useRender.renderDate(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'endTime', |
|
||||||
label: '请求结束时间', |
|
||||||
render(value) { |
|
||||||
return useRender.renderDate(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'duration', |
|
||||||
label: '请求耗时', |
|
||||||
render(value) { |
|
||||||
// 为0的话需要转为string 否则不会显示
|
|
||||||
return useRender.renderText(String(value), 'ms') |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { columns, searchFormSchema } from './apiAccessLog.data' |
|
||||||
import AccessLogModal from './AccessLogModal.vue' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import type { ApiAccessLogExportReqVO } from '@/api/infra/apiAccessLog' |
|
||||||
import { exportApiAccessLog, getApiAccessLogPage } from '@/api/infra/apiAccessLog' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraApiErrorLog' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createConfirm, createMessage } = useMessage() |
|
||||||
const [registerTable, { getForm }] = useTable({ |
|
||||||
title: '访问日志列表', |
|
||||||
api: getApiAccessLogPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 120, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
function handleShowInfo(record: Recordable) { |
|
||||||
openModal(true, record) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleExport() { |
|
||||||
createConfirm({ |
|
||||||
title: t('common.exportTitle'), |
|
||||||
iconType: 'warning', |
|
||||||
content: t('common.exportMessage'), |
|
||||||
async onOk() { |
|
||||||
await exportApiAccessLog(getForm().getFieldsValue() as ApiAccessLogExportReqVO) |
|
||||||
createMessage.success(t('common.exportSuccessText')) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:api-access-log:export']" :pre-icon="IconEnum.EXPORT" @click="handleExport"> |
|
||||||
{{ t('action.export') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: IconEnum.VIEW, |
|
||||||
label: t('action.detail'), |
|
||||||
onClick: handleShowInfo.bind(null, record), |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<AccessLogModal @register="registerModal" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { infoSchema } from './apiErrorLog.data' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { Description, useDescription } from '@/components/Description/index' |
|
||||||
|
|
||||||
defineOptions({ name: 'ErrorLogModal' }) |
|
||||||
|
|
||||||
const logData = ref() |
|
||||||
const [registerModalInner, { closeModal }] = useModalInner((record: Recordable) => { |
|
||||||
logData.value = record |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerDescription] = useDescription({ |
|
||||||
column: 1, |
|
||||||
schema: infoSchema, |
|
||||||
data: logData, |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" title="错误日志详情" width="800px" @register="registerModalInner" @ok="closeModal"> |
|
||||||
<Description @register="registerDescription" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,248 +0,0 @@ |
|||||||
import { Textarea } from 'ant-design-vue' |
|
||||||
import { h } from 'vue' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
import type { DescItem } from '@/components/Description/index' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '日志编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '用户编号', |
|
||||||
dataIndex: 'userId', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '用户类型', |
|
||||||
dataIndex: 'userType', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.USER_TYPE) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '应用名', |
|
||||||
dataIndex: 'applicationName', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求方法名', |
|
||||||
dataIndex: 'requestMethod', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '请求地址', |
|
||||||
dataIndex: 'requestUrl', |
|
||||||
width: 250, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '异常发生时间', |
|
||||||
dataIndex: 'exceptionTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '异常名', |
|
||||||
dataIndex: 'exceptionName', |
|
||||||
width: 250, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '处理状态', |
|
||||||
dataIndex: 'processStatus', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '用户编号', |
|
||||||
field: 'userId', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '用户名称', |
|
||||||
field: 'username', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '用户类型', |
|
||||||
field: 'userType', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.USER_TYPE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '应用名', |
|
||||||
field: 'applicationName', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '请求地址', |
|
||||||
field: 'requestUrl', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '异常时间', |
|
||||||
field: 'exceptionTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理状态', |
|
||||||
field: 'processStatus', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS), |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
function renderText(value: string, color: string, bold = true) { |
|
||||||
return h('span', { style: { color, fontWeight: bold ? 'bold' : 'normal' } }, value) |
|
||||||
} |
|
||||||
|
|
||||||
const httpMethods = [ |
|
||||||
{ value: 'GET', color: '#108ee9' }, |
|
||||||
{ value: 'POST', color: '#2db7f5' }, |
|
||||||
{ value: 'PUT', color: 'warning' }, |
|
||||||
{ value: 'DELETE', color: '#f50' }, |
|
||||||
] |
|
||||||
|
|
||||||
export const infoSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
field: 'id', |
|
||||||
label: '异常id', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'traceId', |
|
||||||
label: '链路ID', |
|
||||||
show(data) { |
|
||||||
return data && data.traceId && data.traceId !== '' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'applicationName', |
|
||||||
label: '应用名称', |
|
||||||
labelMinWidth: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'processStatus', |
|
||||||
label: '处理状态', |
|
||||||
render(_, data) { |
|
||||||
const { processStatus, processUserId } = data |
|
||||||
const tag = useRender.renderDict(processStatus, DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS) |
|
||||||
if (!processUserId) |
|
||||||
return tag |
|
||||||
|
|
||||||
const uidTag = useRender.renderTag(`uid: ${processUserId}`) |
|
||||||
return h('span', {}, [tag, uidTag]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'processTime', |
|
||||||
label: '处理时间', |
|
||||||
show(data) { |
|
||||||
return data && data.processTime && data.processTime !== '' |
|
||||||
}, |
|
||||||
render(value) { |
|
||||||
return useRender.renderDate(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'userId', |
|
||||||
label: '用户id', |
|
||||||
render(value, data) { |
|
||||||
const tag = useRender.renderDict(data.userType, DICT_TYPE.USER_TYPE) |
|
||||||
const uidTag = useRender.renderTag(`uid: ${value}`) |
|
||||||
return h('span', {}, [tag, uidTag]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'userIp', |
|
||||||
label: 'ip地址', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'requestUrl', |
|
||||||
label: '请求地址', |
|
||||||
render(_, data) { |
|
||||||
if (data) { |
|
||||||
const { requestMethod } = data |
|
||||||
const current = httpMethods.find(item => item.value === requestMethod) |
|
||||||
const tag = current ? useRender.renderTag(requestMethod, current.color) : requestMethod |
|
||||||
return h('span', {}, [tag, data.requestUrl]) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'requestParams', |
|
||||||
label: '请求参数', |
|
||||||
render(value) { |
|
||||||
return useRender.renderJsonPreview(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'userAgent', |
|
||||||
label: 'userAgent', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionTime', |
|
||||||
label: '异常时间', |
|
||||||
render(value) { |
|
||||||
return useRender.renderDate(value) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionClassName', |
|
||||||
label: '异常类名/方法', |
|
||||||
render(_, data) { |
|
||||||
if (data) |
|
||||||
return renderText(`${data.exceptionClassName} / ${data.exceptionMethodName}`, 'red') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionMessage', |
|
||||||
label: '异常信息', |
|
||||||
render(value) { |
|
||||||
return renderText(value, 'red') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionFileName', |
|
||||||
label: '异常文件名', |
|
||||||
render(_, data) { |
|
||||||
if (data) |
|
||||||
return useRender.renderText(data.exceptionFileName, `Line: ${data.exceptionLineNumber}`) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionName', |
|
||||||
label: '异常名称', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionRootCauseMessage', |
|
||||||
label: '异常信息', |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'exceptionStackTrace', |
|
||||||
label: '异常堆栈', |
|
||||||
render(value) { |
|
||||||
return h(Textarea, { value, readonly: true, style: { minHeight: '300px' } }) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,101 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { columns, searchFormSchema } from './apiErrorLog.data' |
|
||||||
import ErrorLogModal from './ErrorLogModal.vue' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { InfraApiErrorLogProcessStatusEnum } from '@/enums/systemEnum' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import type { ApiErrorLogExportReqVO } from '@/api/infra/apiErrorLog' |
|
||||||
import { exportApiErrorLog, getApiErrorLogPage, updateApiErrorLogProcess } from '@/api/infra/apiErrorLog' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraApiErrorLog' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createConfirm, createMessage } = useMessage() |
|
||||||
const [registerTable, { getForm, reload }] = useTable({ |
|
||||||
title: '异常日志列表', |
|
||||||
api: getApiErrorLogPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 220, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
function handleShowInfo(record: Recordable) { |
|
||||||
openModal(true, record) |
|
||||||
} |
|
||||||
|
|
||||||
function handleProcessClick(record, processStatus: number, type: string) { |
|
||||||
createConfirm({ |
|
||||||
iconType: 'warning', |
|
||||||
content: `确认标记为${type}?`, |
|
||||||
async onOk() { |
|
||||||
await updateApiErrorLogProcess(record.id, processStatus) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
reload() |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleExport() { |
|
||||||
createConfirm({ |
|
||||||
title: t('common.exportTitle'), |
|
||||||
iconType: 'warning', |
|
||||||
content: t('common.exportMessage'), |
|
||||||
async onOk() { |
|
||||||
await exportApiErrorLog(getForm().getFieldsValue() as ApiErrorLogExportReqVO) |
|
||||||
createMessage.success(t('common.exportSuccessText')) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:api-error-log:export']" :pre-icon="IconEnum.EXPORT" @click="handleExport"> |
|
||||||
{{ t('action.export') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: IconEnum.VIEW, |
|
||||||
label: t('action.detail'), |
|
||||||
onClick: handleShowInfo.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.EDIT, |
|
||||||
label: '已处理', |
|
||||||
auth: 'infra:api-error-log:update-status', |
|
||||||
ifShow: () => record.processStatus === InfraApiErrorLogProcessStatusEnum.INIT, |
|
||||||
onClick: handleProcessClick.bind(null, record, InfraApiErrorLogProcessStatusEnum.DONE, '已处理'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.EDIT, |
|
||||||
label: '已忽略', |
|
||||||
auth: 'infra:api-error-log:update-status', |
|
||||||
ifShow: () => record.processStatus === InfraApiErrorLogProcessStatusEnum.INIT, |
|
||||||
onClick: handleProcessClick.bind(null, record, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略'), |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<ErrorLogModal @register="registerModal" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { VFormDesign } from '@/components/FormDesign' |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper dense fixed-height content-full-height> |
|
||||||
<VFormDesign /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,96 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, reactive, ref } from 'vue' |
|
||||||
import { Steps } from 'ant-design-vue' |
|
||||||
import { useRoute } from 'vue-router' |
|
||||||
import BasicInfoForm from './components/BasicInfoForm.vue' |
|
||||||
import CloumInfoForm from './components/CloumInfoForm.vue' |
|
||||||
import FinishForm from './components/FinishForm.vue' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { getCodegenTable, updateCodegenTable } from '@/api/infra/codegen' |
|
||||||
|
|
||||||
const Step = Steps.Step |
|
||||||
|
|
||||||
const { query } = useRoute() |
|
||||||
|
|
||||||
// 表详细信息 |
|
||||||
const basicInfo = ref<any>() |
|
||||||
// 表列信息 |
|
||||||
const columnsInfo = ref<any[]>([]) |
|
||||||
|
|
||||||
const basicInfoValue = ref() |
|
||||||
|
|
||||||
const columnsInfoValue = ref() |
|
||||||
|
|
||||||
const current = ref(0) |
|
||||||
const state = reactive({ |
|
||||||
initSetp2: false, |
|
||||||
initSetp3: false, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleStep1Next(step1Values: any) { |
|
||||||
current.value++ |
|
||||||
basicInfoValue.value = step1Values |
|
||||||
state.initSetp2 = true |
|
||||||
} |
|
||||||
|
|
||||||
function handleStepPrev() { |
|
||||||
current.value-- |
|
||||||
} |
|
||||||
|
|
||||||
async function handleStep2Next(step2Values: any) { |
|
||||||
current.value++ |
|
||||||
columnsInfoValue.value = step2Values |
|
||||||
await handleSubmit() |
|
||||||
state.initSetp3 = true |
|
||||||
} |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
basicInfoValue.value.id = query.id as unknown as number |
|
||||||
const genTable = { |
|
||||||
table: basicInfoValue.value, |
|
||||||
columns: columnsInfoValue.value, |
|
||||||
} |
|
||||||
await updateCodegenTable(genTable) |
|
||||||
} |
|
||||||
|
|
||||||
function handleRedo() { |
|
||||||
current.value = 0 |
|
||||||
state.initSetp2 = false |
|
||||||
state.initSetp3 = false |
|
||||||
} |
|
||||||
|
|
||||||
async function getList() { |
|
||||||
const tableId = query.id as unknown as number |
|
||||||
const res = await getCodegenTable(tableId) |
|
||||||
basicInfo.value = res.table |
|
||||||
columnsInfo.value = res.columns |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(async () => { |
|
||||||
await getList() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper> |
|
||||||
<div class="mx-auto my-0 mt-2.5 w-200"> |
|
||||||
<Steps :current="current"> |
|
||||||
<Step title="生成信息" /> |
|
||||||
<Step title="字段信息" /> |
|
||||||
<Step title="完成" /> |
|
||||||
</Steps> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="m-5"> |
|
||||||
<BasicInfoForm v-show="current === 0" :basic-info="basicInfo" @next="handleStep1Next" /> |
|
||||||
<CloumInfoForm |
|
||||||
v-show="current === 1" |
|
||||||
v-if="state.initSetp2" |
|
||||||
:columns-info="columnsInfo" |
|
||||||
@prev="handleStepPrev" |
|
||||||
@next="handleStep2Next" |
|
||||||
/> |
|
||||||
<FinishForm v-show="current === 2" v-if="state.initSetp3" @redo="handleRedo" /> |
|
||||||
</div> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,157 +0,0 @@ |
|||||||
import { getDataSourceConfigList } from '@/api/infra/dataSourceConfig' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
const dataSourceConfigs = await getDataSourceConfigList() |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '数据源', |
|
||||||
dataIndex: 'dataSourceConfigId', |
|
||||||
width: 100, |
|
||||||
customRender: ({ text }) => { |
|
||||||
for (const config of dataSourceConfigs) { |
|
||||||
if (text === config.id) |
|
||||||
return config.name |
|
||||||
} |
|
||||||
return `未知【${text}】` |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '表名称', |
|
||||||
dataIndex: 'tableName', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '表描述', |
|
||||||
dataIndex: 'tableComment', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '实体', |
|
||||||
dataIndex: 'className', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '更新时间', |
|
||||||
dataIndex: 'updateTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '表名称', |
|
||||||
field: 'tableName', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表描述', |
|
||||||
field: 'tableComment', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '岗位名称', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '岗位编码', |
|
||||||
field: 'code', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '岗位顺序', |
|
||||||
field: 'sort', |
|
||||||
required: true, |
|
||||||
defaultValue: 0, |
|
||||||
component: 'InputNumber', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '状态', |
|
||||||
field: 'status', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS) as any, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '备注', |
|
||||||
field: 'remark', |
|
||||||
component: 'InputTextArea', |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const importTableColumns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '表名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '表描述', |
|
||||||
dataIndex: 'comment', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const importTableSearchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '数据源', |
|
||||||
field: 'dataSourceConfigId', |
|
||||||
component: 'Select', |
|
||||||
required: true, |
|
||||||
defaultValue: dataSourceConfigs[0].id, |
|
||||||
componentProps: { |
|
||||||
options: dataSourceConfigs, |
|
||||||
fieldNames: { |
|
||||||
label: 'name', |
|
||||||
value: 'id', |
|
||||||
}, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表名称', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表描述', |
|
||||||
field: 'comment', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,70 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { Divider } from 'ant-design-vue' |
|
||||||
import { watch } from 'vue' |
|
||||||
import { basicInfoSchemas } from './data' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import type { CodegenTableVO } from '@/api/infra/codegen/types' |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
basicInfo: { |
|
||||||
type: Object as PropType<Nullable<CodegenTableVO>>, |
|
||||||
default: () => null, |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
const emit = defineEmits(['next']) |
|
||||||
|
|
||||||
const [register, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
schemas: basicInfoSchemas, |
|
||||||
actionColOptions: { |
|
||||||
span: 14, |
|
||||||
}, |
|
||||||
showResetButton: false, |
|
||||||
submitButtonOptions: { |
|
||||||
text: '保存', |
|
||||||
}, |
|
||||||
submitFunc: customSubmitFunc, |
|
||||||
}) |
|
||||||
|
|
||||||
async function customSubmitFunc() { |
|
||||||
try { |
|
||||||
const values = await validate() |
|
||||||
emit('next', values) |
|
||||||
} |
|
||||||
catch (error) {} |
|
||||||
} |
|
||||||
|
|
||||||
watch( |
|
||||||
() => props.basicInfo, |
|
||||||
(basicInfo) => { |
|
||||||
if (!basicInfo) |
|
||||||
return |
|
||||||
resetFields() |
|
||||||
setFieldsValue({ ...basicInfo }) |
|
||||||
}, |
|
||||||
{ |
|
||||||
deep: true, |
|
||||||
immediate: true, |
|
||||||
}, |
|
||||||
) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="mx-auto my-0 w-80%"> |
|
||||||
<BasicForm @register="register" /> |
|
||||||
</div> |
|
||||||
<Divider /> |
|
||||||
<h3 class="mb-3 text-base"> |
|
||||||
说明 |
|
||||||
</h3> |
|
||||||
<h4 class="mb-1 text-sm"> |
|
||||||
基本信息 |
|
||||||
</h4> |
|
||||||
<p> 配置生成的基本信息 </p> |
|
||||||
|
|
||||||
<h4>生成信息</h4> |
|
||||||
<p> 配置生成生成的详细信息。 </p> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,62 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { Divider } from 'ant-design-vue' |
|
||||||
import { columns } from './data' |
|
||||||
import type { EditRecordRow } from '@/components/Table' |
|
||||||
import { BasicTable, useTable } from '@/components/Table' |
|
||||||
import type { CodegenColumnVO } from '@/api/infra/codegen/types' |
|
||||||
|
|
||||||
defineProps({ |
|
||||||
columnsInfo: { |
|
||||||
type: Array as PropType<CodegenColumnVO[]>, |
|
||||||
default: () => null, |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
const emit = defineEmits(['next', 'prev']) |
|
||||||
|
|
||||||
const [registerTable, { getDataSource }] = useTable({ |
|
||||||
columns, |
|
||||||
maxHeight: 700, |
|
||||||
pagination: false, |
|
||||||
useSearchForm: false, |
|
||||||
showTableSetting: false, |
|
||||||
showIndexColumn: false, |
|
||||||
}) |
|
||||||
|
|
||||||
async function customResetFunc() { |
|
||||||
emit('prev') |
|
||||||
} |
|
||||||
|
|
||||||
async function customSubmitFunc() { |
|
||||||
const tableValue = getDataSource() |
|
||||||
emit('next', tableValue) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: EditRecordRow) { |
|
||||||
record.onEdit?.(true) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="step2"> |
|
||||||
<div class="mx-auto my-0 w-full"> |
|
||||||
<BasicTable :data-source="columnsInfo" @register="registerTable" @row-click="handleEdit" /> |
|
||||||
</div> |
|
||||||
<Divider /> |
|
||||||
<div class="flex justify-center"> |
|
||||||
<a-button @click="customResetFunc"> |
|
||||||
上一步 |
|
||||||
</a-button> |
|
||||||
<a-button type="primary" @click="customSubmitFunc"> |
|
||||||
提交 |
|
||||||
</a-button> |
|
||||||
</div> |
|
||||||
<h3 class="mb-3 text-base"> |
|
||||||
说明 |
|
||||||
</h3> |
|
||||||
<h4 class="mb-1 text-sm"> |
|
||||||
配置字段 |
|
||||||
</h4> |
|
||||||
<p> 配置表的字段类型，增删改查，字典等 </p> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { Result } from 'ant-design-vue' |
|
||||||
import { useRoute } from 'vue-router' |
|
||||||
import PreviewModal from './PreviewModal.vue' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useTabs } from '@/hooks/web/useTabs' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { downloadCodegen, getCodegenTable } from '@/api/infra/codegen' |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { closeCurrent } = useTabs() |
|
||||||
const { query } = useRoute() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal() |
|
||||||
|
|
||||||
function handlePreview() { |
|
||||||
const tableId = query.id as unknown as number |
|
||||||
const record = { id: tableId } |
|
||||||
openPreviewModal(true, { record }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleGenTable() { |
|
||||||
const tableId = query.id as unknown as number |
|
||||||
const res = await getCodegenTable(tableId) |
|
||||||
await downloadCodegen(res.table) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
} |
|
||||||
|
|
||||||
function handleGoList() { |
|
||||||
closeCurrent() |
|
||||||
go('/infra/codegen') |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="m-5 bg-white px-8 py-12 dark:bg-dark"> |
|
||||||
<Result status="success" title="代码生成成功" sub-title="可点击下方按钮预览、下载，或返回列表页。"> |
|
||||||
<template #extra> |
|
||||||
<a-button key="console" type="primary" @click="handleGoList"> |
|
||||||
返回列表 |
|
||||||
</a-button> |
|
||||||
<a-button key="preview" @click="handlePreview"> |
|
||||||
预览 |
|
||||||
</a-button> |
|
||||||
<a-button key="download" @click="handleGenTable"> |
|
||||||
生成 |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
</Result> |
|
||||||
<PreviewModal @register="registerPreviewModal" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { importTableColumns, importTableSearchFormSchema } from '../codegen.data' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { BasicTable, useTable } from '@/components/Table' |
|
||||||
import { createCodegenList, getSchemaTableList } from '@/api/infra/codegen' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraImportTableModal' }) |
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
|
|
||||||
const [registerTable, { getSelectRowKeys, getForm }] = useTable({ |
|
||||||
api: getSchemaTableList, |
|
||||||
columns: importTableColumns, |
|
||||||
formConfig: { |
|
||||||
labelWidth: 80, |
|
||||||
schemas: importTableSearchFormSchema, |
|
||||||
}, |
|
||||||
rowSelection: { type: 'checkbox' }, |
|
||||||
rowKey: 'name', |
|
||||||
useSearchForm: true, |
|
||||||
pagination: false, |
|
||||||
showTableSetting: false, |
|
||||||
showIndexColumn: false, |
|
||||||
immediate: false, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
const datas = await getSelectRowKeys() |
|
||||||
const form = await getForm() |
|
||||||
await createCodegenList({ dataSourceConfigId: form.getFieldsValue().dataSourceConfigId, tableNames: datas }) |
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :width="800" title="导入" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicTable @register="registerTable" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,144 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { Card, Tabs } from 'ant-design-vue' |
|
||||||
import { useClipboard } from '@vueuse/core' |
|
||||||
import { BasicTree } from '@/components/Tree' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { CodeEditor, MODE } from '@/components/CodeEditor' |
|
||||||
import { previewCodegen } from '@/api/infra/codegen' |
|
||||||
import type { CodegenPreviewVO } from '@/api/infra/codegen/types' |
|
||||||
import { handleTree2 } from '@/utils/tree' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraPreviewModal' }) |
|
||||||
|
|
||||||
const { createMessage } = useMessage() |
|
||||||
|
|
||||||
const fileTree = ref([]) |
|
||||||
const activeKey = ref('') |
|
||||||
const modeValue = ref(MODE.JS) |
|
||||||
const previewCodes = ref<CodegenPreviewVO[]>() |
|
||||||
|
|
||||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
|
|
||||||
const res = await previewCodegen(data.record.id) |
|
||||||
const file = handleFiles(res) |
|
||||||
previewCodes.value = res |
|
||||||
activeKey.value = res[0].filePath |
|
||||||
fileTree.value = handleTree2(file, 'id', 'parentId', 'children', '/') |
|
||||||
}) |
|
||||||
|
|
||||||
function handleSelect(keys) { |
|
||||||
activeKey.value = keys[0] |
|
||||||
} |
|
||||||
|
|
||||||
/** 生成 files 目录 */ |
|
||||||
interface filesType { |
|
||||||
id: string |
|
||||||
label: string |
|
||||||
parentId: string |
|
||||||
} |
|
||||||
|
|
||||||
function handleFiles(datas) { |
|
||||||
const exists = {} // key：file 的 id；value：true |
|
||||||
const files: filesType[] = [] |
|
||||||
// 遍历每个元素 |
|
||||||
for (const data of datas) { |
|
||||||
let paths = data.filePath.split('/') |
|
||||||
let fullPath = '' // 从头开始的路径，用于生成 id |
|
||||||
// 特殊处理 java 文件 |
|
||||||
if (paths[paths.length - 1].includes('.java')) { |
|
||||||
const newPaths: string[] = [] |
|
||||||
for (let i = 0; i < paths.length; i++) { |
|
||||||
let path = paths[i] |
|
||||||
if (path !== 'java') { |
|
||||||
newPaths.push(path) |
|
||||||
continue |
|
||||||
} |
|
||||||
newPaths.push(path) |
|
||||||
// 特殊处理中间的 package，进行合并 |
|
||||||
let tmp = '' |
|
||||||
while (i < paths.length) { |
|
||||||
path = paths[i + 1] |
|
||||||
if ( |
|
||||||
path === 'controller' |
|
||||||
|| path === 'convert' |
|
||||||
|| path === 'dal' |
|
||||||
|| path === 'enums' |
|
||||||
|| path === 'service' |
|
||||||
|| path === 'vo' // 下面三个，主要是兜底。可能考虑到有人改了包结构 |
|
||||||
|| path === 'mysql' |
|
||||||
|| path === 'dataobject' |
|
||||||
) |
|
||||||
break |
|
||||||
|
|
||||||
tmp = tmp ? `${tmp}.${path}` : path |
|
||||||
i++ |
|
||||||
} |
|
||||||
if (tmp) |
|
||||||
newPaths.push(tmp) |
|
||||||
} |
|
||||||
paths = newPaths |
|
||||||
} |
|
||||||
// 遍历每个 path， 拼接成树 |
|
||||||
for (let i = 0; i < paths.length; i++) { |
|
||||||
// 已经添加到 files 中，则跳过 |
|
||||||
const oldFullPath = fullPath |
|
||||||
// 下面的 replaceAll 的原因，是因为上面包处理了，导致和 tabs 不匹配，所以 replaceAll 下 |
|
||||||
fullPath = fullPath.length === 0 ? paths[i] : `${fullPath.replaceAll('.', '/')}/${paths[i]}` |
|
||||||
if (exists[fullPath]) |
|
||||||
continue |
|
||||||
|
|
||||||
// 添加到 files 中 |
|
||||||
exists[fullPath] = true |
|
||||||
files.push({ |
|
||||||
id: fullPath, |
|
||||||
label: paths[i], |
|
||||||
parentId: oldFullPath || '/', // "/" 为根节点 |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
return files |
|
||||||
} |
|
||||||
|
|
||||||
/** 复制 */ |
|
||||||
async function copy(text: string) { |
|
||||||
const { copy, copied, isSupported } = useClipboard({ source: text }) |
|
||||||
if (!isSupported) { |
|
||||||
createMessage.error('复制失败') |
|
||||||
} |
|
||||||
else { |
|
||||||
await copy() |
|
||||||
if (unref(copied)) |
|
||||||
createMessage.success('复制成功') |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :default-fullscreen="true" title="预览代码" @register="registerModal"> |
|
||||||
<div class="flex"> |
|
||||||
<Card class="min-w-130 w-1/4"> |
|
||||||
<BasicTree |
|
||||||
title="文件夹列表" toolbar :default-expand-all="true" tree-wrapper-class-name="h-[800px] overflow-auto" |
|
||||||
:click-row-to-expand="false" :tree-data="fileTree" :field-names="{ key: 'id', title: 'label' }" |
|
||||||
@select="handleSelect" |
|
||||||
/> |
|
||||||
</Card> |
|
||||||
<Card class="w-3/4"> |
|
||||||
<Tabs v-model:activeKey="activeKey"> |
|
||||||
<Tabs.TabPane |
|
||||||
v-for="item in previewCodes" :key="item.filePath" |
|
||||||
:tab="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)" |
|
||||||
> |
|
||||||
<a-button type="link" style="float: right; padding: 4px 60px;" @click="copy(item.code)"> |
|
||||||
复制 |
|
||||||
</a-button> |
|
||||||
<CodeEditor class="max-h-200" :value="item.code" :mode="modeValue" :readonly="true" /> |
|
||||||
</Tabs.TabPane> |
|
||||||
</Tabs> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,328 +0,0 @@ |
|||||||
import { listSimpleDictType } from '@/api/system/dict/type' |
|
||||||
import { listSimpleMenus } from '@/api/system/menu' |
|
||||||
import type { FormSchema } from '@/components/Form' |
|
||||||
import type { BasicColumn } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
async function getDictTypeOptions() { |
|
||||||
const dictTypeOptions: any[] = [] |
|
||||||
const res = await listSimpleDictType() |
|
||||||
dictTypeOptions.push(...res) |
|
||||||
return dictTypeOptions |
|
||||||
} |
|
||||||
|
|
||||||
export const basicInfoSchemas: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '基本信息', |
|
||||||
field: 'basicInfo', |
|
||||||
component: 'Divider', |
|
||||||
colProps: { span: 24 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表名称', |
|
||||||
field: 'tableName', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '表描述', |
|
||||||
field: 'tableComment', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '实体类名称', |
|
||||||
field: 'className', |
|
||||||
required: true, |
|
||||||
helpMessage: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '作者', |
|
||||||
field: 'author', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '生成信息', |
|
||||||
field: 'genInfo', |
|
||||||
component: 'Divider', |
|
||||||
colProps: { span: 24 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '生成模板', |
|
||||||
field: 'templateType', |
|
||||||
required: true, |
|
||||||
component: 'Select', |
|
||||||
defaultValue: '30', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '前端类型', |
|
||||||
field: 'frontType', |
|
||||||
required: true, |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '生成场景', |
|
||||||
field: 'scene', |
|
||||||
required: true, |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE), |
|
||||||
}, |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '模块名', |
|
||||||
field: 'moduleName', |
|
||||||
required: true, |
|
||||||
helpMessage: '模块名，即一级目录，例如 system、infra、tool 等等', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '业务名', |
|
||||||
field: 'businessName', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
helpMessage: '业务名，即二级目录，例如 user、permission、dict 等等', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '类名称', |
|
||||||
field: 'className', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
helpMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '类描述', |
|
||||||
field: 'classComment', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
helpMessage: '用作类描述，例如 用户', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '上级菜单', |
|
||||||
field: 'parentMenuId', |
|
||||||
required: true, |
|
||||||
component: 'ApiTreeSelect', |
|
||||||
componentProps: { |
|
||||||
api: () => listSimpleMenus(), |
|
||||||
handleTree: 'id', |
|
||||||
}, |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '自定义路径', |
|
||||||
field: 'genPath', |
|
||||||
component: 'Input', |
|
||||||
helpMessage: '填写磁盘绝对路径，若不填写，则生成到当前Web项目下', |
|
||||||
defaultValue: '/', |
|
||||||
ifShow: ({ values }) => values.genType === '1', |
|
||||||
colProps: { span: 12 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '备注', |
|
||||||
field: 'remark', |
|
||||||
component: 'InputTextArea', |
|
||||||
colProps: { span: 24 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '字段列名', |
|
||||||
dataIndex: 'columnName', |
|
||||||
width: 60, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '基础属性', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
title: '物理类型', |
|
||||||
dataIndex: 'dataType', |
|
||||||
editComponent: 'Select', |
|
||||||
width: 50, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '字段描述', |
|
||||||
dataIndex: 'columnComment', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Input', |
|
||||||
width: 50, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Java类型', |
|
||||||
dataIndex: 'javaType', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Select', |
|
||||||
editComponentProps: { |
|
||||||
options: [ |
|
||||||
{ |
|
||||||
label: 'Long', |
|
||||||
value: 'Long', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'String', |
|
||||||
value: 'String', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Integer', |
|
||||||
value: 'Integer', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Double', |
|
||||||
value: 'Double', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'BigDecimal', |
|
||||||
value: 'BigDecimal', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'LocalDateTime', |
|
||||||
value: 'LocalDateTime', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Boolean', |
|
||||||
value: 'Boolean', |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
width: 50, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'java属性', |
|
||||||
dataIndex: 'javaField', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Input', |
|
||||||
width: 50, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '增删改查', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
title: '插入', |
|
||||||
dataIndex: 'createOperation', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Checkbox', |
|
||||||
editValueMap: (value) => { |
|
||||||
return value ? '是' : '否' |
|
||||||
}, |
|
||||||
width: 40, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '编辑', |
|
||||||
dataIndex: 'updateOperation', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Checkbox', |
|
||||||
editValueMap: (value) => { |
|
||||||
return value ? '是' : '否' |
|
||||||
}, |
|
||||||
width: 40, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '列表', |
|
||||||
dataIndex: 'listOperationResult', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Checkbox', |
|
||||||
editValueMap: (value) => { |
|
||||||
return value ? '是' : '否' |
|
||||||
}, |
|
||||||
width: 40, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '查询', |
|
||||||
dataIndex: 'listOperation', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Checkbox', |
|
||||||
editValueMap: (value) => { |
|
||||||
return value ? '是' : '否' |
|
||||||
}, |
|
||||||
width: 40, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '查询方式', |
|
||||||
dataIndex: 'listOperationCondition', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Select', |
|
||||||
editComponentProps: { |
|
||||||
options: [ |
|
||||||
{ label: '=', value: '=' }, |
|
||||||
{ label: '!=', value: '!=' }, |
|
||||||
{ label: '>', value: '>' }, |
|
||||||
{ label: '>=', value: '>=' }, |
|
||||||
{ label: '<', value: '<' }, |
|
||||||
{ label: '<=', value: '<=' }, |
|
||||||
{ label: 'LIKE', value: 'LIKE' }, |
|
||||||
{ label: 'BETWEEN', value: 'BETWEEN' }, |
|
||||||
], |
|
||||||
}, |
|
||||||
width: 80, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '允许空', |
|
||||||
dataIndex: 'nullable', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Checkbox', |
|
||||||
editValueMap: (value) => { |
|
||||||
return value ? '是' : '否' |
|
||||||
}, |
|
||||||
width: 40, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '显示类型', |
|
||||||
dataIndex: 'htmlType', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Select', |
|
||||||
editComponentProps: { |
|
||||||
options: [ |
|
||||||
{ label: '文本框', value: 'input' }, |
|
||||||
{ label: '文本域', value: 'textarea' }, |
|
||||||
{ label: '下拉框', value: 'select' }, |
|
||||||
{ label: '单选框', value: 'radio' }, |
|
||||||
{ label: '复选框', value: 'checkbox' }, |
|
||||||
{ label: '日期控件', value: 'datetime' }, |
|
||||||
{ label: '图片上传', value: 'imageUpload' }, |
|
||||||
{ label: '文件上传', value: 'fileUpload' }, |
|
||||||
{ label: '富文本控件', value: 'editor' }, |
|
||||||
], |
|
||||||
}, |
|
||||||
width: 60, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '字典类型', |
|
||||||
dataIndex: 'dictType', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Select', |
|
||||||
editComponentProps: { |
|
||||||
options: (await getDictTypeOptions()).map(item => ({ value: item.type, label: item.name })), |
|
||||||
}, |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '示例', |
|
||||||
dataIndex: 'example', |
|
||||||
editRow: true, |
|
||||||
editComponent: 'Input', |
|
||||||
width: 60, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,109 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import PreviewModal from './components/PreviewModal.vue' |
|
||||||
import ImportTableModal from './components/ImportTableModal.vue' |
|
||||||
import { columns, searchFormSchema } from './codegen.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteCodegenTable, downloadCodegen, getCodegenTablePage, syncCodegenFromDB } from '@/api/infra/codegen' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraCodegen' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal() |
|
||||||
const [registerImportTableModal, { openModal: openImportTableModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '代码生成列表', |
|
||||||
api: getCodegenTablePage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 360, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handlePreview(record: Recordable) { |
|
||||||
openPreviewModal(true, { |
|
||||||
record, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEditTable(record: Recordable) { |
|
||||||
go(`/codegen/editTable?id=${record.id}`) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleGenTable(record: Recordable) { |
|
||||||
await downloadCodegen(record) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleSynchDb(record: Recordable) { |
|
||||||
await syncCodegenFromDB(record.id) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteCodegenTable(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:codegen:create']" type="primary" :pre-icon="IconEnum.IMPORT" @click="openImportTableModal(true)"> |
|
||||||
{{ t('action.import') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.PREVIEW, label: '预览', auth: 'infra:codegen:preview', onClick: handlePreview.bind(null, record) }, |
|
||||||
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'infra:codegen:update', onClick: handleEditTable.bind(null, record) }, |
|
||||||
{ icon: IconEnum.DOWNLOAD, label: '生成', auth: 'infra:codegen:download', onClick: handleGenTable.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.RESET, |
|
||||||
label: t('action.sync'), |
|
||||||
auth: 'infra:codegen:update', |
|
||||||
popConfirm: { |
|
||||||
title: `确认要强制同步${record.tableName}表结构吗？`, |
|
||||||
placement: 'left', |
|
||||||
confirm: handleSynchDb.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'infra:codegen:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<PreviewModal @register="registerPreviewModal" /> |
|
||||||
<ImportTableModal @register="registerImportTableModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { formSchema } from './config.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { createConfig, getConfig, updateConfig } from '@/api/infra/config' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraConfigModal' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const isUpdate = ref(true) |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
resetFields() |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
isUpdate.value = !!data?.isUpdate |
|
||||||
if (unref(isUpdate)) { |
|
||||||
const res = await getConfig(data.record.id) |
|
||||||
setFieldsValue({ ...res }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() as any |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
if (unref(isUpdate)) |
|
||||||
await updateConfig(values) |
|
||||||
else |
|
||||||
await createConfig(values) |
|
||||||
|
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,139 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '参数主键', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '参数分类', |
|
||||||
dataIndex: 'category', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '参数名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '参数键名', |
|
||||||
dataIndex: 'key', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '参数键值', |
|
||||||
dataIndex: 'value', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '系统内置', |
|
||||||
dataIndex: 'type', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.INFRA_CONFIG_TYPE) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '是否可见', |
|
||||||
dataIndex: 'visible', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderTag(text ? '是' : '否') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '备注', |
|
||||||
dataIndex: 'remark', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '参数名称', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '参数键名', |
|
||||||
field: 'key', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '系统内置', |
|
||||||
field: 'type', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '参数分类', |
|
||||||
field: 'category', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '参数名称', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '参数键名', |
|
||||||
field: 'key', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '参数键值', |
|
||||||
field: 'value', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '是否可见', |
|
||||||
field: 'visible', |
|
||||||
component: 'RadioGroup', |
|
||||||
componentProps: { |
|
||||||
options: [ |
|
||||||
{ label: '是', value: true }, |
|
||||||
{ label: '否', value: false }, |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '备注', |
|
||||||
field: 'remark', |
|
||||||
component: 'InputTextArea', |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,95 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import ConfigModal from './ConfigModal.vue' |
|
||||||
import { columns, searchFormSchema } from './config.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import type { ConfigExportReqVO } from '@/api/infra/config' |
|
||||||
import { deleteConfig, exportConfig, getConfigPage } from '@/api/infra/config' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraConfig' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createConfirm, createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { getForm, reload }] = useTable({ |
|
||||||
title: '配置中心列表', |
|
||||||
api: getConfigPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openModal(true, { isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openModal(true, { record, isUpdate: true }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleExport() { |
|
||||||
createConfirm({ |
|
||||||
title: t('common.exportTitle'), |
|
||||||
iconType: 'warning', |
|
||||||
content: t('common.exportMessage'), |
|
||||||
async onOk() { |
|
||||||
await exportConfig(getForm().getFieldsValue() as ConfigExportReqVO) |
|
||||||
createMessage.success(t('common.exportSuccessText')) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteConfig(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:config:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
<a-button v-auth="['infra:config:export']" :pre-icon="IconEnum.EXPORT" @click="handleExport"> |
|
||||||
{{ t('action.export') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'infra:config:update', onClick: handleEdit.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'infra:config:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<ConfigModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,56 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { formSchema } from './dataSourceConfig.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { createDataSourceConfig, getDataSourceConfig, updateDataSourceConfig } from '@/api/infra/dataSourceConfig' |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const isUpdate = ref(true) |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
resetFields() |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
isUpdate.value = !!data?.isUpdate |
|
||||||
if (unref(isUpdate)) { |
|
||||||
const res = await getDataSourceConfig(data.record.id) |
|
||||||
setFieldsValue({ ...res }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() as any |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
if (unref(isUpdate)) |
|
||||||
await updateDataSourceConfig(values) |
|
||||||
else |
|
||||||
await createDataSourceConfig(values) |
|
||||||
|
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '主键编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '数据源名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '数据源连接', |
|
||||||
dataIndex: 'url', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '用户名', |
|
||||||
dataIndex: 'username', |
|
||||||
width: 120, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '数据源名称', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '数据源连接', |
|
||||||
field: 'url', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '用户名', |
|
||||||
field: 'username', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '密码', |
|
||||||
field: 'password', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import DataSourceConfigModal from './DataSourceConfigModal.vue' |
|
||||||
import { columns } from './dataSourceConfig.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteDataSourceConfig, getDataSourceConfigList } from '@/api/infra/dataSourceConfig' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraDataSourceConfig' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '数据源列表', |
|
||||||
api: getDataSourceConfigList, |
|
||||||
columns, |
|
||||||
pagination: false, |
|
||||||
useSearchForm: false, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openModal(true, { isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openModal(true, { record, isUpdate: true }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteDataSourceConfig(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:data-source-config:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ |
|
||||||
icon: IconEnum.EDIT, |
|
||||||
label: t('action.edit'), |
|
||||||
ifShow: record.id !== 0, |
|
||||||
auth: 'infra:data-source-config:update', |
|
||||||
onClick: handleEdit.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
ifShow: record.id !== 0, |
|
||||||
auth: 'infra:data-source-config:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<DataSourceConfigModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
<script setup lang="ts" name="InfraDbDoc"> |
|
||||||
import { onMounted, ref } from 'vue' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { IFrame } from '@/components/IFrame' |
|
||||||
import * as DbDocApi from '@/api/infra/dbDoc' |
|
||||||
import { downloadByData } from '@/utils/file/download' |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const src = ref('') |
|
||||||
/** 页面加载 */ |
|
||||||
async function init() { |
|
||||||
const res = await DbDocApi.exportHtml() |
|
||||||
const blob = new Blob([res], { type: 'text/html' }) |
|
||||||
const blobUrl = window.URL.createObjectURL(blob) |
|
||||||
src.value = blobUrl |
|
||||||
} |
|
||||||
/** 处理导出 */ |
|
||||||
async function handleExport(type: string) { |
|
||||||
if (type === 'HTML') { |
|
||||||
const res = await DbDocApi.exportHtml() |
|
||||||
downloadByData(res, '数据库文档.html') |
|
||||||
} |
|
||||||
if (type === 'Word') { |
|
||||||
const res = await DbDocApi.exportWord() |
|
||||||
downloadByData(res, '数据库文档.doc') |
|
||||||
} |
|
||||||
if (type === 'Markdown') { |
|
||||||
const res = await DbDocApi.exportMarkdown() |
|
||||||
downloadByData(res, '数据库文档.md') |
|
||||||
} |
|
||||||
} |
|
||||||
onMounted(async () => { |
|
||||||
await init() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper> |
|
||||||
<div class="mb-3"> |
|
||||||
<a-button type="primary" size="small" class="mr-1" @click="handleExport('HTML')"> |
|
||||||
{{ `${t('action.export')}Html` }} |
|
||||||
</a-button> |
|
||||||
<a-button type="primary" size="small" class="mr-1" @click="handleExport('Word')"> |
|
||||||
{{ `${t('action.export')}Word` }} |
|
||||||
</a-button> |
|
||||||
<a-button type="primary" size="small" @click="handleExport('Markdown')"> |
|
||||||
{{ `${t('action.export')}Markdown` }} |
|
||||||
</a-button> |
|
||||||
</div> |
|
||||||
<IFrame :src="src" /> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
<script setup lang="ts" name="InfraDruid"> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { IFrame } from '@/components/IFrame' |
|
||||||
|
|
||||||
const src = ref(`${import.meta.env.VITE_GLOB_BASE_URL}/druid/index.html`) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<IFrame :src="src" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '文件名', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '文件 URL', |
|
||||||
dataIndex: 'url', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderImg(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '文件路径', |
|
||||||
dataIndex: 'path', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '文件大小', |
|
||||||
dataIndex: 'size', |
|
||||||
width: 120, |
|
||||||
customRender: ({ text }) => { |
|
||||||
const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
|
||||||
const srcSize = Number.parseFloat(text) |
|
||||||
const index = Math.floor(Math.log(srcSize) / Math.log(1024)) |
|
||||||
const size = srcSize / 1024 ** index |
|
||||||
return `${size.toFixed(2)} ${unitArr[index]}` |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '文件类型', |
|
||||||
dataIndex: 'type', |
|
||||||
width: 100, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderTag(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '文件内容', |
|
||||||
dataIndex: 'content', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderImg(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '上传时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '文件路径', |
|
||||||
field: 'path', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,92 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { columns, searchFormSchema } from './file.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicUpload } from '@/components/Upload' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteFile, getFilePage } from '@/api/infra/file' |
|
||||||
import { getAccessToken, getTenantId } from '@/utils/auth' |
|
||||||
import { copyText } from '@/utils/copyTextToClipboard' |
|
||||||
import { uploadApi } from '@/api/base/upload' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraFile' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
|
|
||||||
const uploadParams = ref({ |
|
||||||
'Authorization': `Bearer ${getAccessToken()}`, |
|
||||||
'tenant-id': getTenantId(), |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '文件列表', |
|
||||||
api: getFilePage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 160, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleChange() { |
|
||||||
reload() |
|
||||||
} |
|
||||||
|
|
||||||
function handleCopy(record: Recordable) { |
|
||||||
copyText(record.url) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteFile(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<BasicUpload |
|
||||||
:max-size="20" |
|
||||||
:max-number="10" |
|
||||||
:empty-hide-preview="true" |
|
||||||
:upload-params="uploadParams" |
|
||||||
:api="uploadApi" |
|
||||||
class="my-5" |
|
||||||
:accept="['image/*']" |
|
||||||
@change="handleChange" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.VIEW, label: '复制链接', onClick: handleCopy.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'infra:file:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { formSchema } from './ficleConfig.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { createFileConfig, getFileConfig, updateFileConfig } from '@/api/infra/fileConfig' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraFileConfigModal' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const isUpdate = ref(true) |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
resetFields() |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
isUpdate.value = !!data?.isUpdate |
|
||||||
if (unref(isUpdate)) { |
|
||||||
const res = await getFileConfig(data.record.id) |
|
||||||
setFieldsValue({ ...res }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
if (unref(isUpdate)) |
|
||||||
await updateFileConfig(values) |
|
||||||
else |
|
||||||
await createFileConfig(values) |
|
||||||
|
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,179 +0,0 @@ |
|||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '配置名', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '存储器', |
|
||||||
dataIndex: 'storage', |
|
||||||
width: 100, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.INFRA_FILE_STORAGE) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '主配置', |
|
||||||
dataIndex: 'master', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.INFRA_BOOLEAN_STRING) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '备注', |
|
||||||
dataIndex: 'remark', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDate(text) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '配置名', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '存储器', |
|
||||||
field: 'storage', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '创建时间', |
|
||||||
field: 'createTime', |
|
||||||
component: 'RangePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '配置名', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '存储器', |
|
||||||
field: 'storage', |
|
||||||
component: 'Select', |
|
||||||
required: true, |
|
||||||
dynamicDisabled: ({ values }) => !!values.id, |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE) as any, |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '基础路径', |
|
||||||
field: 'config.basePath', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage >= 10 && values.storage <= 12, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '主机地址', |
|
||||||
field: 'config.host', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage >= 11 && values.storage <= 12, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '主机端口', |
|
||||||
field: 'config.port', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage >= 11 && values.storage <= 12, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '用户名', |
|
||||||
field: 'config.username', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage >= 11 && values.storage <= 12, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '密码', |
|
||||||
field: 'config.password', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage >= 11 && values.storage <= 12, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '连接模式', |
|
||||||
field: 'config.basePath', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage === 11, |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: [ |
|
||||||
{ lable: '主动模式', key: 'Active', value: 'Active' }, |
|
||||||
{ lable: '被动模式', key: 'Passive', value: 'Passive' }, |
|
||||||
], |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '节点地址', |
|
||||||
field: 'config.endpoint', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage === 20, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '存储 bucket', |
|
||||||
field: 'config.bucket', |
|
||||||
required: true, |
|
||||||
ifShow: ({ values }) => values.storage === 20, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'accessKey', |
|
||||||
field: 'config.accessKey', |
|
||||||
ifShow: ({ values }) => values.storage === 20, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'accessSecret', |
|
||||||
field: 'config.accessSecret', |
|
||||||
ifShow: ({ values }) => values.storage === 20, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '自定义域名', |
|
||||||
field: 'config.domain', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '备注', |
|
||||||
field: 'remark', |
|
||||||
component: 'InputTextArea', |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,107 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import FileConfigModal from './FileConfigModal.vue' |
|
||||||
import { columns, searchFormSchema } from './ficleConfig.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import { deleteFileConfig, getFileConfigPage, testFileConfig, updateFileConfigMaster } from '@/api/infra/fileConfig' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraFileConfig' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createConfirm, createMessage, createSuccessModal } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { reload }] = useTable({ |
|
||||||
title: '文件配置列表', |
|
||||||
api: getFileConfigPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 280, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openModal(true, { isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openModal(true, { record, isUpdate: true }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleTest(record: Recordable) { |
|
||||||
const res = await testFileConfig(record.id) |
|
||||||
createSuccessModal({ content: res }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleMaster(record: Recordable) { |
|
||||||
createConfirm({ |
|
||||||
title: '主配置', |
|
||||||
iconType: 'warning', |
|
||||||
content: `是否确认修改配置编号为"${record.id}"的数据项为主配置?`, |
|
||||||
async onOk() { |
|
||||||
await updateFileConfigMaster(record.id) |
|
||||||
createMessage.success('配置成功') |
|
||||||
reload() |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteFileConfig(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:file-config:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[ |
|
||||||
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'infra:file-config:update', onClick: handleEdit.bind(null, record) }, |
|
||||||
{ icon: IconEnum.TEST, label: t('action.test'), auth: 'infra:file-config:update', onClick: handleTest.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.AUTH, |
|
||||||
label: '主配置', |
|
||||||
auth: 'infra:file-config:update', |
|
||||||
ifShow: () => { |
|
||||||
return !record.master |
|
||||||
}, |
|
||||||
onClick: handleMaster.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'infra:file-config:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<FileConfigModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,92 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref, unref } from 'vue' |
|
||||||
import { Steps } from 'ant-design-vue' |
|
||||||
import { descSchema, formSchema } from './job.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { Description, useDescription } from '@/components/Description' |
|
||||||
import { createJob, getJob, getJobNextTimes, updateJob } from '@/api/infra/job' |
|
||||||
import { formatToDateTime } from '@/utils/dateUtil' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraJobModal' }) |
|
||||||
|
|
||||||
const emit = defineEmits(['success', 'register']) |
|
||||||
|
|
||||||
const Step = Steps.Step |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { createMessage } = useMessage() |
|
||||||
const isUpdate = ref(true) |
|
||||||
const isEdit = ref(true) |
|
||||||
|
|
||||||
const datas = ref() |
|
||||||
const nextTimes = ref() |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 120, |
|
||||||
baseColProps: { span: 24 }, |
|
||||||
schemas: formSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { span: 23 }, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerDesc] = useDescription({ |
|
||||||
schema: descSchema, |
|
||||||
data: datas, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
isEdit.value = !!data?.isEdit |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
if (data?.isEdit) { |
|
||||||
resetFields() |
|
||||||
|
|
||||||
isUpdate.value = !!data?.isUpdate |
|
||||||
if (unref(isUpdate)) { |
|
||||||
const res = await getJob(data.record.id) |
|
||||||
setFieldsValue({ ...res }) |
|
||||||
} |
|
||||||
} |
|
||||||
else { |
|
||||||
datas.value = await getJob(data.record.id) |
|
||||||
nextTimes.value = await getJobNextTimes(data.record.id) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
const values = await validate() as any |
|
||||||
setModalProps({ confirmLoading: true }) |
|
||||||
if (unref(isUpdate)) |
|
||||||
await updateJob(values) |
|
||||||
else |
|
||||||
await createJob(values) |
|
||||||
|
|
||||||
closeModal() |
|
||||||
emit('success') |
|
||||||
createMessage.success(t('common.saveSuccessText')) |
|
||||||
} |
|
||||||
finally { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal |
|
||||||
v-bind="$attrs" |
|
||||||
:title="isEdit ? (isUpdate ? t('action.edit') : t('action.create')) : t('action.detail')" |
|
||||||
@register="registerModal" |
|
||||||
@ok="handleSubmit" |
|
||||||
> |
|
||||||
<BasicForm v-if="isEdit" @register="registerForm" /> |
|
||||||
<Description v-if="!isEdit" :column="2" @register="registerDesc" /> |
|
||||||
<Steps v-if="!isEdit" progress-dot :current="nextTimes && nextTimes.length" direction="vertical"> |
|
||||||
<template v-for="(nextTime, index) in nextTimes" :key="index"> |
|
||||||
<Step :title="formatToDateTime(nextTime)" :description="'第' + `${index + 1}` + '次'" /> |
|
||||||
</template> |
|
||||||
</Steps> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,141 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import JobModal from './JobModal.vue' |
|
||||||
import { columns, searchFormSchema } from './job.data' |
|
||||||
import { useGo } from '@/hooks/web/usePage' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import type { JobExportReqVO } from '@/api/infra/job' |
|
||||||
import { deleteJob, exportJob, getJobPage, runJob, updateJobStatus } from '@/api/infra/job' |
|
||||||
import { InfraJobStatusEnum } from '@/enums/systemEnum' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraJob' }) |
|
||||||
|
|
||||||
const go = useGo() |
|
||||||
const { t } = useI18n() |
|
||||||
const { createConfirm, createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { getForm, reload }] = useTable({ |
|
||||||
title: '定时任务列表', |
|
||||||
api: getJobPage, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleCreate() { |
|
||||||
openModal(true, { isEdit: true, isUpdate: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleEdit(record: Recordable) { |
|
||||||
openModal(true, { record, isEdit: true, isUpdate: true }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleChangeStatus(record: Recordable, open: boolean) { |
|
||||||
const status = open ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP |
|
||||||
const statusStr = open ? '开启' : '关闭' |
|
||||||
createConfirm({ |
|
||||||
title: '调整状态', |
|
||||||
iconType: 'warning', |
|
||||||
content: `是否确认${statusStr}定时任务编号为"${record.id}"的数据项?`, |
|
||||||
async onOk() { |
|
||||||
await updateJobStatus(record.id, status) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
reload() |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function handleRun(record: Recordable) { |
|
||||||
createConfirm({ |
|
||||||
title: '执行', |
|
||||||
iconType: 'warning', |
|
||||||
content: `确认要立即执行一次"${record.name}"任务吗?`, |
|
||||||
async onOk() { |
|
||||||
await runJob(record.id) |
|
||||||
createMessage.success(t('common.successText')) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function handleView(record: Recordable) { |
|
||||||
openModal(true, { record, isEdit: false }) |
|
||||||
} |
|
||||||
|
|
||||||
function handleJobLog(record: Recordable) { |
|
||||||
if (record.id > 0) |
|
||||||
go(`/job/job-log?id=${record.id}`) |
|
||||||
else |
|
||||||
go('/job/job-log') |
|
||||||
} |
|
||||||
|
|
||||||
async function handleExport() { |
|
||||||
createConfirm({ |
|
||||||
title: t('common.exportTitle'), |
|
||||||
iconType: 'warning', |
|
||||||
content: t('common.exportMessage'), |
|
||||||
async onOk() { |
|
||||||
await exportJob(getForm().getFieldsValue() as JobExportReqVO) |
|
||||||
createMessage.success(t('common.exportSuccessText')) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDelete(record: Recordable) { |
|
||||||
await deleteJob(record.id) |
|
||||||
createMessage.success(t('common.delSuccessText')) |
|
||||||
reload() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:job:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
|
||||||
{{ t('action.create') }} |
|
||||||
</a-button> |
|
||||||
<a-button v-auth="['infra:job:export']" :pre-icon="IconEnum.EXPORT" @click="handleExport"> |
|
||||||
{{ t('action.export') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction |
|
||||||
:actions="[{ icon: IconEnum.EDIT, label: t('action.edit'), onClick: handleEdit.bind(null, record) }]" |
|
||||||
:drop-down-actions="[ |
|
||||||
{ icon: IconEnum.AUTH, label: '开启', auth: 'infra:job:update', onClick: handleChangeStatus.bind(null, record, true) }, |
|
||||||
{ icon: IconEnum.EDIT, label: '暂停', auth: 'infra:job:update', onClick: handleChangeStatus.bind(null, record, false) }, |
|
||||||
{ icon: IconEnum.TEST, label: '执行一次', auth: 'infra:job:trigger', onClick: handleRun.bind(null, record) }, |
|
||||||
{ icon: IconEnum.PREVIEW, label: '任务详细', auth: 'infra:job:query', onClick: handleView.bind(null, record) }, |
|
||||||
{ icon: IconEnum.LOG, label: '调度日志', auth: 'infra:job:query', onClick: handleJobLog.bind(null, record) }, |
|
||||||
{ |
|
||||||
icon: IconEnum.DELETE, |
|
||||||
danger: true, |
|
||||||
label: t('action.delete'), |
|
||||||
auth: 'infra:job:delete', |
|
||||||
popConfirm: { |
|
||||||
title: t('common.delMessage'), |
|
||||||
placement: 'left', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<JobModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,172 +0,0 @@ |
|||||||
import type { DescItem } from '@/components/Description' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
import { useComponentRegister } from '@/components/Form' |
|
||||||
import { CronTab } from '@/components/CronTab' |
|
||||||
|
|
||||||
useComponentRegister('CronTab', CronTab) |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '任务编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '任务名称', |
|
||||||
dataIndex: 'name', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '处理器的名字', |
|
||||||
dataIndex: 'handlerName', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '处理器的参数', |
|
||||||
dataIndex: 'handlerParam', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'CRON 表达式', |
|
||||||
dataIndex: 'cronExpression', |
|
||||||
width: 200, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '任务状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderDict(text, DICT_TYPE.INFRA_JOB_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '任务名称', |
|
||||||
field: 'name', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务状态', |
|
||||||
field: 'status', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_JOB_STATUS) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的名字', |
|
||||||
field: 'handlerName', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const formSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '任务编号', |
|
||||||
field: 'id', |
|
||||||
show: false, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务名称', |
|
||||||
field: 'name', |
|
||||||
required: true, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的名字', |
|
||||||
field: 'handlerName', |
|
||||||
required: true, |
|
||||||
dynamicDisabled: ({ values }) => !!values.id, |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的参数', |
|
||||||
field: 'handlerParam', |
|
||||||
component: 'Input', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'CRON 表达式', |
|
||||||
field: 'cronExpression', |
|
||||||
required: true, |
|
||||||
component: 'CronTab', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '重试次数', |
|
||||||
field: 'retryCount', |
|
||||||
required: true, |
|
||||||
helpMessage: '设置为 0 时，不进行重试', |
|
||||||
defaultValue: 0, |
|
||||||
component: 'InputNumber', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '重试间隔', |
|
||||||
field: 'retryInterval', |
|
||||||
required: true, |
|
||||||
helpMessage: '单位：毫秒。设置为 0 时，无需间隔', |
|
||||||
defaultValue: 0, |
|
||||||
component: 'InputNumber', |
|
||||||
suffix: '毫秒', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '监控超时时间', |
|
||||||
field: 'monitorTimeout', |
|
||||||
component: 'Input', |
|
||||||
suffix: '毫秒', |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const descSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
label: '任务编号', |
|
||||||
field: 'id', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务名称', |
|
||||||
field: 'name', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务状态', |
|
||||||
field: 'status', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderDict(curVal, DICT_TYPE.INFRA_JOB_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的名字', |
|
||||||
field: 'handlerName', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的参数', |
|
||||||
field: 'handlerParam', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Cron 表达式', |
|
||||||
field: 'cronExpression', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '重试次数', |
|
||||||
field: 'retryCount', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '重试间隔', |
|
||||||
field: 'cronExpression', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderText(curVal, ' 毫秒') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '监控超时时间', |
|
||||||
field: 'monitorTimeout', |
|
||||||
render: (curVal) => { |
|
||||||
return curVal > 0 ? `${curVal} 毫秒` : '未开启' |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { descSchema } from './jobLog.data' |
|
||||||
import { Description, useDescription } from '@/components/Description' |
|
||||||
import { BasicModal, useModalInner } from '@/components/Modal' |
|
||||||
import { getJobLog } from '@/api/infra/jobLog' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraJobLogModal' }) |
|
||||||
|
|
||||||
const datas = ref() |
|
||||||
|
|
||||||
const [registerDesc] = useDescription({ |
|
||||||
schema: descSchema, |
|
||||||
data: datas, |
|
||||||
}) |
|
||||||
|
|
||||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => { |
|
||||||
setModalProps({ confirmLoading: false }) |
|
||||||
const res = await getJobLog(data.record.id) |
|
||||||
datas.value = res |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" title="查看详情" @register="registerModal"> |
|
||||||
<Description :column="2" @register="registerDesc" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
@ -1,70 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { useRoute } from 'vue-router' |
|
||||||
import JobLogModal from './JobLogModal.vue' |
|
||||||
import { columns, searchFormSchema } from './jobLog.data' |
|
||||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||||
import { useMessage } from '@/hooks/web/useMessage' |
|
||||||
import { useModal } from '@/components/Modal' |
|
||||||
import { IconEnum } from '@/enums/appEnum' |
|
||||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||||
import type { JobLogExportReqVO } from '@/api/infra/jobLog' |
|
||||||
import { exportJobLog, getJobLogPage } from '@/api/infra/jobLog' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraJobLog' }) |
|
||||||
|
|
||||||
const { t } = useI18n() |
|
||||||
const { query } = useRoute() |
|
||||||
const { createConfirm, createMessage } = useMessage() |
|
||||||
const [registerModal, { openModal }] = useModal() |
|
||||||
|
|
||||||
const [registerTable, { getForm, reload }] = useTable({ |
|
||||||
title: '定时任务日志列表', |
|
||||||
api: getJobLogPage, |
|
||||||
searchInfo: { id: query.id as unknown as number }, |
|
||||||
columns, |
|
||||||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|
||||||
useSearchForm: true, |
|
||||||
showTableSetting: true, |
|
||||||
showIndexColumn: false, |
|
||||||
actionColumn: { |
|
||||||
width: 140, |
|
||||||
title: t('common.action'), |
|
||||||
dataIndex: 'action', |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function handleDetail(record: Recordable) { |
|
||||||
openModal(true, { record }) |
|
||||||
} |
|
||||||
|
|
||||||
async function handleExport() { |
|
||||||
createConfirm({ |
|
||||||
title: t('common.exportTitle'), |
|
||||||
iconType: 'warning', |
|
||||||
content: t('common.exportMessage'), |
|
||||||
async onOk() { |
|
||||||
await exportJobLog(getForm().getFieldsValue() as JobLogExportReqVO) |
|
||||||
createMessage.success(t('common.exportSuccessText')) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<BasicTable @register="registerTable"> |
|
||||||
<template #toolbar> |
|
||||||
<a-button v-auth="['infra:job:export']" :pre-icon="IconEnum.EXPORT" @click="handleExport"> |
|
||||||
{{ t('action.export') }} |
|
||||||
</a-button> |
|
||||||
</template> |
|
||||||
<template #bodyCell="{ column, record }"> |
|
||||||
<template v-if="column.key === 'action'"> |
|
||||||
<TableAction :actions="[{ icon: IconEnum.EDIT, label: t('action.detail'), onClick: handleDetail.bind(null, record) }]" /> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</BasicTable> |
|
||||||
<JobLogModal @register="registerModal" @success="reload()" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,150 +0,0 @@ |
|||||||
import { h } from 'vue' |
|
||||||
import type { DescItem } from '@/components/Description' |
|
||||||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|
||||||
import { useRender } from '@/components/Table' |
|
||||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
|
||||||
import { JsonPreview } from '@/components/CodeEditor' |
|
||||||
|
|
||||||
export const columns: BasicColumn[] = [ |
|
||||||
{ |
|
||||||
title: '日志编号', |
|
||||||
dataIndex: 'id', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '任务编号', |
|
||||||
dataIndex: 'jobId', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '处理器的名字', |
|
||||||
dataIndex: 'handlerName', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '处理器的参数', |
|
||||||
dataIndex: 'handlerParam', |
|
||||||
width: 180, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '第几次执行', |
|
||||||
dataIndex: 'executeIndex', |
|
||||||
width: 100, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '执行时间', |
|
||||||
dataIndex: 'beginTime', |
|
||||||
width: 180, |
|
||||||
customRender: ({ record }) => { |
|
||||||
const startTime = useRender.renderDate(record.beginTime) |
|
||||||
const endTime = useRender.renderDate(record.endTime) |
|
||||||
return useRender.renderTags([startTime, endTime]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '执行时长', |
|
||||||
dataIndex: 'duration', |
|
||||||
width: 180, |
|
||||||
customRender: ({ text }) => { |
|
||||||
return useRender.renderText(text, ' 毫秒') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '任务状态', |
|
||||||
dataIndex: 'status', |
|
||||||
width: 180, |
|
||||||
customRender: ({ record }) => { |
|
||||||
return useRender.renderDict(record.status, DICT_TYPE.INFRA_JOB_LOG_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const searchFormSchema: FormSchema[] = [ |
|
||||||
{ |
|
||||||
label: '处理器的名字', |
|
||||||
field: 'handlerName', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '开始执行时间', |
|
||||||
field: 'beginTime', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '结束执行时间', |
|
||||||
field: 'endTime', |
|
||||||
component: 'DatePicker', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务状态', |
|
||||||
field: 'status', |
|
||||||
component: 'Select', |
|
||||||
componentProps: { |
|
||||||
options: getDictOptions(DICT_TYPE.INFRA_JOB_STATUS) as any, |
|
||||||
}, |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的名字', |
|
||||||
field: 'handlerName', |
|
||||||
component: 'Input', |
|
||||||
colProps: { span: 8 }, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
export const descSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
label: '日志编号', |
|
||||||
field: 'id', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务编号', |
|
||||||
field: 'jobId', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的名字', |
|
||||||
field: 'handlerName', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '处理器的参数', |
|
||||||
field: 'handlerParam', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '第几次执行', |
|
||||||
field: 'executeIndex', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '执行时间', |
|
||||||
field: 'beginTime', |
|
||||||
render: (_, data) => { |
|
||||||
const startTime = `开始: ${useRender.renderDate(data.beginTime)}` |
|
||||||
const endTime = `结束: ${useRender.renderDate(data.endTime)}` |
|
||||||
return h('span', {}, [startTime, h('br'), endTime]) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '执行时长', |
|
||||||
field: 'duration', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderText(curVal, ' 毫秒') |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '任务状态', |
|
||||||
field: 'status', |
|
||||||
render: (curVal) => { |
|
||||||
return useRender.renderDict(curVal, DICT_TYPE.INFRA_JOB_LOG_STATUS) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '执行结果', |
|
||||||
field: 'result', |
|
||||||
render: (curVal) => { |
|
||||||
const data = JSON.parse(curVal) |
|
||||||
return h(JsonPreview, { data }) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import type { Ref } from 'vue' |
|
||||||
import { ref, watch } from 'vue' |
|
||||||
import { Card } from 'ant-design-vue' |
|
||||||
import { useECharts } from '@/hooks/web/useECharts' |
|
||||||
import { propTypes } from '@/utils/propTypes' |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
loading: propTypes.bool.def(true), |
|
||||||
commandStats: propTypes.array.def([]), |
|
||||||
width: propTypes.string.def('100%'), |
|
||||||
height: propTypes.string.def('300px'), |
|
||||||
}) |
|
||||||
|
|
||||||
const chartRef = ref<HTMLDivElement | null>(null) |
|
||||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
|
||||||
|
|
||||||
const optionsData = ref<any[]>(props.commandStats) |
|
||||||
|
|
||||||
watch( |
|
||||||
() => props.loading, |
|
||||||
() => { |
|
||||||
if (props.loading) |
|
||||||
return |
|
||||||
|
|
||||||
setOptions({ |
|
||||||
tooltip: { |
|
||||||
trigger: 'item', |
|
||||||
formatter: '{a} <br/>{b} : {c} ({d}%)', |
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
name: '命令', |
|
||||||
type: 'pie', |
|
||||||
roseType: 'radius', |
|
||||||
radius: [15, 95], |
|
||||||
center: ['50%', '38%'], |
|
||||||
data: optionsData.value, |
|
||||||
animationEasing: 'cubicInOut', |
|
||||||
animationDuration: 1000, |
|
||||||
}, |
|
||||||
], |
|
||||||
}) |
|
||||||
}, |
|
||||||
{ immediate: true }, |
|
||||||
) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<Card title="命令统计" :loading="loading"> |
|
||||||
<div ref="chartRef" :style="{ width, height }" /> |
|
||||||
</Card> |
|
||||||
</template> |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import type { Ref } from 'vue' |
|
||||||
import { ref, watch } from 'vue' |
|
||||||
import { Card } from 'ant-design-vue' |
|
||||||
import { useECharts } from '@/hooks/web/useECharts' |
|
||||||
import { propTypes } from '@/utils/propTypes' |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
loading: propTypes.bool.def(true), |
|
||||||
memoryHuman: propTypes.string.def('0'), |
|
||||||
width: propTypes.string.def('100%'), |
|
||||||
height: propTypes.string.def('300px'), |
|
||||||
}) |
|
||||||
|
|
||||||
const chartRef = ref<HTMLDivElement | null>(null) |
|
||||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
|
||||||
|
|
||||||
watch( |
|
||||||
() => props.loading, |
|
||||||
() => { |
|
||||||
if (props.loading) |
|
||||||
return |
|
||||||
|
|
||||||
setOptions({ |
|
||||||
tooltip: { |
|
||||||
formatter: `{b} <br/>{a} : ${props.memoryHuman}`, |
|
||||||
}, |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
name: '峰值', |
|
||||||
type: 'gauge', |
|
||||||
min: 0, |
|
||||||
max: 100, |
|
||||||
detail: { |
|
||||||
formatter: props.memoryHuman, |
|
||||||
}, |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
value: Number.parseFloat(props.memoryHuman), |
|
||||||
name: '内存消耗', |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], |
|
||||||
}) |
|
||||||
}, |
|
||||||
{ immediate: true }, |
|
||||||
) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<Card title="内存信息" :loading="loading"> |
|
||||||
<div ref="chartRef" :style="{ width, height }" /> |
|
||||||
</Card> |
|
||||||
</template> |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, ref } from 'vue' |
|
||||||
import { baseInfoSchema } from './redis.data' |
|
||||||
import { Description } from '@/components/Description' |
|
||||||
import { getCache } from '@/api/infra/redis' |
|
||||||
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraRedis' }) |
|
||||||
const CommandStats = createAsyncComponent(() => import('./components/CommandStats.vue')) |
|
||||||
const Memory = createAsyncComponent(() => import('./components/Memory.vue')) |
|
||||||
|
|
||||||
const loading = ref(true) |
|
||||||
const cacheInfo = ref<any>() |
|
||||||
const commandStats = ref<any[]>([]) |
|
||||||
const memoryHuman = ref<any>() |
|
||||||
|
|
||||||
async function getList() { |
|
||||||
const res = await getCache() |
|
||||||
cacheInfo.value = res.info |
|
||||||
memoryHuman.value = res.info.used_memory_human |
|
||||||
await res.commandStats.forEach((val) => { |
|
||||||
commandStats.value.push({ name: val.command, value: val.calls }) |
|
||||||
}) |
|
||||||
loading.value = false |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(async () => { |
|
||||||
await getList() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="p-4"> |
|
||||||
<Description |
|
||||||
title="基础信息" |
|
||||||
:collapse-options="{ canExpand: true, helpMessage: 'Redis 基本信息' }" |
|
||||||
:column="6" |
|
||||||
:data="cacheInfo" |
|
||||||
:schema="baseInfoSchema" |
|
||||||
/> |
|
||||||
<div class="enter-y mt-4 md:flex"> |
|
||||||
<CommandStats class="w-full md:w-1/2" :loading="loading" :command-stats="commandStats" /> |
|
||||||
<Memory class="w-full !my-4 md:w-1/2 !md:mx-4 !md:my-0" :loading="loading" :memory-human="memoryHuman" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,64 +0,0 @@ |
|||||||
import type { DescItem } from '@/components/Description' |
|
||||||
|
|
||||||
export const baseInfoSchema: DescItem[] = [ |
|
||||||
{ |
|
||||||
label: 'Redis版本', |
|
||||||
field: 'redis_version', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '运行模式', |
|
||||||
field: 'redis_mode', |
|
||||||
render: (val) => { |
|
||||||
return val === 'standalone' ? '单机' : '集群' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '端口', |
|
||||||
field: 'tcp_port', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '客户端数', |
|
||||||
field: 'connected_clients', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '运行时间(天)', |
|
||||||
field: 'uptime_in_days', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '使用内存', |
|
||||||
field: 'used_memory_human', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '使用CPU', |
|
||||||
field: 'tcp_port', |
|
||||||
render: (val) => { |
|
||||||
return Number.parseFloat(val).toFixed(2) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '内存配置', |
|
||||||
field: 'maxmemory_human', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'AOF是否开启', |
|
||||||
field: 'maxmemory_human', |
|
||||||
render: (val) => { |
|
||||||
return val === '0' ? '否' : '是' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'RDB是否成功', |
|
||||||
field: 'rdb_last_bgsave_status', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Key数量', |
|
||||||
field: 'expired_keys', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '网络入口/出口', |
|
||||||
field: 'instantaneous_input_kbps', |
|
||||||
render: (_val, data) => { |
|
||||||
return `${data.instantaneous_input_kbps}kps / ${data.instantaneous_output_kbps}kps` |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
@ -1,29 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, ref } from 'vue' |
|
||||||
import { IFrame } from '@/components/IFrame' |
|
||||||
import { getConfigKey } from '@/api/infra/config' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraAdminServer' }) |
|
||||||
|
|
||||||
const src = ref(`${import.meta.env.VITE_GLOB_BASE_URL}/admin/applications`) |
|
||||||
|
|
||||||
const loading = ref(true) |
|
||||||
|
|
||||||
async function getInfo() { |
|
||||||
const res = await getConfigKey('url.spring-boot-admin') |
|
||||||
if (res && res.length !== 0) |
|
||||||
src.value = res |
|
||||||
|
|
||||||
loading.value = false |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
getInfo() |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<IFrame v-if="!loading" :src="src" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { IFrame } from '@/components/IFrame' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraSkywalking' }) |
|
||||||
|
|
||||||
const src = ref('http://skywalking.shop.iocoder.cn') |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<IFrame :src="src" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { IFrame } from '@/components/IFrame' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraSwagger' }) |
|
||||||
|
|
||||||
// knife4j |
|
||||||
// const src = ref(import.meta.env.VITE_GLOB_BASE_URL + '/doc.html') |
|
||||||
const src = ref(`${import.meta.env.VITE_GLOB_BASE_URL}/swagger-ui`) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<IFrame :src="src" /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中 testDemo</div> |
|
||||||
</template> |
|
||||||
@ -1,112 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { computed, reactive, ref, watchEffect } from 'vue' |
|
||||||
import { Input, Tag } from 'ant-design-vue' |
|
||||||
import { useWebSocket } from '@vueuse/core' |
|
||||||
import { PageWrapper } from '@/components/Page' |
|
||||||
import { formatToDateTime } from '@/utils/dateUtil' |
|
||||||
import { useUserStore } from '@/store/modules/user' |
|
||||||
|
|
||||||
defineOptions({ name: 'InfraWebSocket' }) |
|
||||||
|
|
||||||
const InputTextArea = Input.TextArea |
|
||||||
|
|
||||||
const userStore = useUserStore() |
|
||||||
|
|
||||||
const state = reactive({ |
|
||||||
sendValue: '', |
|
||||||
recordList: [] as { id: number, time: number, res: string }[], |
|
||||||
}) |
|
||||||
const server = ref( |
|
||||||
`${(`${import.meta.env.VITE_GLOB_BASE_URL}/websocket/message`).replace('http', 'ws')}?userId=${userStore.getUserInfo.user.id}`, |
|
||||||
) |
|
||||||
const { status, data, send, close, open } = useWebSocket(server.value, { |
|
||||||
autoReconnect: false, |
|
||||||
heartbeat: true, |
|
||||||
}) |
|
||||||
watchEffect(() => { |
|
||||||
if (data.value) { |
|
||||||
try { |
|
||||||
const res = JSON.parse(data.value) |
|
||||||
state.recordList.push(res) |
|
||||||
} |
|
||||||
catch (error) { |
|
||||||
state.recordList.push({ |
|
||||||
res: data.value, |
|
||||||
id: Math.ceil(Math.random() * 1000), |
|
||||||
time: new Date().getTime(), |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
const getIsOpen = computed(() => status.value === 'OPEN') |
|
||||||
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) |
|
||||||
const getList = computed(() => { |
|
||||||
return [...state.recordList].reverse() |
|
||||||
}) |
|
||||||
function handlerSend() { |
|
||||||
send(state.sendValue) |
|
||||||
state.sendValue = '' |
|
||||||
} |
|
||||||
function toggle() { |
|
||||||
if (getIsOpen.value) |
|
||||||
close() |
|
||||||
else |
|
||||||
open() |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<PageWrapper title="WebSocket 示例"> |
|
||||||
<div class="flex"> |
|
||||||
<div class="w-1/3 p-4"> |
|
||||||
<div class="flex items-center"> |
|
||||||
<span class="mr-4 text-lg font-medium"> 连接状态: </span> |
|
||||||
<Tag :color="getTagColor"> |
|
||||||
{{ status }} |
|
||||||
</Tag> |
|
||||||
</div> |
|
||||||
<hr class="my-4"> |
|
||||||
|
|
||||||
<div class="flex"> |
|
||||||
<Input v-model:value="server" disabled> |
|
||||||
<template #addonBefore> |
|
||||||
服务地址 |
|
||||||
</template> |
|
||||||
</Input> |
|
||||||
<a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle"> |
|
||||||
{{ getIsOpen ? '关闭连接' : '开启连接' }} |
|
||||||
</a-button> |
|
||||||
</div> |
|
||||||
<p class="mt-4 text-lg font-medium"> |
|
||||||
设置 |
|
||||||
</p> |
|
||||||
<hr class="my-4"> |
|
||||||
|
|
||||||
<InputTextArea v-model:value="state.sendValue" placeholder="需要发送到服务器的内容" :disabled="!getIsOpen" allow-clear /> |
|
||||||
|
|
||||||
<a-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handlerSend"> |
|
||||||
发送 |
|
||||||
</a-button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="ml-4 w-2/3 p-4"> |
|
||||||
<span class="mr-4 text-lg font-medium"> 消息记录: </span> |
|
||||||
<hr class="my-4"> |
|
||||||
|
|
||||||
<div class="max-h-80 overflow-auto"> |
|
||||||
<ul> |
|
||||||
<li v-for="item in getList" :key="item.time" class="mt-2"> |
|
||||||
<div class="flex items-center"> |
|
||||||
<span class="mr-2 font-medium text-primary">收到消息:</span> |
|
||||||
<span>{{ formatToDateTime(item.time) }}</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
{{ item.res }} |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</PageWrapper> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>开发中</div> |
|
||||||
</template> |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in new issue