msgAddNew.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import SelecteReciver from './selecteReciver';
import SelecteOrg from './selecteOrg';
import EditorConvertToHTML from './MarkDown';
import {Table,Input,Form,Button,Row,Col,Select,DatePicker,Message,Icon,Modal,Radio, Spin } from 'antd';
import moment from 'moment';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG } from '@src/Api';

const MsgAddNew = Form.create()(
	class extends Component {
		state = {
			msgModalVisible: false, // 消息模板弹框
			orgModalVisible: false, // 接收机构弹框
			selecteReciverShow: {display: 'none'},  //接收人选择展示
			sendTimePickerShow: false,  // 是否展示发送时间选择框
			pushFlag: '1', // 是否为及时推送
			showTimeFlag: false, // 展示开始时间和结束时间是否为必须
			reciverOrgShow: {display: 'none'},  // 接收机构展示
			reciverPeopleShow:{display: 'none'}, // 接收人展示
			allPeopleShow: {display: 'none'}, // 接收为所有人时展示
			CanSelectePeople: false, // 是否可以选择接收人
			selectedRowKeysPeople: [], // 修改时回填的已选择的接收人
			textAreaShow: {display: 'none'}, // 多行文本框展示
			richAreaShow: {display: 'block'}, // 富文本框展示
			richContent: '',   // 富文本内容
			submitMsgData: {}, // 提交的信息
			receiverNumber: '', // 接收者id
			subLoginNameString: '', // 接收者为个人时接收账号字符串
			upDateMsgId: '',  // 修改的信息id
			msgTemplate: '', // 选择的消息模板
			spinStatus: false,
		}
		constructor (props) {
			super(props);

		}
		componentDidMount () {
			 // 修改:回填内容
			let resetMsg = this.props.location.state;
			if (resetMsg) {
				let {id,messageType,messageTitle,pushFlag,pushTime,displayBeginTime,displayEndTime,receiverType,messageContent,receiverAccount,receiverNumber} = resetMsg;

				this.setState({upDateMsgId: id});
				// 及时发送回填
				if (pushFlag == 1) {
					// 及时发送
					this.setState({
						sendTimePickerShow: false,
						pushFlag: 1
					});
				} else if (pushFlag == 2) {
					// 定时发送
					this.setState({
						sendTimePickerShow: true,
						pushFlag: 2
					});
					// 回填定时发送时间
					pushTime = Utils.formateDateToYMDSFM(pushTime);
					let pushTimeStr = moment(pushTime, 'YYYY-MM-DD HH:mm:ss');
					this.props.form.setFieldsValue({pushTimeStr});
				}
				// 展示开始时间和结束时间
				if (displayBeginTime) {
					let displayBeginTimeStr = Utils.formateDateToYMDSFM(displayBeginTime);
					displayBeginTimeStr = moment(displayBeginTimeStr, 'YYYY-MM-DD HH:mm:ss');
					this.props.form.setFieldsValue({displayBeginTimeStr});
				}
				if (displayEndTime) {
					let displayEndTimeStr = Utils.formateDateToYMDSFM(displayEndTime);
					displayEndTimeStr = moment(displayEndTimeStr, 'YYYY-MM-DD HH:mm:ss');
					this.props.form.setFieldsValue({displayEndTimeStr});
				}
				// 接收者类型回填
				if (receiverType == 1) {
					// 所有人
					this.setState({
						reciverOrgShow: {display: 'none'},
						reciverPeopleShow: {display: 'none'},
						allPeopleShow: {display: 'block'},
						CanSelectePeople: true
					});
					this.props.form.setFieldsValue({
						receiverAccount: '所有人'
					});
				} else if (receiverType == 2) {
					// 机构
					this.setState({
						reciverOrgShow: {display: 'block'},
						reciverPeopleShow: {display: 'none'},
						allPeopleShow: {display: 'none'},
						receiverNumber
					});
					// 回填机构名称
					this.props.form.setFieldsValue({
						receiverAccount
					});
					/*  回填选择框中选中的机构 */
					// let selectedKeys;
					// if (receiverNumber.indexOf(',') !== -1) {
					// 	selectedKeys = receiverNumber.split(',');
					// } else {
					// 	selectedKeys = [receiverNumber]
					// }
					// let selectedOrg;
					// if (receiverAccount.indexOf(',') !== -1) {
					// 	selectedOrg = receiverAccount.split(',');
					// 	selectedOrg = selectedOrg.map((item,index) => {
					// 		return {title: item,key: selectedKeys[index]}
					// 	});
					// } else {
					// 	selectedOrg = [{title: receiverAccount,key: selectedKeys[0]}];
					// }
					// console.log(selectedOrg);
					// this.setState({selectedKeys,selectedOrg});
				} else if (receiverType == 3) {
					// 个人
					this.setState({
						reciverOrgShow: {display: 'none'},
						reciverPeopleShow: {display: 'block'},
						allPeopleShow: {display: 'none'},
						CanSelectePeople: false,
						receiverNumber
					});
					// 回填选中的人 页面展示
					this.props.form.setFieldsValue({
						receiverAccount,
					});
					// 回填个人选择
					// let selectedRowKeys = [];
					// let receiverAccountArr = receiverAccount.split(',');
					// let receiverNumberArr = receiverNumber.split(',');
					// receiverNumberArr.forEach((item,index) => {
					// 	selectedRowKeys.push(item + '&&' + receiverAccountArr[index]);
					// });
					// this.setState({selectedRowKeysPeople:selectedRowKeys});
				}
				// 内容回填
				if (messageType == 1) {
					// 展示富文本框
					this.setState({
						textAreaShow: {display: 'none'},
						richAreaShow: {display: 'block'}
					});
					// 富文本框内容回填
					// this.setState({richContent:messageContent});
					this.props.form.setFieldsValue({messageContent});
				} else {
					// 展示多行输入框
					this.setState({
						textAreaShow: {display: 'block'},
						richAreaShow: {display: 'none'}
					});
					// 多行输入框回填
					this.props.form.setFieldsValue({
						messageContent
					});
				}
				//进行数据回填
				this.props.form.setFieldsValue({
					messageType,
					messageTitle,
					pushFlag: '' + pushFlag,
					receiverType
				});
				console.log(this.props.form.getFieldsValue());
			}
		}
		onRef = (ref) => {
			this.comSelectOrg = ref;
		}
		onRefReciver = (ref) => {
			this.comSelectReciver = ref;
		}
		// 消息提交前处理
		handleMsg = (usingStatus) => {
			this.props.form.validateFields((err) => {
				if (!err) {

					// 消息新增提交
					let subNewMsgData = this.props.form.getFieldsValue();
					// 推送时间验证及转换
					if (subNewMsgData.pushFlag == 2) {
						// 推送时间不能为空
						if (subNewMsgData.pushTimeStr) {
							subNewMsgData.pushTimeStr = Utils.formateDateToDetail(subNewMsgData.pushTimeStr._d,'standard');
						} else {
							Message.warn('请选择推送时间');
							return false;
						}
					}
					// 验证展示开始时间和验证结束时间
					if (subNewMsgData.displayBeginTimeStr && !subNewMsgData.displayEndTimeStr) {
						Message.warn('请选择展示结束时间');
						return;
					} else if (!subNewMsgData.displayBeginTimeStr && subNewMsgData.displayEndTimeStr) {
						Message.warn('请选择展示开始时间');
						return;
					}
					// 展示开始时间和结束时间转换大小验证并转换
					if (subNewMsgData.displayBeginTimeStr && subNewMsgData.displayEndTimeStr) {
						if (new Date(subNewMsgData.displayBeginTimeStr._d) > new Date(subNewMsgData.displayEndTimeStr._d)) {
							Message.warn('选择结束时间要大于选择开始时间');
							return;
						}
					}
					if (subNewMsgData.displayBeginTimeStr) {
						subNewMsgData.displayBeginTimeStr = Utils.formateDateToDetail(subNewMsgData.displayBeginTimeStr._d,'standard');
					}
					if (subNewMsgData.displayEndTimeStr) {
						subNewMsgData.displayEndTimeStr = Utils.formateDateToDetail(subNewMsgData.displayEndTimeStr._d,'standard');
					}
					// 验证消息展示开始时间和消息展示结束时间
					let { messageType,receiverType } = subNewMsgData; // 消息类型
					// 判断接收者类型
					if (receiverType == 1) {
						// 所有人
						subNewMsgData.receiverAccount = '所有人';
						subNewMsgData.receiverNumber = '所有人';
					} else if (receiverType == 2) {
						// 机构
						subNewMsgData.receiverNumber = this.state.receiverNumber;
					} else if (receiverType == 3) {
						// 个人
						// subNewMsgData.receiverAccount = this.state.subLoginNameString;
						subNewMsgData.receiverNumber = this.state.receiverNumber;
					}
					// 判断提交内容
					console.log(subNewMsgData);
					// console.log(subNewMsgData.messageContent == "<p></p>");
					if (subNewMsgData.messageType == 1) {

						if (subNewMsgData.messageContent == '' || subNewMsgData.messageContent.length == 8) {
							Message.warn('请输入提交内容');
							return;
						}
					}
					// 具备提交条件
					subNewMsgData.usingStatus = usingStatus; // 保存为状态启用
					if (this.state.upDateMsgId) {
						subNewMsgData.id = this.state.upDateMsgId;
					}
					this.setState({
						spinStatus: true,
					})
					axios.optAjax({
						url: API_SYS_MSG.insertSysMsg,
						data: {...subNewMsgData}
					}).then((res) => {
						if(res && res.code && res.code !== 0){
							this.setState({
								spinStatus: false,
							})
							return
						}
						Message.success('消息保存成功');
						this.props.history.push('/home/msgpush/msgPushControl');
					});
				}
			});
		}
		// 保存新增消息
		saveMsg = () => {
			this.handleMsg(1);
		}
		// 执行新增消息
		executeMsg = () => {
			this.handleMsg(2);
		}
		// 返回
		goback = () => {
			this.props.history.push('/home/msgpush/msgPushControl');
		}
		// 消息类型的选择
		onChangeMsgType = (msgType) => {
			if (msgType == 1) {
				// 富文本框
				this.setState({
					textAreaShow: {display: 'none'},
					richAreaShow: {display: 'block'}
				});
			} else {
				// 多行文本框
				this.setState({
					textAreaShow: {display: 'block'},
					richAreaShow: {display: 'none'}
				})
			}
		}
		// 推送设置及时推送状态
		onChangePushFlag = (e) => {
			let pushFlag = e.target.value;
			if (pushFlag == 1) {
				// 及时推送
				this.setState({
					sendTimePickerShow: false,
					pushFlag
				});
				this.props.form.resetFields(['pushTimeStr']);
			} else if (pushFlag == 2) {
				// 定时推送
				this.setState({
					sendTimePickerShow: true,
					pushFlag
				});
			}
		}
		// 设置接收者类型
		onChangeReciverType = (reciverType) => {
			if (reciverType == 1) {
				// 所有人
				this.setState({
					reciverOrgShow: {display: 'none'},
					reciverPeopleShow: {display: 'none'},
					allPeopleShow: {display: 'block'}
				});
				this.props.form.setFieldsValue({
					receiverAccount: '所有人'
				});
			} else if (reciverType == 2) {
				// 机构
				this.setState({
					reciverOrgShow: {display: 'block'},
					reciverPeopleShow: {display: 'none'},
					allPeopleShow: {display: 'none'}
				});
				this.props.form.setFieldsValue({
					receiverAccount: ''
				});
			} else if (reciverType == 3) {
				// 个人
				this.setState({
					reciverOrgShow: {display: 'none'},
					reciverPeopleShow:{display: 'block'},
					allPeopleShow: {display: 'none'}
				});
				this.props.form.setFieldsValue({
					receiverAccount: ''
				});
				// 展示个人选择框
				this.showRecivers();
			}
		}
		// 设置富文本框内容
		setRichContent = (htmlContent,textArrLenth) => {
			//console.log('textArrLenth',textArrLenth)
			this.props.form.setFieldsValue({messageContent:htmlContent});
			//this.setState({richContent: htmlContent});
		}
		// 打开消息模板选择弹框
		openMsgModal = () => {
			this.setState({msgModalVisible: true});
		}
		// 取消消息模板选择弹框
		handleMsgModalCancel = () => {
			this.setState({msgModalVisible: false});
		}
		// 选择消息模板
		setTemplateName = (template) => {
			this.props.form.setFieldsValue({templateName: template.templateName});
			let messageContent = template.templateContent;
			//console.log('messageContent',messageContent)
			this.setState({messageContent});
			this.props.form.setFieldsValue({messageContent});
			// 如果是多行文本框
			// if (this.state.textAreaShow.display == 'block') {
			// 	this.props.form.setFieldsValue({messageContent});
			// }
		}
		// 打开机构选择框
		showOrgModal = () => {
			this.setState({orgModalVisible: true});
		}
		// 机构确认
		handleOrgOk = (items) => {
			this.setState({orgModalVisible: false});
			let orgString = '';
			let orgIdString = '';
			items.forEach((item,index) => {
				if (index !== items.length-1) {
					orgString += `${item.title},`;
					orgIdString += `${item.key},`;
				} else {
					orgString += `${item.title}`;
					orgIdString += `${item.key}`;
				}
			});
			this.setState({
				receiverNumber: orgIdString
			});
			this.props.form.setFieldsValue({
				receiverAccount: orgString
			});
		}
		// 机构选择取消
		handleOrgCancel = () => {
			this.setState({orgModalVisible: false});
		}
		// 展示接收人弹框
		showRecivers = () => {
			this.setState({selecteReciverShow: {display: 'block'}});
		}
		// 设置选择的接收人
		setReciver = (revicers) => {
			let showNames = []; // 前端展示姓名
			let subUids = [];   // 提交的id
			let subLoginName = []; // 提交的账号
			revicers.forEach((item) => {
				subUids.push(item.split('&&')[0]);
				showNames.push(item.split('&&')[1]);
				// subLoginName.push(item.split('&&')[2]);
			});
			let subUidsString = subUids.join(',');
			let subLoginNameString = subLoginName.join(',');
			let subShowNames = showNames.join(',');
			this.setState({
				receiverNumber: subUidsString,
				subLoginNameString
			});
			this.props.form.setFieldsValue({
				receiverAccount: subShowNames,
			});
		}
		// 关闭接收人弹框
		closeSelectReciver = () => {
			this.setState({selecteReciverShow: {display: 'none'}});
		}
		render () {
			const FormItem = Form.Item;
			const Option = Select.Option;
			const { TextArea } = Input;
			const {getFieldDecorator}  = this.props.form;
			const RadioGroup = Radio.Group;
			const formItemLayout = {
				labelCol: {
				  md: { span: 12 },
				  lg: { span: 8 },
				},
				wrapperCol: {
				  md: { span: 24 },
				  lg: { span: 16 },
				},
			  }
			const formItemLayoutRadio = {
				labelCol: {span: 12},
				wrapper: {span:6}
			};
			const formTextAreaLayout = {
				labelCol: {span: 2},
				wrapperCol: {span: 16}
			}
			let messageContent = '';
			if (this.props.location.state) {
				messageContent = this.props.location.state.messageContent;
			}
			if (this.state.messageContent) {
				messageContent = '<h1>' +  this.state.messageContent + '</h1>';
			}

			// 修改时回填个人和机构选择框
			let selectedRowKeysPeople = []; // 个人
			let selectedKeys = []; // 机构key
			let selectedOrg = []; // 机构对象
			if (this.props.location.state) {
				let {receiverType,receiverAccount,receiverNumber} = this.props.location.state;
				if (receiverType == 3) {
					// 回填个人
					let selectedRowKeys = [];
					let receiverAccountArr = receiverAccount.split(',');
					let receiverNumberArr = receiverNumber.split(',');
					receiverNumberArr.forEach((item,index) => {
						selectedRowKeys.push(item + '&&' + receiverAccountArr[index]);
					});
					selectedRowKeysPeople = selectedRowKeys;
					// this.setState({selectedRowKeysPeople:selectedRowKeys});
				} else if (receiverType == 2) {
					// 回填机构
					if (receiverNumber.indexOf(',') !== -1) {
						selectedKeys = receiverNumber.split(',');
					} else {
						selectedKeys = [receiverNumber]
					}
					if (receiverAccount.indexOf(',') !== -1) {
						selectedOrg = receiverAccount.split(',');
						selectedOrg = selectedOrg.map((item,index) => {
							return {title: item,key: selectedKeys[index]}
						});
					} else {
						selectedOrg = [{title: receiverAccount,key: selectedKeys[0]}];
					}
				}
			}
			return (
				<div className="com-msgAddNew" style={{position: 'relative'}}>
				<Spin tip="加载中..." spinning = {this.state.spinStatus}>
					<div className="nav"><a href="#/home/msgpush/msgPushControl">消息推送</a> > <span>发布消息</span></div>
					<WhiteBar title="基本信息" />
					<div className="form-wrapper  taskContent" style={{background: '#fff',paddingTop:20,paddingLeft:15,minHeight:920}}>
						<Form>
							<Row gutter={24}>
								<Col span="6">
									<FormItem {...formItemLayout} label="消息类型">
	                                    {
	                                        getFieldDecorator('messageType',{
	                                            rules: [
	                                            	{required: true,message: '请选择消息类型'}
	                                            ]
	                                        })(
	                                        	<Select onChange={this.onChangeMsgType} placeholder="消息类型">
	                                                <Option value={1}>pc</Option>
	                                                <Option value={2}>app</Option>
	                                                <Option value={3}>短信</Option>
	                                                <Option value={4}>邮件</Option>
	                                                <Option value={5}>微信</Option>
	                                            </Select>
	                                        )
	                                    }
	                                </FormItem>
								</Col>
								<Col span={6}>
									<FormItem {...formItemLayout} label="标题">
	                                    {
	                                        getFieldDecorator('messageTitle',{
	                                            rules: [
	                                            	{required: true, message: '请输入标题'},
	                                            	{ max: 50, whitespace: true, message: '标题最长为50位字符' },
	                                            ]
	                                        })(
	                                        	<Input type="text"  placeholder="标题名称" />
	                                        )
	                                    }
	                                </FormItem>
								</Col>
								<Col span={5}>
									<FormItem {...formItemLayout} label="及时发送">
	                                    {
	                                        getFieldDecorator('pushFlag',{
	                                            rules: [
	                                            	{required: true,message: '请选择发送状态'}
	                                            ]
	                                        })(
	                                        	<RadioGroup onChange={this.onChangePushFlag}>
	                                        		<Radio value="1">是</Radio>
              										<Radio value="2">否</Radio>
	                                        	</RadioGroup>
	                                        )
	                                    }
	                                </FormItem>
								</Col>
								<Col span={6}>
								   {
								   this.state.sendTimePickerShow ?
									<FormItem>
										{
											getFieldDecorator('pushTimeStr',{
												rules: [
												     {required: true,message: '请选择发送时间'}
													 //{required: this.state.pushFlag == 1 ? false:true,message: '请选择发送时间'}
												]
											})(
						                      	<DatePicker
						                      	showTime
	  											format="YYYY-MM-DD HH:mm:ss"
						                      	placeholder="发送时间" />
											)
										}
									</FormItem>
									:''
									}
								</Col>
							</Row>
							<Row>
								<Col span={6}>
									<FormItem {...formItemLayout} label="展示时间">
										{
											getFieldDecorator('displayBeginTimeStr',{
												rules: [
													// {required: this.state.showTimeFlag,message: '请选择展示开始时间'}
												]
											})(
						                      	<DatePicker
						                      	showTime
	  											format="YYYY-MM-DD HH:mm:ss"
						                      	placeholder="展示开始时间" />
											)
										}
									</FormItem>
								</Col>
								<Col span={1} style={{marginTop: 10, textAlign:"center", marginLeft:"-30px"}}>
									<span>至</span>
								</Col>
								<Col span={4}>
									<FormItem>
										{
											getFieldDecorator('displayEndTimeStr',{
												rules: [
													// {required: this.state.showTimeFlag,message: '请选择展示结束时间'}
												]
											})(
						                      	<DatePicker
						                      	showTime
	  											format="YYYY-MM-DD HH:mm:ss"
						                      	placeholder="展示结束时间" />
											)
										}
									</FormItem>
								</Col>
								<Col span={6}>
									<FormItem {...formItemLayout} label="选择消息模板">
	                                    {
	                                        getFieldDecorator('templateName',{
	                                            rules: [
	                                            ]
	                                        })(
	                                        	<Input onClick={this.openMsgModal} type="text" suffix={<Icon type="search" style={{ color: '#aaa' }} />}  placeholder="消息模板" />
	                                        )
	                                    }
	                                </FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={6}>
									<FormItem {...formItemLayout} label="接收者类型">
										{
	                                        getFieldDecorator('receiverType',{
	                                            rules: [
	                                            	{required: true,message: '请选择接收者类型'}
	                                            ]
	                                        })(
	                                        	<Select onChange={this.onChangeReciverType} placeholder="接收者类型">
	                                                <Option value={1}>所有人</Option>
	                                                <Option value={2}>机构</Option>
	                                                <Option value={3}>个人</Option>
	                                            </Select>
	                                        )
	                                    }
									</FormItem>
								</Col>
								<Col span={8} style={this.state.allPeopleShow}>
									<FormItem {...formItemLayout} label="接收人">
										{
											getFieldDecorator('receiverAccount',{
												rules: [
													{required: true, message: '请选择接收人'}
												]
											})(
												<Input disabled onClick={this.showRecivers}    placeholder="所有人" />
											)
										}
									</FormItem>
								</Col>
								<Col span={8} style={this.state.reciverOrgShow}>
									<FormItem {...formItemLayout} label="接收机构">
										{
											getFieldDecorator('receiverAccount',{
												rules: [
													{required: true, message: '请选择接收机构'}
												]
											})(
												<Input disabled  placeholder="接收机构" />
											)
										}
									</FormItem>
								</Col>
								<Col span={2} style={this.state.reciverOrgShow}>
									<div style={{marginLeft:10,fontSize:25}}>
	                                    <Icon onClick={this.showOrgModal} type="appstore" />
	                                </div>
								</Col>


								<Col span={8} style={this.state.reciverPeopleShow}>
									<FormItem {...formItemLayout} label="接收人">
										{
											getFieldDecorator('receiverAccount',{
												rules: [
													{required: true, message: '请选择接收人'}
												]
											})(
												<Input disabled   placeholder="接收人" />
											)
										}
									</FormItem>
								</Col>
								<Col span={2} style={this.state.reciverPeopleShow}>
									<div style={{marginLeft:10,fontSize:25}}>
	                                    <Icon onClick={this.showRecivers} type="appstore" />
	                                </div>
								</Col>
							</Row>
							<Row style={this.state.textAreaShow}>
								<Col span={24} >
									<FormItem {...formTextAreaLayout} label="消息内容:">
	                                    {
	                                        getFieldDecorator('messageContent',{
	                                            rules: [
	                                            	{required: true,message: '请输入消息内容'},
	                                            	{ max: 5000, whitespace: true, message: '消息内容最长为5000位字符' },

	                                            ]
	                                        })(
	                                        	<TextArea style={{minHeight:400}} placeholder="消息内容" />
	                                        )
	                                    }
	                                </FormItem>
								</Col>
							</Row>
							<Row style={this.state.richAreaShow}>
							    <FormItem {...formTextAreaLayout} label="消息内容:">
                                    {
                                        getFieldDecorator('messageContent',{
                                            rules: [
                                            	{required: true,message: '请输入消息内容'},
                                            ]
                                        })(
                                          <div style={{border: '1px solid #D2D2D2'}}>
											<EditorConvertToHTML messageContent={messageContent} setRichContent={this.setRichContent} />
										</div>
                                        )
                                    }
                                </FormItem>
							</Row>
						</Form>
					</div>
					<div className="submitBtn">
						 <Button onClick={this.saveMsg}  style={{background: '#5669DA',color:'#fff'}}>保存</Button>
						 <Button onClick={this.executeMsg} style={{margin: '0 20px',background: '#49D1B7',color:'#fff'}}>执行</Button>
						 <Button onClick={this.goback}>返回</Button>
					</div>
					{/* 消息模板弹框 */}
					<MsgTemp
						setTemplateName={this.setTemplateName}
						handleCancel={this.handleMsgModalCancel}
						msgModalVisible={this.state.msgModalVisible} 
						tempTypeObj={this.state.tempTypeObj}/>
					{/* 机构列表弹框 */}
					<SelecteOrg
						onRef={this.onRef}
						selectedOrg={selectedOrg}
						selectedKeys={selectedKeys}
						modalVisible={this.state.orgModalVisible}
						handleOk={this.handleOrgOk}
						handleCancel={this.handleOrgCancel}
					/>
					{/* 接收人选择 */}
					<div className="reciver-com-wrapper" style={this.state.selecteReciverShow}>
						<SelecteReciver
							selectedRowKeys={selectedRowKeysPeople}
							onRefReciver={this.onRefReciver}
							setReciver={this.setReciver}
							closeSelectReciver={this.closeSelectReciver} />
					</div>
				</Spin>
				</div>
			);
		}
	}
);

