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

web development common base package.

import React from 'react'
import { Row, Col, Tag, Modal, Transfer } from 'antd'
import api from '../util-axios';
import UtilArray from '../util-array'
import { SearchOutlined } from '@ant-design/icons';

const url = "SysUser/getList";

export default class SelectUsers extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      url: this.props.url || url,
      params: this.props.params || {},
      data: [],
      targetKeys: [],
      loading: false,
      codeArr: this.props.codeArr ? JSON.parse(this.props.codeArr) : [],
      nameArr: []
    }
  }

  async componentDidMount() {
    let me = this;
    this.setState({ loading: true });
    if(localStorage.getItem('select-users-data')) {
      let nameArr = JSON.parse(localStorage.getItem('select-users-nameArr'))
      let data = JSON.parse(localStorage.getItem('select-users-data'))
      for (let i = 0; i < data.length; i++) {
        if (UtilArray.getIndex(me.state.codeArr, data[i].key.split('$-$')[0]) >= 0) nameArr.push(data[i].key.split('$-$')[1]);
      }
      me.setState({ nameArr, loading: false, data });
      return;
    }
    await api.get(this.state.url, this.state.params, function (rs) {
      let data = [];
      let _data = rs.data;
      let nameArr = [];
      for (let i = 0; i < _data.length; i++) {
        if (UtilArray.getIndex(me.state.codeArr, _data[i].code) >= 0) nameArr.push(_data[i].name);
        data.push({
          key: `${_data[i].code}$-$${_data[i].name}`,
          title: `${_data[i].name}-${_data[i].code}-${_data[i].departmentName}`,
          description: `${_data[i].name}-${_data[i].code}-${_data[i].departmentName}`
        });
      }
      localStorage.setItem('select-users-nameArr', JSON.stringify(nameArr));
      localStorage.setItem('select-users-data', JSON.stringify(data));
      me.setState({ nameArr, loading: false, data });
    });
  }

  onOk = () => {
    this.setState({
      visible: false
    });
    console.log(this.state.targetKeys);
    let codeArr = [];
    let nameArr = [];
    this.state.targetKeys.map((item, index) => {
      let cn = item.split("$-$");
      codeArr.push(cn[0]);
      nameArr.push(cn[1]);
    })
    this.setState({
      codeArr,
      nameArr
    })
    this.props.onChange(codeArr, nameArr)
  }

  onChange = (targetKeys) => {
    this.setState({ targetKeys });
  };
  onClick = (e) => {
    let state = this.state;
    state.visible = !this.state.visible;
    state.targetKeys = [];
    state.codeArr.map((item, index) => {
      state.targetKeys.push(item + "$-$" + state.nameArr[index]);
    });
    this.setState(state);
  }
  colseTag = (index) => {
    let state = this.state;
    state.codeArr.splice(index, 1);
    state.nameArr.splice(index, 1);
    state.targetKeys = [];
    state.codeArr.map((item, index) => {
      state.targetKeys.push(item + "$-$" + state.nameArr[index]);
    });
    this.setState(state);
    this.props.onChange(state.codeArr, state.nameArr)
  }
  render() {
    return (
      <div>
        <div className="ant-select ant-select-multiple ant-select-show-search">
          <div className="ant-select-selector" onClick={this.onClick}>
            {this.state.codeArr.length > 0 ? this.state.codeArr.map((item, index) => (
              <Tag
                className="ant-select-selection-item"
                key={item}
                closable={true}
                onClose={(e) => { this.colseTag(index); }}
              > {this.state.nameArr[index]}</Tag>
            )) : <span className="ant-select-selection-placeholder">{this.props.placeholder}</span> }
          </div>
          <span className="ant-select-arrow" style={{ fontSize: '16px', top: '46%' }}><SearchOutlined /></span>
        </div>
        {/* <div style={{ width: this.props.width || "500px", minHeight: "35px", height: this.props.height || "auto", border: "1px solid #d5d5d5", display: "inline-block", position: "relative" }} onClick={this.onClick}>
          <SearchOutlined style={{position:'absolute',top:'9px',right:'5px', color: '#6D6D6D', fontSize: '16px'}} />
          <div>
            {this.state.codeArr.map((item, index) => (
              <Tag
                className="app-tag"
                key={item}
                closable={true}
                onClose={(e) => { this.colseTag(index); }}
              > {this.state.nameArr[index]}</Tag>
            ))}
          </div>
        </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}
          onOk={this.onOk}
          onCancel={() => { this.setState({ visible: false }); }}
          width={800}
        >
          <div style={{ height: '400px', overflow: 'auto' }}>
            <Transfer
              dataSource={this.state.data}
              targetKeys={this.state.targetKeys}
              onChange={this.onChange}
              render={item => item.title}
              pagination
              listStyle={{ width: 360 }}
              showSearch={true}
              titles={['用户列表', '选中的用户列表']}
            />
          </div>
        </Modal>
      </div>
    )
  }
}