appMsgHistory.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import SelecteReciver from './selecteReciver';
import SelecteOrg from './selecteOrg';
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'
const TreeNode = Tree.TreeNode;

export default class AppMsgHistory extends Component {
	constructor (props) {
		super(props);
	}
	state = {
		expandStatus: false,
		dataList: [], // 数据列表
		pagination: {}, // 分页配置
		searchData: {}, // 搜索条件
		isLoading: true, // 是否加载中
		//按钮权限
		 btnAuth: null,
		//是否显示操作列
	    isShowOpt: true,
	}
	// 查询页数和数量配置
	params = {
	    pageNum: 1,
	    pageSize: 10
	}
	componentWillMount () {
		let btnAuth = localStorage.btnAuth
      	console.log('btnAuth',btnAuth)
        this.setState({btnAuth,})
      if(
        btnAuth.indexOf('msgHistory-detail') === -1 &&
        btnAuth.indexOf('msgHistory-delete') === -1 ){
        this.setState({isShowOpt: false})
      }
	}
	componentDidMount () {
		this.getMsgList();
	}
	// 条件搜索
	search = (searchData) => {
		this.params.pageNum = 1;
		this.setState({searchData,isLoading: true}, () => {
			this.getMsgList();
		});
	}
	// 重置
	reset = () => {
		this.params.pageNum = 1;
		this.setState({
			isLoading: true,
			searchData: {}
		}, () => {
			this.getMsgList();
		});
	}
	// 加载消息信息
	getMsgList = () => {
		let _this = this;
		axios.ajax({
			url: API_SYS_MSG.getSysAppMsgSummaryList,
			data: {
				...this.params,
				...this.state.searchData
			}
		}).then((res) => {
			let dataList = res.records.map((item,index) => {
				return {key: index,...item};
			});
			this.setState({
				isLoading: false,
				dataList,
				pagination: Utils.pagination(res, (current) => {
		            _this.params.pageNum = current;
		            this.getMsgList();
		        })
			});
		});
	}
	// 查看详情
	lookDetail = (item,messageId) => {
		// console.log(messageId);
		this.props.history.push({pathname: `/home/msgpush/appMsgDetail/${messageId}`});
	}
	// 删除消息
	detailMsg = (item,id) => {
		Modal.confirm({
		title: '删除',
		content: `您要删除当前选中的历史消息？`,
		okText:"确认",
		cancelText:"取消",
		onOk: () => {
			axios.ajax({
				url: API_SYS_MSG.deleteSysAppMsgSummary,
				data: {id}
			}).then((res) => {
				Message.success('删除消息成功');
				this.getMsgList();
			});
		}
		})
	}
	// 展开条件
  	expandMenu = ()=> {
	    this.setState({
	     	expandStatus: !this.state.expandStatus,
	    })
	}
	render () {
		const columns = [
			{title: '发送时间', dataIndex: 'pushTime', render: (pushTime) => {
				return Utils.formateDateToDetail(pushTime, 'seconds');
			}},
			{title: '内容', dataIndex: 'messageContent', render: (messageContent) => {
				return Utils.formatTableColumn(messageContent);
			}},
			{title: '接收人', dataIndex: 'receiverAccount', render:(receiverAccount) => {
				return Utils.formatTableColumn(receiverAccount);
			}},
			{title: 'Ipnone目标/成功', render: (item) => {
				let {receivedCount,targetCount} = item;
				return receivedCount + '/' + targetCount;
			}},
			{title: '安卓目标/成功', render: (item) => {
				let {receivedCount,targetCount} = item;
				return receivedCount + '/' + targetCount;
			}},

		];
        if (this.state.isShowOpt) {
	        columns.push(
               {
	               	title: '操作', render: (item) => {
						let {id,messageId} = item;
						return (
							<div>
							    {
						          this.state.btnAuth.indexOf('msgHistory-detail') !== -1 ?
						          <Button onClick={(item) => {this.lookDetail(item,messageId)}}>查看</Button>
						          : ''
						        }
							    {
						          this.state.btnAuth.indexOf('msgHistory-delete') !== -1 ?
						          <Button onClick={(item) => {this.detailMsg(item,id)}} style={{marginLeft: 10}}>删除</Button>
						          : ''
						        }
							</div>
						);
					}
				}
            )
        }
		return (
			<div className="com-appMsgHistory" >
			<div className="searchWrap">
				<WhiteBar title="APP历史消息" />
				<div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
					{
						this.state.expandStatus ?
						<SearchForm search={this.search} reset={this.reset}></SearchForm>
						: ''
					}
			</div>
			<WhiteBar title="详细数据" />
			<div className="detail-wrapper" style={{width: '95%',margin: '0 auto',background: '#fff'}}>
				<Table
					loading={this.state.isLoading}
					pagination={this.state.pagination}
					dataSource={this.state.dataList}
					columns={columns}>
				</Table>
			</div>
			</div>
		);
	}
}

