导出组件 导入组件2.0

zyd_public/components/ExportUtil2.0/index.js

 import React, { useCallback, useState, useEffect } from 'react';
-import { Button, Modal, Alert, Transfer, message } from 'antd';
+import { Modal, Alert, Transfer, message } from 'antd';
 import qs from 'qs';
-import config from '@config/config';
 import { getToken } from '@/utils/authority';
 import reqwest from 'reqwest';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
 
-function getThisInfo(data, url, callBack) {
+function getThisInfo(data, url) {
   return reqwest({
     url,
     type: 'json',
@@ -21,9 +21,6 @@ function getThisInfo(data, url, callBack) {
       message.warning('网络故障');
     },
     success: (res) => {
-      if(callBack){
-        return callBack(res);
-      }
       return res;
     },
   });
@@ -58,24 +55,47 @@ export default function DynamicExportButton(
   }
 
   function defaultUrl() {
-    return config.mockServer + api + '/exportApi';
+    return api + '/exportApi';
   }
 
   function getColumns() {
-    let url = defaultUrl() + '/findExportColumnHeader';
+    let url = defaultUrl() + '/findExportColumnHeader?token=' + getToken();
     let data = {
       serviceKey,
       serviceBean,
       serviceParam,
-      token: getToken(),
     };
     getThisInfo(data, url).then((y) => {
-      debugger;
+      if(y){
+        setColumns(formateObjToArr(y));
+      }
     })
   }
 
   function exportExcel(){
+    let data = {
+      serviceKey,
+      serviceBean,
+      serviceParam,
+      fieldNames: targetKeys.length ? targetKeys : columns.map((y) => y.key),
+    };
+
+    let url = defaultUrl() + '/exportData?token=' + getToken();
+    getThisInfo(data, url).then((y) => {
+      if(y){
+        let data = {
+          serviceBean,
+          serviceKey,
+          fileKey: y.cacheKey,
+          token: getToken(),
+        };
+        window.open(defaultUrl() + '/downLoadExcel?' + qs.stringify(data));
+        setVisible(false);
+        message.success('正在下载导出文件');
 
+        return true;
+      }
+    })
   }
 
   useEffect(() => {
@@ -85,21 +105,33 @@ export default function DynamicExportButton(
   }, [visible]);
   return (
     <>
-      <Button {...buttonProps} onClick={btnClick}>
-        {text}
-      </Button>
+      <ButtonDiy name={text}
+                 type='default'
+                 className='defaultBlue'
+                 handleClick={btnClick}/>
       <Modal
         visible={visible}
         width={1000}
         title='自定义导出'
-        bodyStyle={{ padding: '24px 36px' }}
+        bodyStyle={{
+          padding: '24px 36px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+        }}
         {...modalProps}
         onOk={exportExcel}
         onCancel={() => setVisible(false)}
       >
         <Transfer
           showSearch
-          style={{ flex: '1' }}
+          style={{ flex: '1',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+          }}
           dataSource={columns}
           titles={['可选项目', '已选项目']}
           targetKeys={targetKeys}
@@ -107,6 +139,7 @@ export default function DynamicExportButton(
           onChange={handleChange}
           operations={['增加导出项', '移除导出项']}
           render={item => item.title || ''}
+
         />
         <Alert showIcon
                style={{ marginTop: 12 }}
@@ -119,7 +152,4 @@ export default function DynamicExportButton(
 
 DynamicExportButton.defaultProps = {
   text: '自定义导出',
-  columnsUrl: '/exportApi/findExportColumnHeader',
-  exportUrl: '/exportApi/exportData',
-  downloadUrl: '/exportApi/downLoadExcel',
 };