87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import {
|
|
logisticscontrollerGetorderlist,
|
|
logisticscontrollerGetlistbyorderid
|
|
} from '@/servers/api/logistics';
|
|
import { SearchOutlined } from '@ant-design/icons';
|
|
import { PageContainer, ProFormSelect } from '@ant-design/pro-components';
|
|
import { useState } from 'react';
|
|
|
|
const TrackPage: React.FC = () => {
|
|
const [id, setId] = useState<string>();
|
|
const [data, setData] = useState({});
|
|
return (
|
|
<PageContainer>
|
|
<ProFormSelect
|
|
showSearch={true}
|
|
debounceTime={500}
|
|
request={async ({ keyWords }) => {
|
|
if (!keyWords || keyWords.length < 3) return [];
|
|
const { data: trackList } =
|
|
await logisticscontrollerGetorderlist({ number: keyWords });
|
|
return trackList?.map((v) => {
|
|
return {
|
|
label: v.siteName + ' ' + v.externalOrderId,
|
|
value: v.id,
|
|
};
|
|
});
|
|
}}
|
|
fieldProps={{
|
|
prefix: '订单号',
|
|
onChange(value: string) {
|
|
setId(value);
|
|
setData({})
|
|
|
|
const { data } = await logisticscontrollerGetlistbyorderid({
|
|
id,
|
|
});
|
|
setData(data);
|
|
},
|
|
placeholder: '请输入订单号',
|
|
allowClear: false,
|
|
suffixIcon: (
|
|
<SearchOutlined
|
|
onClick={async (e) => {
|
|
if (!id) {
|
|
return;
|
|
}
|
|
const { data } = await logisticscontrollerGetlistbyorderid({
|
|
id,
|
|
});
|
|
setData(data);
|
|
}}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
{
|
|
data?.item ?
|
|
<div>
|
|
<div>
|
|
<h4>原订单内容</h4>
|
|
{data?.item?.map((item) => (
|
|
<div style={{ paddingLeft: 20, color: 'blue' }}>
|
|
{item.name} * {item.quantity}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div> : <></>
|
|
}
|
|
{
|
|
data?.saleItem ?
|
|
<div>
|
|
<div>
|
|
<h4>订单内容</h4>
|
|
{data?.saleItem?.map((item) => (
|
|
<div style={{ paddingLeft: 20, color: 'blue' }}>
|
|
{item.name} * {item.quantity}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div> : <></>
|
|
}
|
|
</PageContainer>
|
|
);
|
|
};
|
|
|
|
export default TrackPage;
|