yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reactor：【infra 基础设施】file 进一步统一代码风格

pull/210/head
YunaiV 2025-09-09 09:56:09 +08:00
parent cdc350cef9
commit 8d10030185
6 changed files with 100 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web-antd/src/views/infra/file/data.ts
View File

@ -27,7 +27,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入文件路径',
allowClear: true,
clearable: true,
},
},
{
@ -36,7 +36,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入文件类型',
allowClear: true,
clearable: true,
},
},
{
@ -45,7 +45,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
clearable: true,
},
},
];
@ -58,22 +58,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'name',
title: '文件名',
minWidth: 150,
},
{
field: 'path',
title: '文件路径',
minWidth: 200,
showOverflow: true,
},
{
field: 'url',
title: 'URL',
minWidth: 200,
showOverflow: true,
},
{
field: 'size',
title: '文件大小',
minWidth: 80,
formatter: ({ cellValue }) => {
// TODO @芋艿：后续优化下
// TODO @xingyu：【优先级：中】要不要搞到一个方法里？
if (!cellValue) return '0 B';
const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const index = Math.floor(Math.log(cellValue) / Math.log(1024));
@ -85,15 +89,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'type',
title: '文件类型',
minWidth: 120,
},
{
field: 'file-content',
title: '文件内容',
slots: { default: 'file-content' },
minWidth: 120,
slots: {
default: 'file-content',
},
},
{
field: 'createTime',
title: '上传时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{

52
apps/web-antd/src/views/infra/file/index.vue
View File

@ -4,7 +4,7 @@ import type { InfraFileApi } from '#/api/infra/file';
import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty, openWindow } from '@vben/utils';
import { useClipboard } from '@vueuse/core';
@ -23,7 +23,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -53,14 +53,30 @@ async function handleDelete(row: InfraFileApi.File) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name || row.path]),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteFile(row.id as number);
message.success(
$t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
);
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
}
/** 批量删除文件 */
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const hideLoading = message.loading({
content: $t('ui.actionMessage.deletingBatch'),
duration: 0,
});
try {
await deleteFileList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
hideLoading();
}
@ -75,23 +91,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!);
}
/** 批量删除文件 */
async function handleDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteFileList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@ -129,24 +128,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="文件列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: '上传图片',
label: '上传文件',
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['infra:file:create'],
onClick: handleUpload,
},
{
label: '批量删除',
label: $t('ui.actionTitle.deleteBatch'),
type: 'primary',
danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
auth: ['infra:file:delete'],
onClick: handleDeleteBatch,
},
@ -172,8 +170,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: $t('common.delete'),
type: 'link',
danger: true,
auth: ['infra:file:delete'],
icon: ACTION_ICON.DELETE,
auth: ['infra:file:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),

2
apps/web-antd/src/views/infra/file/modules/form.vue
View File

@ -50,7 +50,6 @@ const [Modal, modalApi] = useVbenModal({
/** 上传前 */
function beforeUpload(file: FileType) {
// TODO @puhui999：研究下，看看怎么类似 antd 可以前端直传哈；通过配置切换；
formApi.setFieldValue('file', file);
return false;
}
@ -62,7 +61,6 @@ function beforeUpload(file: FileType) {
<template #file>
<div class="w-full">
<!-- 上传区域 -->
<!-- TODO @puhui999：1）上传图片，用不了；2）底部有点遮挡 -->
<Upload.Dragger
name="file"
:max-count="1"

34
apps/web-ele/src/views/infra/file/data.ts
View File

@ -1,13 +1,8 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraFileApi } from '#/api/infra/file';
import { useAccess } from '@vben/access';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 表单的字段 */
export function useFormSchema(): VbenFormSchema[] {
return [
@ -57,9 +52,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = InfraFileApi.File>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
@ -84,7 +77,7 @@ export function useGridColumns<T = InfraFileApi.File>(
title: '文件大小',
minWidth: 80,
formatter: ({ cellValue }) => {
// TODO @芋艿：后续优化下
// TODO @xingyu：【优先级：中】要不要搞到一个方法里？
if (!cellValue) return '0 B';
const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const index = Math.floor(Math.log(cellValue) / Math.log(1024));
@ -113,29 +106,10 @@ export function useGridColumns<T = InfraFileApi.File>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
width: 160,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '文件',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'copyUrl',
text: '复制链接',
},
{
code: 'delete',
show: hasAccessByCodes(['infra:file:delete']),
},
],
},
slots: { default: 'actions' },
},
];
}

99
apps/web-ele/src/views/infra/file/index.vue
View File

@ -1,8 +1,5 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraFileApi } from '#/api/infra/file';
import { ref } from 'vue';
@ -26,18 +23,18 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 上传文件 */
function onUpload() {
function handleUpload() {
formModalApi.setData(null).open();
}
/** 复制链接到剪贴板 */
const { copy } = useClipboard({ legacy: true });
async function onCopyUrl(row: InfraFileApi.File) {
async function handleCopyUrl(row: InfraFileApi.File) {
if (!row.url) {
ElMessage.error('文件 URL 为空');
return;
@ -51,15 +48,8 @@ async function onCopyUrl(row: InfraFileApi.File) {
}
}
/** 打开 URL */
function openUrl(url?: string) {
if (url) {
openWindow(url);
}
}
/** 删除文件 */
async function onDelete(row: InfraFileApi.File) {
async function handleDelete(row: InfraFileApi.File) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name || row.path]),
});
@ -68,19 +58,26 @@ async function onDelete(row: InfraFileApi.File) {
ElMessage.success(
$t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
);
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
}
/** 批量删除文件 */
async function onDeleteBatch() {
await confirm('确定要批量删除该文件吗？');
await deleteFileList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deletingBatch'),
});
try {
await deleteFileList(checkedIds.value);
checkedIds.value = [];
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
handleRefresh();
} finally {
loadingInstance.close();
}
}
const checkedIds = ref<number[]>([]);
@ -92,26 +89,12 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!);
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<InfraFileApi.File>) {
switch (code) {
case 'copyUrl': {
onCopyUrl(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -127,6 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -142,16 +126,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="文件列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: '上传图片',
label: '上传文件',
type: 'primary',
icon: ACTION_ICON.UPLOAD,
onClick: onUpload,
onClick: handleUpload,
},
{
label: $t('ui.actionTitle.deleteBatch'),
@ -159,7 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
auth: ['infra:file:delete'],
onClick: onDeleteBatch,
onClick: handleDeleteBatch,
},
]"
/>
@ -170,14 +154,43 @@ const [Grid, gridApi] = useVbenVxeGrid({
v-else-if="row.type && row.type.includes('pdf')"
type="primary"
link
@click="() => openUrl(row.url)"
@click="() => openWindow(row.url!)"
>
预览
</ElButton>
<ElButton v-else type="primary" link @click="() => openUrl(row.url)">
<ElButton
v-else
type="primary"
link
@click="() => openWindow(row.url!)"
>
下载
</ElButton>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '复制链接',
type: 'primary',
link: true,
icon: ACTION_ICON.COPY,
onClick: handleCopyUrl.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['infra:file:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

1
apps/web-ele/src/views/infra/file/modules/form.vue
View File

@ -50,6 +50,7 @@ const [Modal, modalApi] = useVbenModal({
/** 上传前 */
function beforeUpload(file: UploadRawFile) {
// TODO @puhui999：【bug】这个上传功能，有点问题。报文件不存在
formApi.setFieldValue('file', file);
return false;
}