finish del of filelist

frontend/vben/mock/page/filelist.ts

@@ -1,9 +1,13 @@
+import { randomInt } from 'crypto'
 import { MockMethod } from 'vite-plugin-mock'
 import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util'
 
-export function createFileList() {
+const deletedIDs: number[] = []
+
+function createFileList() {
   const lst: any[] = []
   for (let i = 100; i > 0; i--) {
+    if (deletedIDs.includes(i)) continue
     lst.push({
       id: i,
       title: '接入网2020B卷',
@@ -12,7 +16,7 @@ export function createFileList() {
       questions: 10,
       author: '课程组长',
       datetime: '2020-11-26 17:39',
-      percent: i - 1,
+      percent: randomInt(0, 100) + 1,
     })
   }
   return lst
@@ -50,4 +54,19 @@ export default [
       })
     },
   },
+  {
+    url: '/basic-api/delFile',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request)
+      if (!token) return resultError('Invalid token')
+      const id = Number(request.query.id)
+      if (!id || id < 0) return resultError('Invalid id')
+      deletedIDs.push(id)
+      return resultSuccess({
+        msg: '已成功删除文件' + id + '.',
+      })
+    },
+  },
 ] as MockMethod[]

frontend/vben/src/api/page/index.ts

@@ -1,9 +1,10 @@
 import { defHttp } from '/@/utils/http/axios'
-import { getFileListModel, FilePercent } from './model/fileListModel'
+import { getFileListModel, FilePercent, DelFile } from './model/fileListModel'
 
 enum Api {
   GetFileList = '/getFileList',
   GetFilePercent = '/getFilePercent',
+  DelFile = '/delFile',
 }
 
 /**
@@ -14,8 +15,15 @@ export const getFileList = (count?: number) => {
 }
 
 /**
- * @description: Get file percant
+ * @description: Get file percent
  */
 export const getFilePercent = (id: number) => {
   return defHttp.get<FilePercent>({ url: Api.GetFilePercent, params: { id: id } })
 }
+
+/**
+ * @description: Get file percant
+ */
+export const delFile = (id: number) => {
+  return defHttp.get<DelFile>({ url: Api.DelFile, params: { id: id } })
+}

frontend/vben/src/api/page/model/fileListModel.ts

@@ -17,3 +17,7 @@ export type getFileListModel = FileListGroupItem[]
 export interface FilePercent {
   percent: number
 }
+
+export interface DelFile {
+  msg: string
+}

frontend/vben/src/views/page/filelist/data.tsx

@@ -1,6 +1,9 @@
+import { reactive } from 'vue'
 import { getFileList, getFilePercent } from '/@/api/page'
 import { getFileListModel } from '/@/api/page/model/fileListModel'
 
