react 基於antd 數據表格渲染使用

import React, { Component } from "react";
import { Table, Storage } from "carrot";
import Request from "srcDir/util/request";
import { Tabs, Card, Button, Modal, Tree, notification } from "antd";
import Form from "./form.js";
import "./style.scss";

// const LoginHost = Storage.get("LoginHost");
const host = Storage.get("host");
// 當地登錄銀行信息
const currentBankBranch = Storage.get("currentBankBranch");
const edit = async (_this, data) => {
  await _this.setState({
    eidtState: true,
    defaultKey: "3",
    editData: data,
  });
};
const del = (_this, data) => {
  Modal.confirm({
    title: "信息",
    content: (
      <div>
        <p>確定要刪除{data.username}?</p>
      </div>
    ),
    onOk () {
      Request.DELETE(`${host}/local_branch_bank/del/${data.id}`).then((res) => {
        if (res.success) {
          notification.success({
            message: "刪除成功",
          });
        } else {
          notification.warning({
            message: "刪除失敗",
          });
        }
        _this.loadData();
      });
    },
    onCancel () { },
  });
  // console.log(_this, data);
};
const columns = _this => [{
  title: "序號",
  width: 80,
  fixed: "left",
  align: "center",
  dataIndex: "sortNumber",
  render: (text, record, index) => `${((_this.state.currentNum - 1) * _this.state.currentLimit) + index + 1}`
}, {
  title: "網點名稱",
  dataIndex: "branchName",
  align: "center"
  // render: (text) => <span>{bankName(text, "s")}</span>
}, {
  title: "網點編碼",
  dataIndex: "branchCode",
  align: "center"
  // render: (text) => <span>{bankName(text, "s")}</span>
}, {
  title: "網點類型",
  dataIndex: "branchTypeName",
  align: "center"
  // render: (text) => <span>{bankName(text, "s")}</span>
}, {
  title: "網點代理類型",
  dataIndex: "agentTypeName",
  align: "center"
  // render: (text) => <span>{bankName(text, "s")}</span>
}, {
  title: "代理網點名稱",
  dataIndex: "agentBranchName",
  align: "center"
  // render: (text) => <span>{bankName(text, "s")}</span>
}, {
  title: "代理網點編碼",
  dataIndex: "agentBranchCode",
  align: "center"
  // render: (text) => <span>{bankName(text, "s")}</span>
}, {
  title: "操作",
  width: 210,
  fixed: "right",
  dataIndex: "groupType",
  align: "center",
  render: (text, record) => (
    <div>
      {
        <div className="operating-button-administrator">
          <Button size="small" onClick={() => del(_this, record)}>刪除</Button>
          <Button size="small" onClick={() => edit(_this, record)}>編輯</Button>
          <Button
            size="small"
            onClick={() => {
              _this.props.history.push("/sysSet/dotList/detail", {
                dotData: record
              });
            }}
          >
        查看</Button>
        </div>
      }
    </div>
  )
}
];
class View extends Component {
  constructor (props) {
    super(props);
    this.input = React.createRef();
    this.editNameInput = React.createRef();
    this.state = {
      defaultKey: "1", // tab切換默認選中第一個
      eidtState: false, // 編輯狀態
      editData: {}, // 編輯數據
      rules: [],
      dataSource: {}, // 列表數據
      currentNum: 1, // 加載數據默認顯示第一頁
      currentLimit: 20 // 加載數據默認每頁20條
    };
  }
  componentDidMount () {
    this.loadData();
  }
  onTabs= async (e) => {
    this.setState({
      defaultKey: e,
      eidtState: false,
    });
  };
  // 初始化數據
  loadData = (obj) => {
    Request.GET(`${host}/local_branch_bank/query`, {
      params: {
        page: (obj && obj.page) || this.state.currentNum,
        limit: (obj && obj.limit) || this.state.currentLimit,
      }
    }).then((res) => {
      this.setState({
        dataSource: res.data, // 列表頁面數據
      });
    });
  };
  callback = (e, trueOrfalse, bankId) => {
    console.log(e, 11111); // 此處的e,是子組件的this
    e.props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
        if (trueOrfalse) {
          // 編輯網點內容
          const allValues = values;
          allValues.id = bankId;
          allValues.bankCode = currentBankBranch.bankCode; // 所屬銀行
          Request.POST(`${host}/local_branch_bank/update`,
            {
              body: allValues
            }).then((res) => {
            console.log(res);
            if (!res.success) {
              notification.warning({
                message: res.msg,
              });
              e.setState({
                btnStatus: false
              });
            } else {
              notification.success({
                message: "編輯成功",
              });
              // e.props.form.resetFields();
              e.setState({
                btnStatus: false
              });
              this.loadData();
            }
          });
        } else {
          // 添加網點
          const allValues = values;
          allValues.bankCode = currentBankBranch.bankCode; // 所屬銀行
          Request.POST(`${host}/local_branch_bank/add`,
            {
              body: allValues,
            }).then((res) => {
            if (!res.success) {
              notification.warning({
                message: res.msg,
                // description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
              });
              e.setState({
                btnStatus: false
              });
            } else {
              notification.success({
                message: "添加成功",
                // description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
              });
              e.props.form.resetFields();
              e.setState({
                btnStatus: false
              });
              this.loadData();
            }
          });
        }
      } else {
        e.setState({
          btnStatus: false
        });
      }
    });
  };
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <Tree.TreeNode title={item.title} key={item.id}>
            {this.renderTreeNodes(item.children)}
          </Tree.TreeNode>
        );
      }
      return <Tree.TreeNode title={item.title} key={item.id} />;
    });
  };
  render () {
    const {
      dataSource,
      editData,
      currentNum,
      currentLimit
    } = this.state;
    const emptyObject = Object.keys(editData).length > 0;
    console.log(this.state.rules + currentNum + currentLimit);
    return (
      <div className="body">
        <Tabs defaultActiveKey="1" onChange={(e) => this.onTabs(e)} activeKey={this.state.defaultKey} >
          <Tabs.TabPane tab="網點列表" key="1">
            <Table
              dataSource={dataSource.content}
              columns={columns(this)}
              rowSelection={null}
              rowKey="id"
              scroll={{ x: 1600 }}
              pagination={{
                showQuickJumper: false, // 是否顯示跳頁面
                total: dataSource.totalElements, // 數據總數
                current: dataSource.number + 1, // 當前頁
                pageSize: dataSource.size, // 每頁條數
                showSizeChanger: true, // 是否可以改變 pageSize
                // 切換頁數
                onChange: (page) => {
                  this.loadData({ limit: dataSource.size, page, });
                  this.setState({
                    currentLimit: dataSource.size,
                    currentNum: page
                  });
                },
                // 改變每頁條數
                onShowSizeChange: (current, limit) => {
                  this.loadData({ limit, page: 1 });
                  this.setState({
                    currentLimit: limit,
                    currentNum: 1
                  });
                }
              }}
            />
          </Tabs.TabPane>
          <Tabs.TabPane tab="添加網點" key="2">
            <Card>
              <Form callback={this.callback} isTrue={false} />
            </Card>
          </Tabs.TabPane>
          {
            this.state.eidtState &&
            <Tabs.TabPane tab="編輯網點" key="3">
              <Card>
                {emptyObject && <Form callback={this.callback} data={editData} isTrue={!false} id={editData.id} />}
              </Card>
            </Tabs.TabPane>
          }
        </Tabs>
      </div>
    );
  }
}

export default View;