refactor: job vxe

This commit is contained in:
xingyu4j 2022-11-22 17:07:30 +08:00
parent 562282b2ad
commit 92bcaa04d1
6 changed files with 402 additions and 446 deletions

View File

@ -1,5 +1,16 @@
import request from '@/config/axios'
import type { JobVO } from './types'
export type JobVO = {
id: number
name: string
status: number
handlerName: string
handlerParam: string
cronExpression: string
retryCount: number
retryInterval: number
monitorTimeout: number
}
// 任务列表
export const getJobPageApi = (params) => {

View File

@ -1,5 +1,19 @@
import request from '@/config/axios'
export type JobLogVO = {
id: number
jobId: number
handlerName: string
handlerParam: string
cronExpression: string
executeIndex: string
beginTime: string
endTime: string
duration: string
status: number
createTime: string
}
// 任务日志列表
export const getJobLogPageApi = (params) => {
return request.get({ url: '/infra/job-log/page', params })

View File

@ -1,99 +1,35 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import * as JobLogApi from '@/api/infra/jobLog'
import { JobLogVO } from '@/api/infra/jobLog/types'
import { DICT_TYPE } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { useRoute } from 'vue-router'
import { allSchemas } from './jobLog.data'
const { t } = useI18n() //
const { query } = useRoute()
// ========== ==========
const { register, tableObject, methods } = useTable<JobLogVO>({
getListApi: JobLogApi.getJobLogPageApi,
exportListApi: JobLogApi.exportJobLogApi
})
const { getList, setSearchParams, exportList } = methods
const getTableList = async () => {
const id = (query.id as unknown as number) && (query.jobId as unknown as number)
tableObject.params = {
jobId: id
}
await getList()
}
// ========== CRUD ==========
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
// ========== ==========
const detailRef = ref() // Ref
//
const handleDetail = async (row: JobLogVO) => {
//
const res = JobLogApi.getJobLogApi(row.id)
detailRef.value = res
dialogTitle.value = t('action.detail')
dialogVisible.value = true
}
// ========== ==========
onMounted(() => {
getTableList()
})
</script>
<template>
<!-- 搜索工作区 -->
<ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<ContentWrap>
<!-- 操作工具栏 -->
<div class="mb-10px">
<el-button
type="warning"
v-hasPermi="['infra:job:export']"
:loading="tableObject.exportLoading"
@click="exportList('定时任务日志.xls')"
>
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
</el-button>
</div>
<!-- 列表 -->
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #beginTime="{ row }">
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<template #toolbar_buttons>
<XButton
type="warning"
preIcon="ep:download"
:title="t('action.export')"
v-hasPermi="['infra:job:export']"
@click="handleExport()"
/>
</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="{ row }">
<template #duration_default="{ row }">
<span>{{ row.duration + ' 毫秒' }}</span>
</template>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="row.status" />
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:job:query']"
@click="handleDetail(row)"
/>
</template>
<template #action="{ row }">
<el-button link type="primary" v-hasPermi="['infra:job:query']" @click="handleDetail(row)">
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
</template>
</Table>
</vxe-grid>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
@ -111,3 +47,42 @@ onMounted(() => {
</template>
</XModal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import * as JobLogApi from '@/api/infra/jobLog'
import { JobLogVO } from '@/api/infra/jobLog/types'
import { allSchemas } from './jobLog.data'
const { t } = useI18n() //
//
const xGrid = ref<VxeGridInstance>() // Grid Ref
const { gridOptions, exportList } = useVxeGrid<JobLogApi.JobLogVO>({
allSchemas: allSchemas,
getListApi: JobLogApi.getJobLogPageApi,
exportListApi: JobLogApi.exportJobLogApi
})
// ========== CRUD ==========
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
// ========== ==========
const detailRef = ref() // Ref
//
const handleDetail = async (row: JobLogVO) => {
//
const res = JobLogApi.getJobLogApi(row.id)
detailRef.value = res
dialogTitle.value = t('action.detail')
dialogVisible.value = true
}
//
const handleExport = async () => {
await exportList(xGrid, '定时任务详情.xls')
}
</script>

View File

@ -1,184 +1,40 @@
<script setup lang="ts">
import { Crontab } from '@/components/Crontab'
import { ref, unref } from 'vue'
import * as JobApi from '@/api/infra/job'
import { JobVO } from '@/api/infra/job/types'
import { DICT_TYPE } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './job.data'
import { useRouter } from 'vue-router'
import { useMessage } from '@/hooks/web/useMessage'
import { InfraJobStatusEnum } from '@/utils/constants'
const message = useMessage()
const { t } = useI18n() //
const { push } = useRouter()
// ========== ==========
const { register, tableObject, methods } = useTable<JobVO>({
getListApi: JobApi.getJobPageApi,
delListApi: JobApi.deleteJobApi,
exportListApi: JobApi.exportJobApi
})
const { getList, setSearchParams, delList, exportList } = methods
// ========== CRUD ==========
const actionLoading = ref(false) //
const actionType = ref('') //
const dialogVisible = ref(false) //
const dialogTitle = ref('edit') //
const formRef = ref<FormExpose>() // Ref
const cronExpression = 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 = () => {
cronExpression.value = ''
setDialogTile('create')
}
//
const handleUpdate = async (row: JobVO) => {
setDialogTile('update')
//
const res = await JobApi.getJobApi(row.id)
cronExpression.value = res.cronExpression
unref(formRef)?.setValues(res)
}
const handleChangeStatus = async (row: 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 getList()
})
.catch(() => {
row.status =
row.status === InfraJobStatusEnum.NORMAL
? InfraJobStatusEnum.STOP
: InfraJobStatusEnum.NORMAL
})
}
//
const handleJobLog = (row: JobVO) => {
if (row.id) {
push('/job/job-log?id=' + row.id)
} else {
push('/job/job-log')
}
}
//
const handleRun = (row: JobVO) => {
message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
await JobApi.runJobApi(row.id)
message.success('执行成功')
getList()
})
}
//
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 JobVO
data.cronExpression = cronExpression.value
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
await getList()
} finally {
actionLoading.value = false
}
}
})
}
// ========== ==========
const detailRef = ref() // Ref
//
const handleDetail = async (row: JobVO) => {
//
const res = JobApi.getJobApi(row.id)
detailRef.value = res
setDialogTile('detail')
}
// ========== ==========
getList()
</script>
<template>
<!-- 搜索工作区 -->
<ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<ContentWrap>
<!-- 操作工具栏 -->
<div class="mb-10px">
<el-button type="primary" v-hasPermi="['infra:job:create']" @click="handleCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
<el-button
type="warning"
v-hasPermi="['infra:job:export']"
:loading="tableObject.exportLoading"
@click="exportList('定时任务.xls')"
>
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
</el-button>
<el-button type="info" v-hasPermi="['infra:job:query']" @click="handleJobLog">
<Icon icon="ep:zoom-in" class="mr-5px" /> 执行日志
</el-button>
</div>
<!-- 列表 -->
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="row.status" />
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<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="handleExport()"
/>
<XButton
type="info"
preIcon="ep:zoom-in"
title="执行日志"
v-hasPermi="['infra:job:query']"
@click="handleJobLog"
/>
</template>
<template #action="{ row }">
<el-button link type="primary" v-hasPermi="['infra:job:update']" @click="handleUpdate(row)">
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
<template #actionbtns_default="{ row }">
<!-- 操作修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:job:update']"
@click="handleUpdate(row.id)"
/>
<el-button
link
type="primary"
@ -188,25 +44,34 @@ getList()
<Icon icon="ep:edit" class="mr-1px" />
{{ row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停' }}
</el-button>
<el-button link type="primary" v-hasPermi="['infra:job:query']" @click="handleDetail(row)">
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
<el-button
link
type="primary"
<!-- 操作详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:job:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:job:delete']"
@click="delList(row.id, false)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
<el-button link type="primary" v-hasPermi="['infra:job:trigger']" @click="handleRun(row)">
<Icon icon="ep:view" class="mr-1px" /> 执行一次
</el-button>
<el-button link type="primary" v-hasPermi="['infra:job:query']" @click="handleJobLog(row)">
<Icon icon="ep:view" class="mr-1px" /> 调度日志
</el-button>
@click="handleDelete(row.id)"
/>
<XTextButton
preIcon="ep:view"
title="执行一次"
v-hasPermi="['infra:job:trigger']"
@click="handleRun(row)"
/>
<XTextButton
preIcon="ep:view"
title="调度日志"
v-hasPermi="['infra:job:query']"
@click="handleJobLog(row.id)"
/>
</template>
</Table>
</vxe-grid>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
@ -248,3 +113,145 @@ getList()
</template>
</XModal>
</template>
<script setup lang="ts">
import { ref, unref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form'
import { Crontab } from '@/components/Crontab'
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 xGrid = ref<VxeGridInstance>() // Grid Ref
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<JobApi.JobVO>({
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 detailRef = ref() // Ref
const cronExpression = 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 = () => {
cronExpression.value = ''
setDialogTile('create')
}
//
const handleExport = async () => {
await exportList(xGrid, '定时任务.xls')
}
//
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
//
const res = await JobApi.getJobApi(rowId)
cronExpression.value = res.cronExpression
unref(formRef)?.setValues(res)
}
//
const handleDetail = async (rowId: number) => {
//
const res = await JobApi.getJobApi(rowId)
detailRef.value = res
setDialogTile('detail')
}
//
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
}
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 getList(xGrid)
})
.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 getList(xGrid)
})
}
//
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
data.cronExpression = cronExpression.value
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 getList(xGrid)
}
}
})
}
</script>