/* 选择消息模板组件 */
class MsgTemp extends Component {
	state = {
		// 消息模板列表
		tempList: [],
		selectedRowKeys: '', // 选中的模板行
		selectedRows: '', // 选中行的内容
		pagination: {},   // 分页配置
		isLoading: true, // 加载状态
	}
	params = {
	    pageNum: 1,
	    pageSize: 10
	}
	componentDidMount () {
		this.getSysMsgTemp();
		this.getDictSelect();
	}

	// 模块类型下拉
	getDictSelect() {
		let codes = ['msgTempType'];
		const options = Utils.getDictOpt(codes);
		options.then( (res)=> {
			let resList = res[0].childDicts;
			let options = Utils.getOptionHtml(resList, 'id', 'name')
			let resObj = {}
			resList.map((item) =>{
				resObj[item.id] = item.name
			})		
			console.log("resObj",resObj);	
			this.setState({tempTypeOpts: options, tempTypeObj: resObj})
		})
	}

	// 条件查询消息模板
	search = (searchData) => {
		this.params.pageNum = 1;
		this.getSysMsgTemp(searchData);
	}
	// 重置
	reset = () => {
		this.params.pageNum = 1;
		this.getSysMsgTemp();
	}
	// 获取消息模板列表
	getSysMsgTemp = (searchData) => {
		let _this = this;
		this.setState({isLoading: true});
		axios.ajax({
			url: API_SYS_MSG.getSysMsgTempListByCondition,
			data: {
				...searchData,
				...this.params
			}
		}).then((res) => {
			this.setState({isLoading: false});
			let tempList = [];
			tempList = res.records.map((item) => {
				return {key: item.id,...item};
			});
			// 配置页数
			this.setState({
    			tempList,
    			pagination: Utils.pagination(res, (current) => {
		            _this.params.pageNum = current;
		            _this.setState({isLoading: true});
		            _this.getSysMsgTemp(searchData);
		        })
    		});
		});
	}
	// 取消弹框
	handleCancel = () => {
		this.props.handleCancel();
	}
	// 确认模板
	handleOk = () => {
		// 验证
		if (!this.state.selectedRows) {
			Message.warn('请选择模板');
		} else {
			console.log(this.state.selectedRows);
			let template = this.state.selectedRows[0];
			this.props.setTemplateName(template);
			this.props.handleCancel();
		}
	}
	render () {
		const columns = [
			{
	        	title: '模板名称',
	          	dataIndex: 'templateName',
	          	className:'tdWidth',
	          	width: 200,
	          	render: (templateName) => {
					return Utils.formatTableColumn(templateName);
				}

	        },
	        {
	        	title: '模板类型',
	        	dataIndex: 'templateType',
	        	width: 100,
	        	render: (templateType) => {
					return this.state.tempTypeObj[templateType]
				}
	        	// render: (templateType) => {
	        	// 	return {'1': '短信','2': '邮件'}[templateType]
	        	// }
	        },
	        {
	        	title: '模板内容',
	        	className:'tdWidth',
	        	width: 400,
	        	dataIndex: 'templateContent',
	        	render: (templateContent) => {
					return Utils.formatTableColumn(templateContent);
				}

	        }
		];
		const { selectedRowKeys } = this.state;
		const rowSelection = {
			type: 'radio',
			selectedRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
                    selectedRowKeys,
                    selectedRows
                });
			},
			onSelect: (record, selected, selectedRows) => {
	         	// console.log(record);
	        },
		}
		return (
			<Modal
				width={965}
				title="模板选择"
          		visible={this.props.msgModalVisible}
          		onOk={this.handleOk}
          		onCancel={this.handleCancel}
          		okText="确认"
                cancelText="取消">
				<div className="com-msgTemp">
					<TempSearch search={this.search} reset={this.reset} tempTypeOpts={this.state.tempTypeOpts}/>
					<WhiteBar title="详细数据" />
					<div>
						<Table
							columns={columns}
							dataSource={this.state.tempList}
							rowSelection={rowSelection}
							pagination={this.state.pagination}
							loading={this.state.isLoading}
						></Table>
					</div>
				</div>
			</Modal>
		);
	}
}

