insCompanyOpt.js

import React from 'react'
import { Form, Button, Input, Select, message, Tree, Radio, Row, Col, Spin } from 'antd'
import { NavLink } from 'react-router-dom'
import UserManageBar from '@components/Common/WhiteBar/index'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'

import {API_CUSTOMER_MANAGE} from '@src/Api'

const FormItem = Form.Item;

class insCompanyOpt extends React.Component {
  state = {
    form:{    
      name: '',    
      id: '',
    },    
    routerParams: '新增公司',
    isLoad: true,
    isLoadTree: false, // 为true 的情况下 并且 isLoad为false 的情况下 加载树
    disabled: true,
    spinStatus: false, // 是否显示加载中

  };

  componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
  }

  componentDidMount() {
   this.getRouterParams()
  }

  // 根据路由判断进来的是修改还是新增
  getRouterParams = () => {
    const params = this.props.match.params

    if (!params || !params.params) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.push({
        pathname: '/home/system/insCompany',
      });
      return
    }
    if (params.params === 'add') {
      this.setState({
        routerParams: '新增保险公司',
        disabled: true,
      })
    } else if (params.params === 'edit') {
      this.setState({
        routerParams: '修改保险公司',
        disabled: false,
        spinStatus: true,
      })
      this.getDetail()
    }
  }

  // 如果是修改 那么就要获取修改某条数据的信息并填充表单
  getDetail= () => {   
    const { params } = this.props.match
    if (params.id) {
      axios.ajax({
        url: API_CUSTOMER_MANAGE.getInsuranceCompanyByid,
        data: {
          id: params.id
        }
      }).then(res => {
        console.log(res)
        if (res && Object.keys(res).length > 0) {
          this.setState({isLoad: false, spinStatus: false, form: res})         
        }
      })
    }
   
  }

  
  // 保存操作
  handleOperator = (e) => { 
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {

        this.setState({spinStatus: true})
        const params = this.props.match.params
        let url = params.params && params.params === 'add' ? API_CUSTOMER_MANAGE.addInsuranceCompany : API_CUSTOMER_MANAGE.updInsuranceCompany
        const formData = this.props.form.getFieldsValue()

        const data = {
          id: this.state.form.id,
          name: formData.name
        }

        axios.optAjax({
          url: url,
          data: {
            ...data
          }
        }).then(res => {

          if(res && res.code && res.code !== 0){
            this.setState({
              spinStatus: false,
            })
            return
          }
          message.success('操作成功')
          this.props.history.push('/home/system/insCompany')
        })
      }
    });
  };

  
  render () {
    const { getFieldDecorator } = this.props.form;
    const state = this.state;

    const formItemLayout = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 6 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 18 },
      },
    }


    return (
      <div className='dictBg'>
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
        <div className="roleAdd">
          <div className="nav">
            <NavLink to='/home/system/insCompany' > 保险公司管理  </NavLink> >
            <span>{this.state.routerParams}</span>
          </div>

          <UserManageBar title="基本信息" />

          <div className="dictDetail">
            <Form  layout="horizontal" className = "publicForm">
             
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="公司名称"  { ...formItemLayout}>
                    {
                      getFieldDecorator('name', {
                        initialValue: state.form.name,
                        rules: [
                          {required: true, message: '请输入公司名称'},
                          {max: 32, whitespace: true, message: '公司名称最长为32位字符'},
                        ],
                      })(
                        <Input placeholder="保公司名称"/>
                      )
                    }
                  </FormItem>
                </Col>
               
              </Row>
          
            </Form>
          </div>

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

        </div>
        </Spin>
      </div>
    )
  }
}

export default Form.create()(insCompanyOpt);