591 lines
18 KiB
TypeScript
591 lines
18 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
||
import {
|
||
Button,
|
||
DatePicker,
|
||
Descriptions,
|
||
Drawer,
|
||
Dropdown,
|
||
Empty,
|
||
Form,
|
||
InputNumber,
|
||
message,
|
||
Modal,
|
||
Popconfirm,
|
||
Space,
|
||
Table,
|
||
Tabs,
|
||
Tag,
|
||
Typography,
|
||
} from 'antd';
|
||
import {
|
||
DownloadOutlined,
|
||
PlusOutlined,
|
||
SendOutlined,
|
||
SplitCellsOutlined,
|
||
} from '@ant-design/icons';
|
||
import type { TableProps } from 'antd';
|
||
import dayjs from 'dayjs';
|
||
import XinTable from '@/components/XinTable';
|
||
import type {
|
||
XinTableColumn,
|
||
XinTableInstance,
|
||
XinTableProps,
|
||
} from '@/components/XinTable/typings.ts';
|
||
import type IPurchaseOrder from '@/domain/iPurchaseOrder.ts';
|
||
import type {
|
||
IAllocationAggRow,
|
||
IPurchaseOrderItem,
|
||
} from '@/domain/iPurchaseOrder.ts';
|
||
import { PURCHASE_STATUS_MAP } from '@/domain/iPurchaseOrder.ts';
|
||
import {
|
||
allocatePurchase,
|
||
exportPurchase,
|
||
generatePurchase,
|
||
getAllocation,
|
||
sendPurchaseItem,
|
||
updatePurchaseItem,
|
||
} from '@/api/purchase/order.ts';
|
||
import { Get } from '@/api/common/table.ts';
|
||
import AuthButton from '@/components/AuthButton';
|
||
|
||
const { Title, Text } = Typography;
|
||
|
||
/** 行内编辑中的明细值 */
|
||
interface EditingItem {
|
||
price: number;
|
||
quantity: number;
|
||
weight: number;
|
||
}
|
||
|
||
/**
|
||
* 采购单管理（C1 汇总生成 / C2-C3 导出 / C4 明细修改 / C5-C6 发送 / D3 分摊）
|
||
*/
|
||
const PurchaseOrderPage: React.FC = () => {
|
||
const tableRef = useRef<XinTableInstance<IPurchaseOrder>>(null);
|
||
|
||
// 生成采购单
|
||
const [generateOpen, setGenerateOpen] = useState(false);
|
||
const [generateLoading, setGenerateLoading] = useState(false);
|
||
const [generateForm] = Form.useForm<{ purchase_date: dayjs.Dayjs }>();
|
||
|
||
// 详情抽屉
|
||
const [detailOpen, setDetailOpen] = useState(false);
|
||
const [detail, setDetail] = useState<IPurchaseOrder | null>(null);
|
||
const [detailLoading, setDetailLoading] = useState(false);
|
||
const [editing, setEditing] = useState<Record<number, EditingItem>>({});
|
||
const [savingItemId, setSavingItemId] = useState<number | null>(null);
|
||
|
||
// 分摊
|
||
const [allocating, setAllocating] = useState(false);
|
||
const [allocation, setAllocation] = useState<{
|
||
byStore: IAllocationAggRow[];
|
||
byProduct: IAllocationAggRow[];
|
||
total: number;
|
||
} | null>(null);
|
||
|
||
const loadDetail = async (id: number) => {
|
||
setDetailLoading(true);
|
||
try {
|
||
const res = await Get<IPurchaseOrder>('/purchase/order', id);
|
||
const purchase = res.data.data ?? null;
|
||
setDetail(purchase);
|
||
const editingMap: Record<number, EditingItem> = {};
|
||
purchase?.items?.forEach((item) => {
|
||
if (item.id !== undefined) {
|
||
editingMap[item.id] = {
|
||
price: Number(item.price ?? 0),
|
||
quantity: Number(item.quantity ?? 0),
|
||
weight: Number(item.weight ?? 0),
|
||
};
|
||
}
|
||
});
|
||
setEditing(editingMap);
|
||
} finally {
|
||
setDetailLoading(false);
|
||
}
|
||
};
|
||
|
||
const openDetail = async (id: number) => {
|
||
setAllocation(null);
|
||
setDetailOpen(true);
|
||
await loadDetail(id);
|
||
await loadAllocation(id);
|
||
};
|
||
|
||
const loadAllocation = async (id: number) => {
|
||
try {
|
||
const res = await getAllocation(id);
|
||
const data = res.data.data;
|
||
if (data) {
|
||
setAllocation({
|
||
byStore: data.by_store ?? [],
|
||
byProduct: data.by_product ?? [],
|
||
total: data.total_amount ?? 0,
|
||
});
|
||
}
|
||
} catch {
|
||
// 未分摊时忽略
|
||
}
|
||
};
|
||
|
||
const handleGenerate = async (values: { purchase_date: dayjs.Dayjs }) => {
|
||
setGenerateLoading(true);
|
||
try {
|
||
const res = await generatePurchase(values.purchase_date.format('YYYY-MM-DD'));
|
||
message.success(`采购单 ${res.data.data?.purchase_no} 已生成`);
|
||
setGenerateOpen(false);
|
||
await tableRef.current?.reload();
|
||
await openDetail(res.data.data!.id);
|
||
} finally {
|
||
setGenerateLoading(false);
|
||
}
|
||
};
|
||
|
||
const isItemDirty = (item: IPurchaseOrderItem): boolean => {
|
||
const edit = editing[item.id!];
|
||
if (!edit) {
|
||
return false;
|
||
}
|
||
return (
|
||
edit.price !== Number(item.price ?? 0) ||
|
||
edit.quantity !== Number(item.quantity ?? 0) ||
|
||
edit.weight !== Number(item.weight ?? 0)
|
||
);
|
||
};
|
||
|
||
const saveItem = async (item: IPurchaseOrderItem) => {
|
||
const edit = editing[item.id!];
|
||
if (!edit || !isItemDirty(item)) {
|
||
return;
|
||
}
|
||
setSavingItemId(item.id!);
|
||
try {
|
||
const res = await updatePurchaseItem(item.id!, {
|
||
price: edit.price,
|
||
quantity: edit.quantity,
|
||
weight: edit.weight,
|
||
});
|
||
message.success(`金额已重算：¥${res.data.data?.amount}`);
|
||
await loadDetail(detail!.id!);
|
||
} finally {
|
||
setSavingItemId(null);
|
||
}
|
||
};
|
||
|
||
const handleSend = async (item: IPurchaseOrderItem) => {
|
||
await sendPurchaseItem(item.id!);
|
||
message.success('已发送给供应商');
|
||
await loadDetail(detail!.id!);
|
||
await tableRef.current?.reload();
|
||
};
|
||
|
||
const handleAllocate = async () => {
|
||
setAllocating(true);
|
||
try {
|
||
const res = await allocatePurchase(detail!.id!);
|
||
message.success(`分摊完成，共 ${res.data.data?.count} 条记录`);
|
||
await loadAllocation(detail!.id!);
|
||
} finally {
|
||
setAllocating(false);
|
||
}
|
||
};
|
||
|
||
const itemColumns: TableProps<IPurchaseOrderItem>['columns'] = [
|
||
{ title: '序号', dataIndex: 'sort', width: 60, align: 'center' },
|
||
{ title: '品名', dataIndex: 'product_name', width: 130 },
|
||
{ title: '规格', dataIndex: 'product_spec', width: 110, render: (v) => v || '-' },
|
||
{
|
||
title: '供应商',
|
||
dataIndex: 'supplier',
|
||
width: 130,
|
||
render: (_, record) => record.supplier?.name ?? '-',
|
||
},
|
||
{
|
||
title: '单价',
|
||
dataIndex: 'price',
|
||
width: 130,
|
||
render: (_, record) => (
|
||
<InputNumber
|
||
size="small"
|
||
min={0}
|
||
precision={2}
|
||
prefix="¥"
|
||
value={editing[record.id!]?.price}
|
||
onChange={(v) =>
|
||
setEditing((prev) => ({
|
||
...prev,
|
||
[record.id!]: { ...prev[record.id!], price: v ?? 0 },
|
||
}))
|
||
}
|
||
className="!w-24"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: '数量',
|
||
dataIndex: 'quantity',
|
||
width: 120,
|
||
render: (_, record) => (
|
||
<InputNumber
|
||
size="small"
|
||
min={0}
|
||
precision={2}
|
||
value={editing[record.id!]?.quantity}
|
||
onChange={(v) =>
|
||
setEditing((prev) => ({
|
||
...prev,
|
||
[record.id!]: { ...prev[record.id!], quantity: v ?? 0 },
|
||
}))
|
||
}
|
||
className="!w-20"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: '实际称重',
|
||
dataIndex: 'weight',
|
||
width: 130,
|
||
render: (_, record) => (
|
||
<InputNumber
|
||
size="small"
|
||
min={0}
|
||
precision={3}
|
||
value={editing[record.id!]?.weight}
|
||
onChange={(v) =>
|
||
setEditing((prev) => ({
|
||
...prev,
|
||
[record.id!]: { ...prev[record.id!], weight: v ?? 0 },
|
||
}))
|
||
}
|
||
className="!w-24"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'amount',
|
||
width: 100,
|
||
align: 'right',
|
||
render: (v) => <Text strong>¥{String(v)}</Text>,
|
||
},
|
||
{
|
||
title: '发送状态',
|
||
dataIndex: 'is_sent',
|
||
width: 150,
|
||
render: (_, record) =>
|
||
record.is_sent === 1 ? (
|
||
<Tag color="success">
|
||
已发送
|
||
{record.sent_at ? ` ${record.sent_at}` : ''}
|
||
</Tag>
|
||
) : (
|
||
<Tag>未发送</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 150,
|
||
fixed: 'right',
|
||
render: (_, record) => (
|
||
<Space size={4}>
|
||
<AuthButton auth="purchase.order.update">
|
||
<Button
|
||
size="small"
|
||
type="link"
|
||
disabled={!isItemDirty(record)}
|
||
loading={savingItemId === record.id}
|
||
onClick={() => saveItem(record)}
|
||
>
|
||
保存
|
||
</Button>
|
||
</AuthButton>
|
||
{record.is_sent !== 1 ? (
|
||
<AuthButton auth="purchase.order.send">
|
||
<Popconfirm
|
||
title="确认发送该明细给供应商？"
|
||
onConfirm={() => handleSend(record)}
|
||
>
|
||
<Button size="small" type="link" icon={<SendOutlined />}>
|
||
发送
|
||
</Button>
|
||
</Popconfirm>
|
||
</AuthButton>
|
||
) : null}
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
const aggColumns = (nameTitle: string): TableProps<IAllocationAggRow>['columns'] => [
|
||
{
|
||
title: nameTitle,
|
||
key: 'name',
|
||
render: (_, row) => row.store_name ?? row.product_name ?? '-',
|
||
},
|
||
{ title: '数量', dataIndex: 'quantity', align: 'right' },
|
||
{ title: '重量', dataIndex: 'weight', align: 'right' },
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'amount',
|
||
align: 'right',
|
||
render: (v) => `¥${v}`,
|
||
},
|
||
];
|
||
|
||
const columns: XinTableColumn<IPurchaseOrder>[] = [
|
||
{
|
||
title: '采购单号',
|
||
dataIndex: 'purchase_no',
|
||
valueType: 'text',
|
||
hideInForm: true,
|
||
render: (_, record) => <Text copyable={{ text: record.purchase_no }}>{record.purchase_no}</Text>,
|
||
},
|
||
{
|
||
title: '采购日期',
|
||
dataIndex: 'purchase_date',
|
||
valueType: 'dateRange',
|
||
hideInForm: true,
|
||
align: 'center',
|
||
render: (_, record) => record.purchase_date,
|
||
},
|
||
{
|
||
title: '预估金额',
|
||
dataIndex: 'estimate_amount',
|
||
hideInForm: true,
|
||
hideInSearch: true,
|
||
align: 'right',
|
||
render: (_, record) => `¥${record.estimate_amount}`,
|
||
},
|
||
{
|
||
title: '实际金额',
|
||
dataIndex: 'actual_amount',
|
||
hideInForm: true,
|
||
hideInSearch: true,
|
||
align: 'right',
|
||
render: (_, record) =>
|
||
Number(record.actual_amount) > 0 ? (
|
||
<Text strong>¥{record.actual_amount}</Text>
|
||
) : (
|
||
<Text type="secondary">未录入</Text>
|
||
),
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
valueType: 'select',
|
||
hideInForm: true,
|
||
fieldProps: {
|
||
options: Object.entries(PURCHASE_STATUS_MAP).map(([value, item]) => ({
|
||
value: Number(value),
|
||
label: item.text,
|
||
})),
|
||
},
|
||
render: (_, record) => {
|
||
const item = PURCHASE_STATUS_MAP[record.status ?? 0];
|
||
return <Tag color={item?.color}>{item?.text}</Tag>;
|
||
},
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '制单人',
|
||
dataIndex: 'operator',
|
||
hideInForm: true,
|
||
hideInSearch: true,
|
||
render: (_, record) => record.operator?.nickname ?? '-',
|
||
align: 'center',
|
||
},
|
||
];
|
||
|
||
const operateRender: XinTableProps<IPurchaseOrder>['operateRender'] = (record) => [
|
||
<Button key="detail" size="small" onClick={() => openDetail(record.id!)}>
|
||
详情
|
||
</Button>,
|
||
<AuthButton key="export" auth="purchase.order.export">
|
||
<Dropdown
|
||
menu={{
|
||
items: [
|
||
{ key: 'all-xlsx', label: '全品类 Excel', onClick: () => exportPurchase(record.id!, 'all', 'xlsx') },
|
||
{ key: 'all-pdf', label: '全品类 PDF', onClick: () => exportPurchase(record.id!, 'all', 'pdf') },
|
||
{ key: 'category-xlsx', label: '蔬果分类 Excel', onClick: () => exportPurchase(record.id!, 'category', 'xlsx') },
|
||
{ key: 'category-pdf', label: '蔬果分类 PDF', onClick: () => exportPurchase(record.id!, 'category', 'pdf') },
|
||
],
|
||
}}
|
||
>
|
||
<Button size="small" icon={<DownloadOutlined />} />
|
||
</Dropdown>
|
||
</AuthButton>,
|
||
];
|
||
|
||
const tableProps: XinTableProps<IPurchaseOrder> = {
|
||
api: '/purchase/order',
|
||
columns,
|
||
rowKey: 'id',
|
||
accessName: 'purchase.order',
|
||
tableRef,
|
||
operateRender,
|
||
formProps: false,
|
||
actionBarRender: (dom) => [
|
||
<AuthButton key="generate" auth="purchase.order.generate">
|
||
<Button type="primary" icon={<PlusOutlined />} onClick={() => setGenerateOpen(true)}>
|
||
生成采购单
|
||
</Button>
|
||
</AuthButton>,
|
||
dom.search,
|
||
dom.keywordSearch,
|
||
],
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="mb-5">
|
||
<Title level={3}>采购单</Title>
|
||
<Text type="secondary">
|
||
按门店订单汇总生成；录入实际称重/单价后执行金额分摊（按订货比例摊到各门店，尾差修正确保金额守恒）。
|
||
</Text>
|
||
</div>
|
||
<XinTable<IPurchaseOrder> {...tableProps} />
|
||
|
||
{/* 生成采购单 */}
|
||
<Modal
|
||
title="生成采购单"
|
||
open={generateOpen}
|
||
onCancel={() => setGenerateOpen(false)}
|
||
onOk={() => generateForm.submit()}
|
||
confirmLoading={generateLoading}
|
||
okText="确认生成"
|
||
destroyOnHidden
|
||
>
|
||
<div className="py-2 text-gray-500">
|
||
将汇总所选日期全部「待汇总」订单，按商品聚合生成采购单（估算单价取最低等级价）。
|
||
</div>
|
||
<Form
|
||
form={generateForm}
|
||
layout="vertical"
|
||
onFinish={handleGenerate}
|
||
initialValues={{ purchase_date: dayjs() }}
|
||
>
|
||
<Form.Item
|
||
label="采购日期"
|
||
name="purchase_date"
|
||
rules={[{ required: true, message: '请选择采购日期' }]}
|
||
>
|
||
<DatePicker className="w-full" allowClear={false} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 采购单详情 */}
|
||
<Drawer
|
||
title={detail ? `采购单 ${detail.purchase_no}` : '采购单详情'}
|
||
open={detailOpen}
|
||
onClose={() => setDetailOpen(false)}
|
||
width={1080}
|
||
loading={detailLoading}
|
||
>
|
||
{detail ? (
|
||
<>
|
||
<Descriptions column={3} size="small" bordered>
|
||
<Descriptions.Item label="采购日期">{detail.purchase_date}</Descriptions.Item>
|
||
<Descriptions.Item label="状态">
|
||
<Tag color={PURCHASE_STATUS_MAP[detail.status ?? 0]?.color}>
|
||
{PURCHASE_STATUS_MAP[detail.status ?? 0]?.text}
|
||
</Tag>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="制单人">
|
||
{detail.operator?.nickname ?? '-'}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="预估金额">¥{detail.estimate_amount}</Descriptions.Item>
|
||
<Descriptions.Item label="实际金额">¥{detail.actual_amount}</Descriptions.Item>
|
||
<Descriptions.Item label="总重量">{detail.total_weight}</Descriptions.Item>
|
||
</Descriptions>
|
||
|
||
<Tabs
|
||
className="mt-4"
|
||
items={[
|
||
{
|
||
key: 'items',
|
||
label: `采购明细（${detail.items?.length ?? 0}）`,
|
||
children: (
|
||
<>
|
||
<div className="mb-2 text-gray-500">
|
||
录入实际称重与单价后点击行内「保存」，金额由后端重算（称重>0 按 称重×单价，否则按 数量×单价）。
|
||
</div>
|
||
<Table<IPurchaseOrderItem>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={itemColumns}
|
||
dataSource={detail.items ?? []}
|
||
pagination={false}
|
||
scroll={{ x: 1200 }}
|
||
/>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
key: 'allocation',
|
||
label: '金额分摊',
|
||
children: (
|
||
<>
|
||
<Space className="mb-3">
|
||
<AuthButton auth="purchase.order.allocate">
|
||
<Popconfirm
|
||
title="执行金额分摊？"
|
||
description="按订货比例将实际金额摊到各门店单品，重复执行会先清空旧分摊记录。"
|
||
onConfirm={handleAllocate}
|
||
>
|
||
<Button
|
||
type="primary"
|
||
icon={<SplitCellsOutlined />}
|
||
loading={allocating}
|
||
>
|
||
执行分摊
|
||
</Button>
|
||
</Popconfirm>
|
||
</AuthButton>
|
||
{allocation ? (
|
||
<Text type="secondary">
|
||
分摊总额：¥{allocation.total}
|
||
</Text>
|
||
) : null}
|
||
</Space>
|
||
{allocation && (allocation.byStore.length > 0 || allocation.byProduct.length > 0) ? (
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<Title level={5}>按门店</Title>
|
||
<Table<IAllocationAggRow>
|
||
rowKey={(row) => String(row.store_id)}
|
||
size="small"
|
||
columns={aggColumns('门店')}
|
||
dataSource={allocation.byStore}
|
||
pagination={false}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Title level={5}>按商品</Title>
|
||
<Table<IAllocationAggRow>
|
||
rowKey={(row) => String(row.product_id)}
|
||
size="small"
|
||
columns={aggColumns('商品')}
|
||
dataSource={allocation.byProduct}
|
||
pagination={false}
|
||
/>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<Empty description="暂无分摊记录，请先录入实际金额后执行分摊" />
|
||
)}
|
||
</>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</>
|
||
) : null}
|
||
</Drawer>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default PurchaseOrderPage;
|