/* 模板搜索组件 */
const TempSearch = Form.create()(
	class extends Component {
		// 搜索
		search = () => {
			let searchData = this.props.form.getFieldsValue();
			this.props.search(searchData);
		}
		// 重置
		reset = () => {
			this.props.form.resetFields();
			this.props.reset();
		}
		render () {
			const FormItem = Form.Item;
			const Option = Select.Option;
			const {getFieldDecorator}  = this.props.form;
			const tempTypeOpts=this.props.tempTypeOpts;
			return (
				<div className="com-tempSearch">
					<Row gutter={16}>
						<Col span={5}>
							<FormItem label="模板名称:">
                                {
                                    getFieldDecorator('templateName',{
                                        rules: []
                                    })(
                                    	<Input type="text"  placeholder="模板名称" />
                                    )
                                }
                            </FormItem>
						</Col>
						<Col span={5}>
							<FormItem label="模板类型">
								{
                                    getFieldDecorator('templateType',{
                                        rules: []
                                    })(
                                        <Select style={{width: '100%'}} placeholder="模板类型">
                                            {tempTypeOpts}
                                        </Select>
                                    	/*
                                         <Select style={{width: '100%'}} placeholder="模板类型">
                                            <Option value={1}>短信</Option>
                                            <Option value={2}>邮件</Option>
                                        </Select>
                                        */
                                    	
                                    )
                                }
							</FormItem>
						</Col>
						<Col>
							<Button onClick={this.search} style={{background: '#00BB29',color:'#fff',marginTop:43,marginLeft:20}}>查询</Button>
							<Button onClick={this.reset} style={{background: '#ED1719',marginLeft:20,color:'#fff',marginTop:43}}>重置</Button>
						</Col>
					</Row>
				</div>
			);
		}
	}
);

/* 富文本框组件 */

export default MsgAddNew;