feat:增加 fileConfig 文件配置(全部)、file 文件(部分)

This commit is contained in:
YunaiV
2025-04-07 10:22:27 +08:00
parent 1a3657b2bf
commit b4d1c678fd
19 changed files with 1044 additions and 13 deletions

View File

@@ -0,0 +1,322 @@
import { type VbenFormSchema, z } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraFileConfigApi } from '#/api/infra/file-config';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'name',
label: '配置名',
component: 'Input',
componentProps: {
placeholder: '请输入配置名',
},
rules: 'required',
},
{
fieldName: 'storage',
label: '存储器',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
placeholder: '请选择存储器',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
show: (formValues) => !formValues.id
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
// DB / Local / FTP / SFTP
{
fieldName: 'config.basePath',
label: '基础路径',
component: 'Input',
componentProps: {
placeholder: '请输入基础路径',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage >= 10 && formValues.storage <= 12,
},
},
{
fieldName: 'config.host',
label: '主机地址',
component: 'Input',
componentProps: {
placeholder: '请输入主机地址',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage >= 11 && formValues.storage <= 12,
},
},
{
fieldName: 'config.port',
label: '主机端口',
component: 'InputNumber',
componentProps: {
min: 0,
class: 'w-full',
controlsPosition: 'right',
placeholder: '请输入主机端口',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage >= 11 && formValues.storage <= 12,
},
},
{
fieldName: 'config.username',
label: '用户名',
component: 'Input',
componentProps: {
placeholder: '请输入用户名',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage >= 11 && formValues.storage <= 12,
},
},
{
fieldName: 'config.password',
label: '密码',
component: 'Input',
componentProps: {
placeholder: '请输入密码',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage >= 11 && formValues.storage <= 12,
},
},
{
fieldName: 'config.mode',
label: '连接模式',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '主动模式', value: 'Active' },
{ label: '被动模式', value: 'Passive' },
],
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage === 11,
},
},
// S3
{
fieldName: 'config.endpoint',
label: '节点地址',
component: 'Input',
componentProps: {
placeholder: '请输入节点地址',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage === 20,
},
},
{
fieldName: 'config.bucket',
label: '存储 bucket',
component: 'Input',
componentProps: {
placeholder: '请输入 bucket',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage === 20,
},
},
{
fieldName: 'config.accessKey',
label: 'accessKey',
component: 'Input',
componentProps: {
placeholder: '请输入 accessKey',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage === 20,
},
},
{
fieldName: 'config.accessSecret',
label: 'accessSecret',
component: 'Input',
componentProps: {
placeholder: '请输入 accessSecret',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => formValues.storage === 20,
},
},
// 通用
{
fieldName: 'config.domain',
label: '自定义域名',
component: 'Input',
componentProps: {
placeholder: '请输入自定义域名',
},
rules: 'required',
dependencies: {
triggerFields: ['storage'],
show: (formValues) => !!formValues.storage,
},
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '配置名',
component: 'Input',
componentProps: {
placeholder: '请输入配置名',
clearable: true,
},
},
{
fieldName: 'storage',
label: '存储器',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
placeholder: '请选择存储器',
clearable: true,
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns<T = InfraFileConfigApi.InfraFileConfig>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
width: 100,
},
{
field: 'name',
title: '配置名',
minWidth: 120,
},
{
field: 'storage',
title: '存储器',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
},
},
{
field: 'remark',
title: '备注',
minWidth: 150,
},
{
field: 'master',
title: '主配置',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'createTime',
title: '创建时间',
width: 180,
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
width: 280,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '文件配置',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'edit',
show: hasAccessByCodes(['infra:file-config:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['infra:file-config:delete']),
},
{
code: 'master',
text: '主配置',
disabled: (row: any) => row.master,
show: (_row: any) => hasAccessByCodes(['infra:file-config:update']),
},
{
code: 'test',
text: '测试',
},
],
},
},
];
}

View File

@@ -0,0 +1,165 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraFileConfigApi } from '#/api/infra/file-config';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message, Modal } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getFileConfigPage, deleteFileConfig, updateFileConfigMaster, testFileConfig } from '#/api/infra/file-config';
import { useGridColumns, useGridFormSchema } from './data';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建文件配置 */
function onCreate() {
formModalApi.setData(null).open();
}
/** 编辑文件配置 */
function onEdit(row: InfraFileConfigApi.InfraFileConfig) {
formModalApi.setData(row).open();
}
/** 设为主配置 */
async function onMaster(row: InfraFileConfigApi.InfraFileConfig) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.updating', [row.name]),
duration: 0,
key: 'action_process_msg',
});
try {
await updateFileConfigMaster(row.id as number);
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
hideLoading();
}
}
/** 测试文件配置 */
async function onTest(row: InfraFileConfigApi.InfraFileConfig) {
const hideLoading = message.loading({
content: '测试上传中...',
duration: 0,
key: 'action_process_msg',
});
try {
const response = await testFileConfig(row.id as number);
hideLoading();
// 确认是否访问该文件
Modal.confirm({
title: '测试上传成功',
content: '是否要访问该文件?',
okText: '访问',
cancelText: '取消',
onOk: () => {
window.open(response, '_blank');
},
});
} catch (error) {
hideLoading();
}
}
/** 删除文件配置 */
async function onDelete(row: InfraFileConfigApi.InfraFileConfig) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteFileConfig(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
hideLoading();
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<InfraFileConfigApi.InfraFileConfig>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'master': {
onMaster(row);
break;
}
case 'test': {
onTest(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
},
gridOptions: {
columns: useGridColumns(onActionClick),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getFileConfigPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<InfraFileConfigApi.InfraFileConfig>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<Grid table-title="文件配置列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['infra:file-config:create']">
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['文件配置']) }}
</Button>
</template>
</Grid>
</Page>
</template>

View File

@@ -0,0 +1,75 @@
<script lang="ts" setup>
import type { InfraFileConfigApi } from '#/api/infra/file-config';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createFileConfig, updateFileConfig, getFileConfig } from '#/api/infra/file-config';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<InfraFileConfigApi.InfraFileConfig>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['文件配置'])
: $t('ui.actionTitle.create', ['文件配置']);
});
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as InfraFileConfigApi.InfraFileConfig;
try {
await (formData.value?.id ? updateFileConfig(data) : createFileConfig(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<InfraFileConfigApi.InfraFileConfig>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getFileConfig(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.lock(false);
}
},
});
</script>
<template>
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>