LookupField.js 4.2 KB
import React,{PropTypes} from 'react';
import { connect } from 'react-redux'; 
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './form.scss';
import {loadOrganizations} from '../../../redux/actions/hrSetting'; 
import {createRecord} from '../../../utils/formUtil'; 
import {Form,Select,Tag,Input,Button,Col} from 'antd'; 
const Option = Select.Option; 
const FormItem = Form.Item;
const InputGroup = Input.Group;
const OptGroup = Select.OptGroup;

const getOptions=(organizations)=>{
  let children = [];
  organizations.map((organization,i)=>{
    children.push(<Option key={organization.uuid} {...organization}>{organization.name}</Option>);
  })
  return children;
}

class LookupField extends React.Component {
    constructor(props) {
        super(props);   
        this.filterOption=this.filterOption.bind(this); 
        this.selectChange=this.selectChange.bind(this);
        // this.organizationName=this.organizationName.bind(this);
        // this.createOrganization=this.createOrganization.bind(this);
        this.state={
          organizationName:'',
          orgUuid:'',
        }
    }
    static propTypes = {  
        label:PropTypes.string,
        options:PropTypes.object,
        organizations:PropTypes.array  
    } 
    static defaultProps={ 
    }
    filterOption(inputValue, option){ /*过滤*/
      const {name,pinyin,pinyinfl}=option.props; 
       if(name&&name.indexOf(inputValue)!=-1){
        return true
      }if(pinyin&&pinyin.indexOf(inputValue)!=-1){
        return true
      }if(pinyinfl&&pinyinfl.indexOf(inputValue)!=-1){
        return true
      } 
      return false;
    } 
    selectChange(value){
        const {field={}}=this.props; 
        field.onChange(value);
    } 
    render(){    
        const {label,options,name,field={},organizations=[]}=this.props;
        const {organizationName,orgUuid}=this.state;

        // console.log('哈哈哈哈哈哈',field)

        let defaultValue=field.value;
        // console.log('默认值',defaultValue)
        if(defaultValue&&defaultValue.indexOf(',')!=-1){
            // console.log('@@@@@@@@@@@@@@@@@@@@')
            defaultValue=field.value.split(',');
        }else if(defaultValue){
            // console.log('####################')
            // defaultValue=[field.value];
            // console.log('是否改变了orgUuid',orgUuid)

            defaultValue=orgUuid ? [orgUuid] : [field.value];
            
            // console.log('#############',defaultValue)
        }else{
            // console.log('!!!!!!!!!!!!!!!!!!')
            defaultValue=[]
        }
        // console.log('旧值',defaultValue);
        // console.log('新值',orgUuid);
        // const firstUuid=(organizations)=>{
        //     let arr=[];
        //     organizations.map( (item,index)=>{
        //         // console.log(index)
        //         // console.log(organizations.length-1)
        //         console.log(item.uuid)
        //         // if(index==(organizations.length-1)){
        //         //   arr.push(item.uuid)
        //         // }
        //         arr.push(item.uuid)
        //     })
        //     return arr
        // }
        // console.log(firstUuid(organizations))
        return( 
          <FormItem
                label={label}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required={options.is_required}
                validateStatus={null}
                help=""> 
              <Select  
                name={name} 
                style={{display:'inline-block'}} 
                multiple={false}
                style={{ width: '100%' }}
                placeholder={options.tooltip}
                notFoundContent='没有找到'
                filterOption={this.filterOption}
                optionLabelProp='name'
                disabled={false}
                value={defaultValue}
                onChange={this.selectChange}>
                {getOptions(organizations)}   
              </Select> 
          </FormItem>
        )
    }
}


const mapStateToProps = (state) => {  
  const {hrSetting:{organizations}}= state;
  return {
      organizations
  };
}

export default connect(mapStateToProps)(LookupField);