mirror of https://github.com/openspug/spug
98 lines
3.3 KiB
JavaScript
98 lines
3.3 KiB
JavaScript
/**
|
||
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
|
||
* Copyright (c) <spug.dev@gmail.com>
|
||
* Released under the AGPL-3.0 License.
|
||
*/
|
||
import React, { useState } from 'react';
|
||
import { observer } from 'mobx-react';
|
||
import { Modal, Form, Input, Tooltip, message } from 'antd';
|
||
import { ThunderboltOutlined, LoadingOutlined } from '@ant-design/icons';
|
||
import http from 'libs/http';
|
||
import store from './store';
|
||
|
||
export default observer(function () {
|
||
const [form] = Form.useForm();
|
||
const [loading, setLoading] = useState(false);
|
||
const [testLoading, setTestLoading] = useState('0');
|
||
|
||
function handleSubmit() {
|
||
setLoading(true);
|
||
const formData = form.getFieldsValue();
|
||
formData['id'] = store.record.id;
|
||
http.post('/api/alarm/contact/', formData)
|
||
.then(res => {
|
||
message.success('操作成功');
|
||
store.formVisible = false;
|
||
store.fetchRecords()
|
||
}, () => setLoading(false))
|
||
}
|
||
|
||
function handleTest(mode, name) {
|
||
const value = form.getFieldValue(name)
|
||
if (!value) return message.error('请输入后再执行测试')
|
||
setTestLoading(mode)
|
||
http.post('/api/alarm/test/', {mode, value})
|
||
.then(() => {
|
||
message.success('执行成功')
|
||
})
|
||
.finally(() => setTestLoading('0'))
|
||
}
|
||
|
||
function Test(props) {
|
||
return (
|
||
<div style={{position: 'absolute', right: -30, top: 8}}>
|
||
{testLoading === props.mode ? (
|
||
<LoadingOutlined style={{fontSize: 18, color: '#faad14'}}/>
|
||
) : (
|
||
<Tooltip title="执行测试">
|
||
<ThunderboltOutlined
|
||
style={{fontSize: 18, color: '#faad14'}}
|
||
onClick={() => handleTest(props.mode, props.name)}/>
|
||
</Tooltip>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
visible
|
||
width={800}
|
||
maskClosable={false}
|
||
title={store.record.id ? '编辑联系人' : '新建联系人'}
|
||
onCancel={() => store.formVisible = false}
|
||
confirmLoading={loading}
|
||
onOk={handleSubmit}>
|
||
<Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
|
||
<Form.Item required name="name" label="姓名">
|
||
<Input placeholder="请输入联系人姓名"/>
|
||
</Form.Item>
|
||
<Form.Item name="phone" label="手机号">
|
||
<Input placeholder="请输入手机号"/>
|
||
</Form.Item>
|
||
<Form.Item label="邮箱">
|
||
<Form.Item noStyle name="email">
|
||
<Input placeholder="请输入邮箱地址"/>
|
||
</Form.Item>
|
||
<Test mode="4" name="email"/>
|
||
</Form.Item>
|
||
<Form.Item label="钉钉" extra={<span>
|
||
钉钉收不到通知？请参考
|
||
<a target="_blank" rel="noopener noreferrer"
|
||
href="https://ops.spug.cc/docs/use-problem#use-dd">官方文档</a>
|
||
</span>}>
|
||
<Form.Item noStyle name="ding">
|
||
<Input placeholder="https://oapi.dingtalk.com/robot/send?access_token=xxx"/>
|
||
</Form.Item>
|
||
<Test mode="3" name="ding"/>
|
||
</Form.Item>
|
||
<Form.Item label="企业微信">
|
||
<Form.Item noStyle name="qy_wx">
|
||
<Input placeholder="https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxx"/>
|
||
</Form.Item>
|
||
<Test mode="5" name="qy_wx"/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
)
|
||
}) |