201 lines
11 KiB
JavaScript
201 lines
11 KiB
JavaScript
import React from 'react';
|
||
import { Tabs, Col, Divider, Input, Form, Space, Modal, Switch, DatePicker, } from 'antd';
|
||
import Styles from './web.module.less';
|
||
import dayjs from 'dayjs';
|
||
const { confirm } = Modal;
|
||
export default function Email(props) {
|
||
const { emails, setValue, removeItem, cleanKey, } = props;
|
||
return (<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
|
||
{/* <Row>
|
||
<Card className={Styles.tips}>
|
||
每种均可配置一个，相应的服务所使用的帐号请准确对应
|
||
</Card>
|
||
</Row> */}
|
||
<Col flex="auto">
|
||
<Divider orientation="left" className={Styles.title}>
|
||
邮箱配置
|
||
</Divider>
|
||
<Tabs tabPosition={'top'} size={'middle'} type="editable-card"
|
||
// hideAdd={!(emails.length > 0)}
|
||
onEdit={(targetKey, action) => {
|
||
if (action === 'add') {
|
||
setValue(`${emails.length || 0}`, {});
|
||
}
|
||
else {
|
||
removeItem('', parseInt(targetKey, 10));
|
||
}
|
||
}} items={emails.length > 0
|
||
? emails.map((ele, idx) => ({
|
||
key: `${idx}`,
|
||
label: ele.account ? ele.account : `邮箱${idx + 1}`,
|
||
children: (<Form colon={false} labelAlign="left" layout="vertical" style={{ marginTop: 10 }}>
|
||
<Form.Item label="主机名">
|
||
<>
|
||
<Input placeholder="请输入主机名(例：smtp.163.com)" type="text" value={ele.host} onChange={(e) => {
|
||
setValue(`${idx}.host`, e.target.value);
|
||
}}/>
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="端口">
|
||
<Input placeholder="请输入端口号(例：465)" value={ele.port} onChange={(e) => {
|
||
setValue(`${idx}.port`, Number(e.target.value));
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="启用SSL加密" tooltip="当连接使用的是SSL端口，请启用SSL加密功能以保障数据传输安全">
|
||
<>
|
||
<Switch checkedChildren="是" unCheckedChildren="否" checked={ele?.secure} onChange={(checked) => setValue(`${idx}.secure`, checked)}/>
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="账号">
|
||
<Input placeholder="请输入邮箱账号(例：xxxx@163.com)" type="text" value={ele.account} onChange={(e) => {
|
||
setValue(`${idx}.account`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="授权码">
|
||
<Input.Password type="password" value={ele.password} onChange={(e) => {
|
||
setValue(`${idx}.password`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="授权码过期时间" tooltip="选填">
|
||
<DatePicker value={ele.passwordExpiredAt ? dayjs(ele.passwordExpiredAt) : undefined} allowClear showNow={false} showTime={{ defaultValue: dayjs(dayjs().add(1, 'minute').startOf('minute'), 'HH:mm:ss') }} format="YYYY-MM-DD HH:mm" disabledDate={(current) => {
|
||
return current && current < dayjs().subtract(1, 'day').endOf('day');
|
||
}} disabledTime={(date) => {
|
||
const range = (start, end) => {
|
||
const result = [];
|
||
for (let i = start; i < end; i++) {
|
||
result.push(i);
|
||
}
|
||
return result;
|
||
};
|
||
if (!date) {
|
||
return {
|
||
disabledHours: () => range(0, 24),
|
||
disabledMinutes: () => range(0, 60),
|
||
disabledSeconds: () => range(0, 60),
|
||
};
|
||
}
|
||
const now = dayjs();
|
||
if (!date || !date.isSame(now, 'day')) {
|
||
return {
|
||
disabledHours: () => [],
|
||
disabledMinutes: () => [],
|
||
disabledSeconds: () => [],
|
||
};
|
||
}
|
||
return {
|
||
disabledHours: () => range(0, now.hour()),
|
||
disabledMinutes: (selectedHour) => {
|
||
if (selectedHour && date.isSame(now, 'hour')) {
|
||
return range(0, now.minute() + 1);
|
||
}
|
||
else {
|
||
return [];
|
||
}
|
||
},
|
||
disabledSeconds: () => [],
|
||
};
|
||
}} onChange={(value, dateString) => {
|
||
if (value) {
|
||
setValue(`${idx}.passwordExpiredAt`, dayjs(value).startOf('minute').valueOf() //过期时间为选定的分钟的开始
|
||
);
|
||
}
|
||
else {
|
||
setValue(`${idx}.passwordExpiredAt`, undefined);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="发件人名称" tooltip="选填，若未填写则显示邮箱账号">
|
||
<Input placeholder="请输入发件人名称" type="text" value={ele.name} onChange={(e) => {
|
||
setValue(`${idx}.name`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>),
|
||
}))
|
||
: [
|
||
{
|
||
label: '新建帐号',
|
||
key: '0',
|
||
children: (<Form colon={true} labelAlign="left" layout="vertical" style={{ marginTop: 10 }}>
|
||
|
||
<Form.Item label="主机名">
|
||
<>
|
||
<Input placeholder="请输入主机名(例：smtp.163.com)" type="text" value="" onChange={(e) => {
|
||
setValue(`0.host`, e.target.value);
|
||
}}/>
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="端口">
|
||
<Input placeholder="请输入端口号(例：465)" value="" onChange={(e) => {
|
||
setValue(`0.port`, Number(e.target.value));
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="账号">
|
||
<Input placeholder="请输入邮箱账号(例：xxxx@163.com)" type="text" value="" onChange={(e) => {
|
||
setValue(`0.account`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="授权码">
|
||
<Input.Password type="password" value="" onChange={(e) => {
|
||
setValue(`0.password`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="授权码过期时间" tooltip="选填">
|
||
<DatePicker value={undefined} allowClear showNow={false} showTime={{ defaultValue: dayjs(dayjs().add(1, 'minute').startOf('minute'), 'HH:mm:ss') }} format="YYYY-MM-DD HH:mm" disabledDate={(current) => {
|
||
return current && current < dayjs().subtract(1, 'day').endOf('day');
|
||
}} disabledTime={(date) => {
|
||
const range = (start, end) => {
|
||
const result = [];
|
||
for (let i = start; i < end; i++) {
|
||
result.push(i);
|
||
}
|
||
return result;
|
||
};
|
||
if (!date) {
|
||
return {
|
||
disabledHours: () => range(0, 24),
|
||
disabledMinutes: () => range(0, 60),
|
||
disabledSeconds: () => range(0, 60),
|
||
};
|
||
}
|
||
const now = dayjs();
|
||
if (!date || !date.isSame(now, 'day')) {
|
||
return {
|
||
disabledHours: () => [],
|
||
disabledMinutes: () => [],
|
||
disabledSeconds: () => [],
|
||
};
|
||
}
|
||
return {
|
||
disabledHours: () => range(0, now.hour()),
|
||
disabledMinutes: (selectedHour) => {
|
||
if (selectedHour && date.isSame(now, 'hour')) {
|
||
return range(0, now.minute() + 1);
|
||
}
|
||
else {
|
||
return [];
|
||
}
|
||
},
|
||
disabledSeconds: () => [],
|
||
};
|
||
}} onChange={(value, dateString) => {
|
||
if (value) {
|
||
setValue(`0.passwordExpiredAt`, dayjs(value).startOf('minute').valueOf() //过期时间为选定的分钟的开始
|
||
);
|
||
}
|
||
else {
|
||
setValue(`0.passwordExpiredAt`, undefined);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="发件人名称" tooltip="选填，若未填写则显示邮箱账号">
|
||
<Input placeholder="请输入发件人名称" type="text" value="" onChange={(e) => {
|
||
setValue(`0.name`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>),
|
||
},
|
||
]}></Tabs>
|
||
</Col>
|
||
</Space>);
|
||
}
|