feat: 添加补充发票弹窗

src/pages/PaymentMange/ToExamine/index.jsx

@@ -59,7 +59,7 @@ class toExamine extends Component {
       <Modal
         width={400}
         title={status === 1 ? '上传发票' : '查看发票'}
-        visible={visible}
+        open={visible}
         onCancel={() => this.handleCancel()}
         footer={status === 1 ? renderModal.call(this) : detailsModal.call(this, filePath)}
         className={styles.textArea}

src/pages/PaymentMange/components/CustomUpload.jsx

+import { Upload, message, notification } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import config from '../../../../config/env.config';
+import UUID from '../../../utils/uuid';
+import { qiniuToken } from '@/services/qiniu';
+
+const qiniu = require('@/utils/qiniu.min.js');
+
+const { qiniuHost } = config;
+
+const CustomUpload = props => {
+  const { limit = 1 } = props;
+  const [fileList, setFileList] = useState([]);
+  const [token, setToken] = useState(null);
+
+  const customRequest = ({ file, onError, onSuccess }) => {
+    let suffix = '';
+    if (file.name) {
+      const index = file.name.lastIndexOf('.');
+      suffix = file.name.substr(index + 1, file.name.length - 1);
+      const types = ['pdf', 'doc', 'docx', 'zip', 'rar', 'png', 'jpeg'];
+      if (!types.includes(suffix)) {
+        message.error('文件格式错误！');
+        return;
+      }
+    }
+    if (fileList.length >= limit) {
+      message.warning(`最多上传${limit}个!`);
+      return;
+    }
+
+    // eslint-disable-next-line new-cap
+    const data = `${UUID.createUUID()}.${suffix}`;
+    if (!token) {
+      message.error('上传失败，请刷新页面重试！');
+      return;
+    }
+    const observable = qiniu.upload(file, data, token);
+    const observer = {
+      next() {
+        // ...
+      },
+      error(t) {
+        if (t.code === 614) {
+          notification.error({
+            message: '文件名重复，请更换文件名。',
+          });
+        }
+        onError(file);
+        // ...
+      },
+      complete(res) {
+        const comFile = file;
+        const url = `${qiniuHost}/${res.key}`;
+        comFile.url = url;
+        const list = fileList;
+        list.push({
+          url: file.url,
+          name: file.name,
+          uid: list.length,
+          status: 'done',
+        });
+        setFileList([...list]);
+        props.onChange(list);
+        onSuccess(comFile);
+      },
+    };
+    observable.subscribe(observer); // 上传开始
+  };
+
+  const onRemove = item => {
+    const arr = (fileList || []).filter(file => file.uid !== item.uid);
+    setTimeout(() => {
+      props.onChange(arr);
+    }, 100);
+  };
+
+  const getToken = async () => {
+    setToken(await qiniuToken());
+  };
+
+  useEffect(() => {
+    if (props.value instanceof Array) {
+      console.log('initFileList(props.value) :>> ', JSON.stringify(initFileList(props.value)));
+      setFileList(initFileList(props.value));
+    }
+  }, [props.value]);
+
+  useEffect(() => {
+    getToken();
+  }, []);
+
+  return (
+    <Upload
+      onChange={props.onChange}
+      customRequest={customRequest}
+      listType="picture-card"
+      fileList={fileList}
+      onRemove={onRemove}
+      accept=".pdf,.doc,.docx,.zip,.rar,.png,.jpeg"
+    >
+      <div>
+        <PlusOutlined />
+        <div style={{ marginTop: 8 }}>上传文件</div>
+      </div>
+    </Upload>
+  );
+};
+
+export default CustomUpload;
+
+function initFileList(fileList) {
+  const fileLists = (fileList || []).map((item, index) => ({
+    url: item.url,
+    name: item.name ? item.name : '发票',
+    uid: index,
+    status: 'done',
+  }));
+  return fileLists;
+}

src/pages/PaymentMange/components/InvoiceListModal.jsx

+import React, { useRef, useEffect } from 'react';
+import { Modal, Form, Upload, Input } from 'antd';
+import { merchantView } from '../service';
+
+const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 19 },
+};
+
+/**
+ * 查看发票
+ * */
+const InvoiceListModal = props => {
+  const refForm = useRef();
+  const { id } = props;
+
+  const getDetail = async () => {
+    // const data = await merchantView(id);
+    // if (data.businessCode === '0000') {
+    //   // settoExamineData({ ...data.data });
+    //   // setToExamineModalVisibel(true);
+    //   // setVisibleInvoiceList(true);
+    //   refForm.current?.setFieldsValue?.({
+    //     fileList: [{ url: 'https://kdspstatic.q-gp.com//CAA61F398F500001A395224099801D75.png', name: '18.png', uid: 0, status: 'done' }],
+    //     other: '11111',
+    //     sFileList: [{ url: 'https://kdspstatic.q-gp.com//CAA61F398F500001A395224099801D75.png', name: '18.png', uid: 0, status: 'done' }],
+    //     sOther: '2222',
+    //   })
+    // }
+    refForm.current?.setFieldsValue?.({
+      fileList: [
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 0,
+          status: 'done',
+        },
+      ],
+      other: '11111',
+      sFileList: [
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 0,
+          status: 'done',
+        },
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 1,
+          status: 'done',
+        },
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 2,
+          status: 'done',
+        },
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 3,
+          status: 'done',
+        },
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 4,
+          status: 'done',
+        },
+        {
+          url: 'https://kdspstatic.q-gp.com/CAA61F398F500001A395224099801D75.png',
+          name: '18.png',
+          uid: 5,
+          status: 'done',
+        },
+      ],
+      sOther: '2222',
+    });
+  };
+
+  useEffect(() => {
+    getDetail();
+  }, []);
+
+  return (
+    <Modal width={800} title="查看发票" open footer={null} onCancel={() => props.onCancel(false)}>
+      <Form ref={refForm} {...formItemLayout}>
+        <Form.Item label="发票" name="fileList" valuePropName="fileList">
+          <Upload disabled listType="picture-card" />
+        </Form.Item>
+        <Form.Item label="发票备注" name="other">
+          <Input disabled />
+        </Form.Item>
+        <Form.Item label="补充发票" name="sFileList" valuePropName="fileList">
+          <Upload disabled listType="picture-card" />
+        </Form.Item>
+        <Form.Item label="补充发票备注" name="sOther">
+          <Input disabled />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default InvoiceListModal;

src/pages/PaymentMange/components/UploadInvoiceModal.jsx

+import React, { useState, useRef } from 'react';
+import { Modal, notification, Form } from 'antd';
+import Upload from './CustomUpload';
+import { formItemLayout } from '../data';
+import { uploadBill } from '../service';
+
+/**
+ * 上传发票弹窗
+ * */
+const UploadInvoiceModal = props => {
+  const { id } = props;
+  const refForm = useRef();
+
+  const onConfirm = async () => {
+    const res = await refForm.current?.validateFields?.();
+    if (res?.fileList?.length) {
+      const { fileList } = res;
+      const params = {
+        filePath: fileList[0].url,
+        fileName: fileList[0]?.name || '',
+        id,
+      };
+      const data = await uploadBill(params);
+      if (data.businessCode === '0000') {
+        notification.success({ message: '上传成功' });
+        props.onCancel(true);
+      }
+    }
+  };
+
+  return (
+    <Modal width={500} title="上传发票" open onOk={onConfirm} onCancel={props.onCancel}>
+      <Form ref={refForm} {...formItemLayout}>
+        <Form.Item
+          label="上传发票"
+          name="fileList"
+          rules={[{ required: true }]}
+          extra="支持格式：pdf | doc | docx | png | jpeg | zip | rar"
+        >
+          <Upload limit={1} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default UploadInvoiceModal;

src/pages/PaymentMange/data.js

@@ -215,6 +215,11 @@ export function columns(res, pages) {
               >
                 申请结算
               </Button>
+              {row.blueInvoiceState === 4 ? (
+                <Button type="primary" className={styles.button} onClick={() => res.edit(11, row)}>
+                  补充发票
+                </Button>
+              ) : (
                 <Button
                   type="primary"
                   disabled={
@@ -228,6 +233,7 @@ export function columns(res, pages) {
                 >
                   上传发票
                 </Button>
+              )}
             </>
           ) : (
             ''
@@ -340,3 +346,8 @@ export const paymentInfoColumn = status => [
     },
   },
 ];
+
+export const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18 },
+};

src/pages/PaymentMange/index.jsx

@@ -9,6 +9,8 @@ import { format } from 'date-fns';
 import moment from 'moment';
 import { connect } from 'dva';
 import PaymentBillModal from './components/PaymentBillModal';
+import UploadInvoiceModal from './components/UploadInvoiceModal';
+import InvoiceListModal from './components/InvoiceListModal';
 import { PAYMENT_MANAGE } from '@/../config/permission.config';
 import ToExamineModal from './ToExamine';
 import { columns, toolBarRender } from './data';
@@ -35,6 +37,8 @@ const PaymentMange = props => {
   const [visiblePaymentBill, setVisiblePaymentBill] = useState(false);
   const [paymentStatus, setPaymentStatus] = useState(0);
   const [supplierInfo, setSupplierInfo] = useState({});
+  const [visibleUploadInvoice, setVisibleUploadInvoice] = useState(false);
+  const [visibleInvoiceList, setVisibleInvoiceList] = useState(false);
 
   const reload = () => {
     if (actionRef.current) {
@@ -78,10 +82,11 @@ const PaymentMange = props => {
     const data = await merchantView(params);
     if (data.businessCode === '0000') {
       settoExamineData({ ...data.data });
-      setToExamineModalVisibel(true);
+      // setToExamineModalVisibel(true);
+      setVisibleInvoiceList(true);
     }
   };
-  // 0申请结算 1上传发票 2查看发票 3下载账单付款单明细
+  // 0申请结算 1上传发票 11补充发票 2查看发票 3下载账单付款单明细
   const edit = async (status, { id }) => {
     if (status === 0) {
       showConfirm(id);
@@ -90,10 +95,15 @@ const PaymentMange = props => {
       settoExamineData({ id });
       setToExamineModalVisibel(true);
     } else if (status === 2) {
-      setstatus(status);
-      invoiceDetail(id);
+      setVisibleInvoiceList(true);
+      // setstatus(status);
+      // invoiceDetail(id);
     } else if (status === 3) {
       exportDetail(id);
+    } else if (status === 11) {
+      console.log('id :>> ', id);
+      settoExamineData({ id });
+      setVisibleUploadInvoice(true);
     }
   };
 
@@ -103,6 +113,13 @@ const PaymentMange = props => {
     }
     setToExamineModalVisibel(false);
   };
+  const onCloseUploadInvoice = v => {
+    setVisibleUploadInvoice(false);
+    if (v === true) {
+      reload();
+    }
+  };
+
   const checkedTime = ({ dateTimeRange }) => {
     const startTimeStr = moment(dateTimeRange?.[0]).format('YYYY-MM-DD');
     const endTimeStr = moment(dateTimeRange?.[1]).format('YYYY-MM-DD');
@@ -221,6 +238,8 @@ const PaymentMange = props => {
           />
         )}
       </PageHeaderWrapper>
+      {visibleUploadInvoice && <UploadInvoiceModal onCancel={onCloseUploadInvoice} />}
+      {visibleInvoiceList && <InvoiceListModal onCancel={setVisibleInvoiceList} />}
     </Spin>
   );
 };