feat: 邮箱账号
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import React, { useImperativeHandle, forwardRef } from "react";
|
import { CloseOutlined } from '@ant-design/icons';
|
||||||
import { DrawerForm } from "@ant-design/pro-components";
|
import type { ProFormColumnsType } from '@ant-design/pro-components';
|
||||||
import type { ProFormColumnsType } from "@ant-design/pro-components";
|
import { BetaSchemaForm, DrawerForm } from '@ant-design/pro-components';
|
||||||
import { BetaSchemaForm } from "@ant-design/pro-components";
|
import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
|
||||||
import { Button, Drawer, Space, Typography } from "antd";
|
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||||
import { CloseOutlined } from "@ant-design/icons";
|
|
||||||
const { Title } = Typography;
|
const { Title } = Typography;
|
||||||
interface ConfigurableDrawerFormProps {
|
interface ConfigurableDrawerFormProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
@@ -11,6 +11,8 @@ interface ConfigurableDrawerFormProps {
|
|||||||
onSubmit?: (values: any) => Promise<boolean>;
|
onSubmit?: (values: any) => Promise<boolean>;
|
||||||
initialValues?: Record<string, any>;
|
initialValues?: Record<string, any>;
|
||||||
width?: number;
|
width?: number;
|
||||||
|
labelCol?: ColProps;
|
||||||
|
wrapperCol?: ColProps;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ConfigurableDrawerFormRef {
|
export interface ConfigurableDrawerFormRef {
|
||||||
@@ -21,102 +23,115 @@ export interface ConfigurableDrawerFormRef {
|
|||||||
const ConfigurableDrawerForm = forwardRef<
|
const ConfigurableDrawerForm = forwardRef<
|
||||||
ConfigurableDrawerFormRef,
|
ConfigurableDrawerFormRef,
|
||||||
ConfigurableDrawerFormProps
|
ConfigurableDrawerFormProps
|
||||||
>(({ title = "表单", columns, onSubmit, initialValues, width = 600 }, ref) => {
|
>(
|
||||||
const [open, setOpen] = React.useState(false);
|
(
|
||||||
const [formData, setFormData] = React.useState(initialValues || {});
|
{
|
||||||
const [loading, setLoading] = React.useState<boolean>(false);
|
title = '表单',
|
||||||
// 添加表单实例引用
|
labelCol = { span: 4 },
|
||||||
const formRef = React.useRef<any>(null);
|
wrapperCol = { span: 20 },
|
||||||
useImperativeHandle(ref, () => ({
|
columns,
|
||||||
open: (data) => {
|
onSubmit,
|
||||||
if (data) {
|
initialValues,
|
||||||
setFormData(data);
|
width = 600,
|
||||||
}
|
|
||||||
console.log("open");
|
|
||||||
setOpen(true);
|
|
||||||
},
|
},
|
||||||
close: () => setOpen(false),
|
ref,
|
||||||
}));
|
) => {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
const handleSubmit = async () => {
|
const [formData, setFormData] = React.useState(initialValues || {});
|
||||||
try {
|
const [loading, setLoading] = React.useState<boolean>(false);
|
||||||
if (onSubmit) {
|
// 添加表单实例引用
|
||||||
await formRef.current?.validateFields();
|
const formRef = React.useRef<any>(null);
|
||||||
setLoading(true);
|
useImperativeHandle(ref, () => ({
|
||||||
const values = formRef.current?.getFieldsValue();
|
open: (data) => {
|
||||||
const success = await onSubmit(values);
|
if (data) {
|
||||||
if (success) {
|
setFormData(data);
|
||||||
setOpen(false);
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
return false;
|
console.log('open');
|
||||||
|
setOpen(true);
|
||||||
|
},
|
||||||
|
close: () => setOpen(false),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
if (onSubmit) {
|
||||||
|
await formRef.current?.validateFields();
|
||||||
|
setLoading(true);
|
||||||
|
const values = formRef.current?.getFieldsValue();
|
||||||
|
const success = await onSubmit(values);
|
||||||
|
if (success) {
|
||||||
|
setOpen(false);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
return true;
|
};
|
||||||
} finally {
|
const customHeader = (
|
||||||
setLoading(false);
|
<div
|
||||||
}
|
|
||||||
};
|
|
||||||
const customHeader = (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "center",
|
|
||||||
padding: "0 0px 16px 0px",
|
|
||||||
borderBottom: "1px solid #f0f0f0",
|
|
||||||
marginBottom: "16px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Title level={4} style={{ margin: 0 }}>
|
|
||||||
{title}
|
|
||||||
</Title>
|
|
||||||
<Button
|
|
||||||
type="text"
|
|
||||||
icon={<CloseOutlined />}
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
style={{
|
style={{
|
||||||
border: "none",
|
display: 'flex',
|
||||||
boxShadow: "none",
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '0 0px 16px 0px',
|
||||||
|
borderBottom: '1px solid #f0f0f0',
|
||||||
|
marginBottom: '16px',
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
</div>
|
<Title level={4} style={{ margin: 0 }}>
|
||||||
);
|
{title}
|
||||||
return (
|
</Title>
|
||||||
<Drawer
|
<Button
|
||||||
title={title}
|
type="text"
|
||||||
styles={{
|
icon={<CloseOutlined />}
|
||||||
header: {
|
onClick={() => setOpen(false)}
|
||||||
textAlign: "left",
|
style={{
|
||||||
position: "relative",
|
border: 'none',
|
||||||
},
|
boxShadow: 'none',
|
||||||
}}
|
}}
|
||||||
destroyOnHidden
|
/>
|
||||||
closable={true} // 隐藏默认关闭按钮
|
</div>
|
||||||
open={open}
|
);
|
||||||
onClose={() => setOpen(false)}
|
return (
|
||||||
width={width}
|
<Drawer
|
||||||
footer={
|
title={title}
|
||||||
<Space style={{ width: "100%", justifyContent: "end" }}>
|
styles={{
|
||||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
header: {
|
||||||
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
textAlign: 'left',
|
||||||
保存
|
position: 'relative',
|
||||||
</Button>
|
},
|
||||||
</Space>
|
}}
|
||||||
}
|
destroyOnHidden
|
||||||
>
|
closable={true} // 隐藏默认关闭按钮
|
||||||
{/* {customHeader} */}
|
open={open}
|
||||||
<BetaSchemaForm
|
onClose={() => setOpen(false)}
|
||||||
initialValues={formData}
|
width={width}
|
||||||
layoutType="Form"
|
footer={
|
||||||
formRef={formRef}
|
<Space style={{ width: '100%', justifyContent: 'end' }}>
|
||||||
columns={columns}
|
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||||
layout="horizontal"
|
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
||||||
labelCol={{ span: 4 }}
|
保存
|
||||||
wrapperCol={{ span: 20 }}
|
</Button>
|
||||||
submitter={false}
|
</Space>
|
||||||
/>
|
}
|
||||||
</Drawer>
|
>
|
||||||
);
|
{/* {customHeader} */}
|
||||||
});
|
<BetaSchemaForm
|
||||||
|
initialValues={formData}
|
||||||
|
layoutType="Form"
|
||||||
|
formRef={formRef}
|
||||||
|
columns={columns}
|
||||||
|
layout="horizontal"
|
||||||
|
labelCol={labelCol}
|
||||||
|
wrapperCol={wrapperCol}
|
||||||
|
submitter={false}
|
||||||
|
/>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
export default ConfigurableDrawerForm;
|
export default ConfigurableDrawerForm;
|
||||||
|
|||||||
178
src/pages/system/messages/mail/account/config.tsx
Normal file
178
src/pages/system/messages/mail/account/config.tsx
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
import type {
|
||||||
|
ProColumns,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProFormColumnsType,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import type { MailAccountVO } from '@/services/system/message/mail/account';
|
||||||
|
export const baseTenantColumns: ProColumns<MailAccountVO>[] = [
|
||||||
|
{
|
||||||
|
title: '邮箱',
|
||||||
|
dataIndex: 'mail',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户名',
|
||||||
|
dataIndex: 'username',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SMTP 服务器域名',
|
||||||
|
dataIndex: 'host',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SMTP 服务器端口',
|
||||||
|
dataIndex: 'port',
|
||||||
|
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否开启 SSL',
|
||||||
|
dataIndex: 'sslEnable',
|
||||||
|
valueType: 'radio',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否开启 STARTTLS',
|
||||||
|
dataIndex: 'starttlsEnable',
|
||||||
|
valueType: 'radio',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
valueType: 'dateRange',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
render: (_, record: MailAccountVO) =>
|
||||||
|
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const formColumns = (): ProFormColumnsType[] => [
|
||||||
|
{
|
||||||
|
title: '邮箱',
|
||||||
|
dataIndex: 'mail',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户名',
|
||||||
|
dataIndex: 'username',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入用户名',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '密码',
|
||||||
|
dataIndex: 'password',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入密码',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SMTP 服务器域名',
|
||||||
|
dataIndex: 'host',
|
||||||
|
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入SMTP 服务器域名',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SMTP 服务器端口',
|
||||||
|
dataIndex: 'port',
|
||||||
|
valueType: 'digit',
|
||||||
|
fieldProps: {
|
||||||
|
defaultValue: 465,
|
||||||
|
},
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'SMTP 服务器端口',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否开启 SSL',
|
||||||
|
dataIndex: 'sslEnable',
|
||||||
|
valueType: 'select',
|
||||||
|
fieldProps: {
|
||||||
|
placeholder: '请选择是否开启 SSL',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '正常',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择是否开启 SSL',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否开启 STARTTLS',
|
||||||
|
dataIndex: 'starttlsEnable',
|
||||||
|
valueType: 'select',
|
||||||
|
fieldProps: {
|
||||||
|
placeholder: '请选择是否开启 STARTTLS',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '正常',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择是否开启 STARTTLS',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const formTestColumns = (type: string): ProFormColumnsType[] => [
|
||||||
|
{
|
||||||
|
title: '模板内容',
|
||||||
|
dataIndex: 'content',
|
||||||
|
valueType: 'textarea',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号',
|
||||||
|
dataIndex: 'mobile',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// {
|
||||||
|
// title: "模板内容",
|
||||||
|
// dataIndex: "content",
|
||||||
|
// valueType: "textarea",
|
||||||
|
// },
|
||||||
152
src/pages/system/messages/mail/account/index.tsx
Normal file
152
src/pages/system/messages/mail/account/index.tsx
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import type {
|
||||||
|
ActionType,
|
||||||
|
ProColumns,
|
||||||
|
ProCoreActionType,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { message, Popconfirm } from 'antd';
|
||||||
|
import React, { useCallback, useRef, useState } from 'react';
|
||||||
|
import ConfigurableDrawerForm, {
|
||||||
|
type ConfigurableDrawerFormRef,
|
||||||
|
} from '@/components/DrawerForm';
|
||||||
|
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||||
|
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||||
|
import { formStatusType } from '@/constants';
|
||||||
|
import {
|
||||||
|
createMailAccount,
|
||||||
|
deleteMailAccount,
|
||||||
|
getMailAccount,
|
||||||
|
getMailAccountPage,
|
||||||
|
type MailAccountVO,
|
||||||
|
updateMailAccount,
|
||||||
|
} from '@/services/system/message/mail/account';
|
||||||
|
import { baseTenantColumns, formColumns, formTestColumns } from './config';
|
||||||
|
|
||||||
|
const SyStemMessageSmsTemplate = () => {
|
||||||
|
const tableRef = useRef<ActionType>(null);
|
||||||
|
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||||
|
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||||
|
const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||||
|
const [currentItem, setCurrentItem] = useState<MailAccountVO>();
|
||||||
|
const onFetch = async (
|
||||||
|
params: MailAccountVO & {
|
||||||
|
pageSize?: number;
|
||||||
|
current?: number;
|
||||||
|
},
|
||||||
|
) => {
|
||||||
|
const data = await getMailAccountPage({
|
||||||
|
...params,
|
||||||
|
pageNo: params.current,
|
||||||
|
pageSize: params.pageSize,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data.list,
|
||||||
|
success: true,
|
||||||
|
total: data.total,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSend = async (record: MailAccountVO) => {
|
||||||
|
setType('test');
|
||||||
|
setCurrentItem(record);
|
||||||
|
testRef.current?.open(record);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (record: MailAccountVO) => {
|
||||||
|
setType('update');
|
||||||
|
setCurrentItem(record);
|
||||||
|
|
||||||
|
configurableDrawerRef.current?.open(record);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
setType('create');
|
||||||
|
configurableDrawerRef.current?.open();
|
||||||
|
};
|
||||||
|
const handleSubmit = useCallback(
|
||||||
|
async (values: MailAccountVO) => {
|
||||||
|
if (type === 'create') {
|
||||||
|
await createMailAccount(values);
|
||||||
|
message.success('创建成功');
|
||||||
|
} else {
|
||||||
|
await updateMailAccount({
|
||||||
|
...values,
|
||||||
|
id: currentItem!.id,
|
||||||
|
});
|
||||||
|
message.success('编辑成功');
|
||||||
|
}
|
||||||
|
tableRef.current?.reload();
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
[type, currentItem],
|
||||||
|
);
|
||||||
|
|
||||||
|
const toolbarActions: ToolbarAction[] = [
|
||||||
|
{
|
||||||
|
key: 'add',
|
||||||
|
label: '新建',
|
||||||
|
type: 'primary',
|
||||||
|
icon: <PlusOutlined />,
|
||||||
|
onClick: handleAdd,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const actionColumns: ProColumns<MailAccountVO> = {
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 120,
|
||||||
|
render: (
|
||||||
|
text: React.ReactNode,
|
||||||
|
record: MailAccountVO,
|
||||||
|
_: number,
|
||||||
|
action: ProCoreActionType | undefined,
|
||||||
|
) => [
|
||||||
|
<a key="edit" onClick={() => handleEdit(record)}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a key="detail" onClick={() => handleSend(record)}>
|
||||||
|
详情
|
||||||
|
</a>,
|
||||||
|
<Popconfirm
|
||||||
|
title="是否删除?"
|
||||||
|
key="delete"
|
||||||
|
onConfirm={async () => {
|
||||||
|
await deleteMailAccount(record.id);
|
||||||
|
message.success('删除成功');
|
||||||
|
action?.reload?.();
|
||||||
|
}}
|
||||||
|
okText="是"
|
||||||
|
cancelText="否"
|
||||||
|
>
|
||||||
|
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||||
|
删除
|
||||||
|
</a>
|
||||||
|
</Popconfirm>,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const columns = [...baseTenantColumns, actionColumns];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EnhancedProTable<MailAccountVO>
|
||||||
|
ref={tableRef}
|
||||||
|
columns={columns}
|
||||||
|
request={onFetch}
|
||||||
|
headerTitle="登录日志"
|
||||||
|
showIndex={false}
|
||||||
|
toolbarActions={toolbarActions}
|
||||||
|
showSelection={false}
|
||||||
|
/>
|
||||||
|
<ConfigurableDrawerForm
|
||||||
|
labelCol={{ span: 7 }}
|
||||||
|
wrapperCol={{ span: 17 }}
|
||||||
|
ref={configurableDrawerRef}
|
||||||
|
title={formStatusType[type]}
|
||||||
|
columns={formColumns()}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SyStemMessageSmsTemplate;
|
||||||
171
src/pages/system/messages/mail/log/config.tsx
Normal file
171
src/pages/system/messages/mail/log/config.tsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
import type {
|
||||||
|
ProColumns,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import type { SmsLogVO } from '@/services/system/message/sms/log';
|
||||||
|
export const baseTenantColumns: ProColumns<SmsLogVO>[] = [
|
||||||
|
{
|
||||||
|
title: '编号',
|
||||||
|
dataIndex: 'id',
|
||||||
|
width: 100,
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号',
|
||||||
|
dataIndex: 'mobile',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信内容',
|
||||||
|
dataIndex: 'templateContent',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发送状态',
|
||||||
|
dataIndex: 'sendStatus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发送人名称',
|
||||||
|
dataIndex: 'templateNickname',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '接收状态',
|
||||||
|
dataIndex: 'receiveStatus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信渠道',
|
||||||
|
dataIndex: 'channelId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '模板编号',
|
||||||
|
dataIndex: 'templateId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信类型',
|
||||||
|
dataIndex: 'templateType',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
valueType: 'dateRange',
|
||||||
|
hideInSearch: true,
|
||||||
|
search: {
|
||||||
|
transform: (value) => {
|
||||||
|
return {
|
||||||
|
[`createTime[0]`]: dayjs(value[0])
|
||||||
|
.startOf('day')
|
||||||
|
.format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
[`createTime[1]`]: dayjs(value[1])
|
||||||
|
.endOf('day')
|
||||||
|
.format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render: (_, record: SmsLogVO) =>
|
||||||
|
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '接收时间',
|
||||||
|
dataIndex: 'receiveTime',
|
||||||
|
valueType: 'dateRange',
|
||||||
|
hideInTable: true,
|
||||||
|
search: {
|
||||||
|
transform: (value) => {
|
||||||
|
return {
|
||||||
|
[`createTime[0]`]: dayjs(value[0])
|
||||||
|
.startOf('day')
|
||||||
|
.format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
[`createTime[1]`]: dayjs(value[1])
|
||||||
|
.endOf('day')
|
||||||
|
.format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render: (_, record: SmsLogVO) =>
|
||||||
|
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const descriptionsColumns = (): ProDescriptionsItemProps<
|
||||||
|
Record<string, any>,
|
||||||
|
'text'
|
||||||
|
>[] => [
|
||||||
|
{
|
||||||
|
title: '日志主键',
|
||||||
|
key: 'id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信渠道',
|
||||||
|
key: 'channelId',
|
||||||
|
dataIndex: 'channelId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信模板',
|
||||||
|
key: 'templateCode',
|
||||||
|
dataIndex: 'templateCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'API 的模板编号',
|
||||||
|
key: 'apiTemplateId',
|
||||||
|
dataIndex: 'apiTemplateId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户信息',
|
||||||
|
key: 'mobile',
|
||||||
|
dataIndex: 'mobile',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信内容',
|
||||||
|
key: 'templateContent',
|
||||||
|
dataIndex: 'templateContent',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信参数',
|
||||||
|
key: 'templateParams',
|
||||||
|
dataIndex: 'templateParams',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createTime',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发送状态',
|
||||||
|
key: 'sendStatus',
|
||||||
|
dataIndex: 'sendStatus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发送时间',
|
||||||
|
key: 'sendTime',
|
||||||
|
dataIndex: 'sendTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'API 发送结果',
|
||||||
|
key: 'apiSendMsg',
|
||||||
|
dataIndex: 'apiSendMsg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'API 短信编号',
|
||||||
|
key: 'apiSerialNo',
|
||||||
|
dataIndex: 'apiSerialNo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'API 请求编号',
|
||||||
|
key: 'apiRequestId',
|
||||||
|
dataIndex: 'apiRequestId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'API 接收状态',
|
||||||
|
key: 'receiveStatus',
|
||||||
|
dataIndex: 'receiveStatus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'API 接收结果',
|
||||||
|
key: 'apiReceiveMsg',
|
||||||
|
dataIndex: 'apiReceiveMsg',
|
||||||
|
},
|
||||||
|
];
|
||||||
70
src/pages/system/messages/mail/log/index.tsx
Normal file
70
src/pages/system/messages/mail/log/index.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
|
import React, { useRef } from 'react';
|
||||||
|
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||||
|
import ModalDescriptions, {
|
||||||
|
type DescriptionsFormRef,
|
||||||
|
} from '@/components/ModalDescriptions';
|
||||||
|
import {
|
||||||
|
getSmsLogPage,
|
||||||
|
type SmsLogVO,
|
||||||
|
} from '@/services/system/message/sms/log';
|
||||||
|
import { baseTenantColumns, descriptionsColumns } from './config';
|
||||||
|
|
||||||
|
const SyStemMessageNotifyMessage = () => {
|
||||||
|
const tableRef = useRef<ActionType>(null);
|
||||||
|
const descriptionsRef = useRef<DescriptionsFormRef>(null);
|
||||||
|
const onFetch = async (
|
||||||
|
params: SmsLogVO & {
|
||||||
|
pageSize?: number;
|
||||||
|
current?: number;
|
||||||
|
},
|
||||||
|
) => {
|
||||||
|
const data = await getSmsLogPage({
|
||||||
|
...params,
|
||||||
|
pageNo: params.current,
|
||||||
|
pageSize: params.pageSize,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data.list,
|
||||||
|
success: true,
|
||||||
|
total: data.total,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDetail = (record: SmsLogVO) => {
|
||||||
|
descriptionsRef.current?.open(record);
|
||||||
|
};
|
||||||
|
|
||||||
|
const actionColumns: ProColumns<SmsLogVO> = {
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 80,
|
||||||
|
render: (text: React.ReactNode, record: SmsLogVO) => [
|
||||||
|
<a key="editable" onClick={() => handleDetail(record)}>
|
||||||
|
详情
|
||||||
|
</a>,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const columns = [...baseTenantColumns, actionColumns];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EnhancedProTable<SmsLogVO>
|
||||||
|
ref={tableRef}
|
||||||
|
columns={columns}
|
||||||
|
request={onFetch}
|
||||||
|
headerTitle="登录日志"
|
||||||
|
showIndex={false}
|
||||||
|
showSelection={false}
|
||||||
|
/>
|
||||||
|
<ModalDescriptions
|
||||||
|
ref={descriptionsRef}
|
||||||
|
title="登录日志详情"
|
||||||
|
columns={descriptionsColumns()}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SyStemMessageNotifyMessage;
|
||||||
171
src/pages/system/messages/mail/template/config.tsx
Normal file
171
src/pages/system/messages/mail/template/config.tsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
import type {
|
||||||
|
ProColumns,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProFormColumnsType,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import type { SmsTemplateVO } from '@/services/system/message/sms/template';
|
||||||
|
export const baseTenantColumns: ProColumns<SmsTemplateVO>[] = [
|
||||||
|
{
|
||||||
|
title: '模板编码',
|
||||||
|
dataIndex: 'code',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '模板名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '模板内容',
|
||||||
|
dataIndex: 'content',
|
||||||
|
hideInSearch: true, // 在搜索表单中隐藏
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
dataIndex: 'remark',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信 API 的模板编号',
|
||||||
|
dataIndex: 'apiTemplateId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信渠道',
|
||||||
|
dataIndex: 'channelCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
valueType: 'dateRange',
|
||||||
|
render: (_, record: SmsTemplateVO) =>
|
||||||
|
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||||
|
{
|
||||||
|
title: '短信渠道编号',
|
||||||
|
dataIndex: 'channelId',
|
||||||
|
valueType: 'select',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择短信渠道编号',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
valueType: 'select',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择短信类型',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '模板编号',
|
||||||
|
dataIndex: 'code',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入模板编号',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '模板名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入模板名称',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '模板内容',
|
||||||
|
dataIndex: 'type',
|
||||||
|
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入模板内容',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '开启状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
valueType: 'select',
|
||||||
|
|
||||||
|
fieldProps: {
|
||||||
|
placeholder: '请选择开启状态',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '正常',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择状态',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '短信 API 模板编号',
|
||||||
|
dataIndex: 'apiTemplateId',
|
||||||
|
fieldProps: {
|
||||||
|
placeholder: '请输入短信 API 的模板编号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
dataIndex: 'remark',
|
||||||
|
fieldProps: {
|
||||||
|
placeholder: '请输入备注',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const formTestColumns = (type: string): ProFormColumnsType[] => [
|
||||||
|
{
|
||||||
|
title: '模板内容',
|
||||||
|
dataIndex: 'content',
|
||||||
|
valueType: 'textarea',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号',
|
||||||
|
dataIndex: 'mobile',
|
||||||
|
},
|
||||||
|
];
|
||||||
174
src/pages/system/messages/mail/template/index.tsx
Normal file
174
src/pages/system/messages/mail/template/index.tsx
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import type {
|
||||||
|
ActionType,
|
||||||
|
ProColumns,
|
||||||
|
ProCoreActionType,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { message, Popconfirm } from 'antd';
|
||||||
|
import React, { useCallback, useRef, useState } from 'react';
|
||||||
|
import ConfigurableDrawerForm, {
|
||||||
|
type ConfigurableDrawerFormRef,
|
||||||
|
} from '@/components/DrawerForm';
|
||||||
|
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||||
|
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||||
|
import { formStatusType } from '@/constants';
|
||||||
|
import {
|
||||||
|
createSmsTemplate,
|
||||||
|
deleteSmsTemplate,
|
||||||
|
getSmsTemplatePage,
|
||||||
|
type SmsTemplateVO,
|
||||||
|
sendSms,
|
||||||
|
updateSmsTemplate,
|
||||||
|
} from '@/services/system/message/sms/template';
|
||||||
|
import { baseTenantColumns, formColumns, formTestColumns } from './config';
|
||||||
|
|
||||||
|
const SyStemMessageSmsTemplate = () => {
|
||||||
|
const tableRef = useRef<ActionType>(null);
|
||||||
|
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||||
|
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||||
|
const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||||
|
const [currentItem, setCurrentItem] = useState<SmsTemplateVO>();
|
||||||
|
const onFetch = async (
|
||||||
|
params: SmsTemplateVO & {
|
||||||
|
pageSize?: number;
|
||||||
|
current?: number;
|
||||||
|
},
|
||||||
|
) => {
|
||||||
|
const data = await getSmsTemplatePage({
|
||||||
|
...params,
|
||||||
|
pageNo: params.current,
|
||||||
|
pageSize: params.pageSize,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data.list,
|
||||||
|
success: true,
|
||||||
|
total: data.total,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSend = async (record: SmsTemplateVO) => {
|
||||||
|
setType('test');
|
||||||
|
setCurrentItem(record);
|
||||||
|
testRef.current?.open(record);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (record: SmsTemplateVO) => {
|
||||||
|
setType('update');
|
||||||
|
setCurrentItem(record);
|
||||||
|
|
||||||
|
configurableDrawerRef.current?.open(record);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
setType('create');
|
||||||
|
configurableDrawerRef.current?.open();
|
||||||
|
};
|
||||||
|
const handleSubmit = useCallback(
|
||||||
|
async (values: SmsTemplateVO) => {
|
||||||
|
if (type === 'create') {
|
||||||
|
await createSmsTemplate(values);
|
||||||
|
message.success('创建成功');
|
||||||
|
} else {
|
||||||
|
await updateSmsTemplate({
|
||||||
|
...values,
|
||||||
|
id: currentItem!.id,
|
||||||
|
});
|
||||||
|
message.success('编辑成功');
|
||||||
|
}
|
||||||
|
tableRef.current?.reload();
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
[type, currentItem],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTestSubmit = useCallback(
|
||||||
|
async (values: SmsTemplateVO) => {
|
||||||
|
if (currentItem?.status === 1) {
|
||||||
|
return message.error('请先开启状态');
|
||||||
|
}
|
||||||
|
const res = await sendSms({
|
||||||
|
...currentItem,
|
||||||
|
...values,
|
||||||
|
mobile: '',
|
||||||
|
templateParams: new Map(),
|
||||||
|
templateCode: currentItem!.code,
|
||||||
|
});
|
||||||
|
message.success('提交发送成功！发送结果，见发送日志编号：' + res);
|
||||||
|
tableRef.current?.reload();
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
[type, currentItem],
|
||||||
|
);
|
||||||
|
const toolbarActions: ToolbarAction[] = [
|
||||||
|
{
|
||||||
|
key: 'add',
|
||||||
|
label: '新建',
|
||||||
|
type: 'primary',
|
||||||
|
icon: <PlusOutlined />,
|
||||||
|
onClick: handleAdd,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const actionColumns: ProColumns<SmsTemplateVO> = {
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 120,
|
||||||
|
render: (
|
||||||
|
text: React.ReactNode,
|
||||||
|
record: SmsTemplateVO,
|
||||||
|
_: number,
|
||||||
|
action: ProCoreActionType | undefined,
|
||||||
|
) => [
|
||||||
|
<a key="edit" onClick={() => handleEdit(record)}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a key="detail" onClick={() => handleSend(record)}>
|
||||||
|
测试
|
||||||
|
</a>,
|
||||||
|
<Popconfirm
|
||||||
|
title="是否删除?"
|
||||||
|
key="delete"
|
||||||
|
onConfirm={async () => {
|
||||||
|
await deleteSmsTemplate(record.id);
|
||||||
|
message.success('删除成功');
|
||||||
|
action?.reload?.();
|
||||||
|
}}
|
||||||
|
okText="是"
|
||||||
|
cancelText="否"
|
||||||
|
>
|
||||||
|
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||||
|
删除
|
||||||
|
</a>
|
||||||
|
</Popconfirm>,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const columns = [...baseTenantColumns, actionColumns];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<EnhancedProTable<SmsTemplateVO>
|
||||||
|
ref={tableRef}
|
||||||
|
columns={columns}
|
||||||
|
request={onFetch}
|
||||||
|
headerTitle="登录日志"
|
||||||
|
showIndex={false}
|
||||||
|
toolbarActions={toolbarActions}
|
||||||
|
showSelection={false}
|
||||||
|
/>
|
||||||
|
<ConfigurableDrawerForm
|
||||||
|
ref={configurableDrawerRef}
|
||||||
|
title={formStatusType[type]}
|
||||||
|
columns={formColumns(type)}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
/>
|
||||||
|
<ConfigurableDrawerForm
|
||||||
|
ref={testRef}
|
||||||
|
title={formStatusType[type]}
|
||||||
|
columns={formTestColumns(type)}
|
||||||
|
onSubmit={handleTestSubmit}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SyStemMessageSmsTemplate;
|
||||||
@@ -6,6 +6,7 @@ export interface MailAccountVO {
|
|||||||
username: string;
|
username: string;
|
||||||
password: string;
|
password: string;
|
||||||
host: string;
|
host: string;
|
||||||
|
createTime: Date;
|
||||||
port: number;
|
port: number;
|
||||||
sslEnable: boolean;
|
sslEnable: boolean;
|
||||||
starttlsEnable: boolean;
|
starttlsEnable: boolean;
|
||||||
|
|||||||
Reference in New Issue
Block a user