index.js

import './index.less'
import React from "react";
import axios from '@src/axios'
import Utils from '@utils/utils'
import { API_CHANNEL_MANAGE } from '@src/Api'
import { UserManageBar } from '@components/Common'
import { NavLink, withRouter } from 'react-router-dom'
import storage from '@src/utils/localStorage'
import { Row, Col, Table, Form, Button, Input, Icon, message, Modal ,DatePicker,Select,Message } from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;

class Channel extends React.Component {
	 state = {
	    loading: false,
	    btnAuth: null,
	    isShowOpt: true,
	    expandStatus: false,
	    statusBtn:"启用",
	    page: 1,
	    pageSize: 10
	  }
    componentWillMount() {
      let btnAuth = localStorage.btnAuth
      console.log('btnAuth',btnAuth)
      this.setState({btnAuth,})
      if(
        btnAuth.indexOf('channel-edit') === -1 && 
        btnAuth.indexOf('channel-delete') === -1 && 
        btnAuth.indexOf('channel-stopOrStart') === -1){
        this.setState({isShowOpt: false})
      }
      
    }
    
	  componentDidMount() {
	    this.getParamQuery()
	  }
	  //根据条件查询table数据
	  queryList = () => {
	      let searchInfo = Utils.trim(this.props.form.getFieldsValue());
	      console.log(searchInfo);
			// 校验日期选择
			if (searchInfo.beginTime && !searchInfo.endTime) {
				Message.warn('请选择结束时间');
				return;
			} else if (!searchInfo.beginTime && searchInfo.endTime) {
				Message.warn('请选择开始时间');
				return;
			}
			// 判断日期并转换时间格式
			if (searchInfo.beginTime && searchInfo.endTime) {
				if (new Date(searchInfo.endTime._d) < new Date(searchInfo.beginTime._d)) {
					Message.warn('选择结束时间要大于选择开始时间');
					return;
				} 
				else {
					searchInfo.beginTime = Utils.formatTimeStamp(searchInfo.beginTime);
					searchInfo.endTime = Utils.formatTimeStamp(searchInfo.endTime);
				}
			}
		    this.setState({page:1})  
        this.getParamQuery(searchInfo)
	  }
	  //重置表单
	  reset = () => {
	    this.props.form.resetFields();
	    let searchInfo = Utils.trim(this.props.form.getFieldsValue());
	    this.setState({searchInfo},() => {
	      this.getParamQuery()
	    }) 
	  }

