src/routes/System/AppAuth/TableTransfer.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* eslint-disable max-classes-per-file */
import React from "react";
// import ReactDOM from 'react-dom';
import "antd/dist/antd.css";

import { Transfer, Table } from "antd";
import difference from "lodash/difference";
import { getIntlContent } from "../../../utils/IntlUtils";
// import uniqBy from 'lodash/uniqBy';
// import reqwest from 'reqwest';

const columns = [
  {
    dataIndex: "path",
    title: getIntlContent("SHENYU.AUTH.RESOUCE.PATH"),
    width: 200,
    textWrap: "word-break",
    align: "center",
    ellipsis: true,
  },
  {
    dataIndex: "appName",
    title: getIntlContent("SHENYU.AUTH.APPNAME"),
    width: 100,
    textWrap: "word-break",
    align: "center",
    ellipsis: true,
  },
];

class TableTransfer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: this.props.datalist,
      pagination: {
        current: 1,
        pageSize: 10,
      },
    };
  }

  render() {
    const { authName } = this.props;
    const { dataSource, pagination } = this.state;
    return (
      <Transfer
        titles={["ALL", authName]}
        {...this.props}
        dataSource={dataSource}
        rowKey={(record) => record.path}
      >
        {({
          direction, // 渲染列表的方向
          filteredItems,
          onItemSelectAll, // 勾选一组条目
          onItemSelect, // 勾选条目
          selectedKeys: listSelectedKeys, // 选中的条目
          disabled: listDisabled, // 是否禁用列表
        }) => {
          const rowSelection = {
            getCheckboxProps: (item) => ({
              disabled: listDisabled || item.disabled,
            }),
            onSelectAll(selected, selectedRows) {
              const treeSelectedKeys = selectedRows
                .filter((item) => !item.disabled)
                .map(({ path }) => path);
              const diffKeys = selected
                ? difference(treeSelectedKeys, listSelectedKeys)
                : difference(listSelectedKeys, treeSelectedKeys);
              onItemSelectAll(diffKeys, selected);
            },
            onSelect({ path }, selected) {
              onItemSelect(path, selected);
            },
            selectedRowKeys: listSelectedKeys,
          };

          const handleTableChange = (paginationObj) => {
            if (direction === "left") {
              // eslint-disable-next-line react/no-access-state-in-setstate
              const pager = { ...this.state.pagination };
              pager.current = paginationObj.current;
              this.setState({
                pagination: pager,
              });
              // this.fetch(paginationObj);
            }
          };

          // const rightDataSource = this.props.auth
          // const rightDataSource = dataSource.filter(item=>targetKeys.includes(item.path))
          // const judgeArr = rightDataSource.map(it=>it.path)
          // const leftDataSource = dataSource.map(item => ({
          //   ...item,
          //   disabled: judgeArr.includes(item.path) ,

          // }));

          return (
            <Table
              rowSelection={rowSelection}
              columns={columns}
              rowKey={(record) => record.path}
              style={{ pointerEvents: listDisabled ? "none" : null }}
              dataSource={filteredItems}
              // dataSource={direction === 'left' ? leftDataSource : rightDataSource}
              size="small"
              onChange={handleTableChange}
              onRow={({ path, disabled: itemDisabled }) => ({
                onClick: () => {
                  if (itemDisabled || listDisabled) return;
                  onItemSelect(path, !listSelectedKeys.includes(path));
                },
              })}
              pagination={direction === "left" ? pagination : true}
            />
          );
        }}
      </Transfer>
    );
  }
}

class TableTransferComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      targetKeys: this.props.auth.map((item) => item.path),
      authName: this.props.authName,
      datalist: this.props.datalist,
      auth: this.props.auth.map((item) => {
        item.key = item.id;
        return item;
      }),
    };
  }

  onChange = (targetKeys) => {
    this.setState({
      targetKeys,
    });

    // 传递更数据
    let data = this.state.datalist.filter((item) =>
      targetKeys.includes(item.path),
    );

    this.props.handleGetUpdateMetas(data);
  };

  render() {
    // eslint-disable-next-line
    return (
      <TableTransfer
        auth={this.state.auth}
        authName={this.state.authName}
        datalist={this.state.datalist}
        targetKeys={this.state.targetKeys}
        onChange={this.onChange}
        showSearch={true}
        filterOption={(inputValue, item) =>
          item.appName.indexOf(inputValue) !== -1 ||
          item.path.indexOf(inputValue) !== -1
        }
      />
    );
  }
}
export default TableTransferComponent;