feat: 添加付款凭证

src/pages/PaymentMange/components/PaymentBillModal.jsx

+import React, { useEffect } from 'react';
+import { layout } from '@/utils/bll';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { paymentInfoColumn } from '../data';
+
+const PaymentBill = props => {
+  const refForm = React.useRef();
+
+  const closeModal = v => {
+    !v && props.onClose(false);
+  };
+
+  const onSubmit = async v => {
+    // 关闭
+    closeModal();
+  };
+
+  const getInfo = async () => {
+    const info = props.info || {};
+    let images = []; // info.paySuccessImage;
+    if (info.paySuccessImages?.length) {
+      images = info.paySuccessImages.map((item, i) => ({
+        url: item,
+        uid: i,
+        status: 'done',
+        name: '',
+      }));
+    }
+    const params = {
+      images,
+      comment: info.payComment || '',
+    };
+    refForm.current?.setFieldsValue?.(params);
+    const res = refForm.current?.getFieldsValue();
+    console.log(res);
+  };
+  useEffect(() => {
+    if (props.visible) {
+      getInfo();
+    }
+  }, [props.visible]);
+
+  return (
+    props.visible && (
+      <BetaSchemaForm
+        layoutType="ModalForm"
+        title="查看付款单"
+        open={props.visible}
+        width="600px"
+        modalProps={{
+          maskClosable: false,
+          destroyOnClose: true,
+          okText: () => <></>,
+          cancelText: '关闭',
+        }}
+        formRef={refForm}
+        onOpenChange={closeModal}
+        layout="horizontal"
+        {...layout}
+        onFinish={onSubmit}
+        columns={paymentInfoColumn(props.status)}
+      />
+    )
+  );
+};
+
+export default PaymentBill;

src/pages/PaymentMange/data.js

 import React from 'react';
