app-base-web/src/library/select-tag/index.js

web development common base package.

import React from 'react'
import { Row, Col, Tag, Table, Modal, Button } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import './style'

export default class SelectTag extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: null, //type为checkbox是[],radio是'',
      hasSelected: [], //临时变量保存选择过的value的数据, 用于取消时重置value
      hasSelectedRows: [], //临时变量保存选择过的value的数据, 用于取消时重置value
      selected: [],//Table checked
      selectedRows: [],
      //显藏控制
      visible: false
    }
  }

  onOk = () => {
    let value = this.state.selectedRows.map(item => {
      return item[this.props.targetKeys]
    })
    if(this.props.selectionType === 'radio') {
      value = value[0]
    }
    console.log("value", value)
    this.setState({
      visible: false,
      hasSelected: this.state.selected,
      hasSelectedRows: this.state.selectedRows,
      value
    });
  }

  onCancel = () => {
    this.setState({
      visible: false,
      selected: this.state.hasSelected,
      selectedRows: this.state.hasSelectedRows
    })
  }

  colseTag = (index) => {
    let {selectedRows, selected} = this.state;
    selectedRows.splice(index, 1);
    selected.splice(index, 1);
    this.setState({
      selectedRows: [...this.state.selectedRows],
      selected: [...this.state.selected]
    }, ()=> {this.onOk()});
  }

  render() {
    var tableCfg = {
      scroll: { y: this.props.height },
      size: "middle",
      rowKey: "id",
      columns: this.props.columns,
      rowSelection: {
        type: this.props.selectionType,
        selectedRowKeys: this.state.selected,
        onChange: (selectedRowKeys, selectedRows) => {
          //此处第二次打开继续选择添加的时候，selectedRowKeys会再次返回当页已经读取的数据, 重新加入数据，需要去重
          let removeSameSelectedRowKeys = [...selectedRowKeys];
          let removeSameSelectedRows = [...selectedRows];
          if(this.props.selectionType === "checkbox") {
            // 找出selectedRowKeys和已选择的数据的差集，已选择数据和差集合并得到所有选择数据
            let aSet = new Set(this.state.selected);
            let difference1 = Array.from(new Set(this.state.selected.concat(selectedRowKeys).filter( v => !aSet.has(v) )));
            removeSameSelectedRowKeys = [...this.state.selected, ...difference1];
            // 对象数组removeSameSelectedRows和已选择的数据的差集，已选择数据和差集合并得到所有选择数据
            let difference2 = [];
            for(let i = 0; i < selectedRows.length; i++) {
              for(let j =0; j < difference1.length; j ++) {
                if(selectedRows[i].id === difference1[j]) {
                  difference2.push(selectedRows[i]);
                }
              }
            }
            removeSameSelectedRows = [...this.state.selectedRows, ...difference2];
          }
          this.setState({
            selected: removeSameSelectedRowKeys,
            selectedRows: removeSameSelectedRows
          });
        }
      },
      rowClassName: (record) => { return record.id === this.state.selectedRowId ? 'row-selected' : ''; },
      onRow: (record) => {
        return {
          onClick: event => {
            this.setState({ selectedRowId: record.id });
          }
        }
      },
      dataSource: this.props.data,
      pagination: this.props.pagination,
      loading: this.props.loading,
      onChange: this.props.onChange
    }
    return <div>
      <div className="ant-select ant-select-multiple ant-select-show-search">
        <div className="ant-select-selector" onClick={() => this.setState({ visible: !this.state.visible })}>
          {this.state.selectedRows.length > 0 ? this.state.selectedRows.map((item, index) => (
            <Tag
              className="ant-select-selection-item"
              key={item.id}
              closable={true}
              onClose={(e) => { this.colseTag(index); }}
            >{item[this.props.targetKeys]}</Tag>
          )) : <span className="ant-select-selection-placeholder">{this.props.placeholder}</span> }
        </div>
        <span className="ant-select-arrow"><SearchOutlined /></span>
      </div>
      
      <Modal
        title={[
          <Row className="app-admin">
            <Col className="main-title" style={{ marginBottom: '5px' }}><i className="iconfont icon-title"></i>{this.props.title ? this.props.title : ""}</Col>
          </Row>
        ]}
        centered
        visible={this.state.visible}
        onCancel={this.onCancel}
        width={800}
        footer={[
          <Row justify="center">
            <Col xs={24}>
              <Button className="btn-cancel" icon={<i className="iconfont icon-cancel" />} onClick={this.onCancel}>取消</Button>
              <Button className="btn-submit" icon={<i className="iconfont icon-submit"/>} onClick={this.onOk}>确定</Button>
            </Col>
          </Row>
        ]}
      >
        <Table {...tableCfg} />
      </Modal>
    </div>
  }
}