orgAdd.js

import React from 'react';
import './orgIndex.less'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import { NavLink } from 'react-router-dom'
import UserManageBar from '@components/Common/WhiteBar/index'
import OrgOptionsForm from '@components/Common/OrgOptions/codeIndex'
import { API_SYSORORG_MANAGE } from '@src/Api'
import { Form, Button, Input, Icon, message, Modal, Radio,Row, Col, Spin } from 'antd'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea


class OrgAdd extends React.Component {

  state = {
    setDisabled:false,//设置机构code是否禁止输入
    orgVisible: false,//机构弹窗显示
    orgOptionsArr: [],//机构弹窗页面树形数据
    checkedObj: {},//选中的机构信息
    orgInfo:{},//根据id获取机构信息
    titleParams: '新增机构',
    showOrg:{display : 'block'},
    hideOrg:{display : 'none'},
    spinStatus: false, // 是否显示加载中
  }
   componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
  }
  async componentDidMount() {
    //获取机构树状图
    await this.getOrgTreeList()
    //判断跳转
    this.getRouterParams()
  }
  //根据菜单ID查询机构信息
  getOrgById = () => {
    this.setState({
      spinStatus: true,
    })  
    return new Promise((resolve, reject) => {
      const { optTag,oid } = this.props.match.params
        if (!oid) {
          message.warn('请重新选择，或者刷新页面')
          this.props.history.push({
            pathname: '/home/orgManage/orgIndex',
          });
          return
        }else {
          axios.ajax({
            url: API_SYSORORG_MANAGE.getOrgById,
            data: {
              id:oid
            }
          }).then(res => {
            this.setState({
              spinStatus: false,
            })  
            if (res && Object.keys(res).length > 0) {
               //根据修改还是新增下级机构来渲染上级机构显示数据
               if (optTag === 'updateItem') {
                  this.props.form.setFieldsValue({ 'parentCode':res.parentCode })
                  if(res.parentCode==='0'){
                    this.props.form.setFieldsValue({ 'parentName': res.name  })
                    this.props.form.setFieldsValue({ 'upParentName': res.name  })
                  }else{
                    this.props.form.setFieldsValue({ 'parentName': res.parentName  })
                    this.props.form.setFieldsValue({ 'upParentName': res.parentName  })
                  }
                  this.setState({ setDisabled: true })
                }else if (optTag === 'addNextItem') {
                  this.props.form.setFieldsValue({ 'parentCode': res.code  })
                   this.props.form.setFieldsValue({ 'parentName': res.name  })
                   this.props.form.setFieldsValue({ 'upParentName': res.name  })
                }
              resolve(this.setState({
                orgInfo: res,
                checkedObj: {
                  key: res.parentCode,
                  val: res.name,
                },
                parentCode:res.code
              }))
            }
          })
        }
     })
  }
  //获取跳转过来的传参判断是新增、修改、新增下级机构
  getRouterParams = () => {
    const params = this.props.match.params
    if (!params || !params.optTag) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.push({
        pathname: '/home/orgManage/orgIndex',
      });
      return
    }

    if (params.optTag === 'addItem') {
      this.setState({
        titleParams: '新增机构'
      })
    } else if (params.optTag === 'updateItem') {

      this.setState({
        titleParams: '修改机构',
      })
      this.getOrgById()
    }else if (params.optTag === 'addNextItem') {
      this.getOrgById()
      this.setState({
        titleParams: '新增下级机构',
        showOrg:{display : 'none'},
        hideOrg:{display : 'block'},
      })
    }
  }
  //弹窗根据机构名称查询
  getOrgByName = (orgName) => {
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgByName,
      data: {
        name: orgName
      }

    }).then(res => {
      if (res && res.length > 0) {
        this.setState({
          orgOptionsArr: res
        })
      } else {
        this.setState({
          orgOptionsArr: []
        })
      }
    })
  }
   // 机构清空
  onRef = (ref) => {
    this.child = ref;
  }
  //获取机构树形机构
  getOrgTreeList = (orgName) => {
    axios.ajax({
      url: API_SYSORORG_MANAGE.getOrgTreeList,

    }).then(res => {
      if (res && res.length > 0) {
        this.setState({
          orgOptionsArr: res
        })
      } else {
        this.setState({
          orgOptionsArr: []
        })
      }
    })
  }
  //获取弹窗选中项
  getCheckedObj = (obj) => {
    this.setState({
      checkedObj: obj
    })
  }


  //打开所属机构弹窗
  showOrgModal = () => {
    let orgInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({
      orgVisible: true,
      checkedObj:  {
          key: orgInfo.parentCode,
          val: orgInfo.parentName
        }
    })

  }
  
  //机构增加 
  handleOperator = (e) => {
    e && e.preventDefault();
    let data = Utils.trim(this.props.form.getFieldsValue());
    const { optTag } = this.props.match.params
    const { orgInfo } = this.state
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          spinStatus: true,
        })  

        axios.optAjax({
          url: optTag && optTag === 'updateItem' ? API_SYSORORG_MANAGE.updateOrg:API_SYSORORG_MANAGE.addOrg,
          data: {
            ...data,
            id: optTag && optTag === 'updateItem' ? orgInfo.id:""
          }
        }).then(res=>{
          if(res && res.code && res.code !== 0){
            this.setState({
              spinStatus: false,
            }) 
            return
          }
          message.success(optTag && optTag === 'updateItem' ? '修改成功' : '新增成功')
          this.props.history.push({
            pathname: '/home/orgManage/orgIndex',
          });
        })
      }
    });
  }
  //确定选中机构
  handleOrgOptions = () => {
    const checkedObj = this.state.checkedObj
    if (Object.keys(checkedObj).length === 0 || !checkedObj) {
      message.warn('请选择对应的机构')
      return
    } else {
      this.setState({
        checkedObj
      })
      this.props.form.setFieldsValue({ 'parentName': checkedObj.val })
      this.props.form.setFieldsValue({ 'upParentName': checkedObj.val  })
      this.props.form.setFieldsValue({ 'parentCode': checkedObj.key })
      this.setState({
        orgVisible: false
      })
    }
  }
  //验证传真号码
  validFax = (rule, value, callback) => {
    var reg = /^(\s*||\s*(\d{5})||\s*(\d{3,4})?(-)?\d{5,8}\s*)$/;
    if (!value || value === undefined || value === null) {
      callback()
    }
    let num = value ? Utils.trim(value):value
    if (reg.test(num) === false) {
      callback('请输入正确的传真号码')
      return false;
    }
    callback()
  }
  //验证邮编
  validzipCode = (rule, value, callback) => {
    var reg = /^((\s)*[0-9]\d{5}(\s)*||(\s)*)$/;
    if (!value || value === undefined || value === null ) {
      callback()
    }
    if (reg.test(value) === false) {
      callback('请输入正确的邮编，邮编长度为6位')
      return false;
    }else if(Utils.trim(value).length>6){
      callback('请输入正确的邮编，邮编长度为6位')
      return false;
    }
    callback()
  }

  //电话号码
  validmobile = (rule, value, callback) => {
    var reg =  /^(\s*||\s*(\d{5})||\s*(\d{3,4})?(-)?\d{5,8}\s*)$/;
    if (!value || value === undefined || value === null) {
      callback()
    }
    if (reg.test(value) === false) {
      callback('请输入正确的电话号码')
      return false;
    }
    
    callback()
  }
  //手机号
  validphone = (rule, value, callback) => {
    var reg = /^(\s*||\s*(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}\s*)$/;
    if (!value || value === undefined || value === null) {
      callback()
    }
    if (reg.test(value) === false) {
      callback('请输入正确的手机号码')
      return false;
    }
    callback()
  }
  //城市验证
  validcity = (rule, value, callback) => {
    var reg = /^(\s*||\s*([\u4e00-\u9fa5A-Za-z])+\s*)$/;
    if (!value || value === undefined || value === null) {
      callback()
    }
    if(value){
      if (reg.test(value) === false || value.length>16) {
        callback('城市名为中英文,最长为16位字符')
        return false;
      }
    }
    
    callback()
  }

  render() {
     const { getFieldDecorator } = this.props.form;
     const { optTag } = this.props.match.params
     const { orgInfo } = this.state
     const { setDisabled} = this.state

     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 formItemLayout3 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 14 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 10 },
      },
    };

    return (
      <div className="orgAdd">
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
          <div className="nav">
            <NavLink replace to={'/home/orgManage/orgIndex'} >机构管理</NavLink> > <span>{this.state.titleParams}</span>
          </div>
          <UserManageBar title="基本信息" />

          <div className="userInfo ">
            <Form layout="horizontal" className = "publicForm">

            <Row gutter={24}>
              <Col span="8" style={this.state.showOrg}>  
                <FormItem label="上级机构" {...formItemLayout} >
                  {
                    getFieldDecorator('parentName', {
                    rules: [
                        { required: true, message: '请选择上级机构', }
                      ]
                    })(
                      <Input  disabled addonAfter={<Icon className="chooseRole" onClick={() => { this.showOrgModal() }} type="search" />} placeholder="上级机构" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8" style={this.state.hideOrg}>  
                <FormItem label="上级机构" {...formItemLayout} >
                  {
                    getFieldDecorator('upParentName', {
                    rules: [
                        { required: true, message: '请选择上级机构', }
                      ]
                    })(
                      <Input  disabled  placeholder="上级机构" />
                    )
                  }
                </FormItem>     
              </Col>
              <Col span="8" style={{ display: 'none' }}>  
                <FormItem>
                  {
                    getFieldDecorator('parentCode', {
                    })(
                      <Input type="number" placeholder="上级机构" min="0"/>
                    )
                  }
                </FormItem>      
              </Col>
              <Col span="8"> 
                <FormItem label={<span>管理机构和销售机构的标记</span>} {...formItemLayout3}>
                  {
                    getFieldDecorator('orgFlag', {
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.orgFlag:1,
                    })(
                      <RadioGroup>
                        <Radio value={1}>管理</Radio>
                        <Radio value={2}>销售</Radio>
                      </RadioGroup>
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="机构code" {...formItemLayout}>
                    {
                      getFieldDecorator('code', {
                        initialValue: optTag && optTag === 'updateItem' ?   orgInfo.code+"":null,
                        rules: [
                        {required: true,  message: '请输入机构code' },
                        {pattern: /^(\s)*([0-9]{1,18})(\s)*$/, message: '机构code必须为正整数,最长为18位字符'},
                        ]
                      })(
                        <Input disabled={setDisabled} placeholder="机构code" min="1" className = "formInput" />
                      )
                    }
                  </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span="8">  
                <FormItem label="机构名称" {...formItemLayout}>
                  {
                    getFieldDecorator('name', {
                    initialValue: optTag && optTag === 'updateItem' ?   orgInfo.name:null,
                    validateFirst: true,
                    rules: [
                        { required: true, message: '请输入机构名称', },
                        {pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/, message: '机构名称不能有特殊字符'},
                        { max: 64, whitespace: true, message: '机构名称最长为64位字符'  },
                      ]
                    })(
                      <Input placeholder="机构名称" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">  
                <FormItem label="机构级别"  {...formItemLayout}>
                  {
                    getFieldDecorator('orgGrade', {
                    initialValue: optTag && optTag === 'updateItem' ?   orgInfo.orgGrade+"":"",
                    rules: [
                      {required: true,  message: '请输入机构级别' },
                      {pattern: /^(\s)*([0-9]{1,4})(\s)*$/, message: '机构级别必须为正整数,最长为4位字符'},
                    ]
                    })(
                      <Input  placeholder="机构级别" min="1" />
                    )
                  }
                </FormItem>
              </Col>
            </Row>             
            <div className="detail"  >
              <UserManageBar title="其他信息" />
            </div>
            <Row gutter={24} style={{marginTop: 20}}>
              <Col span="8">  
                <FormItem label="城&emsp;&emsp;市" {...formItemLayout}>
                  {
                    getFieldDecorator('city',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.city:null,
                        rules: [{ validator: this.validcity },
                        ]
                    })(
                      <Input placeholder="城市" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="16">  
                <FormItem label="详细地址" {...formItemLayout2}>
                  {
                    getFieldDecorator('address',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.address:null,
                      rules: [
                        { max: 128, message: '详细地址最长为128位字符'  },
                        ]
                    })(
                    <Input placeholder="详细地址" />
                    )
                  }
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span="8">  
                <FormItem label="电话号码"  {...formItemLayout}>
                  {
                    getFieldDecorator('mobile',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.mobile:'',
                      rules: [
                        { validator: this.validmobile }
                      ]
                    })(
                      <Input  placeholder="电话号码"  />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">  
                <FormItem label="传真号码"  {...formItemLayout}>
                              {
                    getFieldDecorator('fax',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.fax:null,
                      rules: [{
                        validator: this.validFax
                      }]
                    })(
                      <Input  placeholder="传真号码"  />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">  
                <FormItem label="手机号码"  {...formItemLayout}>
                  {
                    getFieldDecorator('telephone',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.telephone:null,
                      rules: [
                        { validator: this.validphone }
                      ]
                    })(
                      <Input placeholder="手机号码"  />
                    )
                  }
                </FormItem>
              </Col>
            </Row> 
            <Row gutter={24}>
              <Col span="8">  
                <FormItem label="邮&emsp;&emsp;编" {...formItemLayout}>
                  {
                    getFieldDecorator('zipcode',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.zipcode:null,
                      rules: [
                        { validator: this.validzipCode }
                      ]
                    })(
                      <Input placeholder="请输入6位邮编" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">  
                <FormItem label="负&nbsp; 责 &nbsp;人" {...formItemLayout} >
                  {
                    getFieldDecorator('leader',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.leader:null,
                      rules: [
                        { max: 32, message: '负责人最长为32位字符'  },
                        ]
                    })(
                      <Input placeholder="负责人"/>
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">  

              </Col>
            </Row>   
            <Row gutter={24}>
              <Col span="16">  
                <FormItem {...formItemLayout2}  label="备&emsp;&emsp;注：" >
                  {
                    getFieldDecorator('remark',{
                      initialValue: optTag && optTag === 'updateItem' ?   orgInfo.remark:null,
                      rules: [ {max: 300, message: '备注最长为300位字符'}, ]
                    })(
                      <TextArea placeholder="备注" rows={8} columns={10} />
                    )
                  }
                </FormItem>
              </Col>           
            </Row> 
            </Form>
          </div>
          <div className="submitBtn" >
          <Button type="primary" disabled = {this.state.spinStatus} onClick={this.handleOperator} >保存</Button>
          <NavLink to='/home/orgManage/orgIndex'><Button> 返回 </Button></NavLink>
        </div>
        </Spin>
        {/* 所属机构弹窗 */}
        <Modal
          title="所属机构"
          visible={this.state.orgVisible}
          width={800}
          className="modal"
          cancelText="取消"
          okText="确定"
          onOk={this.handleOrgOptions}
          onCancel={() => {
            this.child.reset();
            this.setState({
              orgVisible: false
            })
          }}
        >
          <OrgOptionsForm
            getOrgByName={(orgName) => this.getOrgByName(orgName)}
            getOrgTreeList={this.getOrgTreeList}
            orgOptionsArr={this.state.orgOptionsArr}
            getCheckedObj={this.getCheckedObj}
            checkedObj={this.state.checkedObj}
            parentCode={this.state.parentCode}
            onRef={this.onRef}
          ></OrgOptionsForm>
        </Modal>
        
      </div>
    )
  }
}

export default Form.create()(OrgAdd);