feat:对账单

config/config.js

@@ -162,6 +162,24 @@ export default {
               icon: 'smile',
               component: './distributionArea',
             },
+            {
+              path: '/reconciliationQuery',
+              name: 'reconciliationQuery',
+              icon: 'smile',
+              component: './ReconciliationQuery',
+            },
+            {
+              path: '/settlementSheet',
+              name: 'settlementSheet',
+              icon: 'smile',
+              component: './SettlementSheet',
+            },
+            {
+              path: '/paymentMange',
+              name: 'paymentMange',
+              icon: 'smile',
+              component: './PaymentMange',
+            },
             // {
             //   path: '/GoodsManage-new',
             //   name: 'GoodsManageNew',

config/env.config.js

@@ -6,6 +6,7 @@ const envAPi = {
   kdspOpApi: 'https://kdsp-operation-test2.liangkebang.net',
   kdspApi: 'https://sc-op-api-test2.liangkebang.net',
   goodsApi: 'https://sc-op-api-test2.liangkebang.net',
+  querysApi: 'https://sc-settlement-api-test2.liangkebang.net',
   // goodsApi: '//192.168.188.111:7000',
   prologueDomain: 'https://mall-test2.liangkebang.net',
   qiniuHost: 'https://appsync.lkbang.net',

src/layouts/BasicLayout.jsx

@@ -114,9 +114,7 @@ const BasicLayout = props => {
           </Menu>
         </Sider>
         <Layout style={{ zIndex: 1 }}>
-          <Authorized authority={authorized.authority} noMatch={noMatch}>
-            {children}
-          </Authorized>
+          <Authorized noMatch={noMatch}>{children}</Authorized>
         </Layout>
       </Layout>
     </div>

src/pages/PaymentMange/ToExamine/data.js

+import React from 'react';
+import { Button } from 'antd';
+
+export function renderModal() {
+  return [
+    <Button type="primary" key="cancel" onClick={() => this.handleCancel()}>
+      取消
+    </Button>,
+    <Button type="primary" onClick={() => this.handleSubmit} key="save">
+      提交
+    </Button>,
+  ];
+}
+
+export function detailsModal() {
+  return [
+    <Button type="primary" key="cancel" onClick={() => this.handleCancel()}>
+      取消
+    </Button>,
+    <Button type="primary" onClick={() => this.handleDownload()} key="down">
+      下载
+    </Button>,
+  ];
+}
+
+export const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};

src/pages/PaymentMange/ToExamine/index.jsx

+import React, { Component } from 'react';
+import { Modal, Input, Button, Icon, notification, Form } from 'antd';
+import styles from '../style.less';
+import { renderModal, detailsModal, formItemLayout } from './data';
+import Upload from './upload';
+import { uploadBill } from '../service';
+
+const { Item: FormItem } = Form;
+
+class toExamine extends Component {
+  uploadRef = React.createRef();
+
+  handleCancel = () => {
+    const { resetFields, getFieldValue } = this.props.form;
+    const { clearFileList } = this.uploadRef.current;
+    clearFileList();
+    resetFields();
+    this.props.close();
+  };
+
+  normFile = fileList => fileList;
+
+  handleSubmit = async () => {
+    const {
+      form: { validateFields },
+      toExamineData: { id },
+    } = this.props;
+    validateFields(async (err, values) => {
+      if (err) {
+        return;
+      }
+      const params = {
+        filePath: values?.fileList[0].url,
+        fileName: values?.fileList[0].name,
+        id,
+      };
+      const data = await uploadBill(params);
+      if (data.businessCode === '0000') {
+        this.handleCancel();
+        notification.success({ message: '上传成功' });
+      }
+    });
+  };
+
+  handleDownload = () => {
+    const {
+      toExamineData: { url },
+    } = this.props;
+    window.open(url);
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+      visible,
+      status,
+      toExamineData: { filePath, fileName, refuseReason },
+    } = this.props;
+    const listFile = [{ url: filePath, name: fileName }];
+    return (
+      <Modal
+        width={400}
+        title={status === 1 ? '上传发票' : '查看发票'}
+        visible={visible}
+        onCancel={() => this.handleCancel()}
+        footer={status === 1 ? renderModal.call(this) : detailsModal.call(this)}
+        className={styles.textArea}
+      >
+        <Form className="login-form" {...formItemLayout}>
+          <FormItem label="上传发票">
+            {getFieldDecorator('fileList', {
+              rules: [{ required: true, message: '请上传发票' }],
+              valuePropName: 'fileList',
+              getValueFromEvent: this.normFile,
+              initialValue: status === 1 ? [] : listFile,
+            })(<Upload max={1} ref={this.uploadRef} status={status} />)}
+          </FormItem>
+          {status === 2 ? (
+            <FormItem label="备注">
+              {getFieldDecorator('remark', {
+                initialValue: refuseReason,
+              })(<Input.TextArea rows={5} disabled />)}
+            </FormItem>
+          ) : (
+            ''
+          )}
+        </Form>
+      </Modal>
+    );
+  }
+}
+export default Form.create()(toExamine);