-import { Button } from 'antd';
+import { Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
 import styles from './style.less';
 
 export const payStateEnum = {
@@ -18,6 +19,13 @@ export const orderStateNum = {
   4: { text: '已通过' },
 };
 
+export const dateStateEnum = {
+  1: { text: '一周' },
+  2: { text: '半个月' },
+  3: { text: '一个月' },
+  4: { text: '日结' },
+};
+
 export const redInvoiceState = {
   1: { text: '是', actionValue: 2 },
   2: { text: '否', actionValue: 1 },
@@ -131,6 +139,41 @@ export function columns(res, pages) {
         </div>
       ),
     },
+    {
+      title: () => (
+        <div style={{ textAlign: 'center' }}>
+          <div>当前结算周期</div>
+          <div style={{ color: '#f00' }}>(供应商维度)</div>
+        </div>
+      ),
+      dataIndex: 'billPeriod',
+      key: 'billPeriod',
+      width: '150px',
+      hideInSearch: true,
+      valueEnum: dateStateEnum,
+      align: 'center',
+    },
+    {
+      title: () => (
+        <div style={{ textAlign: 'center' }}>
+          <div>拖欠金额</div>
+          <div style={{ color: '#f00' }}>(供应商维度)</div>
+        </div>
+      ),
+      dataIndex: 'arrearsAmount',
+      key: 'arrearsAmount',
+      width: '130px',
+      hideInSearch: true,
+      align: 'center',
+    },
+    {
+      title: '实付金额',
+      dataIndex: 'paidAmount',
+      key: 'paidAmount',
+      width: '100px',
+      hideInSearch: true,
+      align: 'center',
+    },
     {
       title: '是否缺少红字发票',
       dataIndex: 'redInvoiceState',
@@ -199,6 +242,14 @@ export function columns(res, pages) {
           <Button type="primary" className={styles.button} onClick={() => res.edit(3, row)}>
             下载账单
           </Button>
+          <Button
+            type="primary"
+            className={styles.button}
+            disabled={row.payState !== 5}
+            onClick={() => res.onPaymentOrder(1, row)}
+          >
+            查看付款凭证
+          </Button>
         </div>
       ),
     },
@@ -206,3 +257,85 @@ export function columns(res, pages) {
 }
 
 export const toolBarRender = onExport => () => [];
+
+// 上传文件
+export function uploadPropsFn({
+  keyName,
+  limit = 1,
+  maxSize = 1024 * 1024 * 5,
+  maxSizeMsg = '文件大小不能超过5M！',
+  form,
+  disabled,
+  accept = '.png,.bmp,.gif,.jpeg,.jpg',
+}) {
+  const config = {
+    maxSize,
+    disabled,
+    multiple: limit > 1,
+    listType: 'picture-card',
+    showUploadList: true,
+    accept,
+    onRemove: e => {
+      const fileValue = form.getFieldValue(keyName) || [];
+      if (fileValue.fileList) {
+        const files = fileValue.fileList.filter(item => item.uid !== e.uid);
+        form.setFieldValue(keyName, files);
+      } else {
+        const files = fileValue.filter(item => item.uid !== e.uid);
+        form.setFieldValue(keyName, files);
+      }
+    },
+  };
+  return config;
+}
+
+/**
+ * 付款单弹窗
+ * status：1查看 0上传
+ * * */
+export const paymentInfoColumn = status => [
+  {
+    title: '付款单',
+    dataIndex: 'images',
+    key: 'images',
+    formItemProps: {
+      rules: [{ required: true, message: '请上传付款单' }],
+    },
+    fieldProps: {
+      disabled: status === 1,
+      limit: 1,
+      accept: '.png,.bmp,.gif,.jpeg,.jpg,.pdf',
+    },
+    renderFormItem: (s, c, form) => {
+      let fileList = form.getFieldValue('images') || [];
+      if (fileList.fileList) {
+        fileList = fileList.fileList || [];
+      }
+      return (
+        <Upload
+          {...uploadPropsFn.call(this, {
+            keyName: 'images',
+            form,
+            accept: '.png,.bmp,.gif,.jpeg,.jpg,.pdf',
+          })}
+          fileList={fileList}
+          disabled={status === 1}
+        >
+          <UploadOutlined /> 上传文件
+        </Upload>
+      );
+    },
+  },
+  {
+    title: '备注',
+    dataIndex: 'comment',
+    key: 'comment',
+    align: 'center',
+    valueType: 'textarea',
+    fieldProps: {
+      disabled: status === 1,
+      maxLength: 200,
+      autoSize: { minRows: 2, maxRows: 6 },
+    },
+  },
+];

src/pages/PaymentMange/index.jsx

@@ -8,6 +8,7 @@ import { saveAs } from 'file-saver';
 import { format } from 'date-fns';
 import moment from 'moment';
 import { connect } from 'dva';
+import PaymentBillModal from './components/PaymentBillModal';
 import { PAYMENT_MANAGE } from '@/../config/permission.config';
 import ToExamineModal from './ToExamine';
 import { columns, toolBarRender } from './data';
@@ -31,6 +32,9 @@ const PaymentMange = props => {
   const [status, setstatus] = useState(1);
   const [pages, setpages] = useState({});
   const [toExamineModalVisibel, setToExamineModalVisibel] = useState(false);
+  const [visiblePaymentBill, setVisiblePaymentBill] = useState(false);
+  const [paymentStatus, setPaymentStatus] = useState(0);
+  const [supplierInfo, setSupplierInfo] = useState({});
 
   const reload = () => {
     if (actionRef.current) {
@@ -124,11 +128,18 @@ const PaymentMange = props => {
     }
     setloading(false);
   };
+  // 上传付款单和查看付款单
+  const onPaymentOrder = (status, row) => {
+    setPaymentStatus(status);
+    setSupplierInfo(row);
+    setVisiblePaymentBill(!0);
+  };
 
   const onToolBarRender = toolBarRender();
 
   const res = {
     edit,
+    onPaymentOrder,
     canEditable,
   };
 
@@ -199,6 +210,16 @@ const PaymentMange = props => {
             onColse();
           }}
         />
+
+        {visiblePaymentBill && (
+          <PaymentBillModal
+            visible={visiblePaymentBill}
+            status={paymentStatus}
+            info={supplierInfo}
+            onRefresh={() => reload()}
+            onClose={() => setVisiblePaymentBill(false)}
+          />
+        )}
       </PageHeaderWrapper>
     </Spin>
   );