97 lines
5.5 KiB
JavaScript
97 lines
5.5 KiB
JavaScript
import React from 'react';
|
||
import { Tabs, Col, Divider, Input, Form, Space, Modal, } from 'antd';
|
||
import Styles from './web.module.less';
|
||
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}`, {});
|
||
}
|
||
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="账号">
|
||
<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="选填，若未填写则显示邮箱账号">
|
||
<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="选填，若未填写则显示邮箱账号">
|
||
<Input placeholder="请输入发件人名称" type="text" value="" onChange={(e) => {
|
||
setValue(`0.name`, e.target.value);
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>),
|
||
},
|
||
]}></Tabs>
|
||
</Col>
|
||
</Space>);
|
||
}
|