addCustomer.js

import React from 'react'
import './index.less'
import { Form, Button, Input, Select, message, Spin , Radio, Row, Col, DatePicker, Checkbox,Tag, Icon,Tooltip    } 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 moment from 'moment';
import storage from '@src/utils/localStorage'

import { API_DICT_MANAGE, API_CUSTOMER_MANAGE } from '@src/Api'

import locale from 'antd/lib/date-picker/locale/zh_CN';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckableTag = Tag.CheckableTag;
class AddCustomer extends React.Component {
  state = {
    disabled: false,
    addForm:{
      certExpiry: null,
      certValidity: null,
      name: ''
    },
    options:{
      nation: '', //国籍
      marriage: '',  //婚姻
      cert: '', // 证件类型
      occupation: [], //职业
    },

    certReg:'',
    
    startTime: null,
    endTiem: null,
    isCertExpiry: true,  // 如果勾选了长期 那么必选就不必校验。
    certExpiryChk: false,

    titleParams: '新增客户', //新增修改的标题
    optStatus: true,  // true 代表新增  false 代表修改
    id: null,
    isEditStatus: false, // 根据是否是真客户来判断 如果是真客户 那么 带*号的不让编辑
    spinStatus: false,
    insuranceList: [],

    insuranceCompany: '', //公司下拉
    typesInsurance: '', //险种下拉
    isShowInsurance: false, // 显示
    inputVisible: false, //客户标签
    tagValue: '', // 新增tag标签单个值
    tags: [],  // 所有标签集合
    selectedTags: [], //选中的tag
    allTagsArr: [], // 判断标签是否重复
    allTagsObj: {}, // 为了显示用 allTagsObj[name] = id
    allTagsIdObj: {}, // 为了显示用 allTagsObj[id] = name
  };

  userInfo= {}
  certList = []


  async componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
    this.userInfo = storage.get('userInfo')

    // 获取公司以及险种
    await this.getCompanyList()
    await this.getTagList()
    await this.getInsuranceList()

