msgPush.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import {Table,Input,Form,Button,Row,Col,Select,DatePicker,Message,Icon,Modal,Tree} from 'antd';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG } from '@src/Api';
import storage from '@src/utils/localStorage'

import { connect } from 'react-redux';
import { saveMsgStatus } from '@src/redux/common/action';

/* 消息推送 */
class MsgPush extends Component {
	state = {
		// 搜索表单状态
		expandStatus: false,
		// 搜索条件
		searchData: {},
		// 消息列表
		msgLists: [],
		// 分页信息
		pagination: {},
		// 加载状态
		isLoading: true,
		//按钮权限
		btnAuth: null,
		//是否显示操作列
	    isShowOpt: true,

	}

	// 查询页数和数量配置
	params = {
	    pageNum: 1,
	    pageSize: 10
	}
	componentWillMount () {
		let btnAuth = localStorage.btnAuth
        this.setState({btnAuth,})
      if(
        (btnAuth.indexOf('msgPush-edit') === -1 &&
        btnAuth.indexOf('msgPush-delete') === -1 &&
        btnAuth.indexOf('msgPush-stopOrStart') === -1) &&
        (btnAuth.indexOf('msgPush-pushAgain') === -1 && btnAuth.indexOf('msgPush-edit') === -1 &&
        btnAuth.indexOf('msgPush-delete') === -1 )){
        this.setState({isShowOpt: false})
      }
	}
	componentDidMount () {
		this.getMsgList();
	}
	// 消息新增
	addNewMsg = () => {
		this.props.history.push({
			pathname: '/home/msgpush/msgAddNew'
		});
	}
	// 消息修改
	upDateMsg = (item,records) => {
		this.props.history.push({
			pathname: '/home/msgpush/msgAddNew',
			state: records
		});
	}
	// 获取消息列表
	getMsgList = () => {
		let searchData = this.state.searchData;
		let _this = this;
		axios.ajax({
			url: API_SYS_MSG.getSysMsgListByCondition,
			data: {
				...this.params,
				...searchData
			}
		}).then((res) => {
			// 加key赋值
			let msgLists = [];
			msgLists = res.records.map((item,index) => {
				return {...item,key: index};
			});
			this.setState({
				isLoading: false,
				msgLists,
				pagination: Utils.pagination(res, (current) => {
		            _this.params.pageNum = current;
		            _this.setState({isLoading: true});
		            this.getMsgList(searchData);
		        })
			});
		});
	}
	// 查询获取列表信息
	search = (searchData) => {
		this.params.pageNum = 1;
		this.setState({isLoading: true});
		this.setState({searchData}, () => {
			this.getMsgList();
		});
	}
	// 重置查询
	reset = () => {
		this.params.pageNum = 1;
		this.setState({isLoading: true});
		this.setState({searchData: {}}, () => {
			this.getMsgList();
		});
	}
	// 表单折叠
	expandMenu = () => {
		this.setState({
	     	expandStatus: !this.state.expandStatus,
	    })
	}
	// 消息删除
	handleDelete = (item,id,messageTitle) => {
		Modal.confirm({
			title: '删除',
			content: `您要删除推送消息 : ${messageTitle} ？`,
			okText:"确认",
			cancelText:"取消",
			onOk: () => {
				axios.ajax({
					url: API_SYS_MSG.deleteSysMsg,
					data: {id}
				}).then((res) => {
					Message.success('删除成功');
					this.getMsgList();
				});
			}
		})
	}
	// 消息状态启/停用
	handleUsingStatus = (item,id,usingStatus) => {
		let optName ="停用",optStatus=1
		if(usingStatus==1){
           optName="启用"
           optStatus=2
		}
		Modal.confirm({
			title: '注意',
			content: `是否确认${optName}？`,
			okText:"确认",
			cancelText:"取消",
			onOk: () => {
				axios.ajax({
					url: API_SYS_MSG.updateUsingStatus,
					data: {
						id:id,
						usingStatus:optStatus}
				}).then((res) => {
					Message.success(`${optName}成功`);
					this.getMsgList();
				});
			}
		})

	}
	// 查看消息详情
	getMsgDetail = (item,id) => {
		this.props.history.push({
			pathname: `/home/msgpush/msgDetail/${id}`
		});
	}
	// 再次推送
	pushAgain = (records,item,id) => {
		let userInfo = storage.get('userInfo')
		axios.ajax({
			url: API_SYS_MSG.pushAgain,
			data: {id}
		}).then((res) => {
			//this.props.saveMsgStatus(true, 'MSGSTATUS')
			Message.success('推送消息成功');
		});
	}
	render () {
		const columns = [
			{title: '消息类型', width: 110, dataIndex: 'messageType', key: 'messageType',render: (messageType) => {
				return {'1':'pc','2':'app','3': '短信','4': '邮件','5':'微信'}[messageType]
			}},
			{title: '消息标题', width: 120, render: (item) => {
				let {messageTitle,id} = item;
				return (
					<Button className="tdWidth" onClick={(item) => {this.getMsgDetail(item,id)}} title={messageTitle}>{Utils.formatTableColumn(messageTitle)}</Button>
				);
			}},
			// {title: '内容',width: 120, className:'tdWidth',dataIndex: 'messageContent', key: 'messageContent', render: (messageContent) => {
			// 	return Utils.formatTableColumn(messageContent);
			// }},
			{title: '发送者', width: 120,dataIndex: 'pushAccount', className:"tdWidth", render: (pushAccount) => {
				return Utils.formatTableColumn(pushAccount);
			}},
			{title: '接受者',width: 120, dataIndex: 'receiverAccount', className:"tdWidth", key: 'receiverAccount', render: (receiverAccount) => {
				return  Utils.formatTableColumn(receiverAccount);
			}},
			{title: '执行时间',width: 160, dataIndex: 'pushTime',render: (pushTime) => {
				// return Utils.formateDateToYMDSFM(pushTime);
				return Utils.formateDateToDetail(pushTime, 'seconds');
			}},
			{title: '展示时间段',width: 250,render: (text, record, index) => {
				return (
					<div>
						<p style={{display: 'inline-block',textAlign:'center'}}>
							<p>{Utils.formateDateToYMD(record.displayBeginTime)}</p>
							<p>{Utils.formateDateToSFM(record.displayBeginTime)}</p>
						</p>
						<p style={{display: 'inline-block',padding:'0 10'}}>--</p>
						<p style={{display: 'inline-block',textAlign: 'center'}}>
							<p>{Utils.formateDateToYMD(record.displayEndTime)}</p>
							<p>{Utils.formateDateToSFM(record.displayEndTime)}</p>
						</p>
					</div>
				)
			}},
			{title: '推送状态',width: 120, dataIndex: 'pushStatus', key: 'pushStatus', render: (pushStatus) => {
				return {'1': '未推送','2':'推送中','3':'推送成功','4':'推送失败'}[pushStatus]
			}},
			{title: '状态',width: 100, dataIndex: 'usingStatus', key: 'usingStatus',render: (usingStatus) => {
				return {'1': '停用','2': '启用'}[usingStatus]
			}},
			{title: '创建时间',width: 120, dataIndex: 'createTime', key: 'createTime', render: (createTime) => {
				return Utils.formateDateToYMD(createTime)
			}},

		];
		if (this.state.isShowOpt) {
	        columns.push(
               {
	               	title: '操作',width: 350,className:'operatBtns',align: 'center',render: (item,record) => {
						let {pushFlag,pushStatus,usingStatus,id,messageType,messageTitle} = item;
						let records = record;
						if ((pushStatus == 1) && (usingStatus == 1)) {
							return (
								<div>
								    {
							          this.state.btnAuth.indexOf('msgPush-stopOrStart') !== -1 ?
							          <Button onClick={(item) => {this.handleUsingStatus(item,id,usingStatus)}}>启用</Button>
							          : ''
							        }
									{
							          this.state.btnAuth.indexOf('msgPush-edit') !== -1 ?
							          <Button onClick={(item) => {this.upDateMsg(item,records)}}>修改</Button>
							          : ''
							        }
							        {
							          this.state.btnAuth.indexOf('msgPush-delete') !== -1 ?
							          <Button onClick={(item) => {this.handleDelete(item,id,messageTitle)}}>删除</Button>
							          : ''
							        }


								</div>
							)
						} else if ((pushStatus == 2) && (usingStatus == 2)) {
							return '';
						} else if (pushStatus == 1 && usingStatus == 2) {
							return (
								<div>
								    {
							          this.state.btnAuth.indexOf('msgPush-stopOrStart') !== -1 ?
							          <Button onClick={(item) => {this.handleUsingStatus(item,id,usingStatus)}}>停用</Button>
							          : ''
							        }
									{
							          this.state.btnAuth.indexOf('msgPush-edit') !== -1 ?
							          <Button onClick={(item) => {this.upDateMsg(item,records)}}>修改</Button>
							          : ''
							        }
							        {
							          this.state.btnAuth.indexOf('msgPush-delete') !== -1 ?
							          <Button onClick={(item) => {this.handleDelete(item,id,messageTitle)}}>删除</Button>
							          : ''
							        }

								</div>
							)
						} else if ( (pushStatus == 3 || pushStatus == 4) && (usingStatus == 2) ) {
							return (
								<div>
								    {
							          this.state.btnAuth.indexOf('msgPush-pushAgain') !== -1 ?
							          <Button onClick={(item) => {this.pushAgain(records,item,id)}}>再次推送</Button>
							          : ''
							        }
									{
							          this.state.btnAuth.indexOf('msgPush-edit') !== -1 ?
							          <Button onClick={(item) => {this.upDateMsg(item,records)}}>修改</Button>
							          : ''
							        }
							        {
							          this.state.btnAuth.indexOf('msgPush-delete') !== -1 ?
							          <Button onClick={(item) => {this.handleDelete(item,id,messageTitle)}}>删除</Button>
							          : ''
							        }
								</div>
							)
						}
					}
				}
	        )
        }
		return (
			<div className="com-msgPush">
				<div className="searchWrap">
					<WhiteBar title="消息推送" />
					<div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
						{
							this.state.expandStatus ?
							<SearchForm
								search={this.search}
								reset={this.reset}
							></SearchForm>
							: ''
						}
				</div>
				<div style={{marginTop:15,paddingLeft:20}}>
				    {
			          this.state.btnAuth.indexOf('msgPush-add') !== -1 ?
			          <Button onClick={this.addNewMsg}>新增</Button>
			          : ''
					}
				</div>
				<WhiteBar title="详细数据" />
				<div style={{padding: 10,background:'#fff'}}>
					<Table
						columns={columns}
						dataSource={this.state.msgLists}
						pagination={this.state.pagination}
						loading={this.state.isLoading}
						scroll={{ x: '120%' }}
					></Table>
				</div>
			</div>
		);
	}
}

