ball_admin/src/components/b_table.tsx

import {
  Button,
  FormInstance,
  Modal,
  Pagination,
  PaginationProps,
  Popconfirm,
  PopconfirmProps,
  Space,
  Table,
} from "antd";
import { useState } from "react";
import SimpleForm from "./form/simple_form";
import React from "react";
const BTable = (props: any) => {
  const {
    store,
    dataSource,
    selectCallback,
    scroll,
    actionCloumn,
    onSizeChange,
    onPageChange,
    config,
    btnText,
  } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
    selectCallback(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const onShowSizeChange = (current, pageSize) => {
    if (onSizeChange) {
      onSizeChange(current, pageSize);
    } else {
      store.setPages({
        Offset: current,
        Size: pageSize,
      });
    }
  };
  const onChange: PaginationProps["onChange"] = (page) => {
    if (onPageChange) {
      onPageChange(page);
    } else {
      store.setPages({
        Offset: page,
        Size: 20,
      });
    }
  };
  const cancel: PopconfirmProps["onCancel"] = (e) => { };

  const actionDefultColumn = {
    title: "操作",
    fixed: "right",
    with: 200,
    render: (any, record) => (
      <Space wrap>
        <Button
          type="dashed"
          size="small"
          onClick={() => {
            setRecord(record);
            setIsModalOpen(true);
          }}
        >
          编辑
        </Button>
        {actionCloumn ? actionCloumn(record) : null}
        <Popconfirm
          title="删除确认"
          description="您是否需要删除该数据?"
          onConfirm={() => {
            store.deleteItem(record.identity);
          }}
          onCancel={cancel}
          okText="Yes"
          cancelText="No"
        >
          <Button type="dashed" danger size="small">
            删除
          </Button>
        </Popconfirm>
      </Space>
    ),
  };
  const addHandler = () => {
    setRecord(null);
    setIsModalOpen(true);
  };
  return (
    <Space direction="vertical" size="middle" style={{ display: "flex" }}>
      <Button type="default" onClick={() => addHandler()}>
        {btnText ?? "添加部门"}
      </Button>
      <Table
        style={{ height: "100%", overflow: "auto" }}
        pagination={false}
        scroll={scroll}
        loading={store.listStatus}
        rowSelection={rowSelection}
        columns={[...props.columns, actionDefultColumn]}
        dataSource={dataSource}
      />
      <div style={{ textAlign: "right", padding: "10px" }}>
        <Pagination
          size="small"
          defaultCurrent={1}
          pageSize={20}
          showSizeChanger={true}
          total={store.total}
          onShowSizeChange={onShowSizeChange}
          onChange={onChange}
        />
      </div>
      <Modal
        title={!record?.id ? "添加" : "编辑"}
        width={800}
        open={isModalOpen}
        afterClose={() => formRef.current?.resetFields()}
        onOk={() => formRef.current?.submit()}
        okText="确定"
        cancelText="取消"
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <SimpleForm
          formName={"user_form"}
          formRef={formRef}
          colProps={25}
          onFinish={() => {
            console.log(record)
            if (!record) {
              store.add(formRef.current?.getFieldsValue()).then((res) => {
                if (res) {
                  setIsModalOpen(false);
                }
              });
              return
            }
            store.putItem(record.identity, formRef.current?.getFieldsValue()).then((res) => {
              if (res) {
                setIsModalOpen(false);
              }
            });
          }}
          createCallback={() => {
            formRef.current?.setFieldsValue(record);
          }}
          formDatas={config}
        ></SimpleForm>
      </Modal>
    </Space>
  );
};

export default BTable;