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

src/views/system/file/index.vue

@@ -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="[
+                :options="getSelectOptions('sys_file_service')"
-                  { label: 'LOCAL', value: 'LOCAL' },
-                  { label: 'OSS', value: 'OSS' },
-                  { label: 'MINIO', value: 'MINIO' },
-                ]"
               />
             </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,
+    width: 140,
-    render: (row) => {
+    render: row => h(DictTag, { dictType: 'sys_file_service', value: row.fileService }),
-      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 })
-    },
   },
   {
     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) {

src/views/system/picture/index.vue

@@ -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="[
+                :options="getSelectOptions('sys_file_service')"
-                  { label: 'LOCAL', value: 'LOCAL' },
-                  { label: 'OSS', value: 'OSS' },
-                  { label: 'MINIO', value: 'MINIO' },
-                ]"
               />
             </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) => {
+    render: row => h(DictTag, { dictType: 'sys_file_service', value: mapStorageTypeToValue(row.pictureService) }),
-      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 })
-    },
   },
   {
     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) {