615 lines
24 KiB
JavaScript
615 lines
24 KiB
JavaScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
Alert, Button, Card, Col, Dropdown, Image, Input, Modal, Row, Select,
|
||
Space, Spin, Statistic, Switch, Table, Tabs, Tag, Tooltip, Typography, message,
|
||
} from 'antd';
|
||
import { DownloadOutlined, ReloadOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
|
||
import { SycmPage } from '../../components/Common';
|
||
import { getModularStockList, getModularStockFilters, getPurchaseInTransitList, syncModularStock } from '../../api/modularStockMonitor';
|
||
import { exportTableFile } from '../../utils/tableExport';
|
||
import './style.css';
|
||
|
||
const { Title, Text } = Typography;
|
||
|
||
const WARNING_COLOR = { 缺货: 'red', 预警: 'orange', 正常: 'green' };
|
||
|
||
// 表头带口径说明，避免把「真实值 0」误读成「没数据」
|
||
const TipTitle = ({ title, tip }) => (
|
||
<Tooltip title={tip}>
|
||
<span className="msm-th-tip">{title}</span>
|
||
</Tooltip>
|
||
);
|
||
|
||
const number = (value, digits = 2) => value === null || value === undefined || value === ''
|
||
? '--' : Number(value).toLocaleString('zh-CN', { minimumFractionDigits: digits, maximumFractionDigits: digits });
|
||
const int = (value) => number(value, 0);
|
||
const text = (value) => (value === null || value === undefined || value === '' ? '--' : value);
|
||
|
||
const toOptions = (list = []) => (Array.isArray(list) ? list : [])
|
||
.filter(Boolean)
|
||
.map((value) => ({ value, label: value }));
|
||
|
||
const EMPTY_FILTERS = { keyword: '', category: '', warningLevel: '', mkhStatus: '' };
|
||
|
||
const AccessoryStockPanel = () => {
|
||
const [filters, setFilters] = useState(EMPTY_FILTERS);
|
||
const [onlyWarning, setOnlyWarning] = useState(false);
|
||
const [filterOptions, setFilterOptions] = useState({ categories: [], warningLevels: [] });
|
||
const [data, setData] = useState({ rows: [], total: 0, page: 1, pageSize: 50, summary: {}, monitorDate: null });
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [page, setPage] = useState(1);
|
||
const [pageSize, setPageSize] = useState(50);
|
||
const [sorter, setSorter] = useState({ field: 'realtimeStock', order: 'DESC' });
|
||
const tableWrapRef = useRef(null);
|
||
const [bodyHeight, setBodyHeight] = useState(420);
|
||
|
||
// 采购在途明细弹窗状态
|
||
const [transitVisible, setTransitVisible] = useState(false);
|
||
const [transitData, setTransitData] = useState({ rows: [], total: 0 });
|
||
const [transitLoading, setTransitLoading] = useState(false);
|
||
const [transitPage, setTransitPage] = useState(1);
|
||
const [transitPageSize, setTransitPageSize] = useState(50);
|
||
const [transitKeyword, setTransitKeyword] = useState('');
|
||
const [transitSorter, setTransitSorter] = useState({ field: 'transitQty', order: 'DESC' });
|
||
|
||
// 表体高度按「表格顶部 → 内容区底部」实测计算，替代纯 CSS calc：
|
||
// 不同显示器缩放（125%/150%）下 100vh 偏小，写死的 calc 会把表格压到只剩一两行
|
||
useEffect(() => {
|
||
const el = tableWrapRef.current;
|
||
if (!el) return undefined;
|
||
|
||
// 分页器 + 卡片内边距 + 横向滚动条余量
|
||
const RESERVE_BELOW = 104;
|
||
|
||
const measure = () => {
|
||
const scroller = el.closest('.planning-subsystem-content');
|
||
const elRect = el.getBoundingClientRect();
|
||
let available;
|
||
if (scroller) {
|
||
const scrollerRect = scroller.getBoundingClientRect();
|
||
// 加回 scrollTop，抵消滚动对 getBoundingClientRect 的影响
|
||
available = scrollerRect.bottom - elRect.top - RESERVE_BELOW + scroller.scrollTop;
|
||
} else {
|
||
available = window.innerHeight - elRect.top - RESERVE_BELOW;
|
||
}
|
||
const next = Math.max(240, Math.round(available));
|
||
setBodyHeight((prev) => (Math.abs(prev - next) > 1 ? next : prev));
|
||
};
|
||
|
||
measure();
|
||
const ro = new ResizeObserver(measure);
|
||
ro.observe(el);
|
||
if (el.parentElement) ro.observe(el.parentElement);
|
||
window.addEventListener('resize', measure);
|
||
return () => {
|
||
ro.disconnect();
|
||
window.removeEventListener('resize', measure);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
getModularStockFilters()
|
||
.then((result) => {
|
||
const payload = result?.data || {};
|
||
if (cancelled) return;
|
||
setFilterOptions({
|
||
categories: payload.categories || [],
|
||
warningLevels: payload.warningLevels || ['缺货', '预警', '正常'],
|
||
mkhStatuses: payload.mkhStatuses || ['已配置MKH', '未配置MKH'],
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
return () => { cancelled = true; };
|
||
}, []);
|
||
|
||
const query = useMemo(() => {
|
||
const params = {
|
||
page,
|
||
pageSize,
|
||
sortField: sorter.field,
|
||
sortOrder: sorter.order,
|
||
};
|
||
Object.entries(filters).forEach(([key, value]) => {
|
||
if (value) params[key] = value;
|
||
});
|
||
if (onlyWarning) params.onlyWarning = '1';
|
||
return params;
|
||
}, [page, pageSize, sorter, filters, onlyWarning]);
|
||
|
||
const load = useCallback(async () => {
|
||
setLoading(true);
|
||
setError('');
|
||
try {
|
||
const result = await getModularStockList(query);
|
||
setData(result?.data || { rows: [], total: 0, summary: {} });
|
||
} catch (requestError) {
|
||
setError(requestError?.response?.data?.error || requestError?.message || '加载配件库存监控数据失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [query]);
|
||
|
||
useEffect(() => { load(); }, [load]);
|
||
|
||
const changeFilter = (key) => (value) => {
|
||
setFilters((old) => ({ ...old, [key]: value || '' }));
|
||
setPage(1);
|
||
};
|
||
const resetFilters = () => {
|
||
setFilters(EMPTY_FILTERS);
|
||
setOnlyWarning(false);
|
||
setPage(1);
|
||
};
|
||
|
||
// 点击顶部统计卡片 → 自动设置对应筛选条件并滚动到表格明细
|
||
const applySummaryFilter = (type) => () => {
|
||
const next = { ...EMPTY_FILTERS };
|
||
let warning = false;
|
||
if (type === 'outOfStock') {
|
||
next.warningLevel = '缺货';
|
||
warning = true;
|
||
} else if (type === 'lowStockDays') {
|
||
next.warningLevel = '预警';
|
||
warning = true;
|
||
} else if (type === 'configured') {
|
||
next.mkhStatus = '已配置MKH';
|
||
} else if (type === 'unconfigured') {
|
||
next.mkhStatus = '未配置MKH';
|
||
}
|
||
setFilters(next);
|
||
setOnlyWarning(warning);
|
||
setPage(1);
|
||
setTimeout(() => {
|
||
tableWrapRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, 0);
|
||
};
|
||
|
||
// 打开采购在途明细弹窗
|
||
const openPurchaseTransit = () => {
|
||
setTransitVisible(true);
|
||
setTransitPage(1);
|
||
setTransitKeyword('');
|
||
setTransitSorter({ field: 'transitQty', order: 'DESC' });
|
||
loadPurchaseTransit(1, '', { field: 'transitQty', order: 'DESC' });
|
||
};
|
||
|
||
const loadPurchaseTransit = useCallback(async (p = transitPage, kw = transitKeyword, sort = transitSorter) => {
|
||
setTransitLoading(true);
|
||
try {
|
||
const result = await getPurchaseInTransitList({
|
||
page: p,
|
||
pageSize: transitPageSize,
|
||
keyword: kw,
|
||
sortField: sort.field,
|
||
sortOrder: sort.order,
|
||
});
|
||
setTransitData(result?.data || { rows: [], total: 0 });
|
||
} catch (err) {
|
||
message.error(err?.response?.data?.error || err?.message || '加载采购在途明细失败');
|
||
} finally {
|
||
setTransitLoading(false);
|
||
}
|
||
}, [transitPage, transitPageSize, transitKeyword, transitSorter]);
|
||
|
||
const columns = useMemo(() => [
|
||
{
|
||
title: '图片',
|
||
dataIndex: 'imageUrl',
|
||
width: 56,
|
||
fixed: 'left',
|
||
exportable: false,
|
||
render: (value) => (value
|
||
? <Image src={value} width={36} height={36} style={{ objectFit: 'cover', borderRadius: 4 }} placeholder />
|
||
: <span className="msm-muted">--</span>),
|
||
},
|
||
{
|
||
title: '预警',
|
||
dataIndex: 'warningLevel',
|
||
width: 76,
|
||
sorter: true,
|
||
render: (value) => (value
|
||
? <Tag color={WARNING_COLOR[value] || 'default'}>{value}</Tag>
|
||
: <span className="msm-muted">--</span>),
|
||
},
|
||
{
|
||
title: <TipTitle
|
||
title="状态"
|
||
tip="该商品（配件）是否作为「配件商品编码」出现在聚水潭 SKU 级 BOM 维护中、被某 MKH 模块化成品引用。已配置MKH = 业务库 rpt.jst_skuBomItem 中 map_outer_sku_id 命中该商品编码、且父项 sku_id 以 MKH 开头（被某 MKH 成品 BOM 引用为配件）；未配置MKH = 未出现在任何 MKH 成品 BOM 的配件清单中"
|
||
/>,
|
||
dataIndex: 'mkhStatus',
|
||
width: 110,
|
||
sorter: true,
|
||
render: (value) => {
|
||
const v = value || '未配置MKH';
|
||
return v === '已配置MKH'
|
||
? <Tag color="green">{v}</Tag>
|
||
: <Tag color="default">{v}</Tag>;
|
||
},
|
||
},
|
||
{
|
||
title: '商品编码',
|
||
dataIndex: 'skuId',
|
||
width: 176,
|
||
fixed: 'left',
|
||
sorter: true,
|
||
render: (value) => <span className="msm-sku">{text(value)}</span>,
|
||
},
|
||
{
|
||
// 必须显式给 width：antd 在 scroll.x 场景下会把无宽度列压成 0 宽（此前该列不可见的原因）
|
||
title: '商品名称',
|
||
dataIndex: 'productName',
|
||
width: 220,
|
||
ellipsis: true,
|
||
sorter: true,
|
||
render: (value) => <Tooltip title={value}>{text(value)}</Tooltip>,
|
||
},
|
||
{
|
||
title: <TipTitle
|
||
title="当日入库库存"
|
||
tip="监控日（pm_stockMonitor 最新快照日）的采购到货入库数量，取自 jst_purchaseItem.inQty。业务库无出入库流水表，0 表示该 SKU 当日无到货"
|
||
/>,
|
||
dataIndex: 'inQtyToday',
|
||
width: 116,
|
||
align: 'right',
|
||
render: (value) => (value === null || value === undefined
|
||
? <span className="msm-muted">--</span>
|
||
: int(value)),
|
||
},
|
||
{
|
||
title: <TipTitle
|
||
title="当日出库库存"
|
||
tip="监控日的最近一日发货量，取自 pm_stockMonitor.nearSecondSale。业务库无出入库流水表，0 表示该 SKU 当日无发货"
|
||
/>,
|
||
dataIndex: 'outQtyToday',
|
||
width: 116,
|
||
align: 'right',
|
||
render: (value) => (value === null || value === undefined
|
||
? <span className="msm-muted">--</span>
|
||
: int(value)),
|
||
},
|
||
{
|
||
title: <TipTitle
|
||
title="实时库存"
|
||
tip="优先取目标仓 jst_inventoryInfo；该表为 0 或缺少记录、但箱及仓位库存已有正库存时，用同仓 jst_packInventoryInfo 合计补齐"
|
||
/>,
|
||
dataIndex: 'realtimeStock',
|
||
width: 96,
|
||
align: 'right',
|
||
sorter: true,
|
||
render: int,
|
||
},
|
||
{
|
||
title: <TipTitle
|
||
title="采购在途数量"
|
||
tip="采购单中『已下单 − 已入库』的数量，取自 jst_purchaseItem.qty − inQty；它与实时库存独立，上游采购到货字段滞后时可能同时显示库存和在途"
|
||
/>,
|
||
dataIndex: 'purchaseTransit',
|
||
width: 120,
|
||
align: 'right',
|
||
render: (value) => (value === null || value === undefined || Number(value) === 0
|
||
? <span className="msm-muted">--</span>
|
||
: int(value)),
|
||
},
|
||
{
|
||
title: <TipTitle
|
||
title="仓位"
|
||
tip="取自聚水潭「箱及仓位库存」jst_packInventoryInfo 的真货位（bin），同商品多箱时显示库存最大的主货位；该表查不到才显示「未维护」"
|
||
/>,
|
||
dataIndex: 'location',
|
||
width: 88,
|
||
sorter: true,
|
||
render: (value) => (value
|
||
? <span>{value}</span>
|
||
: <Tooltip title="上游未提供库位数据">
|
||
<span className="msm-muted">未维护</span>
|
||
</Tooltip>),
|
||
},
|
||
{
|
||
title: '近15天日均发货量',
|
||
dataIndex: 'avgShip15d',
|
||
width: 138,
|
||
align: 'right',
|
||
sorter: true,
|
||
render: (value) => number(value),
|
||
},
|
||
{
|
||
title: '库存可用天数',
|
||
dataIndex: 'stockDays',
|
||
width: 116,
|
||
align: 'right',
|
||
sorter: true,
|
||
render: (value) => number(value, 1),
|
||
},
|
||
{
|
||
title: '所在仓库',
|
||
dataIndex: 'warehouse',
|
||
width: 200,
|
||
ellipsis: true,
|
||
sorter: true,
|
||
render: (value) => <Tooltip title={value}>{text(value)}</Tooltip>,
|
||
},
|
||
], []);
|
||
|
||
const exportColumns = useMemo(
|
||
() => columns.filter((column) => column.exportable !== false),
|
||
[columns]
|
||
);
|
||
|
||
const handleExport = async (format) => {
|
||
if (!data.rows.length) {
|
||
message.warning('暂无数据可导出');
|
||
return;
|
||
}
|
||
try {
|
||
await exportTableFile(
|
||
format,
|
||
`配件库存监控_${data.monitorDate || '最新'}`,
|
||
exportColumns,
|
||
data.rows,
|
||
'配件库存监控'
|
||
);
|
||
message.success(`已导出 ${data.rows.length} 条数据（${format.toUpperCase()}）`);
|
||
} catch (exportError) {
|
||
message.error(exportError?.message || '导出失败');
|
||
}
|
||
};
|
||
|
||
// 手动同步：后端重新取最新监控日（清服务端缓存）后再拉一次列表，
|
||
// 拿到的是副本库当前最新快照；可随时点击，不受 24 点定时任务限制
|
||
const handleSync = async () => {
|
||
setSyncing(true);
|
||
try {
|
||
await syncModularStock();
|
||
await load();
|
||
message.success('已同步最新数据');
|
||
} catch (syncError) {
|
||
message.error(syncError?.response?.data?.error || syncError?.message || '同步失败');
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
};
|
||
|
||
const summary = data.summary || {};
|
||
|
||
return (
|
||
<>
|
||
<Card className="msm-filter-card" bordered={false}>
|
||
<Space wrap size={[12, 12]}>
|
||
<Input
|
||
allowClear
|
||
prefix={<SearchOutlined />}
|
||
placeholder="商品编码 / 名称"
|
||
value={filters.keyword}
|
||
onChange={(e) => changeFilter('keyword')(e.target.value)}
|
||
style={{ width: 220 }}
|
||
/>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
placeholder="品类"
|
||
options={toOptions(filterOptions.categories)}
|
||
value={filters.category || undefined}
|
||
onChange={changeFilter('category')}
|
||
style={{ width: 200 }}
|
||
/>
|
||
<Select
|
||
allowClear
|
||
placeholder="预警等级"
|
||
options={toOptions(filterOptions.warningLevels)}
|
||
value={filters.warningLevel || undefined}
|
||
onChange={changeFilter('warningLevel')}
|
||
style={{ width: 140 }}
|
||
/>
|
||
<Select
|
||
allowClear
|
||
placeholder="MKH 配置状态"
|
||
options={toOptions(filterOptions.mkhStatuses)}
|
||
value={filters.mkhStatus || undefined}
|
||
onChange={changeFilter('mkhStatus')}
|
||
style={{ width: 160 }}
|
||
/>
|
||
<Space size={6}>
|
||
<Switch checked={onlyWarning} onChange={(checked) => { setOnlyWarning(checked); setPage(1); }} size="small" />
|
||
<Text type="secondary">仅看缺货 / 预警</Text>
|
||
</Space>
|
||
<Button onClick={resetFilters}>重置</Button>
|
||
<Button icon={<ReloadOutlined />} onClick={load} loading={loading}>刷新数据</Button>
|
||
<Tooltip title="立即重新拉取副本库最新数据（清服务端缓存后重查），可随时点击，不必等凌晨的定时刷新">
|
||
<Button type="primary" icon={<SyncOutlined />} onClick={handleSync} loading={syncing}>同步最新数据</Button>
|
||
</Tooltip>
|
||
</Space>
|
||
</Card>
|
||
|
||
{error ? <Alert type="error" showIcon message={error} action={<Button size="small" onClick={load}>重试</Button>} /> : null}
|
||
|
||
<Row gutter={[12, 12]} className="msm-summary-row">
|
||
<Col xs={12} md={4}><Card bordered={false} className="msm-summary-card"><Statistic title="SKU 总数" value={summary.skuCount || 0} /></Card></Col>
|
||
<Col xs={12} md={4}>
|
||
<Card bordered={false} className="msm-summary-card is-red is-clickable" onClick={applySummaryFilter('outOfStock')}>
|
||
<Statistic title="缺货 SKU" value={summary.outOfStockCount || 0} />
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Card bordered={false} className="msm-summary-card is-orange is-clickable" onClick={applySummaryFilter('lowStockDays')}>
|
||
<Statistic title="可用天数不足" value={summary.lowStockDaysCount || 0} suffix="个 SKU" />
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} md={4}><Card bordered={false} className="msm-summary-card is-green"><Statistic title="实时库存合计" value={summary.totalStock || 0} /></Card></Col>
|
||
<Col xs={12} md={4}>
|
||
<Card bordered={false} className="msm-summary-card is-blue is-clickable" onClick={openPurchaseTransit}>
|
||
<Statistic title="采购在途" value={summary.totalPurchaseTransit || 0} suffix="件" />
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Card bordered={false} className="msm-summary-card is-clickable" onClick={applySummaryFilter('configured')}>
|
||
<Statistic title="已配置MKH" value={summary.configuredCount || 0} />
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Card bordered={false} className="msm-summary-card is-clickable" onClick={applySummaryFilter('unconfigured')}>
|
||
<Statistic title="未配置MKH" value={summary.unconfiguredCount || 0} />
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Card
|
||
bordered={false}
|
||
className="msm-panel"
|
||
title={(
|
||
<Space size={12} wrap>
|
||
<span>配件库存明细（{data.total || 0} 条）</span>
|
||
{data.monitorDate ? <Text type="secondary" className="msm-panel__date">监控日 {data.monitorDate}</Text> : null}
|
||
</Space>
|
||
)}
|
||
extra={(
|
||
<Dropdown menu={{
|
||
items: [
|
||
{ key: 'xlsx', label: '导出 XLSX' },
|
||
{ key: 'csv', label: '导出 CSV' },
|
||
],
|
||
onClick: ({ key }) => handleExport(key),
|
||
}}>
|
||
<Button icon={<DownloadOutlined />}>导出</Button>
|
||
</Dropdown>
|
||
)}
|
||
>
|
||
<Spin spinning={loading} tip="正在加载配件库存监控数据…">
|
||
<div ref={tableWrapRef}>
|
||
<Table
|
||
rowKey="skuId"
|
||
size="small"
|
||
columns={columns}
|
||
dataSource={data.rows || []}
|
||
onChange={(pagination, _filter, nextSorter) => {
|
||
setPage(pagination.current || 1);
|
||
setPageSize(pagination.pageSize || 50);
|
||
if (nextSorter?.field) {
|
||
setSorter({
|
||
field: nextSorter.field,
|
||
order: nextSorter.order === 'ascend' ? 'ASC' : 'DESC',
|
||
});
|
||
}
|
||
}}
|
||
pagination={{
|
||
current: data.page || page,
|
||
pageSize: data.pageSize || pageSize,
|
||
total: data.total || 0,
|
||
showSizeChanger: true,
|
||
pageSizeOptions: [50, 100, 200],
|
||
showTotal: (total) => `共 ${total} 条`,
|
||
}}
|
||
scroll={{ x: 1508, y: bodyHeight }}
|
||
/>
|
||
</div>
|
||
</Spin>
|
||
</Card>
|
||
|
||
<Modal
|
||
title={(
|
||
<Space>
|
||
<span>采购在途明细</span>
|
||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||
共 {transitData.total || 0} 条采购单 / 在途 {summary.totalPurchaseTransit || 0} 件
|
||
</Text>
|
||
</Space>
|
||
)}
|
||
open={transitVisible}
|
||
onCancel={() => setTransitVisible(false)}
|
||
width={960}
|
||
footer={null}
|
||
destroyOnHidden
|
||
>
|
||
<Space direction="vertical" size={12} style={{ width: '100%' }}>
|
||
<Input.Search
|
||
allowClear
|
||
placeholder="商品编码 / 名称"
|
||
defaultValue={transitKeyword}
|
||
onSearch={(value) => { setTransitKeyword(value); setTransitPage(1); loadPurchaseTransit(1, value, transitSorter); }}
|
||
style={{ width: 260 }}
|
||
/>
|
||
<Table
|
||
rowKey={(row) => `${row.skuId}-${row.poiId || row.poId || Math.random()}`}
|
||
size="small"
|
||
loading={transitLoading}
|
||
columns={[
|
||
{
|
||
title: '商品编码', dataIndex: 'skuId', width: 176, render: (v) => <span className="msm-sku">{text(v)}</span>,
|
||
},
|
||
{
|
||
title: '商品名称', dataIndex: 'productName', width: 240, ellipsis: true, render: (v) => <Tooltip title={v}>{text(v)}</Tooltip>,
|
||
},
|
||
{ title: '采购数量', dataIndex: 'purchaseQty', width: 96, align: 'right', render: int, sorter: true },
|
||
{ title: '已入库', dataIndex: 'inQty', width: 84, align: 'right', render: int, sorter: true },
|
||
{
|
||
title: '在途数量', dataIndex: 'transitQty', width: 96, align: 'right', sorter: true,
|
||
render: (value) => <strong style={{ color: '#1677ff' }}>{int(value)}</strong>,
|
||
},
|
||
{
|
||
title: '计划到货日期', dataIndex: 'deliveryDate', width: 120, align: 'center', sorter: true,
|
||
render: (value) => text(value),
|
||
},
|
||
{ title: '采购单号', dataIndex: 'poId', width: 116, render: text },
|
||
]}
|
||
dataSource={transitData.rows || []}
|
||
pagination={{
|
||
current: transitPage,
|
||
pageSize: transitPageSize,
|
||
total: transitData.total || 0,
|
||
showSizeChanger: true,
|
||
pageSizeOptions: [50, 100, 200],
|
||
showTotal: (total) => `共 ${total} 条`,
|
||
}}
|
||
onChange={(pagination, _filters, nextSorter) => {
|
||
setTransitPage(pagination.current || 1);
|
||
setTransitPageSize(pagination.pageSize || 50);
|
||
const nextSort = nextSorter?.field
|
||
? { field: nextSorter.field, order: nextSorter.order === 'ascend' ? 'ASC' : 'DESC' }
|
||
: { field: 'transitQty', order: 'DESC' };
|
||
setTransitSorter(nextSort);
|
||
loadPurchaseTransit(pagination.current || 1, transitKeyword, nextSort);
|
||
}}
|
||
scroll={{ x: 860, y: 360 }}
|
||
/>
|
||
</Space>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
const ModularStockMonitor = () => (
|
||
<SycmPage className="msm-page">
|
||
<header className="msm-header">
|
||
<div className="msm-header__heading">
|
||
<Title level={3}>模块化库存监控</Title>
|
||
<Text type="secondary">
|
||
配件库存监控：仅统计「简尚-崔桥工厂半成品包装项目仓」下的 SKU 实时库存、近 15 天日均发货量与可用天数
|
||
</Text>
|
||
<Text type="secondary" className="msm-note">
|
||
数据口径：实时库存取 jst_inventoryInfo（wms_co_id 15718196）；近 15 天日均发货量、
|
||
库存可用天数、安全天数取 pm_stockMonitor 最新快照（按完整 SKU 编码关联，794 个 SKU 全覆盖）；
|
||
当日入库取采购到货、当日出库取近一日发货量，均以监控日为基准；
|
||
仓位取聚水潭「箱及仓位库存」（jst_packInventoryInfo）的真货位，同商品多箱时显示库存最大的主货位，查不到才显示「未维护」；
|
||
图片取自「产品资料系统数据库」商品档案（业务库图片字段均为空）。
|
||
注：日均发货量 2026-09-17 起由近 7 天改为近 15 天（业务原要求 30 天，但业务库无 30 天日销，最长只到 15 天）；
|
||
库存可用天数仍沿用监控表 jsUseDays（源系统口径），故两者并非同一时间窗。
|
||
状态列：基于聚水潭 SKU 级 BOM 维护（rpt.jst_skuBomItem）判断该商品是否作为「配件商品编码」被某 MKH 成品 BOM 引用——已配置MKH = 出现在某 MKH 成品的 BOM 配件清单中；未配置MKH = 未出现。
|
||
</Text>
|
||
</div>
|
||
</header>
|
||
<Tabs
|
||
className="msm-tabs"
|
||
activeKey="accessory"
|
||
items={[{
|
||
key: 'accessory',
|
||
label: '配件库存监控',
|
||
children: <AccessoryStockPanel />,
|
||
}]}
|
||
/>
|
||
</SycmPage>
|
||
);
|
||
|
||
export default ModularStockMonitor;
|