84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import {
|
||
BetaSchemaForm,
|
||
type ProFormColumnsType,
|
||
} from '@ant-design/pro-components';
|
||
import { type FormInstance, Modal, message } from 'antd';
|
||
import React, { useCallback, useRef, useState } from 'react';
|
||
import { cancelOrder } from '@/services/trade/order';
|
||
|
||
const CancleOrderModal: React.FC<{
|
||
open?: boolean;
|
||
id?: number;
|
||
onClose?: () => void;
|
||
}> = (props) => {
|
||
const formRef = useRef<FormInstance>(null);
|
||
const [loading, setLoading] = useState<boolean>(false);
|
||
const columns: ProFormColumnsType[] = [
|
||
{
|
||
title: '',
|
||
dataIndex: 'cancelReason',
|
||
valueType: 'radio',
|
||
fieldProps: {
|
||
options: [
|
||
{ value: '用户主动取消', label: '用户主动取消' },
|
||
{ value: '选项二', label: '选项二' },
|
||
{ value: '选项三', label: '选项三' },
|
||
{ value: '选项四', label: '选项四' },
|
||
{ value: '选项五', label: '选项五' },
|
||
{ value: '选项六', label: '选项六' },
|
||
{ value: '选项七', label: '选项七' },
|
||
],
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '8px',
|
||
marginTop: '6px',
|
||
background: '#f0f0f0',
|
||
padding: '8px',
|
||
borderRadius: '8px',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '取消备注',
|
||
dataIndex: 'cancelRemark',
|
||
valueType: 'textarea',
|
||
},
|
||
];
|
||
|
||
const handleOk = useCallback(async () => {
|
||
try {
|
||
setLoading(true);
|
||
const values = formRef.current?.getFieldsValue();
|
||
console.log(values, props.id, 'ok');
|
||
await cancelOrder({ id: props.id, ...values });
|
||
message.success('取消成功');
|
||
props.onClose?.();
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [open, props.id]);
|
||
return (
|
||
<Modal
|
||
title="取消订单"
|
||
open={props.open}
|
||
onOk={handleOk}
|
||
onCancel={props?.onClose}
|
||
confirmLoading={loading}
|
||
>
|
||
<span>是否确认取消订单？</span>
|
||
<BetaSchemaForm
|
||
layoutType="Form"
|
||
formRef={formRef}
|
||
columns={columns || []}
|
||
layout="horizontal"
|
||
submitter={false}
|
||
labelCol={{ span: 4 }}
|
||
wrapperCol={{ span: 20 }}
|
||
/>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default React.memo(CancleOrderModal);
|