78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import Table, { ProColumns, ActionType } from '@/components/Table';
|
|
import { message } from 'antd';
|
|
import { fetchTableData } from '@/utils/table';
|
|
import AddNftModal from './components/AddNftModel';
|
|
import { getNFTList } from '@/services/nft';
|
|
|
|
const Address: React.FC = () => {
|
|
const tableRef = useRef<ActionType>();
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const columns: ProColumns<any>[] = [
|
|
{
|
|
title: '所有者地址',
|
|
dataIndex: 'address',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: 'NFT名称',
|
|
dataIndex: 'name',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '图片',
|
|
dataIndex: 'image',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '缩略图',
|
|
dataIndex: 'avatar',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '描述',
|
|
dataIndex: 'description',
|
|
hideInSearch: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Table
|
|
columns={columns}
|
|
rowKey="id"
|
|
search={false}
|
|
actionRef={tableRef}
|
|
toolBarActions={[
|
|
{
|
|
type: 'add',
|
|
text: '添加NFT',
|
|
onConfirm: () => {
|
|
setVisible(true);
|
|
},
|
|
},
|
|
]}
|
|
request={async (params) => {
|
|
const res = await fetchTableData(getNFTList, params);
|
|
return res;
|
|
}}
|
|
/>
|
|
<AddNftModal
|
|
visible={visible}
|
|
onCancel={function () {
|
|
setVisible(false);
|
|
}}
|
|
onOk={async function (): Promise<void> {
|
|
tableRef.current?.reload();
|
|
setVisible(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Address;
|