修改规范
This commit is contained in:
vance
parent
de5c5695cd
commit
e71e8b6012
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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={{
|
||||
placeholder: '请输入秘钥，若使用小狐狸支付则不需要输入',
|
||||
}}
|
||||
// x-component-props={{
|
||||
// placeholder: '请输入秘钥，若使用小狐狸支付则不需要输入',
|
||||
// }}
|
||||
/>
|
||||
</SchemaField>
|
||||
</Form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue