feat: update 发票核销

zhongnanhuang
1 parent 282e97f1
Showing 7 changed files with 1638 additions and 34 deletions
src/components/Div/EllipsisDiv.tsx
src/pages/Invoice/components/BankChooseModal.tsx
src/pages/Invoice/components/InvoiceVerificationModal.tsx
src/pages/Invoice/constant.tsx
src/pages/Invoice/index.tsx
src/services/definition.ts
src/services/request.ts
+const EllipsisDiv = ({ text }: { text: string }) => {
+  return (
+    <div
+      title={text}
+      className="overflow-hidden whitespace-no-wrap overflow-ellipsis whitespace-nowrap"
+    >
+      {text}
+    </div>
+  );
+};
+
+export default EllipsisDiv;
+import EllipsisDiv from '@/components/Div/EllipsisDiv';
+import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
+import {
+  postServiceBankStatementQueryBankStatement,
+  postServiceInvoiceInvoiceWriteOff,
+} from '@/services';
+import { enumValueToLabel, formatDateTime } from '@/utils';
+import { formatDate } from '@/utils/time';
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  ActionType,
+  ProCard,
+  ProFormInstance,
+  ProTable,
+} from '@ant-design/pro-components';
+import { Button, Divider, Flex, Modal, Tag, message } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS } from '../constant';
+import '../index.less';
+export default ({ invoiceId, setVisible, onClose }) => {
+  const [bankData, setBankData] = useState([]);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [selectedStatement, setSelectedStatement] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [btnLoading, setBtnLoading] = useState(false);
+
+  const actionRef = useRef<ActionType>();
+  const formRef = useRef<ProFormInstance>();
+
+  const getTableCellText = (target: any) => {
+    if (!target) {
+      return '';
+    }
+
+    if (target.props) {
+      return target.props.text;
+    }
+
+    return target;
+  };
+
+  const loadBankData = async (params: any) => {
+    setLoading(true);
+    let searchParams = formRef?.current?.getFieldFormatValue();
+    console.log(searchParams);
+    const res = await postServiceBankStatementQueryBankStatement({
+      data: { ...searchParams, ...params },
+    });
+    if (res) {
+      setBankData(res?.data?.data || []);
+      setTotal(res?.data?.total || 0);
+    }
+
+    setLoading(false);
+  };
+
+  /**
+   * 加载银行流水列表表格的各个列格式
+   */
+  const bankStatementColumnsInit = () => {
+    let columns = BANK_STATEMENT_COLUMNS.map((item) => {
+      let newItem = { ...item };
+      let dataIndex = item.dataIndex;
+      let dataType = item.valueType;
+
+      newItem.render = (text, record) => {
+        let textValue = record[dataIndex];
+
+        if (dataType === 'date') {
+          textValue = formatDate(textValue);
+        }
+
+        if (dataType === 'dateTime') {
+          textValue = formatDateTime(textValue);
+        }
+
+        if (dataType === 'money') {
+          textValue = '￥' + textValue;
+        }
+
+        switch (dataIndex) {
+          case 'invoiceStatus':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOCING_STATUS,
+                )}
+              />
+            );
+
+          case 'status':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOICE_STATUS,
+                )}
+              />
+            );
+
+          case 'payee':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  PAYEE_OPTIONS,
+                )}
+              />
+            );
+
+          default:
+            return <EllipsisDiv text={getTableCellText(textValue)} />;
+        }
+      };
+
+      return newItem;
+    });
+
+    columns.push({
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      fixed: 'right',
+      width: 70,
+      render: (text, record) => [
+        <Button
+          className="p-0"
+          key="choose"
+          type="link"
+          onClick={() => {
+            //去掉表格中对应的数据
+            let newBankData = bankData.filter((item) => {
+              return item.id !== record.id;
+            });
+            setBankData(newBankData);
+
+            //添加到已选中区域中
+            let newSelectedStatement = [...selectedStatement];
+            newSelectedStatement.push(record);
+            setSelectedStatement(newSelectedStatement);
+          }}
+        >
+          选中
+        </Button>,
+      ],
+    });
+
+    return columns;
+  };
+
+  /**
+   * 银行流水表
+   * @param param0
+   * @returns
+   */
+  const BankTable = ({ actionRef = undefined }) => {
+    return (
+      <ProTable
+        loading={loading}
+        columns={bankStatementColumnsInit()}
+        actionRef={actionRef}
+        formRef={formRef}
+        cardBordered
+        pagination={{
+          pageSize: pageSize,
+          current: page,
+          total: total,
+          onChange: (page, pageSize) => {
+            setPage(page);
+            setPageSize(pageSize);
+            loadBankData({ current: page, pageSize: pageSize });
+          },
+        }}
+        dataSource={bankData}
+        onDataSourceChange={() => {
+          console.log('change');
+        }}
+        columnsState={{
+          persistenceKey: 'pro-table-singe-demos',
+          persistenceType: 'localStorage',
+          defaultValue: {
+            option: { fixed: 'right', disable: true },
+          },
+          onChange(value) {
+            console.log('value: ', value);
+          },
+        }}
+        rowKey="id"
+        search={{
+          labelWidth: 'auto',
+          span: 8,
+        }}
+        options={{
+          setting: {
+            listsHeight: 400,
+          },
+        }}
+        form={{}}
+        onSubmit={() => {
+          loadBankData({ current: 1 });
+        }}
+        onReset={() => {}}
+        dateFormatter="string"
+        headerTitle="银行流水"
+        scroll={{ x: 1400, y: 360 }}
+        toolBarRender={() => [
+          <Button
+            key="button"
+            icon={<PlusOutlined />}
+            onClick={() => {}}
+            type="primary"
+          >
+            添加
+          </Button>,
+        ]}
+      />
+    );
+  };
+
+  const removeSelectedStatement = (record: any) => {
+    console.log(record);
+    console.log(selectedStatement);
+    console.log(bankData);
+
+    //在已选中区域中移除
+    let newSelectedStatement = selectedStatement.filter((item) => {
+      return item.id !== record.id;
+    });
+    setSelectedStatement(newSelectedStatement);
+
+    //将数据添加回到表格中
+    let newBankData = [...bankData];
+    newBankData.push(record);
+    setBankData(newBankData);
+  };
+
+  const showSelectedStatement = () => {
+    console.log('show');
+    console.log(selectedStatement);
+    let i = 0;
+
+    let tags = selectedStatement.map((item) => {
+      return (
+        <Tag
+          key={i++}
+          closable={true}
+          style={{ userSelect: 'none' }}
+          onClose={(e) => {
+            e.preventDefault(); //需要加上这句代码，不然删除tag时，当前tag的下一个tag会被设置ant-tag-hidden
+            removeSelectedStatement(item);
+          }}
+        >
+          <span>{item.id}</span>
+        </Tag>
+      );
+    });
+
+    console.log(tags);
+
+    return tags;
+  };
+
+  useEffect(() => {
+    loadBankData({ current: page, pageSize: pageSize });
+  }, []);
+
+  return (
+    <>
+      <Modal
+        open
+        width="80%"
+        title="发票详情"
+        onOk={async () => {
+          setBtnLoading(true);
+          let bankStatementIds = selectedStatement?.map((item) => {
+            return item.id;
+          });
+          let res = await postServiceInvoiceInvoiceWriteOff({
+            data: {
+              invoiceId: invoiceId,
+              bankStatementIds: bankStatementIds,
+            },
+          });
+
+          if (res) {
+            message.info(res.message);
+            onClose();
+          }
+
+          setBtnLoading(false);
+        }}
+        okButtonProps={{
+          loading: btnLoading,
+        }}
+        onCancel={() => {
+          setVisible(false);
+        }}
+      >
+        <Divider orientation="left" plain>
+          已选中
+        </Divider>
+        <ProCard className="mb-[16px]" bordered style={{}}>
+          <Flex>
+            <div>{showSelectedStatement()}</div>
+          </Flex>
+        </ProCard>
+
+        <BankTable actionRef={actionRef}></BankTable>
+      </Modal>
+    </>
+  );
+};
+import EllipsisDiv from '@/components/Div/EllipsisDiv';
+import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
+import { postServiceInvoiceQueryInvoiceDetail } from '@/services';
+import { enumValueToLabel, formatDateTime } from '@/utils';
+import { formatDate } from '@/utils/time';
+import { PlusOutlined } from '@ant-design/icons';
+import { ModalForm, ProCard, ProTable } from '@ant-design/pro-components';
+import {
+  Button,
+  Descriptions,
+  DescriptionsProps,
+  Divider,
+  Flex,
+  Form,
+} from 'antd';
+import { useEffect, useState } from 'react';
+import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS } from '../constant';
+import '../index.less';
+import BankChooseModal from './BankChooseModal';
+
+export default ({ invoiceId, setVisible, onClose }) => {
+  const [form] = Form.useForm<{ id: string }>();
+  const [bankChooseModalVisible, setBankChooseModalVisible] = useState(false);
+  const [invoiceInfo, setInvoiceInfo] = useState({});
+  const [relationOrderIds, setRelationOrderIds] = useState([]);
+  const [relationBankStatements, setRelationBankStatements] = useState([]);
+
+  const loadInvoiceData = async () => {
+    let res = await postServiceInvoiceQueryInvoiceDetail({
+      data: { invoiceId: invoiceId },
+    });
+    if (res && res.data) {
+      setInvoiceInfo(res.data.queryInvoiceResponseDto);
+      setRelationOrderIds(res.data.mainOrderId);
+      setRelationBankStatements(res.data.bankStatementResponseDtos);
+    }
+  };
+
+  const showRelationOrders = () => {
+    return relationOrderIds.map((item) => {
+      return (
+        <>
+          <Button
+            className="pl-1 pr-0"
+            type="link"
+            target="_blank"
+            href={'/order?id=' + item}
+          >
+            {item}
+          </Button>
+          <Divider type="vertical" />
+        </>
+      );
+    });
+  };
+
+  const items: DescriptionsProps['items'] = [
+    {
+      key: '1',
+      label: '发票号码',
+      children: invoiceInfo.invoiceNumber,
+      span: 3,
+    },
+    {
+      key: '2',
+      label: '发票类型',
+      children: enumValueToLabel(invoiceInfo.invoiceStatus, INVOCING_STATUS),
+      span: 6,
+    },
+    {
+      key: '3',
+      label: '状态',
+      children: enumValueToLabel(invoiceInfo.status, INVOICE_STATUS),
+      span: 6,
+    },
+    {
+      key: '4',
+      label: '购买方',
+      children: invoiceInfo.purchaser,
+      span: 9,
+    },
+    {
+      key: '5',
+      label: '收款单位',
+      children: enumValueToLabel(invoiceInfo.payee, PAYEE_OPTIONS),
+      span: 9,
+    },
+    {
+      key: '6',
+      label: '联系人',
+      children: invoiceInfo.contacts,
+      span: 6,
+    },
+    {
+      key: '7',
+      label: '销售',
+      children: invoiceInfo.sale,
+      span: 6,
+    },
+    {
+      key: '8',
+      label: '金额',
+      children: invoiceInfo.money,
+      span: 6,
+    },
+    {
+      key: '9',
+      label: '开票日期',
+      children: formatDate(invoiceInfo.invoicingTime),
+      span: 9,
+    },
+    {
+      key: '10',
+      label: '收款时间',
+      children: formatDate(invoiceInfo.collectionTime),
+      span: 15,
+    },
+    {
+      key: '11',
+      label: '备注',
+      children: invoiceInfo.notes,
+      span: 24,
+    },
+  ];
+
+  const getTableCellText = (target: any) => {
+    if (!target) {
+      return '';
+    }
+
+    if (target.props) {
+      return target.props.text;
+    }
+
+    return target;
+  };
+
+  /**
+   * 加载银行流水列表表格的各个列格式
+   */
+  const bankStatementColumnsInit = () => {
+    let columns = BANK_STATEMENT_COLUMNS.map((item) => {
+      let newItem = { ...item };
+      let dataIndex = item.dataIndex;
+      let dataType = item.valueType;
+
+      newItem.render = (text, record) => {
+        let textValue = record[dataIndex];
+
+        if (dataType === 'date') {
+          textValue = formatDate(textValue);
+        }
+
+        if (dataType === 'dateTime') {
+          textValue = formatDateTime(textValue);
+        }
+
+        if (dataType === 'money') {
+          textValue = '￥' + textValue;
+        }
+
+        switch (dataIndex) {
+          case 'invoiceStatus':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOCING_STATUS,
+                )}
+              />
+            );
+
+          case 'status':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOICE_STATUS,
+                )}
+              />
+            );
+
+          case 'payee':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  PAYEE_OPTIONS,
+                )}
+              />
+            );
+
+          default:
+            return <EllipsisDiv text={getTableCellText(textValue)} />;
+        }
+      };
+
+      return newItem;
+    });
+
+    columns.push({
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      fixed: 'right',
+      width: 70,
+      render: (text, record) => [
+        <Button
+          className="p-0"
+          key="choose"
+          type="link"
+          onClick={() => {
+            //去掉表格中对应的数据
+            let newBankData = bankData.filter((item) => {
+              return item.id !== record.id;
+            });
+            setBankData(newBankData);
+
+            //添加到已选中区域中
+            let newSelectedStatement = [...selectedStatement];
+            newSelectedStatement.push(record);
+            setSelectedStatement(newSelectedStatement);
+          }}
+        >
+          选中
+        </Button>,
+      ],
+    });
+
+    return columns;
+  };
+
+  /**
+   * 银行流水表
+   * @param param0
+   * @returns
+   */
+  const BankTable = ({ actionRef = undefined }) => {
+    return (
+      <ProTable
+        columns={bankStatementColumnsInit()}
+        actionRef={actionRef}
+        cardBordered
+        pagination={{
+          pageSize: 10,
+        }}
+        dataSource={relationBankStatements}
+        columnsState={{
+          persistenceKey: 'pro-table-singe-demos',
+          persistenceType: 'localStorage',
+          defaultValue: {
+            option: { fixed: 'right', disable: true },
+          },
+          onChange(value) {
+            console.log('value: ', value);
+          },
+        }}
+        rowKey="id"
+        search={false}
+        options={{
+          setting: {
+            listsHeight: 400,
+          },
+        }}
+        form={{
+          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
+          syncToUrl: (values, type) => {
+            if (type === 'get') {
+              return {
+                ...values,
+                created_at: [values.startTime, values.endTime],
+              };
+            }
+            return values;
+          },
+        }}
+        dateFormatter="string"
+        headerTitle="银行流水"
+        scroll={{ x: 1400, y: 360 }}
+        toolBarRender={() => [
+          <Button
+            key="button"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setBankChooseModalVisible(true);
+            }}
+            type="primary"
+          >
+            添加
+          </Button>,
+        ]}
+      />
+    );
+  };
+
+  useEffect(() => {
+    loadInvoiceData();
+  }, []);
+
+  return (
+    <>
+      <ModalForm<{
+        id: string;
+      }>
+        open
+        width="80%"
+        title="发票详情"
+        form={form}
+        autoFocusFirstInput
+        modalProps={{
+          okText: '确定',
+          cancelText: '取消',
+          destroyOnClose: true,
+          onCancel: () => {
+            setVisible(false);
+          },
+        }}
+        onFinish={async () => {
+          onClose();
+        }}
+        onOpenChange={setVisible}
+      >
+        <Divider orientation="left" plain>
+          发票信息
+        </Divider>
+
+        <Descriptions
+          bordered
+          column={24}
+          size="small"
+          title=""
+          items={items}
+        />
+
+        <Divider orientation="left" plain>
+          订单号
+        </Divider>
+
+        <ProCard bordered style={{}}>
+          <Flex>
+            <div>{showRelationOrders()}</div>
+          </Flex>
+        </ProCard>
+
+        <Divider plain></Divider>
+
+        <BankTable></BankTable>
+      </ModalForm>
+
+      {bankChooseModalVisible ? (
+        <BankChooseModal
+          setVisible={setBankChooseModalVisible}
+          invoiceId={invoiceId}
+          onClose={() => {
+            setBankChooseModalVisible(false);
+            loadInvoiceData();
+          }}
+        ></BankChooseModal>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
@@ -85,4 +85,201 @@ export const INVOICE_COLUMNS = [
 export const INVOICE_STATUS = {
   UNVERIFIED: '未核销',
   VERIFIED: '已核销',
+  ABNORMAL: '异常',
 };
+
+export const BANK_STATEMENT_COLUMNS = [
+  {
+    dataIndex: 'id',
+    title: '主键ID',
+    valueType: 'text',
+    width: 100,
+    hideInTable: true,
+  },
+  {
+    dataIndex: 'status',
+    title: '状态',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'serialNumber',
+    title: '流水号',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'merchantOrderNumber',
+    title: '商户订单号',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'bankOrderNumber',
+    title: '银行订单号',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'thirdPartyOrderNumber',
+    title: '第三方订单号',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'accountNumber',
+    title: '账号',
+    valueType: 'text',
+    width: 180,
+  },
+  {
+    dataIndex: 'accountName',
+    title: '帐号名称',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'currency',
+    title: '币种',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'transactionDate',
+    title: '交易日',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'transactionTime',
+    title: '交易时间',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'transactionType',
+    title: '交易类型',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'transactionBankBranch',
+    title: '交易行所',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'valueDate',
+    title: '起息日',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'loanAmount',
+    title: '贷方金额',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'borrowedAmount',
+    title: '借方金额',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'transactionAmount',
+    title: '交易金额',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'balance',
+    title: '余额',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'actualPaymentAmount',
+    title: '实付金额',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'collectionChannel',
+    title: '收款渠道',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'paymentType',
+    title: '支付类型',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'summary',
+    title: '摘要',
+    valueType: 'text',
+    width: 300,
+  },
+  {
+    dataIndex: 'cashier',
+    title: '收银员',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'payeePayerUnit',
+    title: '收(付)方单位',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'payeePayerName',
+    title: '收(付)方名称',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'payeePayerAccountNumber',
+    title: '收(付)方账号',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'payeePayerBankBranchCode',
+    title: '收(付)方开户行行号',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'payeePayerBankName',
+    title: '收(付)方开户行名',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'payeePayerBankAddress',
+    title: '收(付)方开户行地址',
+    valueType: 'text',
+    width: 260,
+  },
+  {
+    dataIndex: 'extendedSummary',
+    title: '扩展摘要',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'transactionAnalysisCode',
+    title: '交易分析码',
+    valueType: 'text',
+    width: 100,
+  },
+  {
+    dataIndex: 'remarkNote',
+    title: '附言',
+    valueType: 'text',
+    width: 100,
+  },
+];
 import ButtonConfirm from '@/components/ButtomConfirm';
-import { INVOICE_COLUMNS, INVOICE_STATUS } from '@/pages/Invoice/constant';
+import EllipsisDiv from '@/components/Div/EllipsisDiv';
 import {
+  BANK_STATEMENT_COLUMNS,
+  INVOICE_COLUMNS,
+  INVOICE_STATUS,
+} from '@/pages/Invoice/constant';
+import {
+  postServiceBankStatementDeleteBankStatement,
+  postServiceBankStatementQueryBankStatement,
   postServiceInvoiceDeleteInvoice,
   postServiceInvoiceQueryInvoice,
 } from '@/services';
@@ -17,23 +24,24 @@ import { Avatar, Button, Dropdown, Tabs, Tag, message } from &#39;antd&#39;;
 import { useRef, useState } from 'react';
 import { INVOCING_STATUS, PAYEE_OPTIONS } from '../Order/constant';
 import BankImportModal from './components/BankImportModal';
+import InvoiceVerificationModal from './components/InvoiceVerificationModal';
 import './index.less';
 const InvoicePage = () => {
   const invoiceActionRef = useRef<ActionType>();
   const bankActionRef = useRef<ActionType>();
   const [bankImportModalVisible, setBankImportModalVisible] = useState(false);
+  const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
+    useState(false);
+  const [invoiceId, setInvoiceId] = useState(undefined);
   const userInfo = getUserInfo();
-  const BreakWordDiv = ({ text = '暂无内容' }) => {
-    return (
-      <div
-        title={text}
-        className="overflow-hidden whitespace-no-wrap overflow-ellipsis whitespace-nowrap"
-      >
-        {text}
-      </div>
-    );
+  const reloadInvoiceTable = () => {
+    invoiceActionRef.current?.reload();
+  };
+
+  const reloadBankStatementTable = () => {
+    bankActionRef.current?.reload();
   };
   const getTableCellText = (target: any) => {
@@ -75,7 +83,7 @@ const InvoicePage = () =&gt; {
         switch (dataIndex) {
           case 'invoiceStatus':
             return (
-              <BreakWordDiv
+              <EllipsisDiv
                 text={enumValueToLabel(
                   getTableCellText(textValue),
                   INVOCING_STATUS,
@@ -85,7 +93,7 @@ const InvoicePage = () =&gt; {
           case 'status':
             return (
-              <BreakWordDiv
+              <EllipsisDiv
                 text={enumValueToLabel(
                   getTableCellText(textValue),
                   INVOICE_STATUS,
@@ -95,7 +103,7 @@ const InvoicePage = () =&gt; {
           case 'payee':
             return (
-              <BreakWordDiv
+              <EllipsisDiv
                 text={enumValueToLabel(
                   getTableCellText(textValue),
                   PAYEE_OPTIONS,
@@ -104,7 +112,7 @@ const InvoicePage = () =&gt; {
             );
           default:
-            return <BreakWordDiv text={getTableCellText(textValue)} />;
+            return <EllipsisDiv text={getTableCellText(textValue)} />;
         }
       };
@@ -126,18 +134,21 @@ const InvoicePage = () =&gt; {
         >
           核销
         </a>,
-        <a
-          href={record.url}
-          target="_blank"
-          rel="noopener noreferrer"
+        <Button
+          className="p-0"
           key="view"
+          type="link"
+          onClick={() => {
+            setInvoiceVerificationVisible(true);
+            setInvoiceId(record.id);
+          }}
         >
           查看
-        </a>,
+        </Button>,
         <ButtonConfirm
           key="delete"
           className="p-0"
-          title="确认删除？"
+          title={'确认删除发票号码为[ ' + record.invoiceNumber + ' ]的发票吗？'}
           text="删除"
           onConfirm={async () => {
             let res = await postServiceInvoiceDeleteInvoice({
@@ -145,6 +156,114 @@ const InvoicePage = () =&gt; {
             });
             if (res) {
               message.success(res.message);
+              reloadInvoiceTable();
+            }
+          }}
+        />,
+      ],
+    });
+
+    return columns;
+  };
+
+  const bankStatemetColumnsInit = () => {
+    let columns = BANK_STATEMENT_COLUMNS.map((item) => {
+      let newItem = { ...item };
+      let dataIndex = item.dataIndex;
+      let dataType = item.valueType;
+
+      newItem.render = (text, record) => {
+        let textValue = record[dataIndex];
+
+        if (dataType === 'date') {
+          textValue = formatDate(textValue);
+        }
+
+        if (dataType === 'dateTime') {
+          textValue = formatDateTime(textValue);
+        }
+
+        if (dataType === 'money') {
+          textValue = '￥' + textValue;
+        }
+
+        switch (dataIndex) {
+          case 'invoiceStatus':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOCING_STATUS,
+                )}
+              />
+            );
+
+          case 'status':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOICE_STATUS,
+                )}
+              />
+            );
+
+          case 'payee':
+            return (
+              <EllipsisDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  PAYEE_OPTIONS,
+                )}
+              />
+            );
+
+          default:
+            return <EllipsisDiv text={getTableCellText(textValue)} />;
+        }
+      };
+
+      return newItem;
+    });
+
+    columns.push({
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      fixed: 'right',
+      width: 120,
+      render: (text, record, _, action) => [
+        <a
+          key="editable"
+          onClick={() => {
+            action?.startEditable?.(record.id);
+          }}
+        >
+          核销
+        </a>,
+        <Button
+          className="p-0"
+          key="view"
+          type="link"
+          onClick={() => {
+            setInvoiceVerificationVisible(true);
+            setInvoiceId(record.id);
+          }}
+        >
+          查看
+        </Button>,
+        <ButtonConfirm
+          key="delete"
+          className="p-0"
+          title={'是否删除该银行流水记录？'}
+          text="删除"
+          onConfirm={async () => {
+            let res = await postServiceBankStatementDeleteBankStatement({
+              data: { id: record.id },
+            });
+            if (res) {
+              message.success(res.message);
+              reloadBankStatementTable();
             }
           }}
         />,
@@ -225,14 +344,14 @@ const InvoicePage = () =&gt; {
   const BankTable = ({ actionRef = undefined }) => {
     return (
       <ProTable
-        columns={invoicecColumnsInit()}
+        columns={bankStatemetColumnsInit()}
         actionRef={actionRef}
         cardBordered
         pagination={{
           pageSize: 10,
         }}
         request={async (params) => {
-          const res = await postServiceInvoiceQueryInvoice({
+          const res = await postServiceBankStatementQueryBankStatement({
             data: { ...params },
           });
           if (res) {
@@ -261,18 +380,7 @@ const InvoicePage = () =&gt; {
             listsHeight: 400,
           },
         }}
-        form={{
-          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
-          syncToUrl: (values, type) => {
-            if (type === 'get') {
-              return {
-                ...values,
-                created_at: [values.startTime, values.endTime],
-              };
-            }
-            return values;
-          },
-        }}
+        form={{}}
         dateFormatter="string"
         headerTitle="银行流水列表"
         scroll={{ x: 1400, y: 360 }}
@@ -282,6 +390,7 @@ const InvoicePage = () =&gt; {
             icon={<PlusOutlined />}
             onClick={() => {
               setBankImportModalVisible(true);
+              // console.log("test")
             }}
             type="primary"
           >
@@ -353,6 +462,16 @@ const InvoicePage = () =&gt; {
       ) : (
         ''
       )}
+
+      {invoiceVerificationVisible ? (
+        <InvoiceVerificationModal
+          setVisible={setInvoiceVerificationVisible}
+          invoiceId={invoiceId}
+          onClose={() => {}}
+        ></InvoiceVerificationModal>
+      ) : (
+        ''
+      )}
     </>
   );
 };
@@ -761,6 +761,179 @@ export interface QueryAnnexDto {
   subId?: number;
 }
+export interface QueryBankStatementDto {
+  /**
+   * @description
+   *   帐号名称
+   */
+  accountName?: string;
+  /**
+   * @description
+   *   账号
+   */
+  accountNumber?: string;
+  /**
+   * @description
+   *   实付金额
+   */
+  actualPaymentAmount?: number;
+  /**
+   * @description
+   *   余额
+   */
+  balance?: number;
+  /**
+   * @description
+   *   银行订单号
+   */
+  bankOrderNumber?: string;
+  /**
+   * @description
+   *   借款金额
+   */
+  borrowedAmount?: number;
+  /**
+   * @description
+   *   收银员
+   */
+  cashier?: string;
+  /**
+   * @description
+   *   收款渠道
+   */
+  collectionChannel?: string;
+  /**
+   * @description
+   *   币种
+   */
+  currency?: string;
+  /** @format int32 */
+  current?: number;
+  /**
+   * @description
+   *   扩展摘要
+   */
+  extendedSummary?: string;
+  /**
+   * @description
+   *   id
+   * @format int64
+   */
+  id?: number;
+  /**
+   * @description
+   *   贷款金额
+   */
+  loanAmount?: number;
+  /**
+   * @description
+   *   商户订单号
+   */
+  merchantOrderNumber?: string;
+  /** @format int32 */
+  pageSize?: number;
+  /**
+   * @description
+   *   收(付)方账号
+   */
+  payeePayerAccountNumber?: string;
+  /**
+   * @description
+   *   收(付)方开户行地址
+   */
+  payeePayerBankAddress?: string;
+  /**
+   * @description
+   *   收(付)方开户行行号
+   */
+  payeePayerBankBranchCode?: string;
+  /**
+   * @description
+   *   收(付)方开户行名
+   */
+  payeePayerBankName?: string;
+  /**
+   * @description
+   *   收(付)方名称
+   */
+  payeePayerName?: string;
+  /**
+   * @description
+   *   收(付)方单位
+   */
+  payeePayerUnit?: string;
+  /**
+   * @description
+   *   支付类型
+   */
+  paymentType?: string;
+  /**
+   * @description
+   *   附言
+   */
+  remarkNote?: string;
+  /**
+   * @description
+   *   流水号
+   */
+  serialNumber?: string;
+  /**
+   * @description
+   *   状态
+   */
+  status?: string;
+  /**
+   * @description
+   *   摘要
+   */
+  summary?: string;
+  /**
+   * @description
+   *   第三方订单号
+   */
+  thirdPartyOrderNumber?: string;
+  /** @format int32 */
+  total?: number;
+  /**
+   * @description
+   *   交易金额
+   */
+  transactionAmount?: number;
+  /**
+   * @description
+   *   交易分析码
+   */
+  transactionAnalysisCode?: string;
+  /**
+   * @description
+   *   交易行所
+   */
+  transactionBankBranch?: string;
+  /**
+   * @description
+   *   交易日
+   * @format date
+   */
+  transactionDate?: string;
+  /**
+   * @description
+   *   交易时间
+   * @format date-time
+   */
+  transactionTime?: string;
+  /**
+   * @description
+   *   交易类型
+   */
+  transactionType?: string;
+  /**
+   * @description
+   *   起息日
+   * @format date
+   */
+  valueDate?: string;
+}
+
 export interface QueryCustomerInformationDto {
   /**
    * @description
@@ -792,6 +965,15 @@ export interface QueryHistoryRecordDto {
   isDeleteQueryOrder?: boolean;
 }
+export interface QueryInvoiceDetailDto {
+  /**
+   * @description
+   *   发票id
+   * @format int64
+   */
+  invoiceId?: number;
+}
+
 export interface QueryMainOrderDto {
   /**
    * @description
@@ -41,8 +41,10 @@ import type {
   ProductInformationDto,
   QueryAfterSalesInfoSnapshotDto,
   QueryAnnexDto,
+  QueryBankStatementDto,
   QueryCustomerInformationDto,
   QueryHistoryRecordDto,
+  QueryInvoiceDetailDto,
   QueryMainOrderDto,
   QueryReportFormsDto,
   ResetPwdVO,
@@ -4775,6 +4777,150 @@ export const postOrderErpUsersUpdatePass = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
+/** @description request parameter type for postServiceBankStatementDeleteBankStatement */
+export interface PostServiceBankStatementDeleteBankStatementOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: Dto;
+  };
+}
+
+/** @description response type for postServiceBankStatementDeleteBankStatement */
+export interface PostServiceBankStatementDeleteBankStatementResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceBankStatementDeleteBankStatementResponseSuccess =
+  PostServiceBankStatementDeleteBankStatementResponse[200];
+/**
+ * @description
+ *   删除银行流水
+ * @tags 银行流水
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceBankStatementDeleteBankStatement =
+  /* #__PURE__ */ (() => {
+    const method = 'post';
+    const url = '/service/bankStatement/deleteBankStatement';
+    function request(
+      option: PostServiceBankStatementDeleteBankStatementOption,
+    ): Promise<PostServiceBankStatementDeleteBankStatementResponseSuccess> {
+      return requester(request.url, {
+        method: request.method,
+        ...option,
+      }) as unknown as Promise<PostServiceBankStatementDeleteBankStatementResponseSuccess>;
+    }
+
+    /** http method */
+    request.method = method;
+    /** request url */
+    request.url = url;
+    return request;
+  })();
+
+/** @description request parameter type for postServiceBankStatementEditBankStatement */
+export interface PostServiceBankStatementEditBankStatementOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: Dto;
+  };
+}
+
+/** @description response type for postServiceBankStatementEditBankStatement */
+export interface PostServiceBankStatementEditBankStatementResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceBankStatementEditBankStatementResponseSuccess =
+  PostServiceBankStatementEditBankStatementResponse[200];
+/**
+ * @description
+ *   编辑银行流水
+ * @tags 银行流水
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceBankStatementEditBankStatement =
+  /* #__PURE__ */ (() => {
+    const method = 'post';
+    const url = '/service/bankStatement/editBankStatement';
+    function request(
+      option: PostServiceBankStatementEditBankStatementOption,
+    ): Promise<PostServiceBankStatementEditBankStatementResponseSuccess> {
+      return requester(request.url, {
+        method: request.method,
+        ...option,
+      }) as unknown as Promise<PostServiceBankStatementEditBankStatementResponseSuccess>;
+    }
+
+    /** http method */
+    request.method = method;
+    /** request url */
+    request.url = url;
+    return request;
+  })();
+
 /** @description response type for postServiceBankStatementExportTemplate */
 export interface PostServiceBankStatementExportTemplateResponse {
   /**
@@ -4901,6 +5047,133 @@ export const postServiceBankStatementImportBankStatementForm =
     return request;
   })();
+/** @description request parameter type for postServiceBankStatementQueryBankStatement */
+export interface PostServiceBankStatementQueryBankStatementOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: QueryBankStatementDto;
+  };
+}
+
+/** @description response type for postServiceBankStatementQueryBankStatement */
+export interface PostServiceBankStatementQueryBankStatementResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceBankStatementQueryBankStatementResponseSuccess =
+  PostServiceBankStatementQueryBankStatementResponse[200];
+/**
+ * @description
+ *   查询银行流水
+ * @tags 银行流水
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceBankStatementQueryBankStatement =
+  /* #__PURE__ */ (() => {
+    const method = 'post';
+    const url = '/service/bankStatement/queryBankStatement';
+    function request(
+      option: PostServiceBankStatementQueryBankStatementOption,
+    ): Promise<PostServiceBankStatementQueryBankStatementResponseSuccess> {
+      return requester(request.url, {
+        method: request.method,
+        ...option,
+      }) as unknown as Promise<PostServiceBankStatementQueryBankStatementResponseSuccess>;
+    }
+
+    /** http method */
+    request.method = method;
+    /** request url */
+    request.url = url;
+    return request;
+  })();
+
+/** @description response type for postServiceInvoiceCancelInvoiceAndBankStatement */
+export interface PostServiceInvoiceCancelInvoiceAndBankStatementResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceInvoiceCancelInvoiceAndBankStatementResponseSuccess =
+  PostServiceInvoiceCancelInvoiceAndBankStatementResponse[200];
+/**
+ * @description
+ *   取消发票与银行流水的关联
+ * @tags 发票
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceInvoiceCancelInvoiceAndBankStatement =
+  /* #__PURE__ */ (() => {
+    const method = 'post';
+    const url = '/service/invoice/cancelInvoiceAndBankStatement';
+    function request(): Promise<PostServiceInvoiceCancelInvoiceAndBankStatementResponseSuccess> {
+      return requester(request.url, {
+        method: request.method,
+      }) as unknown as Promise<PostServiceInvoiceCancelInvoiceAndBankStatementResponseSuccess>;
+    }
+
+    /** http method */
+    request.method = method;
+    /** request url */
+    request.url = url;
+    return request;
+  })();
+
 /** @description request parameter type for postServiceInvoiceDeleteInvoice */
 export interface PostServiceInvoiceDeleteInvoiceOption {
   /**
@@ -4972,6 +5245,77 @@ export const postServiceInvoiceDeleteInvoice = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
+/** @description request parameter type for postServiceInvoiceInvoiceWriteOff */
+export interface PostServiceInvoiceInvoiceWriteOffOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: Dto;
+  };
+}
+
+/** @description response type for postServiceInvoiceInvoiceWriteOff */
+export interface PostServiceInvoiceInvoiceWriteOffResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceInvoiceInvoiceWriteOffResponseSuccess =
+  PostServiceInvoiceInvoiceWriteOffResponse[200];
+/**
+ * @description
+ *   发票核销
+ * @tags 发票
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceInvoiceInvoiceWriteOff = /* #__PURE__ */ (() => {
+  const method = 'post';
+  const url = '/service/invoice/invoiceWriteOff';
+  function request(
+    option: PostServiceInvoiceInvoiceWriteOffOption,
+  ): Promise<PostServiceInvoiceInvoiceWriteOffResponseSuccess> {
+    return requester(request.url, {
+      method: request.method,
+      ...option,
+    }) as unknown as Promise<PostServiceInvoiceInvoiceWriteOffResponseSuccess>;
+  }
+
+  /** http method */
+  request.method = method;
+  /** request url */
+  request.url = url;
+  return request;
+})();
+
 /** @description request parameter type for postServiceInvoiceQueryInvoice */
 export interface PostServiceInvoiceQueryInvoiceOption {
   /**
@@ -5043,6 +5387,77 @@ export const postServiceInvoiceQueryInvoice = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
+/** @description request parameter type for postServiceInvoiceQueryInvoiceDetail */
+export interface PostServiceInvoiceQueryInvoiceDetailOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: QueryInvoiceDetailDto;
+  };
+}
+
+/** @description response type for postServiceInvoiceQueryInvoiceDetail */
+export interface PostServiceInvoiceQueryInvoiceDetailResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceInvoiceQueryInvoiceDetailResponseSuccess =
+  PostServiceInvoiceQueryInvoiceDetailResponse[200];
+/**
+ * @description
+ *   查看发票详情
+ * @tags 发票
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceInvoiceQueryInvoiceDetail = /* #__PURE__ */ (() => {
+  const method = 'post';
+  const url = '/service/invoice/queryInvoiceDetail';
+  function request(
+    option: PostServiceInvoiceQueryInvoiceDetailOption,
+  ): Promise<PostServiceInvoiceQueryInvoiceDetailResponseSuccess> {
+    return requester(request.url, {
+      method: request.method,
+      ...option,
+    }) as unknown as Promise<PostServiceInvoiceQueryInvoiceDetailResponseSuccess>;
+  }
+
+  /** http method */
+  request.method = method;
+  /** request url */
+  request.url = url;
+  return request;
+})();
+
 /** @description request parameter type for postServiceOrderAddOrder */
 export interface PostServiceOrderAddOrderOption {
   /**