修改规范

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 (
+    <Modal title="添加NFT" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+      <Form form={form} labelCol={4} wrapperCol={18}>
+        <SchemaField>
+          <SchemaField.String
+            name="nft_name"
+            title="名称"
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="token_id"
+            title="tokenID"
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Number
+            name="contract"
+            title="合约"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Number
+            name="description"
+            title="描述"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="img"
+            title="图片"
+            required
+            x-decorator="FormItem"
+            x-component="Upload"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditNftModal;

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<ActionType>();
   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<any>[] = [
+    {
+      title: '合约名称',
+      dataIndex: 'contract',
+      width: '10%',
+      hideInSearch: true,
+    },
+    {
+      title: '导入分配NFT',
+      dataIndex: 'share',
+      hideInTable: true,
+      renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
+        return (
+          <Upload beforeUpload={onImportExcel} onRemove={() => {}}>
+            <Button type="link">选择文件</Button>
+          </Upload>
+        );
+      },
+    },
+    {
+      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) => [
+        <a
+          key="edit"
+          onClick={() => {
+            handleEdit(row);
+          }}
+        >
+          编辑
+        </a>,
+      ],
+    },
+  ];
   return (
     <div>
       <div>
@@ -51,6 +112,15 @@ const Address: React.FC = () => {
           </Upload>
         </Space>
       </div>
+      <Table
+        columns={columns}
+        rowKey="id"
+        search={false}
+        actionRef={tableRef}
+        // request={async (params) => {
+        //   // return fetchTableData(, params);
+        // }}
+      />
       <AddNftModal
         visible={visible}
         onCancel={function () {
@@ -62,6 +132,27 @@ const Address: React.FC = () => {
             console.log(val);
             // await creatNftAddress(params);
             message.success('添加成功');
+            tableRef.current?.reload();
+          } catch (e) {
+            console.log(e);
+            message.success('发生错误');
+            setVisible(false);
+          }
+        }}
+      />
+      <EditNftModal
+        visible={editVisible}
+        modalData={nftData}
+        onCancel={function () {
+          setVisible(false);
+        }}
+        onOk={async function (val: any): Promise<void> {
+          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 = () => {
       <PaySelectModal
         visible={payVisible}
         onCancel={function () {
-          setVisible(false);
+          setPayVisible(false);
         }}
         onOk={async function (val: any): Promise<void> {
           try {
@@ -83,7 +174,7 @@ const Address: React.FC = () => {
           } catch (e) {
             console.log(e);
             message.success('发生错误');
-            setVisible(false);
+            setPayVisible(false);
           }
         }}
       />

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) =>
     <Modal title="选择方式" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
       <Form form={form} labelCol={4} wrapperCol={18}>
         <SchemaField>
-          <SchemaField.Number
+          <SchemaField.String
             name="type"
             title="支付方式"
-            required
-            x-decorator="FormItem"
-            x-component="Radio.Group"
             enum={[
               { label: '秘钥支付', value: 1 },
               { label: '小狐狸钱包支付', value: 2 },
             ]}
+            x-component="Select"
+            x-decorator="FormItem"
           />
           <SchemaField.String
-            name="key"
+            name="input"
             title="秘钥"
             x-decorator="FormItem"
             x-component="Input"
-            x-component-props={{
+            // x-component-props={{
-              placeholder: '请输入秘钥，若使用小狐狸支付则不需要输入',
+            //   placeholder: '请输入秘钥，若使用小狐狸支付则不需要输入',
-            }}
+            // }}
           />
         </SchemaField>
       </Form>