158 lines
3.9 KiB
TypeScript
158 lines
3.9 KiB
TypeScript
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,
|
|
editCallback,
|
|
deleteCallback,
|
|
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);
|
|
editCallback(record);
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
{actionCloumn ? actionCloumn(record) : null}
|
|
<Popconfirm
|
|
title="删除确认"
|
|
description="您是否需要删除该数据?"
|
|
onConfirm={() => {
|
|
deleteCallback(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={() => {
|
|
store.add(formRef.current?.getFieldsValue());
|
|
}}
|
|
createCallback={() => {
|
|
formRef.current?.setFieldsValue(record);
|
|
}}
|
|
formDatas={config}
|
|
></SimpleForm>
|
|
</Modal>
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
export default BTable;
|