92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import { sitecontrollerAll } from '@/servers/api/site';
|
|
import { SyncOutlined } from '@ant-design/icons';
|
|
import {
|
|
ActionType,
|
|
DrawerForm,
|
|
ProForm,
|
|
ProFormSelect,
|
|
} from '@ant-design/pro-components';
|
|
import { Button } from 'antd';
|
|
import React from 'react';
|
|
|
|
// 定义SyncForm组件的props类型
|
|
interface SyncFormProps {
|
|
tableRef: React.MutableRefObject<ActionType | undefined>;
|
|
onFinish: (values: any) => Promise<void>;
|
|
siteId?: string;
|
|
}
|
|
|
|
/**
|
|
* 同步订单的表单组件
|
|
* @param {SyncFormProps} props 组件属性
|
|
* @returns {React.ReactElement} 抽屉表单
|
|
*/
|
|
const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId }) => {
|
|
// 使用 antd 的 App 组件提供的 message API
|
|
const [loading, setLoading] = React.useState(false);
|
|
|
|
if (siteId) {
|
|
return (
|
|
<Button
|
|
key="syncSite"
|
|
type="primary"
|
|
loading={loading}
|
|
onClick={async () => {
|
|
try {
|
|
setLoading(true);
|
|
await onFinish({ siteId: Number(siteId) });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
<SyncOutlined />
|
|
同步订单
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
// 返回一个抽屉表单
|
|
return (
|
|
<DrawerForm<API.ordercontrollerSyncorderParams>
|
|
title="同步订单"
|
|
// 表单的触发器,一个带图标的按钮
|
|
trigger={
|
|
<Button key="syncSite" type="primary">
|
|
<SyncOutlined />
|
|
同步订单
|
|
</Button>
|
|
}
|
|
// 自动聚焦第一个输入框
|
|
autoFocusFirstInput
|
|
// 抽屉关闭时销毁内部组件
|
|
drawerProps={{
|
|
destroyOnHidden: true,
|
|
}}
|
|
// 表单提交成功后的回调
|
|
onFinish={onFinish}
|
|
>
|
|
<ProForm.Group>
|
|
{/* 站点选择框 */}
|
|
<ProFormSelect
|
|
name="siteId"
|
|
width="lg"
|
|
label="站点"
|
|
placeholder="请选择站点"
|
|
// 异步请求站点列表数据
|
|
request={async () => {
|
|
const { data = [] } = await sitecontrollerAll();
|
|
// 将返回的数据格式化为 ProFormSelect 需要的格式
|
|
return data.map((item: any) => ({
|
|
label: item.name || String(item.id),
|
|
value: item.id,
|
|
}));
|
|
}}
|
|
/>
|
|
</ProForm.Group>
|
|
</DrawerForm>
|
|
);
|
|
};
|
|
|
|
export default SyncForm;
|