+const random = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min)
+
 function refreshFilePercent(arr: any[], i: number) {
   return async () => {
     const p = await getFilePercent(arr[i].id)
@@ -11,13 +14,28 @@ function refreshFilePercent(arr: any[], i: number) {
   }
 }
 
-export const { cardList, totalSize, totalQuestions } = await (async () => {
+export function getListOfPage(pageSize: number, page: number): any[] {
-  const cardList: any[] = []
+  const i = page - 1
+  let lst: any[] = []
+  if (i < cardList._cardList.length / pageSize)
+    lst = reactive(cardList._cardList.slice(i * pageSize, page * pageSize))
+  else lst = reactive(cardList._cardList.slice((cardList._cardList.length / pageSize) * pageSize))
+  for (let i = 0; i < lst.length; i++) {
+    if (!lst[i].hassettimeout && lst[i].percent > 0 && lst[i].percent < 100) {
+      setTimeout(refreshFilePercent(lst, i), 1000 + random(0, 1000))
+      lst[i].hassettimeout = true
+    }
+  }
+  return lst
+}
+
+async function refreshFileList() {
+  const __cardList: any[] = []
   const lst = (await getFileList()) as getFileListModel
-  let totalSize = 0
+  let __totalSize = 0
-  let totalQuestions = 0
+  let __totalQuestions = 0
-  for (let i = 0; i < 100; i++) {
+  for (let i = 0; i < lst.length; i++) {
-    cardList.push({
+    __cardList.push({
       id: lst[i].id,
       title: lst[i].title,
       description: lst[i].description,
@@ -28,16 +46,54 @@ export const { cardList, totalSize, totalQuestions } = await (async () => {
       color: '#1890ff',
       author: lst[i].author,
       percent: lst[i].percent,
+      hassettimeout: false,
     })
-    if (cardList[i].percent < 100) {
+    __totalSize += lst[i].size
-      setTimeout(refreshFilePercent(cardList, i), 10000)
+    __totalQuestions += lst[i].questions
-    }
-    totalSize += lst[i].size
-    totalQuestions += lst[i].questions
   }
   return {
-    cardList,
+    _cardList: __cardList,
-    totalSize,
+    _totalSize: __totalSize,
-    totalQuestions,
+    _totalQuestions: __totalQuestions,
   }
-})()
+}
+
+export let cardList = reactive(await refreshFileList())
+
+export let pagination = reactive({
+  current: 1,
+  total: cardList._cardList.length,
+  show: true,
+  pageSize: 10,
+  onChange: function (page: number, pageSize: number) {
+    this.current = page
+    this.pageSize = pageSize
+  },
+})
+
+export function refreshCardList() {
+  refreshFileList().then((value) => {
+    cardList = reactive(value)
+    pagination = reactive({
+      current: 1,
+      total: cardList._cardList.length,
+      show: true,
+      pageSize: 10,
+      onChange: function (page: number, pageSize: number) {
+        this.current = page
+        this.pageSize = pageSize
+      },
+    })
+  })
+}
+
+export function deleteFileByID(id: number) {
+  cardList._cardList.map((value: any, index: number) => {
+    if (value.id == id) {
+      cardList._cardList.splice(index, 1)
+      cardList._totalSize -= value.size
+      cardList._totalQuestions -= value.questions
+      pagination.total = cardList._cardList.length
+    }
+  })
+}

frontend/vben/src/views/page/filelist/index.vue

@@ -18,11 +18,11 @@
         </a-col>
         <a-col :span="8" :class="`${prefixCls}__top-col`">
           <div>占用空间</div>
-          <p> {{ totalSize }}MB </p>
+          <p> {{ cardList._totalSize }}MB </p>
         </a-col>
         <a-col :span="8" :class="`${prefixCls}__top-col`">
           <div>总题目数</div>
-          <p> {{ totalQuestions }} </p>
+          <p> {{ cardList._totalQuestions }} </p>
         </a-col>
       </a-row>
     </div>
@@ -30,7 +30,7 @@
     <div :class="`${prefixCls}__content`">
       <a-list :pagination="pagination">
         <template
-          v-for="item in getListOfPage(pagination.pageSize)[pagination.current - 1]"
+          v-for="item in getListOfPage(pagination.pageSize, pagination.current)"
           :key="item.id"
         >
           <a-list-item class="list">
@@ -55,6 +55,7 @@
                     color="error"
                     v-if="hasPermission([RoleEnum.SUPER])"
                     :disabled="item.percent > 0 && item.percent < 100"
+                    @click="deleteFileBy(item.id)"
                   >
                     删除
                   </a-button>
@@ -92,7 +93,7 @@
   import { defineComponent } from 'vue'
   import { Icon } from '/@/components/Icon'
   import { BasicUpload } from '/@/components/Upload'
-  import { cardList, totalSize, totalQuestions } from './data'
+  import { cardList, getListOfPage, deleteFileByID, pagination } from './data'
   import { PageWrapper } from '/@/components/Page'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { usePermission } from '/@/hooks/web/usePermission'
@@ -100,8 +101,18 @@
   import { List } from 'ant-design-vue'
   import { uploadApi } from '/@/api/sys/upload'
   import { useI18n } from '/@/hooks/web/useI18n'
+  import { delFile } from '/@/api/page'
+  import { DelFile } from '/@/api/page/model/fileListModel'
 
   const { t } = useI18n()
+  const { createMessage } = useMessage()
+
+  function deleteFileBy(id: number) {
+    delFile(id).then((value: DelFile) => {
+      createMessage.info(value.msg)
+      deleteFileByID(id)
+    })
+  }
 
   export default defineComponent({
     components: {
@@ -116,20 +127,8 @@
       [Col.name]: Col,
     },
     setup() {
-      const { createMessage } = useMessage()
       const { hasPermission } = usePermission()
 
-      function getListOfPage(pageSize: number): any[] {
-        let listOfPage: any[] = []
-        for (let i = 0; i < cardList.length / pageSize; i++) {
-          listOfPage.push(cardList.slice(i * pageSize, (i + 1) * pageSize))
-        }
-        if (cardList.length % pageSize) {
-          listOfPage.push(cardList.slice((cardList.length / pageSize) * pageSize))
-        }
-        return listOfPage
-      }
-
       return {
         t,
         RoleEnum,
@@ -139,19 +138,10 @@
         uploadApi,
         hasPermission,
         prefixCls: 'list-basic',
-        getListOfPage: getListOfPage,
+        getListOfPage,
-        totalSize,
+        deleteFileBy,
-        totalQuestions,
+        cardList,
-        pagination: {
+        pagination,
-          current: 1,
-          total: cardList.length,
-          show: true,
-          pageSize: 10,
-          onChange: function (page: number, pageSize: number) {
-            this.current = page
-            this.pageSize = pageSize
-          },
-        },
       }
     },
   })