Files
oxygen-ui/src/pages/System/Settings/Mail.tsx
2024-01-05 13:51:38 +08:00

156 lines
5.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import React from 'react'
import Icon from '@ant-design/icons'
import { useUpdatedEffect } from '@/util/hooks'
import { hasPermission } from '@/util/auth'
import {
r_sys_settings_mail_get,
r_sys_settings_mail_send,
r_sys_settings_mail_update
} from '@/services/system'
import { SettingsCard } from '@/pages/System/Settings'
const Mail: React.FC = () => {
const [modal, contextHolder] = AntdModal.useModal()
const [mailForm] = AntdForm.useForm<MailSettingsParam>()
const mailFormValues = AntdForm.useWatch([], mailForm)
const [loading, setLoading] = useState(false)
const [mailSendForm] = AntdForm.useForm<MailSendParam>()
const handleOnTest = () => {
void modal.confirm({
title: '发送测试邮件',
content: (
<>
<AntdForm form={mailSendForm}>
<AntdForm.Item
name={'to'}
label={'接收人'}
style={{ marginTop: 10 }}
rules={[{ required: true, type: 'email' }]}
>
<AntdInput />
</AntdForm.Item>
</AntdForm>
<AntdTag style={{ whiteSpace: 'normal' }}>
使
</AntdTag>
</>
),
onOk: () =>
mailSendForm.validateFields().then(
() => {
return new Promise((resolve) => {
void r_sys_settings_mail_send({
to: mailSendForm.getFieldValue('to') as string
}).then((res) => {
const response = res.data
if (response.success) {
void message.success('发送成功')
resolve(true)
} else {
void message.error('发送失败,请检查配置后重试')
resolve(true)
}
})
})
},
() => {
return new Promise((_, reject) => {
reject('未输入接收者')
})
}
)
})
}
const handleOnReset = () => {
getMailSettings()
}
const handleOnSave = () => {
void r_sys_settings_mail_update(mailFormValues).then((res) => {
const response = res.data
if (response.success) {
void message.success('保存设置成功')
getMailSettings()
} else {
void message.error('保存设置失败,请稍后重试')
}
})
}
const getMailSettings = () => {
if (loading) {
return
}
setLoading(true)
void r_sys_settings_mail_get().then((res) => {
const response = res.data
if (response.success) {
const data = response.data
data && mailForm.setFieldsValue(data)
setLoading(false)
}
})
}
useUpdatedEffect(() => {
getMailSettings()
}, [])
return (
<>
<SettingsCard
icon={IconOxygenEmail}
title={'邮件'}
loading={loading}
onReset={handleOnReset}
onSave={handleOnSave}
modifyOperationCode={'system:settings:modify:mail'}
expand={
<AntdButton onClick={handleOnTest} title={'测试'}>
<Icon component={IconOxygenTest} />
</AntdButton>
}
>
<AntdForm
form={mailForm}
labelCol={{ flex: '8em' }}
disabled={!hasPermission('system:settings:modify:mail')}
>
<AntdForm.Item label={'SMTP 服务器'} name={'host'}>
<AntdInput />
</AntdForm.Item>
<AntdForm.Item label={'端口'} name={'port'}>
<AntdInputNumber min={0} max={65535} style={{ width: '100%' }} />
</AntdForm.Item>
<AntdForm.Item label={'安全类型'} name={'securityType'}>
<AntdSelect>
<AntdSelect.Option key={'None'}>None</AntdSelect.Option>
<AntdSelect.Option key={'SSL/TLS'}>SSL/TLS</AntdSelect.Option>
<AntdSelect.Option key={'StartTls'}>StartTls</AntdSelect.Option>
</AntdSelect>
</AntdForm.Item>
<AntdForm.Item label={'用户名'} name={'username'}>
<AntdInput />
</AntdForm.Item>
<AntdForm.Item label={'密码'} name={'password'}>
<AntdInput.Password />
</AntdForm.Item>
<AntdForm.Item label={'发送者'} name={'from'}>
<AntdInput />
</AntdForm.Item>
<AntdForm.Item label={'发送者名称'} name={'fromName'}>
<AntdInput />
</AntdForm.Item>
</AntdForm>
</SettingsCard>
{contextHolder}
</>
)
}
export default Mail