finish filelist progress

frontend/vben/mock/page/filelist.ts

@@ -2,54 +2,24 @@ import { MockMethod } from 'vite-plugin-mock'
 import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util'
 
 export function createFileList() {
-  return [
+  const lst: any[] = []
-    {
+  for (let i = 100; i > 0; i--) {
-      title: '数据库2020B卷',
+    lst.push({
-      color: '',
+      id: i,
-      desc: '不要等待机会，而要创造机会。',
+      title: '接入网2020B卷',
-      group: '数据库与软件工程',
+      description: '电子科技大学接入网2020B卷',
-      date: '2020-04-01',
+      size: i,
-    },
+      questions: 10,
-    {
+      author: '课程组长',
-      title: '数据库2020A卷',
+      datetime: '2020-11-26 17:39',
-      color: '#3fb27f',
+      percent: i - 1,
-      desc: '现在的你决定将来的你。',
+    })
-      group: '数据库与软件工程',
+  }
-      date: '2020-04-01',
+  return lst
-    },
-    {
-      title: 'TCP/IP2018B卷',
-      color: '#e18525',
-      desc: '没有什么才能比努力更重要。',
-      group: 'TCP/IP',
-      date: '2021-04-01',
-    },
-    {
-      title: 'TCP/IP2018A卷',
-      color: '#bf0c2c',
-      desc: '热情和欲望可以突破一切难关。',
-      group: 'TCP/IP',
-      date: '2018-01-01',
-    },
-    {
-      title: '接入网2016B卷',
-      color: '#00d8ff',
-      desc: '健康的身体是实目标的基石。',
-      group: '接入网',
-      date: '2016-01-01',
-    },
-    {
-      title: '接入网2016A卷',
-      color: '#4daf1bc9',
-      desc: '路是走出来的，而不是空想出来的。',
-      group: '接入网',
-      date: '2016-01-01',
-    },
-  ]
 }
 
 export default [
-  // mock user login
+  // mock get filelist
   {
     url: '/basic-api/getFileList',
     timeout: 200,
@@ -58,7 +28,7 @@ export default [
       const token = getRequestToken(request)
       if (!token) return resultError('Invalid token')
       const count = request.query.count
-      if (!count || count <= 0) return resultError('Invalid count')
+      if (!count || count <= 0) return resultSuccess(createFileList())
       let fl = createFileList()
       if (fl.length > count) {
         fl = fl.slice(0, count)
@@ -66,4 +36,18 @@ export default [
       return resultSuccess(fl)
     },
   },
+  {
+    url: '/basic-api/getFilePercent',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request)
+      if (!token) return resultError('Invalid token')
+      const id = request.query.id
+      if (!id || id < 0) return resultError('Invalid id')
+      return resultSuccess({
+        percent: 100,
+      })
+    },
+  },
 ] as MockMethod[]

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

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

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

@@ -1,13 +1,19 @@
 export interface FileListGroupItem {
+  id: number
   title: string
-  icon: string
+  description: string
-  color: string
+  size: number
-  desc: string
+  questions: number
-  date: string
+  author: string
-  group: string
+  datetime: string
+  percent: number
 }
 
 /**
  * @description: Get filelist return value
  */
 export type getFileListModel = FileListGroupItem[]
+
+export interface FilePercent {
+  percent: number
+}

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

@@ -1,14 +0,0 @@
-import { defHttp } from '/@/utils/http/axios'
-import { getFileListModel } from './model/fileListModel'
-
-enum Api {
-  GetFileList = '/getFileList',
-}
-
-/**
- * @description: Get file list
- */
-
-export const getFileList = (count: number) => {
-  return defHttp.get<getFileListModel>({ url: Api.GetFileList, params: { count: count } })
-}

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

