educoder/public/react/src/modules/user/account/AccountBasicEdit.js

import React, { Component } from 'react';

import { SnackbarHOC, getImageUrl, City } from 'educoder';
import { Form, Button, Input, Radio, Select, Tooltip, Icon  } from 'antd'
import ApplyForAddOrgModal from '../modal/ApplyForAddOrgModal'
import ApplyForAddChildOrgModal from '../modal/ApplyForAddChildOrgModal'
import axios from 'axios'

const RadioGroup = Radio.Group;
const Option = Select.Option;

const map={"teacher":"教师", "student":"学生", "professional":"专业人士"}
class AccountBasic extends Component {
  constructor(props){
    super(props);
    this.state={
      nameLength:0,
      showRealName:true,
      schoolList:undefined,
      filterSchoolList:undefined,
      school:undefined,
      departments:undefined,
      filterDepartments:undefined,
      departmentsName:undefined,
      identity:"teacher",
      school_id:undefined,
      department_id:undefined
    }
  }

  componentDidUpdate =(prevProps)=>{
    if(this.props.basicInfo && prevProps.basicInfo == undefined){
      this.setValue(this.props.basicInfo);
      this.getSchoolList(this.props.basicInfo);
    }
  }

  componentDidMount = () =>{
    if(this.props.basicInfo){
      this.setValue(this.props.basicInfo);
      this.getSchoolList(this.props.basicInfo);
    }
  }

  setValue=(basicInfo)=>{
    if(basicInfo){
      //if(basicInfo.nickname){
        this.setState({
          nameLength:basicInfo.nickname?basicInfo.nickname.length:0,
          showRealName:basicInfo.show_realname,
          identity:basicInfo.identity
        })
      //}
      this.props.form.setFieldsValue({
        nickname:basicInfo.nickname,
        name:!basicInfo.show_realname ? this.hideRealName(basicInfo.name) : basicInfo.name,
        student_No:basicInfo.student_id,
        sex:String(basicInfo.gender),
        job:map[basicInfo.identity],
        org:basicInfo.school_name,
        org2:basicInfo.department_name,
        job1:basicInfo && basicInfo.identity=="teacher" ? basicInfo.technical_title:"教授",
        job2:basicInfo && basicInfo.identity=="professional" ? basicInfo.technical_title:"企业管理者",
        city:[basicInfo.location,basicInfo.location_city]
      })
    }
  }

