feat: 取消订单

src/pages/trade/order/components/cancleOrderModal.tsx

@@ -0,0 +1,83 @@
+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);