From 6e49173b12d0c63392afa7964ec682cbda84d23f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BA=90=E6=96=87=E9=9B=A8?= <41315874+fumiama@users.noreply.github.com> Date: Wed, 15 Mar 2023 17:28:11 +0800 Subject: [PATCH] finish filelist progress --- frontend/vben/mock/page/filelist.ts | 76 ++++++++----------- frontend/vben/src/api/page/index.ts | 21 +++++ .../vben/src/api/page/model/fileListModel.ts | 16 ++-- frontend/vben/src/api/page/page.ts | 14 ---- .../vben/src/views/page/filelist/data.tsx | 47 +++++++++--- .../vben/src/views/page/filelist/index.vue | 30 +++++--- frontend/vben/src/views/page/settings/data.ts | 16 +--- 7 files changed, 122 insertions(+), 98 deletions(-) create mode 100644 frontend/vben/src/api/page/index.ts delete mode 100644 frontend/vben/src/api/page/page.ts diff --git a/frontend/vben/mock/page/filelist.ts b/frontend/vben/mock/page/filelist.ts index 0943784..bbaf4ff 100644 --- 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[] diff --git a/frontend/vben/src/api/page/index.ts b/frontend/vben/src/api/page/index.ts new file mode 100644 index 0000000..90d0ba1 --- /dev/null +++ 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({ url: Api.GetFileList, params: { count: count } }) +} + +/** + * @description: Get file percant + */ +export const getFilePercent = (id: number) => { + return defHttp.get({ url: Api.GetFilePercent, params: { id: id } }) +} diff --git a/frontend/vben/src/api/page/model/fileListModel.ts b/frontend/vben/src/api/page/model/fileListModel.ts index d321b83..c63bc37 100644 --- 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 +} diff --git a/frontend/vben/src/api/page/page.ts b/frontend/vben/src/api/page/page.ts deleted file mode 100644 index b29bf02..0000000 --- a/frontend/vben/src/api/page/page.ts +++ /dev/null @@ -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({ url: Api.GetFileList, params: { count: count } }) -} diff --git a/frontend/vben/src/views/page/filelist/data.tsx b/frontend/vben/src/views/page/filelist/data.tsx index b948b89..23f8933 100644 --- 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 })() diff --git a/frontend/vben/src/views/page/filelist/index.vue b/frontend/vben/src/views/page/filelist/index.vue index 48458af..8ad9270 100644 --- a/frontend/vben/src/views/page/filelist/index.vue +++ b/frontend/vben/src/views/page/filelist/index.vue @@ -14,15 +14,15 @@
总文件数
-

8

+

{{ pagination.total }}
占用空间
-

32MB

+

{{ totalSize }}MB

总题目数
-

24

+

{{ totalQuestions }}

@@ -41,17 +41,21 @@ @@ -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, diff --git a/frontend/vben/src/views/page/settings/data.ts b/frontend/vben/src/views/page/settings/data.ts index 45d8902..d15690b 100644 --- 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: '修改', }, ]