updateChannel.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, Spin ,Select, } from 'antd'

const FormItem = Form.Item;
const TextArea = Input.TextArea
const Option = Select.Option;


class updateChannel extends React.Component {
  state = {
    loading: false,
    btnAuth: null,
    isShowOpt: true,
    expandStatus: false,
    titName: "新增渠道",
    channelInfo: {},
    spinStatus: false,
  }
  params = {
    page: 1,
    pageSize: 10
  }
  componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
  }

  componentDidMount() {
    this.getRouterParams()

    //获取渠道信息
    //await this.getChannelById()
  }

  /*数据获取区域*/

  //获取多条件查询历史状态
  getChannelById = (searchInfo) => {
    return new Promise((resolve, reject) => {
      const { optTag,id } = this.props.match.params
        if (!id) {
          message.warn('请重新选择，或者刷新页面')
          this.props.history.push({
            pathname: '/home/Channel/manage',
          });
          return
        }else {
          axios.ajax({
            url: API_CHANNEL_MANAGE.getChannelById,
            data: {
              id:id
            }
          }).then(res => {
            console.log('res',res)
            if (res && Object.keys(res).length > 0) {
               //根据修改还是新增下级机构来渲染上级机构显示数据
               if (optTag === 'updateItem') {
                   this.props.form.setFieldsValue({ 'name': res.name  })
                   this.props.form.setFieldsValue({ 'channelId': res.channelId  })
                   this.props.form.setFieldsValue({ 'remark': res.remark  })
                }
              resolve(this.setState({
                channelInfo: res,
                
              }))
            }
          })
        }
     })
  }
  //渠道增加 
  handleOperator = (e) => {
    e && e.preventDefault();
    let data = Utils.trim(this.props.form.getFieldsValue());
    const { optTag } = this.props.match.params
    const { channelInfo } = this.state

    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          spinStatus: true,
        })  
        axios.optAjax({
          url: optTag && optTag === 'updateItem' ? API_CHANNEL_MANAGE.updChannel:API_CHANNEL_MANAGE.addChannel,
          data: {
            ...data,
            id: optTag && optTag === 'updateItem' ? channelInfo.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/Channel/manage',
          });
        })
      }
    });
  }
  //获取跳转过来的传参判断是新增、修改渠道
  getRouterParams = () => {
    const params = this.props.match.params
    if (!params || !params.optTag) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.push({
        pathname: '/home/Channel/manage',
      });
      return
    }

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

      this.setState({
        titName: '修改渠道',
      })
      this.getChannelById()
    }
  }

  // 展开查询条件
   expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }
  
  render() {
  	const { getFieldDecorator } = this.props.form;
    const { channelInfo } = this.state;
    const { optTag } = this.props.match.params
    const isUpdChannel = (field) => optTag && optTag === 'updateItem' ? (channelInfo[field] ? channelInfo[field] : 1) : 1
    const formItemLayout = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 6 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 18 },
      },
    }

    const formItemLayout2 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 3 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 21 },
      },
    }
    

    return (
      <div className="channelManage searchWrap">
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
          <div className="nav">
            <NavLink to='/home/Channel/manage' > 渠道管理 </NavLink> ><span>{this.state.titName}</span>
          </div>

          <UserManageBar title="基本信息" />
          <div className="channelInfo">
            <Form layout="horizontal">
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="渠道名称："{...formItemLayout} >
                    {
                      getFieldDecorator('name', {
                        rules: [
                          { required: true, message: '请输入渠道名称', },
                          { max: 50, whitespace: true, message: '渠道名称最长为50位字符'  },
                        ]
                      })(
                        <Input  placeholder="渠道名称" />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8" >
                  <FormItem label="渠道编号："{...formItemLayout} >
                    {
                      getFieldDecorator('channelId', {
                        rules: [
                        {required: true,  message: '请输入渠道编号' },
                        {pattern: /^(\s)*([0-9]{1,3})(\s)*$/, message: '渠道编号必须为正整数,最长为3位字符'},
                        ]
                      })(
                        <Input  placeholder="渠道编号" />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="状&emsp;&emsp;态："{...formItemLayout} >
                    {
                      getFieldDecorator('status', {
                        initialValue: isUpdChannel('status'),
                      })(
                        <Select placeholder="状态" className="formInput"  >
                            <Option value={1}>正常</Option>
                            <Option value={2}>停用</Option>
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
              </Row>  
              <Row gutter={24} style={{ marginTop: 20 }}>
                <Col span="16">
                  <FormItem label="备 &emsp;&emsp;注" {...formItemLayout2}>
                    {
                      getFieldDecorator('remark', {
                        rules: [{ max: 300, message: '备注最长为300位字符' },]
                      })(

                        <TextArea placeholder="备注" rows={8} columns={10} />
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
              

            </Form>
          </div>
          <div className="submitBtn" >
            <Button type="primary" disabled = {this.state.spinStatus} onClick={this.handleOperator} >保存</Button>
            <NavLink to='/home/Channel/manage'> <Button>返回 </Button></NavLink>
          </div>
        </Spin>
      </div>
    )
  }


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