msgTemplateAdd.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,Tree,Radio, Spin} from 'antd';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG } from '@src/Api'
import { NavLink } from 'react-router-dom'
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;


class msgTemplateAdd extends React.Component {
	state={
		textAreaShow: {display: 'block'}, // 多行文本框展示
		richAreaShow: {display: 'none'}, // 富文本框展示
		msgTemplateInfo:{},
		titName:'新增模板',
		isDetail: false,
		fillData: {},
		spinStatus: false,
		tempTypeOpts: [],
		tempTypeObj: []
	}
    //页面数据初始化加载
    componentWillMount() {

      this.getRouterParams()

    }

		// 模块类型下拉.
		getDictSelect = ()=> {
			 const params = this.props.match.params

			let codes = ['msgTempType'];
			const options = Utils.getDictOpt(codes);
			options.then( (res)=> {

			if(params.optTag !== 'addItem') {
				this.getSysMsgTemplateById()
			}


				let resList = res[0].childDicts;
				let options = Utils.getOptionHtml(resList, 'id', 'name')
				let resObj = {}
				resList.map((item) =>{
					resObj[item.id] = item.name
				})
				this.setState({tempTypeOpts: options, tempTypeObj: resObj})
			})
		}
    //获取跳转过来的传参判断是新增、修改模板
	  getRouterParams = () => {
	    const params = this.props.match.params
	    if (!params || !params.optTag) {
	      message.warn('请重新选择，或者刷新页面')
	      this.props.history.push({
	        pathname: '/home/msgPush/msgTemp',
	      });
	      return
	    }

	    if (params.optTag === 'addItem') {
	      this.setState({
	        titName: '新增模板'
	      })
	    } else if (params.optTag === 'updateItem') {

	      this.setState({
					titName: '修改模板',
					spinStatus: true,
	      })

	    } else if  (params.optTag === 'detailItem') {
				this.setState({
					titName: '查看模板',
					isDetail: true
	      })
			}
			this.getDictSelect()
	  }
    //根据id查询消息模板
    getSysMsgTemplateById= ()=>{
	    const { optTag,id } = this.props.match.params
        if (!id) {
          message.warn('请重新选择，或者刷新页面')
          this.props.history.push({
            pathname: '/home/msgPush/msgTemp',
          });
          return
        }else {
	        axios.ajax({
	          url: API_SYS_MSG.getSysMsgTemplateById,
	          data: {
	            id:id
	          }
	        }).then(res => {

						this.setState({
              spinStatus: false,
            })
	          if (res && Object.keys(res).length > 0) {
							let fillData = res
							if (this.state.isDetail) {
								this.setState({
									msgTemplateInfo: res,
									templateContent:res.templateContent,
									fillData: fillData
								}, ()=>{
								})
								return
							}
	            this.props.form.setFieldsValue({ 'templateName': res.templateName })
	            this.props.form.setFieldsValue({ 'templateContent': res.templateContent })
							this.props.form.setFieldsValue({ 'remark': res.remark })

							this.onChangeTemplateType(res.templateType)
				   this.setState({
	                            msgTemplateInfo: res,
								templateContent:res.templateContent
	               })


	          }

        	})
	    }
    }
    // 设置模板类型
	onChangeTemplateType = (temp) => {
		const templateType = this.state.tempTypeObj[temp]

		if ( templateType.indexOf('短信') !== -1 ) {
			// 短信提醒模板
			this.setState({
				textAreaShow: {display: 'block'},
				richAreaShow: {display: 'none'},
			});

		} else if (templateType.indexOf('邮件') !== -1 ) {
			// 邮箱提醒模板
			this.setState({
				textAreaShow: {display: 'none'},
				richAreaShow: {display: 'block'},
			});
		}
	}
	//设置富文本
	setRichContent = (content) => {
		this.props.form.setFieldsValue({templateContent:content});
	}
	//消息模板新增或修改
	handleOperator = (e) => {
	    e && e.preventDefault();

	    let data = Utils.trim(this.props.form.getFieldsValue());
			const content = data.templateContent? data.templateContent.replace(/<\/?.+?>/g,"") : ''

		if(content.length > 5000) {
			message.error('您输入的字符过长')
			return
		}
	    const { optTag } = this.props.match.params
	    const { msgTemplateInfo } = this.state

	    this.props.form.validateFieldsAndScroll((err, values) => {
	      if (!err) {
					this.setState({
						spinStatus: true,
					})
	        axios.optAjax({
	          url: API_SYS_MSG.insertSysMsgTemplate,
	          data: {
	            ...data,
	            id: optTag && optTag === 'updateItem' ? msgTemplateInfo.id:""
	          }
	        }).then(res=>{
						if(res && res.code && res.code !== 0){
							this.setState({
								spinStatus: false,
							})
							return
						}
	          message.success(optTag && optTag === 'updateItem' ? '修改成功' : '新增成功')
	          this.props.history.push({
	            pathname: '/home/msgPush/msgTemp',
	          });
	        })
	      }
	    });
	  }
	// 模块类型下拉
    getDictSelect() {
        let codes = ['msgTempType'];
        const options = Utils.getDictOpt(codes);
        options.then( (res)=> {
            let resList = res[0].childDicts;
            let options = Utils.getOptionHtml(resList, 'id', 'value')
            let resObj = {}
            resList.map((item) =>{
                resObj[item.id] = item.value
            })          
            this.setState({tempTypeOpts: options, tempTypeObj: resObj})
        })
    }
	// 返回
	goBack = () => {
		this.props.history.push({
			pathname: '/home/msgPush/msgTemp'
		});
	}
	render () {
		const { getFieldDecorator } = this.props.form;
		const { msgTemplateInfo,templateContent } = this.state;
		const formItemLayout = {
	      labelCol: {
	        md: { span: 12 },
	        lg: { span: 6 },
	      },
	      wrapperCol: {
	        md: { span: 24 },
	        lg: { span: 18 },
	      },
	    };
	    const formTextAreaLayout = {
			labelCol: {span:2 },
			wrapperCol: {span: 16}
		}
		let messageContent =templateContent?templateContent :'';

		return (
            <div className="msgTemplateManage">
						<Spin tip="加载中..." spinning = {this.state.spinStatus}>
               <div className="nav"><a href="#/home/msgPush/msgTemp">消息模板管理</a> > <span>{this.state.titName}</span></div>
               <WhiteBar title="基本信息" />
                <div className="taskContent">
		            <Form>
			            <Row gutter={24}>
			              <Col span="8">
											<FormItem  label="模板名称" {...formItemLayout}>
												{
													this.state.isDetail ?
													<span className="ovHidden" title={this.state.fillData.templateName} >{this.state.fillData.templateName}</span> :
													getFieldDecorator('templateName', {
														rules: [
															{ required: true, message: '请输入模板名称'},
															{ max: 128, whitespace: true, message: '模板名称最长为128位字符' },
														]
													})(
														<Input placeholder="模板名称" />
														)
												}
											</FormItem>
			              </Col>
			              <Col span="8">
											<FormItem label="模板类型" {...formItemLayout}>
												{
													this.state.isDetail ?
													<span>{this.state.tempTypeObj[this.state.fillData.templateType]}</span> :
													getFieldDecorator('templateType', {
														initialValue:  msgTemplateInfo.templateType ?  this.state.tempTypeObj[msgTemplateInfo.templateType] : undefined,
													})(

														<Select onChange={this.onChangeTemplateType} placeholder="模板类型">
																	{this.state.tempTypeOpts}
														</Select>
														)
												}
											</FormItem>
			              </Col>
			            </Row>
			            <Row style={this.state.textAreaShow}>
										<Col span={24}>
											<FormItem {...formTextAreaLayout}   label={<span className="multLable"><span style={{color:'#f00'}}> * </span>模板内容 </span>}>
												{
													this.state.isDetail ?
													<span dangerouslySetInnerHTML = {{ __html:this.state.fillData.templateContent }}>
													</span> :
													getFieldDecorator('templateContent',{
														rules: [
															{ max: 5000, message: '模板内容最长为5000位字符' },
														]

													})(
														<TextArea style={{minHeight:400}} placeholder="消息内容" />
													)
												}
											</FormItem>
										</Col>
									</Row>
									<Row style={this.state.richAreaShow}>					
										<Col className="ant-form-item-label" span={2} style = {{textAlign:'center' ,paddingLeft: 10}}>
											<label for="templateName" className="ant-form-item-required" title="模板名称">模板内容:</label>
										</Col>
										<Col span={18}>
												<div style={{border: '1px solid #D2D2D2',minHeight:400}}>
													<EditorConvertToHTML  source = {messageContent}  messageContent={messageContent} setRichContent={this.setRichContent} />
												</div>

										</Col>
									</Row>

									<Row gutter={24} style={{marginTop: '20px'}}>
										<Col span="24">
											<FormItem {...formTextAreaLayout}  label="备&emsp;&emsp;注：" >
												{
													this.state.isDetail ?
													<span>{this.state.fillData.remark}</span> :
													getFieldDecorator('remark',{
														rules: [{ max: 300, message: '备注最长为300位字符' },]
													})(
														<TextArea placeholder="备注" rows={8} columns={10} />
													)
												}
											</FormItem>
										</Col>
			          	</Row>
		        	</Form>
		        </div>
		        <div className="submitBtn">
						{
							this.state.isDetail ?
							'' : <Button type="primary" disabled = {this.state.spinStatus}  onClick={this.handleOperator} >保存</Button>
						}

	      		<NavLink to='/home/msgPush/msgTemp'> <Button> 返回 </Button></NavLink>

				</div>
				</Spin>
            </div>
		)
	}

}

export default Form.create()(msgTemplateAdd);