feat: 添加结算相关字段

src/pages/platformSettlement/accountPayable/index.tsx

@@ -4,7 +4,7 @@
  * @Description: 应付账款结算
  */
 
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, Button, Modal, DatePicker, Tag, Space } from 'antd';
 import NiceForm from '@/components/NiceForm';
@@ -14,12 +14,15 @@ import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { schema } from './schema';
-import StatusActions from '../components/StatusActions';
 import StatusTag from '../components/StatusTag';
 import { PublicApi } from '@/services/api'
 import { Moment } from 'moment';
 import { ColumnsType } from 'antd/es/table';
 import EyePreview from '@/components/EyePreview';
+import useFetchColumns from '../hooks/useFetchColumns';
+import Voucher from '../components/Voucher';
+import UploadVoucherModal from '../components/UploadVoucherModal';
+import { priceFormat } from '@/utils/numberFomat'
 
 interface SearchParams {
   settlementName?: string,
@@ -35,10 +38,22 @@ interface SearchParams {
 const { RangePicker } = DatePicker;
 
 const formActions = createFormActions();
-const PLATFORM_PAYER = 4;
 const SettlementList = () => {
+  const {
+    handlePay,
+    viewVisible,
+    viewModalonCancel,
+    handleViewPayModal,
+    payModalOnCancel,
+    payModalVisible,
+    balanceInfo,
+    payVoucherInfo
+  } = useFetchColumns();
+
+  const [files, setFiles] = useState<any>([]);
   const [hasBrokerage, setHasBrokerage] = useState(true);
   const ref = useRef<any>({})
+
   const fetchListData = async (params) => {
     // /settle/accounts/platform/settlement/pagePayableSettlement
     const searchData = {
@@ -48,6 +63,7 @@ const SettlementList = () => {
     const res = await PublicApi.getSettleAccountsPlatformSettlementPagePayableSettlement(searchData)
     return res.data;
   }
+
   const columns: ColumnsType<any> = [
     {
       title: '结算单号',
@@ -61,15 +77,27 @@ const SettlementList = () => {
         )
       }
     },
-    {title: '结算日期', dataIndex: 'settlementDate'},
-    {title: '结算方式', dataIndex: 'settlementWayName'},
-    {title: '结算方', dataIndex: 'settlementName'},
-    {title: '总单数', dataIndex: 'totalCount'},
-    {title: '代收金额', dataIndex: 'collectAmount'},
-    {title: '佣金', dataIndex: 'brokerage'},
-    {title: '结算金额', dataIndex: 'amount'},
-    {title: '结算时间', dataIndex: 'settlementTime'},
-    {title: '支付方式', dataIndex: 'payWayName'},
+    { title: '结算日期', dataIndex: 'settlementDate' },
+    { title: '结算方式', dataIndex: 'settlementWayName' },
+    { title: '结算方', dataIndex: 'settlementName' },
+    { title: '总单数', dataIndex: 'totalCount' },
+    {
+      title: '代收金额',
+      dataIndex: 'collectAmount',
+      render: (text) => `￥${priceFormat(text)}`,
+    },
+    {
+      title: '佣金',
+      dataIndex: 'brokerage',
+      render: (text) => `￥${priceFormat(text)}`,
+    },
+    {
+      title: '结算金额',
+      dataIndex: 'amount',
+      render: (text) => `￥${priceFormat(text)}`,
+    },
+    { title: '结算时间', dataIndex: 'settlementTime' },
+    { title: '支付方式', dataIndex: 'payWayName' },
     {
       title: '结算状态', dataIndex: 'status',
       filters: [
@@ -88,20 +116,13 @@ const SettlementList = () => {
     {
       title: '操作',
       render: (text, record: any) => {
-        if(record.status === 1) {
+        if (record.status === 1) {
           return <a onClick={() => handleManualsettlement(record.id)}>手动结算</a>
         }
-        return (
-          <StatusActions
-            status={record.status <= 2 ? record.status : 4 }
-            id={record.id}
-            roleId={record.roleId}
-            excludes={[1, 3]}
-            settlementId={record.memberId || 1}
-            handleUpload={handleUploadVoucher}
-            type={PLATFORM_PAYER}
-          />
-        )
+        if (record.status === 2) {
+          return <a onClick={() => handlePay({id: record.id, settlementId: record.memberId, roleId: record.roleId})}>付款</a>
+        }
+        return <a onClick={() => handleViewPayModal({id: record.id})}>查看付款凭证</a>
       }
     }
   ]
@@ -119,15 +140,26 @@ const SettlementList = () => {
    *
    * @param params 手动结算
    */
-  const handleManualsettlement = (id) => {
-    PublicApi.postReportSettlementPlatformManualSettlement({id: id})
-    .then(({data, code}) => {
-      if(code === 1000) {
-        formActions.submit();
-      }
-    })
+  const handleManualsettlement = async (id: number) => {
+    const { data, code } = await PublicApi.postReportSettlementPlatformManualSettlement({id: id})
+    if(code === 1000) {
+      formActions.submit();
+    }
   }
 
+  const fetchVouchers = useCallback(async (id: number) => {
+    const { code, data } = await PublicApi.getSettleAccountsPlatformSettlementGetPayablePayProve({id: id.toString()})
+    if (code === 1000) {
+      setFiles(data);
+    }
+  }, [])
+
+  useEffect(() => {
+    if (payVoucherInfo !== null) {
+      fetchVouchers(payVoucherInfo.id);
+    }
+  }, [payVoucherInfo])
+
     /**
    * 上传凭证
    * @param params
@@ -184,6 +216,17 @@ const SettlementList = () => {
           }
         />
       </Card>
+      <UploadVoucherModal
+        visible={payModalVisible}
+        id={balanceInfo?.id}
+        roleId={balanceInfo?.roleId}
+        settlementId={balanceInfo?.settlementId}
+        handleUpload={handleUploadVoucher}
+        onCancel={payModalOnCancel}
+      />
+      <Modal width={548} title="查看付款凭证" onCancel={viewModalonCancel} visible={viewVisible} footer={null}>
+        <Voucher files={files} />
+      </Modal>
     </PageHeaderWrapper>
   )
 }

src/pages/platformSettlement/accountPayable/info.tsx

@@ -22,6 +22,7 @@ import moment from 'moment';
 import { PublicApi } from '@/services/api';
 import add from '@/asserts/add.png';
 import subtraction from '@/asserts/subtraction.png';
+import { priceFormat } from '@/utils/numberFomat';
 const formActions = createFormActions();
 
 const inintColumns = [
@@ -43,8 +44,12 @@ const inintColumns = [
     render: (text) => {
       return (
         <div style={{display: "flex", flexDirection: "row", alignItems: 'center'}}>
-          <img src={text > 0 ? add : subtraction} width={16} height={16} />
-          <span style={{marginLeft: '8px'}}>{text}</span>
+          {
+            (text !== 0 && (
+              <img src={text > 0 ? add : subtraction} width={16} height={16} />
+            )) || null
+          }
+          <span style={{marginLeft: '8px'}}>{priceFormat(Math.abs(text))}</span>
         </div>
       )
     }
@@ -63,8 +68,12 @@ const inintColumns = [
     render: (text) => {
       return (
         <div style={{display: "flex", flexDirection: "row", alignItems: 'center'}}>
-          <img src={text > 0 ? add : subtraction} width={16} height={16} />
-          <span style={{marginLeft: '8px'}}>{text}</span>
+          {
+            (text !== 0 && (
+              <img src={text > 0 ? add : subtraction} width={16} height={16} />
+            )) || null
+          }
+          <span style={{marginLeft: '8px'}}>{priceFormat(Math.abs(text))}</span>
         </div>
       )
     }
@@ -75,8 +84,12 @@ const inintColumns = [
     render: (text) => {
       return (
         <div style={{display: "flex", flexDirection: "row", alignItems: 'center'}}>
-          <img src={text > 0 ? add : subtraction} width={16} height={16} />
-          <span style={{marginLeft: '8px'}}>{text}</span>
+          {
+            (text !== 0 && (
+              <img src={text > 0 ? add : subtraction} width={16} height={16} />
+            )) || null
+          }
+          <span style={{marginLeft: '8px'}}>{priceFormat(Math.abs(text))}</span>
         </div>
       )
     }
@@ -133,7 +146,7 @@ const logisticsDetail: React.FC = () => {
     PublicApi.getSettleAccountsPlatformSettlementIsExistsBrokerage()
     .then(({data, code}) => {
       if(code === 1000 && !data) {
-        setColumns(inintColumns.filter((item) => blackList.includes(item.dataIndex)))
+        setColumns(inintColumns.filter((item) => !blackList.includes(item.dataIndex)))
       }
     })
   }, [])
@@ -205,7 +218,6 @@ const logisticsDetail: React.FC = () => {
             />
           }
         />
-
       </Card>
     </PageHeaderWrapper>
   )

src/pages/platformSettlement/components/UploadVoucherModal/index.tsx

+import React, { useState } from 'react';
+import { Space, Modal, Popconfirm, Button, } from 'antd';
+import UploadPayVoucher from '../UploadPayVoucher';
+
+interface FileType {
+  name: string,
+  proveUrl: string,
+}
+
+interface UploadVocherProps {
+  /**
+   * 结算方id
+   */
+  settlementId?: number,
+  /**
+   * 结算单id
+   */
+  id?: number
+  roleId?: number,
+  handleUpload: (params: any) => void,
+  visible: boolean,
+  onCancel: () => void,
+}
+// 待付款 状态 上传付款凭证
+const UploadVoucherModal: React.FC<UploadVocherProps> = (props) => {
+  const { settlementId, roleId, visible, onCancel} = props;
+  const [fileList, setFileList] = useState<FileType[]>([]);
+  const [isUploading, setIsUploading] = useState(false)
+
+
+  const getFileList = (list: FileType[], status) => {
+    if(status === 'done') {
+      setFileList(list);
+      setIsUploading(false)
+    } else {
+      setIsUploading(true);
+    }
+  }
+
+  const handleComfirm = (params) => {
+    props.handleUpload({onCancel: params.onCancel, id: params.id, fileList: params.fileList})
+  }
+
+  return (
+    <Modal
+      width={548}
+      title="上传付款凭证"
+      onCancel={onCancel}
+      visible={visible}
+      destroyOnClose
+      footer={(
+        <Space>
+          <Button onClick={onCancel}>取消</Button>
+          {
+            isUploading
+            ? <Popconfirm
+                title="还有文件正在上传，是否确认提交？"
+                okText="是"
+                cancelText="否"
+                onConfirm={() => handleComfirm({onCancel: onCancel, id: props.id, fileList: fileList})}
+              >
+                <Button type={"primary"}>确认</Button>
+              </Popconfirm>
+            : <Button
+                type={"primary"}
+                onClick={() => handleComfirm({onCancel: onCancel, id: props.id, fileList: fileList})}
+              >确认</Button>
+          }
+        </Space>
+      )}
+    >
+      <UploadPayVoucher roleId={roleId} id={settlementId} getFileList={getFileList} />
+    </Modal>
+
+  )
+}
+
+export default UploadVoucherModal

src/pages/platformSettlement/hooks/useFetchColumns.tsx

+import EyePreview from '@/components/EyePreview';
+import StatusTag from '../components/StatusTag';
+import { priceFormat } from '@/utils/numberFomat'
+// import StatusTag from '@/components/StatusTag';
+
+import React, { useState } from 'react';
+import moment from 'moment';
+
+type BalanceInfoType = { id: number, settlementId: number, roleId: number }
+const format = "YYYY-MM-DD HH:mm:ss"
+
+function useFetchColumns() {
+  /**
+   * 手动结算状态
+   */
+  const [manualStatus, setManualStatus] = useState<number | null>(null);
+  /**
+   * 付款弹框
+   */
+  const [payModalVisible, setPayModalVisible] = useState<boolean>(false);
+  /**
+   * 查看付款凭证弹框
+   */
+  const [viewVisible, setViewVisible] = useState<boolean>(false);
+  /**
+   *
+   * 获取当前结算单信息
+   */
+  const [balanceInfo, setBalanceInfo] = useState<BalanceInfoType | null>(null);
+  /**
+   * 付款凭证info
+   */
+  const [payVoucherInfo, setPayVoucherInfo] = useState<{ id: number } | null>(null);
+  /**
+   *
+   * 确认对账完成Info
+   */
+  const [reconciliationVisible, setReconciliationVisible] = useState<boolean>(false);
+  /**
+   * 确认对账完成info
+   */
+  const [reconciliationInfo, setReconciliationInfo] = useState<{payName: string, settlementDate: string, id: number} | null>(null)
+  /**
+   * 确认付款完成visible
+   */
+  const [confirmPayVisible, setConfirmPayVisible] = useState<boolean>(false);
+  /**
+   * 确认付款完成Info
+   */
+  const [confirmPayInfo, setConfirmPayInfo] = useState<{id: number} | null>(null);
+
+
+  /**
+   *
+   * @param id: 结算单id
+   * @param settlementId 结算方id
+   * @param roleId 结算方角色id
+   *
+   */
+  const handlePay = (params: BalanceInfoType) => {
+    setBalanceInfo(params)
+    setPayModalVisible(true);
+  }
+
+  const handleManualsettlement = (id: number | null) => {
+    setManualStatus(id);
+  }
+
+  const payModalOnCancel = () => {
+    setPayModalVisible(false)
+  }
+
+  /**
+   * 查看支付凭证Cancel
+   */
+  const viewModalonCancel = () => {
+    setViewVisible(false);
+  }
+
+  const handleViewPayModal = (params: { id: number }) => {
+    setPayVoucherInfo(params)
+    setViewVisible(true);
+  }
+
+  const handleReconciledComfirm = (params: any) => {
+    setReconciliationInfo(params);
+    setReconciliationVisible(true);
+  }
+
+  const reconciliationOnCancel = () => {
+    setReconciliationVisible(false);
+  }
+
+  /**
+   * 确认付款凭证
+   */
+  const handleComfirmCompletePaymentStatus = (params: {id: number}) => {
+    setConfirmPayInfo(params);
+    /**
+     * 这里确认付款完成 收款方需要查看付款凭证
+     */
+    setPayVoucherInfo(params);
+    setConfirmPayVisible(true);
+  }
+
+  const confirmPayOnCancel = () => {
+    setConfirmPayVisible(false)
+  }
+
+  return {
+    manualStatus,
+    handleManualsettlement,
+    handlePay,
+    viewVisible,
+    payModalVisible,
+    balanceInfo,
+    payModalOnCancel,
+    viewModalonCancel,
+    payVoucherInfo,
+    reconciliationVisible,
+    reconciliationInfo,
+    confirmPayInfo,
+    confirmPayVisible,
+    reconciliationOnCancel,
+    confirmPayOnCancel,
+    handleReconciledComfirm,
+    handleComfirmCompletePaymentStatus,
+    handleViewPayModal
+  }
+}
+
+export default useFetchColumns

src/pages/platformSettlement/score/list/index.tsx

@@ -4,7 +4,7 @@
  * @Description: 应付账款结算
  */
 
-import React, { useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, Button, Modal, DatePicker, Tag, Space } from 'antd';
 import NiceForm from '@/components/NiceForm';
@@ -14,13 +14,15 @@ import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { schema } from './schema';
-import StatusActions from '../../components/StatusActions';
 import StatusTag from '../../components/StatusTag';
 import { PublicApi } from '@/services/api'
 import { Moment } from 'moment';
 import { ColumnsType } from 'antd/es/table';
 import EyePreview from '@/components/EyePreview';
 import moment from 'moment';
+import UploadVoucherModal from '../../components/UploadVoucherModal';
+import useFetchColumns from '../../hooks/useFetchColumns';
+import Voucher from '../../components/Voucher';
 
 interface SearchParams {
   settlementName?: string,
@@ -38,7 +40,20 @@ const { RangePicker } = DatePicker
 const formActions = createFormActions();
 const SCORE_PAYER = 6;
 const SettlementList = () => {
+  const {
+    handlePay,
+    viewVisible,
+    viewModalonCancel,
+    handleViewPayModal,
+    payModalOnCancel,
+    payModalVisible,
+    balanceInfo,
+    payVoucherInfo
+  } = useFetchColumns();
+
+  const [files, setFiles] = useState<any>([]);
   const ref = useRef<any>({})
+
   const fetchListData = async (params) => {
     // /settle/accounts/platform/settlement/pagePayableSettlement
     const searchData = {
@@ -95,20 +110,14 @@ const SettlementList = () => {
     {
       title: '操作',
       render: (text, record: any) => {
-        if(record.status === 1) {
+        if (record.status === 1) {
           return <a onClick={() => handleManualsettlement(record.id)}>手动结算</a>
         }
-        return (
-          <StatusActions
-            status={record.status <= 2 ? record.status : 4 }
-            id={record.id}
-            excludes={[1, 3]}
-            settlementId={record.memberId}
-            roleId={record.roleId}
-            handleUpload={handleUploadVoucher}
-            type={SCORE_PAYER}
-          />
-        )
+        // 待付款
+        if (record.status === 2) {
+          return <a onClick={() => handlePay({id: record.id, settlementId: record.memberId, roleId: record.roleId})}>付款</a>
+        }
+        return <a onClick={() => handleViewPayModal({id: record.id})}>查看付款凭证</a>
       }
     }
   ]
@@ -126,6 +135,18 @@ const SettlementList = () => {
     })
   }
 
+  const fetchVouchers = useCallback(async (id: number) => {
+    const { code, data } = await PublicApi.getSettleAccountsPlatformScoreSettlementGetPayablePayProve({id: id.toString()})
+    if (code === 1000) {
+      setFiles(data);
+    }
+  }, [])
+
+  useEffect(() => {
+    if (payVoucherInfo !== null) {
+      fetchVouchers(payVoucherInfo.id);
+    }
+  }, [payVoucherInfo])
 
     /**
   * 上传凭证
@@ -183,6 +204,17 @@ const SettlementList = () => {
           }
         />
       </Card>
+      <UploadVoucherModal
+        visible={payModalVisible}
+        id={balanceInfo?.id}
+        roleId={balanceInfo?.roleId}
+        settlementId={balanceInfo?.settlementId}
+        handleUpload={handleUploadVoucher}
+        onCancel={payModalOnCancel}
+      />
+      <Modal width={548} title="查看付款凭证" onCancel={viewModalonCancel} visible={viewVisible} footer={null}>
+        <Voucher files={files} />
+      </Modal>
     </PageHeaderWrapper>
   )
 }