  //获取多条件查询定时任务
  getParamQuery = (searchInfo) => {
  	let _this = this
    this.setState({
      loading: true
    })
    axios.ajax({
      url: API_CHANNEL_MANAGE.getParamChannel,
      data: {
        ...searchInfo,
        pageNum: this.state.page,
        pageSize: this.state.pageSize
      }
    }).then(res => {
        let list =res.records.map((item, index) => {
           item.key = index
           return item
        })
        this.setState({
          list,
          loading: false,
          pagination: Utils.pagination(res, (current) => {
            _this.state.page = current;
            _this.queryList();
          }),
        })
    })
  }
  //停用
  stop = (item, id ,statusBtn,status) => {
    if (id) {
    	Modal.confirm({
        title: '注意',
        content: `是否确认${statusBtn}?`,
        okText:"确认",
        cancelText:"取消",
        onOk: () => {
	      axios.ajax({
	        url: API_CHANNEL_MANAGE.enableOrDisableById,
	        data: {
	          id: id,
              status:status
	        }
	      }).then(res => {
	        if (res) {
	          message.success(`${statusBtn}成功`)
	          this.queryList()
	        } else {
	          message.error('请刷新重新操作')
	        }
	      })
	    }
      }) 
    }
  }
  //编辑
  edit = (item, id,name) => {
    this.props.history.push({
      pathname: `/home/channel/updateChannel/updateItem/${id}`,
    });
  }
   // 展开查询条件
    expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }
  deleteChannel= (item, id,name) => {
    if (id) {
      Modal.confirm({
        title: '删除',
        content: `您要删除的渠道为 : ${name} ？`,
        okText:"确认",
        cancelText:"取消",
        onOk: () => {
          axios.ajax({
            url: API_CHANNEL_MANAGE.deleteChannel,
            data: { id: id }
          }).then(res => {
          	if (res) {
	           console.log(res);
	            message.success('删除成功')
	            this.queryList();
	        } else {
	          message.error('请刷新重新操作')
	        }
           
          })
        }
      })
    } 
  }
   // 展开查询条件
    expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }
  
  //选择一行数据
  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }
   render() {
   	 const { getFieldDecorator } = this.props.form;
   	 const { selectedRowKeys, selectedRows, loading } = this.state;
   	 const columns = [
   	  {
   	  	title: '编号',
        align: 'left',
        className:'pLeft',
        dataIndex: 'channelId',
   	  },
   	  {
        title: '名称',
        dataIndex: 'name',
        align: 'center',
        className:'tdWidth',
        width: '200px',
        render(name) {
          return Utils.formatTableColumn(name)
        }
      }, 
      {
        title: '状态',
        dataIndex: 'status',
        align: 'center',
        render(status) {
          return {
            1: '正常',
            2: '停用',
          }[status]
        }
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
        render(createTime) {
          return Utils.formateDateToYMD(createTime)
        }

      }, 
      ];
      if (this.state.isShowOpt) {
        columns.push(
          {
            title: '操作',
            key: 'opereate',
            className:'pRight',
            width: '250px',
            align: 'right',
            render: (record) => {
              let id = record.id, name = record.name, item= record,statusBtn='启用' ,status=1
              if(record.status===1){
                 statusBtn='禁用'
                 status=2
              }
              return (
              	<div>
                  {
                  this.state.btnAuth.indexOf('channel-stopOrStart') !== -1 ? 
                    <Button size="small" style={{ marginLeft: 15 }}  onClick={()=> {this.stop(item, id,statusBtn,status)}} >{statusBtn}</Button> 
                    : ''
                  }
                  {
                  this.state.btnAuth.indexOf('channel-edit') !== -1 ? 
                    <Button size="small" style={{ marginLeft: 15 }}  onClick={(item) => { this.edit(item, id, name) }}>修改</Button>
                    : ''
                  }
                  {
                  this.state.btnAuth.indexOf('channel-delete') !== -1 ? 
                    <Button size="small" style={{ marginLeft: 15 }} onClick={(item) => { this.deleteChannel(item, id ,name) }}  >删除</Button>
                    : ''
                  }
              	    
                </div>
                
              )
            }
          }
        )
      }

   	 return (
        <div className="channelManage searchWrap">
        <UserManageBar title="渠道管理" />
        <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
        { 
          this.state.expandStatus ? 
        <div className="taskForm">
          <Form >
             <Row gutter={10}>
                <Col span={4}>
					<FormItem>
            <label htmlFor="添加时间">添加时间</label>
						{
							getFieldDecorator('beginTime',{
								rules: []
							})(
		                      	<DatePicker
		                      	style={{width:'100%'}}
		                      	showTime
								            format="YYYY-MM-DD HH:mm:ss"
		                      	placeholder="开始时间" />
							)
						}
					</FormItem>
				</Col>
				<Col span={1} style={{paddingTop: 46,width: 30}}>
					<span style={{marginTop: 29}}>至</span>
				</Col>
				<Col span={4}>
					<FormItem style={{marginTop: 39}}>
						{
							getFieldDecorator('endTime',{
								rules: []
							})(
		                      	<DatePicker 
		                      	style={{width: '100%'}}
		                      	showTime
		                      	format="YYYY-MM-DD HH:mm:ss"
		                      	placeholder="结束时间" />
							)
						}
					</FormItem>
				</Col>
                <Col span="4">
                  <FormItem  >
                    <label htmlFor="名称">名称</label>
                    {
                      getFieldDecorator('name', {
                      
                      })(
                        <Input placeholder="名称" />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="4">
                  <FormItem  >
                    <label htmlFor="状态">状态</label>
                    {
                      getFieldDecorator('status', {
                      
                      })(
                        <Select placeholder="状态" className="formInput" >
                          <Option value=''>全部</Option>
                          <Option value={1}>正常</Option>
                          <Option value={2}>停用</Option>
                      </Select>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="7">
                  <FormItem style={{ marginTop: 38, }} >
                  <Button onClick={(item) => { this.queryList(item) }} style={{ background: '#00BB29', color: "#fff", marginRight: 4 }} >查询</Button>
                  <Button onClick={this.reset} style={{ background: '#ED1719', color: "#fff" }} type="danger">重置</Button>
                </FormItem>
                </Col>
              </Row>
          </Form>
        </div>
         : ''
        }    
        <div className="operate">
          {
          this.state.btnAuth.indexOf('channel-add') !== -1 ? 
          <NavLink to={'/home/Channel/updateChannel/addItem'} ><Button>新增</Button></NavLink>
          : ''
        }
          
        </div> 
        <UserManageBar title="详细数据" />

        <div className="detData">
          <Table 
            selections={false}
            bordered={false}
            loading={loading}
            pagination={this.state.pagination}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
            dataSource={this.state.list}
            columns={columns}
          />
        </div>
      </div>
   	 )
   }

}
export default Form.create()(Channel);