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 } from 'antd';
+import { message, Button, Upload, Space, Row } 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>[] = [
-    {
-      title: '合约名称',
-      dataIndex: 'time',
-      width: '10%',
-      hideInSearch: true,
-    },
-    {
-      title: 'NFT名称',
-      dataIndex: 'address',
-      hideInSearch: true,
-      width: '20%',
-    },
-    {
-      title: 'TokenId',
-      dataIndex: 'token_id',
-      width: 150,
-      hideInSearch: true,
-    },
-  ];
-
+  const onImportExcel = (file: RcFile, FileList: RcFile[]) => {
+    let resData = [{}];
+    const fileReader = new FileReader();
+    fileReader.readAsBinaryString(file);
+    fileReader.onload = (event) => {
+      try {
+        const result = event.target?.result;
+        const workbook = XLSX.read(result, { type: 'binary' });
+        for (const sheet in workbook.Sheets) {
+          if (workbook.Sheets.hasOwnProperty(sheet)) {
+            resData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
+            break;
+          }
+        }
+        console.log(resData);
+      } catch (e) {
+        message.error('文件类型不正确');
+        console.log('文件类型不正确', e);
+      }
+    };
+    return false;
+  };
   return (
     <div>
-      <Table
-        columns={columns}
-        rowKey="id"
-        actionRef={tableRef}
-        toolBarActions={[
-          {
-            type: 'add',
-            text: '添加NFT',
-            onConfirm: () => {
+      <div>
+        <h3 className="part-title">NFT</h3>
+        <Space>
+          <Button
+            type="primary"
+            onClick={() => {
               setVisible(true);
-            },
-          },
-          {
-            type: 'add',
-            text: '分发NFT',
-            onConfirm: () => {
-              setNftModal(true);
-            },
-          },
-        ]}
-        // request={async (params) => {
-        //   // return fetchTableData(, params);
-        // }}
-      />
+            }}
+          >
+            新增NFT
+          </Button>
+          <Upload beforeUpload={onImportExcel} onRemove={() => {}}>
+            <Button type="primary">导入分发NFT</Button>
+          </Upload>
+        </Space>
+      </div>
       <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) {