From e71e8b6012dc8eaf8c658e16da885becf3a9a4db Mon Sep 17 00:00:00 2001 From: vance <1143350292@qq.com> Date: Sun, 28 Aug 2022 22:24:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NftToken/List/components/EditNftModel.tsx | 81 +++++++++++++++ src/pages/Nft/NftToken/List/index.tsx | 99 ++++++++++++++++++- src/widget/PaySelectModal.tsx | 31 +++--- 3 files changed, 195 insertions(+), 16 deletions(-) create mode 100644 src/pages/Nft/NftToken/List/components/EditNftModel.tsx diff --git a/src/pages/Nft/NftToken/List/components/EditNftModel.tsx b/src/pages/Nft/NftToken/List/components/EditNftModel.tsx new file mode 100644 index 0000000..fa2aaa9 --- /dev/null +++ b/src/pages/Nft/NftToken/List/components/EditNftModel.tsx @@ -0,0 +1,81 @@ +import React, { useRef, useEffect } from 'react'; +import { createForm } from '@formily/core'; +import { createSchemaField } from '@formily/react'; +import Modal, { ModalProps } from '@/components/Modal'; +import Upload from '@/components/Upload'; +// import { fetchTableData } from '@/utils/table'; +import { Form, FormItem, Input, NumberPicker } from '@formily/antd'; + +interface EditNftModalPropsType extends ModalProps { + onOk: (val: any) => void; + onCancel: () => void; + modalData: any; +} + +const SchemaField = createSchemaField({ + components: { + FormItem, + Input, + NumberPicker, + Upload, + }, +}); + +const form = createForm({}); + +const EditNftModal = ({ onOk, onCancel, modalData, ...rest }: EditNftModalPropsType) => { + useEffect(() => { + form.setInitialValues(modalData); + }); + const handleOk = () => { + const formState = form.getFormState(); + onOk(formState.values); + }; + const handleCancel = () => { + onCancel(); + }; + + return ( + +
+ + + + + + + +
+ + ); +}; + +export default EditNftModal; diff --git a/src/pages/Nft/NftToken/List/index.tsx b/src/pages/Nft/NftToken/List/index.tsx index d99f811..cbd616f 100644 --- a/src/pages/Nft/NftToken/List/index.tsx +++ b/src/pages/Nft/NftToken/List/index.tsx @@ -1,16 +1,24 @@ import React, { useRef, useState } from 'react'; import { message, Button, Upload, Space, Row } from 'antd'; +import Table, { ProColumns, ActionType } from '@/components/Table'; import { RcFile } from 'antd/lib/upload'; import XLSX from 'xlsx'; // import { fetchTableData } from '@/utils/table'; - +import EditNftModal from './components/EditNftModel'; import AddNftModal from './components/AddNftModel'; import PaySelectModal from '@/widget/PaySelectModal'; const Address: React.FC = () => { const [visible, setVisible] = useState(false); + const [editVisible, setEditVisible] = useState(false); + const tableRef = useRef(); const [payVisible, setPayVisible] = useState(false); - + const [nftData, setNFTData] = useState({}); + const handleEdit = (row: any) => { + setNFTData(row); + setEditVisible(true); + tableRef.current?.reload(); + }; const onImportExcel = (file: RcFile, FileList: RcFile[]) => { let resData = [{}]; const fileReader = new FileReader(); @@ -33,6 +41,59 @@ const Address: React.FC = () => { }; return false; }; + const columns: ProColumns[] = [ + { + title: '合约名称', + dataIndex: 'contract', + width: '10%', + hideInSearch: true, + }, + { + title: '导入分配NFT', + dataIndex: 'share', + hideInTable: true, + renderFormItem: (item, { type, defaultRender, ...rest }, form) => { + return ( + {}}> + + + ); + }, + }, + { + title: 'NFT名称', + dataIndex: 'Nft_name', + hideInSearch: true, + width: '20%', + }, + { + title: '描述', + dataIndex: 'description', + hideInSearch: true, + width: '20%', + }, + { + title: 'TokenId', + dataIndex: 'token_id', + width: 150, + hideInSearch: true, + }, + { + title: '操作', + valueType: 'option', + width: 180, + render: (_, row) => [ + { + handleEdit(row); + }} + > + 编辑 + , + ], + }, + ]; return (
@@ -51,6 +112,15 @@ const Address: React.FC = () => {
+ { + // // return fetchTableData(, params); + // }} + /> { console.log(val); // await creatNftAddress(params); message.success('添加成功'); + tableRef.current?.reload(); + } catch (e) { + console.log(e); + message.success('发生错误'); + setVisible(false); + } + }} + /> + { + try { + const params = { ...val }; + // await creatNftAddress(params); + console.log(params); + message.success('添加成功'); + tableRef.current?.reload(); } catch (e) { console.log(e); message.success('发生错误'); @@ -72,7 +163,7 @@ const Address: React.FC = () => { { try { @@ -83,7 +174,7 @@ const Address: React.FC = () => { } catch (e) { console.log(e); message.success('发生错误'); - setVisible(false); + setPayVisible(false); } }} /> diff --git a/src/widget/PaySelectModal.tsx b/src/widget/PaySelectModal.tsx index 511025a..1f15b8c 100644 --- a/src/widget/PaySelectModal.tsx +++ b/src/widget/PaySelectModal.tsx @@ -1,5 +1,5 @@ import React, { useRef, useState } from 'react'; -import { createForm, onFieldChange } from '@formily/core'; +import { createForm, onFieldReact } from '@formily/core'; import { createSchemaField } from '@formily/react'; import Modal, { ModalProps } from '@/components/Modal'; // import { fetchTableData } from '@/utils/table'; @@ -10,7 +10,17 @@ interface PaySelectModalPropsType extends ModalProps { onCancel: () => void; // modalData: any; } - +const form = createForm({ + effects() { + onFieldReact('input', (field) => { + if (field.query('type').value() == 2) { + field.display = 'none'; + } else { + field.display = 'visible'; + } + }); + }, +}); const SchemaField = createSchemaField({ components: { FormItem, @@ -21,8 +31,6 @@ const SchemaField = createSchemaField({ }, }); -const form = createForm({}); - const PaySelectModal = ({ onOk, onCancel, ...rest }: PaySelectModalPropsType) => { const [send, useSend] = useState(true); @@ -38,25 +46,24 @@ const PaySelectModal = ({ onOk, onCancel, ...rest }: PaySelectModalPropsType) =>
-