From d3f36d53596906b171804eb02a7955dcdf3db1c1 Mon Sep 17 00:00:00 2001
From: youruo <15018737611@163.com>
Date: Wed, 23 Sep 2026 17:37:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=AF=8F=E6=97=A5?=
 =?UTF-8?q?=E8=BF=9B=E9=94=80=E5=AD=98=EF=BC=88=E5=A4=A7=E8=B4=A7=E5=BA=93?=
 =?UTF-8?q?=E5=AD=98=E7=9B=91=E6=8E=A7=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/DailyInventory/index.jsx | 177 ++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 frontend/src/pages/DailyInventory/index.jsx

diff --git a/frontend/src/pages/DailyInventory/index.jsx b/frontend/src/pages/DailyInventory/index.jsx
new file mode 100644
index 0000000..d22ac5a
--- /dev/null
+++ b/frontend/src/pages/DailyInventory/index.jsx
@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Alert, Button, Modal, Space, Spin, Table, Tooltip, Typography } from 'antd';
+import { InfoCircleOutlined, ReloadOutlined } from '@ant-design/icons';
+import { SycmPage } from '../../components/Common';
+import { getDailyInventory } from '../../api/dailyInventory';
+import {
+  DAILY_INVENTORY_COLUMNS,
+  COLUMN_SOURCE,
+  FORMULA_DESCRIPTION,
+} from '../../constants/dailyInventory.js';
+import './style.css';
+
+const { Title, Text } = Typography;
+
+const TipTitle = ({ tip, children }) => (
+  <Tooltip title={tip}>
+    <span className="daily-inventory-th-tip">{children}</span>
+  </Tooltip>
+);
+
+const int = (value) => {
+  if (value === null || value === undefined || value === '') return '—';
+  return Number(value).toLocaleString('zh-CN', { maximumFractionDigits: 0 });
+};
+
+const decimal = (value, digits = 1) => {
+  if (value === null || value === undefined || value === '') return '—';
+  return Number(value).toLocaleString('zh-CN', {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+};
+
+/** 负数标红、正数标黑：出入库列以负数表示流出，便于一眼分辨方向 */
+const renderSigned = (value) => {
+  if (value === null || value === undefined || value === '') return '—';
+  const n = Number(value);
+  if (!Number.isFinite(n) || n === 0) return <span className="daily-inventory-cell--zero">0</span>;
+  return <span className={n < 0 ? 'daily-inventory-cell--out' : 'daily-inventory-cell--in'}>{int(n)}</span>;
+};
+
+const DailyInventory = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [data, setData] = useState(null);
+  const [helpOpen, setHelpOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await getDailyInventory();
+      setData(res?.data ?? null);
+    } catch (err) {
+      setError(err?.response?.data?.error || err?.message || '每日进销存数据加载失败');
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const items = useMemo(() => data?.items ?? [], [data]);
+
+  const columns = useMemo(() => DAILY_INVENTORY_COLUMNS.map((col) => {
+    const isRuntime = col.source === COLUMN_SOURCE.runtime;
+    return {
+      title: <TipTitle tip={col.tip}>{col.label}</TipTitle>,
+      dataIndex: col.key,
+      key: col.key,
+      align: col.key === 'warehouse' ? 'left' : 'right',
+      width: col.key === 'warehouse' ? 240 : 130,
+      fixed: col.key === 'warehouse' ? 'left' : undefined,
+      className: isRuntime ? 'daily-inventory-col--runtime' : undefined,
+      render: (value, record) => {
+        if (record?.isTotal) {
+          // 合计行：周转天数不累加，显示「—」
+          if (col.key === 'turnoverDays') return '—';
+          return int(value);
+        }
+        if (col.key === 'warehouse') return <span className="daily-inventory-warehouse">{value}</span>;
+        if (col.key === 'closingQty') return int(value);
+        if (col.key === 'turnoverDays') return decimal(value, 1);
+        return renderSigned(value);
+      },
+    };
+  }), []);
+
+  const tableRows = useMemo(() => {
+    if (!data?.totals) return items;
+    return [...items, { ...data.totals, key: '__total__' }];
+  }, [items, data]);
+
+  const noGradeCount = useMemo(() => items.filter((it) => !it.hasGrade).length, [items]);
+
+  return (
+    <SycmPage className="daily-inventory-page">
+      <div className="daily-inventory-header">
+        <div className="daily-inventory-header__title">
+          <Title level={4} style={{ margin: 0 }}>每日进销存</Title>
+          <Button
+            type="text"
+            icon={<InfoCircleOutlined />}
+            onClick={() => setHelpOpen(true)}
+            className="daily-inventory-header__help"
+          >
+            口径说明
+          </Button>
+        </div>
+        <div className="daily-inventory-header__meta">
+          <span>基准日期：{data?.baselineDate || '—'}</span>
+          <span>库存快照日：{data?.latestBizDate || '—'}</span>
+          <span>分级基准时刻：{data?.asOf || '—'}</span>
+          {data?.items?.[0]?.closingTakenAt ? (
+            <span>
+              库存取数时间：{new Date(data.items[0].closingTakenAt).toLocaleString('zh-CN', { hour12: false })}
+            </span>
+          ) : null}
+        </div>
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={load} loading={loading}>刷新</Button>
+        </Space>
+      </div>
+
+      <Alert
+        type="info"
+        showIcon
+        message="数据来源混合，请注意口径"
+        description={
+          <span>
+            期初数量与 12 个流水列取自 <b>{data?.baselineDate || '2026-09-22'}</b> 聚水潭进销存导出值（业务库缺少调拨／盘点／加工／其它出入库单据表，无法还原）；
+            期末数量与右侧 5 列为运行时实时取数。悬浮表头可看每列口径。
+            {noGradeCount > 0 ? ` 其中 ${noGradeCount} 个仓在库存快照中无数据，周转天数与四级库存量显示「—」。` : ''}
+          </span>
+        }
+        style={{ marginBottom: 12 }}
+      />
+
+      {error ? <Alert type="error" showIcon message={error} style={{ marginBottom: 12 }} /> : null}
+
+      <Spin spinning={loading}>
+        <Table
+          className="daily-inventory-table"
+          columns={columns}
+          dataSource={tableRows}
+          rowKey={(record) => record.key || record.warehouse}
+          size="small"
+          bordered
+          pagination={false}
+          scroll={{ x: 'max-content', y: 'calc(100vh - 300px)' }}
+          rowClassName={(record) => (record?.isTotal ? 'daily-inventory-row--total' : '')}
+        />
+      </Spin>
+
+      <Text type="secondary" className="daily-inventory-footer">
+        共 {items.length} 个仓库；蓝色底纹列为运行时取数，其余为基准值。
+      </Text>
+
+      <Modal
+        title="计算口径说明"
+        open={helpOpen}
+        onCancel={() => setHelpOpen(false)}
+        footer={null}
+        width={720}
+      >
+        <div className="daily-inventory-help">
+          {FORMULA_DESCRIPTION.map((line, i) => (
+            <p key={i} className={line.startsWith('  ') ? 'is-indent' : ''}>{line}</p>
+          ))}
+        </div>
+      </Modal>
+    </SycmPage>
+  );
+};
+
+export default DailyInventory;