hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-07-17 20:35:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

初始化项目，自 v1.7.1 版本开始

Browse Source
This commit is contained in:
YunaiV
2023-02-11 00:44:00 +08:00
parent 11161afc1a
commit 56f3017baa
548 changed files with 52096 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/Error/403.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<Error type="403" @error-click="push('/')" />
</template>
<script setup lang="ts">
const { push } = useRouter()
</script>

6
src/views/Error/404.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<Error @error-click="push('/')" />
</template>
<script setup lang="ts">
const { push } = useRouter()
</script>

6
src/views/Error/500.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<Error type="500" @error-click="push('/')" />
</template>
<script setup lang="ts">
const { push } = useRouter()
</script>

379
src/views/Home/Index.vue Normal file
View File

@ -0,0 +1,379 @@
<template>
<div>
<el-card shadow="never">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex items-center">
<img :src="avatar" alt="" class="w-70px h-70px rounded-[50%] mr-20px" />
<div>
<div class="text-20px text-700">
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
</div>
<div class="mt-10px text-14px text-gray-500">
{{ t('workplace.toady') }}，20℃ - 32℃！
</div>
</div>
</div>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex h-70px items-center justify-end <sm:mt-10px">
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.project"
:duration="2600"
/>
</div>
<el-divider direction="vertical" />
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.toDo') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.todo"
:duration="2600"
/>
</div>
<el-divider direction="vertical" border-style="dashed" />
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.access') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.access"
:duration="2600"
/>
</div>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</div>
<el-row class="mt-5px" :gutter="20" justify="space-between">
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
<el-card shadow="never">
<template #header>
<div class="flex justify-between h-3">
<span>{{ t('workplace.project') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col
v-for="(item, index) in projects"
:key="`card-${index}`"
:xl="8"
:lg="8"
:md="8"
:sm="24"
:xs="24"
>
<el-card shadow="hover">
<div class="flex items-center">
<Icon :icon="item.icon" :size="25" class="mr-10px" />
<span class="text-16px">{{ item.name }}</span>
</div>
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
<div class="mt-20px text-12px text-gray-400 flex justify-between">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
</div>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<el-card shadow="never" class="mt-5px">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px">
<el-skeleton :loading="loading" animated>
<Echart :options="pieOptionsData" :height="280" />
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px">
<el-skeleton :loading="loading" animated>
<Echart :options="barOptionsData" :height="280" />
</el-skeleton>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
<el-card shadow="never">
<template #header>
<div class="flex justify-between h-3">
<span>{{ t('workplace.shortcutOperation') }}</span>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-10px">
<div class="flex items-center">
<Icon :icon="item.icon" class="mr-10px" />
<el-link type="default" :underline="false" @click="setWatermark(item.name)">
{{ item.name }}
</el-link>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<el-card shadow="never" class="mt-10px">
<template #header>
<div class="flex justify-between h-3">
<span>{{ t('workplace.notice') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<div v-for="(item, index) in notice" :key="`dynamics-${index}`">
<div class="flex items-center">
<img :src="avatar" alt="" class="w-35px h-35px rounded-[50%] mr-20px" />
<div>
<div class="text-14px">
<Highlight :keys="item.keys.map((v) => t(v))">
{{ item.type }} : {{ item.title }}
</Highlight>
</div>
<div class="mt-15px text-12px text-gray-400">
{{ formatTime(item.date, 'yyyy-MM-dd') }}
</div>
</div>
</div>
<el-divider />
</div>
</el-skeleton>
</el-card>
</el-col>
</el-row>
</template>
<script setup lang="ts" name="Home">
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import avatarImg from '@/assets/imgs/avatar.gif'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data'
const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
project: 0,
access: 0,
todo: 0
})
const getCount = async () => {
const data = {
project: 40,
access: 2340,
todo: 10
}
totalSate = Object.assign(totalSate, data)
}
// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Vue',
icon: 'logos:vue',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Angular',
icon: 'logos:angular-icon',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'React',
icon: 'logos:react',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Webpack',
icon: 'logos:webpack',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
}
]
projects = Object.assign(projects, data)
}
// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
const data = [
{
title: '系统升级版本',
type: '通知',
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
},
{
title: '系统升级版本',
type: '通知',
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
}
]
notice = Object.assign(notice, data)
}
// 获取快捷入口
let shortcut = reactive<Shortcut[]>([])
const getShortcut = async () => {
const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
url: 'github.io'
},
{
name: 'Vue',
icon: 'logos:vue',
url: 'vuejs.org'
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
url: 'https://vitejs.dev/'
},
{
name: 'Angular',
icon: 'logos:angular-icon',
url: 'github.io'
},
{
name: 'React',
icon: 'logos:react',
url: 'github.io'
},
{
name: 'Webpack',
icon: 'logos:webpack',
url: 'github.io'
}
]
shortcut = Object.assign(shortcut, data)
}
// 用户来源
const getUserAccessSource = async () => {
const data = [
{ value: 335, name: 'analysis.directAccess' },
{ value: 310, name: 'analysis.mailMarketing' },
{ value: 234, name: 'analysis.allianceAdvertising' },
{ value: 135, name: 'analysis.videoAdvertising' },
{ value: 1548, name: 'analysis.searchEngines' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
pieOptionsData!.series![0].data = data.map((v) => {
return {
name: t(v.name),
value: v.value
}
})
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
const data = [
{ value: 13253, name: 'analysis.monday' },
{ value: 34235, name: 'analysis.tuesday' },
{ value: 26321, name: 'analysis.wednesday' },
{ value: 12340, name: 'analysis.thursday' },
{ value: 24643, name: 'analysis.friday' },
{ value: 1322, name: 'analysis.saturday' },
{ value: 1324, name: 'analysis.sunday' }
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const getAllApi = async () => {
await Promise.all([
getCount(),
getProject(),
getNotice(),
getShortcut(),
getUserAccessSource(),
getWeeklyUserActivity()
])
loading.value = false
}
getAllApi()
</script>

312
src/views/Home/Index2.vue Normal file
View File

@ -0,0 +1,312 @@
<template>
<el-row :gutter="20" justify="space-between" :class="prefixCls">
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated :rows="2">
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
>
<Icon icon="svg-icon:peoples" :size="40" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
t('analysis.newUser')
}}</div>
<CountTo
class="text-20px font-700 text-right"
:start-val="0"
:end-val="102400"
:duration="2600"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated :rows="2">
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
>
<Icon icon="svg-icon:message" :size="40" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
t('analysis.unreadInformation')
}}</div>
<CountTo
class="text-20px font-700 text-right"
:start-val="0"
:end-val="81212"
:duration="2600"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated :rows="2">
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
>
<Icon icon="svg-icon:money" :size="40" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
t('analysis.transactionAmount')
}}</div>
<CountTo
class="text-20px font-700 text-right"
:start-val="0"
:end-val="9280"
:duration="2600"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated :rows="2">
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
>
<Icon icon="svg-icon:shopping" :size="40" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
t('analysis.totalShopping')
}}</div>
<CountTo
class="text-20px font-700 text-right"
:start-val="0"
:end-val="13600"
:duration="2600"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" justify="space-between">
<el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated>
<Echart :options="pieOptionsData" :height="300" />
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated>
<Echart :options="barOptionsData" :height="300" />
</el-skeleton>
</el-card>
</el-col>
<el-col :span="24">
<el-card shadow="hover" class="mb-20px">
<el-skeleton :loading="loading" animated :rows="4">
<Echart :options="lineOptionsData" :height="350" />
</el-skeleton>
</el-card>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useDesign } from '@/hooks/web/useDesign'
import type { AnalysisTotalTypes } from './types'
import { pieOptions, barOptions, lineOptions } from './echarts-data'
const { t } = useI18n()
const loading = ref(true)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('panel')
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
let totalState = reactive<AnalysisTotalTypes>({
users: 0,
messages: 0,
moneys: 0,
shoppings: 0
})
const getCount = async () => {
const data = {
users: 102400,
messages: 81212,
moneys: 9280,
shoppings: 13600
}
totalState = Object.assign(totalState, data)
}
// 用户来源
const getUserAccessSource = async () => {
const data = [
{ value: 335, name: 'analysis.directAccess' },
{ value: 310, name: 'analysis.mailMarketing' },
{ value: 234, name: 'analysis.allianceAdvertising' },
{ value: 135, name: 'analysis.videoAdvertising' },
{ value: 1548, name: 'analysis.searchEngines' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
set(pieOptionsData, 'series.data', data)
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
const data = [
{ value: 13253, name: 'analysis.monday' },
{ value: 34235, name: 'analysis.tuesday' },
{ value: 26321, name: 'analysis.wednesday' },
{ value: 12340, name: 'analysis.thursday' },
{ value: 24643, name: 'analysis.friday' },
{ value: 1322, name: 'analysis.saturday' },
{ value: 1324, name: 'analysis.sunday' }
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
// 每月销售总额
const getMonthlySales = async () => {
const data = [
{ estimate: 100, actual: 120, name: 'analysis.january' },
{ estimate: 120, actual: 82, name: 'analysis.february' },
{ estimate: 161, actual: 91, name: 'analysis.march' },
{ estimate: 134, actual: 154, name: 'analysis.april' },
{ estimate: 105, actual: 162, name: 'analysis.may' },
{ estimate: 160, actual: 140, name: 'analysis.june' },
{ estimate: 165, actual: 145, name: 'analysis.july' },
{ estimate: 114, actual: 250, name: 'analysis.august' },
{ estimate: 163, actual: 134, name: 'analysis.september' },
{ estimate: 185, actual: 56, name: 'analysis.october' },
{ estimate: 118, actual: 99, name: 'analysis.november' },
{ estimate: 123, actual: 123, name: 'analysis.december' }
]
set(
lineOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(lineOptionsData, 'series', [
{
name: t('analysis.estimate'),
smooth: true,
type: 'line',
data: data.map((v) => v.estimate),
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: t('analysis.actual'),
smooth: true,
type: 'line',
itemStyle: {},
data: data.map((v) => v.actual),
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
])
}
const getAllApi = async () => {
await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
loading.value = false
}
getAllApi()
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;
.#{$prefix-cls} {
&__item {
&--peoples {
color: #40c9c6;
}
&--message {
color: #36a3f7;
}
&--money {
color: #f4516c;
}
&--shopping {
color: #34bfa3;
}
&:hover {
:deep(.#{$namespace}-icon) {
color: #fff !important;
}
.#{$prefix-cls}__item--icon {
transition: all 0.38s ease-out;
}
.#{$prefix-cls}__item--peoples {
background: #40c9c6;
}
.#{$prefix-cls}__item--message {
background: #36a3f7;
}
.#{$prefix-cls}__item--money {
background: #f4516c;
}
.#{$prefix-cls}__item--shopping {
background: #34bfa3;
}
}
}
}
</style>

308
src/views/Home/echarts-data.ts Normal file
View File

@ -0,0 +1,308 @@
import { EChartsOption } from 'echarts'
const { t } = useI18n()
export const lineOptions: EChartsOption = {
title: {
text: t('analysis.monthlySales'),
left: 'center'
},
xAxis: {
data: [
t('analysis.january'),
t('analysis.february'),
t('analysis.march'),
t('analysis.april'),
t('analysis.may'),
t('analysis.june'),
t('analysis.july'),
t('analysis.august'),
t('analysis.september'),
t('analysis.october'),
t('analysis.november'),
t('analysis.december')
],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: [t('analysis.estimate'), t('analysis.actual')],
top: 50
},
series: [
{
name: t('analysis.estimate'),
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: t('analysis.actual'),
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
]
}
export const pieOptions: EChartsOption = {
title: {
text: t('analysis.userAccessSource'),
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: [
t('analysis.directAccess'),
t('analysis.mailMarketing'),
t('analysis.allianceAdvertising'),
t('analysis.videoAdvertising'),
t('analysis.searchEngines')
]
},
series: [
{
name: t('analysis.userAccessSource'),
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: t('analysis.directAccess') },
{ value: 310, name: t('analysis.mailMarketing') },
{ value: 234, name: t('analysis.allianceAdvertising') },
{ value: 135, name: t('analysis.videoAdvertising') },
{ value: 1548, name: t('analysis.searchEngines') }
]
}
]
}
export const barOptions: EChartsOption = {
title: {
text: t('analysis.weeklyUserActivity'),
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 50,
right: 20,
bottom: 20
},
xAxis: {
type: 'category',
data: [
t('analysis.monday'),
t('analysis.tuesday'),
t('analysis.wednesday'),
t('analysis.thursday'),
t('analysis.friday'),
t('analysis.saturday'),
t('analysis.sunday')
],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
name: t('analysis.activeQuantity'),
data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
type: 'bar'
}
]
}
export const radarOption: EChartsOption = {
legend: {
data: [t('workplace.personal'), t('workplace.team')]
},
radar: {
// shape: 'circle',
indicator: [
{ name: t('workplace.quote'), max: 65 },
{ name: t('workplace.contribution'), max: 160 },
{ name: t('workplace.hot'), max: 300 },
{ name: t('workplace.yield'), max: 130 },
{ name: t('workplace.follow'), max: 100 }
]
},
series: [
{
name: `xxx${t('workplace.index')}`,
type: 'radar',
data: [
{
value: [42, 30, 20, 35, 80],
name: t('workplace.personal')
},
{
value: [50, 140, 290, 100, 90],
name: t('workplace.team')
}
]
}
]
}
export const wordOptions = {
series: [
{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
color: function () {
return (
'rgb(' +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') +
')'
)
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
{
name: 'Sam S Club',
value: 10000,
textStyle: {
color: 'black'
},
emphasis: {
textStyle: {
color: 'red'
}
}
},
{
name: 'Macys',
value: 6181
},
{
name: 'Amy Schumer',
value: 4386
},
{
name: 'Jurassic World',
value: 4055
},
{
name: 'Charter Communications',
value: 2467
},
{
name: 'Chick Fil A',
value: 2244
},
{
name: 'Planet Fitness',
value: 1898
},
{
name: 'Pitch Perfect',
value: 1484
},
{
name: 'Express',
value: 1112
},
{
name: 'Home',
value: 965
},
{
name: 'Johnny Depp',
value: 847
},
{
name: 'Lena Dunham',
value: 582
},
{
name: 'Lewis Hamilton',
value: 555
},
{
name: 'KXAN',
value: 550
},
{
name: 'Mary Ellen Mark',
value: 462
},
{
name: 'Farrah Abraham',
value: 366
},
{
name: 'Rita Ora',
value: 360
},
{
name: 'Serena Williams',
value: 282
},
{
name: 'NCAA baseball tournament',
value: 273
},
{
name: 'Point Break',
value: 265
}
]
}
]
}

55
src/views/Home/types.ts Normal file
View File

@ -0,0 +1,55 @@
export type WorkplaceTotal = {
project: number
access: number
todo: number
}
export type Project = {
name: string
icon: string
message: string
personal: string
time: Date | number | string
}
export type Notice = {
title: string
type: string
keys: string[]
date: Date | number | string
}
export type Shortcut = {
name: string
icon: string
url: string
}
export type RadarData = {
personal: number
team: number
max: number
name: string
}
export type AnalysisTotalTypes = {
users: number
messages: number
moneys: number
shoppings: number
}
export type UserAccessSource = {
value: number
name: string
}
export type WeeklyUserActivity = {
value: number
name: string
}
export type MonthlySales = {
name: string
estimate: number
actual: number
}

