feat:增加下载中心作业列表显示、搜索、下载、删除及容量显示

src/api/indexTaskManage.js

@@ -22,3 +22,12 @@ export const QueryAssessmentManageMessage = (obj) => http.post('/admin/assessmen
 
 // 评估管理评估详情查看 
 export const QueryAssessmentDetail = (obj) => http.post('/admin/assessment/manage/queryAssessmentDetail', obj)
+
+// 下载中心
+export const DownLoadList = (obj) => http.get('/admin/download/page', {params: obj})
+
+// 下载中心容量查询
+export const DownLoadTotalSize = (obj) => http.get('/admin/download/totalSize', {params: obj})
+
+// 下载中心删除
+export const RemoveDownLoadHomeWork = (obj) => http.get('/admin/download/del', {params: obj})

src/views/DownLoad.vue

@@ -26,13 +26,13 @@
           />
         </div>
         <div class="btns">
-          <div class="btn1">
+          <div class="btn1" @click="searchDownloadList">
             <div class="img1">
               <img src="../assets/images/courseManage/search0.png" />
             </div>
             <div class="wz">搜索</div>
           </div>
-          <div class="btn2">
+          <div class="btn2" @click="reseatDownloadList">
             <div class="img2">
               <img src="../assets/images/courseManage/reset1.png" />
             </div>
@@ -53,17 +53,21 @@
           "
         >
           <div>当前容量:</div>
-          <div>55.01MB / 2GB</div>
+          <div>{{formatCapacity(capacity)}} / 2GB</div>
         </div>
-        <a-progress :percent="40" :width="200" :show-info="false" :stroke-color="{
+        <a-progress :percent="countCMB" :width="200" :show-info="false" :stroke-color="{
-        '0%': '#45B058',
+        '0%': countCMB>2?'#FF0000 ':'#45B058',
-        '100%': '#45B058',
+        '100%': countCMB>2?'#FF0000 ':'#45B058',
       }" />
+        <div v-if="countCMB>2" style="color:rgba(255, 116, 116, 1);font-size:12px;">容量已满，请删除文件</div>
       </div>
     </div>
     <!-- 文件容器 -->
     <div style="display:flex;flex-wrap:wrap;">
-      <div v-for="(values, index) in homeWorkList" class="zipcontainer" :key="index">
+      <div v-if="homeWorkList.length==0" style="width:100%;height:500px;display:flex;justify-content:center;align-items:center;border:1px solid #d9d9d9;border-radius: 8px;margin-top: 60px;">
+        <img src="../assets/images/courseManage/downloadnodata.png" />
+      </div>
+      <div v-else v-for="(values, index) in homeWorkList" class="zipcontainer" :key="index">
         <!-- 单个文件 -->
         <div v-if="values" class="item">
           <div class="itemup">
@@ -71,56 +75,159 @@
             <div class="cent">
               <div class="zip"></div>
               <div class="ziprit">
-                <div class="textop">作业名称</div>
+                <div class="textop">{{values.name}}</div>
                 <div class="texdown">
                   <div class="timemanag" style="margin-top: 12px">
-                    2022-08-08 10:30:30 管理员
+                    {{values.createTime?values.createTime:'-'}} {{values.createName?values.createName:'-'}}
                   </div>
-                  <div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
+                  <div class="timemanag">来源：{{values.source?values.source:'-'}}</div>
                 </div>
               </div>
             </div>
           </div> 
           <div class="itemdown"> 
-            <div class="download" @click="downLoadFile">下载</div>
+            <div class="download" @click="downLoadFile(values)">下载</div>
-            <div class="delete" @click="removeFile">删除</div>
+            <div class="delete" @click="removeFile(values)">删除</div>
           </div>
         </div>
       </div>
     </div>
+    <div style="width:100%;margin-top: 90px;display: flex;justify-content: center;align-items: center;">
+      <!-- 分页 -->
+      <a-pagination
+        v-if="total>10"
+        :showSizeChanger="false"
+        showQuickJumper="true"
+        hideOnSinglePage="true"
+        :pageSize="pageSize"
+        :current="currentPage"
+        :total="total"
+        class="pagination"
+        @change="changePaginationStu"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import { toRefs, reactive } from "vue";
+import { message } from "ant-design-vue";
+import * as api from "@/api/indexTaskManage";
 export default {
   name: "DownLoad",
   setup() {
     const state = reactive({
       name: "",
-      homeWorkList: []
+      homeWorkList: [],
+      currentPage: 1,
+      pageSize: 12,
+      total: 0,
+      capacity: 0,
+      countCMB: 0,
+      locationHref: location.href.indexOf('http://') !== -1 ? 'http://111.231.196.214:12016/' : location.href.slice(0, location.href.indexOf('/m')) + '/upload/'
     });
 
     function getData() {
-      state.homeWorkList = [1,2,3,4,5,6]
+      api.DownLoadList({
+        current:state.currentPage,
+        name: state.name,
+        size: state.pageSize
+      }).then(res=>{
+        console.log(res)
+        if(res.data.code==200){
+          state.homeWorkList = res.data.data.records;
+          state.total = res.data.data.total;
+        }
+      }).catch(err=>{
+        console.log(err)
+      })
     }
 
     // 获取可下载数据
     getData()
 
-    // 下载文件
+    function getDownLoadTotalSize() {
-    function downLoadFile() {
+      api.DownLoadTotalSize().then(res=>{
+        console.log(res)
+        if(res.data.code==200){
+          state.capacity = res.data.data;
+        }else{
+          state.capacity = 0;
+        }
+      }).catch(err=>{
+        console.log(err)
+      })
+    }
 
+    // 获取当前用户容量
+    getDownLoadTotalSize()
+
+    // 格式化容量显示
+    function formatCapacity(data) {
+      let num = Number(data);
+      let CMB = (num / 1048576).toFixed(2);
+      let countCMB = (num / 1048576*1024).toFixed(2);
+      state.countCMB = countCMB;
+      if(CMB%1024>1){
+        CMB = (CMB/1024).toFixed(2) + 'GB';
+      }else{
+        CMB = CMB + 'MB';
+      }
+      console.log(CMB)
+      return CMB
+    }
+
+    // 下载文件
+    function downLoadFile(data) {
+      console.log(data)
+      window.open(state.locationHref + data.url)
     } 
     // 删除文件
-    function removeFile() {
+    function removeFile(data) {
-
+      console.log(data)
+      api.RemoveDownLoadHomeWork({
+        id:data.id
+      }).then(res=>{
+        console.log(res)
+        if(res.data.code==200){
+          message.destroy()
+          message.success("删除成功")
+          getData()
         }
+      }).catch(err=>{
+        console.log(err)
+        message.destroy()
+        message.error("删除失败")
+      })
+    }
+
+    // 搜索
+    function searchDownloadList() {
+      getData()
+    } 
+
+    // 重置
+    function reseatDownloadList() {
+      state.name = "";
+      state.currentPage = 1;
+      getData()
+    } 
+
+    // 分页
+     //分页
+     const changePaginationStu = (page) => {
+      state.currentPage = page;
+      getData();
+    };
 
     return {
       ...toRefs(state),
       downLoadFile,
-      removeFile
+      removeFile,
+      changePaginationStu,
+      searchDownloadList,
+      reseatDownloadList,
+      formatCapacity
     };
   },
 };