Merge branch 'feature/optimize' into 'master'

Feature/optimize

See merge request !107

config/env.config.js

 import RoleType, { isPlatForm } from './role.config';
 const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
-const environment = 'sc';
+const environment = 'yxm2';
 
 const envAPi = {
   api: `https://security-${environment}.liangkebang.net`, //'https://security-xyqb.liangkebang.net',

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', 'jpg'];
+      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,.jpg"
+    >
+      <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 { apiMerchantView } from '../service';
+import { getFileData } from '@/utils/bll';
+
+const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 19 },
+};
+
+/**
+ * 查看发票
+ * */
+const InvoiceListModal = props => {
+  const refForm = useRef();
+  const { id } = props;
+
+  const getDetail = async () => {
+    const res = await apiMerchantView(id);
+    if (res && res.data) {
+      const { invoiceFiles = [], refuseReason } = res.data;
+      // 发票列表
+      const invoiceList = [];
+      // 补录发票列表
+      const subInvoiceList = [];
+
+      invoiceFiles.forEach(item => {
+        if (item.supplementary) {
+          subInvoiceList.push(item);
+        } else {
+          invoiceList.push(item);
+        }
+      });
+
+      const params = {
+        fileList: getFileData(invoiceList, 'filePath', 'fileName'),
+        other: refuseReason,
+        sFileList: getFileData(subInvoiceList, 'filePath', 'fileName'),
+        sOther: '',
+      };
+      refForm.current?.setFieldsValue?.(params);
+    }
+  };
+
+  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 { apiUploadSupplementaryBill } 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 apiUploadSupplementaryBill(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 | jpg | zip | rar"
+        >
+          <Upload limit={1} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default UploadInvoiceModal;

src/pages/PaymentMange/data.js

@@ -215,19 +215,25 @@ export function columns(res, pages) {
               >
                 申请结算
               </Button>
-              <Button
-                type="primary"
-                disabled={
-                  !(
-                    (row.blueInvoiceState === 1 || row.blueInvoiceState === 3) &&
-                    row.payState === 3
-                  )
-                }
-                className={styles.button}
-                onClick={() => res.edit(1, row)}
-              >
-                上传发票
-              </Button>
+              {row.billPeriod === 4 && row.blueInvoiceState === 4 ? (
+                <Button type="primary" className={styles.button} onClick={() => res.edit(11, row)}>
+                  补充发票
+                </Button>
+              ) : (
+                <Button
+                  type="primary"
+                  disabled={
+                    !(
+                      (row.blueInvoiceState === 1 || row.blueInvoiceState === 3) &&
+                      row.payState === 3
+                    )
+                  }
+                  className={styles.button}
+                  onClick={() => res.edit(1, row)}
+                >
+                  上传发票
+                </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';
@@ -17,7 +19,7 @@ import {
   selfPaymentExport,
   selfPaymentexportDetail,
   settlement,
-  merchantView,
+  apiMerchantView,
 } from './service';
 
 const { confirm } = Modal;
@@ -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) {
@@ -75,13 +79,14 @@ const PaymentMange = props => {
   };
   // 查看发票
   const invoiceDetail = async params => {
-    const data = await merchantView(params);
+    const data = await apiMerchantView(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,14 @@ const PaymentMange = props => {
       settoExamineData({ id });
       setToExamineModalVisibel(true);
     } else if (status === 2) {
-      setstatus(status);
-      invoiceDetail(id);
+      settoExamineData({ id });
+      setVisibleInvoiceList(true);
     } else if (status === 3) {
       exportDetail(id);
+    } else if (status === 11) {
+      console.log('id :>> ', id);
+      settoExamineData({ id });
+      setVisibleUploadInvoice(true);
     }
   };
 
@@ -103,6 +112,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 +237,12 @@ const PaymentMange = props => {
           />
         )}
       </PageHeaderWrapper>
+      {visibleUploadInvoice && (
+        <UploadInvoiceModal onCancel={onCloseUploadInvoice} id={toExamineData.id} />
+      )}
+      {visibleInvoiceList && (
+        <InvoiceListModal onCancel={setVisibleInvoiceList} id={toExamineData.id} />
+      )}
     </Spin>
   );
 };

src/pages/PaymentMange/service.js

@@ -90,9 +90,23 @@ export async function uploadBill(params) {
   });
 }
 
-//  查看发票
-export async function merchantView(params) {
-  return request.get(`/selfPaymentBill/merchant/view/${params}`, {
+/**
+ * 补录发票
+ * yApi: http://yapi.quantgroups.com/project/549/interface/api/69004
+ * */
+export async function apiUploadSupplementaryBill(params) {
+  return request.post('/selfPaymentBill/merchant/supplementary/upload/bill', {
+    prefix: querysApi,
+    data: params,
+  });
+}
+
+/**
+ * 查看发票
+ * yApi: http://yapi.quantgroups.com/project/549/interface/api/35872
+ * */
+export async function apiMerchantView(id) {
+  return request.get(`/selfPaymentBill/merchant/view/${id}`, {
     prefix: querysApi,
   });
 }

src/utils/bll.js

+import UUID from '@/utils/uuid';
+
 export const layout = {
   labelCol: { span: 6 },
   wrapperCol: { span: 16 },
 };
+
+/**
+ * 文件路径数组转Upload fileList 列表值
+ * * */
+export const getFileData = (arr = [], urlKey, nameKey) =>
+  arr.map(item => {
+    let url = item;
+    let name = item;
+    if (urlKey) {
+      url = item[urlKey];
+    }
+    if (nameKey) {
+      name = item[nameKey];
+    }
+    return {
+      url,
+      name,
+      uid: UUID.createUUID(),
+      status: 'done',
+    };
+  });