src/pages/PaymentMange/ToExamine/upload.jsx

+import { Upload, Icon, Modal, message, Button } from 'antd';
+import React, { useState, useEffect } from 'react';
+import config from '../../../../config/env.config';
+import styles from '../style.less';
+import { qiniuToken } from '@/services/qiniu';
+
+const qiniu = require('@/utils/qiniu.min.js');
+
+const { qiniuHost } = config;
+
+let token = null;
+
+class PicturesWall extends React.Component {
+  state = {
+    fileList: [],
+  };
+
+  async componentDidMount() {
+    this.initFileList(this.props.fileList || []);
+    if (this.props.status === 1) {
+      token = await qiniuToken();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps?.fileList?.fileList) {
+      this.initFileList(nextProps.fileList || []);
+    }
+  }
+
+  initFileList = fileList => {
+    const fileLists =
+      fileList.map((item, index) => ({
+        url: item.url,
+        name: item.name ? item.name : '发票',
+        uid: index,
+        status: 'done',
+      })) || [];
+    this.setState({ fileList: fileLists });
+  };
+
+  clearFileList = () => {
+    this.setState({
+      fileList: [],
+    });
+  };
+
+  customRequest = ({ file, onError, onSuccess }) => {
+    const lastFile = file.name.split('.');
+    const index = lastFile.length - 1;
+    const types = ['pdf', 'doc', 'docx', 'zip', 'rar', 'png', 'jpeg'];
+    if (!types.includes(lastFile[index])) {
+      message.error('文件格式错误！');
+      return;
+    }
+    const vm = this;
+    const observable = qiniu.upload(file, null, token);
+    const observer = {
+      next() {
+        // ...
+      },
+      error() {
+        onError(file);
+        // ...
+      },
+      complete(res) {
+        const comFile = file;
+        const url = `${qiniuHost}/${res.hash}`;
+        comFile.url = url;
+        const list = vm.state.fileList;
+        list.push({
+          url: file.url,
+          name: file.name,
+          uid: list.length,
+          status: 'done',
+        });
+        vm.setState({ fileList: [...list] });
+        vm.props.onChange(list);
+
+        onSuccess(comFile);
+        // ...
+      },
+    };
+    observable.subscribe(observer); // 上传开始
+  };
+
+  clearFileList = () => {
+    this.setState({
+      fileList: [],
+    });
+  };
+
+  render() {
+    const { fileList } = this.state;
+    const { status } = this.props;
+
+    const uploadButton = (
+      <div className={styles.uploadButton}>
+        <Icon type="upload" />
+        <span style={{ paddingLeft: '10px' }}>点击上传发票</span>
+      </div>
+    );
+    const { max } = this.props;
+    return (
+      <div className="clearfix">
+        <Upload
+          {...this.props}
+          customRequest={this.customRequest}
+          listType="text"
+          fileList={fileList}
+          onRemove={status === 1 ? this.clearFileList : ''}
+        >
+          {max && fileList.length >= max ? null : uploadButton}
+        </Upload>
+      </div>
+    );
+  }
+}
+export default PicturesWall;

src/pages/PaymentMange/data.js

