贷款结算管理测试

src/global.less

@@ -28,7 +28,15 @@ ul,
 ol {
   list-style: none;
 }
-
+.mr20 {
+  margin-right: 20px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.mt10 {
+  margin-top: 10px;
+}
 @media (max-width: @screen-xs) {
   .ant-table {
     width: 100%;

src/pages/components/upload.jsx

 import { Upload, Icon, Modal } from 'antd';
 import React from 'react';
-import localStorage from '@/utils/localStorage';
 import config from '../../../config/env.config';
+import { qiniuToken } from '@/services/qiniu';
 
 const qiniu = require('@/utils/qiniu.min.js');
 
 const { qiniuHost } = config;
-const token = localStorage.get('qiniuToken');
 
 function getBase64(file) {
   return new Promise((resolve, reject) => {
@@ -16,6 +15,7 @@ function getBase64(file) {
     reader.onerror = error => reject(error);
   });
 }
+let token = null;
 
 class PicturesWall extends React.Component {
   state = {
@@ -24,6 +24,10 @@ class PicturesWall extends React.Component {
     fileList: [],
   };
 
+  async componentDidMount() {
+    token = await qiniuToken();
+  }
+
   handleCancel = () => this.setState({ previewVisible: false });
 
   handlePreview = async file => {
@@ -68,6 +72,12 @@ class PicturesWall extends React.Component {
     return fileList;
   };
 
+  clearFileList = () => {
+    this.setState({
+      fileList: [],
+    });
+  };
+
   render() {
     const { previewVisible, previewImage, fileList } = this.state;
     const uploadButton = (

src/pages/settleManage/data.js

@@ -10,6 +10,7 @@ export const settleStatus = {
   8: { text: '驳回' },
 };
 export const actionStatus = {
-  1: { text: '已确认' },
-  2: { text: '已拒绝' },
+  1: { text: '待操作' },
+  2: { text: '已确认' },
+  3: { text: '已拒绝' },
 };

src/pages/settleManage/fileModal/index.jsx

@@ -49,10 +49,12 @@ class fileModal extends Component {
           dataSource={tableData}
           columns={tableColumns}
           rowKey={record => record.id}
+          scroll={{ x: '100%', y: 300 }}
         />
-        <Button type="primary" onClick={this.props.onCancel} className={styles.logBtn}>
+        <Button type="primary" onClick={this.props.onCancel} className={styles.fileBtn}>
           关闭
         </Button>
+
         <Modal
           title="附件详情"
           visible={this.state.imgModal}

src/pages/settleManage/index.jsx

@@ -4,7 +4,7 @@ import { Input, Button, Popconfirm, Notification } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { actionStatus, settleStatus } from './data';
 import style from './style.less';
-import { query, updateStatus, download, docQuery, qiniuToken } from './service';
+import { query, updateStatus, download, docQuery } from './service';
 import FileModal from './fileModal';
 import UploadModal from './uploadModal';
 
@@ -17,11 +17,10 @@ export default () => {
   const [showViewUpload, setShowViewUpload] = useState(false);
   const [settlementNoV, setSettlementNo] = useState('');
   const reload = () => {
-    if (protable.reload) {
-      protable.reload();
+    if (protable?.current?.reload) {
+      protable.current.reload();
     }
   };
-  qiniuToken();
   const confirmText = '您是否已确认结算金额是否正确？确认后无法撤回';
   const confirmAction = async (r, isRefuse) => {
     const data = await updateStatus({
@@ -54,44 +53,55 @@ export default () => {
     setShowViewFile(true);
   };
   const refuseNode = () => <TextArea rows={4} onChange={refuseContent} value={refuse} />;
-  const tableRenderBtn = r => [
-    <Popconfirm
-      placement="topLeft"
-      title={confirmText}
-      onConfirm={() => confirmAction(r)}
-      okText="确认"
-      cancelText="取消"
-    >
-      <Button type="primary">确认</Button>
-    </Popconfirm>,
-    <Popconfirm
-      icon={null}
-      placement="topLeft"
-      title={refuseNode()}
-      onConfirm={() => confirmAction(r, true)}
-      okText="确认"
-      cancelText="取消"
-    >
-      <Button type="primary" onClick={clearRefuseContent}>
-        拒绝
+  const tableRenderBtn = r => (
+    <div>
+      <p>
+        <Popconfirm
+          placement="topLeft"
+          title={confirmText}
+          onConfirm={() => confirmAction(r)}
+          okText="确认"
+          cancelText="取消"
+        >
+          <Button disabled={r.settlementStatus !== 2} type="primary" className="mr10">
+            确认
+          </Button>
+        </Popconfirm>
+        <Popconfirm
+          icon={null}
+          placement="topLeft"
+          title={refuseNode()}
+          onConfirm={() => confirmAction(r, true)}
+          okText="确认"
+          cancelText="取消"
+        >
+          <Button
+            disabled={r.settlementStatus !== 2}
+            type="primary"
+            onClick={clearRefuseContent}
+            className="mr10"
+          >
+            拒绝
+          </Button>
+        </Popconfirm>
+        <Button type="primary" onClick={() => uploadInvoice(r)} disabled={r.settlementStatus === 6}>
+          上传发票
+        </Button>
+      </p>
+      <Button type="primary" onClick={() => downDetail(r)} className="mr20">
+        下载明细
       </Button>
-    </Popconfirm>,
-    <Button type="primary" onClick={() => downDetail(r)}>
-      下载明细
-    </Button>,
-    <Button type="primary" onClick={() => uploadInvoice(r)}>
-      上传发票
-    </Button>,
-    <Button type="primary" onClick={() => viewAccessory(r)}>
-      查看附件
-    </Button>,
-  ];
+      <Button type="primary" onClick={() => viewAccessory(r)}>
+        查看附件
+      </Button>
+    </div>
+  );
   const columns = [
     {
       title: '排序',
       dataIndex: 'index',
       valueType: 'index',
-      width: 80,
+      width: 100,
     },
     {
       title: '结算订单号',
@@ -137,8 +147,7 @@ export default () => {
     {
       title: '操作',
       valueType: 'option',
-      dataIndex: 'id',
-      width: 200,
+      width: 280,
       fixed: 'right',
       render: (_, r) => tableRenderBtn(r),
     },
@@ -171,6 +180,7 @@ export default () => {
         settlementNo={settlementNoV}
         onCancel={() => {
           setShowViewUpload(false);
+          reload();
         }}
       />
     </PageHeaderWrapper>

src/pages/settleManage/service.js

@@ -4,7 +4,6 @@ import request from '@/utils/request';
 import { saveAs } from 'file-saver';
 import { format } from 'date-fns';
 import config from '../../../config/env.config';
-import localStorage from '@/utils/localStorage';
 // 分页查询
 export async function query(data) {
   const params = {
@@ -18,7 +17,7 @@ export async function query(data) {
       data: { current, records, total, size },
     } = await request.get('/api/kdsp/settlement/wait-confirm/page/query', {
       prefix: config.kdspApi,
-      params: stringify(_.omitBy(params, v => !v)),
+      params: _.omitBy(params, v => !v),
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
       },
@@ -45,18 +44,6 @@ export async function updateStatus(params) {
   return data;
 }
 
-// export async function getGoods(orderId) {
-//   const { data } = await request.get(`/api/kdsp/op/mch-order/skus?orderId=${orderId}`, {
-//     prefix: config.kdspApi,
-//   });
-//   return data;
-// }
-// export async function getLogistics(orderId) {
-//   const { data } = await request.get(`/api/kdsp/op/mch-order/logistics-skus?orderId=${orderId}`, {
-//     prefix: config.kdspApi,
-//   });
-//   return data;
-// }
 export async function uploadFile(file, settlementNo) {
   const params = new FormData();
   params.append('file', file);
@@ -91,9 +78,14 @@ export async function docQuery(settlementNo) {
   }
   return [];
 }
-export async function qiniuToken() {
-  const data = await request.get('/upload/getToken', {
-    prefix: config.opapiHost,
+
+export async function uploadPic(params) {
+  const data = await request.post('/api/kdsp/settlement/invoice/img/upload', {
+    prefix: config.kdspApi,
+    data: stringify(_.omitBy(params, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
   });
-  localStorage.set('qiniuToken', data.uptoken);
+  return data;
 }

src/pages/settleManage/style.less

@@ -5,13 +5,16 @@
     }
   }
 }
-.logBtn {
+.fileBtn {
   display: block;
-  margin: auto;
+  margin: 10px auto;
 }
 .imgWrap {
   display: flex;
-  justify-content: space-around;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  max-height: 300px;
+  overflow: auto;
 }
 .tab {
   min-height: 400px;

src/pages/settleManage/uploadModal/index.jsx

-import React, { createRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { Modal, Button, Tabs, Upload, notification, Icon } from 'antd';
 import styles from '../style.less';
-import { uploadFile } from '../service';
+import { uploadFile, uploadPic } from '../service';
 import UploadC from '../../components/upload';
 
 const { Dragger } = Upload;
@@ -10,20 +10,45 @@ const { TabPane } = Tabs;
 export default props => {
   const { visible, settlementNo } = props;
   const [tabValue, setTabValue] = useState('1');
-  const picUpload = createRef();
+  const [fileList, setFileList] = useState([]);
+  const picUpload = useRef();
   const uploadProps = {
     name: 'file',
-    async customRequest(info) {
-      const result = await uploadFile(info.file, settlementNo);
+    async customRequest({ file, onSuccess }) {
+      const result = await uploadFile(file, settlementNo);
       if (result.businessCode === '0000') {
         notification.success({ message: '导入成功' });
+        onSuccess(file);
+        setFileList([...fileList, file]);
       }
     },
     accept: '.xlsx',
-    showUploadList: false,
+    showUploadList: {
+      showRemoveIcon: false,
+    },
+    maxCount: 1,
+    fileList,
+  };
+  const initPicUpload = () => {
+    if (picUpload?.current?.clearFileList) {
+      picUpload.current.clearFileList();
+    }
   };
-  const uploadFn = () => {
+  useEffect(() => {
+    initPicUpload();
+    setFileList([]);
+  }, [visible]);
+  const uploadFn = async () => {
     // 上传图片的接口
+    const upLoadFileList = picUpload?.current?.getFileList?.();
+    const data = await uploadPic({
+      imgUrl: upLoadFileList.join(','),
+      settlementNo,
+    });
+    if (data.code === '0000') {
+      notification.success({ message: '上传成功' });
+      initPicUpload();
+    }
   };
   const changeTab = tabV => {
     setTabValue(tabV);
@@ -48,9 +73,6 @@ export default props => {
           确定上传
         </Button>
       )}
-      {/* <Button type="primary" onClick={props.onCancel}>
-        关闭
-      </Button> */}
     </Modal>
   );
 };

src/services/qiniu.js

+import request from '@/utils/request';
+import config from '../../config/env.config';
+
+export async function qiniuToken() {
+  const data = await request.get('/upload/getToken', {
+    prefix: config.opapiHost,
+  });
+  return data?.uptoken;
+}