userAdd.js

import './user.less'
import React from 'react';
import moment from 'moment';
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
// import queryString from 'query-string'
import { NavLink } from 'react-router-dom'
import {  UserManageBar, MutilOptions, LayerOrgSelect } from '@components/Common'
import { API_USER_MANAGE, API_ROLE_MANAGE, API_CHANNEL_MANAGE, API_SYSORORG_MANAGE } from '@src/Api'
import { Row, Col, Form, Button, Input, Select, Icon,  message, Modal, Radio, Checkbox, DatePicker, Spin } from 'antd'
import storage from '@src/utils/localStorage'
const queryString = require('query-string');
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const TextArea = Input.TextArea
const { RangePicker } = DatePicker;


class UserAdd extends React.Component {
  termFlagsOpts = [
    { label: '安卓', value: 1 },
    { label: 'IOS', value: 2 },
    { label: '微信', value: 4 },
    { label: 'ipad(苹果)', value: 8 },
    { label: 'pad(安卓)', value: 16 },
    { label: 'PC', value: 32 },
  ];

  state = {
    orgVisible: false,
    orgOptionsArr: [ 
    ],
    checkedObj: {},
    roleOptionsArr: [],
    roleOptionsAll:{},
    userInfo: {},
    getOrgOptionsName: {},
    routerParams: '新增用户',
    orgData: {          // 树结构的选中的值
      id: null,
      name: ''
    },
    orgSelectData:{      //树结构的查询条件
      orgId: null,
      orgName: ''       
    },
    spinStatus: false, // 是否显示加载中
    isOkRole: []
  }

  componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
  }
  async componentDidMount() {
    //获取机构树状图
    await this.getOrgTreeList()

    //角色获取
    await this.getRoleInfo()

    this.getParamChannel()

    this.getRouterParams()

    //获取用户信息
    await this.getUserByid()

  }

  // 证件类型选择事件
  certChange = (e)=> {
    this.props.form.resetFields('certNo');
  }

  //终端机使用标识数据初始化处理
  getval = (data, val) => {
    if (val === 0) return []
    let termFlagsOptsInit = data.map(k => {
      if ((k.value & val) === k.value) {
        return k.value
      }
    }).filter(k => k !== undefined)
    return termFlagsOptsInit
  }

  getUserByid = () => {
    let _this = this 
    return new Promise((resolve, reject) => {
      const { params, uid } = this.props.match.params
      const { roleIds } = queryString.parse(this.props.location.search)
      const { getOrgOptionsName, roleOptionsAll } = this.state
      let updRoleIds = []

      if (roleIds && Object.keys(roleIds).length > 0) {
        updRoleIds = roleIds.split(',').map(k => Number(k))
        this.setState({
          checkedKeys: updRoleIds
        })
      }

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

        if (uid) {
          axios.ajax({
            url: API_USER_MANAGE.getUserByid,
            data: {
              uid
            }
          }).then(res => {
            if (res && Object.keys(res).length > 0) {
              let initTermUsrFlgVal = _this.getval(_this.termFlagsOpts, res.terminalUsrFlag)

              let val = updRoleIds.map(item => {
                return roleOptionsAll[item]
              }).join(',')
              let detObj = []
              let obj = {}
              updRoleIds.map(item => {
                obj.key = item
                obj.value = roleOptionsAll[item]
                return detObj.push(obj)
              })
              

              this.setState({
                orgSelectData: { orgName: res.orgName, orgId: res.orgId},
                spinStatus: false,
              })    
              this.props.form.setFieldsValue({
                'orgName': res.orgName,
                'hiderole': val,
                certType: res.certType,
                degree: res.degree,
                contract: res.contract,
                updRoleIds,
                'terminal_usr_flag': initTermUsrFlgVal,
                terminalUsrFlag: res.terminalUsrFlag
              })

              resolve(this.setState({
                detObj,
                userInfo: res,
                checkedObj: {
                  key: res.orgId,
                  val: getOrgOptionsName[res.orgId]
                },
                isOkRole:updRoleIds
              }))

            }
          })
        }
      }
    })
  }

  getRouterParams = () => {
    const params = this.props.match.params
    const { uid } = this.props.location

    console.log('uid', uid)

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

    if (params.params === 'addUser') {
      this.setState({
        routerParams: '新增用户'
      })
    } else if (params.params === 'updUser') {

      this.setState({
        routerParams: '修改用户',
        spinStatus: true,
      })
    }
  }

  //获取渠道信息
  getParamChannel = () => {
    const params = this.props.match.params
    axios.ajax({
      url: API_CHANNEL_MANAGE.getParamChannel,
      data: {
        pageNum: 1,
        pageSize: 100
      }
    }).then(res => {
      //渲染渠道列表
      let channelList = res.records ,channelOptions
      res = res.records
      if(params.params === 'addUser'){
           channelList.map((item ,index )=> {
              if(item.status==2){
                  delete channelList[index]
              }
          })
           channelOptions = Utils.getOptionList(channelList)
       }else if(params.params === 'updUser'){
           channelOptions = Utils.getOptionList(res)
       }
      
      console.log('channelOptions', channelOptions);
      let obj = {}
      res.map(item => {
        let id = item.id
        let name = item.name
        return Object.assign(obj, { [id]: name })
      })
      this.setState({
        channelOptions,
        channelObj: obj
      })
      console.log(this.state.channelObj);
    })
  }


  getOrgByName = (orgName) => {
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgByName,
      data: {
        name: orgName
      }

    }).then(res => {
      if (res && res.length >= 0) {
        this.setState({
          orgOptionsArr: res
        })
      } else {
        return
      }
    })
  }

  //对机构进行扁平处理
  getOrgOptionsName = (data) => {
    const { getOrgOptionsName } = this.state
    let  that = this
    if (data && data.length > 0) {
      data.map(item => {
        let id = item.id, name = item.name
        if (item.childOrgs && item.childOrgs.length > 0) {
          that.getOrgOptionsName(item.childOrgs)
        }
        Object.assign(getOrgOptionsName, { [id]: name })
      })
    }
    return getOrgOptionsName
  }
  // 机构清空
  onRef = (ref) => {
    this.child = ref;
  }
  //获取机构树形机构
  getOrgTreeList = (orgName) => {
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgTreeList,

    }).then(res => {
      return new Promise((resolve, reject) => {
        if (res && res.length >= 0) {
          this.setState({
            orgOptionsArr: res
          })
          console.log('orgOptionsArr', this.state.orgOptionsArr);
          resolve(this.getOrgOptionsName(res))
        } else {
          return
        }
      })
    })
  }

  onChange = (checkedValues) => {
    console.log('checked = ', checkedValues);
    let terminalUsrFlag
    if (checkedValues && checkedValues.length > 0) {
      terminalUsrFlag = checkedValues.reduce((pre, cur) => {
        return pre + cur
      })
    }
    console.log('terminalUsrFlag', terminalUsrFlag);

    this.props.form.setFieldsValue({ terminalUsrFlag })
  }

  getCheckedObj = (obj) => {
    this.setState({
      checkedObj: obj
    })
  }



  //获取所属机构
  orgOptions = () => {
    this.props.form.resetFields('layerOrgName');
    this.setState({
      orgVisible: true,
      treeData: [],
      orgData:{id: this.state.orgSelectData.orgId, name: this.state.orgSelectData.orgName},      
    }, ()=> {
      if(this.child) {
        this.child.getOrgTreeList()
      }
    })
  }

  // 树选择事件
  selectTree = (event, obj)=> {   
    this.setState({
      orgData:{id: obj.id, name: obj.name
    }})
  }

  onRef = (event)=> {
    this.child = event
  }
  
 



  //角色操作
  getRoleParam = (roleName) => {
    const params = this.props.match.params
    axios.ajax({
      url: API_ROLE_MANAGE.getRoleParam,
      data: {
        name: roleName
      }

    }).then(res => {
      
      if (res && res.length >= 0) {
        let roleList = res
         if(params.params === 'addUser'){
          roleList = this.deleteStopStatus(res)
         }
        this.setState({
          roleOptionsArr: Object.keys(roleList).length >0? roleList:[]
        })
      } else {
        return
      }
    })
  }
  //对角色进行扁平处理
    getRoleInfoList = (data) => {
        const { roleOptionsAll } = this.state;
        let that = this;
        if (data && data.length > 0) {
          data.map(item => {
            let id = item.id, name = item.name
            if (item.roles && item.roles.length > 0) {
              that.getRoleInfoList(item.roles)
            }
            Object.assign(roleOptionsAll, { [id]: name })
          })
        }
        return roleOptionsAll
    }
  deleteStopStatus= (data)=>{
     let that = this;
     if (data && data.length > 0) {
        data.map((item,index) => {
          if (item.roles && item.roles.length > 0) {
            that.deleteStopStatus(item.roles)
          }
          if(item.status==2){
            delete data[index]
          }
           
        })
      }
      return data 
  }
  //获取角色信息
  getRoleInfo = () => {
    const params = this.props.match.params
    return new Promise((resolve, reject) => {
      axios.ajax({
        url: API_ROLE_MANAGE.getRoleAll,
        data: {
          isParent:false ,
        }
      }).then(res => {
        if (res && res.length > 0) {
         let roleList = res
         if(params.params === 'addUser'){
          roleList = this.deleteStopStatus(res)
         }

          resolve(
            this.setState({
            roleOptionsArr: roleList.length>0? roleList:[] ,
            roleOptionsAll:this.getRoleInfoList(res)
          }),
          
          )
        } else {
          return
        }
      })
    })
  }

  //getRoleObj
  getRoleObj = (obj, checkedKeys) => {
    console.log('getRoleObj', obj);
    console.log('checkedKeys', checkedKeys);
    this.setState({
      detObj: obj,
      checkedKeys: checkedKeys,
      //roleCheckedObj: obj,
      // checkedKeys
    })
  }

  //afterClose关闭modal后的回调
  afterClose = () => {
    console.log('afterClose');
    this.getRoleInfo()
  }

  handleRoleOptions = () => {
    const { detObj, checkedKeys } = this.state
    console.log('detObj',detObj)
    console.log('checkedKeys',checkedKeys)

    if (!checkedKeys || Object.keys(detObj).length == 0) {
      message.warn('请选择对应的角色')
      return
    } else if (!checkedKeys || checkedKeys.length === 0) {
      message.warn('请选择对应的角色')
      return
    } else {
      let val = detObj.map(item => {
        return item.value
      }).join(',')

      this.props.form.setFieldsValue({ 'hiderole': val, 'updRoleIds': checkedKeys.map(k => Number(k)) })
      this.setState({
        isShowOrgModal: false,
        checkedKeys: checkedKeys,
        isOkRole: checkedKeys

      })
    }
  }

  handleOperator = (e) => {
    e && e.preventDefault();
    let formData = Utils.trim(this.props.form.getFieldsValue());
    

   let data = Object.assign({}, formData, {orgId: this.state.orgSelectData.orgId})

    if (data.birthday) {
      data.birthday = Utils.formatTimeStamp(data.birthday)
    } else if (!data.birthday) {
      data.birthday = 0
    }
    if (data.licenseTime) {
      // data.licenseBegin = data.licenseTime[0] ? moment(data.licenseTime[0]).format('X') : null
      // data.licenseEnd = data.licenseTime[1] ? moment(data.licenseTime[1]).format('X') : null
      data.licenseBegin = data.licenseTime[0] ? Utils.formatTimeStamp(data.licenseTime[0]) : 0
      data.licenseEnd = data.licenseTime[1] ? Utils.formatTimeStamp(data.licenseTime[1]) : 0


    }


    if (data.biz && data.biz.length > 0) {
      data.biz = data.biz.map(k => Number(k)).join(',')
    } else if (data.biz.length === 0) {
      delete data.biz
    }


    const { params } = this.props.match.params
    const { userInfo } = this.state

    if (!params || Object.keys(params).length === 0) {
      message.warn('用户信息获取失败，请返回重新添加')
      return
    }

    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          spinStatus: true,
        })  
        if (data.terminal_usr_flag && data.terminal_usr_flag.length >= 0) {
          delete data.terminal_usr_flag
        }
        let url = params && params === 'updUser' ? API_USER_MANAGE.updateUser : API_USER_MANAGE.addUser
       
        axios.optAjax({
          url: url,
          data: {
            ...data,
            uid: userInfo.uid
          }
        }).then(res => {
          if ( params && params === 'updUser' ) {
            
            const storageUser = storage.get('userInfo')
            if (userInfo && storageUser.id === userInfo.uid) {             
              const newData = Object.assign({}, storageUser, {roleIds: JSON.stringify(data.updRoleIds)})
              storage.set('userInfo', newData)
            }
          }
          
          if(res && res.code && res.code !== 0){
            this.setState({
              spinStatus: false,
            }) 
            return
          }

          if (res) {
            message.success(params && params === 'updUser' ? '修改成功' : '新增成功')
            this.props.history.push('/home/orgManage/user')
          }
          
        })
      }
    });
  }

  
   // 机构确定
   handleOrgOptions = ()=> {
    this.setState({
      orgVisible: false, 
      orgSelectData:{orgId: this.state.orgData.id, orgName: this.state.orgData.name}
    }, ()=> {
      this.props.form.setFieldsValue({
        'orgName':this.state.orgData.name
      })      
    });   

  }

  //检查终端机使用标识
  chekckTerminal = (rule, value, callback) => {
    console.log(value);
    if (!value || value.length === 0) {
      callback('请选择终端机');
    } else {
      callback();
    }
  };

  //确认密码
  confirmPwd = (rule, value, callback) => {

    let data = this.props.form.getFieldsValue()
    if (!value || !data.confirmPwd) {
      callback()
      return
    }
    if (data && Object.keys(data).length !== 0) {
      if (data.password !== data.confirmPwd) {
        console.log('wo cao ');
        callback('密码不一致');
      } else if (data.password === value) {
        // console.log('this.props.form ',this.props.form.validateFields);
        callback();
      }
    }
  }

  password = () => {
    const data = this.props.form.getFieldsValue()
    const { confirmPwd } = data
    this.props.form.setFieldsValue({ confirmPwd })
  }

  onConfirmPwd = () => {
    const data = this.props.form.getFieldsValue()
    const { password } = data
    this.props.form.setFieldsValue({ password })
  }

  //过滤空格
  filterSpace = (e, field) => {
    let userInfo = this.props.form.getFieldsValue();
    if (e.keyCode == 32 || userInfo[field]) {
      this.props.form.setFieldsValue({ [field]: userInfo[field].replace(/^\s+|\s+$/g, '') })
    }
  }

  //验证证件号码
  validcertNo = (rule, value, callback) => {
    const userInfo = this.props.form.getFieldsValue();
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
      callback()
    }
    if (reg.test(Utils.trim(value)) === false && userInfo.certType === 1) {
      callback('请输入正确的证件号码')
      return false;
    }
    callback()
  }

  //validmobile
  validmobile = (rule, value, callback) => {
    var reg = /^(\d{3,4})?(-)?\d{5,8}$/;
    if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
      callback()
    }
    if (reg.test(Utils.trim(value)) === false) {
      callback('请输入正确的电话号码')
      return false;
    }
    callback()
  }
  //手机号码
  validphone = (rule, value, callback) => {
    var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
    if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
      callback()
    }
    if (reg.test(Utils.trim(value)) === false) {
      callback('请输入正确的手机号码')
      return false;
    }
    callback()
  }
  //城市验证
  validcity = (rule, value, callback) => {
    var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
    if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
      callback()
    }
    if (reg.test(Utils.trim(value)) === false) {
      callback('城市名为中英文')
      return false;
    }
    callback()
  }
  //登录账号验证
  validLoginName = (rule, value, callback) => {
    let reg = /^[0-9a-zA-Z]*$/g
    if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
      callback()
    }
    if (reg.test(Utils.trim(value)) === false || value.length > 64) {
      callback('登录账号必须是字母和数字,最长为64位字符')
      return false;
    }
    callback()
  }

  validdegree = (rule, value, callback) => {
    console.log(value === 0);
    if (!value || value === undefined || value === null) {
      callback()
    }

    callback()
  }

  validEmail = (rule, value, callback) => {
    let reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
    if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
      callback()
    }

    if (reg.test(Utils.trim(value)) === false ||value.length > 64) {
      callback('请输入正确的邮箱,最长为64位字符')
      return false;
    }
    callback()
  }


  onLoadData = (treeNode) => {
    console.log(treeNode)
    return new Promise(resolve => {
      if (treeNode.props.childOrgs) {
        resolve();
        return;
      }

      axios.ajax({
        url: API_SYSORORG_MANAGE.getChildsOrgByCode,
        data: {
          code: treeNode.props.dataRef.code
        }
      }).then(res => {
        if (res && res.length > 0) {
          treeNode.props.dataRef.childOrgs = res
          console.log(treeNode)
          this.setState({
            orgOptionsArr: [...this.state.orgOptionsArr],
          });
          resolve()
        } else {
          resolve()
          return
        }

      })
    })
 
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    const { params } = this.props.match.params
    const { userInfo, checkedKeys, detObj } = this.state
    const isUpdUser = (field) => params && params === 'updUser' ? (userInfo[field] ? userInfo[field] : undefined) : undefined
    const isShow = params && params === 'updUser' ? true : false

    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 },
      },
    }
    const formItemLayout4 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 4 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 20 },
      },
    }
    const formItemLayout3 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 2 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 22 },
      },
    }


    const busiOptions = [
      { label: '代理销售保险产品', value: '1' },
      { label: '中国保监会批准的其他业务', value: '2' },
      { label: '代收取保险票', value: '3' },
      { label: '代理相关保险业务的损失勘察和理赔', value: '4' },
    ]


    return (
      <div className="userAdd">
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
          <div className="nav">
            <NavLink replace to={'/home/orgManage/user'} >用户管理</NavLink> > <span>{this.state.routerParams}</span>
          </div>
          <UserManageBar title="基本信息" />

          <div className="userInfo ">
            <Form layout="horizontal" className="publicForm" >
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="姓&emsp;&emsp;名" {...formItemLayout}>
                    {
                      getFieldDecorator('name', {
                        initialValue: params && params === 'updUser' ? userInfo.name : null,
                        rules: [
                          { required: true, message: '请输入姓名', },
                          { whitespace: true, message: '请输入姓名' },
                          { max: 64, message: '姓名最长为64位字符' }
                        ]
                      })(
                        <Input placeholder="姓名" className="formInput" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="用户昵称" {...formItemLayout}>
                    {
                      getFieldDecorator('userName', {
                        initialValue: params && params === 'updUser' ? userInfo.userName : null,
                        rules: [
                          { required: true, message: '请输入用户昵称', },
                          { whitespace: true, message: '请输入用户昵称' },
                          { max: 64, message: '用户昵称最长为64位字符' },
                        ]
                      })(
                        <Input placeholder="用户昵称" className="formInput" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem {...formItemLayout} className="multiLine " label={<span className="multLable">登录账号<br /><span className="smallFont">(字母/数字)</span></span>}  >
                    {

                      getFieldDecorator('loginName', {
                        initialValue: params && params === 'updUser' ? userInfo.loginName : '',
                        rules: [
                          { required: true, message: '请输入登录账号', },
                          { whitespace: true, message: '请输入登录账号' },
                          { validator: this.validLoginName },
                        ]
                      })(
                        <Input disabled={params && params === 'updUser' ? true : false} placeholder="登录账号" className="formInput" />
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="账户类型" {...formItemLayout}>
                    {
                      getFieldDecorator('type', {
                        initialValue: isUpdUser('type'),
                        rules: [
                          { required: true, message: '请选择账户类型' }
                        ]
                      })(
                        <Select placeholder="账户类型" className="formInput">
                          <Option value={1}>内勤</Option>
                          <Option value={2}>外勤</Option>
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="账户状态" {...formItemLayout}>
                    {
                      getFieldDecorator('status', {
                        initialValue: params && params === 'updUser' ? (userInfo.status ? userInfo.status : 0) : undefined,
                        rules: [{ required: true, message: '请选择账户状态' }]
                      })(
                        <Select placeholder="账户状态" className="formInput" >
                          <Option value={1}>未激活</Option>
                          <Option value={2}>正常</Option>
                          <Option value={3}>禁用</Option>
                          <Option value={4}>锁定</Option>
                          <Option value={0}>其它</Option>
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem   label="所属机构" {...formItemLayout}>
                      {
                        getFieldDecorator('orgName', {
                          initialValue: this.state.orgSelectData.orgName,
                          rules: [{ required: true, message: '请选择所属机构' }]
                        })(
                          <Input disabled placeholder="所属机构" className="formInput80" />
                        )
                      }
                      <Icon className="orghover" onClick={this.orgOptions} type="appstore" />
                    </FormItem>
                
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="角&emsp;&emsp;色" {...formItemLayout} >
                    {
                      getFieldDecorator('hiderole', {
                        // initialValue: 2
                        rules: [{ required: true, message: '请选择角色' }]
                      })(
                        <Input disabled className="formInput" addonAfter={<Icon className="chooseRole" onClick={() => {
                          console.log('checkedKeys', checkedKeys);
                          this.setState({
                            isShowOrgModal: true,
                            checkedKeys,
                            detObj,
                          })
                        }} type="user" />} placeholder="角色" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem style={{ display: 'none' }} >
                    {
                      getFieldDecorator('updRoleIds', {
                        // initialValue: 2
                      })(
                        <Input />

                        )
                    }
                  </FormItem>
                  <FormItem label="所属渠道" {...formItemLayout}>
                    {
                      getFieldDecorator('channelId', {
                        initialValue: params && params === 'updUser' ? userInfo.channelId : undefined,
                        rules: [
                          { required: true, message: '请选择渠道', }
                        ]
                      })(
                        <Select placeholder="所属渠道" className="formInput" notFoundContent='No data'>
                          {this.state.channelOptions}
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="性&emsp;&emsp;别" {...formItemLayout}>
                    {
                      getFieldDecorator('gender', {
                        initialValue: params && params === 'updUser' ? (userInfo.gender ? userInfo.gender : 'M') : 'M',
                        // rules: [
                        //   { required: true, message: '请选择性别', }
                        // ]
                      })(
                        <RadioGroup>
                          <Radio value="M">男</Radio>
                          <Radio value="F">女</Radio>
                        </RadioGroup>
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                {!isShow ?
                  <Row gutter={24}>
                    <Col span="8">
                      <FormItem label="登录密码" {...formItemLayout} >
                        {

                          getFieldDecorator('password', {
                            validateFirst: true,
                            rules: [
                              { required: true, message: '请输入登录密码' },
                              // { min: 6, message: '密码至少6位' },
                              // { max: 16, message: '密码最多16位' },
                              { pattern: /^[\x01-\x7f]*$/g, message: '登录密码不能为中文' },
                              { validator: this.confirmPwd },
                              { max: 16, message: '密码最多16位' },
                            ]
                          })(
                            <Input onKeyUp={this.password} type="password" placeholder="登录密码" className="formInput" />
                            )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="确认密码" {...formItemLayout}>
                        {
                          getFieldDecorator('confirmPwd', {
                            validateFirst: true,
                            rules: [
                              { pattern: /^[\x01-\x7f]*$/g, message: '登录密码不能为中文' },
                              { validator: this.confirmPwd },
                              { required: true, message: '请输入确认密码', },
                              { max: 16, message: '登录密码最多16位' },
                            ]
                          })(
                            <Input onKeyUp={this.onConfirmPwd} type="password" placeholder="确认密码" className="formInput" />
                            )
                        }
                      </FormItem>
                    </Col>
                    <Col span="8">
                      <FormItem label="在职状态" {...formItemLayout} >
                        {
                          getFieldDecorator('jobStatus', {
                            initialValue: params && params === 'updUser' ? userInfo.jobStatus : undefined,
                            rules: [{ required: true, message: '请选择在职状态', },]
                          })(
                            <Select placeholder="在职状态" className="formInput">
                              <Option value={1}>在职</Option>
                              <Option value={2}>离职</Option>
                              <Option value={3}>暂离</Option>
                              <Option value={0}>其它</Option>
                            </Select>
                            )
                        }
                      </FormItem>
                    </Col>
                  </Row> :
                  <Col span="8">
                    <FormItem label="在职状态" {...formItemLayout} >
                      {
                        getFieldDecorator('jobStatus', {
                          initialValue: params && params === 'updUser' ? userInfo.jobStatus : undefined,
                          rules: [{ required: true, message: '请选择在职状态', },]
                        })(
                          <Select placeholder="在职状态" className="formInput">
                            <Option value={1}>在职</Option>
                            <Option value={2}>离职</Option>
                            <Option value={3}>暂离</Option>
                            <Option value={0}>其它</Option>
                          </Select>
                          )
                      }
                    </FormItem>
                  </Col>

                }
                <Col span="16">
                  <FormItem label="终端机使用标识" {...formItemLayout4} >
                    {
                      getFieldDecorator(['terminal_usr_flag'], {
                        initialValue: this.state.initTermUsrFlgVal,
                        rules: [{ required: true, validator: this.chekckTerminal }]

                      })(
                        <CheckboxGroup options={this.termFlagsOpts} onChange={this.onChange} />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem style={{ display: 'none' }} label="终端机使用标识" labelCol={{ span: 3 }}  >
                    {
                      getFieldDecorator('terminalUsrFlag', {
                        initialValue: '',
                      })(
                        <Input />
                        )
                    }
                  </FormItem>
                </Col>
              </Row>

              <div className="detail"  >
                <UserManageBar title="详细信息(外勤选填)" />
              </div>

              <Row gutter={24} style={{ marginTop: 20 }}>
                <Col span="8">
                  <FormItem label="生&emsp;&emsp;日" {...formItemLayout} >
                    {

                      getFieldDecorator('birthday', {
                        initialValue: params && params === 'updUser' ? (userInfo.birthday ? moment(Number(userInfo.birthday * 1000)) : null) : null
                      })(
                        <DatePicker style={{ width: '100%' }} disabledDate={current => {
                          return current > moment()
                        }} placeholder="年/月/日" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="邮&emsp;&emsp;箱" {...formItemLayout} >
                    {
                      getFieldDecorator('email', {
                        initialValue: isUpdUser('email'),
                        rules: [
                          // { whitespace: true, message: '请输入邮箱' },
                          { validator: this.validEmail },
                        ]
                      })(
                        <Input placeholder="邮箱" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="证件类型" {...formItemLayout} >
                    {
                      getFieldDecorator('certType', {
                        // initialValue: certType
                        onChange: this.certChange
                      })(
                        <Select placeholder="证件类型" >
                          <Option value={1}>身份证</Option>
                          <Option value={2}>军人证</Option>
                          <Option value={3}>港澳通行证</Option>
                          <Option value={0}>其它</Option>
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
              </Row>

              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="证件号码" {...formItemLayout} >
                    {
                      getFieldDecorator('certNo', {
                        initialValue: isUpdUser('certNo'),
                        rules: [
                          // { whitespace: true, message: '证件号码不能为空!' },
                          {
                            validator: this.validcertNo
                          }]
                      })(
                        <Input placeholder="证件号码" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="电话号码" {...formItemLayout} >
                    {
                      getFieldDecorator('telephone', {
                        initialValue: isUpdUser('telephone'),
                        rules: [
                          // { whitespace: true, message: '电话号码不能为空' },
                          { validator: this.validmobile }
                        ]
                      })(
                        <Input placeholder="电话号码" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="手机号码" {...formItemLayout} >
                    {
                      getFieldDecorator('mobile', {
                        initialValue: isUpdUser('mobile'),
                        rules: [
                          // { whitespace: true, message: '手机号码不能为空' },

                          { validator: this.validphone }
                        ]
                      })(
                        <Input placeholder="手机号码" />
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="城&emsp;&emsp;市"  {...formItemLayout}>
                    {
                      getFieldDecorator('city', {
                        initialValue: isUpdUser('city'),
                        rules: [
                          // { whitespace: true, message: '城市不能为空' }, 
                          { max: 16, message: '城市最长为16位字符' },
                          { validator: this.validcity },]
                      })(
                        <Input placeholder="城市" />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="16">
                  <FormItem label="联系地址"  {...formItemLayout2}>
                    {
                      getFieldDecorator('address', {
                        initialValue: isUpdUser('address'),
                        rules: [
                          { max: 128, message: '联系地址最长为128 位字符' },
                          // { whitespace: true, message: '联系地址不能为空' },
                          {
                            validator: (rules, value, callback) => {
                              if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
                                callback()
                              }
                              callback()
                            }
                          },]
                      })(
                        <Input maxLength="512" placeholder='联系地址' className="formInput" />
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="学&emsp;&emsp;历" {...formItemLayout} >
                    {
                      getFieldDecorator('degree', {
                        // initialValue: isUpdUser('degree'),
                      })(
                        <Select placeholder="学历" >
                          <Option value={4} >博士</Option>
                          <Option value={3} >研究生/硕士</Option>
                          <Option value={2} >大学</Option>
                          <Option value={1} >高中</Option>
                          <Option value={0} >其它</Option>
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="公种类型" {...formItemLayout} >
                    {
                      getFieldDecorator('contract', {
                        // initialValue: isUpdUser('contract')
                      })(
                        <Select placeholder="公种类型" >
                          <Option value={1} >劳工合同</Option>
                          <Option value={2} >代理合同</Option>
                          <Option value={3} >兼职</Option>
                          <Option value={0} >其它</Option>
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem style={{ visibility: 'hidden' }} label="联系地址" wrapperCol={{ span: 15 }} >
                    {
                      <Input />
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="24">
                  <FormItem  {...formItemLayout3} label="业务范围"  >
                    {
                      getFieldDecorator(['biz'], {
                        initialValue: params && params === 'updUser' ? (userInfo.biz ? userInfo.biz.split(',') : []) : []
                      })(
                        <CheckboxGroup placeholder='业务范围' options={busiOptions} />
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="资&nbsp; 格 &nbsp;证：" {...formItemLayout} >
                    {
                      getFieldDecorator('qualCert', {
                        initialValue: isUpdUser('qualCert'),
                        rules: [
                          // { whitespace: true, message: '资格证不能为空' },
                          { max: 16, message: '资格证最长为32位字符' },
                        ]
                      })(
                        <Input placeholder='资格证' />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="从业区域："  {...formItemLayout} >
                    {
                      getFieldDecorator('scope', {
                        initialValue: isUpdUser('scope'),
                        rules: [{ max: 128, message: '从业区域最长为128位字符' },]
                      })(
                        <Input placeholder='从业区域' />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="执业证类型："  {...formItemLayout} >
                    {
                      getFieldDecorator('licenseType', {
                        initialValue: isUpdUser('licenseType')
                      })(
                        <Select placeholder="执业证类型" >
                          <Option value={1} >销售</Option>
                          <Option value={2} >员工</Option>
                          <Option value={3} >老板</Option>
                          <Option value={0} >其它</Option>
                        </Select>
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="执&nbsp; 业&nbsp; 证："  {...formItemLayout} >
                    {
                      getFieldDecorator('licenseNo', {
                        initialValue: isUpdUser('licenseNo'),
                        rules: [
                          { max: 16, message: '执业证最长为32位字符' },

                        ]
                      })(
                        <Input placeholder='执业证' />
                        )
                    }
                  </FormItem>
                </Col>
                <Col span="16">
                  <FormItem label="执业证执证时间："  {...formItemLayout4}>
                    {
                      getFieldDecorator('licenseTime', {
                        initialValue: params && params === 'updUser' ?
                          [userInfo.licenseBegin ? moment(Number(userInfo.licenseBegin * 1000)) : null, userInfo.licenseEnd ? moment(Number(userInfo.licenseEnd * 1000)) : null] : []
                      })(
                        <RangePicker placeholder={['开始时间', '结束时间']} className="formInput" />
                        )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="16">
                  <FormItem label="备 &emsp;&emsp;注"  {...formItemLayout2} >
                    {
                      getFieldDecorator('remark', {
                        initialValue: isUpdUser('remark'),
                        rules: [
                          { max: 512, message: '备注最长为512位字符' },
                          {
                            validator: (rules, value, callback) => {
                              if (!value || value === undefined || value === null || value.replace(/^\s+|\s+$/g, '') === '') {
                                callback()
                              }
                              callback()
                            }
                          },]
                      })(
                        <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/orgManage/user'><Button> 返回 </Button></NavLink>
          </div>
        </Spin>  
        {/* 所属机构弹窗 */}
        <Modal
          title="所属机构"
          visible={this.state.orgVisible}
          width={800}
          className="modal"
          cancelText = "取消"
          okText =  "确定"
          onOk={this.handleOrgOptions}
          onCancel={() => {
            this.setState({
              orgVisible: false
            })
          }}
          >
            <LayerOrgSelect 
              onRef = {this.onRef}
              selectTree={this.selectTree} 
              orgData= {this.state.orgData}
            />
          </Modal>

        {/*角色modal*/}
        <Modal
          title="角色选择"
          visible={this.state.isShowOrgModal}
          width={800}
          className="modal"
          destroyOnClose={true}
          okText="确认"
          cancelText="取消"
          onOk={this.handleRoleOptions}
          afterClose={this.afterClose}
          onCancel={() => {
            this.setState({
              isShowOrgModal: false,
              checkedKeys
            })
          }}
        >
          <MutilOptions
            getRoleParam={(roleName) => this.getRoleParam(roleName)}
            getRoleInfo={this.getRoleInfo}
            roleOptionsArr={this.state.roleOptionsArr}
            getRoleObj={this.getRoleObj}
            checkedKeys={this.state.isOkRole}
            getCheckedObj = {this.getCheckedObj}
          />
        </Modal>

      </div>
    )
  }
}

export default Form.create()(UserAdd);