feat(): 全局下载列表导出Modal

src/components/layout/Header/downloadModal.jsx

@@ -0,0 +1,83 @@
+import React, {useState, useEffect} from 'react'
+import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table } from 'antd'
+import './index.scss'
+
+function DownloadModal (props)  {
+    const {
+        visible,
+        onCancel
+    } = props
+
+    const [formData, setFormData] = useState({
+        type: '0',
+        pn: 1,
+        length: 20
+    })
+    const [loading, setLoading] = useState(false)
+    const [resultData, setResultDate] = useState({
+        list: [],
+        total: 0
+    })
+
+    const tableColumns = [
+        {
+            title: "序号", 
+            width: 60,
+            align: 'center',
+            render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1
+        },
+    ]
+
+    const handleTabChange = (v) => {
+        setFormData({
+            ...formData,
+            type: v,
+            pn: 1
+        })
+    }
+
+    return (
+        <Modal
+            open={visible}
+            onCancel={onCancel}
+            footer={null}
+            width={1400}
+            wrapClassName="yisa-modal modal-export"
+            title={``}
+        >
+            <div className="modal-export-container">
+                <div className="modal-export-title">
+                    导出下载列表
+                    <span>（导出数量不足500时，将不计入排队序列）</span>
+                </div>
+                <div className="modal-export-content">
+                    <div className="export-tabs-wrapper">
+                        <Tabs
+                            defaultActiveKey="1"
+                            onChange={handleTabChange}
+                            items={[
+                                { label: `全部`,  key: '0' },
+                                { label: `导出中`, key: '1' },
+                                { label: `已完成`, key: '2' },
+                                { label: `等待中`, key: '3' }
+                            ]}
+                        />
+                    </div>
+                    <div className="export-table-wrapper">
+                        <Table
+                            className='export-table'
+                            dataSource={resultData?.list || []}
+                            columns={tableColumns}
+                            pagination={false}
+                            scroll={{y: 'calc(100% - 50px)'}}
+                            loading={loading}
+                        />
+                    </div>
+                    <div className="export-pagination-wrapper"></div>
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default DownloadModal

src/components/layout/Header/index.jsx

@@ -7,6 +7,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { Button, Popover, Modal, Input, message } from 'antd'
 import { setSkin } from "@/store/common.js"
 import { Icon } from "@/components"
+import DownloadModal from "./downloadModal"
 import _ from 'lodash'
 import { removeToken, getToken } from "@/config/cookie.js"
 import { useSessionStorageState, useSetState } from "ahooks"
@@ -18,6 +19,7 @@ export default function Header(props) {
   const dispatch = useDispatch()
   const navigate = useNavigate();
   const [visible, setVisible] = useState(false)
+  const [downloadVisible, setDownloadVisible] = useState(false)
 
   const [popVisible, setPopVisible] = useState(false)
 
@@ -210,6 +212,10 @@ export default function Header(props) {
     navigate('/nav')
   }
 
+  const handleDownloadList = () => {
+
+  }
+
   useEffect(()=>{
     isInstance.current = createIS();
     isInstance.current.rsaUtil.getKeyPair();
@@ -237,6 +243,9 @@ export default function Header(props) {
                 <Icon type="sanjibumen" />
               </li>
             </Popover>
+            <li title="下载列表" className="skin-icon icon-color" onClick={() => setDownloadVisible(true)}>
+              {/* <Icon type="sanjibumen" /> */}
+            </li>
             {/* <li title="换肤" className="skin-icon icon-color" onClick={changeSkin}>
               <Icon type="pifu" />
             </li> */}
@@ -289,6 +298,10 @@ export default function Header(props) {
           </div>
         </div>
       </Modal>
+      <DownloadModal
+        visible={downloadVisible}
+        onCancel={() => setDownloadVisible(false)}
+      />
     </>
   )
 }

src/components/layout/Header/index.scss

@@ -293,4 +293,37 @@
   p{
     margin: 0;
   }
+}
+.modal-export {
+  .ant-modal-body {
+    max-height: 860px;
+    min-height: 400px;
+    border-radius: 4px;
+    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16); 
+    .modal-export-container {
+      .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab {
+        width: unset;
+        padding: 12px 5px;
+      }
+      .ant-tabs-tab-btn {
+        color: rgba($color: #fff, $alpha: .8);
+      }
+      .ant-tabs-tab+.ant-tabs-tab {
+        margin: unset;
+      }
+      .export-tabs-wrapper {
+        margin-top: 10px;
+      }
+      .modal-export-title {
+        font-size: 16px;
+        font-weight: 700;
+        span {
+          font-size: 12px;
+          font-weight: 400;
+          opacity: .8;
+        }
+      }
+    }
+  }
+  
 }