    // 获取下拉
    this.getNationOption()
    
  }

  //获取跳转过来的传参判断是新增、修改、新增下级机构
  getRouterParams = () => {
    const params = this.props.match.params

    if (!params || !params.params) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.push({
        pathname: '/home/customer/list',
      });
      return
    }

    if (params.params === 'addOpt') {
      this.setState({
        titleParams: '新增客户',
        optStatus: true,
        spinStatus: false
      })
    } else{
      this.setState({
        titleParams: '修改客户',
        optStatus: false,
      })

      this.getByCustomer()
    }
  }

  getByCustomer() {
    const params = this.props.match.params

    axios.ajax({
      url: API_CUSTOMER_MANAGE.getCustomerByid,
      data: {id:  params.id}
    }).then(res => {
      if(res) {
        
        this.isInsuredOpt(res.historyOfInsurance)

        const formLabel = this.props.form.getFieldsValue()

        const fillForm = Object.assign({}, res, {
          birthday: moment(Utils.formateDateToYMD(res.birthday),  'YYYY/MM/DD'),
          beginTime: moment(Utils.formateDateToYMD(res.beginTime),  'YYYY/MM/DD'),
          endTime: moment(Utils.formateDateToYMD(res.endTime),  'YYYY/MM/DD'),
          certValidity: moment(Utils.formateDateToYMD(res.certValidity),  'YYYY/MM/DD'),
          certExpiry: res.certExpiry === 9999 ? null : moment(Utils.formateDateToYMD(res.certExpiry)),
          owner: '' + res.owner,
          ownerName: this.userInfo.userName,
          insuranceTime: moment(Utils.formateDateToYMD(res.insuranceTime),  'YYYY/MM/DD'),
        })
        for (let item in fillForm) {
          if (fillForm[item] === null) {
            fillForm[item] = undefined
          }
        }
        if (res.certExpiry === 9999) {
          this.setState({
            certExpiryChk: true,
            isCertExpiry: false
          })
        }
        if (res.type === 2) {
          this.setState({isEditStatus: true})
        }
        if ( res.certType == 187) {
          let certReg =  res.certType == 187 ?  Utils.getFormRules('IDCode').regular : ''
          this.setState({certReg})
        }

        const { allTagsIdObj } = this.state
        const tagsStr =  res.customerLabel ? res.customerLabel.split(',') : []
        const selectedTags = []


        for(let item of tagsStr) {
          selectedTags.push(allTagsIdObj[item])
        }    


        this.setState({
          id: res.id,
          selectedTags: selectedTags
        })

        var obj = {}
        for (let item in formLabel) {
          obj[item] = fillForm[item]
        }
        
        console.log(1111)
        this.setState({addForm: obj, spinStatus: false}, ()=> {
          this.bigClassChange(res.occupationBigClass, true)
        })
      }
    })
  }

  // 获取公司
  getCompanyList() {
    this.setState({spinStatus: true})
    axios.ajax({
      url: API_CUSTOMER_MANAGE.getAllListInsuranceCompany,
    }).then(res => {
      const insuranceCompany = Utils.getOptionHtml(res, 'id', 'name')
      this.setState({
        insuranceCompany
      })
    })    
  }
  // 获取险种
  getInsuranceList() {
    axios.ajax({
      url: API_CUSTOMER_MANAGE.getAllListTypesInsurance,
    }).then(res => {
      const typesInsurance = Utils.getOptionHtml(res, 'id', 'name')
      this.setState({
        typesInsurance
      })
    })  
  }

  // 获取所有的下拉
  getNationOption () {
    let codes = ['nation', 'marriage', 'cert', 'occupation', 'userGrade', 'creditGrade', 'insurance', 'smoke'];
		const options = Utils.getDictOpt(codes);
		options.then( (res)=> {
			for (let item of res){
        if (item.childDicts && item.childDicts.length > 0) {
          var list
          let arr = []
          let obj = {}

          if (item.code === 'occupation') {  //职业里面的东西分了子类
            for (let i in item.childDicts) {
              let data= item.childDicts[i]
              arr.push({name: data.name, id: data.id, value: data.value, code: data.code});
            }
            options['occupationBigClass'] = Utils.getOptionHtml(arr, 'id', 'name')
            options[item.code] = item.childDicts
          } else {
            for (let i in item.childDicts) {
              let data= item.childDicts[i]
              arr.push({name: data.name, id: data.id, value: data.value, code: data.code});
            }
            list = Utils.getOptionHtml(arr, 'id', 'name')

            if(item.code === 'cert') {
              this.certList= arr
            }

            if(item.code === 'insurance'){
              this.setState({
                insuranceList: arr
              })
            }

            options[item.code] = list
          }
        }
      }
      this.setState({options}, ()=> {
        this.getRouterParams()
      })
    })
  }

  // 职业大类选择事件
  bigClassChange = (e, isChange)=> {
    const data = this.state.options.occupation
    const occupationSmallClass = []

    if(!isChange) {
       this.props.form.setFieldsValue({occupationSmallClass: undefined, occupationCode: undefined, occupationType: undefined}      )
    }

    if (data) {
      for( let item of data) {
        if(e === item.id) {
          if (item.childDicts && item.childDicts.length > 0) {
            for (let i in item.childDicts) {
              let data= item.childDicts[i]
              occupationSmallClass.push({name: data.name, id: data.id, value: data.value, code: data.code});
            }
          }
        }
      }
    }




    const options= Object.assign(
      {},
      this.state.options,
      {occupationSmallClass: Utils.getOptionHtml(occupationSmallClass, 'id', 'name'), occupationSamll: occupationSmallClass}
      )
    const addForm = Object.assign(
      {},
      this.state.addForm,
      { occupationSmallClass:  undefined,
        occupationCode: undefined,
        occupationType: undefined }
      )

      if(isChange) {
        this.setState({options})
      } else {
        this.setState({options, addForm})
      }



  }

  // 职业小类选择事件
  smallClassChange = (e)=>{
    let {occupationSamll} = this.state.options
    if (e && occupationSamll && occupationSamll.length > 0 ) {
      for (let item of occupationSamll) {
        if (item.id === e) {
          let data = {occupationCode: item.code, occupationType: item.value}
          this.props.form.setFieldsValue(data)
          const addForm = Object.assign(
            {},
            this.state.addForm,
            data
            )
          this.setState({addForm})

        }
      }
    }else {
      this.props.form.setFieldsValue({occupationCode: '', occupationType: ''})
    }

  }
  // 证件长期按钮选择
  certExpiryChange = (e)=>{
    if (e.target.checked) {
      this.props.form.setFieldsValue({certExpiry: null});
      this.setState({isCertExpiry: false, certExpiryChk: true})
    } else {
      this.setState({isCertExpiry: true, certExpiryChk: false})
    }
  }

  // 证件类型选择事件
  certChange = (e)=> {
    this.props.form.resetFields('certNo');
    const data = this.certList
    var certReg
    for (let i of data) {
      if(i.id === e) {
        certReg = i.value ==='身份证' ? /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ : ''
      }
    }
    const addForm = Object.assign({}, this.state.addForm, {certNo: ''})
    this.setState({certReg, addForm})
  }

  // 保存操作
  handleOperator = ()=>{
    const data = Utils.trim(this.props.form.getFieldsValue());
    const { selectedTags , allTagsObj} = this.state

    const formData = Object.assign({}, data, {
      birthday: Utils.formatTimeStamp(data.birthday),
      certExpiry: this.state.isCertExpiry? Utils.formatTimeStamp(data.certExpiry) : 9999,
      certValidity: Utils.formatTimeStamp(data.certValidity),
      insuranceTime:  data.insuranceTime ? Utils.formatTimeStamp(data.insuranceTime) : null,
      owner: this.userInfo.id
    })
    let postData = {}

    for (let item in formData) {
      if (item === 'qq' || item === 'annualIncome'|| item === 'postalCode') {
        postData[item] = +formData[item]
      }else {
        postData[item] = formData[item]
      }
    }

    if (!this.state.optStatus) {
      postData['id'] = this.state.id
    }
    const customeTags =  selectedTags.map( (item, index) => {
     return allTagsObj[item]
    })

    postData['customerId'] = ''
    postData['customerLabel']= customeTags.join(',')

    let _url = this.state.optStatus ? API_CUSTOMER_MANAGE.addCustomerAndCustomer : API_CUSTOMER_MANAGE.updCustomerAndCustomer

    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          spinStatus: true,
        })
        axios.optAjax({
          url: _url,
          data: postData
        }).then(res => {
          if(res) {
            if(res && res.code && res.code !== 0){
              this.setState({
                spinStatus: false,
              })
              return
            }
            message.success('操作成功')
            this.props.history.push({
              pathname: '/home/customer/list',
            });
          }
        })
      }
    })
  }

  // 证件有效期限制
  disabledStartDate = (certValidity) => {
    const certExpiry = this.state.addForm.certExpiry;
    if (!certValidity || !certExpiry) {
      return false;
    }
    return certValidity.valueOf() > certExpiry.valueOf();
  }
  disabledEndDate = (certExpiry) => {
    const certValidity = this.state.addForm.certValidity;
    if (!certExpiry || !certValidity) {
      return false;
    }
    return certExpiry.valueOf() <= certValidity.valueOf();
  }
  onChange = (field, value) => {

   let addForm = Object.assign({}, this.state.addForm, {[field]: value})
    this.setState({
      addForm
    });
  }
  onStartChange = (value) => {
    this.onChange('certValidity', value);
  }
  onEndChange = (value) => {
    this.onChange('certExpiry', value);
  }

  isInsuredOpt = (value) => {
    const { insuranceList } = this.state
    console.log(value)

    let isShowInsurance = false
    for (let item of insuranceList) {
      if (item.id === value) {
        isShowInsurance = item.name === '是' ? true : false
      }
    }
    this.setState({
      isShowInsurance: isShowInsurance
    })
  }

  showInput = ()=>{
    this.setState({ inputVisible: true }, () => this.input.focus());
  }
  handleInputChange = (e) => {
    this.setState({ tagValue: e.target.value });
  }

   // 获取标签
   getTagList() {
    axios.ajax({
      url: API_CUSTOMER_MANAGE.getAllListCustomerLabel,
      data: {owner: this.userInfo.id}
    }).then(res => {
      let tags = [], allTagsArr = [], allTagsObj= {}, allTagsIdObj= {}
      if(res) {
        res.map( (item, index) => {
          tags.push({id: item.id, name: item.name, owner: item.owner});
          allTagsArr.push(item.name)
          allTagsObj[item.name] = item.id
          allTagsIdObj[item.id] = item.name
        })       
      }      
      this.setState({
        tags,
        allTagsArr,
        allTagsObj,
        allTagsIdObj,
      })
    }) 
  }

  // 新增标签
  handleInputConfirm = (e)=>{
    const {tagValue, tags, selectedTags, allTagsArr} =this.state;
    let tag = tags, selectedTag = selectedTags

    if (tagValue && allTagsArr.indexOf(tagValue) === -1) {
      if(tagValue.length > 20) {
        return 
      }

      const postData = {
        name: tagValue,
        owner: this.userInfo.id
      }
      axios.ajax({
        url: API_CUSTOMER_MANAGE.addCustomerLabel,
        data: postData
      }).then(res => {
        selectedTag = [...selectedTag, tagValue];    
        this.setState({
          selectedTags: selectedTag,
        });    
        this.getTagList()       
      }) 
    } else {
      selectedTag = [...selectedTag, tagValue];
    }

    this.setState({
      selectedTags: selectedTag,
      inputVisible: false,
      tagValue: '',
    });

  }

  // 删除标签
  deleteTag = (e, item)=>{
    e.preventDefault();
    const { selectedTags } = this.state;
    const tag  = item.name    
    axios.ajax({
      url: API_CUSTOMER_MANAGE.delCustomerLabelByid,
      data: {owner: this.userInfo.id, id: item.id}
    }).then(res => {
      if (tag && selectedTags.indexOf(tag) !== -1) {
        const nextSelectedTags = selectedTags.filter(t => t !== tag);
        this.setState({ selectedTags: nextSelectedTags });
      }
      this.getTagList()
    })

  }
  //改变标签
  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter(t => t !== tag);
    
    this.setState({ selectedTags: nextSelectedTags });
  }

  saveInputRef = input => this.input = input


  render () {

    const { getFieldDecorator } = this.props.form;
    const state = this.state;
    const {nation, marriage, cert, userGrade, creditGrade, insurance, smoke, occupationBigClass, occupationSmallClass } = this.state.options
    const statusList = Utils.getOptionHtml([
      {code: 1, text: '正常'},
      {code: 2, text: '异常'},
    ], 'code', 'text')
    const typeList = Utils.getOptionHtml([
      {code: 1, text: '准客户'},
      {code: 2, text: '真客户'},
    ], 'code', 'text')

    const formItemLayout = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 6 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 18 },
      },
    }
    const formItemLayout4 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 7 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 17 },
      },
    }
    const formItemLayout2 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 7 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 17 },
      },
    }
    const formItemLayout3 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 3 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 21 },
      },
    }

    const { inputVisible, tagValue, tags, selectedTags, insuranceCompany, typesInsurance  } = this.state;

    return (
     
      <div className='customer dictBg'>
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
        <div className="roleAdd">
          <div className="nav">
            <NavLink to='/home/customer/list' > 客户管理  </NavLink> >
            <span>{this.state.titleParams} </span>
          </div>
          <UserManageBar title="基本信息" />
            <Form  layout="horizontal" className = "publicForm">
              <div className="dictDetail contentForm">
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="姓&emsp;&emsp;名"   {...formItemLayout}>
                        {
                          getFieldDecorator('name', {
                            initialValue: state.addForm.name || '',
                            validateFirst: true,
                            rules: [
                              {required: true, whitespace: true, message: '请输入姓名'},
                              {
                                pattern: Utils.getFormRules('chartLetters').regular,
                                message: '姓名必须是中文和英文, 最长为64位字符'
                              },
                              {max: 64, message: '姓名必须是中文和英文, 最长为64位字符'},
                            ],
                          })(
                            <Input placeholder="姓名" className = "formInput" disabled= {this.state.isEditStatus}/>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="性&emsp;&emsp;别" {...formItemLayout} >
                        {
                          getFieldDecorator('gender', {
                            initialValue: state.addForm.gender || "M",
                            rules: [
                              { required: true, message: '请选择性别'}
                            ],
                          })(
                            <RadioGroup disabled= {this.state.isEditStatus}>
                              <Radio value={'M'}>男</Radio>
                              <Radio value={'F'}>女</Radio>
                            </RadioGroup>
                          )
                        }
                      </FormItem>
                    </Col>
                   <Col span="8">
                      <FormItem label="归 &nbsp;属 &nbsp;人"   {...formItemLayout}>
                        {
                          getFieldDecorator('ownerName', {
                            initialValue: state.addForm.ownerName || this.userInfo.userName,
                            validateFirst: true,
                            rules: [
                              {required: true, whitespace: true, message: '请输入归属人'},
                              {max: 64, message: '归属人最长为64位字符'},
                            ],
                          })(
                            <Input  placeholder="归属人" className = "formInput" disabled/>
                          )
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="国&emsp;&emsp;籍"   {...formItemLayout}>
                        {
                          getFieldDecorator('nationality', {
                            initialValue: state.addForm.nationality,
                            validateFirst: true,
                            rules: [
                              {required: true, message: '请选择国籍'},
                            ],
                          })(
                            <Select placeholder="国籍"  allowClear ={true} className = "formInput" disabled= {this.state.isEditStatus}>
                              {nation}
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="出生日期"   {...formItemLayout}>
                        {
                          getFieldDecorator('birthday', {
                            initialValue: state.addForm.birthday,
                            validateFirst: true,
                            rules: [
                              {required: true,  message: '请选择出生日期'},
                            ],
                          })(
                            <DatePicker
                            disabled= {this.state.isEditStatus}
                            placeholder= '年/月/日'
                            format="YYYY/MM/DD"
                            className = "formInput"
                            disabledDate = { (current) => {
                              return current > moment().endOf('day')
                            }}

                            />
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="婚姻状态"   {...formItemLayout}>
                        {
                          getFieldDecorator('maritalStatus', {
                            initialValue: state.addForm.maritalStatus,
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请选择婚姻状态'}
                            ],
                          })(
                            <Select disabled= {this.state.isEditStatus} placeholder="婚姻状态"  allowClear ={true} className = "formInput">
                             {marriage}
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="证件类型"   {...formItemLayout}>
                        {
                          getFieldDecorator('certType', {
                            initialValue: state.addForm.certType,
                            validateFirst: true,
                            onChange: this.certChange,
                            rules: [
                              {required: true, message: '请选择证件类型'},
                            ],
                          })(
                            <Select disabled= {this.state.isEditStatus} placeholder="证件类型"  allowClear ={true} className = "formInput">
                             {cert}
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="证件号码"   {...formItemLayout}>
                        {
                          getFieldDecorator('certNo', {
                            initialValue: state.addForm.certNo,
                            validateFirst: true,
                            rules: [
                              {required: true, message: '请输入证件号码'},
                              {
                                pattern: state.certReg,
                                message: '请输入正确的证件号码'
                              },
                              { max: 32,   message: '证件号码最长为32位字符'}
                            ],
                          })(
                            <Input disabled= {this.state.isEditStatus} placeholder="证件号码" className = "formInput"/>

                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="客户状态"   {...formItemLayout}>
                          {
                            getFieldDecorator('status', {
                              initialValue: state.addForm.status ,
                              rules: [
                                {required: true, message: '请选择客户状态'}
                              ],
                            })(
                              <Select disabled= {this.state.isEditStatus} placeholder="客户状态"  allowClear ={true} className = "formInput">
                                {statusList}
                              </Select>
                            )
                          }
                        </FormItem>
                      </Col>
                  </Row>
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="证件有效期"   {...formItemLayout2}>
                        {
                          getFieldDecorator('certValidity', {
                            initialValue: state.addForm.certValidity,
                            rules: [
                              { required: true, message: '请选择证件有效期'}
                            ],
                          })(
                            <DatePicker
                              disabled= {this.state.isEditStatus}
                              disabledDate={this.disabledStartDate}
                              onChange={this.onStartChange}
                              placeholder= '年/月/日'
                              className = "formInput"
                              format="YYYY/MM/DD"
                            />
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8" >
                      <div className="ant-form-item-label ant-col-md-12 ant-col-lg-7">
                        <label htmlFor="certExpiryChange" className="ant-form-item-required">证件失效期</label>
                      </div>
                      <FormItem  {...formItemLayout2}>
                        {
                          getFieldDecorator('certExpiry', {
                            initialValue: state.addForm.certExpiry,
                            rules: [
                              { required: state.isCertExpiry, message: '请选择证件失效期'}
                            ],
                          })(
                            <DatePicker
                              disabledDate={this.disabledEndDate}
                              disabled = {!state.isCertExpiry || this.state.isEditStatus}
                              onChange={this.onEndChange}
                              className = "formInput50"
                              placeholder= '年/月/日'
                              format="YYYY/MM/DD"
                            />
                          )
                        }
                        <Checkbox disabled= {this.state.isEditStatus} checked = {this.state.certExpiryChk} onChange={this.certExpiryChange} style= {{ marginLeft: "20px"}}> 长期 </Checkbox>
                      </FormItem>
                    </Col>

                    <Col span="8">
                      <FormItem label="客户类型"   {...formItemLayout}>
                        {
                          getFieldDecorator('type', {
                            initialValue: state.addForm.type,
                            rules: [
                              {required: true, message: '请选择客户类型'}
                            ],
                          })(
                            <Select placeholder="客户类型"  disabled= {this.state.isEditStatus} allowClear ={true} className = "formInput">
                              {typeList}
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>

                  </Row>
              </div>

              <UserManageBar title="职业信息" />

               <div className="dictDetail contentForm">
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="工作单位" {...formItemLayout}>
                        {
                          getFieldDecorator('workUnid', {
                            initialValue: state.addForm.workUnid,
                            validateFirst: true,
                            rules: [
                              { max: 20, message: '工作单位最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="工作单位"  className = "formInput"/>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="职&emsp;&emsp;务"  {...formItemLayout}>
                        {
                          getFieldDecorator('position', {
                            initialValue: state.addForm.position,
                            validateFirst: true,
                            rules: [
                              { max: 20, message: '职务最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="职务" className = "formInput" />
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="职业大类" {...formItemLayout}>
                        {
                          getFieldDecorator('occupationBigClass', {
                            initialValue: state.addForm.occupationBigClass,
                            validateFirst: true,
                            onChange: (e)=>this.bigClassChange(e, false),
                            rules: [
                              { required: true, message: '请选择职业大类'}
                            ],
                          })(
                            <Select placeholder="职业大类"  disabled= {this.state.isEditStatus} allowClear ={true} className = "formInput">
                             {occupationBigClass}
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="职业小类"  {...formItemLayout}>
                        {
                          getFieldDecorator('occupationSmallClass', {
                            initialValue: state.addForm.occupationSmallClass,
                            onChange: (e)=> this.smallClassChange(e),
                            rules: [
                              {required: true, message: '请选择职业小类'},
                            ],
                          })(
                            <Select placeholder="请根据大类选择职业小类"  disabled= {this.state.isEditStatus} allowClear ={true} className = "formInput">
                              {occupationSmallClass}
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="职业代码"  {...formItemLayout}>
                        {
                          getFieldDecorator('occupationCode', {
                            initialValue: state.addForm.occupationCode,
                            validateFirst: true,
                            rules: [
                              {required: true, whitespace: true, message: '请输入职业代码'},
                              {max: 50, message: '职业代码最长为10位字符' }
                            ],
                          })(
                            <Input placeholder="职业代码" disabled className = "formInput"/>
                          )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="职业类别" {...formItemLayout}>
                        {
                          getFieldDecorator('occupationType', {
                            initialValue: state.addForm.occupationType,
                            rules: [
                              { required: true, message: '请输入职业类别'},
                              { max: 40, message: '职业类别最长为40位字符' }
                            ],
                          })(
                            <Input placeholder="职业类别" disabled className = "formInput"/>
                          )
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem className="multiLine " label={<span className="multLable">年&nbsp;收 &nbsp;入<br /><span className="smallFont">(万&emsp;&emsp;元)</span></span>} {...formItemLayout}>
                        {
                          getFieldDecorator('annualIncome', {
                            initialValue: state.addForm.annualIncome ? '' + state.addForm.annualIncome : '',
                            validateFirst: true,
                            rules: [
                              {required: true, message: '请输入年收入'},
                              {pattern: /^([1-9]\d{0,4}|0)([.]?|(\.\d{1,2})?)$/, message: '年收入必须为整数或小数(2位小数),最大不超过99999.99'},
                              { max: 8, message: '年收入必须为整数或小数(2位小数),最大不超过99999.99,' },

                            ],
                          })(
                            <Input placeholder="年收入(万元)" disabled= {this.state.isEditStatus}  className = "formInput"/>
                          )
                        }
                      </FormItem>
                    </Col>
                  </Row>
              </div>

              <UserManageBar title="联系方式" />
              <div className="dictDetail contentForm">
                <Row gutter={24}>
                  <Col span="16">
                    <FormItem label="联系地址"  {...formItemLayout3}>
                      {
                        getFieldDecorator('address', {
                          initialValue: state.addForm.address,
                          validateFirst: true,
                          rules: [
                            {required: true, whitespace: true, message: '请输入联系地址'},
                            { max: 60, message: '联系地址最长为60位字符' }
                          ],
                        })(
                          <Input placeholder="联系地址" disabled= {this.state.isEditStatus} className = "formInput" />
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="&nbsp;乡镇(街道)"  {...formItemLayout}>
                      {
                        getFieldDecorator('villagesTowns', {
                          initialValue: state.addForm.villagesTowns || '',
                          validateFirst: true,
                          rules: [
                            {required: true, whitespace: true, message: '请输入乡镇(街道)'},
                            { max: 20, message: '乡镇最长为20位字符' }
                          ],
                        })(
                          <Input placeholder="乡镇(街道)" disabled= {this.state.isEditStatus}  className = "formInput"/>
                        )
                      }
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span="8">
                      <FormItem label="村(社区)"   {...formItemLayout}>
                        {
                          getFieldDecorator('hamlet', {
                            initialValue: state.addForm.hamlet || '',
                            rules: [
                              {required: true, whitespace: true, message: '请输入村(社区)'},
                              { max: 20, message: '村(社区)最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="村(社区)" disabled= {this.state.isEditStatus} className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="电话号码" {...formItemLayout}>
                        {
                          getFieldDecorator('phone', {
                            initialValue: state.addForm.phone || '',
                            validateFirst: true,
                            rules: [
                              { pattern: Utils.getFormRules('phone').regular, message: '请输入正确的电话号码'},
                              { max: 32, message: '请输入正确的电话号码'}
                            ],
                          })(
                            <Input placeholder="电话号码" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="手机号码"   {...formItemLayout}>
                        {
                          getFieldDecorator('mobile', {
                            initialValue: state.addForm.mobile,
                            validateFirst: true,
                            rules: [
                              {required: true, whitespace: true, message: '请输入手机号码)'},
                              {pattern: Utils.getFormRules('mobile').regular, message: '请输入正确的手机号码' },
                              { max: 32,  message: '请输入正确的手机号码'}
                            ],
                          })(
                            <Input placeholder="手机号码" disabled= {this.state.isEditStatus} className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span="8">
                      <FormItem label="电子邮箱" {...formItemLayout}>
                        {
                          getFieldDecorator('email', {
                            initialValue: state.addForm.email || '',
                            validateFirst: true,
                            rules: [
                              {pattern:  Utils.getFormRules('email').regular, message: '请输入正确的电子邮箱'},
                              { max: 32, message: '请输入正确的电子邮箱'}
                            ],
                          })(
                            <Input placeholder="电子邮箱" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="Q&nbsp;&emsp;&emsp;&nbsp;Q"  {...formItemLayout}>
                        {
                          getFieldDecorator('qq', {
                            initialValue: state.addForm.qq ?  '' + state.addForm.qq : '',
                            validateFirst: true,
                            rules: [
                              { pattern: Utils.getFormRules('number').regular, message: '请输入正确的QQ'},
                              { max: 10, min: 5, message: 'QQ为5-10位字符之间' }
                            ],
                          })(
                            <Input className = "formInput" placeholder="QQ"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="微&emsp;&emsp;信"  {...formItemLayout}>
                        {
                          getFieldDecorator('weChat', {
                            initialValue: state.addForm.weChat || '',
                            rules: [
                              { max: 50, message: '微信最长为50位字符' }
                            ],
                          })(
                            <Input placeholder="微信" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span="8">
                    <FormItem label="邮政编码" {...formItemLayout} >
                      {
                        getFieldDecorator('postalCode', {
                          initialValue:  state.addForm.postalCode ?  '' + state.addForm.postalCode : '',
                          rules: [
                            { max: 6, message: '邮编最长为6位字符' }
                          ],
                        })(
                          <Input placeholder="邮政编码" className = "formInput"/>
                        )
                      }
                    </FormItem>
                  </Col>
                </Row>
              </div>
              <UserManageBar title="其他信息" />
              <div className="dictDetail contentForm">
                <Row gutter={24}>
                  <Col span="8">
                    <FormItem label="民&emsp;&emsp;族"   {...formItemLayout4}>
                      {
                        getFieldDecorator('ethnic', {
                          initialValue: state.addForm.ethnic || '',
                          validateFirst: true,
                          rules: [
                            {required: true, whitespace: true, message: '请输入民族'},
                            { max: 10, message: '民族最长为10位字符' }
                          ],
                        })(
                          <Input placeholder="民族" disabled= {this.state.isEditStatus} className = "formInput"/>
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="信用等级"   {...formItemLayout4}>
                      {
                        getFieldDecorator('creditRating', {
                          initialValue: state.addForm.creditRating || undefined,
                          rules: [
                          ],
                        })(
                          <Select placeholder="信用等级"  className = "formInput">
                            {creditGrade}
                          </Select>
                        )
                      }
                    </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="客户等级"   {...formItemLayout4}>
                        {
                          getFieldDecorator('customerRating', {
                            initialValue: state.addForm.customerRating || undefined,
                            rules: [
                            ],
                          })(
                            <Select placeholder="客户等级"   className = "formInput">
                              {userGrade}
                            </Select>
                          )
                        }
                      </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span="8">
                      <FormItem label="籍&emsp;&emsp;贯"  {...formItemLayout4} >
                        {
                          getFieldDecorator('nativePlace', {
                            initialValue: state.addForm.nativePlace || '',
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请输入籍贯' },
                              {max: 10, message: '籍贯最长为10位字符' },
                            ],
                          })(
                            <Input placeholder="籍贯"  disabled= {this.state.isEditStatus} className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="户口所在地"  {...formItemLayout4} >
                        {
                          getFieldDecorator('registeredPermanentResidence', {
                            initialValue: state.addForm.registeredPermanentResidence || '',
                            rules: [
                              { max: 60, message: '户口所在地最长为60位字符' }
                            ],
                          })(
                            <Input placeholder="户口所在地" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="健康状况"   {...formItemLayout4}>
                        {
                          getFieldDecorator('healthCondition', {
                            initialValue: state.addForm.healthCondition || '',
                            rules: [
                              { max: 20, message: '健康状态最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="健康状况" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span="8">
                      <FormItem label="社保编号"   {...formItemLayout4}>
                        {
                          getFieldDecorator('socialSecurityNumber', {
                            initialValue: state.addForm.socialSecurityNumber || '',
                            rules: [
                              { max: 20, message: '社保编号最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="社保编号" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>                 
                  <Col span="8">
                      <FormItem label="英文名称"   {...formItemLayout4}>
                        {
                          getFieldDecorator('englishName', {
                            initialValue: state.addForm.englishName  || '',
                            validateFirst: true,
                            rules: [
                              {pattern:  Utils.getFormRules('letters').regular, message: '英文名称必须是字母,最长为20位字符'},
                              { max: 20, message: '英文名称必须是字母,最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="英文名称" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span="8">
                      <FormItem label="汉语拼音名"   {...formItemLayout4}>
                        {
                          getFieldDecorator('chineseName', {
                            initialValue: state.addForm.chineseName || '',
                            validateFirst: true,
                            rules: [
                              {pattern: Utils.getFormRules('letters').regular, message: '汉语拼音名必须是字母,最长为20位字符'},
                              { max: 20, message: '汉语拼音名必须是字母,最长为20位字符' }
                            ],
                          })(
                            <Input placeholder="汉语拼音名" className = "formInput"/>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="吸烟状况"   {...formItemLayout4}>
                        {
                          getFieldDecorator('smokingStatus', {
                            initialValue: state.addForm.smokingStatus || undefined,
                            rules: [
                            ],
                          })(
                            <Select placeholder="吸烟状况"  className = "formInput">
                              {smoke}
                            </Select>
                          )
                        }
                      </FormItem>
                  </Col>
                  <Col span="8">
                      <FormItem label="既往险史"   {...formItemLayout4}>
                        {
                          getFieldDecorator('historyOfInsurance', {
                            initialValue: state.addForm.historyOfInsurance || undefined,
                            onChange: this.isInsuredOpt,
                            rules: [
                              { required: true, message: '请选择既往险史' },
                            ],
                          })(
                            <Select placeholder="既往险史"  disabled= {this.state.isEditStatus} className = "formInput">
                              {insurance}
                            </Select>
                          )
                        }
                      </FormItem>
                  </Col>
                </Row>
              </div>

             {
               this.state.isShowInsurance ?
                <div>
                  <UserManageBar title="既往险史" />
                  <div className="dictDetail contentForm">
                    <Row gutter={24}>
                      <Col span="8">
                       <FormItem label="时间"   {...formItemLayout4}>
                        {
                          getFieldDecorator('insuranceTime', {
                            initialValue: state.addForm.insuranceTime ||  null,
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请选择时间' },
                            ],
                          })(
                            <DatePicker
                              onChange={ (date, dateString)=> {
                                console.log(date, dateString);
                              }}
                              disabled= {this.state.isEditStatus}
                              placeholder= '年/月/日'
                              className = "formInput"
                              format="YYYY/MM/DD"
                            />
                          )
                        }
                      </FormItem>
                      </Col>
                      <Col span="8">
                        <FormItem label="公司"   {...formItemLayout4}>
                          {
                            getFieldDecorator('insuranceCompany', {
                              initialValue: state.addForm.insuranceCompany ,
                              onChange: this.companyChange,
                              validateFirst: true,
                              rules: [
                                { required: true, message: '请选择公司' },
                              ],
                            })(
                              <Select placeholder="公司"  disabled= {this.state.isEditStatus} allowClear ={true} className = "formInput">
                                {insuranceCompany}
                              </Select>
                            )
                          }
                        </FormItem>
                      </Col>
                      <Col span="8">
                        <FormItem label="险种"   {...formItemLayout4}>
                          {
                            getFieldDecorator('typesInsurance', {
                              initialValue: state.addForm.typesInsurance,
                              validateFirst: true,
                              rules: [
                                { required: true, message: '请选择险种' },
                              ],
                            })(
                            <Select placeholder="险种"  disabled= {this.state.isEditStatus} allowClear ={true} className = "formInput">
                              {typesInsurance}
                            </Select>
                            )
                          }
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={24}>
                      <Col span="8">
                          <FormItem label="产品名称"   {...formItemLayout4}>
                            {
                              getFieldDecorator('insuranceName', {
                                initialValue: state.addForm.insuranceName ||  '',
                                validateFirst: true,
                                rules: [
                                  { required: true, message: '请选择填写产品名称' },
                                ],
                              })(
                                <Input placeholder="产品名称" disabled= {this.state.isEditStatus} className = "formInput"/>
                              )
                            }
                          </FormItem>
                        </Col>
                    </Row>
                  </div>
                </div>
               :''
             } 
             <UserManageBar title="客户标签" />
             <div className="dictDetail contentForm">
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="客户标签"   {...formItemLayout4} className="tagMarginBton">

                    {inputVisible && (
                      
                        getFieldDecorator('tagValue', {
                          initialValue: tagValue ||  '',
                          validateFirst: true,
                          onChange: this.handleInputChange,                          
                          rules: [
                            { max: 20, message: '客户标签最长为20位字符' },
                          ],
                        })(
                          <Input
                            ref={this.saveInputRef}
                            type="text"
                            className = "formInput"
                            style={{ width: 200 }}
                            onPressEnter={this.handleInputConfirm}
                            placeholder="请按回车进行添加标签"
                          />
                        )
                      

                     
                    )}

                    {!inputVisible && (
                      <Tag
                      onClick={this.showInput}
                      style={{ background: '#fff', borderStyle: 'dashed' }}
                      >
                        <Icon type="plus" /> 新增标签
                      </Tag>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="24">
                  {tags.map((tag, index) => {
                    const isLongTag = tag.name.length > 20;                    
                    const tagElem = (                      
                      <Tag  closable = {true} onClose={(e) => this.deleteTag(e, tag) } key={tag.id}>
                        <CheckableTag
                          key={tag.id}                          
                          checked={selectedTags.indexOf(tag.name) > -1}
                          onChange={checked => this.handleChange(tag.name, checked)}
                        >
                          { isLongTag ? tag.name.substring(0, 10) + '...': tag.name} 
                        </CheckableTag>
                      </Tag> 
                    );
                    return isLongTag ? <Tooltip title={tag.name} key={tag.id}>{tagElem}</Tooltip> : tagElem;
                  })}
                </Col>
              </Row>
             </div>
          <div className="submitBtn" >
            <Button type="primary"  disabled = {this.state.spinStatus} onClick={this.handleOperator} >保存</Button>
            <NavLink to='/home/customer/list' ><Button>  返回 </Button></NavLink>
          </div>
        </Form>
        </div>
        </Spin>
      </div>
    )
  }
}

export default Form.create()(AddCustomer);