  // 获取学校、单位
  getSchoolList=(basicInfo)=>{
    let url=`/schools/for_option.json`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          schoolList:result.data.schools
        })
        if(basicInfo && basicInfo.school_name){
          this.setState({
            school:basicInfo.school_name,
            filterSchoolList:this.state.schoolList.filter(function(item){
              return item.name.indexOf(basicInfo.school_name)>-1;
            })
          })
          this.getDepartments(basicInfo.school_name,false);
        }
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  // 输入昵称时change剩余的字数
  changeNickName=(e)=>{
    let num= 10 - parseInt(e.target.value.length);
    this.setState({
      nameLength:num < 0 ? 0 : num
    })
  }

  handleSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      console.log(values);
      let {basicInfo}=this.props;
      if(!err){
        let url=`/users/accounts/${basicInfo.id}.json`
        axios.put((url),{
          nickname:values.nickname,
          name:values.name,
          show_realname:this.state.showRealName,
          gender:parseInt(values.sex),
          location:values.city[0],
          location_city:values.city[1],
          identity:values.job=="教师"?"teacher":values.job=="学生"?"student":"professional",
          technical_title:values.job1 || values.job2,
          student_id:values.job=="学生" ? values.student_No : null,
          school_id:this.state.school_id,
          department_id:this.state.department_id
        }).then((result)=>{
          if(result){
            this.props.getBasicInfo();
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    })
  }

  // 隐藏或显示真实姓名
  showOrHide=(flag,name)=>{
    this.setState({
      showRealName:flag==true?false:true
    })
    if(flag==true){
      this.hideRealName(name);
    }else{
      this.props.form.setFieldsValue({
        name
      })
    }
  }

  // 将名字隐藏起来
  hideRealName=(name)=>{
    let len=parseInt(name.length)-1;
    let str="";
    for(var i = 0; i < len; i++){ str += "*"; }

    name = name.substr(0,1)+str;

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

  // 过滤学校
  filterList=(e)=>{
    let arr=[];
    if(e){
      arr= this.state.schoolList.filter(function(item){
        return item.name.indexOf(e)>-1;
      });
      this.props.form.setFieldsValue({
        org:e
      })
      this.setState({
        school:e,
        filterSchoolList:arr
      })
    }
    // else{
    //   let {school}=this.state;
    //   arr= this.state.schoolList.filter(function(item){
    //     return item.name.indexOf(school)>-1;
    //   });
    // }
  }
  //搜索部门
  searchDepartment=(e)=>{
    this.props.form.setFieldsValue({
      org2:e
    })
    let arr = this.state.departments.filter(function(item){
      return item.name.indexOf(e) > -1
    })
    this.setState({
      filterDepartments:arr,
      departmentsName:e
    })
  }

  // 选择部门、学院
  changeDepartment=(e)=>{
    let arr=this.state.departments.filter(function(item){
      return item.name == e;
    });
    this.setState({
      departmentsName:e,
      department_id:arr[0].id
    })
  }

  // 选择学校(获取对应学校的学院、部门)
  changeList=(e)=>{
    this.getDepartments(e,true);
  }

  getDepartments=(e,flag)=>{
    let arr=this.state.schoolList.filter(function(item){
      return item.name == e;
    });
    // 保存选择的学校id
    this.setState({
      school_id:arr[0].id,
      school:e,
    })
    let url=`/schools/${arr[0].id}/departments/for_option.json`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          departments:result.data.departments,
          filterDepartments:result.data.departments
        })
        // 切换学校后，部门默认选择第一个
        if(result.data.departments && result.data.departments.length>0 && flag==true){
          this.props.form.setFieldsValue({
            org2:result.data.departments[0].name
          })
        }
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  // 切换职称
  changeJob=(e)=>{
    
    this.setState({
      identity:e
    })
    let {basicInfo}=this.props;
    if(basicInfo){
      this.props.form.setFieldsValue({
        job1:basicInfo && basicInfo.identity=="teacher" ? basicInfo.technical_title:"教授",
        job2:basicInfo && basicInfo.identity=="professional" ? basicInfo.technical_title:"企业管理者",
      })
    }
  }


  showApplyForAddOrgModal = () => {
    this.applyForAddOrgForm.setVisible(true)    
  }
  showApplyForAddChildOrgModal = () => {
    let{school,schoolList}=this.state;
    let arr=schoolList.filter(function(item){
      return item.name == school;
    });
    if(arr.length > 0){
      this.applyForAddChildOrgForm.setVisible(true)    
    }else{
      this.props.showNotification("请先选择正确的单位或者学校！");
    }
  }
  
  render() {
    let{ 
      nameLength,
      showRealName,
      filterSchoolList,
      filterDepartments,
      school,
      school_id,
      departmentsName,
      identity
    }=this.state;
    const { getFieldDecorator } = this.props.form;
    let{basicInfo}=this.props

    return (
      <div className="basicFormWrap">
        <ApplyForAddOrgModal ref="applyForAddOrgModal" wrappedComponentRef={(form) => this.applyForAddOrgForm = form}  schoolName={school}
        {...this.props}></ApplyForAddOrgModal>
        <ApplyForAddChildOrgModal ref="applyForAddChildOrgModal" schoolName={school} schoolId={school_id} departmentName={departmentsName}
        {...this.props} wrappedComponentRef={(form) => this.applyForAddChildOrgForm = form} ></ApplyForAddChildOrgModal>
        
        <div className="basicForm">
          <style>{`
            .formItemInline {    
              display: flex;
              margin-bottom: 20px;
              position:relative;
            }
            .formItemInline .ant-form-explain{
              position:absolute;
              bottom:-20px;
              left:0px;
              width:100%;
            }
            .formItemInline .ant-form-item-control-wrapper {
              display: inline-block;
            }
            .resetSexStyle .ant-form-item-label,.resetSexStyle .ant-form-item-control-wrapper .ant-form-item-control{
              height:25px;
              line-height:25px;
            }
            .basicForm .title {
              font-size: 16px;
              padding-left: 30px;
              margin-bottom: 10px;
            }
            .basicForm input, .basicForm .ant-input-affix-wrapper, .basicForm .ant-select {
              width: 400px;
              font-size: 14px;
            }
            .basicForm .saveBtn {
              width: 120px;
              margin-left: 100px;
            }
            .basicForm .ant-input-lg {
              height: 32px;
            }
            .basicForm .ant-form-item-label {
              width: 100px;
              padding-right: 10px;
            }
            .basicForm .ant-form-item-label label {
              color: #979797
            }
            .basicForm .ant-cascader-picker-label{
              font-size:14px;
            }
            .resetCityStyle .ant-form-item-control{
              width:190px;
            }
          `}</style>
          <div className="title">基本信息</div>

          <Form onSubmit={this.handleSubmit}>
            <Form.Item
              label="昵称"
              className="mt15 formItemInline"
            >
              {getFieldDecorator('nickname', {
                rules: [{
                  // initialValue: this.state.cityDefaultValue,
                  required: true, 
                  message: '请输入您的昵称',
                }],
              })(
                <Input placeholder="请输入您的昵称，10个字以内" onInput={this.changeNickName} maxLength="10" suffix ={
                  <span className="color-grey-6 font-13">{String(nameLength)}/10</span>
                }></Input>
              )}
            </Form.Item>

            <Form.Item
              label="姓名"
              className="formItemInline"
            >
              {getFieldDecorator('name', {
                rules: [{
                  // initialValue: this.state.cityDefaultValue,
                  required: true, 
                  message: '请输入您的姓名',
                }],
              })(
                <Input placeholder="请输入您的姓名" disabled={!showRealName} suffix={
                    <i className={showRealName?"iconfont icon-xianshi font-18 color-blue":"iconfont icon-yincang font-18 color-blue"} onClick={()=>this.showOrHide(showRealName,basicInfo.name)}></i>
                }></Input>
              )}
              <span>{ showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）' }</span>
            </Form.Item>

            <Form.Item
              label="性别"
              className="formItemInline resetSexStyle"
            >
              {getFieldDecorator('sex', {
                rules: [{
                  required: true, 
                  message: '请选择性别',
                }],
              })(
                <RadioGroup>
                  <Radio value="0">男</Radio>
                  <Radio value="1">女</Radio>
                </RadioGroup>
              )}
            </Form.Item>


            <Form.Item
              label="所在地"
              className="formItemInline resetCityStyle"
            >
              {getFieldDecorator('city', {
                rules: [{
                  type: 'array',
                  required: true, 
                  message: '请先选择所在地',
                }],
              })(
                <City></City>
              )}
            </Form.Item>
            <div className="clearfix">
              <Form.Item
                label="职业"
                className="formItemInline fl"
              >
                {getFieldDecorator('job', {
                  rules: [{
                    initialValue:"teacher",
                    required: true, 
                    message: '请先选择职业',
                  }],
                })(
                  <Select style={{width:"190px",marginRight:"20px"}} onChange={this.changeJob}>
                    <Option value="teacher">教师</Option>
                    <Option value="student">学生</Option>
                    <Option value="professional">专业人士</Option>
                  </Select>
                )}
              </Form.Item>
              {
                identity && identity=="student" && 
                <Form.Item
                label=""
                className="formItemInline fl"
                // style={{display:identity && identity=="student" ? "block":"none"}}
              >
                {getFieldDecorator('student_No', {
                  rules: [{
                    required: true, 
                    message: '请先输入学号',
                  }],
                })(
                  <Input type="text" placeholder="请输入学号" style={{width:"190px"}}></Input>
                )}
              </Form.Item>
              }
              {
                identity && identity=="teacher" && 
                <Form.Item
                  label=""
                  className="formItemInline fl"
                  // style={{display:identity && identity=="teacher" ? "block":"none"}}
                >
                  {getFieldDecorator('job1', {
                    rules: [{
                      initialValue:"教授",
                      required: true, 
                      message: '请先选择职称',
                    }],
                  })(
                    <Select style={{width:"190px"}}>
                      <Option value="教授">教授</Option>
                      <Option value="副教授">副教授</Option>
                      <Option value="讲师">讲师</Option>
                      <Option value="助教">助教</Option>
                    </Select>
                  )}
                </Form.Item>
              }
              {
                identity && identity=="professional" && 
                <Form.Item
                  label=""
                  className="formItemInline fl mb0"
                  // style={{display:identity && identity=="professional" ? "block":"none"}}
                >
                  {getFieldDecorator('job2', {
                    rules: [{
                      initialValue:"企业管理者",
                      required: true, 
                      message: '请先选择职称',
                    }],
                  })(
                    <Select style={{width:"190px"}}>
                      <Option value="企业管理者">企业管理者</Option>
                      <Option value="部门管理者">部门管理者</Option>
                      <Option value="高级工程师">高级工程师</Option>
                      <Option value="工程师">工程师</Option>
                      <Option value="助理工程师">助理工程师</Option>
                    </Select>
                  )}
                </Form.Item>
              }
            </div>

            <Form.Item
              label="学校/单位"
              className="formItemInline mb0"
            >
              {getFieldDecorator('org', {
                rules: [{
                  // initialValue: this.state.cityDefaultValue,
                  // type: 'array',
                  required: true, 
                  message: '请先选择学校/单位',
                }],
              })(
                <Select width={400} showSearch onSearch={this.filterList} onChange={this.changeList}>
                  {
                    filterSchoolList && filterSchoolList.map((item,key)=>{
                      return(<Option value={item.name} key={item.id}>{item.name}</Option>)
                    })
                  }
                </Select>
              )}
            </Form.Item>
            <div style={{marginLeft: '100px',height:"20px",lineHeight:"20px"}}>
              {!filterSchoolList || (filterSchoolList && filterSchoolList.length==0 )&&
                <span>
                  <span style={{color: '#CDCDCD'}}>未找到包含“{school}”的高校，</span>
                  <span style={{color: '#4CACFF', cursor: 'pointer'}} onClick={this.showApplyForAddOrgModal}>申请新增</span>
                </span>
              }
            </div>
            <Form.Item
              label="院系/部门"
              className="formItemInline mb0"
            >
              {getFieldDecorator('org2', {
                rules: [{
                  // initialValue: this.state.cityDefaultValue,
                  // type: 'array',
                  required: true, 
                  message: '请先选择院系/部门',
                }],
              })(
                <Select width={400} showSearch onSearch={this.searchDepartment} onChange={this.changeDepartment}>
                  {
                    filterDepartments && filterDepartments.map((item,key)=>{
                      return(
                        <Option value={item.name}>{item.name}</Option>
                      )
                    })
                  }
                </Select>
              )}
            </Form.Item>
              <div style={{marginLeft: '100px',height:"20px",lineHeight:"20px"}}>
              {
                !filterDepartments || (filterDepartments && filterDepartments.length==0 )&&
                <span>
                  <span style={{color: '#CDCDCD'}}>未找到包含“{departmentsName}”的院系/部门，</span>
                  <span style={{color: '#4CACFF', cursor: 'pointer'}} onClick={this.showApplyForAddChildOrgModal}>申请新增</span>
                </span>
              }
              </div>

                {/* htmlType="submit"  */}
            {/* <Form.Item>
              <div className="clearfix mt30 mb30"> */}
                <Button type="primary" onClick={this.handleSubmit} size="middle" className="saveBtn mr20 mt30">{"保存"}</Button>
              {/* </div>
            </Form.Item> */}
          </Form>
          </div>
          <diV style={{color: '#989898', marginLeft: '20px'}}>* 我们确保你所提供的信息均处于严格保密状态，不会泄露</diV>
      </div>
    );
  }
}
const WrappedAccountBasic = Form.create({ name: 'AccountBasic' })(AccountBasic);

export default WrappedAccountBasic;