@bit-sun/business-component 2.0.17-alpha.1 → 2.0.19

package/src/components/Functional/ExportFunctions/ExportHistoryDrawer/index.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import {Drawer, Tooltip, Table, Space, Button, message, Popconfirm} from 'antd';
+import upExport from '../../../../assets/upExport.svg';
+import exportProcessing from '../../../../assets/exportProcessing.svg';
+import exportSuccess from '../../../../assets/exportSuccess.svg';
+import exportFail from '../../../../assets/exportFail.svg';
+import styles from './index.less';
+import { downloadExcel, handleCommonTimeRender } from '@/utils/utils';
+import axios from 'axios';
+
+const ExportHistoryIcon = () => {
+  const [exportHistoryParams, setExportHistoryParams] = useState({
+    visible: false,
+    title: '导出列表',
+    width: '420',
+    placement: 'right',
+    onClose: () =>
+      setExportHistoryParams({
+        ...exportHistoryParams,
+        visible: false,
+      }),
+  });
+
+  return (
+    <div style={{ cursor: 'pointer' }}>
+      <Tooltip title="导出记录">
+        <img
+          width={24}
+          src={upExport}
+          onClick={() =>
+            setExportHistoryParams({
+              ...exportHistoryParams,
+              visible: true,
+            })
+          }
+        />
+      </Tooltip>
+      {exportHistoryParams.visible && (
+        <ExportHistoryDrawer {...exportHistoryParams} />
+      )}
+    </div>
+  );
+};
+
+const ExportHistoryDrawer = (props: any) => {
+  const [dataSource, setDataSource] = useState([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 20,
+    total: undefined
+  })
+  const remoteData = (pag?: any) => {
+    axios({
+      url: '/oms-ops/businessImport',
+      method: 'get',
+      params: {
+        'qp-type-eq': 100,
+        currentPage: pag?.current || pagination.current,
+        pageSize: pag?.pageSize || pagination.pageSize,
+      },
+    }).then((result) => {
+      setDataSource(result?.data?.data?.items);
+      setPagination({
+        current: result?.data?.data?.page,
+        pageSize:result?.data?.data?.size,
+        total: result?.data?.data?.total
+      })
+    });
+  }
+
+  useEffect(() => {
+    remoteData()
+  }, []);
+  const columns = [
+    {
+      title: false,
+      key: 'name',
+      dataIndex: 'name',
+      render: (text: any, record: any) => {
+        const { importStatus, createTime } = record;
+        let resultIcon;
+        switch (importStatus) {
+          case '10':
+            resultIcon = <img src={exportProcessing} />;
+            break;
+          case '20':
+            resultIcon = <img src={exportSuccess} />;
+            break;
+          case '30':
+            resultIcon = <img src={exportFail} />;
+        }
+        return (
+          <div style={{ display: 'flex' }}>
+            <div className={styles.pictureWrap}>{resultIcon}</div>
+            <div style={{ marginLeft: '4px' }}>
+              <div style={{ fontSize: '14px', marginBottom: '-3px' }}>
+                {text}
+              </div>
+              <div
+                style={{
+                  color: '#BFBFBF',
+                  fontSize: '12px',
+                  lineHeight: '16px',
+                }}
+              >
+                {record?.importStatus === '10'
+                  ? '导出进行中...'
+                  : handleCommonTimeRender(createTime)}
+              </div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: false,
+      dataIndex: '2',
+      render: (text: any, record: any) => {
+        return (
+          <Space>
+            {record.importStatus == 20 && <Button style={{padding: 0}} type={'link'} onClick={() => {
+              downloadExcel(record.importUrl, record.name, true);
+            }}>下载</Button>}
+            {record.importStatus !== 10 && <Popconfirm title={'确定要删除吗？'} onConfirm={() => {
+              axios({
+                url:`/oms-ops/businessImport/${record.id}`,
+                method:'DELETE',
+              })
+                .then((result) => {
+                  message.success('删除成功')
+                  remoteData()
+                })
+            }}>
+              <Button style={{padding: 0}} type={'link'} danger={true} >删除</Button>
+            </Popconfirm>}
+          </Space>
+        );
+      },
+    },
+  ];
+
+  return (
+    <Drawer {...props} bodyStyle={{ padding: 0 }}>
+      <div className={styles.tableWrapper}>
+        <Table columns={columns} dataSource={dataSource} pagination={pagination} onChange={remoteData} />
+      </div>
+    </Drawer>
+  );
+};
+export default ExportHistoryIcon;

package/src/components/Functional/ExportFunctions/ExportIcon/index.tsx

@@ -0,0 +1,44 @@
+import React, {Ref} from 'react'
+import {message, Popconfirm, Tooltip} from "antd";
+import axios from 'axios'
+import exportlogo from '../../../../assets/exportlogo.png'
+
+interface exportIconType{
+	url: string,
+	params: any,
+	otherParams?: any
+}
+
+const ExportIcon = ({params, url, otherParams}: exportIconType) => {
+
+
+	return (
+		<div style={{ cursor: 'pointer' }}>
+			<Popconfirm
+				title={'确定要导出当前数据吗？'}
+				onConfirm={() => {
+					axios({
+						url,
+						method:'POST',
+						data:params?.current || params(),
+						...otherParams,
+					})
+						.then((result: any) => {
+							result = result.data;
+							if (result.code !== '000000') {
+								message.error(result?.msg);
+								return;
+							}
+							message.success('任务已排入导出队列')
+						})
+				}}
+			>
+				<Tooltip title="导出数据">
+					<img width={32} src={exportlogo} />
+				</Tooltip>
+			</Popconfirm>
+		</div>
+	)
+}
+
+export default ExportIcon

package/src/index.ts

@@ -22,3 +22,5 @@ export { default as TreeSearchSelect } from './components/Functional/TreeSearchS
 export { default as BusinessTreeSearchSelect } from './components/Business/TreeSearchSelect';
 export { default as StateFlow } from './components/Business/StateFlow';
 export { default as GuideWrapper } from './components/Business/CommonGuideWrapper';
+export { default as ExportIcon } from './components/Functional/ExportFunctions/ExportIcon'
+export { default as ExportHistoryIcon } from './components/Functional/ExportFunctions/ExportHistoryDrawer'

package/src/utils/utils.ts

@@ -0,0 +1,22 @@
+import dayjs from 'dayjs'
+
+export function downloadExcel(data: any, fileName?: any, isResUrl?: boolean) {
+	const resUrl = isResUrl
+		? data
+		: window.URL.createObjectURL(
+			new Blob([data], {
+				type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+			}),
+		);
+	const save_link = document.createElement('a');
+	save_link.href = resUrl;
+	if (fileName) {
+		save_link.download = fileName; /// 设置下载文件名
+	}
+	save_link.click();
+}
+
+export function handleCommonTimeRender(text: any, format?: any) {
+	const formatType = format || 'YYYY-MM-DD HH:mm:ss';
+	return text && dayjs(text).format(formatType);
+}