msgTemplet.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import {Table,Input,Form,Button,Row,Col,Select,message,Modal} from 'antd';
import { NavLink } from 'react-router-dom'
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'


/* 消息推送 */
class MsgTemp extends Component {
	state = {
		// 搜索表单状态
		expandStatus: false,
		// 搜索条件
		searchData: {},
		// 消息列表
		msgLists: [],
		// 分页信息
		pagination: {},
		// 加载状态
		isLoading: true,
		// 是否显示操作项目
		isShowOpt: true,
		// 模板类型下拉
		tempTypeOpts: '',
		// 模板类型
		tempTypeObj: {}
	}
	// 查询页数和数量配置
	params = {
	    pageNum: 1,
	    pageSize: 10
	}

	componentWillMount() {
		const btnAuth = storage.get('btnAuth')
		this.setState({btnAuth})
		if(
			btnAuth.indexOf('msg-temp-edit') === -1 && 
			btnAuth.indexOf('msg-temp-detail') === -1 && 
			btnAuth.indexOf('msg-temp-delete') === -1){
			this.setState({isShowOpt: false})
		}
		this.getDictSelect()
	}

	componentDidMount () {
		this.getTempList();
	}

	// 跳转到新增页面
	goToNewTemp = () => {
		this.props.history.push({
			pathname: '/home/msgPush/msgTemplateAdd/addItem'
		});
	}

	// 模块类型下拉
	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
			})			
			this.setState({tempTypeOpts: options, tempTypeObj: resObj})
		})
	}

	// 展开条件
	expandMenu = ()=> {
		this.setState({
		  expandStatus: !this.state.expandStatus,
		})
	  }
	
	// 获取消息列表
	getTempList = () => {
		let searchData = this.state.searchData;
		let _this = this;
		axios.ajax({
			url: API_SYS_MSG.getSysMsgTempListByCondition,
			data: {
				...this.params,
				...searchData
			}
		}).then((res) => {
			// 加key赋值
			let msgLists = [];
			msgLists = res.records.map((item, index) => {
				return {...item, key: index};
			});

			const currents = this.params.pageNum

			if (msgLists.length === 0 && currents > 1) {	
				this.params.pageNum = currents - 1
				this.getTempList()
				return 
			}
			this.setState({
				isLoading: false,
				msgLists,
				pagination: Utils.pagination(res, (current) => {
		            _this.params.pageNum = current;
		            _this.setState({isLoading: true});
		            this.getTempList(searchData);
		        })
			});
		});
	}
	// 查询获取列表信息
	search = (searchData) => {
		this.params.pageNum = 1;
		this.setState({isLoading: true});
		this.setState({searchData}, () => {
			this.getTempList();
		});
	}
	// 重置查询
	reset = () => {
		this.params.pageNum = 1;
		this.setState({isLoading: true});
		this.setState({searchData: {}}, () => {
			this.getTempList();
		});
	}

	// 消息删除
	handleDelete = (text, record, index) => {
		Modal.confirm({
		title: '删除',
		content: `您要删除模板 : ${text.templateName} ？`,
		okText:"确认",
		cancelText:"取消",
		onOk: () => {
			axios.ajax({
			url: API_SYS_MSG.deleteSysMsgTemplate,
			data: {id: text.id}
			}).then(res => {  
				message.success('删除成功')
				this.getTempList();         
			})
		}
		})
	}
	
	handleEdit= (text, record, index) => {
		this.props.history.push({
	      pathname: `/home/msgPush/msgTemplateAdd/updateItem/${text.id}`,
	    });
	}
	handleDetail= (text, record, index) => {
		this.props.history.push({
	      pathname: `/home/msgPush/msgTemplateAdd/detailItem/${text.id}`,
	    });
	}
	render () {
		const _this = this
		const columns = [
			{title: '模板名称', width: 150, dataIndex: 'templateName', className: 'tdWidth', key: 'templateName', render: (templateName) => {
				return Utils.formatTableColumn(templateName)
			}},
			{title: '模板类型', width: 120, dataIndex: 'templateType', key: 'templateType', render: (templateType) => {
				return _this.state.tempTypeObj[templateType]
			}},
			{title: '模板内容',  width: 300, align:'center', dataIndex: 'templateContent',  className: 'tdWidth', key: 'templateContent', render: (templateContent) => {
				return Utils.formatTableColumn(templateContent)
			}}			
		];
		if(this.state.isShowOpt) {
			columns.push(
				{title: '操作', align:'right', className: 'tableOptCol', width: 150, render: (text, item, index) => {				
					return (
						<div>
							{
								this.state.btnAuth.indexOf('msg-temp-detail') !== -1 ? 
								<Button size="small" onClick={(item) => {this.handleDetail(text, item, index)}}>查看</Button>: ''
							}
							{
								this.state.btnAuth.indexOf('msg-temp-edit') !== -1 ? 
								<Button size="small" onClick={(item) => {this.handleEdit(text, item, index)}}>修改</Button>: ''
							}
							{
								this.state.btnAuth.indexOf('msg-temp-delete') !== -1 ? 
								<Button size="small" onClick ={ (e) => this.handleDelete(text, item, index) } >删除</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}
								optHtml = {this.state.tempTypeOpts}
							></SearchForm>
							: ''
						} 
				</div>
				<div style={{marginTop:15,paddingLeft:20}}>
				{
					this.state.btnAuth.indexOf('msg-temp-add') !== -1 ? 
		
              		<NavLink replace to={'/home/msgPush/msgTemplateAdd/addItem'} ><Button>新 增</Button></NavLink>
           			: ''
				}
				
				</div>
				<WhiteBar title="详细数据" />
				<div className="detData reTable" style={{ }}>
					<div style={{background:'#fff',minHeight: '500px'}}>
						<Table
							columns={columns}
							dataSource={this.state.msgLists}
							pagination={this.state.pagination}
							loading={this.state.isLoading}
						></Table>
					</div>
				</div>					
			</div>
		);
	}
}

/* 查询表单组件 */
const SearchForm = Form.create()(
	class extends Component {
		state = {}
		componentDidMount () {}
		// 查询
		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 {getFieldDecorator}  = this.props.form;
			return (
				<div className="com-search">
					<Form layout="vertical">
						<Row gutter={10}>
							<Col span={4}>
								<FormItem label="模板名称">
                                    {
                                        getFieldDecorator('templateName',{
                                            rules: []
                                        })(<Input type="text"  placeholder="模板名称" />)
                                    }
                                </FormItem>
							</Col>
							<Col span={4}>
								<FormItem label="模板类型">
                                    {
                                        getFieldDecorator('templateType',{
                                            rules: []
                                        })(
                                        	<Select placeholder="模板类型">
                                                {this.props.optHtml}
                                            </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 MsgTemp;