320 lines
11 KiB
Vue
320 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<page-header-wrapper content="场景配置" @back="() => $router.go(-1)" style="margin: -24px -1px 0">
|
|||
|
|
<div></div>
|
|||
|
|
</page-header-wrapper>
|
|||
|
|
<a-card :body-style="{padding: '24px 32px'}" :bordered="false" :loading="loading">
|
|||
|
|
<a-form @submit="handleSubmit" :form="form" class="form-row" layout="vertical" style="width: 40%;margin: auto;">
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
<a-col :lg="24" :md="24" :sm="24">
|
|||
|
|
<a-form-item>
|
|||
|
|
<a-input
|
|||
|
|
hidden
|
|||
|
|
v-decorator="['id']" />
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="场景名称" >
|
|||
|
|
<a-input
|
|||
|
|
placeholder="请输入场景名称"
|
|||
|
|
:maxLength="64"
|
|||
|
|
v-decorator="[
|
|||
|
|
'sceneName',
|
|||
|
|
{rules: [{ required: true, message: '请输入场景名称', whitespace: true},{required: true, max: 64, message: '最多支持64个字符！'}]}
|
|||
|
|
]" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
<a-col :lg="18" :md="18" :sm="24">
|
|||
|
|
<a-form-item label="组">
|
|||
|
|
<a-select
|
|||
|
|
placeholder="请选择组"
|
|||
|
|
v-decorator="['groupName', { rules: [{ required: true, message: '请选择组' }] }]"
|
|||
|
|
>
|
|||
|
|
<a-select-option v-for="item in groupNameList" :value="item" :key="item">{{ item }}</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :lg="6" :md="12" :sm="24">
|
|||
|
|
<a-form-item label="状态">
|
|||
|
|
<a-select
|
|||
|
|
placeholder="请选择状态"
|
|||
|
|
v-decorator="[
|
|||
|
|
'sceneStatus',
|
|||
|
|
{
|
|||
|
|
initialValue: '1',
|
|||
|
|
rules: [{ required: true, message: '请选择状态'}]
|
|||
|
|
}
|
|||
|
|
]" >
|
|||
|
|
<a-select-option :value="index" v-for="(item, index) in sceneStatus" :key="index">{{ item.name }}</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
<a-col :lg="8" :md="12" :sm="12">
|
|||
|
|
<a-form-item label="退避策略">
|
|||
|
|
<a-select
|
|||
|
|
placeholder="请选择退避策略"
|
|||
|
|
@change="handleChange"
|
|||
|
|
v-decorator="[
|
|||
|
|
'backOff',
|
|||
|
|
{
|
|||
|
|
initialValue: '2',
|
|||
|
|
rules: [{ required: true, message: '请选择退避策略'}]
|
|||
|
|
}
|
|||
|
|
]" >
|
|||
|
|
<a-select-option :value="index" v-for="(item, index) in backOffLabels" :key="index">{{ item.name }}</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :lg="16" :md="12" :sm="12">
|
|||
|
|
<a-form-item label="间隔时长">
|
|||
|
|
<a-input
|
|||
|
|
v-if="backOff === '1'"
|
|||
|
|
placeholder="1 2 4 5"
|
|||
|
|
disabled
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-input-number
|
|||
|
|
v-if="backOff === '2' || backOff === '4'"
|
|||
|
|
style="width: -webkit-fill-available"
|
|||
|
|
placeholder="请输入间隔时长(秒)"
|
|||
|
|
:min="1"
|
|||
|
|
v-decorator="[
|
|||
|
|
'triggerInterval',
|
|||
|
|
{initialValue: '60',
|
|||
|
|
rules: [ { required: true, message: '请输入间隔时长'}]}
|
|||
|
|
]" />
|
|||
|
|
|
|||
|
|
<a-input
|
|||
|
|
v-if="backOff === '3'"
|
|||
|
|
@click="handlerCron"
|
|||
|
|
placeholder="请输入间隔时长"
|
|||
|
|
v-decorator="[
|
|||
|
|
'triggerInterval',
|
|||
|
|
{rules: [{ required: true, message: '请输入间隔时长', whitespace: true}]}
|
|||
|
|
]" />
|
|||
|
|
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
<a-col :lg="8" :md="12" :sm="24">
|
|||
|
|
<a-form-item label="路由策略">
|
|||
|
|
<a-select
|
|||
|
|
placeholder="请选择路由策略"
|
|||
|
|
v-decorator="[
|
|||
|
|
'routeKey',
|
|||
|
|
{
|
|||
|
|
initialValue: '4',
|
|||
|
|
rules: [{ required: true, message: '请选择路由策略'}]
|
|||
|
|
}
|
|||
|
|
]" >
|
|||
|
|
<a-select-option :value="index" v-for="(item, index) in routeKey" :key="index">{{ item.name }}</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
<a-col :lg="8" :md="24" :sm="24">
|
|||
|
|
<a-form-item label="超时时间(秒)">
|
|||
|
|
<a-input-number
|
|||
|
|
id="inputNumber"
|
|||
|
|
:min="1"
|
|||
|
|
:max="36000"
|
|||
|
|
style="width: -webkit-fill-available"
|
|||
|
|
v-decorator="[
|
|||
|
|
'executorTimeout',
|
|||
|
|
{
|
|||
|
|
initialValue: '60',
|
|||
|
|
rules: [{ required: true, message: '请输入超时时间'}]
|
|||
|
|
}
|
|||
|
|
]" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :lg="8" :md="24" :sm="24">
|
|||
|
|
<a-form-item label="最大重试次数">
|
|||
|
|
<a-input-number
|
|||
|
|
:min="1"
|
|||
|
|
style="width: -webkit-fill-available"
|
|||
|
|
v-decorator="[
|
|||
|
|
'maxRetryCount',
|
|||
|
|
{
|
|||
|
|
initialValue: '3',
|
|||
|
|
rules: [{ required: true, message: '请输入最大重试次数'}]
|
|||
|
|
}
|
|||
|
|
]" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :lg="8" :md="24" :sm="24">
|
|||
|
|
<a-form-item label="调用链超时时间(毫秒)">
|
|||
|
|
<a-input-number
|
|||
|
|
style="width: -webkit-fill-available"
|
|||
|
|
:min="100"
|
|||
|
|
:max="60000"
|
|||
|
|
v-decorator="[
|
|||
|
|
'deadlineRequest',
|
|||
|
|
{
|
|||
|
|
initialValue: '60000',
|
|||
|
|
rules: [{ required: true, message: '请输入调用链超时时间(毫秒)'}]
|
|||
|
|
}
|
|||
|
|
]" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
</a-row>
|
|||
|
|
<a-row class="form-row" :gutter="16">
|
|||
|
|
<a-col :lg="24" :md="24" :sm="24">
|
|||
|
|
<a-form-item label="描述">
|
|||
|
|
<a-input
|
|||
|
|
placeholder="请输入描述"
|
|||
|
|
type="textarea"
|
|||
|
|
v-decorator="[
|
|||
|
|
'description',
|
|||
|
|
{rules: [{required: false, max: 256, message: '最多支持256个字符！'}]}
|
|||
|
|
]" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-form-item
|
|||
|
|
:wrapperCol="{ span: 24 }"
|
|||
|
|
style="text-align: center"
|
|||
|
|
>
|
|||
|
|
<a-button htmlType="submit" type="primary">提交</a-button>
|
|||
|
|
<a-button style="margin-left: 8px">重置</a-button>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-form>
|
|||
|
|
</a-card>
|
|||
|
|
|
|||
|
|
<cron-modal ref="cronModalRef" @getCron="getCron"/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getAllGroupNameList } from '@/api/manage'
|
|||
|
|
import { getJobDetail, saveJob, updateJob } from '@/api/jobApi'
|
|||
|
|
import pick from 'lodash.pick'
|
|||
|
|
import CronModal from '@/views/job/from/CronModal'
|
|||
|
|
|
|||
|
|
const enums = require('@/utils/retryEnum')
|
|||
|
|
export default {
|
|||
|
|
name: 'JobFrom',
|
|||
|
|
components: { CronModal },
|
|||
|
|
props: {},
|
|||
|
|
comments: {
|
|||
|
|
CronModal
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
form: this.$form.createForm(this),
|
|||
|
|
formItemLayout: {
|
|||
|
|
labelCol: { lg: { span: 7 }, sm: { span: 7 } },
|
|||
|
|
wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
|
|||
|
|
},
|
|||
|
|
formItemLayoutWithOutLabel: {
|
|||
|
|
wrapperCol: {
|
|||
|
|
xs: { span: 24, offset: 0 },
|
|||
|
|
sm: { span: 20, offset: 4 }
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
formType: 'create',
|
|||
|
|
groupNameList: [],
|
|||
|
|
blockStrategy: enums.blockStrategy,
|
|||
|
|
executorType: enums.executorType,
|
|||
|
|
routeKey: enums.routeKey,
|
|||
|
|
backOffLabels: enums.backOffLabels,
|
|||
|
|
sceneStatus: enums.sceneStatus,
|
|||
|
|
loading: false,
|
|||
|
|
visible: false,
|
|||
|
|
count: 0,
|
|||
|
|
backOff: '1'
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeCreate () {
|
|||
|
|
this.dynamicForm = this.$form.createForm(this, { name: 'dynamic_form_item' })
|
|||
|
|
this.dynamicForm.getFieldDecorator('keys', { initialValue: [], preserve: true })
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
getAllGroupNameList().then((res) => {
|
|||
|
|
this.groupNameList = res.data
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const id = this.$route.query.id
|
|||
|
|
if (id) {
|
|||
|
|
this.loading = true
|
|||
|
|
getJobDetail(id).then(res => {
|
|||
|
|
this.loadEditInfo(res.data)
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleChange (value) {
|
|||
|
|
console.log(value)
|
|||
|
|
this.backOff = value
|
|||
|
|
this.form.setFieldsValue({
|
|||
|
|
triggerInterval: null
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handlerCron () {
|
|||
|
|
const backOff = this.form.getFieldValue('backOff')
|
|||
|
|
if (backOff === '3') {
|
|||
|
|
let triggerInterval = this.form.getFieldValue('triggerInterval')
|
|||
|
|
if (triggerInterval === null || triggerInterval === '') {
|
|||
|
|
triggerInterval = '* * * * * ?'
|
|||
|
|
}
|
|||
|
|
this.$refs.cronModalRef.isShow(triggerInterval)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getCron (cron) {
|
|||
|
|
this.form.setFieldsValue({
|
|||
|
|
triggerInterval: cron
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleSubmit (e) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
this.form.validateFields((err, values) => {
|
|||
|
|
if (!err) {
|
|||
|
|
if (this.formType === 'create') {
|
|||
|
|
saveJob(values).then(res => {
|
|||
|
|
this.$message.success('任务新增完成')
|
|||
|
|
this.form.resetFields()
|
|||
|
|
this.$router.go(-1)
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
updateJob(values).then(res => {
|
|||
|
|
this.$message.success('任务更新完成')
|
|||
|
|
this.form.resetFields()
|
|||
|
|
this.$router.go(-1)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
loadEditInfo (data) {
|
|||
|
|
this.formType = 'edit'
|
|||
|
|
const { form } = this
|
|||
|
|
// ajax
|
|||
|
|
new Promise((resolve) => {
|
|||
|
|
setTimeout(resolve, 100)
|
|||
|
|
}).then(() => {
|
|||
|
|
const formData = pick(data, [
|
|||
|
|
'id', 'jobName', 'groupName', 'jobStatus', 'executorInfo', 'argsStr', 'executorTimeout', 'description',
|
|||
|
|
'maxRetryTimes', 'parallelNum', 'retryInterval', 'triggerType', 'blockStrategy', 'executorType', 'taskType', 'triggerInterval'])
|
|||
|
|
formData.jobStatus = formData.jobStatus.toString()
|
|||
|
|
formData.taskType = formData.taskType.toString()
|
|||
|
|
formData.executorType = formData.executorType.toString()
|
|||
|
|
formData.blockStrategy = formData.blockStrategy.toString()
|
|||
|
|
formData.triggerType = formData.triggerType.toString()
|
|||
|
|
this.triggerTypeValue = formData.triggerType
|
|||
|
|
form.setFieldsValue(formData)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|