TableSelect.js

import React from 'react'
import { Tree, Upload, Icon, Button, message, Span, Modal, Tag, Table } from 'antd';
import FormList from './formList/index';

const TreeNode = Tree.TreeNode;


import { connect } from 'dva';
@connect(({ DataColumn, SqlManageEntity, loading }) => ({
  DataColumn, SqlManageEntity,
  loading: loading.models.DataColumn || loading.models.SqlManageEntity
}))
export default class TableSelect extends React.Component {
  constructor(props) {
    super(props)
    const value = props.value || {};
    
    this.state = {
      selects: value.selects||{},
      visiable:  value.visiable ,
      isAll:value.isAll!=null?value.isAll:false,
      querys: value.querys||[],
      sql: value.sql,

    

      

    }
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  }
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
     
     if(value!=null&& value instanceof Object){
        this.setState(value);
      }
      //
    }
  }
  remove = (rowKey) => {
    const { selects } = this.state
    delete selects[rowKey]
    if (!('value' in this.props)) {
      this.setState({ selects });
    }
    this.triggerChange({ selects});

 
  }
  
  select = (obj) => {
    var { selects} = this.state
    const { json: {  isMultiple ,optionType} } = this.props
    let valueName = this.props.json.valueName
    
    if(optionType == "reference" &&this.props.dataColumn.referenceObjId){
      valueName=this.props.dataColumn.referenceCodeName
      
    }
   
    const kk = obj[valueName]
    if (kk == null) {
      message.error("指定的取值字段不存在或者值为空")
      return
    }
    if (!isMultiple) {
      selects = { [kk]: {...obj,selectKey:kk} }
    } else {
      selects[kk] = obj;
      selects[kk].selectKey=kk
    }

    if (!('value' in this.props)) {
      this.setState({ selects });
    }
    this.triggerChange({ selects});






  }
  close = (i) => {
    var { values, labels } = this.state
    values.splice(i, 1)
    labels.splice(i, 1)
    if (!('value' in this.props)) {
      this.setState({ values, labels});
    }
    this.triggerChange({ values, labels });

   

  }
  open = () => {
   
    if (!('value' in this.props)) {
      this.setState({ visiable: true});
    }
    this.triggerChange({ visiable: true });

  }
  closeModal = () => {
    if (!('value' in this.props)) {
      this.setState({ visiable: false});
    }
    this.triggerChange({ visiable: false });

  }

  render() {

    const { json: { isMultiple, sql, optionType, showTable }, dataColumn: { referenceObjId }, sqlModel, columns,dataSource } = this.props
    let { valueName, labelName} =this.props.json
   
    if(optionType == "reference" &&referenceObjId){
      valueName=this.props.dataColumn.referenceCodeName
      labelName=this.props.dataColumn.referenceNameName
    }



    if (valueName == null || valueName == "") {
      return <>请指定取值的列名</>
    }
    const { selects, visiable, labels} = this.state



    const keys=[]
    for(let i in selects){
      keys.push(selects[i][valueName])
    }


    const columns2=[...columns,{
      title:"操作",
      render:(val,record)=><a onClick={this.remove.bind(this,record.selectKey)}>移除</a>
    }]
    const columns3=[...columns,{
      title:"操作",
    
      render:(val,record)=>
      keys.includes(record[valueName])?<span>已选择</span>:<a onClick={this.select.bind(this,record)}>选择</a>
    }]
   const custom={
    isAll:this.state.isAll,
    querys: this.state.querys,
    sql: this.state.sql,
   }
 
    return (
      <div>

        {Object.keys(selects).length > 0 ? showTable ? <Table rowKey={valueName} size="small" dataSource={Object.values(selects)} columns={columns2} pagination={false} /> :

          Object.keys(selects).map((k) => <Tag key={k} closable onClose={this.remove.bind(this, k)}>{selects[k][labelName]}</Tag>)
          : ""

        }


        <Button type="primary" onClick={this.open}>选择</Button>
        <Modal
          width="1200px"
          maskClosable={false}


          title={`请选择`}
          visible={visiable}
          onOk={this.closeModal}
          onCancel={this.closeModal}
        >

          {optionType == "reference" ? referenceObjId ?
            <FormList rights={this.props.rights || []} notShowBack={true} value={custom}  objId={referenceObjId} isFormCom={true} isSelect={true}   selects={keys} valueName={valueName} callback={this.select} sql={sql} /> : "未关联数据对象"
            : sqlModel.dataObjId ?
              <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={sqlModel.dataObjId} isFormCom={true} isSelect={true}   selects={keys} valueName={valueName} callback={this.select} sql={sql} />
              : <Table rowKey={valueName} size="small" dataSource={dataSource.list} columns={columns3} scroll={{ x: 1200 }} />}
        </Modal>
      </div>

    );

  }
}