95
src/views/Login/Login.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div
:class="prefixCls"
class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
>
<div class="relative h-full flex mx-auto">
<div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden`"
>
<!-- 左上角的 logo + 系统标题 -->
<div class="flex items-center relative text-white">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<div class="flex justify-center items-center h-[calc(100%-60px)]">
<TransitionGroup
appear
tag="div"
enter-active-class="animate__animated animate__bounceInLeft"
>
<img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" />
<div class="text-3xl text-white" key="2">{{ t('login.welcome') }}</div>
<div class="mt-5 font-normal text-white text-14px" key="3">
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div>
<div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
<!-- 右上角的主题、语言选择 -->
<div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
<div class="flex items-center @2xl:hidden @xl:hidden">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<div class="flex justify-end items-center space-x-10px">
<ThemeSwitch />
<LocaleDropdown class="<xl:text-white dark:text-white" />
</div>
</div>
<!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div
class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
>
<!-- 账号登录 -->
<LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 手机登录 -->
<MobileForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 二维码登录 -->
<QrCodeForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 注册 -->
<RegisterForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
</div>
</Transition>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;
.#{$prefix-cls} {
&__left {
&::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url('@/assets/svgs/login-bg.svg');
background-position: center;
background-repeat: no-repeat;
content: '';
}
}
}
</style>

307
src/views/Login/components/LoginForm.vue Normal file
View File

@ -0,0 +1,307 @@
<template>
<el-form
:model="loginData.loginForm"
:rules="LoginRules"
label-position="top"
class="login-form"
label-width="120px"
size="large"
v-show="getShow"
ref="formLogin"
>
<el-row style="maring-left: -10px; maring-right: -10px">
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<LoginFormTitle style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item prop="tenantName" v-if="loginData.tenantEnable === 'true'">
<el-input
type="text"
v-model="loginData.loginForm.tenantName"
:placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse"
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item prop="username">
<el-input
v-model="loginData.loginForm.username"
:placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar"
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item prop="password">
<el-input
v-model="loginData.loginForm.password"
type="password"
:placeholder="t('login.passwordPlaceholder')"
show-password
@keyup.enter="getCode()"
:prefix-icon="iconLock"
/>
</el-form-item>
</el-col>
<el-col
:span="24"
style="padding-left: 10px; padding-right: 10px; margin-top: -20px; margin-bottom: -20px"
>
<el-form-item>
<el-row justify="space-between" style="width: 100%">
<el-col :span="6">
<el-checkbox v-model="loginData.loginForm.rememberMe">
{{ t('login.remember') }}
</el-checkbox>
</el-col>
<el-col :span="12" :offset="6">
<el-link type="primary" style="float: right">{{ t('login.forgetPassword') }}</el-link>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<XButton
:loading="loginLoading"
type="primary"
class="w-[100%]"
:title="t('login.login')"
@click="getCode()"
/>
</el-form-item>
</el-col>
<Verify
ref="verify"
mode="pop"
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
@success="handleLogin"
/>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<el-row justify="space-between" style="width: 100%" :gutter="5">
<el-col :span="8">
<XButton
class="w-[100%]"
:title="t('login.btnMobile')"
@click="setLoginState(LoginStateEnum.MOBILE)"
/>
</el-col>
<el-col :span="8">
<XButton
class="w-[100%]"
:title="t('login.btnQRCode')"
@click="setLoginState(LoginStateEnum.QR_CODE)"
/>
</el-col>
<el-col :span="8">
<XButton
class="w-[100%]"
:title="t('login.btnRegister')"
@click="setLoginState(LoginStateEnum.REGISTER)"
/>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<div class="flex justify-between w-[100%]">
<Icon
v-for="(item, key) in socialList"
:key="key"
:icon="item.icon"
:size="30"
class="cursor-pointer anticon"
color="#999"
@click="doSocialLogin(item.type)"
/>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script setup lang="ts">
import { ElLoading } from 'element-plus'
import LoginFormTitle from './LoginFormTitle.vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useLoginState, useFormValid } from './useLogin'
const { t } = useI18n()
const message = useMessage()
const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
const formLogin = ref()
const { validForm } = useFormValid(formLogin)
const { setLoginState, getLoginState } = useLoginState()
const { currentRoute, push } = useRouter()
const permissionStore = usePermissionStore()
const redirect = ref<string>('')
const loginLoading = ref(false)
const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
const LoginRules = {
tenantName: [required],
username: [required],
password: [required]
}
const loginData = reactive({
isShowPassword: false,
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
loginForm: {
tenantName: '芋道源码',
username: 'admin',
password: 'admin123',
captchaVerification: '',
rememberMe: false
}
})
const socialList = [
{ icon: 'ant-design:github-filled', type: 0 },
{ icon: 'ant-design:wechat-filled', type: 30 },
{ icon: 'ant-design:alipay-circle-filled', type: 0 },
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 }
]
// 获取验证码
const getCode = async () => {
// 情况一，未开启：则直接登录
if (loginData.captchaEnable === 'false') {
await handleLogin({})
} else {
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
verify.value.show()
}
}
//获取租户ID
const getTenantId = async () => {
if (loginData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByNameApi(loginData.loginForm.tenantName)
authUtil.setTenantId(res)
}
}
// 记住我
const getCookie = () => {
const loginForm = authUtil.getLoginForm()
if (loginForm) {
loginData.loginForm = {
...loginData.loginForm,
username: loginForm.username ? loginForm.username : loginData.loginForm.username,
password: loginForm.password ? loginForm.password : loginData.loginForm.password,
rememberMe: loginForm.rememberMe ? true : false,
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
}
}
}
// 登录
const handleLogin = async (params) => {
loginLoading.value = true
try {
await getTenantId()
const data = await validForm()
if (!data) {
return
}
loginData.loginForm.captchaVerification = params.captchaVerification
const res = await LoginApi.loginApi(loginData.loginForm)
if (!res) {
return
}
ElLoading.service({
lock: true,
text: '正在加载系统中...',
background: 'rgba(0, 0, 0, 0.7)'
})
if (loginData.loginForm.rememberMe) {
authUtil.setLoginForm(loginData.loginForm)
} else {
authUtil.removeLoginForm()
}
authUtil.setToken(res)
if (!redirect.value) {
redirect.value = '/'
}
push({ path: redirect.value || permissionStore.addRouters[0].path })
} catch {
loginLoading.value = false
} finally {
setTimeout(() => {
const loadingInstance = ElLoading.service()
loadingInstance.close()
}, 400)
}
}
// 社交登录
const doSocialLogin = async (type: number) => {
if (type === 0) {
message.error('此方式未配置')
} else {
loginLoading.value = true
if (loginData.tenantEnable === 'true') {
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
const res = await LoginApi.getTenantIdByNameApi(value)
authUtil.setTenantId(res)
})
}
// 计算 redirectUri
const redirectUri =
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
// 进行跳转
const res = await LoginApi.socialAuthRedirectApi(type, encodeURIComponent(redirectUri))
window.location.href = res
}
}
watch(
() => currentRoute.value,
(route: RouteLocationNormalizedLoaded) => {
redirect.value = route?.query?.redirect as string
},
{
immediate: true
}
)
onMounted(() => {
getCookie()
})
</script>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
.login-code {
width: 100%;
height: 38px;
float: right;
img {
cursor: pointer;
width: 100%;
max-width: 100px;
height: auto;
vertical-align: middle;
}
}
</style>

23
src/views/Login/components/LoginFormTitle.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-center">
{{ getFormTitle }}
</h2>
</template>
<script setup lang="ts">
import { LoginStateEnum, useLoginState } from './useLogin'
const { t } = useI18n()
const { getLoginState } = useLoginState()
const getFormTitle = computed(() => {
const titleObj = {
[LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
[LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
[LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
[LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
[LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle')
}
return titleObj[unref(getLoginState)]
})
</script>

213
src/views/Login/components/MobileForm.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<el-form
:model="loginData.loginForm"
:rules="rules"
label-position="top"
class="login-form"
label-width="120px"
size="large"
v-show="getShow"
ref="formSmsLogin"
>
<el-row style="margin-left: -10px; margin-right: -10px">
<!-- 租户名 -->
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<LoginFormTitle style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item prop="tenantName" v-if="loginData.tenantEnable === 'true'">
<el-input
type="text"
v-model="loginData.loginForm.tenantName"
:placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse"
/>
</el-form-item>
</el-col>
<!-- 手机号 -->
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item prop="mobileNumber">
<el-input
v-model="loginData.loginForm.mobileNumber"
:placeholder="t('login.mobileNumberPlaceholder')"
:prefix-icon="iconCellphone"
/>
</el-form-item>
</el-col>
<!-- 验证码 -->
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item prop="code">
<el-row justify="space-between" style="width: 100%" :gutter="5">
<el-col :span="24">
<el-input
v-model="loginData.loginForm.code"
:placeholder="t('login.codePlaceholder')"
:prefix-icon="iconCircleCheck"
>
<!-- <el-button class="w-[100%]"> -->
<template #append>
<span
v-if="mobileCodeTimer <= 0"
@click="getSmsCode"
class="getMobileCode"
style="cursor: pointer"
>
{{ t('login.getSmsCode') }}
</span>
<span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
{{ mobileCodeTimer }}秒后可重新获取
</span>
</template>
</el-input>
<!-- </el-button> -->
</el-col>
</el-row>
</el-form-item>
</el-col>
<!-- 登录按钮 / 返回按钮 -->
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<XButton
:loading="loginLoading"
type="primary"
class="w-[100%]"
:title="t('login.login')"
@click="signIn()"
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-form-item>
<XButton
:loading="loginLoading"
class="w-[100%]"
:title="t('login.backLogin')"
@click="handleBackLogin()"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script setup lang="ts">
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import { setTenantId, setToken } from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
import LoginFormTitle from './LoginFormTitle.vue'
import { useLoginState, LoginStateEnum, useFormValid } from './useLogin'
const { t } = useI18n()
const message = useMessage()
const permissionStore = usePermissionStore()
const { currentRoute, push } = useRouter()
const formSmsLogin = ref()
const loginLoading = ref(false)
const iconHouse = useIcon({ icon: 'ep:house' })
const iconCellphone = useIcon({ icon: 'ep:cellphone' })
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
const { validForm } = useFormValid(formSmsLogin)
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
const rules = {
tenantName: [required],
mobileNumber: [required],
code: [required]
}
const loginData = reactive({
codeImg: '',
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
token: '',
loading: {
signIn: false
},
loginForm: {
uuid: '',
tenantName: '芋道源码',
mobileNumber: '',
code: ''
}
})
const smsVO = reactive({
smsCode: {
mobile: '',
scene: 21
},
loginSms: {
mobile: '',
code: ''
}
})
const mobileCodeTimer = ref(0)
const redirect = ref<string>('')
const getSmsCode = async () => {
await getTenantId()
smsVO.smsCode.mobile = loginData.loginForm.mobileNumber
await sendSmsCodeApi(smsVO.smsCode).then(async () => {
message.success(t('login.SmsSendMsg'))
// 设置倒计时
mobileCodeTimer.value = 60
let msgTimer = setInterval(() => {
mobileCodeTimer.value = mobileCodeTimer.value - 1
if (mobileCodeTimer.value <= 0) {
clearInterval(msgTimer)
}
}, 1000)
})
}
watch(
() => currentRoute.value,
(route: RouteLocationNormalizedLoaded) => {
redirect.value = route?.query?.redirect as string
},
{
immediate: true
}
)
// 获取租户 ID
const getTenantId = async () => {
if (loginData.tenantEnable === 'true') {
const res = await getTenantIdByNameApi(loginData.loginForm.tenantName)
setTenantId(res)
}
}
// 登录
const signIn = async () => {
await getTenantId()
const data = await validForm()
if (!data) return
loginLoading.value = true
smsVO.loginSms.mobile = loginData.loginForm.mobileNumber
smsVO.loginSms.code = loginData.loginForm.code
await smsLoginApi(smsVO.loginSms)
.then(async (res) => {
setToken(res?.token)
if (!redirect.value) {
redirect.value = '/'
}
push({ path: redirect.value || permissionStore.addRouters[0].path })
})
.catch(() => {})
.finally(() => {
loginLoading.value = false
})
}
</script>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
.smsbtn {
margin-top: 33px;
}
</style>

28
src/views/Login/components/QrCodeForm.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<el-row v-show="getShow" style="maring-left: -10px; maring-right: -10px">
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<LoginFormTitle style="width: 100%" />
</el-col>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<el-card shadow="hover" class="mb-10px text-center">
<Qrcode :logo="logoImg" />
</el-card>
</el-col>
<el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
<el-col :span="24" style="padding-left: 10px; padding-right: 10px">
<div class="w-[100%] mt-15px">
<XButton class="w-[100%]" :title="t('login.backLogin')" @click="handleBackLogin()" />
</div>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import logoImg from '@/assets/imgs/logo.png'
import LoginFormTitle from './LoginFormTitle.vue'
import { useLoginState, LoginStateEnum } from './useLogin'
const { t } = useI18n()
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
</script>

140
src/views/Login/components/RegisterForm.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<Form
:schema="schema"
:rules="rules"
label-position="top"
hide-required-asterisk
size="large"
v-show="getShow"
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
@register="register"
>
<template #title>
<LoginFormTitle style="width: 100%" />
</template>
<template #code="form">
<div class="w-[100%] flex">
<el-input v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
</div>
</template>
<template #register>
<div class="w-[100%]">
<XButton
:loading="loading"
type="primary"
class="w-[100%]"
:title="t('login.register')"
@click="loginRegister()"
/>
</div>
<div class="w-[100%] mt-15px">
<XButton class="w-[100%]" :title="t('login.hasUser')" @click="handleBackLogin()" />
</div>
</template>
</Form>
</template>
<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { useForm } from '@/hooks/web/useForm'
import { useValidator } from '@/hooks/web/useValidator'
import LoginFormTitle from './LoginFormTitle.vue'
import { useLoginState, LoginStateEnum } from './useLogin'
import { FormSchema } from '@/types/form'
const { t } = useI18n()
const { required } = useValidator()
const { register, elFormRef } = useForm()
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
const schema = reactive<FormSchema[]>([
{
field: 'title',
colProps: {
span: 24
}
},
{
field: 'username',
label: t('login.username'),
value: '',
component: 'Input',
colProps: {
span: 24
},
componentProps: {
placeholder: t('login.usernamePlaceholder')
}
},
{
field: 'password',
label: t('login.password'),
value: '',
component: 'InputPassword',
colProps: {
span: 24
},
componentProps: {
style: {
width: '100%'
},
strength: true,
placeholder: t('login.passwordPlaceholder')
}
},
{
field: 'check_password',
label: t('login.checkPassword'),
value: '',
component: 'InputPassword',
colProps: {
span: 24
},
componentProps: {
style: {
width: '100%'
},
strength: true,
placeholder: t('login.passwordPlaceholder')
}
},
{
field: 'code',
label: t('login.code'),
colProps: {
span: 24
}
},
{
field: 'register',
colProps: {
span: 24
}
}
])
const rules: FormRules = {
username: [required()],
password: [required()],
check_password: [required()],
code: [required()]
}
const loading = ref(false)
const loginRegister = async () => {
const formRef = unref(elFormRef)
formRef?.validate(async (valid) => {
if (valid) {
try {
loading.value = true
} finally {
loading.value = false
}
}
})
}
</script>

7
src/views/Login/components/index.ts Normal file
View File

@ -0,0 +1,7 @@
import LoginForm from './LoginForm.vue'
import MobileForm from './MobileForm.vue'
import LoginFormTitle from './LoginFormTitle.vue'
import RegisterForm from './RegisterForm.vue'
import QrCodeForm from './QrCodeForm.vue'
export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm }

41
src/views/Login/components/useLogin.ts Normal file
View File

@ -0,0 +1,41 @@
import { Ref } from 'vue'
export enum LoginStateEnum {
LOGIN,
REGISTER,
RESET_PASSWORD,
MOBILE,
QR_CODE
}
const currentState = ref(LoginStateEnum.LOGIN)
export function useLoginState() {
function setLoginState(state: LoginStateEnum) {
currentState.value = state
}
const getLoginState = computed(() => currentState.value)
function handleBackLogin() {
setLoginState(LoginStateEnum.LOGIN)
}
return {
setLoginState,
getLoginState,
handleBackLogin
}
}
export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
async function validForm() {
const form = unref(formRef)
if (!form) return
const data = await form.validate()
return data as T
}
return {
validForm
}
}

60
src/views/Profile/Index.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="flex">
<el-card class="w-1/3 user" shadow="hover">
<template #header>
<div class="card-header">
<span>{{ t('profile.user.title') }}</span>
</div>
</template>
<ProfileUser />
</el-card>
<el-card class="w-2/3 user ml-3" shadow="hover">
<template #header>
<div class="card-header">
<span>{{ t('profile.info.title') }}</span>
</div>
</template>
<div>
<el-tabs v-model="activeName" tab-position="top" style="height: 400px" class="profile-tabs">
<el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo">
<BasicInfo />
</el-tab-pane>
<el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd">
<ResetPwd />
</el-tab-pane>
<el-tab-pane :label="t('profile.info.userSocial')" name="userSocial">
<UserSocial />
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<script setup lang="ts" name="Profile">
import { BasicInfo, ProfileUser, ResetPwd, UserSocial } from './components/'
const { t } = useI18n()
const activeName = ref('basicInfo')
</script>
<style scoped>
.user {
max-height: 960px;
padding: 15px 20px 20px 20px;
}
.card-header {
display: flex;
justify-content: center;
align-items: center;
}
:deep(.el-card .el-card__header, .el-card .el-card__body) {
padding: 15px !important;
}
.profile-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-weight: 600;
}
.el-tabs--left .el-tabs__content {
height: 100%;
}
</style>

89
src/views/Profile/components/BasicInfo.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<Form ref="formRef" :rules="rules" :schema="schema" :labelWidth="80">
<template #sex="form">
<el-radio-group v-model="form['sex']">
<el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
<el-radio :label="2">{{ t('profile.user.woman') }}</el-radio>
</el-radio-group>
</template>
</Form>
<XButton :title="t('common.save')" @click="submit()" />
<XButton type="danger" :title="t('common.reset')" @click="init()" />
</template>
<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { FormSchema } from '@/types/form'
import type { FormExpose } from '@/components/Form'
import {
getUserProfileApi,
updateUserProfileApi,
UserProfileUpdateReqVO
} from '@/api/system/user/profile'
const { t } = useI18n()
// 表单校验
const rules = reactive<FormRules>({
nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
email: [
{ required: true, message: t('profile.rules.mail'), trigger: 'blur' },
{
type: 'email',
message: t('profile.rules.truemail'),
trigger: ['blur', 'change']
}
],
mobile: [
{ required: true, message: t('profile.rules.phone'), trigger: 'blur' },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: t('profile.rules.truephone'),
trigger: 'blur'
}
]
})
const schema = reactive<FormSchema[]>([
{
field: 'nickname',
label: t('profile.user.nickname'),
component: 'Input'
},
{
field: 'mobile',
label: t('profile.user.mobile'),
component: 'Input'
},
{
field: 'email',
label: t('profile.user.email'),
component: 'Input'
},
{
field: 'sex',
label: t('profile.user.sex'),
component: 'InputNumber',
value: 0
}
])
const formRef = ref<FormExpose>() // 表单 Ref
const submit = () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
await updateUserProfileApi(data)
ElMessage.success(t('common.updateSuccess'))
await init()
}
})
}
const init = async () => {
const res = await getUserProfileApi()
unref(formRef)?.setValues(res)
}
onMounted(async () => {
await init()
})
</script>

88
src/views/Profile/components/ProfileUser.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div>
<div class="text-center">
<UserAvatar :img="userInfo?.avatar" />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<Icon icon="ep:user" class="mr-5px" />{{ t('profile.user.username') }}
<div class="pull-right">{{ userInfo?.username }}</div>
</li>
<li class="list-group-item">
<Icon icon="ep:phone" class="mr-5px" />{{ t('profile.user.mobile') }}
<div class="pull-right">{{ userInfo?.mobile }}</div>
</li>
<li class="list-group-item">
<Icon icon="fontisto:email" class="mr-5px" />{{ t('profile.user.email') }}
<div class="pull-right">{{ userInfo?.email }}</div>
</li>
<li class="list-group-item">
<Icon icon="carbon:tree-view-alt" class="mr-5px" />{{ t('profile.user.dept') }}
<div class="pull-right" v-if="userInfo?.dept">{{ userInfo?.dept.name }}</div>
</li>
<li class="list-group-item">
<Icon icon="ep:suitcase" class="mr-5px" />{{ t('profile.user.posts') }}
<div class="pull-right" v-if="userInfo?.posts">
{{ userInfo?.posts.map((post) => post.name).join(',') }}
</div>
</li>
<li class="list-group-item">
<Icon icon="icon-park-outline:peoples" class="mr-5px" />{{ t('profile.user.roles') }}
<div class="pull-right" v-if="userInfo?.roles">
{{ userInfo?.roles.map((role) => role.name).join(',') }}
</div>
</li>
<li class="list-group-item">
<Icon icon="ep:calendar" class="mr-5px" />{{ t('profile.user.createTime') }}
<div class="pull-right">{{ dayjs(userInfo?.createTime).format('YYYY-MM-DD') }}</div>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import UserAvatar from './UserAvatar.vue'
import { getUserProfileApi, ProfileVO } from '@/api/system/user/profile'
const { t } = useI18n()
const userInfo = ref<ProfileVO>()
const getUserInfo = async () => {
const users = await getUserProfileApi()
userInfo.value = users
}
onMounted(async () => {
await getUserInfo()
})
</script>
<style scoped>
.text-center {
text-align: center;
position: relative;
height: 120px;
}
.list-group-striped > .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
}
</style>

68
src/views/Profile/components/ResetPwd.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<el-form ref="formRef" :model="password" :rules="rules" label-width="80px">
<el-form-item :label="t('profile.password.oldPassword')">
<InputPassword v-model="password.oldPassword" />
</el-form-item>
<el-form-item :label="t('profile.password.newPassword')">
<InputPassword v-model="password.newPassword" strength />
</el-form-item>
<el-form-item :label="t('profile.password.confirmPassword')">
<InputPassword v-model="password.confirmPassword" strength />
</el-form-item>
<el-form-item>
<XButton type="primary" @click="submit(formRef)" :title="t('common.save')" />
<XButton type="danger" :title="t('common.reset')" @click="reset(formRef)" />
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import type { FormRules, FormInstance } from 'element-plus'
import { InputPassword } from '@/components/InputPassword'
import { updateUserPwdApi } from '@/api/system/user/profile'
const { t } = useI18n()
const message = useMessage()
const formRef = ref<FormInstance>()
const password = reactive({
oldPassword: '',
newPassword: '',
confirmPassword: ''
})
// 表单校验
const equalToPassword = (value, callback) => {
if (password.newPassword !== value) {
callback(new Error(t('profile.password.diffPwd')))
} else {
callback()
}
}
const rules = reactive<FormRules>({
oldPassword: [
{ required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
{ min: 3, max: 5, message: t('profile.password.pwdRules'), trigger: 'blur' }
],
newPassword: [
{ required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
{ min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur' },
{ required: true, validator: equalToPassword, trigger: 'blur' }
]
})
const submit = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
if (valid) {
await updateUserPwdApi(password.oldPassword, password.newPassword)
message.success(t('common.updateSuccess'))
}
})
}
const reset = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>

38
src/views/Profile/components/UserAvatar.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="change-avatar">
<CropperAvatar
ref="cropperRef"
:value="avatar"
:showBtn="false"
@change="handelUpload"
:btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
width="120px"
/>
</div>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import { uploadAvatarApi } from '@/api/system/user/profile'
const props = defineProps({
img: propTypes.string.def('')
})
const avatar = computed(() => {
return props.img
})
const cropperRef = ref()
const handelUpload = async ({ data }) => {
await uploadAvatarApi({ avatarFile: data })
cropperRef.value.close()
}
</script>
<style scoped lang="scss">
.change-avatar {
img {
display: block;
margin-bottom: 15px;
border-radius: 50%;
}
}
</style>

67
src/views/Profile/components/UserSocial.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<el-table :data="socialUsers" :show-header="false">
<el-table-column type="seq" title="序号" width="60" fixed="left" />
<el-table-column label="社交平台" align="left" width="120">
<template #default="{ row }">
<img class="h-5 align-middle" :src="row.img" alt="" />
<p class="mr-5">{{ row.title }}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row }">
<template v-if="row.openid">
已绑定
<XTextButton type="primary" class="mr-5" @click="unbind(row)" title="(解绑)" />
</template>
<template v-else>
未绑定
<XTextButton type="primary" class="mr-5" @click="bind(row)" title="(绑定)" />
</template>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { SystemUserSocialTypeEnum } from '@/utils/constants'
import { getUserProfileApi, ProfileVO } from '@/api/system/user/profile'
import { socialAuthRedirect, socialUnbind } from '@/api/system/user/socialUser'
const message = useMessage()
const socialUsers = ref<any[]>([])
const userInfo = ref<ProfileVO>()
const initSocial = async () => {
const res = await getUserProfileApi()
userInfo.value = res
for (const i in SystemUserSocialTypeEnum) {
const socialUser = { ...SystemUserSocialTypeEnum[i] }
socialUsers.value.push(socialUser)
if (userInfo.value?.socialUsers) {
for (const j in userInfo.value.socialUsers) {
if (socialUser.type === userInfo.value.socialUsers[j].type) {
socialUser.openid = userInfo.value.socialUsers[j].openid
break
}
}
}
}
}
const bind = (row) => {
const redirectUri = location.origin + '/user/profile?type=' + row.type
// 进行跳转
socialAuthRedirect(row.type, encodeURIComponent(redirectUri)).then((res) => {
window.location.href = res.data
})
}
const unbind = async (row) => {
const res = await socialUnbind(row.type, row.openid)
if (res) {
row.openid = undefined
}
message.success('解绑成功')
}
onMounted(async () => {
await initSocial()
})
</script>

7
src/views/Profile/components/index.ts Normal file
View File

@ -0,0 +1,7 @@
import BasicInfo from './BasicInfo.vue'
import ProfileUser from './ProfileUser.vue'
import ResetPwd from './ResetPwd.vue'
import UserAvatarVue from './UserAvatar.vue'
import UserSocial from './UserSocial.vue'
export { BasicInfo, ProfileUser, ResetPwd, UserAvatarVue, UserSocial }

26
src/views/Redirect/Redirect.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div></div>
</template>
<script setup lang="ts" name="Redirect">
const { currentRoute, replace } = useRouter()
const { params, query } = unref(currentRoute)
const { path, _redirect_type = 'path' } = params
Reflect.deleteProperty(params, '_redirect_type')
Reflect.deleteProperty(params, 'path')
const _path = Array.isArray(path) ? path.join('/') : path
if (_redirect_type === 'name') {
replace({
name: _path,
query,
params
})
} else {
replace({
path: _path.startsWith('/') ? _path : '/' + _path,
query
})
}
</script>

73
src/views/bpm/definition/definition.data.ts Normal file
View File

@ -0,0 +1,73 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '定义编号',
field: 'id',
table: {
width: 360
}
},
{
title: '定义名称',
field: 'name',
table: {
width: 120,
slots: {
default: 'name_default'
}
}
},
{
title: '流程分类',
field: 'category',
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
dictClass: 'number'
},
{
title: '表单信息',
field: 'formId',
table: {
width: 120,
slots: {
default: 'formId_default'
}
}
},
{
title: '流程版本',
field: 'version',
table: {
width: 80,
slots: {
default: 'version_default'
}
}
},
{
title: '激活状态',
field: 'suspensionState',
table: {
width: 80,
slots: {
default: 'suspensionState_default'
}
}
},
{
title: '部署时间',
field: 'deploymentTime',
isForm: false,
formatter: 'formatDate',
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

104
src/views/bpm/definition/index.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 流程名称 -->
<template #name_default="{ row }">
<XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
</template>
<!-- 表单信息 -->
<template #formId_default="{ row }">
<XTextButton
v-if="row.formType === 10"
:title="row.formName"
@click="handleFormDetail(row)"
/>
<XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
</template>
<!-- 流程版本 -->
<template #version_default="{ row }">
<el-tag>v{{ row.version }}</el-tag>
</template>
<!-- 激活状态 -->
<template #suspensionState_default="{ row }">
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
</template>
<!-- 操作 -->
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:user"
title="分配规则"
v-hasPermi="['bpm:task-assign-rule:query']"
@click="handleAssignRule(row)"
/>
</template>
</XTable>
<!-- 表单详情的弹窗 -->
<XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
<form-create
:rule="formDetailPreview.rule"
:option="formDetailPreview.option"
v-if="formDetailVisible"
/>
</XModal>
</ContentWrap>
</template>
<script setup lang="ts">
// 业务相关的 import
import * as DefinitionApi from '@/api/bpm/definition'
// import * as ModelApi from '@/api/bpm/model'
import { allSchemas } from './definition.data'
import { setConfAndFields2 } from '@/utils/formCreate'
const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const { query } = useRoute() // 查询参数
// ========== 列表相关 ==========
const queryParams = reactive({
key: query.key
})
const [registerTable] = useXTable({
allSchemas: allSchemas,
getListApi: DefinitionApi.getProcessDefinitionPageApi,
params: queryParams
})
// 流程表单的详情按钮操作
const formDetailVisible = ref(false)
const formDetailPreview = ref({
rule: [],
option: {}
})
const handleFormDetail = async (row) => {
if (row.formType == 10) {
// 设置表单
setConfAndFields2(formDetailPreview, row.formConf, row.formFields)
// 弹窗打开
formDetailVisible.value = true
} else {
await router.push({
path: row.formCustomCreatePath
})
}
}
// 流程图的详情按钮操作
const handleBpmnDetail = (row) => {
// TODO 芋艿：流程组件开发中
console.log(row)
message.success('流程组件开发中，预计 2 月底完成')
}
// 点击任务分配按钮
const handleAssignRule = (row) => {
router.push({
name: 'BpmTaskAssignRuleList',
query: {
modelId: row.id
}
})
}
</script>

43
src/views/bpm/form/form.data.ts Normal file
View File

@ -0,0 +1,43 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '表单编号',
action: true,
columns: [
{
title: '表单名',
field: 'name',
isSearch: true
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number'
},
{
title: '备注',
field: 'remark'
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

115
src/views/bpm/form/formEditor.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<ContentWrap>
<!-- 表单设计器 -->
<fc-designer ref="designer" height="780px">
<template #handle>
<XButton type="primary" :title="t('action.save')" @click="handleSave" />
</template>
</fc-designer>
<!-- 表单保存的弹窗 -->
<XModal v-model="dialogVisible" title="保存表单">
<el-form ref="formRef" :model="formValues" :rules="formRules" label-width="80px">
<el-form-item label="表单名" prop="name">
<el-input v-model="formValues.name" placeholder="请输入表单名" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formValues.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formValues.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="primary"
:title="t('action.save')"
:loading="dialogLoading"
@click="submitForm"
/>
<!-- 按钮：关闭 -->
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</ContentWrap>
</template>
<script setup lang="ts" name="BpmFormEditor">
import { FormInstance } from 'element-plus'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as FormApi from '@/api/bpm/form'
import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息
const { query } = useRoute() // 路由
const designer = ref() // 表单设计器
const dialogVisible = ref(false) // 弹窗是否展示
const dialogLoading = ref(false) // 弹窗的加载中
const formRef = ref<FormInstance>()
const formRules = reactive({
name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formValues = ref({
name: '',
status: CommonStatusEnum.ENABLE,
remark: ''
})
// 处理保存按钮
const handleSave = () => {
dialogVisible.value = true
}
// 提交保存表单
const submitForm = async () => {
// 参数校验
const elForm = unref(formRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 提交请求
dialogLoading.value = true
try {
const data = formValues.value as FormApi.FormVO
data.conf = encodeConf(designer) // 表单配置
data.fields = encodeFields(designer) // 表单字段
if (!data.id) {
await FormApi.createFormApi(data)
message.success(t('common.createSuccess'))
} else {
await FormApi.updateFormApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
dialogLoading.value = false
}
}
// ========== 初始化 ==========
onMounted(() => {
// 场景一：新增表单
const id = query.id as unknown as number
if (!id) {
return
}
// 场景二：修改表单
FormApi.getFormApi(id).then((data) => {
formValues.value = data
setConfAndFields(designer, data.conf, data.fields)
})
})
</script>

93
src/views/bpm/form/index.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作：新增 -->
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:post:create']"
@click="handleCreate()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['bpm:form:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['bpm:form:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['bpm:form:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
<!-- 表单详情的弹窗 -->
<XModal v-model="detailOpen" width="800" title="表单详情">
<form-create :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
</XModal>
</ContentWrap>
</template>
<script setup lang="ts" name="BpmForm">
// 业务相关的 import
import * as FormApi from '@/api/bpm/form'
import { allSchemas } from './form.data'
// 表单详情相关的变量和 import
import { setConfAndFields2 } from '@/utils/formCreate'
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由
// 列表相关的变量
const [registerTable, { deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: FormApi.getFormPageApi,
deleteApi: FormApi.deleteFormApi
})
// 新增操作
const handleCreate = () => {
push({
name: 'bpmFormEditor'
})
}
// 修改操作
const handleUpdate = async (rowId: number) => {
await push({
name: 'bpmFormEditor',
query: {
id: rowId
}
})
}
// 详情操作
const detailOpen = ref(false)
const detailPreview = ref({
rule: [],
option: {}
})
const handleDetail = async (rowId: number) => {
// 设置表单
const data = await FormApi.getFormApi(rowId)
setConfAndFields2(detailPreview, data.conf, data.fields)
// 弹窗打开
detailOpen.value = true
}
</script>

63
src/views/bpm/group/group.data.ts Normal file
View File

@ -0,0 +1,63 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
description: [required],
memberUserIds: [required],
status: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '编号',
action: true,
columns: [
{
title: '组名',
field: 'name',
isSearch: true
},
{
title: '成员',
field: 'memberUserIds',
table: {
slots: {
default: 'memberUserIds_default'
}
}
},
{
title: '描述',
field: 'description'
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
},
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

182
src/views/bpm/group/index.vue Normal file
View File

@ -0,0 +1,182 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['bpm:user-group:create']"
@click="handleCreate()"
/>
</template>
<template #memberUserIds_default="{ row }">
<span v-for="userId in row.memberUserIds" :key="userId">
{{ getUserNickname(userId) }} &nbsp;
</span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['bpm:user-group:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['bpm:user-group:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['bpm:user-group:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
>
<template #memberUserIds="form">
<el-select v-model="form.memberUserIds" multiple>
<el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
</el-select>
</template>
</Form>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #memberUserIds="{ row }">
<span v-for="userId in row.memberUserIds" :key="userId">
{{ getUserNickname(userId) }} &nbsp;
</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts">
// 业务相关的 import
import * as UserGroupApi from '@/api/bpm/userGroup'
import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
import { allSchemas, rules } from './group.data'
import { FormExpose } from '@/components/Form'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: UserGroupApi.getUserGroupPageApi,
deleteApi: UserGroupApi.deleteUserGroupApi
})
// 用户列表
const users = ref<UserVO[]>([])
const getUserNickname = (userId) => {
for (const user of users.value) {
if (user.id === userId) {
return user.nickname
}
}
return '未知(' + userId + ')'
}
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await UserGroupApi.getUserGroupApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
detailData.value = await UserGroupApi.getUserGroupApi(rowId)
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
if (actionType.value === 'create') {
await UserGroupApi.createUserGroupApi(data)
message.success(t('common.createSuccess'))
} else {
await UserGroupApi.updateUserGroupApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
// 刷新列表
await reload()
}
}
})
}
// ========== 初始化 ==========
onMounted(() => {
getListSimpleUsersApi().then((data) => {
users.value = data
})
})
</script>

586
src/views/bpm/model/index.vue Normal file
View File

@ -0,0 +1,586 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
title="新建流程"
v-hasPermi="['bpm:model:create']"
@click="handleCreate"
/>
<!-- 操作：导入 -->
<XButton
type="warning"
preIcon="ep:upload"
:title="'导入流程'"
@click="handleImport"
style="margin-left: 10px"
/>
</template>
<!-- 流程名称 -->
<template #name_default="{ row }">
<XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
</template>
<!-- 表单信息 -->
<template #formId_default="{ row }">
<XTextButton
v-if="row.formType === 10"
:title="forms.find((form) => form.id === row.formId)?.name || row.formId"
@click="handleFormDetail(row)"
/>
<XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
</template>
<!-- 流程版本 -->
<template #version_default="{ row }">
<el-tag v-if="row.processDefinition">v{{ row.processDefinition.version }}</el-tag>
<el-tag type="warning" v-else>未部署</el-tag>
</template>
<!-- 激活状态 -->
<template #status_default="{ row }">
<el-switch
v-if="row.processDefinition"
v-model="row.processDefinition.suspensionState"
:active-value="1"
:inactive-value="2"
@change="handleChangeState(row)"
/>
</template>
<!-- 操作 -->
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:edit"
title="修改流程"
v-hasPermi="['bpm:model:update']"
@click="handleUpdate(row.id)"
/>
<XTextButton
preIcon="ep:setting"
title="设计流程"
v-hasPermi="['bpm:model:update']"
@click="handleDesign(row)"
/>
<XTextButton
preIcon="ep:user"
title="分配规则"
v-hasPermi="['bpm:task-assign-rule:query']"
@click="handleAssignRule(row)"
/>
<XTextButton
preIcon="ep:position"
title="发布流程"
v-hasPermi="['bpm:model:deploy']"
@click="handleDeploy(row)"
/>
<XTextButton
preIcon="ep:aim"
title="流程定义"
v-hasPermi="['bpm:process-definition:query']"
@click="handleDefinitionList(row)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['bpm:model:delete']"
@click="handleDelete(row.id)"
/>
</template>
</XTable>
<!-- 对话框(添加 / 修改流程) -->
<XModal v-model="dialogVisible" :title="dialogTitle" width="600">
<el-form
:loading="dialogLoading"
el-form
ref="saveFormRef"
:model="saveForm"
:rules="rules"
label-width="110px"
>
<el-form-item label="流程标识" prop="key">
<el-input
v-model="saveForm.key"
placeholder="请输入流标标识"
style="width: 330px"
:disabled="!!saveForm.id"
/>
<el-tooltip
v-if="!saveForm.id"
class="item"
effect="light"
content="新建后，流程标识不可修改！"
placement="top"
>
<i style="padding-left: 5px" class="el-icon-question"></i>
</el-tooltip>
<el-tooltip
v-else
class="item"
effect="light"
content="流程标识不可修改！"
placement="top"
>
<i style="padding-left: 5px" class="el-icon-question"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="saveForm.name"
placeholder="请输入流程名称"
:disabled="!!saveForm.id"
clearable
/>
</el-form-item>
<el-form-item v-if="saveForm.id" label="流程分类" prop="category">
<el-select
v-model="saveForm.category"
placeholder="请选择流程分类"
clearable
style="width: 100%"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="流程描述" prop="description">
<el-input type="textarea" v-model="saveForm.description" clearable />
</el-form-item>
<div v-if="saveForm.id">
<el-form-item label="表单类型" prop="formType">
<el-radio-group v-model="saveForm.formType">
<el-radio
v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
:key="parseInt(dict.value)"
:label="parseInt(dict.value)"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="saveForm.formType === 10" label="流程表单" prop="formId">
<el-select v-model="saveForm.formId" clearable style="width: 100%">
<el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id" />
</el-select>
</el-form-item>
<el-form-item
v-if="saveForm.formType === 20"
label="表单提交路由"
prop="formCustomCreatePath"
>
<el-input
v-model="saveForm.formCustomCreatePath"
placeholder="请输入表单提交路由"
style="width: 330px"
/>
<el-tooltip
class="item"
effect="light"
content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
placement="top"
>
<i style="padding-left: 5px" class="el-icon-question"></i>
</el-tooltip>
</el-form-item>
<el-form-item
v-if="saveForm.formType === 20"
label="表单查看路由"
prop="formCustomViewPath"
>
<el-input
v-model="saveForm.formCustomViewPath"
placeholder="请输入表单查看路由"
style="width: 330px"
/>
<el-tooltip
class="item"
effect="light"
content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view"
placement="top"
>
<i style="padding-left: 5px" class="el-icon-question"></i>
</el-tooltip>
</el-form-item>
</div>
</el-form>
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="primary"
:loading="dialogLoading"
@click="submitForm"
:title="t('action.save')"
/>
<!-- 按钮：关闭 -->
<XButton
:loading="dialogLoading"
@click="dialogVisible = false"
:title="t('dialog.close')"
/>
</template>
</XModal>
<!-- 导入流程 -->
<XModal v-model="importDialogVisible" width="400" title="导入流程">
<div>
<el-upload
ref="uploadRef"
:action="importUrl"
:headers="uploadHeaders"
:drag="true"
:limit="1"
:multiple="true"
:show-file-list="true"
:disabled="uploadDisabled"
:on-exceed="handleExceed"
:on-success="handleFileSuccess"
:on-error="excelUploadError"
:auto-upload="false"
accept=".bpmn, .xml"
name="bpmnFile"
:data="importForm"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
<template #tip>
<div class="el-upload__tip" style="color: red">
提示：仅允许导入“bpm”或“xml”格式文件！
</div>
<div>
<el-form
ref="importFormRef"
:model="importForm"
:rules="rules"
label-width="120px"
status-icon
>
<el-form-item label="流程标识" prop="key">
<el-input
v-model="importForm.key"
placeholder="请输入流标标识"
style="width: 250px"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input v-model="importForm.name" placeholder="请输入流程名称" clearable />
</el-form-item>
<el-form-item label="流程描述" prop="description">
<el-input type="textarea" v-model="importForm.description" clearable />
</el-form-item>
</el-form>
</div>
</template>
</el-upload>
</div>
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="warning"
preIcon="ep:upload-filled"
:title="t('action.save')"
@click="submitFileForm"
/>
<XButton title="取 消" @click="uploadClose" />
</template>
</XModal>
<!-- 表单详情的弹窗 -->
<XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
<form-create
:rule="formDetailPreview.rule"
:option="formDetailPreview.option"
v-if="formDetailVisible"
/>
</XModal>
<!-- 流程模型图的预览 -->
<XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
<my-process-viewer
key="designer"
v-model="bpmnXML"
:value="bpmnXML"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
/>
</XModal>
</ContentWrap>
</template>
<script setup lang="ts">
// 全局相关的 import
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { FormInstance, UploadInstance } from 'element-plus'
// 业务相关的 import
import { getAccessToken, getTenantId } from '@/utils/auth'
import * as FormApi from '@/api/bpm/form'
import * as ModelApi from '@/api/bpm/model'
import { allSchemas, rules } from './model.data'
import { setConfAndFields2 } from '@/utils/formCreate'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const showBpmnOpen = ref(false)
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
// ========== 列表相关 ==========
const [registerTable, { reload }] = useXTable({
allSchemas: allSchemas,
getListApi: ModelApi.getModelPageApi
})
const forms = ref() // 流程表单的下拉框的数据
// 设计流程
const handleDesign = (row) => {
console.log(row, '设计流程')
router.push({
name: 'modelEditor',
query: {
modelId: row.id
}
})
}
// 跳转到指定流程定义列表
const handleDefinitionList = (row) => {
router.push({
name: 'BpmProcessDefinitionList',
query: {
key: row.key
}
})
}
// 流程表单的详情按钮操作
const formDetailVisible = ref(false)
const formDetailPreview = ref({
rule: [],
option: {}
})
const handleFormDetail = async (row) => {
if (row.formType == 10) {
// 设置表单
const data = await FormApi.getFormApi(row.formId)
setConfAndFields2(formDetailPreview, data.conf, data.fields)
// 弹窗打开
formDetailVisible.value = true
} else {
await router.push({
path: row.formCustomCreatePath
})
}
}
// 流程图的详情按钮操作
const handleBpmnDetail = (row) => {
// TODO 芋艿：流程组件开发中
console.log(row)
ModelApi.getModelApi(row).then((response) => {
console.log(response, 'response')
bpmnXML.value = response.bpmnXml
// 弹窗打开
showBpmnOpen.value = true
})
// message.success('流程组件开发中，预计 2 月底完成')
}
// 点击任务分配按钮
const handleAssignRule = (row) => {
router.push({
name: 'BpmTaskAssignRuleList',
query: {
modelId: row.id
}
})
}
// ========== 新建/修改流程 ==========
const dialogVisible = ref(false)
const dialogTitle = ref('新建模型')
const dialogLoading = ref(false)
const saveForm = ref()
const saveFormRef = ref<FormInstance>()
// 设置标题
const setDialogTile = async (type: string) => {
dialogTitle.value = t('action.' + type)
dialogVisible.value = true
}
// 新增操作
const handleCreate = async () => {
resetForm()
await setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
resetForm()
await setDialogTile('edit')
// 设置数据
saveForm.value = await ModelApi.getModelApi(rowId)
}
// 提交按钮
const submitForm = async () => {
// 参数校验
const elForm = unref(saveFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 提交请求
dialogLoading.value = true
try {
const data = saveForm.value as ModelApi.ModelVO
if (!data.id) {
await ModelApi.createModelApi(data)
message.success(t('common.createSuccess'))
} else {
await ModelApi.updateModelApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
// 刷新列表
await reload()
dialogLoading.value = false
}
}
// 重置表单
const resetForm = () => {
saveForm.value = {
formType: 10,
name: '',
courseSort: '',
description: '',
formId: '',
formCustomCreatePath: '',
formCustomViewPath: ''
}
saveFormRef.value?.resetFields()
}
// ========== 删除 / 更新状态 / 发布流程 ==========
// 删除流程
const handleDelete = (rowId) => {
message.delConfirm('是否删除该流程！！').then(async () => {
await ModelApi.deleteModelApi(rowId)
message.success(t('common.delSuccess'))
// 刷新列表
reload()
})
}
// 更新状态操作
const handleChangeState = (row) => {
const id = row.id
const state = row.processDefinition.suspensionState
const statusState = state === 1 ? '激活' : '挂起'
const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
message
.confirm(content)
.then(async () => {
await ModelApi.updateModelStateApi(id, state)
message.success(t('部署成功'))
// 刷新列表
reload()
})
.catch(() => {
// 取消后，进行恢复按钮
row.processDefinition.suspensionState = state === 1 ? 2 : 1
})
}
// 发布流程
const handleDeploy = (row) => {
message.confirm('是否部署该流程！！').then(async () => {
await ModelApi.deployModelApi(row.id)
message.success(t('部署成功'))
// 刷新列表
reload()
})
}
// ========== 导入流程 ==========
const uploadRef = ref<UploadInstance>()
let importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
const uploadHeaders = ref()
const importDialogVisible = ref(false)
const uploadDisabled = ref(false)
const importFormRef = ref<FormInstance>()
const importForm = ref({
key: '',
name: '',
description: ''
})
// 导入流程弹窗显示
const handleImport = () => {
importDialogVisible.value = true
}
// 文件数超出提示
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
// 上传错误提示
const excelUploadError = (): void => {
message.error('导入流程失败，请您重新上传！')
}
// 提交文件上传
const submitFileForm = () => {
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
uploadDisabled.value = true
uploadRef.value!.submit()
}
// 文件上传成功
const handleFileSuccess = async (response: any): Promise<void> => {
if (response.code !== 0) {
message.error(response.msg)
return
}
// 重置表单
uploadClose()
// 提示，并刷新
message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
await reload()
}
// 关闭文件上传
const uploadClose = () => {
// 关闭弹窗
importDialogVisible.value = false
// 重置上传状态和文件
uploadDisabled.value = false
uploadRef.value!.clearFiles()
// 重置表单
importForm.value = {
key: '',
name: '',
description: ''
}
importFormRef.value?.resetFields()
}
// ========== 初始化 ==========
onMounted(() => {
// 获得流程表单的下拉框的数据
FormApi.getSimpleFormsApi().then((data) => {
forms.value = data
})
})
</script>

101
src/views/bpm/model/model.data.ts Normal file
View File

@ -0,0 +1,101 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
key: [required],
name: [required],
category: [required],
formType: [required],
formId: [required],
formCustomCreatePath: [required],
formCustomViewPath: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'key',
primaryType: null,
action: true,
actionWidth: '540px',
columns: [
{
title: '流程标识',
field: 'key',
isSearch: true,
table: {
width: 120
}
},
{
title: '流程名称',
field: 'name',
isSearch: true,
table: {
width: 120,
slots: {
default: 'name_default'
}
}
},
{
title: '流程分类',
field: 'category',
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
dictClass: 'number',
isSearch: true
},
{
title: '表单信息',
field: 'formId',
table: {
width: 180,
slots: {
default: 'formId_default'
}
}
},
{
title: '最新部署的流程定义',
field: 'processDefinition',
isForm: false,
table: {
children: [
{
title: '流程版本',
field: 'version',
slots: {
default: 'version_default'
},
width: 80
},
{
title: '激活状态',
field: 'status',
slots: {
default: 'status_default'
},
width: 80
},
{
title: '部署时间',
field: 'processDefinition.deploymentTime',
formatter: 'formatDate',
width: 180
}
]
}
},
{
title: t('common.createTime'),
field: 'createTime',
isForm: false,
formatter: 'formatDate',
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

204
src/views/bpm/model/modelEditor.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<div class="app-container">
<!-- 流程设计器，负责绘制流程等 -->
<!-- <myProcessDesigner -->
<my-process-designer
:key="`designer-${reloadIndex}`"
v-if="xmlString !== undefined"
v-model="xmlString"
:value="xmlString"
v-bind="controlForm"
keyboard
ref="processDesigner"
@init-finished="initModeler"
:additionalModel="controlForm.additionalModel"
@save="save"
/>
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
<!-- <MyProcessPalette -->
<my-properties-panel
:key="`penal-${reloadIndex}`"
:bpmnModeler="modeler"
:prefix="controlForm.prefix"
class="process-panel"
:model="model"
/>
</div>
</template>
<script setup lang="ts">
// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
// import xmlObj2json from "./utils/xml2json";
// import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
import { createModelApi, getModelApi, updateModelApi, ModelVO } from '@/api/bpm/model'
const router = useRouter()
const message = useMessage()
// 自定义侧边栏
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
const xmlString = ref(undefined) // BPMN XML
const modeler = ref(null)
const reloadIndex = ref(0)
// const controlDrawerVisible = ref(false)
// const translationsSelf = translations
const controlForm = ref({
simulation: true,
labelEditing: false,
labelVisible: false,
prefix: 'flowable',
headerButtonSize: 'mini',
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
})
// const addis = ref({
// CustomContentPadProvider,
// CustomPaletteProvider
// })
// 流程模型的信息
const model = ref<ModelVO>()
onMounted(() => {
// 如果 modelId 非空，说明是修改流程模型
const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
console.log(modelId, 'modelId')
if (modelId) {
// let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
getModelApi(modelId as unknown as number).then((data) => {
console.log(data, 'response')
xmlString.value = data.bpmnXml
model.value = {
...data,
bpmnXml: undefined // 清空 bpmnXml 属性
}
// this.controlForm.processId = data.key
// xmlString.value =
// '<?xml version="1.0" encoding="UTF-8"?>\n<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
// model.value = {
// key: 'flowable_01',
// name: 'flowable测试',
// description: 'ooxx',
// category: '1',
// formType: 10,
// formId: 11,
// formCustomCreatePath: null,
// formCustomViewPath: null,
// id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
// createTime: 1645978019795,
// bpmnXml: undefined // 清空 bpmnXml 属性
// }
// console.log(modeler.value, 'modeler11111111')
})
}
})
const initModeler = (item) => {
setTimeout(() => {
modeler.value = item
console.log(item, 'initModeler方法modeler')
console.log(modeler.value, 'initModeler方法modeler')
// controlForm.value.prefix = '2222'
}, 10)
}
const save = (bpmnXml) => {
const data: ModelVO = {
...model.value,
bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
}
console.log(data, 'data')
// 修改的提交
if (data.id) {
updateModelApi(data).then((response) => {
console.log(response, 'response')
message.success('修改成功')
// 跳转回去
close()
})
return
}
// 添加的提交
createModelApi(data).then((response) => {
console.log(response, 'response1')
message.success('保存成功')
// 跳转回去
close()
})
}
/** 关闭按钮 */
const close = () => {
router.push({ path: '/bpm/manager/model' })
}
</script>
<style lang="scss">
//body {
// overflow: hidden;
// margin: 0;
// box-sizing: border-box;
//}
//.app {
// width: 100%;
// height: 100%;
// box-sizing: border-box;
// display: inline-grid;
// grid-template-columns: 100px auto max-content;
//}
.demo-control-bar {
position: fixed;
right: 8px;
bottom: 8px;
z-index: 1;
.open-control-dialog {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 32px;
background: rgba(64, 158, 255, 1);
color: #ffffff;
cursor: pointer;
}
}
// TODO 芋艿：去掉多余的 faq
//.info-tip {
// position: fixed;
// top: 40px;
// right: 500px;
// z-index: 10;
// color: #999999;
//}
.control-form {
.el-radio {
width: 100%;
line-height: 32px;
}
}
.element-overlays {
box-sizing: border-box;
padding: 8px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
color: #fafafa;
}
.my-process-designer {
height: calc(100vh - 84px);
}
.process-panel__container {
position: absolute;
right: 0;
top: 55px;
height: calc(100vh - 84px);
}
</style>

56
src/views/bpm/oa/leave/create.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<ContentWrap>
<!-- 对话框(添加 / 修改) -->
<Form :schema="allSchemas.formSchema" :rules="rules" ref="formRef" />
<!-- 按钮：保存 -->
<XButton
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm"
/>
</ContentWrap>
</template>
<script setup lang="ts">
import { FormExpose } from '@/components/Form'
// import XEUtils from 'xe-utils'
// 业务相关的 import
import * as LeaveApi from '@/api/bpm/leave'
import { rules, allSchemas } from './leave.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由
// 表单参数
const actionLoading = ref(false) // 按钮 Loading
const formRef = ref<FormExpose>() // 表单 Ref
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (!valid) {
return
}
try {
// 设置提交中
actionLoading.value = true
const data = unref(formRef)?.formModel as LeaveApi.LeaveVO
// data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss')
// data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss')
data.startTime = Date.parse(new Date(data.startTime).toString()).toString()
data.endTime = Date.parse(new Date(data.endTime).toString()).toString()
// 添加的提交
await LeaveApi.createLeaveApi(data)
message.success(t('common.createSuccess'))
// 关闭窗口
push('/bpm/oa/leave')
} finally {
actionLoading.value = false
}
})
}
</script>

36
src/views/bpm/oa/leave/detail.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<ContentWrap>
<!-- 详情 -->
<Descriptions :schema="allSchemas.detailSchema" :data="formData" />
</ContentWrap>
</template>
<script setup lang="ts">
// 业务相关的 import
import * as LeaveApi from '@/api/bpm/leave'
import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
const { query } = useRoute() // 查询参数
const message = useMessage() // 消息弹窗
const id = ref() // 请假编号
// 表单参数
const formData = ref({
startTime: undefined,
endTime: undefined,
type: undefined,
reason: undefined
})
onMounted(() => {
id.value = query.id
if (!id.value) {
message.error('未传递 id 参数，无法查看 OA 请假信息')
return
}
// 获得请假信息
LeaveApi.getLeaveApi(id.value).then((data) => {
formData.value = data
})
})
</script>

83
src/views/bpm/oa/leave/index.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<ContentWrap>
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：发起请假 -->
<XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
</template>
<template #actionbtns_default="{ row }">
<!-- 操作: 取消请假 -->
<XTextButton
preIcon="ep:delete"
title="取消请假"
v-hasPermi="['bpm:oa-leave:create']"
v-if="row.result === 1"
@click="cancelLeave(row)"
/>
<!-- 操作: 详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
<!-- 操作: 审批进度 -->
<XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
</template>
</XTable>
</ContentWrap>
</template>
<script setup lang="ts">
// 全局相关的 import
import { ElMessageBox } from 'element-plus'
// 业务相关的 import
import { allSchemas } from './leave.data'
import * as LeaveApi from '@/api/bpm/leave'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由
const [registerTable, { reload }] = useXTable({
allSchemas: allSchemas,
getListApi: LeaveApi.getLeavePageApi
})
// 发起请假
const handleCreate = () => {
push({
name: 'OALeaveCreate'
})
}
// 取消请假
const cancelLeave = (row) => {
ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空'
}).then(async ({ value }) => {
await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
message.success('取消成功')
reload()
})
}
// 详情
const handleDetail = (row) => {
push({
name: 'OALeaveDetail',
query: {
id: row.id
}
})
}
// 审批进度
const handleProcessDetail = (row) => {
push({
name: 'BpmProcessInstanceDetail',
query: {
id: row.processInstanceId
}
})
}
</script>

90
src/views/bpm/oa/leave/leave.data.ts Normal file
View File

@ -0,0 +1,90 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }]
})
// crudSchemas
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '申请编号',
action: true,
actionWidth: '260',
columns: [
{
title: t('common.status'),
field: 'result',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
dictClass: 'number',
isSearch: true,
isForm: false
},
{
title: t('common.startTimeText'),
field: 'startTime',
formatter: 'formatDay',
table: {
width: 180
},
detail: {
dateFormat: 'YYYY-MM-DD'
},
form: {
component: 'DatePicker'
}
},
{
title: t('common.endTimeText'),
field: 'endTime',
formatter: 'formatDay',
table: {
width: 180
},
detail: {
dateFormat: 'YYYY-MM-DD'
},
form: {
component: 'DatePicker'
}
},
{
title: '请假类型',
field: 'type',
dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '原因',
field: 'reason',
isSearch: true,
componentProps: {
type: 'textarea',
rows: 4
}
},
{
title: '申请时间',
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
},
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
},
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

149
src/views/bpm/processInstance/create.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<ContentWrap>
<!-- 第一步，通过流程定义的列表，选择对应的流程 -->
<div v-if="!selectProcessInstance">
<XTable @register="registerTable">
<template #version_default="{ row }">
<el-tag v-if="row">v{{ row.version }}</el-tag>
</template>
<template #actionbtns_default="{ row }">
<XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" />
</template>
</XTable>
</div>
<!-- 第二步，填写表单，进行流程的提交 -->
<div v-else>
<el-card class="box-card">
<div class="clearfix">
<span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
<XButton
style="float: right"
type="primary"
preIcon="ep:delete"
title="选择其它流程"
@click="selectProcessInstance = undefined"
/>
</div>
<el-col :span="16" :offset="6" style="margin-top: 20px">
<form-create
:rule="detailForm.rule"
v-model:api="fApi"
:option="detailForm.option"
@submit="submitForm"
/>
</el-col>
</el-card>
<el-card class="box-card">
<div class="clearfix">
<span class="el-icon-picture-outline">流程图</span>
</div>
<!-- TODO 芋艿：待完成？？？ -->
<my-process-viewer
key="designer"
v-model="bpmnXML"
:value="bpmnXML"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
/>
</el-card>
</div>
</ContentWrap>
</template>
<script setup lang="ts">
// 业务相关的 import
import { allSchemas } from './process.create'
import * as DefinitionApi from '@/api/bpm/definition'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { setConfAndFields2 } from '@/utils/formCreate'
import { ApiAttrs } from '@form-create/element-ui/types/config'
const router = useRouter() // 路由
const message = useMessage() // 消息
// ========== 列表相关 ==========
const [registerTable] = useXTable({
allSchemas: allSchemas,
params: {
suspensionState: 1
},
getListApi: DefinitionApi.getProcessDefinitionListApi,
isList: true
})
// ========== 表单相关 ==========
const fApi = ref<ApiAttrs>()
// 流程表单详情
const detailForm = ref({
rule: [],
option: {}
})
// 流程表单
const selectProcessInstance = ref() // 选择的流程实例
/** 处理选择流程的按钮操作 **/
const handleSelect = async (row) => {
// 设置选择的流程
selectProcessInstance.value = row
// 情况一：流程表单
if (row.formType == 10) {
// 设置表单
setConfAndFields2(detailForm, row.formConf, row.formFields)
// 加载流程图
DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
bpmnXML.value = response
})
// 情况二：业务表单
} else if (row.formCustomCreatePath) {
await router.push({
path: row.formCustomCreatePath
})
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
}
}
/** 提交按钮 */
const submitForm = async (formData) => {
if (!fApi.value || !selectProcessInstance.value) {
return
}
// 提交请求
fApi.value.btn.loading(true)
try {
await ProcessInstanceApi.createProcessInstanceApi({
processDefinitionId: selectProcessInstance.value.id,
variables: formData
})
// 提示
message.success('发起流程成功')
// this.$tab.closeOpenPage();
router.go(-1)
} finally {
fApi.value.btn.loading(false)
}
}
// ========== 流程图相关 ==========
// // BPMN 数据
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
</script>
<style lang="scss">
.my-process-designer {
height: calc(100vh - 200px);
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

490
src/views/bpm/processInstance/detail.vue Normal file
View File

@ -0,0 +1,490 @@
<template>
<ContentWrap>
<!-- 审批信息 -->
<el-card
class="box-card"
v-loading="processInstanceLoading"
v-for="(item, index) in runningTasks"
:key="index"
>
<template #header>
<span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
</template>
<el-col :span="16" :offset="6">
<el-form
:ref="'form' + index"
:model="auditForms[index]"
:rules="auditRule"
label-width="100px"
>
<el-form-item label="流程名" v-if="processInstance && processInstance.name">
{{ processInstance.name }}
</el-form-item>
<el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
{{ processInstance.startUser.nickname }}
<el-tag type="info" size="small">{{ processInstance.startUser.deptName }}</el-tag>
</el-form-item>
<el-form-item label="审批建议" prop="reason">
<el-input
type="textarea"
v-model="auditForms[index].reason"
placeholder="请输入审批建议"
/>
</el-form-item>
</el-form>
<div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
<XButton
pre-icon="ep:select"
type="success"
title="通过"
@click="handleAudit(item, true)"
/>
<XButton
pre-icon="ep:close"
type="danger"
title="不通过"
@click="handleAudit(item, false)"
/>
<XButton
pre-icon="ep:edit"
type="primary"
title="转办"
@click="handleUpdateAssignee(item)"
/>
<XButton
pre-icon="ep:position"
type="primary"
title="委派"
@click="handleDelegate(item)"
/>
<XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
</div>
</el-col>
</el-card>
<!-- 申请信息 -->
<el-card class="box-card" v-loading="processInstanceLoading">
<template #header>
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
</template>
<!-- 情况一：流程表单 -->
<el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
<form-create
ref="fApi"
:rule="detailForm.rule"
:option="detailForm.option"
v-model="detailForm.value"
/>
</el-col>
<!-- 情况二：流程表单 -->
<div v-if="processInstance?.processDefinition?.formType === 20">
<router-link
:to="
processInstance.processDefinition.formCustomViewPath +
'?id=' +
processInstance.businessKey
"
>
<XButton type="primary" preIcon="ep:view" title="点击查看" />
</router-link>
</div>
</el-card>
<!-- 审批记录 -->
<el-card class="box-card" v-loading="tasksLoad">
<template #header>
<span class="el-icon-picture-outline">审批记录</span>
</template>
<el-col :span="16" :offset="4">
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(item, index) in tasks"
:key="index"
:icon="getTimelineItemIcon(item)"
:type="getTimelineItemType(item)"
>
<p style="font-weight: 700">任务：{{ item.name }}</p>
<el-card :body-style="{ padding: '10px' }">
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
审批人：{{ item.assigneeUser.nickname }}
<el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
</label>
<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
<label style="color: #8a909c; font-weight: normal">
{{ dayjs(item?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
</label>
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
审批时间：
</label>
<label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
{{ dayjs(item?.endTime).format('YYYY-MM-DD HH:mm:ss') }}
</label>
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
耗时：
</label>
<label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
{{ formatPast2(item?.durationInMillis) }}
</label>
<p v-if="item.reason">
<el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
<!-- 高亮流程图 -->
<el-card class="box-card" v-loading="processInstanceLoading">
<template #header>
<span class="el-icon-picture-outline">流程图</span>
</template>
<my-process-viewer
key="designer"
v-model="bpmnXML"
:value="bpmnXML"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
:activityData="activityList"
:processInstanceData="processInstance"
:taskData="tasks"
/>
</el-card>
<!-- 对话框(转派审批人) -->
<XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
<el-form
ref="updateAssigneeFormRef"
:model="updateAssigneeForm"
:rules="updateAssigneeRules"
label-width="110px"
>
<el-form-item label="新审批人" prop="assigneeUserId">
<el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
<el-option
v-for="item in userOptions"
:key="parseInt(item.id)"
:label="item.nickname"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="primary"
:title="t('action.save')"
:loading="updateAssigneeLoading"
@click="submitUpdateAssigneeForm"
/>
<!-- 按钮：关闭 -->
<XButton
:loading="updateAssigneeLoading"
:title="t('dialog.close')"
@click="updateAssigneeLoading = false"
/>
</template>
</XModal>
</ContentWrap>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import * as UserApi from '@/api/system/user'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as DefinitionApi from '@/api/bpm/definition'
import * as TaskApi from '@/api/bpm/task'
import * as ActivityApi from '@/api/bpm/activity'
import { formatPast2 } from '@/utils/formatTime'
import { setConfAndFields2 } from '@/utils/formCreate'
// import { OptionAttrs } from '@form-create/element-ui/types/config'
import { ApiAttrs } from '@form-create/element-ui/types/config'
import { useUserStore } from '@/store/modules/user'
const { query } = useRoute() // 查询参数
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { proxy } = getCurrentInstance()
// ========== 审批信息 ==========
const id = query.id as unknown as number
const processInstanceLoading = ref(false) // 流程实例的加载中
const processInstance = ref<any>({}) // 流程实例
const runningTasks = ref<any[]>([]) // 运行中的任务
const auditForms = ref<any[]>([]) // 审批任务的表单
const auditRule = reactive({
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
})
// 处理审批通过和不通过的操作
const handleAudit = async (task, pass) => {
// 1.1 获得对应表单
const index = runningTasks.value.indexOf(task)
const auditFormRef = proxy.$refs['form' + index][0]
// alert(auditFormRef)
// 1.2 校验表单
const elForm = unref(auditFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 2.1 提交审批
const data = {
id: task.id,
reason: auditForms.value[index].reason
}
if (pass) {
await TaskApi.approveTask(data)
message.success('审批通过成功')
} else {
await TaskApi.rejectTask(data)
message.success('审批不通过成功')
}
// 2.2 加载最新数据
getDetail()
}
// ========== 申请信息 ==========
const fApi = ref<ApiAttrs>()
const userId = useUserStore().getUser.id // 当前登录的编号
// 流程表单详情
const detailForm = ref({
rule: [],
option: {},
value: {}
})
// ========== 审批记录 ==========
const tasksLoad = ref(true)
const tasks = ref<any[]>([])
const getTimelineItemIcon = (item) => {
if (item.result === 1) {
return 'el-icon-time'
}
if (item.result === 2) {
return 'el-icon-check'
}
if (item.result === 3) {
return 'el-icon-close'
}
if (item.result === 4) {
return 'el-icon-remove-outline'
}
return ''
}
const getTimelineItemType = (item) => {
if (item.result === 1) {
return 'primary'
}
if (item.result === 2) {
return 'success'
}
if (item.result === 3) {
return 'danger'
}
if (item.result === 4) {
return 'info'
}
return ''
}
// ========== 审批记录 ==========
const updateAssigneeVisible = ref(false)
const updateAssigneeLoading = ref(false)
const updateAssigneeForm = ref({
id: undefined,
assigneeUserId: undefined
})
const updateAssigneeRules = ref({
assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
})
const updateAssigneeFormRef = ref()
const userOptions = ref<any[]>([])
// 处理转派审批人
const handleUpdateAssignee = (task) => {
// 设置表单
resetUpdateAssigneeForm()
updateAssigneeForm.value.id = task.id
// 设置为打开
updateAssigneeVisible.value = true
}
// 提交转派审批人
const submitUpdateAssigneeForm = async () => {
// 1. 校验表单
const elForm = unref(updateAssigneeFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 2.1 提交审批
updateAssigneeLoading.value = true
try {
await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
// 2.2 设置为隐藏
updateAssigneeVisible.value = false
// 加载最新数据
getDetail()
} finally {
updateAssigneeLoading.value = false
}
}
// 重置转派审批人表单
const resetUpdateAssigneeForm = () => {
updateAssigneeForm.value = {
id: undefined,
assigneeUserId: undefined
}
updateAssigneeFormRef.value?.resetFields()
}
/** 处理审批退回的操作 */
const handleDelegate = async (task) => {
message.error('暂不支持【委派】功能，可以使用【转派】替代！')
console.log(task)
}
/** 处理审批退回的操作 */
const handleBack = async (task) => {
message.error('暂不支持【退回】功能！')
// 可参考 http://blog.wya1.com/article/636697030/details/7296
// const data = {
// id: task.id,
// assigneeUserId: 1
// }
// backTask(data).then(response => {
// this.$modal.msgSuccess("回退成功！");
// this.getDetail(); // 获得最新详情
// });
console.log(task)
}
// ========== 高亮流程图 ==========
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
const activityList = ref([])
// ========== 初始化 ==========
onMounted(() => {
// 加载详情
getDetail()
// 加载用户的列表
UserApi.getListSimpleUsersApi().then((data) => {
userOptions.value.push(...data)
})
})
const getDetail = () => {
// 1. 获得流程实例相关
processInstanceLoading.value = true
ProcessInstanceApi.getProcessInstanceApi(id)
.then((data) => {
if (!data) {
message.error('查询不到流程信息！')
return
}
processInstance.value = data
// 设置表单信息
const processDefinition = data.processDefinition
if (processDefinition.formType === 10) {
setConfAndFields2(
detailForm,
processDefinition.formConf,
processDefinition.formFields,
data.formVariables
)
nextTick().then(() => {
fApi.value?.fapi.btn.show(false)
fApi.value?.fapi.resetBtn.show(false)
fApi.value?.fapi.disabled(true)
})
}
// 加载流程图
DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => {
bpmnXML.value = data
})
// 加载活动列表
ActivityApi.getActivityList({
processInstanceId: data.id
}).then((data) => {
activityList.value = data
})
})
.finally(() => {
processInstanceLoading.value = false
})
// 2. 获得流程任务列表（审批记录）
tasksLoad.value = true
runningTasks.value = []
auditForms.value = []
TaskApi.getTaskListByProcessInstanceId(id)
.then((data) => {
// 审批记录
tasks.value = []
// 移除已取消的审批
data.forEach((task) => {
if (task.result !== 4) {
tasks.value.push(task)
}
})
// 排序，将未完成的排在前面，已完成的排在后面；
tasks.value.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return b.endTime - a.endTime
} else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
} else {
return b.createTime - a.createTime
}
})
// 需要审核的记录
tasks.value.forEach((task) => {
// 1.1 只有待处理才需要
if (task.result !== 1) {
return
}
// 1.2 自己不是处理人
if (!task.assigneeUser || task.assigneeUser.id !== userId) {
return
}
// 2. 添加到处理任务
runningTasks.value.push({ ...task })
auditForms.value.push({
reason: ''
})
})
})
.finally(() => {
tasksLoad.value = false
})
}
</script>
<style lang="scss">
.my-process-designer {
height: calc(100vh - 200px);
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

88
src/views/bpm/processInstance/index.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
title="新建流程"
v-hasPermi="['bpm:process-instance:query']"
@click="handleCreate"
/>
</template>
<!-- 当前审批任务 -->
<template #tasks_default="{ row }">
<el-button v-for="task in row.tasks" :key="task.id" link>
<span>{{ task.name }}</span>
</el-button>
</template>
<!-- 操作 -->
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['bpm:process-instance:cancel']"
@click="handleDetail(row)"
/>
<XTextButton
preIcon="ep:delete"
title="取消"
v-if="row.result === 1"
v-hasPermi="['bpm:process-instance:query']"
@click="handleCancel(row)"
/>
</template>
</XTable>
</ContentWrap>
</template>
<script setup lang="ts">
// 全局相关的 import
import { ElMessageBox } from 'element-plus'
// 业务相关的 import
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { allSchemas } from './process.data'
const router = useRouter() // 路由
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
// ========== 列表相关 ==========
const [registerTable, { reload }] = useXTable({
allSchemas: allSchemas,
getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
})
/** 发起流程操作 **/
const handleCreate = () => {
router.push({
name: 'BpmProcessInstanceCreate'
})
}
// 列表操作
const handleDetail = (row) => {
router.push({
name: 'BpmProcessInstanceDetail',
query: {
id: row.id
}
})
}
/** 取消按钮操作 */
const handleCancel = (row) => {
ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空'
}).then(async ({ value }) => {
await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
message.success('取消成功')
reload()
})
}
</script>

34
src/views/bpm/processInstance/process.create.ts Normal file
View File

@ -0,0 +1,34 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// crudSchemas
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '流程名称',
field: 'name'
},
{
title: '流程分类',
field: 'category',
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
dictClass: 'number'
},
{
title: '流程版本',
field: 'version',
table: {
slots: {
default: 'version_default'
}
}
},
{
title: '流程描述',
field: 'description'
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

89
src/views/bpm/processInstance/process.data.ts Normal file
View File

@ -0,0 +1,89 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
primaryTitle: '编号',
action: true,
actionWidth: '200px',
columns: [
{
title: '编号',
field: 'id',
table: {
width: 320
}
},
{
title: '流程名',
field: 'name',
isSearch: true
},
{
title: '所属流程',
field: 'processDefinitionId',
isSearch: true,
isTable: false
},
{
title: '流程分类',
field: 'category',
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
dictClass: 'number',
isSearch: true
},
{
title: '当前审批任务',
field: 'tasks',
table: {
width: 140,
slots: {
default: 'tasks_default'
}
}
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '结果',
field: 'result',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
dictClass: 'number',
isSearch: true
},
{
title: '提交时间',
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
},
isForm: false,
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '结束时间',
field: 'endTime',
formatter: 'formatDate',
table: {
width: 180
},
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

52
src/views/bpm/task/done/done.data.ts Normal file
View File

@ -0,0 +1,52 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// crudSchemas
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '任务编号',
field: 'id',
table: {
width: 320
}
},
{
title: '任务名称',
field: 'name',
isSearch: true
},
{
title: '所属流程',
field: 'processInstance.name'
},
{
title: '流程发起人',
field: 'processInstance.startUserNickname'
},
{
title: t('common.status'),
field: 'result',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
dictClass: 'number',
isSearch: true
},
{
title: '原因',
field: 'reason'
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

36
src/views/bpm/task/done/index.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<ContentWrap>
<XTable @register="registerTable">
<template #suspensionState_default="{ row }">
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作: 审批进度 -->
<XTextButton preIcon="ep:view" title="详情" @click="handleAudit(row)" />
</template>
</XTable>
</ContentWrap>
</template>
<script setup lang="ts">
// 业务相关的 import
import { allSchemas } from './done.data'
import * as TaskApi from '@/api/bpm/task'
const { push } = useRouter() // 路由
const [registerTable] = useXTable({
allSchemas: allSchemas,
getListApi: TaskApi.getDoneTaskPage
})
// 处理审批按钮
const handleAudit = (row) => {
push({
name: 'BpmProcessInstanceDetail',
query: {
id: row.processInstance.id
}
})
}
</script>

37
src/views/bpm/task/todo/index.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<ContentWrap>
<XTable @register="registerTable">
<template #suspensionState_default="{ row }">
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作: 审批进度 -->
<XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleAudit(row)" />
</template>
</XTable>
</ContentWrap>
</template>
<script setup lang="ts">
// 业务相关的 import
import { allSchemas } from './todo.data'
import * as TaskApi from '@/api/bpm/task'
const { push } = useRouter() // 路由
const [registerTable] = useXTable({
allSchemas: allSchemas,
getListApi: TaskApi.getTodoTaskPage
})
// 处理审批按钮
const handleAudit = (row) => {
push({
name: 'BpmProcessInstanceDetail',
query: {
id: row.processInstance.id
}
})
}
</script>

57
src/views/bpm/task/todo/todo.data.ts Normal file
View File

@ -0,0 +1,57 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// crudSchemas
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '任务编号',
field: 'id',
table: {
width: 320
}
},
{
title: '任务名称',
field: 'name',
isSearch: true
},
{
title: '所属流程',
field: 'processInstance.name'
},
{
title: '流程发起人',
field: 'processInstance.startUserNickname'
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
},
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '任务状态',
field: 'suspensionState',
table: {
slots: {
default: 'suspensionState_default'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

350
src/views/bpm/taskAssignRule/index.vue Normal file
View File

@ -0,0 +1,350 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #options_default="{ row }">
<span :key="option" v-for="option in row.options">
<el-tag>
{{ getAssignRuleOptionName(row.type, option) }}
</el-tag>
&nbsp;
</span>
</template>
<!-- 操作 -->
<template #actionbtns_default="{ row }" v-if="modelId">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['bpm:task-assign-rule:update']"
@click="handleUpdate(row)"
/>
</template>
</XTable>
<!-- 添加/修改弹窗 -->
<XModal v-model="dialogVisible" title="修改任务规则" width="800" height="35%">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="任务名称" prop="taskDefinitionName">
<el-input v-model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
</el-form-item>
<el-form-item label="任务标识" prop="taskDefinitionKey">
<el-input v-model="formData.taskDefinitionKey" placeholder="请输入任务标识" disabled />
</el-form-item>
<el-form-item label="规则类型" prop="type">
<el-select v-model="formData.type" clearable style="width: 100%">
<el-option
v-for="dict in getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>
<el-form-item v-if="formData.type === 10" label="指定角色" prop="roleIds">
<el-select v-model="formData.roleIds" multiple clearable style="width: 100%">
<el-option
v-for="item in roleOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item
label="指定部门"
prop="deptIds"
span="24"
v-if="formData.type === 20 || formData.type === 21"
>
<el-tree-select
ref="treeRef"
v-model="formData.deptIds"
node-key="id"
show-checkbox
:props="defaultProps"
:data="deptTreeOptions"
empty-text="加载中，请稍后"
multiple
/>
</el-form-item>
<el-form-item label="指定岗位" prop="postIds" span="24" v-if="formData.type === 22">
<el-select v-model="formData.postIds" multiple clearable style="width: 100%">
<el-option
v-for="item in postOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item
label="指定用户"
prop="userIds"
span="24"
v-if="formData.type === 30 || formData.type === 31 || formData.type === 32"
>
<el-select v-model="formData.userIds" multiple clearable style="width: 100%">
<el-option
v-for="item in userOptions"
:key="parseInt(item.id)"
:label="item.nickname"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="指定用户组" prop="userGroupIds" v-if="formData.type === 40">
<el-select v-model="formData.userGroupIds" multiple clearable style="width: 100%">
<el-option
v-for="item in userGroupOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="指定脚本" prop="scripts" v-if="formData.type === 50">
<el-select v-model="formData.scripts" multiple clearable style="width: 100%">
<el-option
v-for="dict in taskAssignScriptDictDatas"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm"
/>
<!-- 按钮：关闭 -->
<XButton
:loading="actionLoading"
:title="t('dialog.close')"
@click="dialogVisible = false"
/>
</template>
</XModal>
</ContentWrap>
</template>
<script setup lang="ts" name="TaskAssignRule">
// 全局相关的 import
import { FormInstance } from 'element-plus'
// 业务相关的 import
import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
import { listSimpleRolesApi } from '@/api/system/role'
import { listSimplePostsApi } from '@/api/system/post'
import { getListSimpleUsersApi } from '@/api/system/user'
import { listSimpleUserGroupsApi } from '@/api/bpm/userGroup'
import { listSimpleDeptApi } from '@/api/system/dept'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { handleTree, defaultProps } from '@/utils/tree'
import { allSchemas, rules } from './taskAssignRule.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
// ========== 列表相关 ==========
const roleOptions = ref() // 角色列表
const deptOptions = ref() // 部门列表
const deptTreeOptions = ref()
const postOptions = ref() // 岗位列表
const userOptions = ref() // 用户列表
const userGroupOptions = ref() // 用户组列表
const taskAssignScriptDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
// 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
const modelId = query.modelId
// 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
const processDefinitionId = query.processDefinitionId
// 查询参数
const queryParams = reactive({
modelId: modelId,
processDefinitionId: processDefinitionId
})
const [registerTable, { reload }] = useXTable({
allSchemas: allSchemas,
params: queryParams,
getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
isList: true
})
// 翻译规则范围
const getAssignRuleOptionName = (type, option) => {
if (type === 10) {
for (const roleOption of roleOptions.value) {
if (roleOption.id === option) {
return roleOption.name
}
}
} else if (type === 20 || type === 21) {
for (const deptOption of deptOptions.value) {
if (deptOption.id === option) {
return deptOption.name
}
}
} else if (type === 22) {
for (const postOption of postOptions.value) {
if (postOption.id === option) {
return postOption.name
}
}
} else if (type === 30 || type === 31 || type === 32) {
for (const userOption of userOptions.value) {
if (userOption.id === option) {
return userOption.nickname
}
}
} else if (type === 40) {
for (const userGroupOption of userGroupOptions.value) {
if (userGroupOption.id === option) {
return userGroupOption.name
}
}
} else if (type === 50) {
option = option + '' // 转换成 string
for (const dictData of taskAssignScriptDictDatas) {
if (dictData.value === option) {
return dictData.label
}
}
}
return '未知(' + option + ')'
}
// ========== 修改相关 ==========
// 修改任务责任表单
const actionLoading = ref(false) // 遮罩层
const dialogVisible = ref(false) // 是否显示弹出层
const formRef = ref<FormInstance>()
const formData = ref() // 表单数据
// 提交按钮
const submitForm = async () => {
// 参数校验
const elForm = unref(formRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 构建表单
let form = {
...formData.value,
taskDefinitionName: undefined
}
// 将 roleIds 等选项赋值到 options 中
if (form.type === 10) {
form.options = form.roleIds
} else if (form.type === 20 || form.type === 21) {
form.options = form.deptIds
} else if (form.type === 22) {
form.options = form.postIds
} else if (form.type === 30 || form.type === 31 || form.type === 32) {
form.options = form.userIds
} else if (form.type === 40) {
form.options = form.userGroupIds
} else if (form.type === 50) {
form.options = form.scripts
}
form.roleIds = undefined
form.deptIds = undefined
form.postIds = undefined
form.userIds = undefined
form.userGroupIds = undefined
form.scripts = undefined
// 设置提交中
actionLoading.value = true
// 提交请求
try {
const data = form as TaskAssignRuleApi.TaskAssignVO
// 新增
if (!data.id) {
await TaskAssignRuleApi.createTaskAssignRule(data)
message.success(t('common.createSuccess'))
// 修改
} else {
await TaskAssignRuleApi.updateTaskAssignRule(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
// 刷新列表
await reload()
}
}
// 修改任务分配规则
const handleUpdate = (row) => {
// 1. 先重置表单
formData.value = {}
// 2. 再设置表单
formData.value = {
...row,
modelId: modelId,
options: [],
roleIds: [],
deptIds: [],
postIds: [],
userIds: [],
userGroupIds: [],
scripts: []
}
// 将 options 赋值到对应的 roleIds 等选项
if (row.type === 10) {
formData.value.roleIds.push(...row.options)
} else if (row.type === 20 || row.type === 21) {
formData.value.deptIds.push(...row.options)
} else if (row.type === 22) {
formData.value.postIds.push(...row.options)
} else if (row.type === 30 || row.type === 31 || row.type === 32) {
formData.value.userIds.push(...row.options)
} else if (row.type === 40) {
formData.value.userGroupIds.push(...row.options)
} else if (row.type === 50) {
formData.value.scripts.push(...row.options)
}
// 打开弹窗
dialogVisible.value = true
actionLoading.value = false
}
// ========== 初始化 ==========
onMounted(() => {
// 获得角色列表
roleOptions.value = []
listSimpleRolesApi().then((data) => {
roleOptions.value.push(...data)
})
// 获得部门列表
deptOptions.value = []
deptTreeOptions.value = []
listSimpleDeptApi().then((data) => {
deptOptions.value.push(...data)
deptTreeOptions.value.push(...handleTree(data, 'id'))
})
// 获得岗位列表
postOptions.value = []
listSimplePostsApi().then((data) => {
postOptions.value.push(...data)
})
// 获得用户列表
userOptions.value = []
getListSimpleUsersApi().then((data) => {
userOptions.value.push(...data)
})
// 获得用户组列表
userGroupOptions.value = []
listSimpleUserGroupsApi().then((data) => {
userGroupOptions.value.push(...data)
})
})
</script>

46
src/views/bpm/taskAssignRule/taskAssignRule.data.ts Normal file
View File

@ -0,0 +1,46 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// 表单校验
export const rules = reactive({
type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
actionWidth: '200px',
columns: [
{
title: '任务名',
field: 'taskDefinitionName'
},
{
title: '任务标识',
field: 'taskDefinitionKey'
},
{
title: '规则类型',
field: 'type',
dictType: DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE,
dictClass: 'number'
},
{
title: '规则范围',
field: 'options',
table: {
slots: {
default: 'options_default'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

73
src/views/infra/apiAccessLog/apiAccessLog.data.ts Normal file
View File

@ -0,0 +1,73 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '日志编号',
action: true,
actionWidth: '80px',
columns: [
{
title: '链路追踪',
field: 'traceId'
},
{
title: '用户编号',
field: 'userId',
isSearch: true
},
{
title: '用户类型',
field: 'userType',
dictType: DICT_TYPE.USER_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '应用名',
field: 'applicationName',
isSearch: true
},
{
title: '请求方法名',
field: 'requestMethod'
},
{
title: '请求地址',
field: 'requestUrl',
isSearch: true
},
{
title: '请求时间',
field: 'beginTime',
formatter: 'formatDate',
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '执行时长',
field: 'duration',
table: {
slots: {
default: 'duration_default'
}
}
},
{
title: '操作结果',
field: 'resultCode',
isSearch: true,
table: {
slots: {
default: 'resultCode_default'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

62
src/views/infra/apiAccessLog/index.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #duration_default="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</template>
<template #resultCode_default="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:api-access-log:query']"
@click="handleDetail(row)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
<template #duration="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</template>
<template #resultCode="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="ApiAccessLog">
import { allSchemas } from './apiAccessLog.data'
import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable] = useXTable({
allSchemas: allSchemas,
topActionSlots: false,
getListApi: ApiAccessLogApi.getApiAccessLogPageApi
})
// ========== 详情相关 ==========
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题
// 详情操作
const handleDetail = (row: ApiAccessLogApi.ApiAccessLogVO) => {
// 设置数据
detailData.value = row
dialogTitle.value = t('action.detail')
dialogVisible.value = true
}
</script>

76
src/views/infra/apiErrorLog/apiErrorLog.data.ts Normal file
View File

@ -0,0 +1,76 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '日志编号',
action: true,
actionWidth: '300',
columns: [
{
title: '链路追踪',
field: 'traceId',
isTable: false
},
{
title: '用户编号',
field: 'userId',
isSearch: true
},
{
title: '用户类型',
field: 'userType',
dictType: DICT_TYPE.USER_TYPE,
isSearch: true
},
{
title: '应用名',
field: 'applicationName',
isSearch: true
},
{
title: '请求方法名',
field: 'requestMethod'
},
{
title: '请求地址',
field: 'requestUrl',
isSearch: true
},
{
title: '异常发生时间',
field: 'exceptionTime',
formatter: 'formatDate',
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '异常名',
field: 'exceptionName'
},
{
title: '处理状态',
field: 'processStatus',
dictType: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '处理人',
field: 'processUserId',
isTable: false
},
{
title: '处理时间',
field: 'processTime',
formatter: 'formatDate',
isTable: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

99
src/views/infra/apiErrorLog/index.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作：导出 -->
<template #toolbar_buttons>
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
@click="exportList('错误数据.xls')"
/>
</template>
<template #duration_default="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</template>
<template #resultCode_default="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:api-access-log:query']"
@click="handleDetail(row)"
/>
<XTextButton
preIcon="ep:cpu"
title="已处理"
v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
v-hasPermi="['infra:api-error-log:update-status']"
@click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.DONE, '已处理')"
/>
<XTextButton
preIcon="ep:mute-notification"
title="已忽略"
v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
v-hasPermi="['infra:api-error-log:update-status']"
@click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
<!-- 操作按钮 -->
<template #footer>
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="ApiErrorLog">
import { allSchemas } from './apiErrorLog.data'
import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
const { t } = useI18n() // 国际化
const message = useMessage()
// ========== 列表相关 ==========
const [registerTable, { reload, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
exportListApi: ApiErrorLogApi.exportApiErrorLogApi
})
// ========== 详情相关 ==========
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题
// 详情操作
const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) => {
// 设置数据
detailData.value = row
dialogTitle.value = t('action.detail')
dialogVisible.value = true
}
// 异常处理操作
const handleProcessClick = (
row: ApiErrorLogApi.ApiErrorLogVO,
processSttatus: number,
type: string
) => {
message
.confirm('确认标记为' + type + '?', t('common.reminder'))
.then(async () => {
await ApiErrorLogApi.updateApiErrorLogPageApi(row.id, processSttatus)
message.success(t('common.updateSuccess'))
})
.finally(async () => {
// 刷新列表
await reload()
})
.catch(() => {})
}
</script>

115
src/views/infra/build/index.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<ContentWrap>
<el-row>
<el-col>
<div class="mb-2 float-right">
<el-button size="small" @click="setJson"> 导入JSON</el-button>
<el-button size="small" @click="setOption"> 导入Options</el-button>
<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
<el-button size="small" type="success" @click="showOption">生成Options</el-button>
<el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
<el-button size="small" @click="changeLocale">中英切换</el-button>
</div>
</el-col>
<el-col>
<fc-designer ref="designer" height="780px" />
</el-col>
</el-row>
<Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
<div ref="editor" v-if="dialogVisible">
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
<el-scrollbar height="580">
<pre>
{{ formValue }}
</pre>
</el-scrollbar>
</div>
<span style="color: red" v-if="err">输入内容格式有误!</span>
</Dialog>
</ContentWrap>
</template>
<script setup lang="ts" name="Build">
import formCreate from '@form-create/element-ui'
import { useClipboard } from '@vueuse/core'
const { t } = useI18n()
const message = useMessage()
const designer = ref()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const err = ref(false)
const type = ref(-1)
const formValue = ref('')
const openModel = (title: string) => {
dialogVisible.value = true
dialogTitle.value = title
}
const setJson = () => {
openModel('导入JSON--未实现')
}
const setOption = () => {
openModel('导入Options--未实现')
}
const showJson = () => {
openModel('生成JSON')
type.value = 0
formValue.value = designer.value.getRule()
}
const showOption = () => {
openModel('生成Options')
type.value = 1
formValue.value = designer.value.getOption()
}
const showTemplate = () => {
openModel('生成组件')
type.value = 2
formValue.value = makeTemplate()
}
const changeLocale = () => {
console.info('changeLocale')
}
/** 复制 **/
const copy = async (text: string) => {
const { copy, copied, isSupported } = useClipboard({ source: text })
if (!isSupported) {
message.error(t('common.copyError'))
} else {
await copy()
if (unref(copied)) {
message.success(t('common.copySuccess'))
}
}
}
const makeTemplate = () => {
const rule = designer.value.getRule()
const opt = designer.value.getOption()
return `<template>
<form-create
v-model="fapi"
:rule="rule"
:option="option"
@submit="onSubmit"
></form-create>
</template>
<script setup lang=ts>
import formCreate from "@form-create/element-ui";
const faps = ref(null)
const rule = ref('')
const option = ref('')
const init = () => {
rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
option.value = formCreate.parseJson('${JSON.stringify(opt)}')
}
const onSubmit = (formData) => {
//todo 提交表单
}
init()
<\/script>`
}
</script>

67
src/views/infra/codegen/EditTable.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<ContentWrap>
<ContentDetailWrap :title="title" @back="push('/infra/codegen')">
<el-tabs v-model="activeName">
<el-tab-pane label="基本信息" name="basicInfo">
<BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
</el-tab-pane>
<el-tab-pane label="字段信息" name="cloum">
<CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
</el-tab-pane>
</el-tabs>
<template #right>
<XButton
type="primary"
:title="t('action.save')"
:loading="loading"
@click="submitForm()"
/>
</template>
</ContentDetailWrap>
</ContentWrap>
</template>
<script setup lang="ts">
import { BasicInfoForm, CloumInfoForm } from './components'
import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen'
import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter()
const { query } = useRoute()
const loading = ref(false)
const title = ref('代码生成')
const activeName = ref('basicInfo')
const cloumInfoRef = ref(null)
const tableCurrentRow = ref<CodegenTableVO>()
const cloumCurrentRow = ref<CodegenColumnVO[]>([])
const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
const getList = async () => {
const id = query.id as unknown as number
if (id) {
// 获取表详细信息
const res = await getCodegenTableApi(id)
title.value = '修改[ ' + res.table.tableName + ' ]生成配置'
tableCurrentRow.value = res.table
cloumCurrentRow.value = res.columns
}
}
const submitForm = async () => {
const basicInfo = unref(basicInfoRef)
const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {})
if (basicForm) {
const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO
const genTable: CodegenUpdateReqVO = {
table: basicInfoData,
columns: cloumCurrentRow.value
}
await updateCodegenTableApi(genTable)
message.success(t('common.updateSuccess'))
push('/infra/codegen')
}
}
onMounted(() => {
getList()
})
</script>

53
src/views/infra/codegen/codegen.data.ts Normal file
View File

@ -0,0 +1,53 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
title: [required],
type: [required],
status: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
actionWidth: '400px',
columns: [
{
title: '表名称',
field: 'tableName',
isSearch: true
},
{
title: '表描述',
field: 'tableComment',
isSearch: true
},
{
title: '实体',
field: 'className',
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: t('common.updateTime'),
field: 'updateTime',
formatter: 'formatDate',
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

183
src/views/infra/codegen/components/BasicInfoForm.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<Form :rules="rules" @register="register" />
</template>
<script setup lang="ts">
import { useForm } from '@/hooks/web/useForm'
import { FormSchema } from '@/types/form'
import { CodegenTableVO } from '@/api/infra/codegen/types'
import { getIntDictOptions } from '@/utils/dict'
import { listSimpleMenusApi } from '@/api/system/menu'
import { handleTree, defaultProps } from '@/utils/tree'
import { PropType } from 'vue'
const props = defineProps({
basicInfo: {
type: Object as PropType<Nullable<CodegenTableVO>>,
default: () => null
}
})
const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
const menuOptions = ref<any>([]) // 树形结构
const getTree = async () => {
const res = await listSimpleMenusApi()
menuOptions.value = handleTree(res)
}
const rules = reactive({
tableName: [required],
tableComment: [required],
className: [required],
author: [required],
templateType: [required],
scene: [required],
moduleName: [required],
businessName: [required],
businessPackage: [required],
classComment: [required]
})
const schema = reactive<FormSchema[]>([
{
label: '上级菜单',
field: 'parentMenuId',
component: 'TreeSelect',
componentProps: {
data: menuOptions,
props: defaultProps,
checkStrictly: true,
nodeKey: 'id'
},
labelMessage: '分配到指定菜单下，例如 系统管理',
colProps: {
span: 24
}
},
{
label: '表名称',
field: 'tableName',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '表描述',
field: 'tableComment',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '实体类名称',
field: 'className',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '类名称',
field: 'className',
component: 'Input',
labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
colProps: {
span: 12
}
},
{
label: '生成模板',
field: 'templateType',
component: 'Select',
componentProps: {
options: templateTypeOptions
},
colProps: {
span: 12
}
},
{
label: '生成场景',
field: 'scene',
component: 'Select',
componentProps: {
options: sceneOptions
},
colProps: {
span: 12
}
},
{
label: '模块名',
field: 'moduleName',
component: 'Input',
labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
colProps: {
span: 12
}
},
{
label: '业务名',
field: 'businessName',
component: 'Input',
labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
colProps: {
span: 12
}
},
{
label: '类描述',
field: 'classComment',
component: 'Input',
labelMessage: '用作类描述，例如 用户',
colProps: {
span: 12
}
},
{
label: '作者',
field: 'author',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '备注',
field: 'remark',
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
])
const { register, methods, elFormRef } = useForm({
schema
})
watch(
() => props.basicInfo,
(basicInfo) => {
if (!basicInfo) return
const { setValues } = methods
setValues(basicInfo)
},
{
deep: true,
immediate: true
}
)
// ========== 初始化 ==========
onMounted(async () => {
await getTree()
})
defineExpose({
elFormRef,
getFormData: methods.getFormData
})
</script>

137
src/views/infra/codegen/components/CloumInfoForm.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<vxe-table
ref="dragTable"
border
:data="info"
max-height="600"
stripe
class="xtable-scrollbar"
:column-config="{ resizable: true }"
>
<vxe-column title="字段列名" field="columnName" fixed="left" width="10%" />
<vxe-colgroup title="基础属性">
<vxe-column title="字段描述" field="columnComment" width="10%">
<template #default="{ row }">
<vxe-input v-model="row.columnComment" placeholder="请输入字段描述" />
</template>
</vxe-column>
<vxe-column title="物理类型" field="dataType" width="10%" />
<vxe-column title="Java类型" width="10%" field="javaType">
<template #default="{ row }">
<vxe-select v-model="row.javaType" placeholder="请选择Java类型">
<vxe-option label="Long" value="Long" />
<vxe-option label="String" value="String" />
<vxe-option label="Integer" value="Integer" />
<vxe-option label="Double" value="Double" />
<vxe-option label="BigDecimal" value="BigDecimal" />
<vxe-option label="LocalDateTime" value="LocalDateTime" />
<vxe-option label="Boolean" value="Boolean" />
</vxe-select>
</template>
</vxe-column>
<vxe-column title="java属性" width="8%" field="javaField">
<template #default="{ row }">
<vxe-input v-model="row.javaField" placeholder="请输入java属性" />
</template>
</vxe-column>
</vxe-colgroup>
<vxe-colgroup title="增删改查">
<vxe-column title="插入" width="40px" field="createOperation">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
</template>
</vxe-column>
<vxe-column title="编辑" width="40px" field="updateOperation">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
</template>
</vxe-column>
<vxe-column title="列表" width="40px" field="listOperationResult">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
</template>
</vxe-column>
<vxe-column title="查询" width="40px" field="listOperation">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
</template>
</vxe-column>
<vxe-column title="允许空" width="40px" field="nullable">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
</template>
</vxe-column>
<vxe-column title="查询方式" width="60px" field="listOperationCondition">
<template #default="{ row }">
<vxe-select v-model="row.listOperationCondition" placeholder="请选择查询方式">
<vxe-option label="=" value="=" />
<vxe-option label="!=" value="!=" />
<vxe-option label=">" value=">" />
<vxe-option label=">=" value=">=" />
<vxe-option label="<" value="<>" />
<vxe-option label="<=" value="<=" />
<vxe-option label="LIKE" value="LIKE" />
<vxe-option label="BETWEEN" value="BETWEEN" />
</vxe-select>
</template>
</vxe-column>
</vxe-colgroup>
<vxe-column title="显示类型" width="10%" field="htmlType">
<template #default="{ row }">
<vxe-select v-model="row.htmlType" placeholder="请选择显示类型">
<vxe-option label="文本框" value="input" />
<vxe-option label="文本域" value="textarea" />
<vxe-option label="下拉框" value="select" />
<vxe-option label="单选框" value="radio" />
<vxe-option label="复选框" value="checkbox" />
<vxe-option label="日期控件" value="datetime" />
<vxe-option label="图片上传" value="imageUpload" />
<vxe-option label="文件上传" value="fileUpload" />
<vxe-option label="富文本控件" value="editor" />
</vxe-select>
</template>
</vxe-column>
<vxe-column title="字典类型" width="10%" field="dictType">
<template #default="{ row }">
<vxe-select v-model="row.dictType" clearable filterable placeholder="请选择字典类型">
<vxe-option
v-for="dict in dictOptions"
:key="dict.id"
:label="dict.name"
:value="dict.type"
/>
</vxe-select>
</template>
</vxe-column>
<vxe-column title="示例" field="example">
<template #default="{ row }">
<vxe-input v-model="row.example" placeholder="请输入示例" />
</template>
</vxe-column>
</vxe-table>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { DictTypeVO } from '@/api/system/dict/types'
import { CodegenColumnVO } from '@/api/infra/codegen/types'
import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
const props = defineProps({
info: {
type: Array as unknown as PropType<CodegenColumnVO[]>,
default: () => null
}
})
/** 查询字典下拉列表 */
const dictOptions = ref<DictTypeVO[]>()
const getDictOptions = async () => {
const res = await listSimpleDictTypeApi()
dictOptions.value = res
}
onMounted(async () => {
await getDictOptions()
})
defineExpose({
info: props.info
})
</script>

125
src/views/infra/codegen/components/ImportTable.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<!-- 导入表 -->
<XModal title="导入表" v-model="visible">
<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="数据源" prop="dataSourceConfigId">
<el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable>
<el-option
v-for="config in dataSourceConfigs"
:key="config.id"
:label="config.name"
:value="config.id"
/>
</el-select>
</el-form-item>
<el-form-item label="表名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入表名称" clearable />
</el-form-item>
<el-form-item label="表描述" prop="comment">
<el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable />
</el-form-item>
<el-form-item>
<XButton
type="primary"
preIcon="ep:search"
:title="t('common.query')"
@click="handleQuery()"
/>
<XButton preIcon="ep:refresh-right" :title="t('common.reset')" @click="resetQuery()" />
</el-form-item>
</el-form>
<vxe-table
ref="xTable"
:data="dbTableList"
v-loading="dbLoading"
:checkbox-config="{ highlight: true, range: true }"
height="260px"
class="xtable-scrollbar"
>
<vxe-column type="checkbox" width="60" />
<vxe-column field="name" title="表名称" />
<vxe-column field="comment" title="表描述" />
</vxe-table>
<template #footer>
<div class="dialog-footer">
<XButton type="primary" :title="t('action.import')" @click="handleImportTable()" />
<XButton :title="t('dialog.close')" @click="handleClose()" />
</div>
</template>
</XModal>
</template>
<script setup lang="ts">
import { VxeTableInstance } from 'vxe-table'
import type { DatabaseTableVO } from '@/api/infra/codegen/types'
import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const emit = defineEmits(['ok'])
// ======== 显示页面 ========
const visible = ref(false)
const dbLoading = ref(true)
const queryParams = reactive({
name: undefined,
comment: undefined,
dataSourceConfigId: 0
})
const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
const show = async () => {
const res = await getDataSourceConfigListApi()
dataSourceConfigs.value = res
queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id
visible.value = true
await getList()
}
/** 查询表数据 */
const dbTableList = ref<DatabaseTableVO[]>([])
/** 查询表数据 */
const getList = async () => {
dbLoading.value = true
const res = await getSchemaTableListApi(queryParams)
dbTableList.value = res
dbLoading.value = false
}
// 查询操作
const handleQuery = async () => {
await getList()
}
// 重置操作
const resetQuery = async () => {
queryParams.name = undefined
queryParams.comment = undefined
queryParams.dataSourceConfigId = 0
await getList()
}
const xTable = ref<VxeTableInstance>()
/** 多选框选中数据 */
const tables = ref<string[]>([])
/** 导入按钮操作 */
const handleImportTable = async () => {
if (xTable.value?.getCheckboxRecords().length === 0) {
message.error('请选择要导入的表')
return
}
xTable.value?.getCheckboxRecords().forEach((item) => {
tables.value.push(item.name)
})
await createCodegenListApi({
dataSourceConfigId: queryParams.dataSourceConfigId,
tableNames: tables.value
})
message.success('导入成功')
emit('ok')
handleClose()
}
const handleClose = () => {
visible.value = false
tables.value = []
}
defineExpose({
show
})
</script>

145
src/views/infra/codegen/components/Preview.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<XModal title="预览" v-model="preview.open">
<div class="flex">
<el-card class="w-1/4" :gutter="12" shadow="hover">
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-tree
ref="treeRef"
node-key="id"
:data="preview.fileTree"
:expand-on-click-node="false"
highlight-current
@node-click="handleNodeClick"
/>
</el-scrollbar>
</el-card>
<el-card class="w-3/4 ml-3" :gutter="12" shadow="hover">
<el-tabs v-model="preview.activeName">
<el-tab-pane
v-for="item in previewCodegen"
:label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
:name="item.filePath"
:key="item.filePath"
>
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(item.code)" />
<pre>{{ item.code }}</pre>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</XModal>
</template>
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { handleTree2 } from '@/utils/tree'
import { previewCodegenApi } from '@/api/infra/codegen'
import { CodegenTableVO, CodegenPreviewVO } from '@/api/infra/codegen/types'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// ======== 显示页面 ========
const preview = reactive({
open: false,
titel: '代码预览',
fileTree: [],
activeName: ''
})
const previewCodegen = ref<CodegenPreviewVO[]>()
const show = async (row: CodegenTableVO) => {
const res = await previewCodegenApi(row.id)
let file = handleFiles(res)
previewCodegen.value = res
preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
preview.activeName = res[0].filePath
preview.open = true
}
const handleNodeClick = async (data, node) => {
if (node && !node.isLeaf) {
return false
}
preview.activeName = data.id
}
/** 生成 files 目录 **/
interface filesType {
id: string
label: string
parentId: string
}
const handleFiles = (datas: CodegenPreviewVO[]) => {
let exists = {} // key：file 的 id；value：true
let files: filesType[] = []
// 遍历每个元素
for (const data of datas) {
let paths = data.filePath.split('/')
let fullPath = '' // 从头开始的路径，用于生成 id
// 特殊处理 java 文件
if (paths[paths.length - 1].indexOf('.java') >= 0) {
let 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 中，则跳过
let 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
}
/** 复制 **/
const copy = async (text: string) => {
const { copy, copied, isSupported } = useClipboard({ source: text })
if (!isSupported) {
message.error(t('common.copyError'))
} else {
await copy()
if (unref(copied)) {
message.success(t('common.copySuccess'))
}
}
}
defineExpose({
show
})
</script>

5
src/views/infra/codegen/components/index.ts Normal file
View File

@ -0,0 +1,5 @@
import BasicInfoForm from './BasicInfoForm.vue'
import CloumInfoForm from './CloumInfoForm.vue'
import ImportTable from './ImportTable.vue'
import Preview from './Preview.vue'
export { BasicInfoForm, CloumInfoForm, ImportTable, Preview }

107
src/views/infra/codegen/index.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：导入 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.import')"
v-hasPermi="['infra:codegen:create']"
@click="openImportTable()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：预览 -->
<XTextButton
preIcon="ep:view"
:title="t('action.preview')"
v-hasPermi="['infra:codegen:query']"
@click="handlePreview(row)"
/>
<!-- 操作：编辑 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:codegen:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:codegen:delete']"
@click="deleteData(row.id)"
/>
<!-- 操作：同步 -->
<XTextButton
preIcon="ep:refresh"
:title="t('action.sync')"
v-hasPermi="['infra:codegen:update']"
@click="handleSynchDb(row)"
/>
<!-- 操作：生成 -->
<XTextButton
preIcon="ep:download"
:title="t('action.generate')"
v-hasPermi="['infra:codegen:download']"
@click="handleGenTable(row)"
/>
</template>
</XTable>
</ContentWrap>
<!-- 弹窗：导入表 -->
<ImportTable ref="importRef" @ok="reload()" />
<!-- 弹窗：预览代码 -->
<Preview ref="previewRef" />
</template>
<script setup lang="ts" name="Codegen">
import download from '@/utils/download'
import * as CodegenApi from '@/api/infra/codegen'
import { CodegenTableVO } from '@/api/infra/codegen/types'
import { allSchemas } from './codegen.data'
import { ImportTable, Preview } from './components'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由跳转
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: CodegenApi.getCodegenTablePageApi,
deleteApi: CodegenApi.deleteCodegenTableApi
})
// 导入操作
const importRef = ref()
const openImportTable = () => {
importRef.value.show()
}
// 预览操作
const previewRef = ref()
const handlePreview = (row: CodegenTableVO) => {
previewRef.value.show(row)
}
// 编辑操作
const handleUpdate = (rowId: number) => {
push('/codegen/edit?id=' + rowId)
}
// 同步操作
const handleSynchDb = (row: CodegenTableVO) => {
// 基于 DB 同步
const tableName = row.tableName
message
.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
.then(async () => {
await CodegenApi.syncCodegenFromDBApi(row.id)
message.success('同步成功')
})
}
// 生成代码操作
const handleGenTable = async (row: CodegenTableVO) => {
const res = await CodegenApi.downloadCodegenApi(row.id)
download.zip(res, 'codegen-' + row.className + '.zip')
}
</script>

90
src/views/infra/config/config.data.ts Normal file
View File

@ -0,0 +1,90 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
category: [required],
name: [required],
key: [required],
value: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '参数分类',
field: 'category'
},
{
title: '参数名称',
field: 'name',
isSearch: true
},
{
title: '参数键名',
field: 'key',
isSearch: true
},
{
title: '参数键值',
field: 'value'
},
{
title: '系统内置',
field: 'type',
dictType: DICT_TYPE.INFRA_CONFIG_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '是否可见',
field: 'visible',
table: {
slots: {
default: 'visible_default'
}
},
form: {
component: 'RadioButton',
componentProps: {
options: [
{ label: '是', value: true },
{ label: '否', value: false }
]
}
}
},
{
title: t('form.remark'),
field: 'remark',
isTable: false,
form: {
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

162
src/views/infra/config/index.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['infra:config:create']"
@click="handleCreate()"
/>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['infra:config:export']"
@click="exportList('配置.xls')"
/>
</template>
<template #visible_default="{ row }">
<span>{{ row.visible ? '是' : '否' }} </span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:config:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:config:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:config:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #visible="{ row }">
<span>{{ row.visible ? '是' : '否' }} </span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Config">
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as ConfigApi from '@/api/infra/config'
import { rules, allSchemas } from './config.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: ConfigApi.getConfigPageApi,
deleteApi: ConfigApi.deleteConfigApi,
exportListApi: ConfigApi.exportConfigApi
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await ConfigApi.getConfigApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
const res = await ConfigApi.getConfigApi(rowId)
detailData.value = res
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as ConfigApi.ConfigVO
if (actionType.value === 'create') {
await ConfigApi.createConfigApi(data)
message.success(t('common.createSuccess'))
} else {
await ConfigApi.updateConfigApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
// 刷新列表
await reload()
}
}
})
}
</script>

52
src/views/infra/dataSourceConfig/dataSourceConfig.data.ts Normal file
View File

@ -0,0 +1,52 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// 国际化
const { t } = useI18n()
// 表单校验
export const rules = reactive({
name: [required],
url: [required],
username: [required],
password: [required]
})
// 新增 + 修改
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
columns: [
{
title: '数据源名称',
field: 'name'
},
{
title: '数据源连接',
field: 'url',
form: {
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
},
{
title: '用户名',
field: 'username'
},
{
title: '密码',
field: 'password',
isTable: false
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

145
src/views/infra/dataSourceConfig/index.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['infra:data-source-config:create']"
@click="handleCreate()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:data-source-config:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:data-source-config:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:data-source-config:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="loading"
@click="submitForm()"
/>
<!-- 按钮：关闭 -->
<XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="DataSourceConfig">
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig'
import { rules, allSchemas } from './dataSourceConfig.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
isList: true,
getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
deleteApi: DataSourceConfiggApi.deleteDataSourceConfigApi
})
// ========== CRUD 相关 ==========
const loading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
// 设置数据
const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
detailData.value = res
setDialogTile('detail')
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
loading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as DataSourceConfiggApi.DataSourceConfigVO
if (actionType.value === 'create') {
await DataSourceConfiggApi.createDataSourceConfigApi(data)
message.success(t('common.createSuccess'))
} else {
await DataSourceConfiggApi.updateDataSourceConfigApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
loading.value = false
// 刷新列表
await reload()
}
}
})
}
</script>

61
src/views/infra/dbDoc/index.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<ContentWrap title="数据库文档">
<!-- 操作工具栏 -->
<div class="mb-10px">
<XButton
type="primary"
preIcon="ep:download"
:title="t('action.export') + ' HTML'"
@click="handleExport('HTML')"
/>
<XButton
type="primary"
preIcon="ep:download"
:title="t('action.export') + ' Word'"
@click="handleExport('Word')"
/>
<XButton
type="primary"
preIcon="ep:download"
:title="t('action.export') + ' Markdown'"
@click="handleExport('Markdown')"
/>
</div>
<IFrame v-if="!loding" v-loading="loding" :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="DbDoc">
import download from '@/utils/download'
import * as DbDocApi from '@/api/infra/dbDoc'
const { t } = useI18n() // 国际化
const src = ref('')
const loding = ref(true)
/** 页面加载 */
const init = async () => {
const res = await DbDocApi.exportHtmlApi()
let blob = new Blob([res], { type: 'text/html' })
let blobUrl = window.URL.createObjectURL(blob)
src.value = blobUrl
loding.value = false
}
/** 处理导出 */
const handleExport = async (type: string) => {
if (type === 'HTML') {
const res = await DbDocApi.exportHtmlApi()
download.html(res, '数据库文档.html')
}
if (type === 'Word') {
const res = await DbDocApi.exportWordApi()
download.word(res, '数据库文档.doc')
}
if (type === 'Markdown') {
const res = await DbDocApi.exportMarkdownApi()
download.markdown(res, '数据库文档.md')
}
}
onMounted(async () => {
await init()
})
</script>

9
src/views/infra/druid/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<ContentWrap>
<IFrame :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="Druid">
const BASE_URL = import.meta.env.VITE_BASE_URL
const src = ref(BASE_URL + '/druid/index.html')
</script>

77
src/views/infra/fileConfig/fileConfig.data.ts Normal file
View File

@ -0,0 +1,77 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
storage: [required],
config: {
basePath: [required],
host: [required],
port: [required],
username: [required],
password: [required],
mode: [required],
endpoint: [required],
bucket: [required],
accessKey: [required],
accessSecret: [required],
domain: [required]
}
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '配置编号',
action: true,
actionWidth: '400px',
columns: [
{
title: '配置名',
field: 'name',
isSearch: true
},
{
title: '存储器',
field: 'storage',
dictType: DICT_TYPE.INFRA_FILE_STORAGE,
dictClass: 'number',
isSearch: true
},
{
title: '主配置',
field: 'master',
dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
dictClass: 'boolean'
},
{
title: t('form.remark'),
field: 'remark',
form: {
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

294
src/views/infra/fileConfig/index.vue Normal file
View File

@ -0,0 +1,294 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['infra:file-config:create']"
@click="handleCreate(formRef)"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：编辑 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:file-config:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:file-config:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：主配置 -->
<XTextButton
preIcon="ep:flag"
title="主配置"
v-hasPermi="['infra:file-config:update']"
@click="handleMaster(row)"
/>
<!-- 操作：测试 -->
<XTextButton preIcon="ep:share" :title="t('action.test')" @click="handleTest(row.id)" />
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:file-config:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<el-form
ref="formRef"
v-if="['create', 'update'].includes(actionType)"
:model="form"
:rules="rules"
label-width="120px"
>
<el-form-item label="配置名" prop="name">
<el-input v-model="form.name" placeholder="请输入配置名" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="存储器" prop="storage">
<el-select v-model="form.storage" placeholder="请选择存储器" :disabled="form.id !== 0">
<el-option
v-for="(dict, index) in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
:key="index"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- DB -->
<!-- Local / FTP / SFTP -->
<el-form-item
v-if="form.storage >= 10 && form.storage <= 12"
label="基础路径"
prop="config.basePath"
>
<el-input v-model="form.config.basePath" placeholder="请输入基础路径" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="主机地址"
prop="config.host"
>
<el-input v-model="form.config.host" placeholder="请输入主机地址" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="主机端口"
prop="config.port"
>
<el-input-number :min="0" v-model="form.config.port" placeholder="请输入主机端口" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="用户名"
prop="config.username"
>
<el-input v-model="form.config.username" placeholder="请输入密码" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="密码"
prop="config.password"
>
<el-input v-model="form.config.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item v-if="form.storage === 11" label="连接模式" prop="config.mode">
<el-radio-group v-model="form.config.mode">
<el-radio key="Active" label="Active">主动模式</el-radio>
<el-radio key="Passive" label="Passive">主动模式</el-radio>
</el-radio-group>
</el-form-item>
<!-- S3 -->
<el-form-item v-if="form.storage === 20" label="节点地址" prop="config.endpoint">
<el-input v-model="form.config.endpoint" placeholder="请输入节点地址" />
</el-form-item>
<el-form-item v-if="form.storage === 20" label="存储 bucket" prop="config.bucket">
<el-input v-model="form.config.bucket" placeholder="请输入 bucket" />
</el-form-item>
<el-form-item v-if="form.storage === 20" label="accessKey" prop="config.accessKey">
<el-input v-model="form.config.accessKey" placeholder="请输入 accessKey" />
</el-form-item>
<el-form-item v-if="form.storage === 20" label="accessSecret" prop="config.accessSecret">
<el-input v-model="form.config.accessSecret" placeholder="请输入 accessSecret" />
</el-form-item>
<!-- 通用 -->
<el-form-item v-if="form.storage === 20" label="自定义域名">
<!-- 无需参数校验，所以去掉 prop -->
<el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
</el-form-item>
<el-form-item v-else-if="form.storage" label="自定义域名" prop="config.domain">
<el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
</el-form-item>
</el-form>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm(formRef)"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="FileConfig">
import type { FormInstance } from 'element-plus'
// 业务相关的 import
import * as FileConfigApi from '@/api/infra/fileConfig'
import { rules, allSchemas } from './fileConfig.data'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: FileConfigApi.getFileConfigPageApi,
deleteApi: FileConfigApi.deleteFileConfigApi
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormInstance>() // 表单 Ref
const detailData = ref() // 详情 Ref
const form = ref<FileConfigApi.FileConfigVO>({
id: 0,
name: '',
storage: 0,
master: false,
visible: false,
config: {
basePath: '',
host: '',
port: 0,
username: '',
password: '',
mode: '',
endpoint: '',
bucket: '',
accessKey: '',
accessSecret: '',
domain: ''
},
remark: '',
createTime: new Date()
})
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = (formEl: FormInstance | undefined) => {
setDialogTile('create')
formEl?.resetFields()
form.value = {
id: 0,
name: '',
storage: 0,
master: false,
visible: false,
config: {
basePath: '',
host: '',
port: 0,
username: '',
password: '',
mode: '',
endpoint: '',
bucket: '',
accessKey: '',
accessSecret: '',
domain: ''
},
remark: '',
createTime: new Date()
}
}
// 修改操作
const handleUpdate = async (rowId: number) => {
// 设置数据
const res = await FileConfigApi.getFileConfigApi(rowId)
form.value = res
setDialogTile('update')
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
// 设置数据
const res = await FileConfigApi.getFileConfigApi(rowId)
detailData.value = res
}
// 主配置操作
const handleMaster = (row: FileConfigApi.FileConfigVO) => {
message
.confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'))
.then(async () => {
await FileConfigApi.updateFileConfigMasterApi(row.id)
await reload()
})
}
const handleTest = async (rowId: number) => {
const res = await FileConfigApi.testFileConfigApi(rowId)
message.alert('测试通过，上传文件成功！访问地址：' + res)
}
// 提交按钮
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
if (actionType.value === 'create') {
await FileConfigApi.createFileConfigApi(form.value)
message.success(t('common.createSuccess'))
} else {
await FileConfigApi.updateFileConfigApi(form.value)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
await reload()
}
}
})
}
</script>

52
src/views/infra/fileList/fileList.data.ts Normal file
View File

@ -0,0 +1,52 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
columns: [
{
title: '文件名',
field: 'name'
},
{
title: '文件路径',
field: 'path',
isSearch: true
},
{
title: 'URL',
field: 'url',
table: {
cellRender: {
name: 'XPreview'
}
}
},
{
title: '文件大小',
field: 'size',
formatter: 'formatSize'
},
{
title: '文件类型',
field: 'type',
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

173
src/views/infra/fileList/index.vue Normal file
View File

@ -0,0 +1,173 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:upload"
title="上传文件"
@click="uploadDialogVisible = true"
/>
</template>
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:copy-document"
:title="t('common.copy')"
@click="handleCopy(row.url)"
/>
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:file:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
<template #url="{ row }">
<el-image
v-if="row.type === 'jpg' || 'png' || 'gif'"
style="width: 100px; height: 100px"
:src="row.url"
:key="row.url"
lazy
/>
<span>{{ row.url }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
<XModal v-model="uploadDialogVisible" :title="uploadDialogTitle">
<el-upload
ref="uploadRef"
:action="updateUrl + '?updateSupport=' + updateSupport"
:headers="uploadHeaders"
:drag="true"
:limit="1"
:multiple="true"
:show-file-list="true"
:disabled="uploadDisabled"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:on-success="handleFileSuccess"
:on-error="excelUploadError"
:auto-upload="false"
accept=".jpg, .png, .gif"
>
<Icon icon="ep:upload-filled" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip">请上传 .jpg, .png, .gif 标准格式文件</div>
</template>
</el-upload>
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="primary"
preIcon="ep:upload-filled"
:title="t('action.save')"
@click="submitFileForm()"
/>
<!-- 按钮：关闭 -->
<XButton :title="t('dialog.close')" @click="uploadDialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="FileList">
import type { UploadInstance, UploadRawFile } from 'element-plus'
// 业务相关的 import
import { allSchemas } from './fileList.data'
import * as FileApi from '@/api/infra/fileList'
import { getAccessToken, getTenantId } from '@/utils/auth'
import { useClipboard } from '@vueuse/core'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: FileApi.getFilePageApi,
deleteApi: FileApi.deleteFileApi
})
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题
const uploadDialogVisible = ref(false)
const uploadDialogTitle = ref('上传')
const updateSupport = ref(0)
const uploadDisabled = ref(false)
const uploadRef = ref<UploadInstance>()
let updateUrl = import.meta.env.VITE_UPLOAD_URL
const uploadHeaders = ref()
// 文件上传之前判断
const beforeUpload = (file: UploadRawFile) => {
const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
const isLt5M = file.size / 1024 / 1024 < 5
if (!isImg) message.error('上传文件只能是 jpeg / gif / png 格式!')
if (!isLt5M) message.error('上传文件大小不能超过 5MB!')
return isImg && isLt5M
}
// 处理上传的文件发生变化
// const handleFileChange = (uploadFile: UploadFile): void => {
// uploadRef.value.data.path = uploadFile.name
// }
// 文件上传
const submitFileForm = () => {
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
uploadDisabled.value = true
uploadRef.value!.submit()
}
// 文件上传成功
const handleFileSuccess = async (response: any): Promise<void> => {
if (response.code !== 0) {
message.error(response.msg)
return
}
message.success('上传成功')
uploadDialogVisible.value = false
uploadDisabled.value = false
await reload()
}
// 文件数超出提示
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
// 上传错误提示
const excelUploadError = (): void => {
message.error('导入数据失败，请您重新上传！')
}
// 详情操作
const handleDetail = (row: FileApi.FileVO) => {
// 设置数据
detailData.value = row
dialogTitle.value = t('action.detail')
dialogVisible.value = true
}
// ========== 复制相关 ==========
const handleCopy = async (text: string) => {
const { copy, copied, isSupported } = useClipboard({ source: text })
if (!isSupported) {
message.error(t('common.copyError'))
} else {
await copy()
if (unref(copied)) {
message.success(t('common.copySuccess'))
}
}
}
</script>

78
src/views/infra/job/JobLog.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['infra:job:export']"
@click="exportList('定时任务详情.xls')"
/>
</template>
<template #beginTime_default="{ row }">
<span>{{
dayjs(row.beginTime).format('YYYY-MM-DD HH:mm:ss') +
' ~ ' +
dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
}}</span>
</template>
<template #duration_default="{ row }">
<span>{{ row.duration + ' 毫秒' }}</span>
</template>
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:job:query']"
@click="handleDetail(row)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
<template #retryInterval="{ row }">
<span>{{ row.retryInterval + '毫秒' }} </span>
</template>
<template #monitorTimeout="{ row }">
<span>{{ row.monitorTimeout > 0 ? row.monitorTimeout + ' 毫秒' : '未开启' }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="JobLog">
import dayjs from 'dayjs'
import * as JobLogApi from '@/api/infra/jobLog'
import { allSchemas } from './jobLog.data'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: JobLogApi.getJobLogPageApi,
exportListApi: JobLogApi.exportJobLogApi
})
// ========== CRUD 相关 ==========
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题
// ========== 详情相关 ==========
const detailData = ref() // 详情 Ref
// 详情操作
const handleDetail = async (row: JobLogApi.JobLogVO) => {
// 设置数据
const res = JobLogApi.getJobLogApi(row.id)
detailData.value = res
dialogTitle.value = t('action.detail')
dialogVisible.value = true
}
</script>

302
src/views/infra/job/index.vue Normal file
View File

@ -0,0 +1,302 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['infra:job:create']"
@click="handleCreate()"
/>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['infra:job:export']"
@click="exportList('定时任务.xls')"
/>
<XButton
type="info"
preIcon="ep:zoom-in"
title="执行日志"
v-hasPermi="['infra:job:query']"
@click="handleJobLog()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:job:update']"
@click="handleUpdate(row.id)"
/>
<XTextButton
preIcon="ep:edit"
:title="row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停'"
v-hasPermi="['infra:job:update']"
@click="handleChangeStatus(row)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:job:delete']"
@click="deleteData(row.id)"
/>
<el-dropdown class="p-0.5" v-hasPermi="['infra:job:trigger', 'infra:job:query']">
<XTextButton :title="t('action.more')" postIcon="ep:arrow-down" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<!-- 操作：执行 -->
<XTextButton
preIcon="ep:view"
title="执行一次"
v-hasPermi="['infra:job:trigger']"
@click="handleRun(row)"
/>
</el-dropdown-item>
<el-dropdown-item>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:job:query']"
@click="handleDetail(row.id)"
/>
</el-dropdown-item>
<el-dropdown-item>
<!-- 操作：日志 -->
<XTextButton
preIcon="ep:view"
title="调度日志"
v-hasPermi="['infra:job:query']"
@click="handleJobLog(row.id)"
/>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
>
<template #cronExpression="form">
<Crontab v-model="form['cronExpression']" :shortcuts="shortcuts" />
</template>
</Form>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #retryInterval="{ row }">
<span>{{ row.retryInterval + '毫秒' }} </span>
</template>
<template #monitorTimeout="{ row }">
<span>{{ row.monitorTimeout > 0 ? row.monitorTimeout + ' 毫秒' : '未开启' }}</span>
</template>
<template #nextTimes>
<span>{{ Array.from(nextTimes, (x) => parseTime(x)).join('; ') }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Job">
import type { FormExpose } from '@/components/Form'
import * as JobApi from '@/api/infra/job'
import { rules, allSchemas } from './job.data'
import { InfraJobStatusEnum } from '@/utils/constants'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter()
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: JobApi.getJobPageApi,
deleteApi: JobApi.deleteJobApi,
exportListApi: JobApi.exportJobApi
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
const nextTimes = ref([])
const shortcuts = ref([
{
text: '每天8点和12点 (自定义追加)',
value: '0 0 8,12 * * ?'
}
])
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await JobApi.getJobApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
// 设置数据
const res = await JobApi.getJobApi(rowId)
detailData.value = res
// 后续执行时长
const jobNextTime = await JobApi.getJobNextTimesApi(rowId)
nextTimes.value = jobNextTime
setDialogTile('detail')
}
const parseTime = (time) => {
if (!time) {
return null
}
const format = '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time
.replace(new RegExp(/-/gm), '/')
.replace('T', ' ')
.replace(new RegExp(/\.[\d]{3}/gm), '')
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
const handleChangeStatus = async (row: JobApi.JobVO) => {
const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
const status =
row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP
message
.confirm('确认要' + text + '定时任务编号为"' + row.id + '"的数据项?', t('common.reminder'))
.then(async () => {
row.status =
row.status === InfraJobStatusEnum.NORMAL
? InfraJobStatusEnum.NORMAL
: InfraJobStatusEnum.STOP
await JobApi.updateJobStatusApi(row.id, status)
message.success(text + '成功')
await reload()
})
.catch(() => {
row.status =
row.status === InfraJobStatusEnum.NORMAL
? InfraJobStatusEnum.STOP
: InfraJobStatusEnum.NORMAL
})
}
// 执行日志
const handleJobLog = (rowId?: number) => {
if (rowId) {
push('/job/job-log?id=' + rowId)
} else {
push('/job/job-log')
}
}
// 执行一次
const handleRun = (row: JobApi.JobVO) => {
message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
await JobApi.runJobApi(row.id)
message.success('执行成功')
await reload()
})
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as JobApi.JobVO
if (actionType.value === 'create') {
await JobApi.createJobApi(data)
message.success(t('common.createSuccess'))
} else {
await JobApi.updateJobApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
await reload()
}
}
})
}
</script>

69
src/views/infra/job/job.data.ts Normal file
View File

@ -0,0 +1,69 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
handlerName: [required],
cronExpression: [required],
retryCount: [required],
retryInterval: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '任务编号',
action: true,
actionWidth: '280px',
columns: [
{
title: '任务名称',
field: 'name',
isSearch: true
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.INFRA_JOB_STATUS,
dictClass: 'number',
isForm: false,
isSearch: true
},
{
title: '处理器的名字',
field: 'handlerName',
isSearch: true
},
{
title: '处理器的参数',
field: 'handlerParam',
isTable: false
},
{
title: 'CRON 表达式',
field: 'cronExpression'
},
{
title: '后续执行时间',
field: 'nextTimes',
isTable: false,
isForm: false
},
{
title: '重试次数',
field: 'retryCount',
isTable: false
},
{
title: '重试间隔',
field: 'retryInterval',
isTable: false
},
{
title: '监控超时时间',
field: 'monitorTimeout',
isTable: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

75
src/views/infra/job/jobLog.data.ts Normal file
View File

@ -0,0 +1,75 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// 国际化
const { t } = useI18n()
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '日志编号',
action: true,
columns: [
{
title: '任务编号',
field: 'jobId',
isSearch: true
},
{
title: '处理器的名字',
field: 'handlerName',
isSearch: true
},
{
title: '处理器的参数',
field: 'handlerParam'
},
{
title: '第几次执行',
field: 'executeIndex'
},
{
title: '开始执行时间',
field: 'beginTime',
formatter: 'formatDate',
table: {
slots: {
default: 'beginTime_default'
}
},
search: {
show: true,
itemRender: {
name: 'XDataPicker'
}
}
},
{
title: '结束执行时间',
field: 'endTime',
formatter: 'formatDate',
isTable: false,
search: {
show: true,
itemRender: {
name: 'XDataPicker'
}
}
},
{
title: '执行时长',
field: 'duration',
table: {
slots: {
default: 'duration_default'
}
}
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.INFRA_JOB_LOG_STATUS,
dictClass: 'number',
isSearch: true
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

277
src/views/infra/redis/index.vue Normal file
View File

@ -0,0 +1,277 @@
<template>
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-row>
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-descriptions title="基本信息" :column="6" border>
<el-descriptions-item label="Redis版本 :">
{{ cache?.info?.redis_version }}
</el-descriptions-item>
<el-descriptions-item label="运行模式 :">
{{ cache?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
</el-descriptions-item>
<el-descriptions-item label="端口 :">
{{ cache?.info?.tcp_port }}
</el-descriptions-item>
<el-descriptions-item label="客户端数 :">
{{ cache?.info?.connected_clients }}
</el-descriptions-item>
<el-descriptions-item label="运行时间(天) :">
{{ cache?.info?.uptime_in_days }}
</el-descriptions-item>
<el-descriptions-item label="使用内存 :">
{{ cache?.info?.used_memory_human }}
</el-descriptions-item>
<el-descriptions-item label="使用CPU :">
{{ cache?.info ? parseFloat(cache?.info?.used_cpu_user_children).toFixed(2) : '' }}
</el-descriptions-item>
<el-descriptions-item label="内存配置 :">
{{ cache?.info?.maxmemory_human }}
</el-descriptions-item>
<el-descriptions-item label="AOF是否开启 :">
{{ cache?.info?.aof_enabled == '0' ? '否' : '是' }}
</el-descriptions-item>
<el-descriptions-item label="RDB是否成功 :">
{{ cache?.info?.rdb_last_bgsave_status }}
</el-descriptions-item>
<el-descriptions-item label="Key数量 :">
{{ cache?.dbSize }}
</el-descriptions-item>
<el-descriptions-item label="网络入口/出口 :">
{{ cache?.info?.instantaneous_input_kbps }}kps/
{{ cache?.info?.instantaneous_output_kbps }}kps
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
<el-col :span="12" class="mt-3">
<el-card :gutter="12" shadow="hover">
<div ref="commandStatsRef" class="h-88"></div>
</el-card>
</el-col>
<el-col :span="12" class="mt-3">
<el-card class="ml-3" :gutter="12" shadow="hover">
<div ref="usedmemory" class="h-88"></div>
</el-card>
</el-col>
</el-row>
<el-row class="mt-3">
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-table
v-loading="keyListLoad"
:data="keyList"
row-key="id"
@row-click="openKeyTemplate"
>
<el-table-column prop="keyTemplate" label="Key 模板" width="200" />
<el-table-column prop="keyType" label="Key 类型" width="100" />
<el-table-column prop="valueType" label="Value 类型" />
<el-table-column prop="timeoutType" label="超时时间" width="200">
<template #default="{ row }">
<DictTag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="row?.timeoutType" />
<span v-if="row?.timeout > 0">({{ row?.timeout / 1000 }} 秒)</span>
</template>
</el-table-column>
<el-table-column prop="memo" label="备注" />
</el-table>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
<XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
<el-row>
<el-col :span="14" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>键名列表</span>
</div>
</template>
<el-table :data="cacheKeys" style="width: 100%" @row-click="handleKeyValue">
<el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true">
<template #default="{ row }">
{{ row }}
</template>
</el-table-column>
<el-table-column label="操作" align="right" width="60">
<template #default="{ row }">
<XTextButton preIcon="ep:delete" @click="handleDeleteKey(row)" />
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="10" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>缓存内容</span>
<XTextButton
preIcon="ep:refresh"
title="清理全部"
@click="handleDeleteKeys(keyTemplate)"
class="float-right p-1"
/>
</div>
</template>
<el-descriptions :column="1">
<el-descriptions-item label="缓存键名:">{{ cacheForm.key }}</el-descriptions-item>
<el-descriptions-item label="缓存内容:">{{ cacheForm.value }}</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
</el-row>
</XModal>
</template>
<script setup lang="ts" name="Redis">
import * as echarts from 'echarts'
import { DICT_TYPE } from '@/utils/dict'
import * as RedisApi from '@/api/infra/redis'
import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const cache = ref<RedisMonitorInfoVO>()
const keyListLoad = ref(true)
const keyList = ref<RedisKeyInfo[]>([])
// 基本信息
const readRedisInfo = async () => {
const data = await RedisApi.getCacheApi()
cache.value = data
loadEchartOptions(data.commandStats)
const redisKeysInfo = await RedisApi.getKeyDefineListApi()
keyList.value = redisKeysInfo
keyListLoad.value = false //加载完成
}
// 图表
const commandStatsRef = ref<HTMLElement>()
const usedmemory = ref<HTMLDivElement>()
const loadEchartOptions = (stats) => {
const commandStats = [] as any[]
const nameList = [] as string[]
stats.forEach((row) => {
commandStats.push({
name: row.command,
value: row.calls
})
nameList.push(row.command)
})
const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
commandStatsInstance.setOption({
title: {
text: '命令统计',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 30,
top: 10,
bottom: 20,
data: nameList,
textStyle: {
color: '#a1a1a1'
}
},
series: [
{
name: '命令',
type: 'pie',
radius: [20, 120],
center: ['40%', '60%'],
data: commandStats,
roseType: 'radius',
label: {
show: true
},
emphasis: {
label: {
show: true
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
usedMemoryInstance.setOption({
title: {
text: '内存使用情况',
left: 'center'
},
tooltip: {
formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
},
series: [
{
name: '峰值',
type: 'gauge',
min: 0,
max: 100,
progress: {
show: true
},
detail: {
formatter: cache.value!.info.used_memory_human
},
data: [
{
value: parseFloat(cache.value!.info.used_memory_human),
name: '内存消耗'
}
]
}
]
})
}
const dialogVisible = ref(false)
const keyTemplate = ref('')
const cacheKeys = ref()
const cacheForm = ref<{
key: string
value: string
}>({
key: '',
value: ''
})
const openKeyTemplate = async (row: RedisKeyInfo) => {
keyTemplate.value = row.keyTemplate
cacheKeys.value = await RedisApi.getKeyListApi(row.keyTemplate)
dialogVisible.value = true
}
const handleDeleteKey = async (row) => {
RedisApi.deleteKeyApi(row)
message.success(t('common.delSuccess'))
}
const handleDeleteKeys = async (row) => {
RedisApi.deleteKeysApi(row)
message.success(t('common.delSuccess'))
}
const handleKeyValue = async (row) => {
const res = await RedisApi.getKeyValueApi(row)
cacheForm.value = res
}
onBeforeMount(() => {
readRedisInfo()
})
</script>
<style scoped>
.redis {
height: 600px;
max-height: 860px;
}
</style>

9
src/views/infra/server/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<ContentWrap>
<IFrame :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="Server">
const BASE_URL = import.meta.env.VITE_BASE_URL
const src = ref(BASE_URL + '/admin/applications')
</script>

8
src/views/infra/skywalking/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<ContentWrap>
<IFrame :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="Skywalking">
const src = ref('http://skywalking.shop.iocoder.cn')
</script>

10
src/views/infra/swagger/index.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<ContentWrap>
<IFrame :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="Swagger">
const BASE_URL = import.meta.env.VITE_BASE_URL
// const src = ref(BASE_URL + '/doc.html')
const src = ref(BASE_URL + '/swagger-ui')
</script>

4
src/views/infra/testDemo/index.vue Normal file
View File

@ -0,0 +1,4 @@
<template>
<div>index</div>
</template>
<script setup lang="ts" name="TestDome"></script>

116
src/views/infra/webSocket/index.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<div class="flex">
<el-card class="w-1/2" :gutter="12" shadow="always">
<template #header>
<div class="card-header">
<span>连接</span>
</div>
</template>
<div class="flex items-center">
<span class="text-lg font-medium mr-4"> 连接状态: </span>
<el-tag :color="getTagColor">{{ status }}</el-tag>
</div>
<hr class="my-4" />
<div class="flex">
<el-input v-model="server" disabled>
<template #prepend> 服务地址 </template>
</el-input>
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
{{ getIsOpen ? '关闭连接' : '开启连接' }}
</el-button>
</div>
<p class="text-lg font-medium mt-4">设置</p>
<hr class="my-4" />
<el-input
v-model="sendValue"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
:disabled="!getIsOpen"
clearable
/>
<el-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handlerSend">
发送
</el-button>
</el-card>
<el-card class="w-1/2" :gutter="12" shadow="always">
<template #header>
<div class="card-header">
<span>消息记录</span>
</div>
</template>
<div class="max-h-80 overflow-auto">
<ul>
<li v-for="item in getList" class="mt-2" :key="item.time">
<div class="flex items-center">
<span class="mr-2 text-primary font-medium">收到消息:</span>
<span>{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
<div>
{{ item.res }}
</div>
</li>
</ul>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { useUserStore } from '@/store/modules/user'
import { useWebSocket } from '@vueuse/core'
const userStore = useUserStore()
const sendValue = ref('')
const server = ref(
(import.meta.env.VITE_BASE_URL + '/websocket/message').replace('http', 'ws') +
'?userId=' +
userStore.getUser.id
)
const state = reactive({
recordList: [] as { id: number; time: number; res: string }[]
})
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(sendValue.value)
sendValue.value = ''
}
function toggle() {
if (getIsOpen.value) {
close()
} else {
open()
}
}
</script>

3
src/views/mp/account/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/autoReply/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/draft/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/freePublish/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/material/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/menu/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/message/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/mpuser/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

3
src/views/mp/statistics/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<span>开发中</span>
</template>

71
src/views/pay/app/app.data.ts Normal file
View File

@ -0,0 +1,71 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
status: [required],
payNotifyUrl: [required],
refundNotifyUrl: [required],
merchantId: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '编号',
action: true,
columns: [
{
title: '应用名',
field: 'name',
isSearch: true
},
{
title: '商户名称',
field: 'payMerchant',
isSearch: true
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '支付结果的回调地址',
field: 'payNotifyUrl',
isSearch: true
},
{
title: '退款结果的回调地址',
field: 'refundNotifyUrl',
isSearch: true
},
{
title: '商户名称',
field: 'merchantName',
isSearch: true
},
{
title: '备注',
field: 'remark',
isTable: false,
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

155
src/views/pay/app/index.vue Normal file
View File

@ -0,0 +1,155 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['pay:app:create']"
@click="handleCreate()"
/>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['pay:app:export']"
@click="exportList('应用信息.xls')"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['pay:app:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['pay:app:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['pay:app:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="App">
import type { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './app.data'
import * as AppApi from '@/api/pay/app'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: AppApi.getAppPageApi,
deleteApi: AppApi.deleteAppApi,
exportListApi: AppApi.exportAppApi
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await AppApi.getAppApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
const res = await AppApi.getAppApi(rowId)
detailData.value = res
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as AppApi.AppVO
if (actionType.value === 'create') {
await AppApi.createAppApi(data)
message.success(t('common.createSuccess'))
} else {
await AppApi.updateAppApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
// 刷新列表
await reload()
}
}
})
}
</script>

153
src/views/pay/merchant/index.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['pay:merchant:create']"
@click="handleCreate()"
/>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['pay:merchant:export']"
@click="exportList('商户列表.xls')"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['pay:merchant:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['pay:merchant:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['pay:merchant:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm()"
/>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Merchant">
import type { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './merchant.data'
import * as MerchantApi from '@/api/pay/merchant'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: MerchantApi.getMerchantPageApi,
deleteApi: MerchantApi.deleteMerchantApi,
exportListApi: MerchantApi.exportMerchantApi
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await MerchantApi.getMerchantApi(rowId)
unref(formRef)?.setValues(res)
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
const res = await MerchantApi.getMerchantApi(rowId)
detailData.value = res
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as MerchantApi.MerchantVO
if (actionType.value === 'create') {
await MerchantApi.createMerchantApi(data)
message.success(t('common.createSuccess'))
} else {
await MerchantApi.updateMerchantApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
// 刷新列表
await reload()
}
}
})
}
</script>

70
src/views/pay/merchant/merchant.data.ts Normal file
View File

@ -0,0 +1,70 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
no: [required],
name: [required],
shortName: [required],
status: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '商户编号',
action: true,
columns: [
{
title: '商户号',
field: 'no',
isSearch: true
},
{
title: '商户全称',
field: 'code',
isSearch: true
},
{
title: '商户简称',
field: 'shortName',
isSearch: true
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: t('form.remark'),
field: 'remark',
isTable: false,
form: {
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

79
src/views/pay/order/index.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['pay:order:create']"
@click="handleCreate()"
/>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['pay:order:export']"
@click="exportList('订单数据.xls')"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['pay:order:query']"
@click="handleDetail(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
<script setup lang="ts" name="Order">
import { allSchemas } from './order.data'
import * as OrderApi from '@/api/pay/order'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: OrderApi.getOrderPageApi,
exportListApi: OrderApi.exportOrderApi
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
}
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
const res = await OrderApi.getOrderApi(rowId)
detailData.value = res
}
</script>

152
src/views/pay/order/order.data.ts Normal file
View File

@ -0,0 +1,152 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
merchantId: [required],
appId: [required],
merchantOrderId: [required],
subject: [required],
body: [required],
notifyUrl: [required],
notifyStatus: [required],
amount: [required],
status: [required],
userIp: [required],
expireTime: [required],
refundStatus: [required],
refundTimes: [required],
refundAmount: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '岗位编号',
action: true,
columns: [
{
title: '商户编号',
field: 'merchantId',
isSearch: true
},
{
title: '应用编号',
field: 'appId',
isSearch: true
},
{
title: '渠道编号',
field: 'channelId'
},
{
title: '渠道编码',
field: 'channelCode',
isSearch: true
},
{
title: '渠道订单号',
field: 'merchantOrderId',
isSearch: true
},
{
title: '商品标题',
field: 'subject'
},
{
title: '商品描述',
field: 'body'
},
{
title: '异步通知地址',
field: 'notifyUrl'
},
{
title: '回调状态',
field: 'notifyStatus',
dictType: DICT_TYPE.PAY_ORDER_NOTIFY_STATUS,
dictClass: 'number'
},
{
title: '支付金额',
field: 'amount',
isSearch: true
},
{
title: '渠道手续费',
field: 'channelFeeRate',
isSearch: true
},
{
title: '渠道手续金额',
field: 'channelFeeAmount',
isSearch: true
},
{
title: '支付状态',
field: 'status',
dictType: DICT_TYPE.PAY_ORDER_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '用户 IP',
field: 'userIp'
},
{
title: '订单失效时间',
field: 'expireTime',
formatter: 'formatDate'
},
{
title: '支付时间',
field: 'successTime',
formatter: 'formatDate'
},
{
title: '支付通知时间',
field: 'notifyTime',
formatter: 'formatDate'
},
{
title: '拓展编号',
field: 'successExtensionId'
},
{
title: '退款状态',
field: 'refundStatus',
dictType: DICT_TYPE.PAY_ORDER_REFUND_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '退款次数',
field: 'refundTimes'
},
{
title: '退款总金额',
field: 'refundAmount'
},
{
title: '渠道用户编号',
field: 'channelUserId'
},
{
title: '渠道订单号',
field: 'channelOrderNo'
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

59
src/views/pay/refund/index.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作：导出 -->
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['pay:refund:export']"
@click="exportList('退款订单.xls')"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['pay:refund:query']"
@click="handleDetail(row.id)"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="t('action.detail')">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
<!-- 操作按钮 -->
<template #footer>
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
</template>
</XModal>
</template>
<script setup lang="ts" name="Refund">
import { allSchemas } from './refund.data'
import * as RefundApi from '@/api/pay/refund'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: RefundApi.getRefundPageApi,
exportListApi: RefundApi.exportRefundApi
})
// ========== CRUD 相关 ==========
const dialogVisible = ref(false) // 是否显示弹出层
const detailData = ref() // 详情 Ref
// 详情操作
const handleDetail = async (rowId: number) => {
// 设置数据
detailData.value = RefundApi.getRefundApi(rowId)
dialogVisible.value = true
}
</script>

173
src/views/pay/refund/refund.data.ts Normal file
View File

@ -0,0 +1,173 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
primaryTitle: '序号',
action: true,
columns: [
{
title: '商户编号',
field: 'merchantId',
isSearch: true
},
{
title: '应用编号',
field: 'appId',
isSearch: true
},
{
title: '渠道编号',
field: 'channelId',
isSearch: true
},
{
title: '渠道编码',
field: 'channelCode',
dictType: DICT_TYPE.PAY_CHANNEL_CODE_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '支付订单编号',
field: 'orderId',
isSearch: true
},
{
title: '交易订单号',
field: 'tradeNo',
isSearch: true
},
{
title: '商户订单号',
field: 'merchantOrderId',
isSearch: true
},
{
title: '商户退款单号',
field: 'merchantRefundNo',
isSearch: true
},
{
title: '回调地址',
field: 'notifyUrl',
isSearch: true
},
{
title: '回调状态',
field: 'notifyStatus',
dictType: DICT_TYPE.PAY_ORDER_NOTIFY_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '退款类型',
field: 'type',
dictType: DICT_TYPE.PAY_REFUND_ORDER_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.PAY_REFUND_ORDER_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '支付金额',
field: 'payAmount',
formatter: 'formatAmount',
isSearch: true
},
{
title: '退款金额',
field: 'refundAmount',
formatter: 'formatAmount',
isSearch: true
},
{
title: '退款原因',
field: 'reason',
isSearch: true
},
{
title: '用户IP',
field: 'userIp',
isSearch: true
},
{
title: '渠道订单号',
field: 'channelOrderNo',
isSearch: true
},
{
title: '渠道退款单号',
field: 'channelRefundNo',
isSearch: true
},
{
title: '渠道调用报错时',
field: 'channelErrorCode'
},
{
title: '渠道调用报错时',
field: 'channelErrorMsg'
},
{
title: '支付渠道的额外参数',
field: 'channelExtras'
},
{
title: '退款失效时间',
field: 'expireTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '退款成功时间',
field: 'successTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '退款通知时间',
field: 'notifyTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

8
src/views/report/goview/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<ContentWrap>
<IFrame :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="GoView">
const src = 'http://127.0.0.1:3000'
</script>

11
src/views/report/jmreport/index.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<ContentWrap>
<IFrame :src="src" />
</ContentWrap>
</template>
<script setup lang="ts" name="Jmreport">
import { getAccessToken } from '@/utils/auth'
const BASE_URL = import.meta.env.VITE_BASE_URL
const src = ref(BASE_URL + '/jmreport/list?token=' + getAccessToken())
</script>

Some files were not shown because too many files have changed in this diff Show More