/* 查询表单组件 */
const SearchForm = Form.create()(
	class extends Component {
		state = {}
		componentDidMount () {}
		// 查询
		search = () => {
			let searchData = this.props.form.getFieldsValue();
			console.log(searchData);
			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;
			return (
				<div className="com-search">
					<Form layout="vertical">
						<Row gutter={10}>
							<Col span={5}>
								<FormItem label="标题名称">
                                    {
                                        getFieldDecorator('messageTitle',{
                                            rules: []
                                        })(<Input type="text"  placeholder="标题名称" />)
                                    }
                                </FormItem>
							</Col>
							<Col span={5}>
								<FormItem label="消息类型">
                                    {
                                        getFieldDecorator('messageType',{
                                            rules: []
                                        })(
                                        	<Select 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={5}>
								<FormItem label="推送状态">
                                    {
                                        getFieldDecorator('pushStatus',{
                                            rules: []
                                        })(
                                        	<Select placeholder="推送状态">
                                                <Option value={1}>未推送</Option>
                                                <Option value={2}>推送中</Option>
                                                <Option value={3}>推送成功</Option>
                                                <Option value={4}>推送失败</Option>
                                            </Select>
                                        )
                                    }
                                </FormItem>
							</Col>
							<Col span={5}>
								<FormItem label="消息状态">
                                    {
                                        getFieldDecorator('usingStatus',{
                                            rules: []
                                        })(
                                        	<Select placeholder="消息状态">
                                                <Option value={1}>停用</Option>
                                                <Option value={2}>启用</Option>
                                            </Select>
                                        )
                                    }
                                </FormItem>
							</Col>
							<Col span={4}>
								<Button onClick={this.search} style={{background: '#00BB29',color:'#fff',marginTop: 28}}>查询</Button>
								<Button onClick={this.reset} style={{marginLeft: 15,background:'#ED1719',color:'#fff'}}>重置</Button>
							</Col>
						</Row>
					</Form>
				</div>
			);
		}
	}
)
export default connect(state => ({
  msgStatus: state.msgStatus
}), {
  saveMsgStatus,
})(MsgPush)