finish filelist progress

2026-06-08 17:40:23 +08:00 · 2023-03-15 17:28:11 +08:00
parent 513680bdb1
commit 6e49173b12
7 changed files with 122 additions and 98 deletions
--- a/frontend/vben/mock/page/filelist.ts
+++ b/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 [
-    {
-      title: '数据库2020B卷',
-      color: '',
-      desc: '不要等待机会，而要创造机会。',
-      group: '数据库与软件工程',
-      date: '2020-04-01',
-    },
-    {
-      title: '数据库2020A卷',
-      color: '#3fb27f',
-      desc: '现在的你决定将来的你。',
-      group: '数据库与软件工程',
-      date: '2020-04-01',
-    },
-    {
-      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',
-    },
-  ]
+  const lst: any[] = []
+  for (let i = 100; i > 0; i--) {
+    lst.push({
+      id: i,
+      title: '接入网2020B卷',
+      description: '电子科技大学接入网2020B卷',
+      size: i,
+      questions: 10,
+      author: '课程组长',
+      datetime: '2020-11-26 17:39',
+      percent: i - 1,
+    })
+  }
+  return lst
 }

 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[]
--- a/frontend/vben/src/api/page/index.ts
+++ b/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 } })
+}
--- a/frontend/vben/src/api/page/model/fileListModel.ts
+++ b/frontend/vben/src/api/page/model/fileListModel.ts
@@ -1,13 +1,19 @@
 export interface FileListGroupItem {
+  id: number
  title: string
-  icon: string
-  color: string
-  desc: string
-  date: string
-  group: string
+  description: string
+  size: number
+  questions: number
+  author: string
+  datetime: string
+  percent: number
 }

 /**
 * @description: Get filelist return value
 */
 export type getFileListModel = FileListGroupItem[]
+
+export interface FilePercent {
+  percent: number
+}
--- a/frontend/vben/src/api/page/page.ts
+++ b/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 } })
-}
--- a/frontend/vben/src/views/page/filelist/data.tsx
+++ b/frontend/vben/src/views/page/filelist/data.tsx
@@ -1,16 +1,43 @@
-export const cardList = (() => {
-  const result: any[] = []
+import { getFileList, getFilePercent } from '/@/api/page'
+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({
-      id: i,
-      title: 'Vben Admin',
-      description: '基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统',
-      datetime: '2020-11-26 17:39',
+    cardList.push({
+      id: lst[i].id,
+      title: lst[i].title,
+      description: lst[i].description,
+      size: lst[i].size,
+      questions: lst[i].questions,
+      datetime: lst[i].datetime,
      icon: 'bi:filetype-docx',
      color: '#1890ff',
-      author: 'Vben',
-      percent: i,
+      author: lst[i].author,
+      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
 })()
--- a/frontend/vben/src/views/page/filelist/index.vue
+++ b/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,
--- a/frontend/vben/src/views/page/settings/data.ts
+++ b/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: '修改',
  },
 ]