NFT面板完善

package.json

@@ -77,7 +77,8 @@
     "react-helmet-async": "^1.0.4",
     "umi": "^3.5.0",
     "umi-serve": "^1.9.10",
-    "web3": "^1.7.5"
+    "web3": "^1.7.5",
+    "xlsx": "0.15.3"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",

src/pages/Nft/NftContract/List/index.tsx

@@ -50,7 +50,7 @@ const Address: React.FC = () => {
         // }}
       />
       <AddNftContractModal
-        visible={NftModal}
+        visible={visible}
         onCancel={function () {
           setNftModal(false);
         }}

src/pages/Nft/NftToken/List/components/AddNftModel.tsx

@@ -2,7 +2,9 @@ import React, { useRef } 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 { UploadBizType } from '@/constants/enum/uploadBizType';
 import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
 
 interface AddNftModalPropsType extends ModalProps {
@@ -15,6 +17,7 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     NumberPicker,
+    Upload,
   },
 });
 
@@ -45,21 +48,21 @@ const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
             title="合约"
             required
             x-decorator="FormItem"
-            x-component="NumberPicker"
+            x-component="Input"
           />
           <SchemaField.Number
             name="description"
             title="描述"
             required
             x-decorator="FormItem"
-            x-component="NumberPicker"
+            x-component="Input"
           />
-          <SchemaField.Number
+          <SchemaField.String
             name="img"
             title="图片"
             required
             x-decorator="FormItem"
-            x-component="NumberPicker"
+            x-component="Upload"
           />
         </SchemaField>
       </Form>

src/pages/Nft/NftToken/List/index.tsx

@@ -1,64 +1,56 @@
 import React, { useRef, useState } from 'react';
-import Table, { ProColumns, ActionType } from '@/components/Table';
+import { message, Button, Upload, Space, Row } from 'antd';
-import { message } from 'antd';
+import { RcFile } from 'antd/lib/upload';
+import XLSX from 'xlsx';
 // import { fetchTableData } from '@/utils/table';
 
 import AddNftModal from './components/AddNftModel';
 import PaySelectModal from '@/widget/PaySelectModal';
 
 const Address: React.FC = () => {
-  const tableRef = useRef<ActionType>();
-  const [NftModal, setNftModal] = useState(false);
   const [visible, setVisible] = useState(false);
   const [payVisible, setPayVisible] = useState(false);
 
-  const columns: ProColumns<any>[] = [
+  const onImportExcel = (file: RcFile, FileList: RcFile[]) => {
-    {
+    let resData = [{}];
-      title: '合约名称',
+    const fileReader = new FileReader();
-      dataIndex: 'time',
+    fileReader.readAsBinaryString(file);
-      width: '10%',
+    fileReader.onload = (event) => {
-      hideInSearch: true,
+      try {
-    },
+        const result = event.target?.result;
-    {
+        const workbook = XLSX.read(result, { type: 'binary' });
-      title: 'NFT名称',
+        for (const sheet in workbook.Sheets) {
-      dataIndex: 'address',
+          if (workbook.Sheets.hasOwnProperty(sheet)) {
-      hideInSearch: true,
+            resData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
-      width: '20%',
+            break;
-    },
+          }
-    {
+        }
-      title: 'TokenId',
+        console.log(resData);
-      dataIndex: 'token_id',
+      } catch (e) {
-      width: 150,
+        message.error('文件类型不正确');
-      hideInSearch: true,
+        console.log('文件类型不正确', e);
-    },
+      }
-  ];
+    };
-
+    return false;
+  };
   return (
     <div>
-      <Table
+      <div>
-        columns={columns}
+        <h3 className="part-title">NFT</h3>
-        rowKey="id"
+        <Space>
-        actionRef={tableRef}
+          <Button
-        toolBarActions={[
+            type="primary"
-          {
+            onClick={() => {
-            type: 'add',
-            text: '添加NFT',
-            onConfirm: () => {
               setVisible(true);
-            },
+            }}
-          },
+          >
-          {
+            新增NFT
-            type: 'add',
+          </Button>
-            text: '分发NFT',
+          <Upload beforeUpload={onImportExcel} onRemove={() => {}}>
-            onConfirm: () => {
+            <Button type="primary">导入分发NFT</Button>
-              setNftModal(true);
+          </Upload>
-            },
+        </Space>
-          },
+      </div>
-        ]}
-        // request={async (params) => {
-        //   // return fetchTableData(, params);
-        // }}
-      />
       <AddNftModal
         visible={visible}
         onCancel={function () {
@@ -67,6 +59,7 @@ const Address: React.FC = () => {
         onOk={async function (val: any): Promise<void> {
           try {
             const params = { ...val };
+            console.log(val);
             // await creatNftAddress(params);
             message.success('添加成功');
           } catch (e) {