406 lines
11 KiB
TypeScript
406 lines
11 KiB
TypeScript
import InternationalPhoneInput from '@/components/InternationalPhoneInput';
|
|
import {
|
|
logisticscontrollerCreateshippingaddress,
|
|
logisticscontrollerDelshippingaddress,
|
|
logisticscontrollerGetshippingaddresslist,
|
|
logisticscontrollerUpdateshippingaddress,
|
|
} from '@/servers/api/logistics';
|
|
import { stockcontrollerGetallstockpoints } from '@/servers/api/stock';
|
|
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
|
|
import {
|
|
ActionType,
|
|
DrawerForm,
|
|
PageContainer,
|
|
ProColumns,
|
|
ProForm,
|
|
ProFormItem,
|
|
ProFormSelect,
|
|
ProFormText,
|
|
ProTable,
|
|
} from '@ant-design/pro-components';
|
|
import { App, Button, Divider, Popconfirm } from 'antd';
|
|
import { useRef } from 'react';
|
|
|
|
const ListPage: React.FC = () => {
|
|
const actionRef = useRef<ActionType>();
|
|
const { message } = App.useApp();
|
|
|
|
const columns: ProColumns<API.ShippingAddress>[] = [
|
|
{
|
|
title: '仓库点',
|
|
dataIndex: 'stockPointId',
|
|
hideInSearch: true,
|
|
valueType: 'select',
|
|
request: async () => {
|
|
const { data = [] } = await stockcontrollerGetallstockpoints();
|
|
return data.map((item) => ({
|
|
label: item.name,
|
|
value: item.id,
|
|
}));
|
|
},
|
|
},
|
|
{
|
|
title: '地区',
|
|
dataIndex: ['address', 'region'],
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '城市',
|
|
dataIndex: ['address', 'city'],
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '邮编',
|
|
dataIndex: ['address', 'postal_code'],
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '详细地址',
|
|
dataIndex: ['address', 'address_line_1'],
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '联系电话',
|
|
render: (_, record) =>
|
|
`+${record.phone_number_extension} ${record.phone_number}`,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'option',
|
|
valueType: 'option',
|
|
render: (_, record) => (
|
|
<>
|
|
<UpdateForm tableRef={actionRef} value={record} />
|
|
<Divider type="vertical" />
|
|
<Popconfirm
|
|
title="删除"
|
|
description="确认删除？"
|
|
onConfirm={async () => {
|
|
try {
|
|
const { success, message: errMsg } =
|
|
await logisticscontrollerDelshippingaddress({
|
|
id: record.id as number,
|
|
});
|
|
if (!success) {
|
|
throw new Error(errMsg);
|
|
}
|
|
actionRef.current?.reload();
|
|
} catch (error: any) {
|
|
message.error(error.message);
|
|
}
|
|
}}
|
|
>
|
|
<Button type="primary" danger>
|
|
删除
|
|
</Button>
|
|
</Popconfirm>
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
return (
|
|
<PageContainer ghost>
|
|
<ProTable
|
|
headerTitle="查询表格"
|
|
actionRef={actionRef}
|
|
rowKey="id"
|
|
toolBarRender={() => [<CreateForm tableRef={actionRef} />]}
|
|
request={async () => {
|
|
const { data, success } =
|
|
await logisticscontrollerGetshippingaddresslist();
|
|
if (success) {
|
|
return {
|
|
data: data,
|
|
};
|
|
}
|
|
return {
|
|
data: [],
|
|
};
|
|
}}
|
|
columns={columns}
|
|
/>
|
|
</PageContainer>
|
|
);
|
|
};
|
|
|
|
const region = {
|
|
AB: 'Alberta',
|
|
BC: 'British',
|
|
MB: 'Manitoba',
|
|
NB: 'New',
|
|
NL: 'Newfoundland',
|
|
NS: 'Nova',
|
|
ON: 'Ontario',
|
|
PE: 'Prince',
|
|
QC: 'Quebec',
|
|
SK: 'Saskatchewan',
|
|
NT: 'Northwest',
|
|
NU: 'Nunavut',
|
|
YT: 'Yukon',
|
|
};
|
|
const CreateForm: React.FC<{
|
|
tableRef: React.MutableRefObject<ActionType | undefined>;
|
|
}> = ({ tableRef }) => {
|
|
const { message } = App.useApp();
|
|
return (
|
|
<DrawerForm
|
|
title="新建"
|
|
trigger={
|
|
<Button type="primary">
|
|
<PlusOutlined />
|
|
新建
|
|
</Button>
|
|
}
|
|
autoFocusFirstInput
|
|
drawerProps={{
|
|
destroyOnClose: true,
|
|
}}
|
|
onFinish={async (values) => {
|
|
const { contact, ...params } = values;
|
|
try {
|
|
const { success, message: errMsg } =
|
|
await logisticscontrollerCreateshippingaddress({
|
|
...params,
|
|
phone_number: contact?.phone,
|
|
phone_number_extension: contact?.extension,
|
|
phone_number_country: contact?.country,
|
|
} as API.ShippingAddress);
|
|
if (!success) {
|
|
throw new Error(errMsg);
|
|
}
|
|
tableRef.current?.reload();
|
|
message.success('提交成功');
|
|
return true;
|
|
} catch (error: any) {
|
|
message.error(error.message);
|
|
}
|
|
}}
|
|
>
|
|
<ProFormText
|
|
name="name"
|
|
label="名称"
|
|
width="lg"
|
|
placeholder="请输入名称"
|
|
required
|
|
rules={[{ required: true, message: '请输入名称' }]}
|
|
/>
|
|
<ProFormSelect
|
|
name="stockPointId"
|
|
width="lg"
|
|
label="仓库点"
|
|
placeholder="请选择仓库点"
|
|
required
|
|
rules={[{ required: true, message: '请选择仓库点' }]}
|
|
request={async () => {
|
|
const { data = [] } = await stockcontrollerGetallstockpoints();
|
|
return data.map((item) => ({
|
|
label: item.name,
|
|
value: item.id,
|
|
}));
|
|
}}
|
|
/>
|
|
<ProForm.Group title="地址">
|
|
<ProFormText
|
|
name={['address', 'country']}
|
|
label="国家"
|
|
initialValue={'CA'}
|
|
hidden
|
|
/>
|
|
<ProFormSelect
|
|
name={['address', 'region']}
|
|
label="地区"
|
|
placeholder={'请选择地区'}
|
|
showSearch
|
|
required
|
|
valueEnum={region}
|
|
rules={[{ required: true, message: '请选择地区' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['address', 'city']}
|
|
label="城市"
|
|
placeholder="请输入城市"
|
|
required
|
|
rules={[{ required: true, message: '请输入城市' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['address', 'postal_code']}
|
|
label="邮编"
|
|
placeholder="请输入邮编"
|
|
required
|
|
rules={[{ required: true, message: '请输入邮编' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['address', 'address_line_1']}
|
|
label="详细地址"
|
|
placeholder="请输入详细地址"
|
|
width="lg"
|
|
required
|
|
rules={[{ required: true, message: '请输入详细地址' }]}
|
|
/>
|
|
</ProForm.Group>
|
|
<ProFormItem
|
|
name="contact"
|
|
label="联系电话"
|
|
required
|
|
rules={[
|
|
{
|
|
required: true,
|
|
async validator(_, value) {
|
|
if (!value?.phone) {
|
|
return Promise.reject('请输入联系电话');
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InternationalPhoneInput />
|
|
</ProFormItem>
|
|
</DrawerForm>
|
|
);
|
|
};
|
|
|
|
const UpdateForm: React.FC<{
|
|
tableRef: React.MutableRefObject<ActionType | undefined>;
|
|
value: API.ShippingAddress;
|
|
}> = ({ tableRef, value }) => {
|
|
const { message } = App.useApp();
|
|
const {
|
|
id,
|
|
phone_number,
|
|
phone_number_country,
|
|
phone_number_extension,
|
|
...initialValue
|
|
} = value;
|
|
return (
|
|
<DrawerForm
|
|
title="编辑"
|
|
trigger={
|
|
<Button type="primary">
|
|
<EditOutlined />
|
|
编辑
|
|
</Button>
|
|
}
|
|
autoFocusFirstInput
|
|
drawerProps={{
|
|
destroyOnClose: true,
|
|
}}
|
|
onFinish={async (values) => {
|
|
const { contact, ...params } = values;
|
|
try {
|
|
const { success, message: errMsg } =
|
|
await logisticscontrollerUpdateshippingaddress(
|
|
{ id: id as number },
|
|
{
|
|
...params,
|
|
phone_number: contact?.phone,
|
|
phone_number_extension: contact?.extension,
|
|
phone_number_country: contact?.country,
|
|
} as API.ShippingAddress,
|
|
);
|
|
if (!success) {
|
|
throw new Error(errMsg);
|
|
}
|
|
tableRef.current?.reload();
|
|
message.success('提交成功');
|
|
return true;
|
|
} catch (error: any) {
|
|
message.error(error.message);
|
|
}
|
|
}}
|
|
initialValues={{
|
|
...initialValue,
|
|
contact: {
|
|
phone: phone_number,
|
|
extension: phone_number_extension,
|
|
country: phone_number_country,
|
|
},
|
|
}}
|
|
>
|
|
<ProFormText
|
|
name="name"
|
|
label="名称"
|
|
width="lg"
|
|
placeholder="请输入名称"
|
|
required
|
|
rules={[{ required: true, message: '请输入名称' }]}
|
|
/>
|
|
<ProFormSelect
|
|
name="stockPointId"
|
|
width="lg"
|
|
label="仓库点"
|
|
placeholder="请选择仓库点"
|
|
required
|
|
rules={[{ required: true, message: '请选择仓库点' }]}
|
|
request={async () => {
|
|
const { data = [] } = await stockcontrollerGetallstockpoints();
|
|
return data.map((item) => ({
|
|
label: item.name,
|
|
value: item.id,
|
|
}));
|
|
}}
|
|
/>
|
|
<ProForm.Group title="地址">
|
|
<ProFormText
|
|
name={['address', 'country']}
|
|
label="国家"
|
|
initialValue={'CA'}
|
|
hidden
|
|
/>
|
|
<ProFormSelect
|
|
name={['address', 'region']}
|
|
label="地区"
|
|
placeholder={'请选择地区'}
|
|
showSearch
|
|
required
|
|
valueEnum={region}
|
|
rules={[{ required: true, message: '请选择地区' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['address', 'city']}
|
|
label="城市"
|
|
placeholder="请输入城市"
|
|
required
|
|
rules={[{ required: true, message: '请输入城市' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['address', 'postal_code']}
|
|
label="邮编"
|
|
placeholder="请输入邮编"
|
|
required
|
|
rules={[{ required: true, message: '请输入邮编' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['address', 'address_line_1']}
|
|
label="详细地址"
|
|
placeholder="请输入详细地址"
|
|
width="lg"
|
|
required
|
|
rules={[{ required: true, message: '请输入详细地址' }]}
|
|
/>
|
|
</ProForm.Group>
|
|
<ProFormItem
|
|
name="contact"
|
|
label="联系电话"
|
|
required
|
|
rules={[
|
|
{
|
|
required: true,
|
|
async validator(_, value) {
|
|
if (!value?.phone) {
|
|
return Promise.reject('请输入联系电话');
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InternationalPhoneInput />
|
|
</ProFormItem>
|
|
</DrawerForm>
|
|
);
|
|
};
|
|
|
|
export default ListPage;
|