代码规范调整

src/pages/Nft/NftContract/List/components/AddNftContract.tsx

@@ -22,8 +22,10 @@ const form = createForm({});
 
 const AddNftContractModal = ({ onOk, onCancel, ...rest }: AddNftContractModalPropsType) => {
   const handleOk = () => {
+    form.submit(async () => {
       const formState = form.getFormState();
       onOk(formState.values);
+    });
   };
   const handleCancel = () => {
     onCancel();
@@ -35,24 +37,31 @@ const AddNftContractModal = ({ onOk, onCancel, ...rest }: AddNftContractModalPro
         <SchemaField>
           <SchemaField.String
             name="contract_name"
-            title="名称"
+            title="合约名称"
             required
             x-decorator="FormItem"
             x-component="Input"
           />
-          <SchemaField.Number
+          <SchemaField.String
-            name="contract_address"
+            name="address"
-            title="合约"
+            title="合约地址"
             required
             x-decorator="FormItem"
-            x-component="NumberPicker"
+            x-component="Input"
           />
-          <SchemaField.Number
+          <SchemaField.String
             name="description"
-            title=""
+            title="描述"
             required
             x-decorator="FormItem"
-            x-component="NumberPicker"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="contract_symbol"
+            title="合约符号"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
           />
         </SchemaField>
       </Form>

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

@@ -1,8 +1,9 @@
 import React, { useRef, useState } from 'react';
 import Table, { ProColumns, ActionType } from '@/components/Table';
 import { message } from 'antd';
-// import { fetchTableData } from '@/utils/table';
+import { fetchTableData } from '@/utils/table';
 import AddNftContractModal from './components/AddNftContract';
+import { getContractData, createContract } from '@/services/nft/contract';
 
 const Address: React.FC = () => {
   const tableRef = useRef<ActionType>();
@@ -35,6 +36,7 @@ const Address: React.FC = () => {
       <Table
         columns={columns}
         rowKey="id"
+        search={false}
         actionRef={tableRef}
         toolBarActions={[
           {
@@ -45,19 +47,19 @@ const Address: React.FC = () => {
             },
           },
         ]}
-        // request={async (params) => {
+        request={async (params) => {
-        //   // return fetchTableData(, params);
+          return fetchTableData(getContractData, params);
-        // }}
+        }}
       />
       <AddNftContractModal
         visible={visible}
         onCancel={function () {
-          setNftModal(false);
+          setVisible(false);
         }}
         onOk={async function (val: any): Promise<void> {
           try {
             const params = { ...val };
-            // await creatNftAddress(params);
+            await createContract(params);
             message.success('添加成功');
           } catch (e) {
             console.log(e);

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

@@ -1,11 +1,19 @@
-import React, { useRef } from 'react';
+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 { Button, message } from 'antd';
 // import { fetchTableData } from '@/utils/table';
-import { UploadBizType } from '@/constants/enum/uploadBizType';
+import {
-import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
+  Form,
+  FormItem,
+  Input,
+  NumberPicker,
+  ArrayItems,
+  FormButtonGroup,
+  ArrayTable,
+} from '@formily/antd';
 
 interface AddNftModalPropsType extends ModalProps {
   onOk: (val: any) => void;
@@ -18,6 +26,9 @@ const SchemaField = createSchemaField({
     Input,
     NumberPicker,
     Upload,
+    ArrayItems,
+    FormButtonGroup,
+    ArrayTable,
   },
 });
 
@@ -25,8 +36,20 @@ const form = createForm({});
 
 const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
   const handleOk = () => {
+    form.submit(async () => {
       const formState = form.getFormState();
       onOk(formState.values);
+    });
+  };
+  const handleAddResoruce = () => {
+    const resourceList = form.getFieldState('contacts').value;
+    if (resourceList.length >= 1) {
+      message.warning('只能添加1个属性');
+      return;
+    }
+    form.setFieldState('contacts', (state) => {
+      state.value = [...resourceList, {}];
+    });
   };
   const handleCancel = () => {
     onCancel();
@@ -37,16 +60,17 @@ const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
       <Form form={form} labelCol={4} wrapperCol={18}>
         <SchemaField>
           <SchemaField.String
-            name="nft_name"
+            name="name"
             title="名称"
-            required
+            x-validator={{ required: true }}
-            x-decorator="FormItem"
             x-component="Input"
+            x-decorator="FormItem"
           />
           <SchemaField.Number
             name="contract"
             title="合约"
             required
+            x-validator={{ required: true }}
             x-decorator="FormItem"
             x-component="Input"
           />
@@ -54,17 +78,89 @@ const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
             name="description"
             title="描述"
             required
+            x-validator={{ required: true }}
             x-decorator="FormItem"
             x-component="Input"
           />
           <SchemaField.String
-            name="img"
+            name="image"
             title="图片"
             required
+            x-validator={{ required: true }}
             x-decorator="FormItem"
             x-component="Upload"
           />
+          <SchemaField.String
+            name="avatar"
+            title="avatar"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Array
+            name="contacts"
+            title="属性"
+            required
+            // x-validator={[{ required: true }]}
+            x-decorator="FormItem"
+            x-component="ArrayItems"
+          >
+            <SchemaField.Object x-component="ArrayItems.Item">
+              <SchemaField.Void x-decorator="FormItem" />
+              <SchemaField.Void
+                name="popover"
+                title=""
+                required
+                x-decorator="Editable.Popover"
+                x-component="FormLayout"
+                x-component-props={{
+                  layout: 'vertical',
+                }}
+                x-reactions={[
+                  {
+                    fulfill: {
+                      schema: {
+                        title: '{{$self.query(".name").value() }}',
+                      },
+                    },
+                  },
+                ]}
+              >
+                <SchemaField.String
+                  name="trait_type"
+                  required
+                  title="类型"
+                  x-validator={{ required: true }}
+                  x-decorator="FormItem"
+                  x-component="Input"
+                  x-component-props={{
+                    style: {
+                      width: 300,
+                    },
+                  }}
+                />
+                <SchemaField.String
+                  name="value"
+                  title="值"
+                  required
+                  x-decorator="FormItem"
+                  x-component="Input"
+                  x-component-props={{
+                    style: {
+                      width: 300,
+                    },
+                  }}
+                />
+              </SchemaField.Void>
+              <SchemaField.Void x-decorator="FormItem" x-component="ArrayItems.Remove" />
+            </SchemaField.Object>
+          </SchemaField.Array>
         </SchemaField>
+        <FormButtonGroup.FormItem style={{ marginBottom: 20 }}>
+          <Button type="dashed" onClick={handleAddResoruce} block>
+            添加属性
+          </Button>
+        </FormButtonGroup.FormItem>
       </Form>
     </Modal>
   );

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

@@ -3,8 +3,8 @@ 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 { Button, message } from 'antd';
-import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
+import { Form, FormItem, Input, NumberPicker, ArrayItems, FormButtonGroup } from '@formily/antd';
 
 interface EditNftModalPropsType extends ModalProps {
   onOk: (val: any) => void;
@@ -18,6 +18,8 @@ const SchemaField = createSchemaField({
     Input,
     NumberPicker,
     Upload,
+    ArrayItems,
+    FormButtonGroup,
   },
 });
 
@@ -28,8 +30,20 @@ const EditNftModal = ({ onOk, onCancel, modalData, ...rest }: EditNftModalPropsT
     form.setInitialValues(modalData);
   });
   const handleOk = () => {
+    form.submit(async () => {
       const formState = form.getFormState();
       onOk(formState.values);
+    });
+  };
+  const handleAddResoruce = () => {
+    const resourceList = form.getFieldState('contacts').value;
+    if (resourceList.length >= 1) {
+      message.warning('只能添加1个属性');
+      return;
+    }
+    form.setFieldState('contacts', (state) => {
+      state.value = [...resourceList, {}];
+    });
   };
   const handleCancel = () => {
     onCancel();
@@ -39,26 +53,21 @@ const EditNftModal = ({ onOk, onCancel, modalData, ...rest }: EditNftModalPropsT
     <Modal title="添加NFT" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
       <Form form={form} labelCol={4} wrapperCol={18}>
         <SchemaField>
-          <SchemaField.String
+          <SchemaField.String name="name" title="名称" x-decorator="FormItem" x-component="Input" />
-            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
+          <SchemaField.String
             name="contract"
             title="合约"
             required
             x-decorator="FormItem"
             x-component="Input"
           />
-          <SchemaField.Number
+          <SchemaField.String
             name="description"
             title="描述"
             required
@@ -66,13 +75,83 @@ const EditNftModal = ({ onOk, onCancel, modalData, ...rest }: EditNftModalPropsT
             x-component="Input"
           />
           <SchemaField.String
-            name="img"
+            name="image"
             title="图片"
             required
             x-decorator="FormItem"
             x-component="Upload"
           />
+          <SchemaField.String
+            name="avatar"
+            title="avatar"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Array
+            name="contacts"
+            title="属性"
+            required
+            // x-validator={[{ required: true }]}
+            x-decorator="FormItem"
+            x-component="ArrayItems"
+          >
+            <SchemaField.Object x-component="ArrayItems.Item">
+              <SchemaField.Void x-decorator="FormItem" />
+              <SchemaField.Void
+                name="popover"
+                title=""
+                required
+                x-decorator="Editable.Popover"
+                x-component="FormLayout"
+                x-component-props={{
+                  layout: 'vertical',
+                }}
+                x-reactions={[
+                  {
+                    fulfill: {
+                      schema: {
+                        title: '{{$self.query(".name").value() }}',
+                      },
+                    },
+                  },
+                ]}
+              >
+                <SchemaField.String
+                  name="trait_type"
+                  required
+                  title="类型"
+                  x-validator={{ required: true }}
+                  x-decorator="FormItem"
+                  x-component="Input"
+                  x-component-props={{
+                    style: {
+                      width: 300,
+                    },
+                  }}
+                />
+                <SchemaField.String
+                  name="value"
+                  title="值"
+                  required
+                  x-decorator="FormItem"
+                  x-component="Input"
+                  x-component-props={{
+                    style: {
+                      width: 300,
+                    },
+                  }}
+                />
+              </SchemaField.Void>
+              <SchemaField.Void x-decorator="FormItem" x-component="ArrayItems.Remove" />
+            </SchemaField.Object>
+          </SchemaField.Array>
         </SchemaField>
+        <FormButtonGroup.FormItem style={{ marginBottom: 20 }}>
+          <Button type="dashed" onClick={handleAddResoruce} block>
+            添加属性
+          </Button>
+        </FormButtonGroup.FormItem>
       </Form>
     </Modal>
   );

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

@@ -3,10 +3,11 @@ 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 { fetchTableData } from '@/utils/table';
 import EditNftModal from './components/EditNftModel';
 import AddNftModal from './components/AddNftModel';
 import PaySelectModal from '@/widget/PaySelectModal';
+import { getNftData, createNft, editNft, getTokenId } from '@/services/nft/nft';
 
 const Address: React.FC = () => {
   const [visible, setVisible] = useState(false);
@@ -78,6 +79,18 @@ const Address: React.FC = () => {
       width: 150,
       hideInSearch: true,
     },
+    {
+      title: 'image',
+      dataIndex: 'image',
+      width: 150,
+      hideInSearch: true,
+    },
+    {
+      title: 'avatar',
+      dataIndex: 'avatar',
+      width: 150,
+      hideInSearch: true,
+    },
     {
       title: '操作',
       valueType: 'option',
@@ -117,9 +130,9 @@ const Address: React.FC = () => {
         rowKey="id"
         search={false}
         actionRef={tableRef}
-        // request={async (params) => {
+        request={async (params) => {
-        //   // return fetchTableData(, params);
+          return fetchTableData(getNftData, params);
-        // }}
+        }}
       />
       <AddNftModal
         visible={visible}
@@ -130,8 +143,9 @@ const Address: React.FC = () => {
           try {
             const params = { ...val };
             console.log(val);
-            // await creatNftAddress(params);
+            await createNft(params);
             message.success('添加成功');
+            setVisible(false);
             tableRef.current?.reload();
           } catch (e) {
             console.log(e);
@@ -149,8 +163,7 @@ const Address: React.FC = () => {
         onOk={async function (val: any): Promise<void> {
           try {
             const params = { ...val };
-            // await creatNftAddress(params);
+            await editNft(params);
-            console.log(params);
             message.success('添加成功');
             tableRef.current?.reload();
           } catch (e) {
@@ -166,16 +179,17 @@ const Address: React.FC = () => {
           setPayVisible(false);
         }}
         onOk={async function (val: any): Promise<void> {
-          try {
+          //   setPayVisible(false);
-            const params = { ...val };
+          // try {
-            // await creatNftAddress(params);
+          //   const params = { ...val };
-            console.log(params);
+          //   // await creatNftAddress(params);
-            message.success('添加成功');
+          //   console.log(params);
-          } catch (e) {
+          //   message.success('添加成功');
-            console.log(e);
+          // } catch (e) {
-            message.success('发生错误');
+          //   console.log(e);
-            setPayVisible(false);
+          //   message.success('发生错误');
-          }
+          //   setPayVisible(false);
+          // }
         }}
       />
     </div>

src/services/nft/contract.ts

@@ -0,0 +1,17 @@
+import request from '@/utils/request';
+//获取获取所有合约
+export const getContractData = (params) => {
+  return request.request({
+    url: '/tbg/api/v1/contract/get',
+    method: 'get',
+    params,
+  });
+};
+// 创建合约
+export const createContract = (data) => {
+  return request.request({
+    url: '/tbg/api/v1/erc721/create',
+    method: 'post',
+    data,
+  });
+};

src/services/nft/nft.ts

@@ -0,0 +1,33 @@
+import request from '@/utils/request';
+//获取获取所有NFT
+export const getNftData = (params) => {
+  return request.request({
+    url: '/tbg/api/v1/nft/get',
+    method: 'get',
+    params,
+  });
+};
+// 创建NFT
+export const createNft = (data) => {
+  return request.request({
+    url: '/tbg/api/v1/nft/create',
+    method: 'post',
+    data,
+  });
+};
+//编辑NFT
+export const editNft = (data) => {
+  return request.request({
+    url: '/tbg/api/v1/nft/update',
+    method: 'post',
+    data,
+  });
+};
+// 检查TokenId
+export const getTokenId = (params) => {
+  return request.request({
+    url: '/tbg/api/v1/nft/check',
+    method: 'get',
+    params,
+  });
+};