@@ -1,16 +1,43 @@
-export const cardList = (() => {
+import { getFileList, getFilePercent } from '/@/api/page'
-  const result: any[] = []
+import { getFileListModel } from '/@/api/page/model/fileListModel'
+
+function refreshFilePercent(arr: any[], i: number) {
+  return async () => {
+    const p = await getFilePercent(arr[i].id)
+    arr[i].percent = p.percent
+    if (p.percent < 100) {
+      setTimeout(refreshFilePercent(arr, i), 1000)
+    }
+  }
+}
+
+export const { cardList, totalSize, totalQuestions } = await (async () => {
+  const cardList: any[] = []
+  const lst = (await getFileList()) as getFileListModel
+  let totalSize = 0
+  let totalQuestions = 0
   for (let i = 0; i < 100; i++) {
-    result.push({
+    cardList.push({
-      id: i,
+      id: lst[i].id,
-      title: 'Vben Admin',
+      title: lst[i].title,
-      description: '基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统',
+      description: lst[i].description,
-      datetime: '2020-11-26 17:39',
+      size: lst[i].size,
+      questions: lst[i].questions,
+      datetime: lst[i].datetime,
       icon: 'bi:filetype-docx',
       color: '#1890ff',
-      author: 'Vben',
+      author: lst[i].author,
-      percent: i,
+      percent: lst[i].percent,
     })
+    if (cardList[i].percent < 100) {
+      setTimeout(refreshFilePercent(cardList, i), 10000)
+    }
+    totalSize += lst[i].size
+    totalQuestions += lst[i].questions
+  }
+  return {
+    cardList,
+    totalSize,
+    totalQuestions,
   }
-  return result
 })()

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

@@ -14,15 +14,15 @@
       <a-row :gutter="12">
         <a-col :span="8" :class="`${prefixCls}__top-col`">
           <div>总文件数</div>
-          <p>8</p>
+          <p> {{ pagination.total }}</p>
         </a-col>
         <a-col :span="8" :class="`${prefixCls}__top-col`">
           <div>占用空间</div>
-          <p>32MB</p>
+          <p> {{ totalSize }}MB </p>
         </a-col>
         <a-col :span="8" :class="`${prefixCls}__top-col`">
           <div>总题目数</div>
-          <p>24</p>
+          <p> {{ totalQuestions }} </p>
         </a-col>
       </a-row>
     </div>
@@ -41,17 +41,21 @@
               <template #title>
                 <span>{{ item.title }}</span>
                 <div class="extra">
-                  <a-button ghost color="success"> 查阅 </a-button>
+                  <a-button color="success" :disabled="item.percent < 100"> 查阅 </a-button>
                   &nbsp;&nbsp;
                   <a-button
-                    ghost
                     color="warning"
                     v-if="hasPermission([RoleEnum.SUPER, RoleEnum.FILE_MANAGER])"
+                    :disabled="item.percent != 0"
                   >
                     解析
                   </a-button>
                   &nbsp;&nbsp;
-                  <a-button ghost color="error" v-if="hasPermission([RoleEnum.SUPER])">
+                  <a-button
+                    color="error"
+                    v-if="hasPermission([RoleEnum.SUPER])"
+                    :disabled="item.percent > 0 && item.percent < 100"
+                  >
                     删除
                   </a-button>
                 </div>
@@ -61,13 +65,19 @@
                   {{ item.description }}
                 </div>
                 <div class="info">
-                  <div><span>文件大小</span>1MB</div>
+                  <div><span>文件大小</span>{{ item.size }}MB</div>
                   <div><span>上传用户</span>{{ item.author }}</div>
                   <div><span>上传时间</span>{{ item.datetime }}</div>
                 </div>
                 <div class="progress">
                   <div><span>解析进度</span></div>
-                  <Progress :percent="item.percent" status="active" />
+                  <Progress
+                    :percent="item.percent"
+                    :status='((): "normal" | "success" | "active" | "exception" | undefined => { 
+                      if (item.percent < 100) return "active"
+                      return "success"
+                    })()'
+                  />
                 </div>
               </template>
             </a-list-item-meta>
@@ -82,7 +92,7 @@
   import { defineComponent } from 'vue'
   import { Icon } from '/@/components/Icon'
   import { BasicUpload } from '/@/components/Upload'
-  import { cardList } from './data'
+  import { cardList, totalSize, totalQuestions } from './data'
   import { PageWrapper } from '/@/components/Page'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { usePermission } from '/@/hooks/web/usePermission'
@@ -130,6 +140,8 @@
         hasPermission,
         prefixCls: 'list-basic',
         getListOfPage: getListOfPage,
+        totalSize,
+        totalQuestions,
         pagination: {
           current: 1,
           total: cardList.length,

frontend/vben/src/views/page/settings/data.ts

@@ -25,12 +25,6 @@ export const settingList = [
 
 // 基础设置 form
 export const baseSetschemas: FormSchema[] = [
-  {
-    field: 'email',
-    component: 'Input',
-    label: '邮箱',
-    colProps: { span: 18 },
-  },
   {
     field: 'name',
     component: 'Input',
@@ -43,12 +37,6 @@ export const baseSetschemas: FormSchema[] = [
     label: '个人简介',
     colProps: { span: 18 },
   },
-  {
-    field: 'address',
-    component: 'Input',
-    label: '所在地区',
-    colProps: { span: 18 },
-  },
 ]
 
 // 安全设置 list
@@ -56,13 +44,13 @@ export const secureSettingList: ListItem[] = [
   {
     key: '1',
     title: '账户密码',
-    description: '当前密码强度：：强',
+    description: '上次修改密码: 2022年1月1日0时0分0秒',
     extra: '修改',
   },
   {
     key: '2',
     title: '我的手机',
-    description: '已绑定手机：：138****8293',
+    description: '已绑定手机: 138****8293',
     extra: '修改',
   },
 ]