feat: update 发票对账

zhongnanhuang
1 parent 6b0d7fb3
Showing 2 changed files with 94 additions and 109 deletions
src/pages/Invoice/components/BankChooseModal.tsx
src/pages/Invoice/index.tsx
@@ -7,28 +7,36 @@ import {
 } from '@/services';
 import { enumValueToLabel, formatDateTime } from '@/utils';
 import { formatDate } from '@/utils/time';
-import {
-  ActionType,
-  ProCard,
-  ProFormInstance,
-  ProTable,
-} from '@ant-design/pro-components';
+
+import { ActionType, ProCard, ProTable } from '@ant-design/pro-components';
 import { Button, Divider, Flex, Modal, Tag, message } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { 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 [selectedStatementIdSet, setSelectedStatementIdSet] = useState(
+    new Set(),
+  );
+
+  // 添加元素到Set
+  const addElement = (element) => {
+    setSelectedStatementIdSet((prevSet) => new Set([...prevSet, element]));
+  };
+
+  // 从Set中删除元素
+  const removeElement = (element) => {
+    setSelectedStatementIdSet((prevSet) => {
+      const newSet = new Set(prevSet);
+      newSet.delete(element);
+      return newSet;
+    });
+  };
+
   const [btnLoading, setBtnLoading] = useState(false);
   const actionRef = useRef<ActionType>();
-  const formRef = useRef<ProFormInstance>();
-
   const getTableCellText = (target: any) => {
     if (!target) {
       return '';
@@ -41,21 +49,6 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
     return target;
   };
-  const loadBankData = async (params: any) => {
-    setLoading(true);
-    let searchParams = formRef?.current?.getFieldFormatValue();
-    console.log(searchParams);
-    const res = await postServiceBankStatementQueryBankStatement({
-      data: { ...searchParams, ...params, status: 'ABNORMAL' },
-    });
-    if (res) {
-      setBankData(res?.data?.data || []);
-      setTotal(res?.data?.total || 0);
-    }
-
-    setLoading(false);
-  };
-
   /**
    * 加载银行流水列表表格的各个列格式
    */
@@ -65,6 +58,10 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
       let dataIndex = item.dataIndex;
       let dataType = item.valueType;
+      if (item.dataIndex === 'status') {
+        newItem.hideInSearch = true;
+      }
+
       newItem.render = (text, record) => {
         let textValue = record[dataIndex];
@@ -93,7 +90,6 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
           case 'status': {
             //这里状态不显示在筛选条件中，只能筛异常的流水
-            newItem.hideInSearch = true;
             return (
               <EllipsisDiv
                 text={enumValueToLabel(
@@ -133,19 +129,24 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
           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);
+            //已经选中，取消选中
+            if (selectedStatementIdSet.has(record.id)) {
+              setSelectedStatement(
+                selectedStatement.filter((item) => {
+                  return item.id !== record.id;
+                }),
+              );
+              removeElement(record.id);
+            } else {
+              //添加到已选中区域中
+              let newSelectedStatement = [...selectedStatement];
+              newSelectedStatement.push(record);
+              setSelectedStatement(newSelectedStatement);
+              addElement(record.id);
+            }
           }}
         >
-          选中
+          {selectedStatementIdSet.has(record.id) ? '取消选中' : '选中'}
         </Button>,
       ],
     });
@@ -153,68 +154,6 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
     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}
-        columnsState={{
-          persistenceKey: 'pro-table-singe-demos',
-          persistenceType: 'localStorage',
-          defaultValue: {
-            option: { fixed: 'right', disable: true },
-          },
-          onChange(value) {
-            console.log('value: ', value);
-          },
-        }}
-        search={{
-          labelWidth: 'auto',
-          span: 8,
-        }}
-        options={{
-          setting: {
-            listsHeight: 400,
-          },
-          reload: () => {
-            loadBankData({ current: 1 });
-          },
-        }}
-        form={{}}
-        onSubmit={() => {
-          loadBankData({ current: 1 });
-        }}
-        onReset={() => {
-          formRef.current?.resetFields();
-          loadBankData({ current: 1 });
-        }}
-        dateFormatter="string"
-        headerTitle="银行流水"
-        scroll={{ x: 1400, y: 360 }}
-        toolBarRender={() => []}
-      />
-    );
-  };
-
   const removeSelectedStatement = (record: any) => {
     console.log(record);
     console.log(selectedStatement);
@@ -258,11 +197,6 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
     return tags;
   };
-  useEffect(() => {
-    message.info('1');
-    loadBankData({ current: page, pageSize: pageSize });
-  }, []);
-
   return (
     <>
       <Modal
@@ -305,7 +239,59 @@ export default ({ invoiceId, setVisible, onClose }) =&gt; {
           </Flex>
         </ProCard>
-        <BankTable actionRef={actionRef}></BankTable>
+        <ProTable
+          columns={bankStatementColumnsInit()}
+          actionRef={actionRef}
+          cardBordered
+          pagination={{
+            pageSize: 10,
+          }}
+          editable={{
+            type: 'multiple',
+            onSave: async (rowKey, data) => {
+              console.log(rowKey, data);
+            },
+            actionRender: (row, config, defaultDom) => [
+              defaultDom.save,
+              defaultDom.cancel,
+            ],
+          }}
+          request={async (params) => {
+            const res = await postServiceBankStatementQueryBankStatement({
+              data: { ...params },
+            });
+            if (res) {
+              return {
+                data: res?.data?.data || [],
+                total: res?.data?.total || 0,
+              };
+            }
+          }}
+          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',
+          }}
+          options={{
+            setting: {
+              listsHeight: 400,
+            },
+          }}
+          form={{}}
+          dateFormatter="string"
+          headerTitle="银行流水列表"
+          scroll={{ x: 1400, y: 360 }}
+          toolBarRender={() => []}
+        />
       </Modal>
     </>
   );
@@ -381,7 +381,6 @@ const InvoicePage = () =&gt; {
             icon={<PlusOutlined />}
             onClick={() => {
               setBankImportModalVisible(true);
-              // console.log("test")
             }}
             type="primary"
           >