+import React from 'react';
+import { Button, Switch, Popconfirm } from 'antd';
+import styles from './style.less';
+
+export const payStateEnum = {
+  1: { text: '待申请' },
+  2: { text: '待审批' },
+  3: { text: '已通过' },
+  4: { text: '待打款' },
+  5: { text: '已打款' },
+};
+
+export const orderStateNum = {
+  1: { text: '待上传' },
+  2: { text: '待审核' },
+  3: { text: '未通过' },
+  4: { text: '已通过' },
+};
+
+export const redInvoiceState = {
+  1: { text: '是', actionValue: 2 },
+  2: { text: '否', actionValue: 1 },
+};
+export const onChangeActiveState = async ({ channelId, activeState }) => {
+  console.log(channelId, activeState);
+};
+
+export function columns(res) {
+  return [
+    {
+      title: '供应商名称',
+      dataIndex: 'supplierName',
+      width: '150px',
+      hideInSearch: true,
+    },
+    {
+      title: '付款单批次号',
+      dataIndex: 'payBatchNo',
+      width: '160px',
+    },
+    {
+      title: '结算单生成日期',
+      key: 'dateTimeRange',
+      dataIndex: 'createdAtRange',
+      valueType: 'dateRange',
+      width: '120px',
+      hideInTable: true,
+      initialValue: [],
+      align: 'center',
+    },
+    {
+      title: '打款日期',
+      key: 'payTimeRange',
+      dataIndex: 'payAtRange',
+      valueType: 'dateRange',
+      width: '120px',
+      hideInTable: true,
+      initialValue: [],
+      align: 'center',
+    },
+    {
+      title: '帐单确认周期',
+      dataIndex: 'createdAtRange',
+      key: 'created',
+      hideInSearch: true,
+      align: 'center',
+      width: '160px',
+      render: (text, record) => `${record.billPeriodStart}-${record.billPeriodEnd}`,
+    },
+    {
+      title: '付款单生成日期',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      hideInSearch: true,
+      align: 'center',
+      width: '160px',
+    },
+    {
+      title: '销售总额',
+      dataIndex: 'saleAmount',
+      width: '100px',
+      hideInSearch: true,
+    },
+    {
+      title: '退款总额',
+      dataIndex: 'refundAmount',
+      width: '100px',
+      hideInSearch: true,
+    },
+    {
+      title: '红字金额',
+      dataIndex: 'pastRefundAmount',
+      width: '100px',
+      hideInSearch: true,
+    },
+    {
+      title: '蓝字金额',
+      dataIndex: 'currentRefundAmount',
+      width: '100px',
+      hideInSearch: true,
+    },
+    {
+      title: '应付金额',
+      dataIndex: 'payableAmount',
+      width: '100px',
+      hideInSearch: true,
+    },
+    {
+      title: '是否缺少红字发票',
+      dataIndex: 'redInvoiceState',
+      valueEnum: redInvoiceState,
+    },
+    {
+      title: '付款状态',
+      dataIndex: 'payState',
+      valueEnum: payStateEnum,
+      width: '110px',
+    },
+    {
+      title: '发票状态',
+      dataIndex: 'blueInvoiceState',
+      valueEnum: orderStateNum,
+      width: '110px',
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      valueType: 'option',
+      key: 'option',
+      align: 'center',
+      fixed: 'right',
+      width: 200,
+      render: (_, row) => (
+        <div>
+          <Button
+            type="primary"
+            disabled={row.payState !== 1}
+            className={styles.button}
+            onClick={() => res.edit(0, row)}
+          >
+            申请结算
+          </Button>
+          <Button
+            type="primary"
+            disabled={!(row.payState === 3 && row.blueInvoiceState === 1)}
+            className={styles.button}
+            onClick={() => res.edit(1, row)}
+          >
+            上传发票
+          </Button>
+          <Button
+            type="primary"
+            disabled={row.blueInvoiceState !== 2}
+            className={styles.button}
+            onClick={() => res.edit(2, row)}
+          >
+            查看发票
+          </Button>
+          <Button type="primary" className={styles.button} onClick={() => res.edit(3, row)}>
+            下载账单
+          </Button>
+        </div>
+      ),
+    },
+  ];
+}
+
+export const toolBarRender = onExport => () => [];

src/pages/PaymentMange/index.jsx

