dev-templates/coder-common-thin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dict): align file and picture modules with dictionary services

Browse Source
This commit is contained in:
Leo 2025-09-27 00:59:44 +08:00
parent 7c1bf63133
commit 05b0bc1376
2 changed files with 72 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/system/file/index.vue
View File

@ -72,7 +72,7 @@
v-model:value="searchForm.fileService"
placeholder="请选择存储类型"
clearable
:options="FILE_SERVICE_DB_OPTIONS"
:options="getSelectOptions('sys_file_service')"
/>
</n-form-item>
</n-grid-item>
@ -215,11 +215,7 @@
<n-select
v-model:value="uploadForm.fileService"
placeholder="请选择文件服务"
:options="[
{ label: 'LOCAL', value: 'LOCAL' },
{ label: 'OSS', value: 'OSS' },
{ label: 'MINIO', value: 'MINIO' },
]"
:options="getSelectOptions('sys_file_service')"
/>
</n-form-item>
@ -284,7 +280,8 @@ import CoiEmpty from '@/components/common/CoiEmpty.vue'
import CoiPagination from '@/components/common/CoiPagination.vue'
import CoiImageViewer from '@/components/common/CoiImageViewer.vue'
import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
import { usePermission } from '@/hooks/usePermission'
import DictTag from '@/components/common/DictTag.vue'
import { useDict, usePermission } from '@/hooks'
import { PERMISSIONS } from '@/constants/permissions'
import {
batchDeleteSysFiles,
@ -295,7 +292,6 @@ import {
import type { SysFileQueryBo, SysFileSearchForm, SysFileVo } from '@/service/api/system/file'
import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
import IconParkOutlineDownload from '~icons/icon-park-outline/download'
import { FILE_SERVICE_DB_OPTIONS } from '@/service/api/system/file/types'
// 文件分类图标组件
const StarIcon = () => h('span', { class: 'text-yellow-500' }, '✨')
@ -321,6 +317,27 @@ const fileCategories = [
// 权限验证
const { hasPermission } = usePermission()
const { getSelectOptions } = useDict(['sys_file_service'])
const storageValueToType: Record<string, string> = {
1: 'LOCAL',
2: 'MINIO',
3: 'OSS',
}
const storageTypeToValue: Record<string, string> = {
LOCAL: '1',
MINIO: '2',
OSS: '3',
}
function mapServiceValueToType(value: string | null | undefined) {
const str = value != null ? String(value) : '1'
if (storageValueToType[str])
return storageValueToType[str]
const upper = str.toUpperCase()
return storageValueToType[storageTypeToValue[upper] ?? '1'] ?? 'LOCAL'
}
// 响应式数据
const searchFormRef = ref<FormInst>()
@ -376,7 +393,7 @@ const isConfirmDisabled = computed(() => {
// 上传表单数据
const uploadForm = ref({
fileService: 'LOCAL',
fileService: '1',
filePath: '',
})
@ -481,19 +498,8 @@ const columns: DataTableColumns<SysFileVo> = [
title: '文件服务类型',
key: 'fileService',
align: 'center',
width: 120,
render: (row) => {
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
1: { type: 'success', text: '本地存储' },
2: { type: 'info', text: 'MinIO存储' },
3: { type: 'warning', text: '阿里云OSS' },
}
const config = serviceMap[row.fileService] || { type: 'info', text: '未知' }
return h(NTag, {
type: config.type,
size: 'small',
}, { default: () => config.text })
},
width: 140,
render: row => h(DictTag, { dictType: 'sys_file_service', value: row.fileService }),
},
{
title: '创建时间',
@ -781,7 +787,8 @@ async function customUpload({ file, onProgress, onFinish, onError }: any) {
onProgress({ percent: 10 })
// 调用上传API，传递选择的存储类型
const result = await uploadFile(fileObj, folderName, 2, '-1', uploadForm.value.fileService)
const storageType = mapServiceValueToType(uploadForm.value.fileService)
const result = await uploadFile(fileObj, folderName, 2, '-1', storageType)
// 检查业务逻辑是否成功
if (result.isSuccess === false) {

76
src/views/system/picture/index.vue
View File

@ -72,7 +72,7 @@
v-model:value="searchForm.pictureService"
placeholder="请选择存储类型"
clearable
:options="PICTURE_SERVICE_OPTIONS"
:options="getSelectOptions('sys_file_service')"
/>
</n-form-item>
</n-grid-item>
@ -258,7 +258,9 @@
<div><span class="text-gray-400">新名称:</span> {{ picture.newName }}</div>
<div><span class="text-gray-400">文件大小:</span> {{ picture.pictureSize }}</div>
<div><span class="text-gray-400">文件后缀:</span> {{ picture.pictureSuffix?.toUpperCase() }}</div>
<div><span class="text-gray-400">服务类型:</span> {{ getPictureServiceText(picture.pictureService) }}</div>
<div class="flex items-center gap-1">
<span class="text-gray-400">服务类型:</span> <DictTag dict-type="sys_file_service" :value="mapStorageTypeToValue(picture.pictureService)" />
</div>
<div><span class="text-gray-400">创建时间:</span> {{ picture.createTime ? new Date(picture.createTime).toLocaleString() : '--' }}</div>
<div><span class="text-gray-400">创建者:</span> {{ picture.createBy || '--' }}</div>
</div>
@ -348,11 +350,7 @@
<n-select
v-model:value="uploadForm.pictureService"
placeholder="请选择服务类型"
:options="[
{ label: 'LOCAL', value: 'LOCAL' },
{ label: 'OSS', value: 'OSS' },
{ label: 'MINIO', value: 'MINIO' },
]"
:options="getSelectOptions('sys_file_service')"
/>
</n-form-item>
@ -417,13 +415,13 @@ import CoiDialog from '@/components/common/CoiDialog.vue'
import CoiPagination from '@/components/common/CoiPagination.vue'
import CoiImageViewer from '@/components/common/CoiImageViewer.vue'
import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
import { usePermission } from '@/hooks/usePermission'
import DictTag from '@/components/common/DictTag.vue'
import { useDict, usePermission } from '@/hooks'
import { PERMISSIONS } from '@/constants/permissions'
import {
batchDeleteSysPictures,
deleteSysPicture,
getSysPictureList,
PICTURE_SERVICE_OPTIONS,
PICTURE_TYPE_OPTIONS,
uploadPicture,
} from '@/service/api/system/picture'
@ -458,6 +456,35 @@ const uploadPictureTypeOptions = PICTURE_TYPE_OPTIONS.filter(option => option.va
// 权限验证
const { hasPermission } = usePermission()
const { getSelectOptions } = useDict(['sys_file_service'])
const storageValueToType: Record<string, string> = {
1: 'LOCAL',
2: 'MINIO',
3: 'OSS',
}
const storageTypeToValue: Record<string, string> = {
LOCAL: '1',
MINIO: '2',
OSS: '3',
}
function mapServiceValueToType(value: string | null | undefined) {
const str = value != null ? String(value) : '1'
if (storageValueToType[str])
return storageValueToType[str]
const upper = str.toUpperCase()
return storageValueToType[storageTypeToValue[upper] ?? '1'] ?? 'LOCAL'
}
function mapStorageTypeToValue(type: string | null | undefined) {
const str = type != null ? String(type) : '1'
if (storageValueToType[str])
return str
const upper = str.toUpperCase()
return storageTypeToValue[upper] ?? '1'
}
// 响应式数据
const searchFormRef = ref<FormInst>()
@ -514,7 +541,7 @@ const isConfirmDisabled = computed(() => {
// 上传表单数据
const uploadForm = ref({
pictureService: 'LOCAL',
pictureService: '1',
pictureType: '9', // 默认其他分类
picturePath: '',
})
@ -622,20 +649,9 @@ const columns: DataTableColumns<SysPictureVo> = [
{
title: '服务类型',
key: 'pictureService',
width: 120,
width: 130,
align: 'center',
render: (row) => {
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
1: { type: 'success', text: '本地存储' },
2: { type: 'info', text: 'MinIO存储' },
3: { type: 'warning', text: '阿里云OSS' },
}
const config = serviceMap[row.pictureService] || { type: 'info', text: '未知' }
return h(NTag, {
type: config.type,
size: 'small',
}, { default: () => config.text })
},
render: row => h(DictTag, { dictType: 'sys_file_service', value: mapStorageTypeToValue(row.pictureService) }),
},
{
title: '创建时间',
@ -837,21 +853,12 @@ function handleDownload(row: SysPictureVo) {
}
// 获取图片服务类型文本
function getPictureServiceText(serviceType: string): string {
const serviceMap: Record<string, string> = {
1: '本地存储',
2: 'MinIO存储',
3: '阿里云OSS',
}
return serviceMap[serviceType] || '未知'
}
// 图片上传相关函数
// 打开上传弹框
function handleUpload() {
uploadForm.value = {
pictureService: 'LOCAL',
pictureService: '1',
pictureType: selectedCategory.value === '0' ? '9' : selectedCategory.value, // 根据当前分类设置默认值
picturePath: '',
}
@ -922,7 +929,8 @@ async function customUpload({ file, onProgress, onFinish, onError }: any) {
onProgress({ percent: 10 })
// 调用上传API - 使用选择的分类和存储类型
const result = await uploadPicture(fileObj, uploadForm.value.pictureType, 2, uploadForm.value.pictureService)
const storageType = mapServiceValueToType(uploadForm.value.pictureService)
const result = await uploadPicture(fileObj, uploadForm.value.pictureType, 2, storageType)
// 检查业务逻辑是否成功
if (result.isSuccess === false) {