407 lines
14 KiB
Vue
407 lines
14 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="18" :md="12" :sm="24">
|
||
<a-form-item>
|
||
<a-input
|
||
hidden
|
||
v-decorator="['id']" />
|
||
</a-form-item>
|
||
<a-form-item label="通知场景">
|
||
<a-select
|
||
placeholder="通知场景"
|
||
style="width: 100%;"
|
||
@change="changeNotifyScene"
|
||
v-decorator="[
|
||
'notifyScene',
|
||
{
|
||
initialValue: '1',
|
||
rules: [{ required: true, message: '请选择状态'}]
|
||
}
|
||
]"
|
||
>
|
||
<a-select-option :value="index" v-for="(item, index) in notifyScene" :key="index">{{ item.name }}</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24">
|
||
<a-form-item>
|
||
<a-input
|
||
hidden />
|
||
</a-form-item>
|
||
<a-form-item label="通知阈值">
|
||
<a-input
|
||
v-if="notifyThresholdDisabled.includes(this.notifySceneValue)"
|
||
disabled />
|
||
<a-input-number
|
||
v-else
|
||
id="inputNumber"
|
||
:min="1"
|
||
style="width: -webkit-fill-available"
|
||
v-decorator="[
|
||
'notifyThreshold',
|
||
{
|
||
initialValue: '16',
|
||
rules: [{ required: !notifyThresholdDisabled.includes(this.notifySceneValue), message: '请输入通知阈值'}]
|
||
}
|
||
]" />
|
||
|
||
</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="[
|
||
'notifyStatus',
|
||
{
|
||
initialValue: '1',
|
||
rules: [{ required: true, message: '请选择状态'}]
|
||
}
|
||
]" >
|
||
<a-select-option :value="index" v-for="(item, index) in notifyStatus" :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
|
||
@change="handleChange"
|
||
placeholder="通知类型"
|
||
style="width: 100%;"
|
||
v-decorator="[
|
||
'notifyType',
|
||
{
|
||
initialValue: '1',
|
||
rules: [{ required: true, message: '请选择状态'}]
|
||
}
|
||
]"
|
||
>
|
||
<a-select-option :value="index" v-for="(item, index) in notifyType" :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
|
||
placeholder="请输入配置属性"
|
||
@click="handleBlur"
|
||
v-decorator="[
|
||
'notifyAttribute',
|
||
{rules: [{ required: true, message: '请输入配置属性', whitespace: true}]}
|
||
]" />
|
||
|
||
</a-form-item>
|
||
</a-col>
|
||
</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>
|
||
|
||
<a-modal :visible="visible" title="添加配置" @ok="handleOk" @cancel="handlerCancel" width="1000px">
|
||
<a-form :form="notifyAttributeForm" @submit="handleSubmit" :body-style="{padding: '0px 0px'}" v-bind="formItemLayout" >
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '1'"
|
||
label="钉钉URL">
|
||
<a-input
|
||
placeholder="请输入钉钉URL"
|
||
v-decorator="[
|
||
'dingDingUrl',
|
||
{rules: [{ required: true, message: '请输入钉钉URL', whitespace: true}]}
|
||
]" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '4'"
|
||
label="飞书URL">
|
||
<a-input
|
||
placeholder="请输入飞书URL"
|
||
v-decorator="[
|
||
'larkUrl',
|
||
{rules: [{ required: true, message: '请输入飞书URL', whitespace: true}]}
|
||
]" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '2'"
|
||
label="用户名">
|
||
<a-input
|
||
placeholder="请输入用户名"
|
||
v-if="this.notifyTypeValue === '2'"
|
||
v-decorator="[
|
||
'user',
|
||
{rules: [{ required: true, message: '请输入用户名', whitespace: true}]}
|
||
]" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '2'"
|
||
label="密码">
|
||
<a-input
|
||
placeholder="请输入密码"
|
||
v-if="this.notifyTypeValue === '2'"
|
||
v-decorator="[
|
||
'pass',
|
||
{rules: [{ required: true, message: '请输入密码', whitespace: true}]}
|
||
]"/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '2'"
|
||
label="SMTP地址">
|
||
<a-input
|
||
placeholder="请输入邮件服务器的SMTP地址"
|
||
v-if="this.notifyTypeValue === '2'"
|
||
v-decorator="[
|
||
'host',
|
||
{rules: [{ required: true, message: '请输入邮件服务器的SMTP地址', whitespace: true}]}
|
||
]"/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '2'"
|
||
label="SMTP端口">
|
||
<a-input
|
||
v-if="this.notifyTypeValue === '2'"
|
||
placeholder="请输入邮件服务器的SMTP端口"
|
||
v-decorator="[
|
||
'port',
|
||
{rules: [{ required: true, message: '请输入邮件服务器的SMTP端口', whitespace: true}]}
|
||
]"/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '2'"
|
||
label="发件人">
|
||
<a-input
|
||
v-if="this.notifyTypeValue === '2'"
|
||
placeholder="请输入发件人"
|
||
v-decorator="[
|
||
'from',
|
||
{rules: [{ required: true, message: '请输入发件人', whitespace: true}]}
|
||
]"/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
v-if="this.notifyTypeValue === '2'"
|
||
label="收件人">
|
||
<a-input
|
||
v-if="this.notifyTypeValue === '2'"
|
||
placeholder="请输入收件人"
|
||
v-decorator="[
|
||
'tos',
|
||
{rules: [{ required: true, message: '请输入收件人', whitespace: true}]}
|
||
]"/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
:wrapper-col="{
|
||
xs: { span: 24, offset: 0 },
|
||
sm: { span: 16, offset: 8 },
|
||
lg: { span: 7 }
|
||
}">
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAllGroupNameList } from '@/api/manage'
|
||
import { getNotifyConfigDetail, saveNotify, updateNotify } from '@/api/retryApi'
|
||
import pick from 'lodash.pick'
|
||
import CronModal from '@/views/job/from/CronModal'
|
||
|
||
const enums = require('@/utils/retryEnum')
|
||
export default {
|
||
name: 'NotifyFrom',
|
||
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: [],
|
||
notifyScene: enums.notifyScene,
|
||
notifyType: enums.notifyType,
|
||
notifyStatus: enums.notifyStatus,
|
||
loading: false,
|
||
visible: false,
|
||
count: 0,
|
||
notifyTypeValue: '1',
|
||
notifyAttribute: '',
|
||
notifyThresholdDisabled: ['3', '4'],
|
||
notifySceneValue: '1'
|
||
|
||
}
|
||
},
|
||
beforeCreate () {
|
||
this.notifyAttributeForm = this.$form.createForm(this, { name: 'notify_attribute_form_item' })
|
||
},
|
||
mounted () {
|
||
getAllGroupNameList().then((res) => {
|
||
this.groupNameList = res.data
|
||
})
|
||
|
||
this.$nextTick(() => {
|
||
const id = this.$route.query.id
|
||
console.log(id)
|
||
if (id) {
|
||
this.loading = true
|
||
getNotifyConfigDetail(id).then(res => {
|
||
this.loadEditInfo(res.data)
|
||
this.loading = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
handleChange (notifyType) {
|
||
this.notifyTypeValue = notifyType
|
||
},
|
||
changeNotifyScene (notifyScene) {
|
||
console.log(notifyScene)
|
||
this.notifySceneValue = notifyScene
|
||
},
|
||
handleBlur () {
|
||
new Promise((resolve) => {
|
||
setTimeout(resolve, 100)
|
||
}).then(() => {
|
||
if (this.formType === 'edit') {
|
||
const formData = pick(JSON.parse(this.notifyAttribute), ['dingDingUrl', 'larkUrl', 'user', 'pass', 'host', 'port', 'from', 'tos'])
|
||
console.log(formData)
|
||
|
||
this.notifyAttributeForm.getFieldDecorator(`dingDingUrl`, { initialValue: formData.dingDingUrl, preserve: true })
|
||
}
|
||
|
||
this.visible = !this.visible
|
||
})
|
||
},
|
||
handlerCancel () {
|
||
this.visible = false
|
||
},
|
||
handleOk () {
|
||
this.notifyAttributeForm.validateFields((err, values) => {
|
||
if (!err) {
|
||
console.log(values)
|
||
const { form } = this
|
||
const formData = pick(values, ['dingDingUrl', 'larkUrl', 'user', 'pass', 'host', 'port', 'from', 'tos'])
|
||
console.log(this.parseJson(formData))
|
||
this.notifyAttribute = JSON.stringify(formData)
|
||
form.setFieldsValue({
|
||
notifyAttribute: this.parseJson(formData)
|
||
})
|
||
this.visible = false
|
||
}
|
||
})
|
||
},
|
||
handleSubmit (e) {
|
||
e.preventDefault()
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
values['notifyAttribute'] = this.notifyAttribute
|
||
if (this.formType === 'create') {
|
||
saveNotify(values).then(res => {
|
||
this.$message.success('任务新增完成')
|
||
this.form.resetFields()
|
||
this.$router.go(-1)
|
||
})
|
||
} else {
|
||
updateNotify(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', 'notifyAttribute', 'groupName', 'notifyStatus', 'notifyScene', 'notifyThreshold', 'notifyType', 'notifyThreshold', 'description'])
|
||
formData.notifyStatus = formData.notifyStatus.toString()
|
||
formData.notifyScene = formData.notifyScene.toString()
|
||
formData.notifyType = formData.notifyType.toString()
|
||
formData.notifyThreshold = formData.notifyThreshold.toString()
|
||
this.notifyTypeValue = formData.notifyType
|
||
this.notifyAttribute = formData.notifyAttribute
|
||
this.notifySceneValue = formData.notifyScene
|
||
formData.notifyAttribute = this.parseJson(JSON.parse(formData.notifyAttribute))
|
||
console.log(formData)
|
||
form.setFieldsValue(formData)
|
||
})
|
||
},
|
||
parseJson (json) {
|
||
if (!json) {
|
||
return null
|
||
}
|
||
|
||
let s =
|
||
'用户名:' + json['user'] + ';' +
|
||
'密码:' + json['pass'] + ';' +
|
||
'SMTP地址:' + json['host'] + ';' +
|
||
'SMTP端口:' + json['port'] + ';' +
|
||
'发件人:' + json['from'] + ';' +
|
||
'收件人:' + json['tos'] + ';'
|
||
|
||
if (this.notifyTypeValue === '1') {
|
||
s = json['dingDingUrl']
|
||
} else if (this.notifyTypeValue === '4') {
|
||
s = json['larkUrl']
|
||
}
|
||
|
||
return s
|
||
}
|
||
}
|
||
}
|
||
</script>
|