From af6c5cc4468ff3b4c22f8278f5cbb2051fffb2a4 Mon Sep 17 00:00:00 2001 From: xingyuv <xingyu4j@vip.qq.com> Date: Wed, 22 Mar 2023 17:40:56 +0800 Subject: [PATCH] feat: file --- src/api/infra/{fileList => file}/index.ts | 0 src/views/infra/file/file.data.ts | 77 +++++++++++++++++++++++ src/views/infra/file/index.vue | 66 ++++++++++++++++++- 3 files changed, 142 insertions(+), 1 deletion(-) rename src/api/infra/{fileList => file}/index.ts (100%) create mode 100644 src/views/infra/file/file.data.ts diff --git a/src/api/infra/fileList/index.ts b/src/api/infra/file/index.ts similarity index 100% rename from src/api/infra/fileList/index.ts rename to src/api/infra/file/index.ts diff --git a/src/views/infra/file/file.data.ts b/src/views/infra/file/file.data.ts new file mode 100644 index 00000000..f07fed67 --- /dev/null +++ b/src/views/infra/file/file.data.ts @@ -0,0 +1,77 @@ +import { BasicColumn, FormSchema, useRender } from '@/components/Table' + +export const columns: BasicColumn[] = [ + { + title: '日志编号', + dataIndex: 'id', + width: 100 + }, + { + title: '文件名', + dataIndex: 'module', + width: 200 + }, + { + title: '文件路径', + dataIndex: 'path', + width: 250 + }, + { + title: '文件 URL', + dataIndex: 'url', + width: 300 + }, + { + title: '文件路径', + dataIndex: 'path', + width: 180 + }, + { + title: '文件大小', + dataIndex: 'size', + width: 180, + customRender: ({ text }) => { + const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + const srcSize = parseFloat(text) + const index = Math.floor(Math.log(srcSize) / Math.log(1024)) + const size = srcSize / Math.pow(1024, index) + return size.toFixed(2) + ' ' + unitArr[index] + } + }, + { + title: '文件类型', + dataIndex: 'type', + width: 180 + }, + { + title: '文件内容', + dataIndex: 'content', + width: 180, + customRender: ({ text }) => { + return useRender.renderImg(text) + } + }, + { + title: '上传时间', + dataIndex: 'createTime', + width: 180, + customRender: ({ text }) => { + return useRender.renderDate(text) + } + } +] + +export const searchFormSchema: FormSchema[] = [ + { + label: '文件路径', + field: 'path', + component: 'Input', + colProps: { span: 8 } + }, + { + label: '创建时间', + field: 'createTime', + component: 'RangePicker', + colProps: { span: 8 } + } +] diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue index 3b64cfc4..d2a0f7eb 100644 --- a/src/views/infra/file/index.vue +++ b/src/views/infra/file/index.vue @@ -1,3 +1,67 @@ <template> - <div>开发中</div> + <div> + <BasicTable @register="registerTable"> + <template #toolbar> + <a-button type="primary" :preIcon="IconEnum.UPLOAD" @click="handleAdd"> 上传文件 </a-button> + </template> + <template #bodyCell="{ column, record }"> + <template v-if="column.key === 'action'"> + <TableAction + :actions="[ + { + icon: IconEnum.DELETE, + color: 'error', + label: t('action.delete'), + popConfirm: { + title: t('common.delMessage'), + placement: 'left', + confirm: handleDelete.bind(null, record) + } + } + ]" + /> + </template> + </template> + </BasicTable> + </div> </template> +<script lang="ts" setup name="File"> +import { useI18n } from '@/hooks/web/useI18n' +import { useMessage } from '@/hooks/web/useMessage' +import { IconEnum } from '@/enums/appEnum' +import { BasicTable, useTable, TableAction } from '@/components/Table' +import { deleteFileApi, getFilePageApi } from '@/api/infra/file' +import { columns, searchFormSchema } from './file.data' + +const { t } = useI18n() +const { createMessage } = useMessage() + +const [registerTable, { reload }] = useTable({ + title: '文件列表', + api: getFilePageApi, + columns, + formConfig: { + labelWidth: 120, + schemas: searchFormSchema + }, + useSearchForm: true, + showTableSetting: true, + showIndexColumn: false, + actionColumn: { + width: 140, + title: t('common.action'), + dataIndex: 'action', + fixed: 'right' + } +}) + +function handleAdd() { + console.info(1) +} + +async function handleDelete(record: Recordable) { + await deleteFileApi(record.id) + createMessage.success(t('common.delSuccessText')) + reload() +} +</script>