+/* eslint-disable no-shadow */
+
+import { Button, notification, Modal, Spin } from 'antd';
+import React, { useRef, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import { saveAs } from 'file-saver';
+import { format } from 'date-fns';
+import ToExamineModal from './ToExamine';
+import { columns, toolBarRender } from './data';
+import {
+  query,
+  selfPaymentExport,
+  selfPaymentexportDetail,
+  settlement,
+  merchantView,
+} from './service';
+
+const { confirm } = Modal;
+
+const PaymentMange = () => {
+  const actionRef = useRef();
+  const formRef = useRef();
+  const [toExamineData, settoExamineData] = useState({});
+  const [loading, setloading] = useState(false);
+  const [status, setstatus] = useState(1);
+  const [toExamineModalVisibel, setToExamineModalVisibel] = useState(false);
+
+  const reload = () => {
+    if (actionRef.current) {
+      actionRef.current.reload();
+    }
+  };
+
+  // 下载账单
+  const exportDetail = async params => {
+    setloading(true);
+    const data = await selfPaymentexportDetail(params);
+    const blob = new Blob([data]);
+    saveAs(blob, `账单明细-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`);
+    setloading(false);
+  };
+  // 申请结算
+  const applySettlement = async params => {
+    setloading(true);
+    const data = await settlement(params);
+    if (data.businessCode === '0000') {
+      reload();
+      notification.success({ message: '申请成功' });
+    }
+    setloading(false);
+  };
+  const showConfirm = params => {
+    confirm({
+      title: '申请结算',
+      content: '现在结算？',
+      onOk() {
+        applySettlement(params);
+      },
+    });
+  };
+  // 查看发票
+  const invoiceDetail = async params => {
+    const data = await merchantView(params);
+    if (data.businessCode === '0000') {
+      settoExamineData({ ...data.data });
+      setToExamineModalVisibel(true);
+    }
+  };
+  // 0申请结算 1上传发票 2查看发票 3下载账单
+  const edit = async (status, { id }) => {
+    if (status === 0) {
+      showConfirm(id);
+    } else if (status === 1) {
+      setstatus(status);
+      settoExamineData({ id });
+      setToExamineModalVisibel(true);
+    } else if (status === 2) {
+      setstatus(status);
+      invoiceDetail(id);
+    } else if (status === 3) {
+      exportDetail(id);
+    }
+  };
+
+  const onColse = () => {
+    if (status === 1) {
+      reload();
+    }
+    setToExamineModalVisibel(false);
+  };
+
+  const onExport = async () => {
+    const params = formRef.current.getFieldsValue();
+    setloading(true);
+    const data = await selfPaymentExport(params);
+    const blob = new Blob([data]);
+    saveAs(blob, `账单明细-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`);
+    setloading(false);
+  };
+
+  const onToolBarRender = toolBarRender();
+
+  const res = {
+    edit,
+  };
+
+  const searchRender = ({ searchText, resetText }, { form }) => [
+    <Button
+      key="search"
+      type="primary"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        form?.submit();
+      }}
+    >
+      {searchText}
+    </Button>,
+    <Button
+      key="rest"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        form?.resetFields();
+      }}
+    >
+      {resetText}
+    </Button>,
+    <Button
+      key="export"
+      type="primary"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        onExport();
+      }}
+    >
+      导出
+    </Button>,
+  ];
+
+  return (
+    <Spin tip="Loading..." spinning={loading} delay={100}>
+      <PageHeaderWrapper>
+        <ProTable
+          actionRef={actionRef}
+          formRef={formRef}
+          request={params => query({ ...params })}
+          columns={columns(res)}
+          rowKey={r => r.id}
+          search={{
+            collapsed: false,
+            optionRender: searchRender,
+          }}
+          bordered
+          toolBarRender={onToolBarRender}
+          scroll={{ x: '1700px' }}
+        />
+
+        <ToExamineModal
+          visible={toExamineModalVisibel}
+          toExamineData={toExamineData}
+          status={status}
+          close={() => {
+            onColse();
+          }}
+        />
+      </PageHeaderWrapper>
+    </Spin>
+  );
+};
+
+export default PaymentMange;

src/pages/PaymentMange/service.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+
+// 分页查询所有数据
+const { querysApi } = config;
+
+export async function query(params) {
+  const queryParams = {
+    pageSize: params.pageSize || 10,
+    pageNo: params.current || 1,
+    payBatchNo: params?.payBatchNo,
+    payBeginDate: params?.dateTimeRange?.[0],
+    payEndDate: params?.dateTimeRange?.[1],
+    paidBeginDate: params?.payTimeRange?.[0],
+    paidEndDate: params?.payTimeRange?.[1],
+    redInvoiceState: params?.redInvoiceState,
+    blueInvoiceState: params?.blueInvoiceState,
+    payState: params?.payState,
+  };
+  const { data } = await request.post('/selfPaymentBill/merchant/page', {
+    prefix: querysApi,
+    data: queryParams,
+  });
+  return {
+    data: data.records,
+    total: data.total,
+  };
+}
+
+export async function qiniuToken() {
+  const data = await request.get('/upload/getToken', {
+    prefix: config.opapiHost,
+  });
+  return data?.uptoken;
+}
+// 付款单导出
+export async function selfPaymentExport(params) {
+  const queryParams = {
+    payBatchNo: params?.payBatchNo,
+    payBeginDate: params?.dateTimeRange?.[0],
+    payEndDate: params?.dateTimeRange?.[1],
+    paidBeginDate: params?.payTimeRange?.[0],
+    paidEndDate: params?.payTimeRange?.[1],
+    redInvoiceState: params?.redInvoiceState,
+    blueInvoiceState: params?.blueInvoiceState,
+    payState: params?.payState,
+  };
+  return request.post('/selfPaymentBill/merchant/export', {
+    prefix: querysApi,
+    data: queryParams,
+  });
+}
+// 付款单导出
+export async function selfPaymentexportDetail(params) {
+  return request.post('/selfPaymentBill/merchant/exportDetail', {
+    prefix: querysApi,
+    data: params,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8',
+    },
+  });
+}
+//  申请结算单
+export async function settlement(params) {
+  return request.get(`/selfPaymentBill/merchant/apply/settlement/${params}`, {
+    prefix: querysApi,
+  });
+}
+
+//  上传发票
+export async function uploadBill(params) {
+  return request.post('/selfPaymentBill/merchant/upload/bill', {
+    prefix: querysApi,
+    data: params,
+  });
+}
+
+//  查看发票
+export async function merchantView(params) {
+  return request.get(`/selfPaymentBill/merchant/view/${params}`, {
+    prefix: querysApi,
+  });
+}

