personDetail.js

import './personal.less'
import React from 'react';
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import { NavLink } from 'react-router-dom'
import {UserManageBar } from '@components/Common'
import { API_USER_MANAGE, API_ROLE_MANAGE, API_CHANNEL_MANAGE, API_SYSORORG_MANAGE } from '@src/Api'
import { Row, Col, Form, Button, message } from 'antd'

const queryString = require('query-string');


class PersonDetail 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 },
  ];
  termFlagsOption={ 1: '安卓',2: 'IOS',4: '微信', 8: 'ipad(苹果)', 16 : 'pad(安卓)',32: 'PC'}
  busiOptions = { 1: '代理销售保险产品', 2: '中国保监会批准的其他业务',3:'代收取保险票', 4:'代理相关保险业务的损失勘察和理赔'}
  state = {
    orgVisible: false,
    orgOptionsArr: [],
    checkedObj: {},
    roleOptionsArr: [],
    userInfo: {},
    getOrgOptionsName: {},
  }

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

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


  }
  //获取账户状态
  getCustomerStatus=(num)=>{
   let status
   if(num=='1'){
     status='未激活';
    }else if(num=='2'){
     status='正常';

    }else if(num=='3'){
       status='禁用';

    }else if(num=='4'){
      status='锁定';

    }else{
      status='其它';
    }
    return  status
  }
  //获取账户类型
  getType=(num)=>{
   let type
   if(num=='1'){
     type='内勤';

    }else{
     type='外勤';
    }
    return  type
  }
  //获取在职状态
  getJobStatus=(num)=>{
   let jobStatus
   if(num=='1'){
     jobStatus='在职';

    }else if(num=='2'){
     jobStatus='离职';

    }else if(num=='3'){
     jobStatus='暂离';

    }else{
     jobStatus='其它';
    }
    return  jobStatus
  }
  //获取性别
  getGender=(num)=>{
    let gender
   if(num=='M'){
     gender='男';

    }else{
     gender='女';
    }
    return  gender
  }
  //获取证件类型
  getCertType=(num)=>{
    let certType
   if(num=='1'){
     certType='身份证';

    }else if(num=='2'){
     certType='军人证';
    }else if(num=='3'){
     certType='港澳通行证';
    }else if(num=='0'){
      certType='其它';
    }else{
      certType='';
    }
    return  certType
  }
  //获取学历
  getDegree =(num)=>{
    let degree
   if(num=='4'){
     degree='博士';
    }else if(num=='3'){
     degree='研究生/硕士';
    }else if(num=='2'){
     degree='大学';
    }else if(num=='1'){
     degree='高中';
    }else if(num=='0'){
      degree='其它';
    }else{
     degree='';
    }
    return  degree
  }
  //获取工种合同
  getContract =(num)=>{
    let contract
    if(num=='3'){
     contract='兼职';
    }else if(num=='2'){
     contract='代理合同';
    }else if(num=='1'){
     contract='劳工合同';
    }else if(num=='0'){
     contract='其它';
    }else{
     contract='';
    }
    return  contract
  }
  //获取执业证类型
  getLicenseType =(num)=>{
    let licenseType
    if(num=='3'){
     licenseType='老板';
    }else if(num=='2'){
     licenseType='员工';
    }else if(num=='1'){
     licenseType='销售';
    }else if(num=='0'){
     licenseType='其它';
    }else{
     licenseType='';
    }
    return  licenseType
  }
   //获取渠道信息
  getParamChannel = () => {
    return new Promise((resolve, reject) => {
    axios.ajax({
      url: API_CHANNEL_MANAGE.getParamChannel,
      data: {
        pageNum: 1,
        pageSize: 100
      }
    }).then(res => {
      //渲染渠道列表
      res = res.records
      const channelOptions = Utils.getOptionList(res)
      let obj = {}
      res.map(item => {
        let id = item.id
        let name = item.name
        return Object.assign(obj, { [id]: name })
      })
      resolve(this.setState({
        channelOptions,
        channelObj: obj
      }))
    })

     })
  }
  //终端机使用标识数据初始化处理
  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
  }
  //获取角色信息
  getRoleInfo = () => {
    return new Promise((resolve, reject) => {
      axios.ajax({
        url: API_ROLE_MANAGE.getRoleAll,
        data: {
          isParent:true ,
        }
      }).then(res => {
        if (res && res.length > 0) {
          let obj = {}
          res.map(item => {
            let id = item.id
            let name = item.name
            return Object.assign(obj, { [id]: name })
          })
          resolve(this.setState({
            roleOptionsArr: res,
            roleOptionsAll: obj
          }))
        } else {
          return
        }
      })
    })
  }
  //根据id获取用户信息
  getUserByid = () => {
    let _this = this
    return new Promise((resolve, reject) => {
      const { uid } = this.props.match.params
      const { roleIds } = queryString.parse(this.props.location.search)
      const { getOrgOptionsName, roleOptionsAll,channelObj,termFlagsOption} = this.state
      let updRoleIds = []
      if (roleIds && Object.keys(roleIds).length > 0) {
        updRoleIds = roleIds.split(',').map(k => Number(k))
        this.setState({
          checkedKeys: updRoleIds
        })
      }
        if (!uid) {
          message.warn('请重新选择，或者刷新页面')
          this.props.history.push({
            pathname: '/home/orgManage/person',
          });
          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 initTermVal = initTermUsrFlgVal.map(item => {
                return _this.termFlagsOption[item]
              }).join('、')
              let biz=res.biz? res.biz.split(","):[]
              let bizVal = biz.map(item => {
                return  _this.busiOptions[item]
              }).join('、')
              let updRoleIds=[]
              if (res.roleIds && Object.keys(res.roleIds).length > 0) {
                updRoleIds = res.roleIds.split(',').map(k => Number(k))
              }
              let roleVal = updRoleIds.map(item => {
                return roleOptionsAll[item]
              }).join(',')
              resolve(this.setState({
                userInfo: res,
                initTermVal,
                bizVal,
                channelVal:channelObj[res.channelId],
                roleVal:roleVal,
                OrgName:getOrgOptionsName[res.orgId],
                checkedObj: {
                  key: res.orgId,
                  val: getOrgOptionsName[res.orgId]
                }
              }))

            }
          })
        }
    })
  }

  //对机构进行扁平处理
  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
  }
  //获取所属机构
  getOrgTreeList = (orgName) => {
    return new Promise((resolve, reject) => {
      axios.ajax({
        url: API_SYSORORG_MANAGE.getOrgTreeList,

      }).then(res => {
        if (res && res.length > 0) {
          this.setState({
            orgOptionsArr: res
          })
          resolve(this.getOrgOptionsName(res))
        } else {
          return
        }
      })
    })
  }
  //检查终端机使用标识
  chekckTerminal = (rule, value, callback) => {
    if (!value || value.length === 0) {
      callback('请选择终端机');
    } else {
      callback();
    }
  };


  render() {
    const { userInfo ,channelVal,roleVal,OrgName,initTermVal,bizVal} = this.state

    return (
      <div className="userAdd">
        <div className="nav">
          <NavLink replace to={'/home/orgManage/person'} >组织人员</NavLink> > <span>人员详情</span>
        </div>
        <UserManageBar title="基本信息" />
        <div className="userInfo personInfo">
             <Row type="flex" justify="left" align="top" style = {{marginBottom : '15px'}}>
              <Col span={6} offset={3}><span className="name">用户昵称：</span><span className="content">{Utils.formatTableColumn(userInfo.userName)}</span></Col>
              <Col span={6}><span className="name">登录账号：<br/>(字母或数字)</span><span className="loginContent">{Utils.formatTableColumn(userInfo.loginName)}</span></Col>
              <Col span={6}><span className="name">所属机构：</span><span className="content">{Utils.formatTableColumn(OrgName)}</span></Col>
            </Row>
            <Row type="flex" justify="left" align="top" style = {{marginBottom : '30px',marginTop :'15px'}}>
              <Col span={6} offset={3}><span className="name">账户类型：</span><span className="content">{this.getType(userInfo.type)}</span></Col>
              <Col span={6}><span className="name">账户状态：</span><span className="content">{this.getCustomerStatus(userInfo.status)}</span></Col>
              <Col span={6}><span className="name">在职状态：</span><span className="content">{this.getJobStatus(userInfo.jobStatus)}</span></Col>
            </Row>
            <Row type="flex" justify="left" align="top" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">角&emsp;&emsp;色：</span><span className="content">{Utils.formatTableColumn(roleVal)}</span></Col>
              <Col span={6}><span className="name">所属渠道：</span><span className="content">{channelVal}</span></Col>
              <Col span={6}><span className="name">性&emsp;&emsp;别：</span><span className="content">{this.getGender(userInfo.gender)}</span></Col>
            </Row>
            <Row type="flex" justify="left" align="top" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={21} offset={3}><span className="name">终端机使用标识：</span><span className="content">{initTermVal}</span></Col>
            </Row>
            <div className="detail"  >
              <UserManageBar title="详细信息" />
            </div>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">生&emsp;&emsp;日：</span><span className="content">{Utils.formateDateToYMD(userInfo.birthday)}</span></Col>
              <Col span={6}><span className="name">邮&emsp;&emsp;箱：</span><span className="content">{userInfo.email}</span></Col>
              <Col span={6}><span className="name">证件类型：</span><span className="content">{this.getCertType(userInfo.certType)}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">证件号码：</span><span className="content">{userInfo.certNo}</span></Col>
              <Col span={6}><span className="name">电话号码：</span><span className="content">{userInfo.telephone}</span></Col>
              <Col span={6}><span className="name">手机号码：</span><span className="content">{userInfo.mobile}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">城&emsp;&emsp;市：</span><span className="content">{Utils.formatTableColumn(userInfo.city)}</span></Col>
              <Col span={12}><span className="name">联系地址：</span><span className="content">{Utils.formatTableColumn(userInfo.address)}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">学&emsp;&emsp;历：</span><span className="content">{this.getDegree(userInfo.degree)}</span></Col>
              <Col span={6}><span className="name">工种合同：</span><span className="content">{this.getContract(userInfo.contract)}</span></Col>
              <Col span={6}><span className="name">资&ensp;格&ensp;证：</span><span className="content">{Utils.formatTableColumn(userInfo.qualCert)}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={18} offset={3}><span className="name">业务范围：</span><span className="scopeCon">{bizVal}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">从业区域：</span><span className="content">{Utils.formatTableColumn(userInfo.scope)}</span></Col>
              <Col span={6}><span className="name">执业证类型：</span><span className="content">{this.getLicenseType(userInfo.licenseType)}</span></Col>
              <Col span={6}><span className="name">执&ensp;业&ensp;证：</span><span className="content">{Utils.formatTableColumn(userInfo.licenseNo)}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={6} offset={3}><span className="name">执业证开始时间：</span><span className="content">{Utils.formateDateToYMD(userInfo.licenseBegin)}</span></Col>
              <Col span={6}><span className="name">执业证结束时间：</span><span className="content">{Utils.formateDateToYMD(userInfo.licenseEnd)}</span></Col>
            </Row>
            <Row type="flex" justify="left" style = {{marginBottom : '30px',marginTop :'30px'}}>
              <Col span={18} offset={3}><span className="name">备&emsp;&emsp;注：</span><span className="remarkCon">{userInfo.remark}</span></Col>
            </Row>
        </div>
        <div className="submitBtn" >
          <NavLink replace to='/home/orgManage/person'> <Button >返回</Button></NavLink>
        </div>


      </div>
    )
  }
}

export default Form.create()(PersonDetail);