app-base-web/src/pages/message/MsgEmail/MsgEmailEdit.js

web development common base package.

import React from 'react';
import { Form, Row, Col, Button, Input, message } from 'antd';
import api from '../../../library/util-axios';
import ReactUeditor from 'react-ueditor'
import File from '../../../library/file';
import Dic from '../../../library/dic';

// 信息管理-邮件管理
const title = "邮件管理";
const url = "MsgEmail/";
export default class FormEdit extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			...props.values
		};
		this.formRef = React.createRef();
	}
	onSave = (values) => {
		let me = this;
		values.id = this.state.id;
		api.post(url + "save", values).then(function (rs) {
			if (rs.success) {
				message.info(rs.msg);
				me.props.onSave(values);
			} else { message.error(rs.msg); }
		});
	}
	onChangeUeContent = (value) => {
		this.state.content = value;
	}
	onChangeUeImage = (e) => {
		return new Promise(function (resolve, reject) {
			let file = e.target.files[0]
			// 在这里将你的图片上传到服务器，在上传成功的回调中执行
			const formData = new FormData()
			formData.append('file', file)
			fetch("https://fastdfs.7ipr.com/ipr/fastdfs/upload", {
				method: "POST",
				body: formData,
			}).then(res => res.json()).then(function (response) {
				let url = response.data;
				resolve(url)
			});
		})
	}
	render() {
		return (
			<Form ref={this.formRef} className="form-edit" layout="vertical" onFinish={this.onSave}>
				<div className="form-title">
					<i> {title} - {this.state.id ? "编辑" : "录入"}</i>
					{this.state.id ? <span><Button className="btn-return" onClick={this.props.onEditReturn}><i className="iconfont icon-return"></i>返回</Button></span> : ""}
				</div>
				<div className="form-content" style={{ height: this.props.height }}>
					<Row>
						{/* <Col xs={12}>
							<Form.Item
								name="parentId"
								label="业务ID"
								initialValue={this.state.parentId}
							>
								<Input />
							</Form.Item>
						</Col> */}
						<Col xs={12}>
							<Form.Item
								name="parentName"
								label="业务名称"
								initialValue={this.state.parentName}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row>
					{/* <Row>
						<Col xs={12}>
							<Form.Item
								name="senderId"
								label="发件人Id"
								initialValue={this.state.senderId}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row> */}
					<Row>
						<Col xs={24}>
							<Form.Item
								name="sendEmail"
								label="发件人"
								initialValue={this.state.sendEmail}
								rules={[{
                                    required: true,
                                    message: '请选择发件人'
                                }]}
							>
								<Dic params={{ app: "app", type: "发送邮件" }} />
							</Form.Item>
						</Col>
					</Row>
					{/* <Row>
						<Col xs={12}>
							<Form.Item
								name="recipientId"
								label="收件人Id"
								initialValue={this.state.recipientId}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row> */}
					<Row>
						<Col xs={24}>
							<Form.Item
								name="receiveEmail"
								label="收件人"
								initialValue={this.state.receiveEmail}
								rules={[{
                                    required: true,
                                    message: '请输入收件人'
                                }]}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col xs={24}>
							<Form.Item
								name="cc"
								label="抄送"
								initialValue={this.state.cc}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col xs={24}>
							<Form.Item
								name="title"
								label="标题"
								initialValue={this.state.title}
								rules={[{
                                    required: true,
                                    message: '请输入标题'
                                }]}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col xs={24}>
							<Form.Item
								name="content"
								label="内容"
								initialValue={this.state.content}
								rules={[{
                                    required: true,
                                    message: '请输入内容'
                                }]}
							>
								<ReactUeditor
									//https://www.npmjs.com/package/react-ueditor
									ueditorPath="/static/ueditor"
									config={{ zIndex: 900 }}
									onChange={this.onChangeUeContent}
									plugins={['uploadImage', 'insertCode']}
									uploadImage={this.onChangeUeImage}
									value={this.state.content}
								/>
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col xs={12}>
							<Form.Item
								name="file"
								label="附件"
								initialValue={this.state.file}
							>
								<File />
							</Form.Item>
						</Col>
					</Row>
					{/* <Row>
						<Col xs={12}>
							<Form.Item
								name="sendTime"
								label="发送时间"
								initialValue={this.state.sendTime}
							>
								<Input />
							</Form.Item>
						</Col>
						<Col xs={12}>
							<Form.Item
								name="code"
								label="发送码"
								initialValue={this.state.code}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row> */}
					{/* <Row>
						<Col xs={24}>
							<Form.Item
								name="sendResult"
								label="发送结果"
								initialValue={this.state.sendResult}
							>
								<Input />
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col xs={12}>
							<Form.Item
								name="state"
								label="邮件状态"
								initialValue={String(this.state.state || "")}
							>
								<Dic params={{ app: "app", type: "邮件状态" }} />
							</Form.Item>
						</Col>
					</Row> */}
				</div>
				<div className="form-toolbar">
					<Button className="btn-cancel" onClick={this.props.onCancel}><i className="iconfont icon-cancel"></i>取消</Button>
					<Button className="btn-submit" htmlType="submit"><i className="iconfont icon-sumit"></i>提交</Button>
				</div>
			</Form>
		);
	}
}