feat：更新字典文件上传

src/api/dict/index.ts

@@ -279,7 +279,7 @@ export function updateDict(params: UpdateDictParams): Promise<null> {
   return http.request({ url: `/admin/dict/updateDict`, data: params, method: 'POST' });
 }
 
-export const uploadPresetImageApi = (file: Blob, bizType: string) => {
+export const uploadDictImage = (file: Blob, bizType: string) => {
   const formData = new FormData();
   formData.append('bizType', bizType);
   formData.append('file', file);

src/views/system/dictionary/components/AddDict.vue

@@ -52,14 +52,14 @@
                 <el-input v-model="item.itemCode" placeholder="请输入" />
               </el-form-item>
               <el-form-item label="图标">
-                <el-upload 
-                  auto-upload="false"
+                <el-upload
+                   v-model:file-list="item.fileList"
+                  :auto-upload="false"
                   :action="actionUrl" 
                   list-type="picture-card" 
                   :limit="1"
                   :on-preview="(file) => handlePictureCardPreview(file, index)" :on-remove="() => handleRemove(index)"
                   :on-change="(file, fileList) => handleChange(file, fileList, index)"
-
                   >
                   <el-icon>
                     <Plus />
@@ -128,7 +128,7 @@ import {
 } from 'element-plus';
 import { Plus, Delete, CirclePlus, Minus, Picture, Top, Bottom } from '@element-plus/icons-vue';
 import { dictionaryTypeOptions, DictionaryStatus, dictionaryStatusOptions } from '../constants';
-import { queryDictTypeDetail, uploadPresetImageApi } from '@/api/dict'
+import { queryDictTypeDetail, uploadDictImage } from '@/api/dict'
 import { getHeaders } from '@/utils/http/axios';
 import { useGlobSetting } from '@/hooks/setting';
 import urlJoin from 'url-join';
@@ -185,7 +185,6 @@ const formData = reactive<FormData>({
       itemCode: '',
       itemValue: '',
       itemSort: 1, // 默认排序值
-      // iconFile: null,
       isDefault: 0,
       status: DictionaryStatus.disabled,
       imageUrl: '',
@@ -193,20 +192,28 @@ const formData = reactive<FormData>({
   ],
   description: '',
   status: DictionaryStatus.disabled,
-  ...props.initialData, // 使用 initialData 初始化表单
 });
 
-watch(() => props.dictCode, (newData) => {
- if (newData) {
-   queryDictTypeDetail(newData).then((res) => {
-    Object.assign(formData, {
-      ...res,
-      // 单独处理字典项数组保持响应式更新
-      sysDictDataList: res.sysDictDataList || []
-    });
-  })
- }
-}, { deep: true, immediate: true })
+watch(() => props.dictCode, async (newCode) => {
+  if (!newCode) return;
+  
+  const res = await queryDictTypeDetail(newCode);
+  
+  // 处理字典项数据转换
+  const processDictItem = (item: any) => ({
+    ...item,
+    fileList: item.imageUrl ? [{
+      name: item.imageUrl.split('/').pop() || '',
+      url: item.imageUrl
+    }] : []
+  });
+
+  Object.assign(formData, {
+    ...res,
+    sysDictDataList: res.sysDictDataList?.map(processDictItem) ?? []
+  });
+ 
+}, { immediate: true });
 
 const formRules = reactive<FormRules<FormData>>({
   dictName: [{ required: true, message: '请选择字典名称', trigger: 'change' }],
@@ -246,7 +253,6 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
 
 const handleRemove = (itemIndex: number) => {
   if (formData.sysDictDataList[itemIndex]) {
-    // formData.sysDictDataList[itemIndex].iconFile = null;
     formData.sysDictDataList[itemIndex].imageUrl = ''; // 如果有单独的 URL 字段
   }
 };
@@ -255,42 +261,23 @@ const handleChange = (uploadFile: UploadUserFile, uploadFiles: UploadUserFile[],
   // Element Plus 的 onChange 会在文件状态改变时触发多次，通常在 ready 状态时文件已可选
   // 这里简单地将文件对象存起来，实际上传应在 handleSubmit 中处理
   if (formData.sysDictDataList[itemIndex]) {
-    // formData.sysDictDataList[itemIndex].iconFile = uploadFile;
-    // console.log('uploadFile:', uploadFile);
-    // uploadPresetImageApi(uploadFile.raw, 'CAMERA_IMAGE').then((res) => {
-    //   // formData.sysDictDataList[itemIndex].imageUrl = res.data;
-    // })
+    if (!uploadFile.raw) return;
+    uploadDictImage(uploadFile.raw, 'DICTIONARY').then((res) => {
+      formData.sysDictDataList[itemIndex].imageUrl = res.url;
+    })
   }
 };
 
-const handleUpload = (res: any) => {
-  console.log('res:', res)
-};
-
 const handleSubmit = async () => {
   if (!formRef.value) return;
 
-  await formRef.value.validate((valid) => {
+  await formRef.value.validate((valid: boolean ) => {
     if (valid) {
-      // 在这里处理实际的文件上传逻辑，例如使用 FormData
-      // const submissionData = new FormData();
-      // Object.keys(formData).forEach(key => {
-      //   if (key === 'sysDictDataList') {
-      //     formData.sysDictDataList.forEach((item, index) => {
-      //       submissionData.append(`sysDictDataList[${index}][value]`, item.value);
-      //       submissionData.append(`sysDictDataList[${index}][code]`, item.code);
-      //       submissionData.append(`sysDictDataList[${index}][sortOrder]`, String(item.sortOrder));
-      //       if (item.iconFile && item.iconFile.raw) {
-      //         submissionData.append(`sysDictDataList[${index}][icon]`, item.iconFile.raw);
-      //       }
-      //     });
-      //   } else {
-      //     submissionData.append(key, formData[key as keyof Omit<FormData, 'sysDictDataList'>]);
-      //   }
-      // });
-      // emit('submit', submissionData);
       formData.sysDictDataList.forEach(item => {
         item.dictCode = formData.dictCode;
+        if(item.fileList && item.fileList.length > 0) {
+          delete item.fileList;
+        }
       });
       
       emit('submit', JSON.parse(JSON.stringify(formData))); // 暂时发送原始数据，上传需单独处理