src/pages/PaymentMange/style.less

+.button {
+  margin-bottom: 10px;
+}
+
+.uploadButton {
+  padding: 5px 10px;
+  border: 1px solid #cecece;
+  cursor: pointer;
+}
+
+.textArea {
+  :global {
+    .ant-modal-footer {
+      text-align: center;
+    }
+    .ant-btn-primary {
+      margin-left: 20px;
+    }
+  }
+}

src/pages/ReconciliationQuery/data.js

+import { Button } from 'antd';
+import React from 'react';
+
+export const activeStateEnum = {
+  10: { text: '销售' },
+  20: { text: '售后' },
+};
+
+export const orderStateNum = {
+  1: { text: '待确认' },
+  2: { text: '已确认' },
+  3: { text: '已生成结算单' },
+};
+
+export const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    hideInSearch: true,
+    width: '50px',
+    render: (text, record, index) => `${index + 1}`,
+  },
+  {
+    title: '供应商名称',
+    dataIndex: 'supplierName',
+    width: '150px',
+    hideInSearch: true,
+  },
+  {
+    title: '结算单批次号',
+    dataIndex: 'settleBatchNo',
+    width: '160px',
+  },
+  {
+    title: '账单日期',
+    key: 'dateTimeRange',
+    dataIndex: 'createdAtRange',
+    valueType: 'dateTimeRange',
+    width: '120px',
+    hideInTable: true,
+    initialValue: [],
+    align: 'center',
+  },
+  {
+    title: '账单日期',
+    dataIndex: 'billDateStr',
+    key: 'billDateStr',
+    hideInSearch: true,
+    align: 'center',
+    width: '160px',
+  },
+  {
+    title: '账单类型',
+    dataIndex: 'billType',
+    valueEnum: activeStateEnum,
+    width: '120px',
+    filters: false,
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    width: '100px',
+    hideInSearch: true,
+  },
+  {
+    title: '笔数',
+    dataIndex: 'quantity',
+    width: '100px',
+    hideInSearch: true,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueEnum: orderStateNum,
+    width: '100px',
+    filters: false,
+  },
+];
+
+export const toolBarRender = gather => {
+  const { onDownload, confirmAction } = gather;
+  return () => [
+    <Button type="primary" style={{ marginRight: '20px' }} onClick={onDownload}>
+      下载
+    </Button>,
+    <Button type="primary" onClick={confirmAction}>
+      确认
+    </Button>,
+  ];
+};

src/pages/ReconciliationQuery/index.jsx

