feat(): 统一导出列表

src/components/layout/Header/downloadModal.jsx

@@ -1,5 +1,7 @@
 import React, {useState, useEffect} from 'react'
-import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table } from 'antd'
+import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table, message, Pagination } from 'antd'
+import { dictionary } from "@/config/common"
+import ajax from "@/services"
 import './index.scss'
 
 function DownloadModal (props)  {
@@ -21,21 +23,182 @@ function DownloadModal (props)  {
 
     const tableColumns = [
         {
-            title: "序号", 
-            width: 60,
+            title: '文件名',
+            width: 200,
             align: 'center',
-            render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1
+            dataIndex: 'name'
+        },
+        {
+            title: '进度',
+            width: 200,
+            align: 'center',
+            dataIndex: 'progress',
+            render: (progress) => ((progress || 0) * 100) + '%'
+        },
+        {
+            title: '文件大小',
+            width: 200,
+            align: 'center',
+            dataIndex: 'size'
+        },
+        {
+            title: '排队位置',
+            width: 150,
+            align: 'center',
+            dataIndex: 'queue'
+        },
+        {
+            title: '状态',
+            width: 100,
+            align: 'center',
+            dataIndex: 'status',
+            render: (status) => {
+                if (status == 1) {
+                    return (
+                        <div className="download-status-1" style={{color: '#3AA9FF'}}>导出中</div>
+                    )
+                } else if (status == 2) {
+                    return (
+                        <div className="download-status-2" style={{color: '#2ADC41'}}>已完成</div>
+                    )
+                } else if (status == 3) {
+                    return (
+                        <div className="download-status-3">等待中</div>
+                    )
+                }
+            }
+        },
+        {
+            title: '创建时间',
+            width: 200,
+            align: 'center',
+            dataIndex: 'create_time'
+        },
+        {
+            title: "操作", 
+            // width: 60,
+            align: 'center',
+            render: (text, record, index) => {
+                return (
+                    <div className='download-list-action'>
+                        {
+                            record.status == 2 ? (
+                                <div className="download-btn-download" style={{color: '#3AA9FF'}} onClick={() => handleDownload(record.url)}>下载</div>
+                            ) : null
+                        }
+                        <div className="download-btn-del" style={{color: '#EC5761'}} onClick={() => handleDel(record)}>删除</div>
+                    </div>
+                )
+            }
         },
     ]
 
+    const paginationProps = {
+        className: "pagination-common",
+        showQuickJumper: true,
+        showSizeChanger: true,
+        current: formData.pn,
+        total: resultData?.total,
+        pageSize: formData.length,
+        pageSizeOptions: dictionary.pageSizeOptions,
+        onChange: (current, size) => {
+          setFormData({
+            ...formData,
+            ...{ pn: current == formData.pn ? 1 : current, length: size }
+          })
+          ajaxGetDownloadList({
+            ...formData,
+            ...{ pn: current == formData.pn ? 1 : current, length: size }
+          })
+        },
+        onShowSizeChange: (current, size) => {
+            setFormData({
+                ...formData,
+                ...{ pn: current == formData.pn ? 1 : current, length: size }
+            })
+            ajaxGetDownloadList({
+                ...formData,
+                ...{ pn: current == formData.pn ? 1 : current, length: size }
+            })
+        }
+    }
+
+    const handleDownload = (url) => {
+        window.open(url)
+    }
+
+    const ajaxGetDownloadList = (params=formData) => {
+        ajax.getDownloadList(params).then(e => {
+            if (e.status == 20000 && e.data.list.length) {
+                setResultDate({
+                    list: [...e.data.list],
+                    total: e.data.total
+                })
+            } else {
+                setResultDate({
+                    list: [],
+                    total: 0
+                })
+            }
+        })
+    }
+
+    const ajaxDownloadDel = (id) => {
+        return new Promise((resolved, rejected) => {
+            ajax.delDownload({id: id}).then(e => {
+                if (e.status == 20000) {
+                    resolved(e.message)
+                } else {
+                    message.error(e.message)
+                }
+            }).catch(err => {
+                message.error(err)
+                rejected(err)
+            })
+        })
+    }
+
+    const handleDel = (data) => {
+        Modal.confirm({
+            title: `确认删除`,
+            content: `是否确认删除文件 ${data.name}？`,
+            onOk: () => {
+                ajaxDownloadDel(data.id).then(msg => {
+                    ajaxGetDownloadList()
+                    message.success('下载任务删除成功')
+                })
+            }
+        })
+    }
+
     const handleTabChange = (v) => {
         setFormData({
             ...formData,
             type: v,
             pn: 1
         })
+        ajaxGetDownloadList({
+            ...formData,
+            type: v,
+            pn: 1
+        })
     }
 
+    useEffect(() => {
+        if (visible) {
+            setFormData({
+                type: '0',
+                pn: 1,
+                length: 20
+            })
+            ajaxGetDownloadList({
+                type: '0',
+                pn: 1,
+                length: 20
+            })
+        }
+    }, [visible])
+
     return (
         <Modal
             open={visible}
@@ -53,7 +216,7 @@ function DownloadModal (props)  {
                 <div className="modal-export-content">
                     <div className="export-tabs-wrapper">
                         <Tabs
-                            defaultActiveKey="1"
+                            defaultActiveKey="0"
                             onChange={handleTabChange}
                             items={[
                                 { label: `全部`,  key: '0' },
@@ -69,11 +232,13 @@ function DownloadModal (props)  {
                             dataSource={resultData?.list || []}
                             columns={tableColumns}
                             pagination={false}
-                            scroll={{y: 'calc(100% - 50px)'}}
+                            // scroll={}
                             loading={loading}
                         />
                     </div>
-                    <div className="export-pagination-wrapper"></div>
+                    <div className="export-pagination-wrapper">
+                        <Pagination {...paginationProps} className="pagination-common" />
+                    </div>
                 </div>
             </div>
         </Modal>

src/components/layout/Header/index.jsx

@@ -243,8 +243,8 @@ export default function Header(props) {
                 <Icon type="sanjibumen" />
               </li>
             </Popover>
-            <li title="下载列表" className="skin-icon icon-color" onClick={() => setDownloadVisible(true)}>
-              {/* <Icon type="sanjibumen" /> */}
+            <li title="下载列表" className="skin-icon icon-color icon-download" onClick={() => setDownloadVisible(true)}>
+              <Icon type="download-list" />
             </li>
             {/* <li title="换肤" className="skin-icon icon-color" onClick={changeSkin}>
               <Icon type="pifu" />

src/components/layout/Header/index.scss

@@ -1,3 +1,19 @@
+$color-user-list-bg : var(--color-user-list-bg);
+@mixin scrollBar($back, $item) {
+  &::-webkit-scrollbar-track-piece,
+  &::-webkit-scrollbar-corner,
+  &::-webkit-scrollbar-track {
+    background: #000;
+  }
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #9da2ab;
+    border-radius: 2px;
+  }
+}
 .cc-header-actions {
   > ul {
     display: flex;
@@ -296,11 +312,36 @@
 }
 .modal-export {
   .ant-modal-body {
-    max-height: 860px;
-    min-height: 400px;
+    height: 700px;
+    min-height: 0;
     border-radius: 4px;
     box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
+    .ant-table-body {
+      // @include scrollBar(var(--color-user-list-bg), #3B97FF);
+    }
+    .export-table-wrapper {
+      &::before {
+        content: "";
+        width: 4px;
+        height: 56px;
+        background: #616b83;
+        position: absolute;
+        right: 19px;
+        top: 100px;
+        z-index: 2;
+      }
+    }
     .modal-export-container {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+      .modal-export-content {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
       .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab {
         width: unset;
         padding: 12px 5px;
@@ -325,5 +366,27 @@
       }
     }
   }
+  .export-table-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
+  }
+  .download-list-action {
+    display: flex;
+    justify-content: center;
+    > div {
+      margin: 0 10px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
 
+.icon-download {
+  .icon {
+    background: url('../../../assets/images/icon-download-list.png') no-repeat 100% 100%;
+    background-size: 100% 100%;
+  }
 }

src/pages/SystemMgm/MessageMgm/ConfMes/loadable.jsx

@@ -133,8 +133,14 @@ function ConfMes(props) {
         onChange: (current, size) => {
           setPageInfo({
             ...pageInfo,
-            ...{ pn: current, length: size }
+            ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
           });
+        },
+        onShowSizeChange: (current, size) => {
+            setPageInfo({
+                ...pageInfo,
+                ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
+            });
         }
     }
     const toDeftime = (v) => {

src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx

@@ -105,8 +105,14 @@ function NotificationMes(props) {
         onChange: (current, size) => {
           setPageInfo({
             ...pageInfo,
-            ...{ pn: current, length: size }
+            ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
           });
+        },
+        onShowSizeChange: (current, size) => {
+            setPageInfo({
+                ...pageInfo,
+                ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
+            });
         }
     }
     const toDeftime = (v) => {

src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx

@@ -104,8 +104,14 @@ function MonitorCarAlarmMes(props) {
         onChange: (current, size) => {
           setPageInfo({
             ...pageInfo,
-            ...{ pn: current, length: size }
+            ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
           });
+        },
+        onShowSizeChange: (current, size) => {
+            setPageInfo({
+                ...pageInfo,
+                ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
+            });
         }
     }
     const toDeftime = (v) => {

src/pages/SystemMgm/MessageMgm/NotificationMes/loadable.jsx

@@ -146,8 +146,14 @@ function NotificationMes(props) {
         onChange: (current, size) => {
           setPageInfo({
             ...pageInfo,
-            ...{ pn: current, length: size }
+            ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
           });
+        },
+        onShowSizeChange: (current, size) => {
+            setPageInfo({
+                ...pageInfo,
+                ...{ pn: current == pageInfo.pn ? 1 : current, length: size }
+            });
         }
     }
     const toDeftime = (v) => {

src/services/common.js

@@ -129,6 +129,22 @@ const getPlateSearch = (params) => {
     data: params,
   });
 };
+//下载列表
+const getDownloadList = (params) => {
+  return ajax({
+    url: "/api/com/common/download_list",
+    type: 'get',
+    data: params
+  })
+}
+//下载列表 - 删除
+const delDownload = (params) => {
+  return ajax({
+    url: "/api/com/common/download_del",
+    type: 'post',
+    data: params
+  })
+}
 export default {
   getSysConfig,
   getRoadSearch,
@@ -146,4 +162,6 @@ export default {
   updateCache,
   getAreaTree,
   getLocationNameByLngLat,
+  getDownloadList,
+  delDownload
 };