View File

@ -2,9 +2,8 @@ import { reactive } from 'vue'
import { DICT_TYPE } from '@/utils/dict'
import { required } from '@/utils/formRules'
import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
// 国际化
const { t } = useI18n()
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
@ -14,87 +13,55 @@ export const rules = reactive({
retryInterval: [required]
})
// CrudSchema
const crudSchemas = reactive<CrudSchema[]>([
{
label: t('common.index'),
field: 'id',
type: 'index',
form: {
show: false
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
actionWidth: '500px',
columns: [
{
title: '任务名称',
field: 'name',
search: {
show: true
}
},
detail: {
show: false
}
},
{
label: '任务名称',
field: 'name',
search: {
show: true
}
},
{
label: t('common.status'),
field: 'status',
dictType: DICT_TYPE.INFRA_JOB_STATUS,
dictClass: 'number',
form: {
show: false
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.INFRA_JOB_STATUS,
dictClass: 'number',
isForm: false
},
detail: {
show: false
}
},
{
label: '处理器的名字',
field: 'handlerName',
search: {
show: true
}
},
{
label: '处理器的参数',
field: 'handlerParam',
table: {
show: false
}
},
{
label: 'CRON 表达式',
field: 'cronExpression'
},
{
label: '重试次数',
field: 'retryCount',
table: {
show: false
}
},
{
label: '重试间隔',
field: 'retryInterval',
table: {
show: false
}
},
{
label: '监控超时时间',
field: 'monitorTimeout',
table: {
show: false
}
},
{
field: 'action',
width: '500px',
label: t('table.action'),
form: {
show: false
{
title: '处理器的名字',
field: 'handlerName',
isSearch: true
},
detail: {
show: false
{
title: '处理器的参数',
field: 'handlerParam',
isTable: false
},
{
title: 'CRON 表达式',
field: 'cronExpression'
},
{
title: '重试次数',
field: 'retryCount',
isTable: false
},
{
title: '重试间隔',
field: 'retryInterval',
isTable: false
},
{
title: '监控超时时间',
field: 'monitorTimeout',
isTable: false
}
}
])
export const { allSchemas } = useCrudSchemas(crudSchemas)
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

View File

@ -1,95 +1,77 @@
import { reactive } from 'vue'
import { DICT_TYPE } from '@/utils/dict'
import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
// 国际化
const { t } = useI18n()
// CrudSchema
const crudSchemas = reactive<CrudSchema[]>([
{
label: t('common.index'),
field: 'id',
type: 'index',
form: {
show: false
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'seq',
action: true,
columns: [
{
title: '任务编号',
field: 'jobId',
isSearch: true
},
detail: {
show: false
}
},
{
label: '任务编号',
field: 'jobId',
search: {
show: true
}
},
{
label: '处理器的名字',
field: 'handlerName',
search: {
show: true
}
},
{
label: '处理器的参数',
field: 'handlerParam'
},
{
label: '第几次执行',
field: 'executeIndex'
},
{
label: '开始执行时间',
field: 'beginTime',
search: {
show: true,
component: 'DatePicker',
componentProps: {
type: 'date',
valueFormat: 'YYYY-MM-DD HH:mm:ss'
}
}
},
{
label: '结束执行时间',
field: 'endTime',
search: {
show: true,
component: 'DatePicker',
componentProps: {
type: 'date',
valueFormat: 'YYYY-MM-DD HH:mm:ss'
{
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: 'XDataTimePicker'
}
}
},
table: {
show: false
}
},
{
label: '执行时长',
field: 'duration'
},
{
label: t('common.status'),
field: 'status',
dictType: DICT_TYPE.INFRA_JOB_LOG_STATUS,
dictClass: 'number',
search: {
show: true
}
},
{
field: 'action',
width: '100px',
label: t('table.action'),
form: {
show: false
{
title: '结束执行时间',
field: 'endTime',
formatter: 'formatDate',
isTable: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
detail: {
show: false
{
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 } = useCrudSchemas(crudSchemas)
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)