683 lines
20 KiB
TypeScript
683 lines
20 KiB
TypeScript
import { Purchase_Order_STATUS_ENUM } from '@/constants';
|
||
import { productcontrollerSearchproducts } from '@/servers/api/product';
|
||
import {
|
||
stockcontrollerCreatepurchaseorder,
|
||
stockcontrollerDelpurchaseorder,
|
||
stockcontrollerGetallstockpoints,
|
||
stockcontrollerGetpurchaseorders,
|
||
stockcontrollerReceivepurchaseorder,
|
||
stockcontrollerUpdatepurchaseorder,
|
||
} from '@/servers/api/stock';
|
||
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
|
||
import {
|
||
ActionType,
|
||
DrawerForm,
|
||
PageContainer,
|
||
ProColumns,
|
||
ProForm,
|
||
ProFormDatePicker,
|
||
ProFormDependency,
|
||
ProFormDigit,
|
||
ProFormList,
|
||
ProFormSelect,
|
||
ProFormText,
|
||
ProFormTextArea,
|
||
ProTable,
|
||
} from '@ant-design/pro-components';
|
||
import { App, Button, Divider, Form, Popconfirm } from 'antd';
|
||
import { useRef } from 'react';
|
||
|
||
const PurchaseOrderPage: React.FC = () => {
|
||
const { message } = App.useApp();
|
||
const actionRef = useRef<ActionType>();
|
||
const columns: ProColumns<API.PurchaseOrderDTO>[] = [
|
||
{
|
||
title: '订单编号',
|
||
dataIndex: 'orderNumber',
|
||
},
|
||
{
|
||
title: '仓库',
|
||
dataIndex: 'stockPointName',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
valueType: 'select',
|
||
valueEnum: Purchase_Order_STATUS_ENUM,
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '预计到货时间',
|
||
dataIndex: 'expectedArrivalTime',
|
||
valueType: 'dateTime',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '数量',
|
||
hideInSearch: true,
|
||
render(_, record) {
|
||
return record.items.reduce((cur, next) => {
|
||
return cur + next.quantity;
|
||
}, 0);
|
||
},
|
||
},
|
||
{
|
||
title: '备注',
|
||
dataIndex: 'note',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '更新时间',
|
||
dataIndex: 'updatedAt',
|
||
valueType: 'dateTime',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt',
|
||
valueType: 'dateTime',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'option',
|
||
valueType: 'option',
|
||
render: (_, record) => (
|
||
<>
|
||
{record.status !== 'received' && (
|
||
<UpdateForm tableRef={actionRef} values={record} />
|
||
)}
|
||
{record.status === 'draft' ? (
|
||
<>
|
||
<Divider type="vertical" />
|
||
<Popconfirm
|
||
title="删除"
|
||
description="确认删除？"
|
||
onConfirm={async () => {
|
||
try {
|
||
const { success, message: errMsg } =
|
||
await stockcontrollerDelpurchaseorder({
|
||
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>
|
||
</>
|
||
) : record.status === 'submitted' ? (
|
||
<>
|
||
<Divider type="vertical" />
|
||
<Popconfirm
|
||
title="入库"
|
||
description="确认已到达？"
|
||
onConfirm={async () => {
|
||
try {
|
||
const { success, message: errMsg } =
|
||
await stockcontrollerReceivepurchaseorder({
|
||
id: record.id as number,
|
||
});
|
||
if (!success) {
|
||
throw new Error(errMsg);
|
||
}
|
||
actionRef.current?.reload();
|
||
} catch (error: any) {
|
||
message.error(error.message);
|
||
}
|
||
}}
|
||
>
|
||
<Button type="primary">入库</Button>
|
||
</Popconfirm>
|
||
</>
|
||
) : (
|
||
<DetailForm tableRef={actionRef} values={record} />
|
||
)}
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<PageContainer ghost>
|
||
<ProTable<API.PurchaseOrderDTO>
|
||
headerTitle="查询表格"
|
||
actionRef={actionRef}
|
||
rowKey="id"
|
||
request={async (params) => {
|
||
const { data, success } = await stockcontrollerGetpurchaseorders(
|
||
params,
|
||
);
|
||
return {
|
||
total: data?.total || 0,
|
||
data: data?.items || [],
|
||
success,
|
||
};
|
||
}}
|
||
columns={columns}
|
||
toolBarRender={() => [<CreateForm tableRef={actionRef} />]}
|
||
/>
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
const CreateForm: React.FC<{
|
||
tableRef: React.MutableRefObject<ActionType | undefined>;
|
||
}> = ({ tableRef }) => {
|
||
const { message } = App.useApp();
|
||
const [form] = Form.useForm();
|
||
return (
|
||
<DrawerForm<API.CreatePurchaseOrderDTO>
|
||
title="新建"
|
||
trigger={
|
||
<Button type="primary">
|
||
<PlusOutlined />
|
||
新建
|
||
</Button>
|
||
}
|
||
form={form}
|
||
autoFocusFirstInput
|
||
layout="vertical"
|
||
drawerProps={{
|
||
destroyOnClose: true,
|
||
}}
|
||
onFinish={async (values) => {
|
||
try {
|
||
const { success, message: errMsg } =
|
||
await stockcontrollerCreatepurchaseorder(values);
|
||
if (!success) {
|
||
throw new Error(errMsg);
|
||
}
|
||
tableRef.current?.reload();
|
||
message.success('提交成功');
|
||
return true;
|
||
} catch (error: any) {
|
||
message.error(error.message);
|
||
}
|
||
}}
|
||
>
|
||
<ProFormSelect
|
||
request={async () => {
|
||
try {
|
||
const { data } = await stockcontrollerGetallstockpoints();
|
||
return (
|
||
data?.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id,
|
||
};
|
||
}) || []
|
||
);
|
||
} catch (error) {
|
||
return [];
|
||
}
|
||
}}
|
||
name="stockPointId"
|
||
label="仓库"
|
||
width="lg"
|
||
placeholder="请选择仓库"
|
||
rules={[{ required: true, message: '请选择仓库' }]}
|
||
/>
|
||
<ProFormSelect
|
||
name={'status'}
|
||
label="状态"
|
||
placeholder={'请选择状态'}
|
||
valueEnum={Purchase_Order_STATUS_ENUM}
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请选择状态' }]}
|
||
/>
|
||
<ProFormTextArea label="备注" name="note" width={'lg'} />
|
||
<ProFormDatePicker
|
||
name="expectedArrivalTime"
|
||
label="预计到货时间"
|
||
placeholder={'请选择预计到货时间'}
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请选择预计到货时间' }]}
|
||
/>
|
||
<ProFormDependency name={['items']}>
|
||
{({ items }) => {
|
||
return '数量：' + items?.reduce((acc, cur) => acc + cur.quantity, 0);
|
||
}}
|
||
</ProFormDependency>
|
||
<ProFormList<API.PurchaseOrderItem>
|
||
name="items"
|
||
label="产品"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '至少需要一个商品',
|
||
validator: (_, value) =>
|
||
value && value.length > 0
|
||
? Promise.resolve()
|
||
: Promise.reject('至少需要一个商品'),
|
||
},
|
||
]}
|
||
creatorButtonProps={{ children: '新增', size: 'large' }}
|
||
wrapperCol={{ span: 24 }}
|
||
>
|
||
{(fields, idx, { remove }) => (
|
||
<div key={idx}>
|
||
<ProFormSelect
|
||
request={async ({ keyWords }) => {
|
||
if (keyWords.length < 3) return [];
|
||
try {
|
||
const { data } = await productcontrollerSearchproducts({
|
||
name: keyWords,
|
||
});
|
||
return (
|
||
data?.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.sku,
|
||
};
|
||
}) || []
|
||
);
|
||
} catch (error) {
|
||
return [];
|
||
}
|
||
}}
|
||
name="productSku"
|
||
label={'产品' + (idx + 1)}
|
||
width="lg"
|
||
placeholder="请选择产品"
|
||
tooltip="至少输入3个字符"
|
||
fieldProps={{
|
||
showSearch: true,
|
||
filterOption: false,
|
||
}}
|
||
transform={(value) => {
|
||
return value?.value || value;
|
||
}}
|
||
debounceTime={300} // 防抖，减少请求频率
|
||
rules={[{ required: true, message: '请选择产品' }]}
|
||
onChange={(_, option) => {
|
||
form.setFieldValue(
|
||
['items', fields.key, 'productName'],
|
||
option.title,
|
||
);
|
||
}}
|
||
/>
|
||
<ProFormText name={'productName'} label="产品名称" hidden={true} />
|
||
<ProFormDigit
|
||
name="quantity"
|
||
label="数量"
|
||
placeholder="请输入数量"
|
||
rules={[{ required: true, message: '请输入数量' }]}
|
||
fieldProps={{
|
||
precision: 0,
|
||
}}
|
||
/>
|
||
<ProFormDigit
|
||
name="price"
|
||
label="价格"
|
||
placeholder="请输入价格"
|
||
rules={[{ required: true, message: '请输入价格' }]}
|
||
fieldProps={{
|
||
precision: 2,
|
||
}}
|
||
/>
|
||
<Button type="link" danger onClick={() => remove(fields.key)}>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</ProFormList>
|
||
</DrawerForm>
|
||
);
|
||
};
|
||
|
||
const UpdateForm: React.FC<{
|
||
tableRef: React.MutableRefObject<ActionType | undefined>;
|
||
values: API.UpdatePurchaseOrderDTO & {
|
||
id: number;
|
||
};
|
||
}> = ({ tableRef, values }) => {
|
||
const { message } = App.useApp();
|
||
const [form] = Form.useForm();
|
||
const initialValues = {
|
||
...values,
|
||
items: values?.items?.map((item: API.PurchaseOrderItem) => ({
|
||
...item,
|
||
productSku: {
|
||
label: item.productName,
|
||
value: item.productSku,
|
||
},
|
||
})),
|
||
};
|
||
return (
|
||
<DrawerForm<API.UpdatePurchaseOrderDTO>
|
||
title="编辑"
|
||
form={form}
|
||
initialValues={initialValues}
|
||
trigger={
|
||
<Button type="primary">
|
||
<EditOutlined />
|
||
编辑
|
||
</Button>
|
||
}
|
||
autoFocusFirstInput
|
||
drawerProps={{
|
||
destroyOnClose: true,
|
||
}}
|
||
onFinish={async (values) => {
|
||
try {
|
||
const { success, message: errMsg } =
|
||
await stockcontrollerUpdatepurchaseorder(
|
||
{ id: initialValues.id },
|
||
values,
|
||
);
|
||
if (!success) {
|
||
throw new Error(errMsg);
|
||
}
|
||
message.success('提交成功');
|
||
tableRef.current?.reload();
|
||
return true;
|
||
} catch (error: any) {
|
||
message.error(error.message);
|
||
}
|
||
}}
|
||
>
|
||
<ProForm.Group>
|
||
<ProFormSelect
|
||
request={async () => {
|
||
try {
|
||
const { data } = await stockcontrollerGetallstockpoints();
|
||
return (
|
||
data?.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id,
|
||
};
|
||
}) || []
|
||
);
|
||
} catch (error) {
|
||
return [];
|
||
}
|
||
}}
|
||
name="stockPointId"
|
||
label="仓库"
|
||
width="lg"
|
||
placeholder="请选择仓库"
|
||
rules={[{ required: true, message: '请选择仓库' }]}
|
||
/>
|
||
<ProFormSelect
|
||
name={'status'}
|
||
label="状态"
|
||
placeholder={'请选择状态'}
|
||
valueEnum={Purchase_Order_STATUS_ENUM}
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请选择状态' }]}
|
||
/>
|
||
<ProFormDatePicker
|
||
name="expectedArrivalTime"
|
||
label="预计到货时间"
|
||
placeholder={'请选择预计到货时间'}
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请选择预计到货时间' }]}
|
||
/>
|
||
<ProFormTextArea label="备注" name="note" width={'lg'} />
|
||
<ProFormDependency name={['items']}>
|
||
{({ items }) => {
|
||
return (
|
||
'数量：' + items?.reduce((acc, cur) => acc + cur.quantity, 0)
|
||
);
|
||
}}
|
||
</ProFormDependency>
|
||
<ProFormList<API.PurchaseOrderItem>
|
||
name="items"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '至少需要一个商品',
|
||
validator: (_, value) =>
|
||
value && value.length > 0
|
||
? Promise.resolve()
|
||
: Promise.reject('至少需要一个商品'),
|
||
},
|
||
]}
|
||
creatorButtonProps={{ children: '新增', size: 'large' }}
|
||
wrapperCol={{ span: 24 }}
|
||
>
|
||
{(fields, idx, { remove }) => (
|
||
<div key={idx}>
|
||
<ProFormSelect
|
||
request={async ({ keyWords }) => {
|
||
if (keyWords.length < 3) return [];
|
||
try {
|
||
const { data } = await productcontrollerSearchproducts({
|
||
name: keyWords,
|
||
});
|
||
return (
|
||
data?.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.sku,
|
||
};
|
||
}) || []
|
||
);
|
||
} catch (error) {
|
||
return [];
|
||
}
|
||
}}
|
||
name="productSku"
|
||
label="产品"
|
||
width="lg"
|
||
placeholder="请选择产品"
|
||
tooltip="至少输入3个字符"
|
||
fieldProps={{
|
||
showSearch: true,
|
||
filterOption: false,
|
||
}}
|
||
transform={(value) => {
|
||
return value?.value || value;
|
||
}}
|
||
debounceTime={300} // 防抖，减少请求频率
|
||
rules={[{ required: true, message: '请选择产品' }]}
|
||
onChange={(_, option) => {
|
||
form.setFieldValue(
|
||
['items', fields.key, 'productName'],
|
||
option?.title,
|
||
);
|
||
}}
|
||
/>
|
||
<ProFormText name="productName" label="产品名称" hidden={true} />
|
||
<ProFormDigit
|
||
name="quantity"
|
||
label="数量"
|
||
placeholder="请输入数量"
|
||
rules={[{ required: true, message: '请输入数量' }]}
|
||
fieldProps={{
|
||
precision: 0,
|
||
}}
|
||
/>
|
||
<ProFormDigit
|
||
name="price"
|
||
label="价格"
|
||
placeholder="请输入价格"
|
||
rules={[{ required: true, message: '请输入价格' }]}
|
||
fieldProps={{
|
||
precision: 2,
|
||
}}
|
||
/>
|
||
<Button type="link" danger onClick={() => remove(fields.key)}>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</ProFormList>
|
||
</ProForm.Group>
|
||
</DrawerForm>
|
||
);
|
||
};
|
||
|
||
const DetailForm: React.FC<{
|
||
tableRef: React.MutableRefObject<ActionType | undefined>;
|
||
values: API.UpdatePurchaseOrderDTO & {
|
||
id: number;
|
||
};
|
||
}> = ({ tableRef, values }) => {
|
||
const { message } = App.useApp();
|
||
const [form] = Form.useForm();
|
||
const initialValues = {
|
||
...values,
|
||
items: values?.items?.map((item: API.PurchaseOrderItem) => ({
|
||
...item,
|
||
productSku: {
|
||
label: item.productName,
|
||
value: item.productSku,
|
||
},
|
||
})),
|
||
};
|
||
return (
|
||
<DrawerForm<API.UpdatePurchaseOrderDTO>
|
||
title="详情"
|
||
form={form}
|
||
initialValues={initialValues}
|
||
trigger={<Button type="primary">详情</Button>}
|
||
autoFocusFirstInput
|
||
drawerProps={{
|
||
destroyOnClose: true,
|
||
}}
|
||
readonly={true}
|
||
layout="vertical"
|
||
>
|
||
<ProFormSelect
|
||
request={async () => {
|
||
try {
|
||
const { data } = await stockcontrollerGetallstockpoints();
|
||
return (
|
||
data?.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id,
|
||
};
|
||
}) || []
|
||
);
|
||
} catch (error) {
|
||
return [];
|
||
}
|
||
}}
|
||
name="stockPointId"
|
||
label="仓库"
|
||
width="lg"
|
||
placeholder="请选择仓库"
|
||
rules={[{ required: true, message: '请选择仓库' }]}
|
||
/>
|
||
<ProFormText
|
||
name="orderNumber"
|
||
label="订单编号"
|
||
placeholder="请输入订单编号"
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请输入订单编号' }]}
|
||
/>
|
||
<ProFormSelect
|
||
name={'status'}
|
||
label="状态"
|
||
placeholder={'请选择状态'}
|
||
valueEnum={Purchase_Order_STATUS_ENUM}
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请选择状态' }]}
|
||
/>
|
||
<ProFormDatePicker
|
||
name="expectedArrivalTime"
|
||
label="预计到货时间"
|
||
placeholder={'请选择预计到货时间'}
|
||
width={'lg'}
|
||
rules={[{ required: true, message: '请选择预计到货时间' }]}
|
||
/>
|
||
<ProFormTextArea label="备注" name="note" width={'lg'} />
|
||
<ProFormList<API.PurchaseOrderItem>
|
||
name="items"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '至少需要一个商品',
|
||
validator: (_, value) =>
|
||
value && value.length > 0
|
||
? Promise.resolve()
|
||
: Promise.reject('至少需要一个商品'),
|
||
},
|
||
]}
|
||
creatorButtonProps={{ children: '新增', size: 'large' }}
|
||
wrapperCol={{ span: 24 }}
|
||
>
|
||
{(fields, idx, { remove }) => (
|
||
<div key={idx}>
|
||
<ProForm.Group>
|
||
<ProFormSelect
|
||
request={async ({ keyWords }) => {
|
||
if (keyWords.length < 3) return [];
|
||
try {
|
||
const { data } = await productcontrollerSearchproducts({
|
||
name: keyWords,
|
||
});
|
||
return (
|
||
data?.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.sku,
|
||
};
|
||
}) || []
|
||
);
|
||
} catch (error) {
|
||
return [];
|
||
}
|
||
}}
|
||
name="productSku"
|
||
label="产品"
|
||
width="lg"
|
||
placeholder="请选择产品"
|
||
tooltip="至少输入3个字符"
|
||
fieldProps={{
|
||
showSearch: true,
|
||
filterOption: false,
|
||
}}
|
||
transform={(value) => {
|
||
return value?.value || value;
|
||
}}
|
||
debounceTime={300} // 防抖，减少请求频率
|
||
rules={[{ required: true, message: '请选择产品' }]}
|
||
onChange={(_, option) => {
|
||
form.setFieldValue(
|
||
['items', fields.key, 'productName'],
|
||
option?.title,
|
||
);
|
||
}}
|
||
/>
|
||
<ProFormText name="productName" label="产品名称" hidden={true} />
|
||
<ProFormDigit
|
||
name="quantity"
|
||
label="数量"
|
||
placeholder="请输入数量"
|
||
rules={[{ required: true, message: '请输入数量' }]}
|
||
fieldProps={{
|
||
precision: 0,
|
||
}}
|
||
/>
|
||
<ProFormDigit
|
||
name="price"
|
||
label="价格"
|
||
placeholder="请输入价格"
|
||
rules={[{ required: true, message: '请输入价格' }]}
|
||
fieldProps={{
|
||
precision: 2,
|
||
}}
|
||
/>
|
||
</ProForm.Group>
|
||
</div>
|
||
)}
|
||
</ProFormList>
|
||
</DrawerForm>
|
||
);
|
||
};
|
||
|
||
export default PurchaseOrderPage;
|