@spacecorexdev/core 0.0.4 → 0.0.5

package/src/ui/InvoiceRecordsList/index.tsx

@@ -0,0 +1,813 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Table, Select, Tag, Button, Input, DatePicker, Modal, Descriptions, Form, Menu, message } from 'antd';
+import { DownloadOutlined, EditOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+import { UIFilePreview } from '../UIFilePreview/index';
+import { ResponseCode } from '../../api/_base';
+import { CacheUserInfo } from '../../utils/CacheUserInfo';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
+
+/**
+ * 发票类型
+ */
+export enum InvoiceType {
+  /** 其他 */
+  其他 = '其他',
+  /** 增值税普通发票 */
+  增值税普通发票 = '‌增值税普通发票',
+  /** 增值税专用发票 */
+  增值税专用发票 = '‌增值税专用发票',
+  /** 国有金融、保险、邮政、电信、铁路、航空、存单等 */
+  专业发票 = '专业发票',
+  /** 机动车销售统一发票 */
+  机动车发票 = '机动车发票',
+  /** 二手车销售统一发票 */
+  二手车发票 = '二手车发票',
+}
+
+/**
+ * 发票状态
+ */
+export enum ApprovalInvoiceStatus {
+  /** 已报销 */
+  已报销 = '已报销',
+  /** 待报销 */
+  待报销 = '待报销',
+  /** 作废 */
+  作废 = '作废',
+}
+
+interface InvoiceRecord {
+  id: string;
+  instanceId: string;
+  invoiceFilePath: string;
+  invoiceNo: string;
+  invoiceCode: string;
+  invoiceType: string;
+  invoiceDate: string;
+  amountWithoutTax: number;
+  taxAmount: number;
+  totalAmount: number;
+  buyerName: string;
+  buyerTaxNo: string;
+  buyerAddressPhone: string;
+  buyerBankAccount: string;
+  sellerName: string;
+  sellerTaxNo: string;
+  sellerAddressPhone: string;
+  sellerBankAccount: string;
+  status: string;
+  summary: string;
+  remark: string;
+  drawer: string;
+  reviewer: string;
+  payee: string;
+  createTime: Date;
+  createBy: string;
+  updateTime: Date;
+  updateBy: string;
+}
+
+const statusColors: Record<string, string> = {
+  '已报销': 'green',
+  '待报销': 'orange',
+  '作废': 'red',
+};
+
+const statusText: Record<string, string> = {
+  '已报销': '已报销',
+  '待报销': '待报销',
+  '作废': '作废',
+};
+
+/** 发票 API —— 由使用方注入（approval 模块的 approver.approvalinvoice），避免 core 依赖模块专属 API */
+export interface InvoiceRecordsApi {
+  getInvoiceListByProject: (params: any) => Promise<any>;
+  getInvoiceList: (params: any) => Promise<any>;
+  updateInvoice: (data: any) => Promise<any>;
+}
+
+interface InvoiceRecordsListProps {
+  /** 项目ID：传入时仅展示该项目关联的发票记录（项目“费用”页签使用），不传则展示全部发票记录 */
+  projectId?: string;
+  /** 发票接口实现，由壳层/模块注入 */
+  invoiceApi: InvoiceRecordsApi;
+}
+
+export const InvoiceRecordsList: React.FC<InvoiceRecordsListProps> = ({ projectId, invoiceApi }) => {
+  const isProjectMode = !!projectId;
+  const [invoices, setInvoices] = useState<InvoiceRecord[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewFileUrl, setPreviewFileUrl] = useState<string | null>(null);
+  const [previewFileName, setPreviewFileName] = useState<string | undefined>(undefined);
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [selectedInvoice, setSelectedInvoice] = useState<InvoiceRecord | null>(null);
+  const [editVisible, setEditVisible] = useState(false);
+  const [editForm] = Form.useForm();
+  const [userMap, setUserMap] = useState<Map<string, string>>(new Map());
+  const [contextMenu, setContextMenu] = useState<{ visible: boolean; x: number; y: number; record: InvoiceRecord | null }>({
+    visible: false, x: 0, y: 0, record: null,
+  });
+
+  const [filters, setFilters] = useState({
+    instanceId: '',
+    invoiceNo: '',
+    buyerName: '',
+    sellerName: '',
+    createBy: '',
+    status: '',
+    fromDate: null as Dayjs | null,
+    toDate: null as Dayjs | null,
+  });
+
+  // 符合筛选条件的汇总金额（后端返回，单位：分）.
+  const [sumTotalAmount, setSumTotalAmount] = useState(0);
+  const [sumTaxAmount, setSumTaxAmount] = useState(0);
+
+  // 申请人筛选选项（用户搜索）.
+  const [userOptions, setUserOptions] = useState<{ value: string; label: string }[]>([]);
+  const userSearchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [pagination, setPagination] = useState({
+    pageNum: 1,
+    pageSize: 10,
+  });
+
+  useEffect(() => {
+    fetchInvoices();
+  }, [filters, pagination, projectId]);
+
+  const fetchInvoices = async () => {
+    setLoading(true);
+    try {
+      const params: any = {
+        pageNum: pagination.pageNum,
+        pageSize: pagination.pageSize,
+      };
+
+      if (filters.invoiceNo) params.invoiceNo = filters.invoiceNo;
+      if (filters.buyerName) params.buyerName = filters.buyerName;
+      if (filters.sellerName) params.sellerName = filters.sellerName;
+      if (filters.createBy) params.createBy = filters.createBy;
+      if (filters.status) params.status = filters.status;
+      if (filters.fromDate) params.fromDate = filters.fromDate.format('YYYY-MM-DD');
+      if (filters.toDate) params.toDate = filters.toDate.format('YYYY-MM-DD');
+
+      const res = isProjectMode
+        ? await invoiceApi.getInvoiceListByProject({ ...params, projectId: projectId! })
+        : await invoiceApi.getInvoiceList({ ...params, instanceId: filters.instanceId });
+
+      if (res?.code === ResponseCode.SUCCESS && res.data) {
+        setInvoices(res.data.list);
+        setTotal(res.data.total);
+        setSumTotalAmount(res.data.sumTotalAmount || 0);
+        setSumTaxAmount(res.data.sumTaxAmount || 0);
+
+        const userIds = new Set<string>();
+        res.data.list.forEach(invoice => {
+          if (invoice.createBy) userIds.add(invoice.createBy);
+          if (invoice.updateBy) userIds.add(invoice.updateBy);
+        });
+
+        if (userIds.size > 0) {
+          const users = await CacheUserInfo.getUserInfos({ userIds: Array.from(userIds) });
+          const newUserMap = new Map<string, string>();
+          users.forEach((user, id) => {
+            newUserMap.set(id, user.nickname);
+          });
+          setUserMap(newUserMap);
+        }
+      }
+    } catch (error) {
+      console.error('获取发票列表失败', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResetFilters = () => {
+    setFilters({
+      instanceId: '',
+      invoiceNo: '',
+      buyerName: '',
+      sellerName: '',
+      createBy: '',
+      status: '',
+      fromDate: null,
+      toDate: null,
+    });
+    setPagination({ pageNum: 1, pageSize: 10 });
+  };
+
+  // 加载申请人筛选选项；有关键词时按昵称搜索，否则取前100个用户.
+  const loadUserOptions = async (keywords?: string) => {
+    try {
+      const users = await CacheUserInfo.getUserInfos(keywords ? { keywords } : {});
+      const opts = Array.from(users.entries()).map(([id, user]) => ({
+        value: id,
+        label: user.nickname || user.username || id,
+      }));
+      setUserOptions(opts);
+    } catch (error) {
+      console.error('获取申请人列表失败', error);
+    }
+  };
+
+  useEffect(() => {
+    loadUserOptions();
+  }, []);
+
+  const handlePreviewFile = (record: InvoiceRecord) => {
+    setSelectedInvoice(record);
+    setDetailVisible(true);
+  };
+
+  const currentIndex = selectedInvoice
+    ? invoices.findIndex(item => item.id === selectedInvoice.id)
+    : -1;
+
+  const handlePrevInvoice = () => {
+    if (currentIndex > 0) {
+      setSelectedInvoice(invoices[currentIndex - 1]);
+    }
+  };
+
+  const handleNextInvoice = () => {
+    if (currentIndex >= 0 && currentIndex < invoices.length - 1) {
+      setSelectedInvoice(invoices[currentIndex + 1]);
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent, record: InvoiceRecord) => {
+    e.preventDefault();
+    setContextMenu({ visible: true, x: e.clientX, y: e.clientY, record });
+  };
+
+  const closeContextMenu = () => {
+    setContextMenu(prev => prev.visible ? { ...prev, visible: false } : prev);
+  };
+
+  useEffect(() => {
+    if (!contextMenu.visible) return;
+    const handleClick = () => closeContextMenu();
+    const handleContextMenuDoc = (e: MouseEvent) => {
+      e.preventDefault();
+    };
+    document.addEventListener('click', handleClick);
+    document.addEventListener('contextmenu', handleContextMenuDoc);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('contextmenu', handleContextMenuDoc);
+    };
+  }, [contextMenu.visible]);
+
+  const handleViewFile = (record: InvoiceRecord) => {
+    if (record.invoiceFilePath) {
+      const ext = record.invoiceFilePath.split('.').pop()?.toLowerCase() || 'pdf';
+      setPreviewFileName(`${record.invoiceNo}.${ext}`);
+      setPreviewFileUrl(import.meta.env.VITE_API_BASE + '/private/invoices/' + record.invoiceFilePath);
+      setPreviewVisible(true);
+    }
+  };
+
+  const handleDownloadFile = async (record: InvoiceRecord) => {
+    if (!record.invoiceFilePath) return;
+
+    try {
+      const response = await fetch(import.meta.env.VITE_API_BASE +'/private/invoices/' + record.invoiceFilePath);
+      const blob = await response.blob();
+      const ext = record.invoiceFilePath.split('.').pop()?.toLowerCase() || 'pdf';
+      const fileName = `${record.invoiceNo}.${ext}`;
+
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('下载发票失败', error);
+    }
+  };
+
+  const handleEdit = (record: InvoiceRecord) => {
+    setSelectedInvoice(record);
+    editForm.setFieldsValue({
+      invoiceNo: record.invoiceNo,
+      invoiceCode: record.invoiceCode,
+      invoiceType: record.invoiceType,
+      invoiceDate: record.invoiceDate ? dayjs(record.invoiceDate) : null,
+      // 金额存储单位为分，表单显示单位为元
+      amountWithoutTax: record.amountWithoutTax != null ? record.amountWithoutTax / 100 : undefined,
+      taxAmount: record.taxAmount != null ? record.taxAmount / 100 : undefined,
+      totalAmount: record.totalAmount != null ? record.totalAmount / 100 : undefined,
+      buyerName: record.buyerName,
+      buyerTaxNo: record.buyerTaxNo,
+      buyerAddressPhone: record.buyerAddressPhone,
+      buyerBankAccount: record.buyerBankAccount,
+      sellerName: record.sellerName,
+      sellerTaxNo: record.sellerTaxNo,
+      sellerAddressPhone: record.sellerAddressPhone,
+      sellerBankAccount: record.sellerBankAccount,
+      status: record.status,
+      summary: record.summary,
+      remark: record.remark,
+      drawer: record.drawer,
+      reviewer: record.reviewer,
+      payee: record.payee,
+    });
+    setEditVisible(true);
+    setDetailVisible(false);
+  };
+
+  const handleSubmitEdit = async () => {
+    try {
+      const values = await editForm.validateFields();
+
+      if (!selectedInvoice) return;
+
+      // 表单金额单位为元，存储单位为分
+      const yuanToCents = (v: unknown) =>
+        v === undefined || v === null || v === '' ? undefined : Math.round(Number(v) * 100);
+
+      const submitData = {
+        ...values,
+        totalAmount: yuanToCents(values.totalAmount),
+        amountWithoutTax: yuanToCents(values.amountWithoutTax),
+        taxAmount: yuanToCents(values.taxAmount),
+        invoiceDate: values.invoiceDate ? values.invoiceDate.format('YYYY-MM-DD') : undefined,
+      };
+
+      const res = await invoiceApi.updateInvoice({
+        id: selectedInvoice.id,
+        ...submitData,
+      });
+
+      if (res.code === ResponseCode.SUCCESS) {
+        message.success('发票信息更新成功');
+        setEditVisible(false);
+        fetchInvoices();
+      } else {
+        message.error(res.message || '更新失败');
+      }
+    } catch (error) {
+      console.error('编辑发票失败', error);
+      message.error('编辑发票失败');
+    }
+  };
+
+  const columns = [
+    {
+      title: '开票日期',
+      dataIndex: 'invoiceDate',
+      key: 'invoiceDate',
+      width: 120,
+    },
+    {
+      title: '发票号码',
+      dataIndex: 'invoiceNo',
+      key: 'invoiceNo',
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: '发票代码',
+      dataIndex: 'invoiceCode',
+      key: 'invoiceCode',
+      width: 140,
+      ellipsis: true,
+    },
+    {
+      title: '发票类型',
+      dataIndex: 'invoiceType',
+      key: 'invoiceType',
+      width: 120,
+      render: (type: InvoiceType) => (
+        <Tag color="blue" className="text-xs">
+          {type}
+        </Tag>
+      ),
+    },
+    {
+      title: '金额(含税)',
+      dataIndex: 'totalAmount',
+      key: 'totalAmount',
+      width: 120,
+      render: (amount: number) => (
+        <span className="text-green-600">¥{(amount/100).toFixed(2)}</span>
+      ),
+    },
+    {
+      title: '不含税金额',
+      dataIndex: 'amountWithoutTax',
+      key: 'amountWithoutTax',
+      width: 120,
+      render: (amount: number) => (
+        <span>¥{(amount/100).toFixed(2)}</span>
+      ),
+    },
+    {
+      title: '税额',
+      dataIndex: 'taxAmount',
+      key: 'taxAmount',
+      width: 100,
+      render: (amount: number) => (
+        <span>¥{(amount/100).toFixed(2)}</span>
+      ),
+    },
+    {
+      title: '购方名称',
+      dataIndex: 'buyerName',
+      key: 'buyerName',
+      width: 200,
+      ellipsis: true,
+    },
+    {
+      title: '销方名称',
+      dataIndex: 'sellerName',
+      key: 'sellerName',
+      width: 200,
+      ellipsis: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      render: (status: ApprovalInvoiceStatus) => (
+        <Tag color={statusColors[status]} className="text-xs">
+          {statusText[status]}
+        </Tag>
+      ),
+    },
+  ];
+
+  const detailItems = selectedInvoice ? [
+    { key: 'invoiceNo', label: '发票号码', children: selectedInvoice.invoiceNo },
+    { key: 'invoiceCode', label: '发票代码', children: selectedInvoice.invoiceCode },
+    { key: 'invoiceType', label: '发票类型', children: <Tag color="blue">{selectedInvoice.invoiceType}</Tag> },
+    { key: 'invoiceDate', label: '开票日期', children: selectedInvoice.invoiceDate },
+    { key: 'totalAmount', label: '金额(含税)', children: <span className="text-green-600">¥{(selectedInvoice.totalAmount/100).toFixed(2)}</span> },
+    { key: 'amountWithoutTax', label: '不含税金额', children: `¥${(selectedInvoice.amountWithoutTax/100).toFixed(2)}` },
+    { key: 'taxAmount', label: '税额', children: `¥${(selectedInvoice.taxAmount/100).toFixed(2)}` },
+    { key: 'buyerName', label: '购方名称', children: selectedInvoice.buyerName },
+    { key: 'buyerTaxNo', label: '购方税号', children: selectedInvoice.buyerTaxNo },
+    { key: 'buyerAddressPhone', label: '购方地址电话', children: selectedInvoice.buyerAddressPhone },
+    { key: 'buyerBankAccount', label: '购方开户行及账号', children: selectedInvoice.buyerBankAccount },
+    { key: 'sellerName', label: '销方名称', children: selectedInvoice.sellerName },
+    { key: 'sellerTaxNo', label: '销方税号', children: selectedInvoice.sellerTaxNo },
+    { key: 'sellerAddressPhone', label: '销方地址电话', children: selectedInvoice.sellerAddressPhone },
+    { key: 'sellerBankAccount', label: '销方开户行及账号', children: selectedInvoice.sellerBankAccount },
+    { key: 'status', label: '状态', children: <Tag color={statusColors[selectedInvoice.status]}>{statusText[selectedInvoice.status]}</Tag> },
+    { key: 'summary', label: '摘要', children: selectedInvoice.summary },
+    { key: 'remark', label: '备注', children: selectedInvoice.remark || '-' },
+    { key: 'drawer', label: '开票人', children: selectedInvoice.drawer || '-' },
+    { key: 'reviewer', label: '复核人', children: selectedInvoice.reviewer || '-' },
+    { key: 'payee', label: '收款人', children: selectedInvoice.payee || '-' },
+    { key: 'createBy', label: '申请人', children: userMap.get(selectedInvoice.createBy) || selectedInvoice.createBy },
+    { key: 'createTime', label: '申请时间', children: selectedInvoice.createTime ? dayjs(selectedInvoice.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' },
+    { key: 'updateBy', label: '更新人', children: userMap.get(selectedInvoice.updateBy) || selectedInvoice.updateBy || '-' },
+    { key: 'updateTime', label: '更新时间', children: selectedInvoice.updateTime ? dayjs(selectedInvoice.updateTime).format('YYYY-MM-DD HH:mm:ss') : '-' }
+  ] : [];
+
+  return (
+    <div className="space-y-5 p-3 sm:space-y-6 sm:p-6">
+      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+        <div>
+          <h2 className="mb-1 text-xl font-semibold text-foreground">{isProjectMode ? '费用发票' : '发票列表'}</h2>
+          <p className="text-sm text-muted">{isProjectMode ? '查看该项目关联的所有发票记录' : '查看和管理所有发票记录'}</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-muted">共 {total} 条记录</span>
+          <span className="text-sm text-muted">
+            总金额(含税)：<span className="font-medium text-green-600">¥{(sumTotalAmount / 100).toFixed(2)}</span>
+          </span>
+          <span className="text-sm text-muted">
+            总税额：<span className="font-medium text-green-600">¥{(sumTaxAmount / 100).toFixed(2)}</span>
+          </span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-5">
+        <Input
+          placeholder="发票号码"
+          value={filters.invoiceNo}
+          onChange={(e) => {
+            setFilters(prev => ({ ...prev, invoiceNo: e.target.value }));
+            setPagination({ pageNum: 1, pageSize: pagination.pageSize });
+          }}
+          className="w-full"
+        />
+        <Input
+          placeholder="购方名称"
+          value={filters.buyerName}
+          onChange={(e) => {
+            setFilters(prev => ({ ...prev, buyerName: e.target.value }));
+            setPagination({ pageNum: 1, pageSize: pagination.pageSize });
+          }}
+          className="w-full"
+        />
+        <Input
+          placeholder="销方名称"
+          value={filters.sellerName}
+          onChange={(e) => {
+            setFilters(prev => ({ ...prev, sellerName: e.target.value }));
+            setPagination({ pageNum: 1, pageSize: pagination.pageSize });
+          }}
+          className="w-full"
+        />
+        <Select
+          placeholder="申请人"
+          allowClear
+          showSearch
+          filterOption={false}
+          options={userOptions}
+          value={filters.createBy || undefined}
+          onSearch={(kw) => {
+            if (userSearchTimer.current) clearTimeout(userSearchTimer.current);
+            userSearchTimer.current = setTimeout(() => loadUserOptions(kw), 300);
+          }}
+          onChange={(val) => {
+            setFilters(prev => ({ ...prev, createBy: val || '' }));
+            setPagination({ pageNum: 1, pageSize: pagination.pageSize });
+          }}
+          className="w-full"
+        />
+        <Select
+          placeholder="状态"
+          allowClear
+          value={filters.status || undefined}
+          onChange={(val) => {
+            setFilters(prev => ({ ...prev, status: val || '' }));
+            setPagination({ pageNum: 1, pageSize: pagination.pageSize });
+          }}
+          className="w-full"
+        >
+          <Option value="已报销">{statusText['已报销']}</Option>
+          <Option value="待报销">{statusText['待报销']}</Option>
+          <Option value="作废">{statusText['作废']}</Option>
+        </Select>
+
+        <RangePicker
+          placeholder={['开始日期', '结束日期']}
+          value={filters.fromDate && filters.toDate ? [filters.fromDate, filters.toDate] : undefined}
+          onChange={(_, dates) => {
+            const from = dates && dates[0] ? dayjs(dates[0]) : null;
+            const to = dates && dates[1] ? dayjs(dates[1]) : null;
+            setFilters(prev => ({
+              ...prev,
+              fromDate: from,
+              toDate: to,
+            }));
+            setPagination({ pageNum: 1, pageSize: pagination.pageSize });
+          }}
+        />
+      </div>
+
+      <div className="flex justify-end">
+        <Button
+          type="primary"
+          onClick={handleResetFilters}
+        >
+          重置筛选
+        </Button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <Table
+          scroll={{ x: 1400 }}
+          columns={columns}
+          dataSource={invoices}
+          rowKey="id"
+          loading={loading}
+          onRow={(record) => ({
+            onClick: (e) => {
+              if (e.ctrlKey) return;
+              handlePreviewFile(record);
+            },
+            onContextMenu: (e) => handleContextMenu(e, record),
+            style: { cursor: 'pointer' },
+          })}
+          pagination={{
+            current: pagination.pageNum,
+            pageSize: pagination.pageSize,
+            total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total, range) => (
+              <span className="text-sm text-muted">
+                第 {range[0]}-{range[1]} 条，共 {total} 条
+              </span>
+            ),
+            onChange: (page, pageSize) => {
+              setPagination({ pageNum: page, pageSize });
+            },
+          }}
+          size="middle"
+          className="border-0"
+        />
+      </div>
+
+      <UIFilePreview
+        fileUrl={previewFileUrl}
+        fileName={previewFileName}
+        visible={previewVisible}
+        onClose={() => setPreviewVisible(false)}
+        editable={false}
+        uploadPercent={undefined}
+      />
+
+      <Modal
+        title={
+          <div className="flex items-center justify-between pr-8">
+            <span>发票详情</span>
+            {currentIndex >= 0 && invoices.length > 0 && (
+              <span className="text-sm font-normal text-muted">
+                第 {currentIndex + 1} / {invoices.length} 条
+              </span>
+            )}
+          </div>
+        }
+        open={detailVisible}
+        onCancel={() => setDetailVisible(false)}
+        footer={[
+          <Button
+            key="prev"
+            icon={<LeftOutlined />}
+            disabled={currentIndex <= 0}
+            onClick={handlePrevInvoice}
+          >
+            上一条
+          </Button>,
+          <Button
+            key="next"
+            disabled={currentIndex < 0 || currentIndex >= invoices.length - 1}
+            onClick={handleNextInvoice}
+          >
+            下一条
+            <RightOutlined />
+          </Button>,
+          !isProjectMode && (
+            <Button key="edit" icon={<EditOutlined />} onClick={() => handleEdit(selectedInvoice!)}>
+              编辑
+            </Button>
+          ),
+          selectedInvoice?.invoiceFilePath ? (
+            <React.Fragment key="file-actions">
+              <Button key="download" icon={<DownloadOutlined />} onClick={() => handleDownloadFile(selectedInvoice!)}>
+                下载发票
+              </Button>
+              <Button key="view" type="primary" onClick={() => handleViewFile(selectedInvoice!)}>
+                查看发票文件
+              </Button>
+            </React.Fragment>
+          ) : null,
+          <Button key="back" onClick={() => setDetailVisible(false)}>
+            关闭
+          </Button>,
+        ].filter(Boolean)}
+        width={700}
+      >
+        <Descriptions
+          bordered
+          column={2}
+          size="small"
+          items={detailItems}
+        />
+      </Modal>
+
+      <Modal
+        title="编辑发票信息"
+        open={editVisible}
+        onCancel={() => setEditVisible(false)}
+        footer={[
+          <Button key="back" onClick={() => setEditVisible(false)}>
+            取消
+          </Button>,
+          <Button key="submit" type="primary" onClick={handleSubmitEdit}>
+            保存
+          </Button>,
+        ]}
+        width={800}
+        destroyOnHidden
+      >
+        <Form form={editForm} layout="vertical" size="small">
+          <div className="grid grid-cols-2 gap-4">
+            <Form.Item label="发票号码" name="invoiceNo">
+              <Input />
+            </Form.Item>
+            <Form.Item label="发票代码" name="invoiceCode">
+              <Input />
+            </Form.Item>
+            <Form.Item label="发票类型" name="invoiceType">
+              <Select>
+                {Object.values(InvoiceType).map(type => (
+                  <Option key={type} value={type}>{type}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item label="开票日期" name="invoiceDate">
+              <DatePicker style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item label="金额(含税)(元)" name="totalAmount">
+              <Input type="number" step="0.01" prefix="¥" />
+            </Form.Item>
+            <Form.Item label="不含税金额(元)" name="amountWithoutTax">
+              <Input type="number" step="0.01" prefix="¥" />
+            </Form.Item>
+            <Form.Item label="税额(元)" name="taxAmount">
+              <Input type="number" step="0.01" prefix="¥" />
+            </Form.Item>
+            <Form.Item label="状态" name="status">
+              <Select>
+                {Object.values(ApprovalInvoiceStatus).map(status => (
+                  <Option key={status} value={status}>{status}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item label="购方名称" name="buyerName">
+              <Input />
+            </Form.Item>
+            <Form.Item label="购方税号" name="buyerTaxNo">
+              <Input />
+            </Form.Item>
+            <Form.Item label="购方地址电话" name="buyerAddressPhone">
+              <Input />
+            </Form.Item>
+            <Form.Item label="购方开户行及账号" name="buyerBankAccount">
+              <Input />
+            </Form.Item>
+            <Form.Item label="销方名称" name="sellerName">
+              <Input />
+            </Form.Item>
+            <Form.Item label="销方税号" name="sellerTaxNo">
+              <Input />
+            </Form.Item>
+            <Form.Item label="销方地址电话" name="sellerAddressPhone">
+              <Input />
+            </Form.Item>
+            <Form.Item label="销方开户行及账号" name="sellerBankAccount">
+              <Input />
+            </Form.Item>
+            <Form.Item label="开票人" name="drawer">
+              <Input />
+            </Form.Item>
+            <Form.Item label="复核人" name="reviewer">
+              <Input />
+            </Form.Item>
+            <Form.Item label="收款人" name="payee">
+              <Input />
+            </Form.Item>
+            <Form.Item label="摘要" name="summary">
+              <Input />
+            </Form.Item>
+            <Form.Item label="备注" name="remark">
+              <TextArea rows={3} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+
+      {contextMenu.visible && contextMenu.record && (
+        <div
+          className="fixed z-50"
+          style={{ left: contextMenu.x, top: contextMenu.y, minWidth: 160 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Menu
+            items={[
+              {
+                key: 'download',
+                label: '下载发票',
+                icon: <DownloadOutlined />,
+                disabled: !contextMenu.record.invoiceFilePath,
+                onClick: () => {
+                  handleDownloadFile(contextMenu.record!);
+                  closeContextMenu();
+                },
+              },
+            ]}
+            mode="vertical"
+            style={{
+              borderRadius: 6,
+              boxShadow: '0 2px 8px rgb(var(--shadow-color) / 0.15)',
+              background: 'rgb(var(--color-surface))',
+              border: '1px solid rgb(var(--color-border))',
+              padding: '4px 0',
+              fontSize: '14px',
+              minWidth: 160,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};