+/* eslint-disable no-shadow */
+import { Button, Upload, notification, Spin } from 'antd';
+import React, { useRef, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import { saveAs } from 'file-saver';
+import { format } from 'date-fns';
+import { columns, toolBarRender } from './data';
+import { query, confirmSelfBill, downloadSelfBillDetail } from './service';
+
+const ReconciliationQuery = () => {
+  const actionRef = useRef();
+  const [selectedRowKeys, setselectedRowKeys] = useState([]);
+  const [selectedRows, setselectedRows] = useState([]);
+  const [loading, setloading] = useState(false);
+
+  const reload = () => {
+    if (actionRef.current) {
+      actionRef.current.reload();
+    }
+  };
+
+  // 检查是否是同类型的
+  const checkedBillType = data => {
+    const billType = data[0]?.billType;
+    const sameData = data.filter(item => item.billType === billType);
+    if (data.length === sameData.length && sameData.length < 32) {
+      return true;
+    }
+    if (sameData.length > 31) {
+      notification.error({ message: '最多选择31条数据账单' });
+      return false;
+    }
+    notification.error({ message: '不同账单类型不可批量操作' });
+    return false;
+  };
+
+  // 检查是否是确认账单
+  const checkedStatus = data => {
+    const sameData = data.filter(item => item.status === 1);
+    if (sameData.length > 0 && data.length === sameData.length) {
+      return true;
+    }
+    if (!sameData.length) {
+      notification.error({ message: '请选择数据账单' });
+      return false;
+    }
+    notification.error({ message: '只有待确认账单可以确认' });
+    return false;
+  };
+
+  const onSelectChange = (selectedRowKeys, selectedRows) => {
+    if (checkedBillType(selectedRows)) {
+      setselectedRowKeys(selectedRowKeys);
+      setselectedRows(selectedRows);
+    }
+  };
+
+  const confirmAction = async () => {
+    setloading(true);
+    if (checkedStatus(selectedRows)) {
+      const data = await confirmSelfBill(selectedRowKeys);
+      if (data.code === '0000') {
+        setselectedRowKeys([]);
+        setselectedRows([]);
+        reload();
+        notification.success({ message: '确认成功' });
+      }
+      setloading(false);
+    } else {
+      setloading(false);
+    }
+  };
+
+  const onDownload = async () => {
+    if (selectedRowKeys.length && selectedRowKeys.length < 32) {
+      setloading(true);
+      const data = await downloadSelfBillDetail(selectedRowKeys);
+      const blob = new Blob([data]);
+      saveAs(blob, `账单明细-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`);
+      setloading(false);
+      setselectedRowKeys([]);
+      setselectedRows([]);
+      reload();
+    } else {
+      notification.error({ message: '最少下载1条数据账单或最多下载31条数据账单' });
+      setloading(false);
+    }
+  };
+
+  const gather = {
+    onDownload,
+    confirmAction,
+  };
+
+  const onToolBarRender = toolBarRender(gather);
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+
+  const searchRender = ({ searchText, resetText }, { form }) => [
+    <Button
+      key="search"
+      type="primary"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        form?.submit();
+      }}
+    >
+      {searchText}
+    </Button>,
+    <Button
+      key="rest"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        form?.resetFields();
+      }}
+    >
+      {resetText}
+    </Button>,
+  ];
+  return (
+    <Spin tip="Loading..." spinning={loading} delay={100}>
+      <PageHeaderWrapper>
+        <ProTable
+          actionRef={actionRef}
+          request={params => query({ ...params })}
+          columns={columns}
+          rowKey={r => r.id}
+          search={{
+            collapsed: false,
+            optionRender: searchRender,
+          }}
+          rowSelection={rowSelection}
+          bordered
+          toolBarRender={onToolBarRender}
+          scroll={{ x: '100%' }}
+        />
+      </PageHeaderWrapper>
+    </Spin>
+  );
+};
+
+export default ReconciliationQuery;

src/pages/ReconciliationQuery/service.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+
+// 分页查询所有数据
+const { querysApi } = config;
+
+export async function query(params) {
+  const queryParams = {
+    pageSize: params.pageSize || 10,
+    pageNo: params.current || 1,
+    beginBillDate: params?.dateTimeRange?.[0],
+    endBillDate: params?.dateTimeRange?.[1],
+    settleBatchNo: params?.settleBatchNo,
+    billType: params?.billType,
+    status: params?.status,
+  };
+  const { data } = await request.post('/selfBill/merchant/querySelfBill', {
+    prefix: querysApi,
+    data: queryParams,
+  });
+  return {
+    data: data.records,
+    total: data.total,
+  };
+}
+
+// 对账单确认
+export async function confirmSelfBill(params) {
+  return request.post('/selfBill/merchant/confirmSelfBill', {
+    prefix: querysApi,
+    data: params,
+  });
+}
+
+// 对账下载
+export async function downloadSelfBillDetail(params) {
+  return request.post('/selfBill/merchant/downloadSelfBillDetail', {
+    prefix: querysApi,
+    data: params,
+  });
+}

src/pages/SettlementSheet/data.js

