REVIEW 定时任务(表单)

This commit is contained in:
YunaiV 2023-04-01 11:33:50 +08:00
parent f8878f7a76
commit eace25d3a2
3 changed files with 19 additions and 60 deletions

View File

@ -6,7 +6,10 @@ interface shortcutsType {
value: string value: string
} }
const props = defineProps({ const props = defineProps({
modelValue: { type: String, default: '* * * * * ?' }, modelValue: {
type: String,
default: '* * * * * ?'
},
shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] } shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] }
}) })
const defaultValue = ref('') const defaultValue = ref('')

View File

@ -1,5 +1,4 @@
<template> <template>
<!-- 添加或修改定时任务对话框 -->
<Dialog :title="modelTitle" v-model="modelVisible"> <Dialog :title="modelTitle" v-model="modelVisible">
<el-form <el-form
ref="formRef" ref="formRef"
@ -22,14 +21,7 @@
<el-input v-model="formData.handlerParam" placeholder="请输入处理器的参数" /> <el-input v-model="formData.handlerParam" placeholder="请输入处理器的参数" />
</el-form-item> </el-form-item>
<el-form-item label="CRON 表达式" prop="cronExpression"> <el-form-item label="CRON 表达式" prop="cronExpression">
<el-input v-model="formData.cronExpression" placeholder="请输入CRON 表达式"> <crontab v-model="formData.cronExpression" />
<template #append>
<el-button type="primary" @click="handleShowCron">
生成表达式
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="重试次数" prop="retryCount"> <el-form-item label="重试次数" prop="retryCount">
<el-input <el-input
@ -47,30 +39,14 @@
<el-input v-model="formData.monitorTimeout" placeholder="请输入监控超时时间,单位:毫秒" /> <el-input v-model="formData.monitorTimeout" placeholder="请输入监控超时时间,单位:毫秒" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 操作按钮 -->
<template #footer> <template #footer>
<!-- 按钮保存 -->
<div class="dialog-footer">
<el-button type="primary" @click="submitForm" :loading="formLoading"> </el-button> <el-button type="primary" @click="submitForm" :loading="formLoading"> </el-button>
<el-button @click="modelVisible = false"> </el-button> <el-button @click="modelVisible = false"> </el-button>
</div>
</template> </template>
</Dialog> </Dialog>
<el-dialog
title="Cron表达式生成器"
v-model="openCron"
append-to-body
class="scrollbar"
destroy-on-close
>
<crontab @hide="openCron = false" @fill="crontabFill" :expression="expression" />
</el-dialog>
</template> </template>
<script setup lang="ts" name="JobForm"> <script setup lang="ts" name="JobForm">
import * as JobApi from '@/api/infra/job' import * as JobApi from '@/api/infra/job'
const emit = defineEmits(['success', 'crontabFill']) // success
const { t } = useI18n() // const { t } = useI18n() //
const message = useMessage() // const message = useMessage() //
@ -78,25 +54,13 @@ const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // const modelTitle = ref('') //
const formLoading = ref(false) // 12 const formLoading = ref(false) // 12
const formType = ref('') // create - update - const formType = ref('') // create - update -
const defaultFormData = { const formData = ref({
id: undefined, id: undefined,
name: '', name: '',
status: 0,
handlerName: '', handlerName: '',
handlerParam: '', handlerParam: '',
cronExpression: '', cronExpression: ''
retryCount: 0, })
retryInterval: 0,
monitorTimeout: 0,
createTime: new Date()
}
const formData = ref({ ...defaultFormData })
// Cron
const openCron = ref(false)
//
const expression = ref('')
//
const formRules = reactive({ const formRules = reactive({
name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
handlerName: [{ required: true, message: '处理器的名字不能为空', trigger: 'blur' }], handlerName: [{ required: true, message: '处理器的名字不能为空', trigger: 'blur' }],
@ -124,20 +88,8 @@ const open = async (type: string, id?: number) => {
} }
defineExpose({ open }) // open defineExpose({ open }) // open
/** cron表达式按钮操作 */ /** 提交按钮 */
const handleShowCron = () => { const emit = defineEmits(['success']) // success
console.info(123333333333)
expression.value = formData.value.cronExpression
openCron.value = true
}
// cron
const crontabFill = (expression: string) => {
formData.value.cronExpression = expression
emit('crontabFill', expression)
}
//
const submitForm = async () => { const submitForm = async () => {
// //
if (!formRef) return if (!formRef) return
@ -165,7 +117,11 @@ const submitForm = async () => {
/** 重置表单 */ /** 重置表单 */
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
...defaultFormData id: undefined,
name: '',
handlerName: '',
handlerParam: '',
cronExpression: ''
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }

View File

@ -139,14 +139,14 @@
</content-wrap> </content-wrap>
<!-- 表单弹窗添加/修改 --> <!-- 表单弹窗添加/修改 -->
<job-form ref="formRef" @success="getList" /> <JobForm ref="formRef" @success="getList" />
<!-- 表单弹窗查看 --> <!-- 表单弹窗查看 -->
<job-view ref="viewModalRef" @success="getList" /> <job-view ref="viewModalRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Job"> <script setup lang="ts" name="Job">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { checkPermi } from '@/utils/permission' import { checkPermi } from '@/utils/permission'
import JobForm from './form.vue' import JobForm from './JobForm.vue'
import JobView from './view.vue' import JobView from './view.vue'
import download from '@/utils/download' import download from '@/utils/download'
import * as JobApi from '@/api/infra/job' import * as JobApi from '@/api/infra/job'