/* 查询表单组件 */
const SearchForm = Form.create()(
	class extends Component {
		constructor (props) {
			super(props);
		}
		state = {
			recOrgShow: {display: 'none'}, // 接收机构展示
			modalVisible: false, // 接收机构选择框展示
			recPeopleShow: {display: 'none'}, // 接收人展示
			selecteReciverShow: {display: 'none'}, //接收人选择框展示
			canInputPeople: true, // false 禁止输入
			receiverNumber: '', // 接收人或机构字符串
			allPeopleShow: {display: 'none'}, // 接收所有人展示
		}
		onRef = (ref) => {
			this.comSelectOrg = ref;
		}
		onRefReciver = (ref) => {
			this.comSelectReciver = ref;
		}
		// 查询
		search = () => {
			let searchData = this.props.form.getFieldsValue();
			// 校验日期选择
			if (searchData.displayBeginTime !== undefined && searchData.displayEndTime == undefined) {
				Message.warn('请选择结束时间');
				return;
			} else if (searchData.displayBeginTime == undefined && searchData.displayEndTime !== undefined) {
				Message.warn('请选择开始时间');
				return;
			}
			// 判断日期并转换时间格式
			if (searchData.displayBeginTime && searchData.displayEndTime) {
				if (new Date(searchData.displayEndTime._d) < new Date(searchData.displayBeginTime._d)) {
					Message.warn('选择结束时间要大于选择开始时间');
					return;
				} else {
					searchData.displayBeginTime = Utils.formateDateToDetail(searchData.displayBeginTime._d,'standard');
					searchData.displayEndTime = Utils.formateDateToDetail(searchData.displayEndTime._d,'standard');
				}
			}
			searchData.receiverNumber = this.state.receiverNumber;
			this.props.search(searchData);
		}
		// 重置
		reset = () => {
			// 调用子组件的清空选择方法
			this.comSelectOrg.searchFormReset();
			this.comSelectReciver.searchFormReset();
			this.props.form.resetFields();
			this.setState({
				receiverNumber: '',
				recPeopleShow: {display: 'none'},
				recOrgShow: {display: 'none'},
				allPeopleShow: {display: 'none'}
			});
			this.props.reset();
		}
		// 设置搜索类型
		onChangeRecType = (e) => {
			let receiverType = e;
			if (receiverType == 1) {
				// 所有人
				this.setState({
					recOrgShow: {display: 'none'},
					recPeopleShow: {display: 'none'},
					allPeopleShow: {display: 'block'}
				});
				this.props.form.setFieldsValue({receiverAccount: '所有人'});
				this.setState({
					receiverNumber: '所有人'
				});
			} else if (receiverType == 2) {
				// 机构
				this.setState({
					recOrgShow: {display: 'block'},
					recPeopleShow: {display: 'none'},
					allPeopleShow: {display: 'none'}
				});
				this.props.form.setFieldsValue({receiverAccount: ''});
			} else if (receiverType == 3) {
				// 个人
				this.setState({
					recOrgShow: {display: 'none'},
					recPeopleShow: {display: 'block'},
					allPeopleShow: {display: 'none'}
				});
				this.props.form.setFieldsValue({receiverAccount: ''});
				// 展示选择接收人组件
				this.selectReciver();
			}
		}
		// 展示选择接收机构
		showModal = () => {
			this.setState({modalVisible: true});
		}
		// 展示选择接收人组件
		selectReciver = () => {
			this.setState({selecteReciverShow: {display: 'block'}});
		}
		// 关闭选择接收人组件
		closeSelectReciver = () => {
			this.setState({selecteReciverShow: {display: 'none'}});
		}
		// 设置选择的接收人
		setReciver = (revicers) => {
			let receiverAccount = []; // 前端展示姓名
			let receiverNumber = [];   // 提交的id
			revicers.forEach((item,index) => {
				// receiverNumber.push(item.split('&&')[0]);
				// receiverAccount.push(item.split('&&')[1]);
				if (index !== revicers.length-1) {
					receiverNumber += `${item.split('&&')[0]},`;
					receiverAccount += `${item.split('&&')[1]},`;
				} else {
					receiverNumber += `${item.split('&&')[0]},`;
					receiverAccount += `${item.split('&&')[1]}`;
				}
			});
			this.setState({receiverNumber});
			this.props.form.setFieldsValue({
				receiverAccount
			});
		}
		// 机构选择确认
		handleOrgOk = (items) => {
			this.setState({modalVisible: false});
			let orgString = '';
			let receiverNumber = '';
			items.forEach((item,index) => {
				if (index !== items.length-1) {
					orgString += `${item.title},`;
					receiverNumber += `${item.key},`;
				} else {
					orgString += `${item.title}`;
					receiverNumber += `${item.key}`;
				}
			});
			this.setState({
				receiverNumber
			});
			this.props.form.setFieldsValue({
				receiverAccount: orgString
			});
		}
		// 取消弹框
		handleCancel = () => {
			this.setState({modalVisible: false});
		}
		render () {
			const FormItem = Form.Item;
			const Option = Select.Option;
			const {getFieldDecorator}  = this.props.form;
			return (
				<div className="com-searchForm">
					<Form layout="vertical">
						<Row gutter={16}>
							<Col span={4}>
								<FormItem label="内容">
									{
										getFieldDecorator('messageContent',{
											rules: []
										})(<Input type="text" placeholder="内容" />)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem label="接收者类型">
									{
										getFieldDecorator('receiverType',{
											rules: []
										})(
											<Select onChange={this.onChangeRecType} placeholder="接收者类型">
                                                <Option value={1}>所有人</Option>
                                                <Option value={2}>机构</Option>
                                                <Option value={3}>个人</Option>
                                            </Select>
                                        )
									}
								</FormItem>
							</Col>
							<Col span={4} style={this.state.allPeopleShow}>
								<FormItem label="接收者">
									{
										getFieldDecorator('receiverAccount',{
											rules: []
										})(
											<Input disabled  placeholder="所有人" />
										)
									}
								</FormItem>
							</Col>
							<Col span={4} style={this.state.recOrgShow}>
								<FormItem label="接收者">
									{
										getFieldDecorator('receiverAccount',{
											rules: []
										})(
											<Input disabled   placeholder="接收机构" />
										)
									}
								</FormItem>
							</Col>
							<Col span={2} style={this.state.recOrgShow}>
                                <div style={{marginTop:25,fontSize:25}}>
                                    <Icon onClick={this.showModal} type="appstore" />
                                </div>
                            </Col>
							<Col span={4} style={this.state.recPeopleShow}>
								<FormItem label="接收者">
									{
										getFieldDecorator('receiverAccount',{
											rules: []
										})(
											<Input disabled  placeholder="接收人" />
										)
									}
								</FormItem>
							</Col>
							<Col span={2} style={this.state.recPeopleShow}>
                                <div style={{marginTop:25,fontSize:25}}>
                                    <Icon onClick={this.selectReciver} type="appstore" />
                                </div>
                            </Col>
						</Row>
						<Row gutter={16}>
							<Col span={4}>
								<FormItem label="发送时间">
									{
										getFieldDecorator('displayBeginTime',{
											rules: []
										})(
					                      	<DatePicker
					                      	style={{width:'100%'}}
					                      	showTime
  											format="YYYY-MM-DD HH:mm:ss"
					                      	placeholder="开始时间" />
										)
									}
								</FormItem>
							</Col>
							<Col span={1} style={{paddingTop: 32,width: 30}}>
								<span style={{marginTop: 29}}>至</span>
							</Col>
							<Col span={4}>
								<FormItem style={{marginTop: 29}}>
									{
										getFieldDecorator('displayEndTime',{
											rules: []
										})(
					                      	<DatePicker
					                      	style={{width: '100%'}}
					                      	showTime
					                      	format="YYYY-MM-DD HH:mm:ss"
					                      	placeholder="结束时间" />
										)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem style={{marginTop: 29}}>
									<Button onClick={this.search}  style={{background: '#00BB29',color:'#fff'}}>查询</Button>
									<Button onClick={this.reset}  style={{marginLeft: 15,background:'#ED1719',color:'#fff'}}>重置</Button>
								</FormItem>
							</Col>
						</Row>
					</Form>
					{/* 机构列表弹框 */}
					<SelecteOrg
						modalVisible={this.state.modalVisible}
						handleOk={this.handleOrgOk}
						handleCancel={this.handleCancel}
						onRef={this.onRef}
					/>
					{/* 接收人选择 */}
					<div className="reciver-com-wrapper" style={this.state.selecteReciverShow}>
						<SelecteReciver
							onRefReciver={this.onRefReciver}
							setReciver={this.setReciver}
							closeSelectReciver={this.closeSelectReciver} />
					</div>
				</div>
			);
		}
	}
);