+import React from 'react';
+import { Button } from 'antd';
+
+export const dateStateEnum = {
+  1: { text: '一周', maxlength: 8 },
+  2: { text: '半个月', maxlength: 4 },
+  3: { text: '半个月', maxlength: 2 },
+};
+
+export const orderStateNum = {
+  1: { text: '待结算' },
+  2: { text: '已结算' },
+  3: { text: '无需结算' },
+};
+
+export const paymentStateEnum = {
+  true: { text: '是' },
+  false: { text: '否' },
+};
+
+export const columns = [
+  {
+    title: '供应商名称',
+    dataIndex: 'supplierName',
+    width: '150px',
+    hideInSearch: true,
+  },
+  {
+    title: '付款单批次号',
+    dataIndex: 'payBatchNo',
+    width: '160px',
+  },
+  {
+    title: '结算单批次号',
+    dataIndex: 'settleBatchNo',
+    width: '150px',
+  },
+  {
+    title: '结算单生成日期',
+    key: 'dateTimeRange',
+    dataIndex: 'createdAtRange',
+    valueType: 'dateTimeRange',
+    width: '120px',
+    hideInTable: true,
+    initialValue: [],
+    align: 'center',
+  },
+  {
+    title: '帐单确认周期',
+    dataIndex: 'createdAtRange',
+    key: 'createdAtRange',
+    hideInSearch: true,
+    align: 'center',
+    width: '160px',
+    render: (text, record) => `${record.billPeriodStart}-${record.billPeriodEnd}`,
+  },
+  {
+    title: '账期',
+    dataIndex: 'billPeriodType',
+    valueEnum: dateStateEnum,
+    width: '120px',
+    hideInSearch: true,
+    filters: false,
+  },
+  {
+    title: '结算单生成日期',
+    dataIndex: 'createdAt',
+    key: 'createdAt',
+    hideInSearch: true,
+    align: 'center',
+    width: '160px',
+  },
+  {
+    title: '销售金额',
+    dataIndex: 'saleAmount',
+    width: '100px',
+    hideInSearch: true,
+  },
+  {
+    title: '退款金额',
+    dataIndex: 'refundAmount',
+    width: '100px',
+    hideInSearch: true,
+  },
+  {
+    title: '结算金额',
+    dataIndex: 'payableAmount',
+    width: '130px',
+    hideInSearch: true,
+  },
+  {
+    title: '结算状态',
+    dataIndex: 'settleState',
+    valueEnum: orderStateNum,
+    width: '100px',
+    initialValue: 0,
+    filters: false,
+  },
+  {
+    title: '是否生成付款单',
+    dataIndex: 'isCreatePaymentBill',
+    valueEnum: paymentStateEnum,
+    hideInTable: true,
+  },
+];
+
+export const toolBarRender = paymentOrder => () => [
+  <Button type="primary" onClick={paymentOrder}>
+    生成付款单
+  </Button>,
+];

src/pages/SettlementSheet/index.jsx

+/* eslint-disable no-undef */
+/* eslint-disable no-shadow */
+/* eslint-disable no-return-assign */
+import { Button, Upload, notification, Spin } from 'antd';
+import React, { useRef, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import { columns, toolBarRender, dateStateEnum } from './data';
+import { query, selfPaymentBill } from './service';
+
+const SettlementSheet = () => {
+  const actionRef = useRef();
+  const [selectedRowKeys, setselectedRowKeys] = useState([]);
+  const [selectedRowsList, setselectedRowsList] = useState([]);
+  const [loading, setloading] = useState(false);
+
+  const reload = () => {
+    if (actionRef.current) {
+      actionRef.current.reload();
+    }
+  };
+  // 计算当前结算金额为0或负
+  const checkedAmount = data => {
+    const totalPrice = data.reduce(
+      (totalPrice, item) => (totalPrice += Number(item.refundAmount)),
+      0,
+    );
+    if (totalPrice <= 0) {
+      notification.error({ message: '当前结算金额为0或负' });
+    }
+  };
+  // 检查帐期类型的最多下载条数
+  const checkedBillType = data => {
+    if (!data.length) {
+      notification.error({ message: '请选择数据' });
+      return false;
+    }
+    const billPeriodType = data[0]?.billPeriodType;
+    const billPeriodData = dateStateEnum[billPeriodType];
+    if (data.length <= billPeriodData.maxlength) {
+      return true;
+    }
+    notification.error({
+      message: `${billPeriodData.text}帐期最多生成${billPeriodData.maxlength}付款单`,
+    });
+    return false;
+  };
+  // 检查帐期周期是否连续
+  const checkedTime = data => {
+    const minTime = data[0]?.billPeriodStart?.split(' ')[0];
+    const maxTime = data[0]?.billPeriodEnd?.split(' ')[0];
+    let minTimeNum = new Date(minTime).getTime();
+    let maxTimeNum = new Date(maxTime).getTime();
+    if (data.length < 2) {
+      return true;
+    }
+    for (let i = 1; i < data.length; i += 1) {
+      const startTime = data[i]?.billPeriodStart?.split(' ')[0];
+      const endTime = data[i]?.billPeriodEnd?.split(' ')[0];
+      const startTimeNum = new Date(startTime).getTime();
+      const endTimeNum = new Date(endTime).getTime();
+      if (startTimeNum > maxTimeNum && maxTimeNum + 24 * 3600 * 1000 === startTimeNum) {
+        maxTimeNum = endTimeNum;
+      } else if (minTimeNum > endTimeNum && endTimeNum + 24 * 3600 * 1000 === minTimeum) {
+        minTimeNum = startTimeNum;
+      }
+    }
+    const endRulstTime = data[data.length - 1]?.billPeriodEnd?.split(' ')[0];
+    const endRulstTimeNum = new Date(endRulstTime).getTime();
+    if (endRulstTimeNum === maxTimeNum) {
+      return true;
+    }
+    notification.error({ message: '账单周期不连续' });
+    return false;
+  };
+
+  const onSelectChange = (selectedRowKeys, selectedRows) => {
+    if (selectedRowsList.length > selectedRows.length) {
+      setselectedRowKeys(selectedRowKeys);
+      setselectedRowsList(selectedRows);
+    } else if (checkedTime(selectedRows)) {
+      setselectedRowKeys(selectedRowKeys);
+      setselectedRowsList(selectedRows);
+    }
+  };
+
+  const paymentOrder = async () => {
+    if (checkedBillType(selectedRows)) {
+      setloading(true);
+      checkedAmount(selectedRows);
+      const data = await selfPaymentBill(selectedRowKeys);
+      if (data.businessCode === '0000') {
+        setselectedRowKeys([]);
+        setselectedRows([]);
+        reload();
+        notification.success({ message: '生成付款单成功' });
+      }
+      setloading(false);
+    }
+  };
+
+  const onToolBarRender = toolBarRender(paymentOrder);
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+    getCheckboxProps: record => ({
+      disabled: !!(record.settleState === 1 && record.payBatchNo), // Column configuration not to be checked
+    }),
+  };
+
+  const searchRender = ({ searchText, resetText }, { form }) => [
+    <Button
+      key="search"
+      type="primary"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        form?.submit();
+      }}
+    >
+      {searchText}
+    </Button>,
+    <Button
+      key="rest"
+      style={{ marginRight: '10px' }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        form?.resetFields();
+      }}
+    >
+      {resetText}
+    </Button>,
+  ];
+  return (
+    <Spin tip="Loading..." spinning={loading} delay={100}>
+      <PageHeaderWrapper>
+        <ProTable
+          actionRef={actionRef}
+          request={params => query({ ...params })}
+          columns={columns}
+          rowKey={r => r.settleBatchNo}
+          search={{
+            collapsed: false,
+            optionRender: searchRender,
+          }}
+          rowSelection={rowSelection}
+          bordered
+          toolBarRender={onToolBarRender}
+          scroll={{ x: '100%' }}
+        />
+      </PageHeaderWrapper>
+    </Spin>
+  );
+};
+
+export default SettlementSheet;

src/pages/SettlementSheet/service.js

+import request from '@/utils/request';
+import config from '../../../config/env.config';
+import { stringify } from 'querystring';
+
+// 分页查询所有数据
+const { querysApi } = config;
+
+export async function query(params) {
+  const queryParams = {
+    pageSize: params.pageSize || 10,
+    pageIndex: params.current || 1,
+    createStart: params?.dateTimeRange?.[0],
+    createEnd: params?.dateTimeRange?.[1],
+    settleState: params?.settleState,
+    settleBatchNo: params?.settleBatchNo,
+    isCreatePaymentBill: params?.isCreatePaymentBill,
+    payBatchNo: params?.payBatchNo,
+  };
+  const { data } = await request.post('/selfSettleBill/merchant/pageQuery', {
+    prefix: querysApi,
+    data: queryParams,
+  });
+
+  return {
+    data: data.records,
+    total: data.total,
+  };
+}
+// 生成付款单
+export async function selfPaymentBill(params) {
+  return request.post('/selfPaymentBill/merchant/generate/paymentBill', {
+    prefix: querysApi,
+    data: params,
+  });
+}