递归处理上传值的转换

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fs-admin",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

src/components/core/form/BasicForm.vue

@@ -10,32 +10,39 @@ interface Props {
 }
 const props = defineProps<Props>()
 
+// 递归将上传的值改成数组
+const uploadValueChange = (formItems: Array<BasicFormItem>) => {
+  formItems.forEach(item => {
+    if (['upload', 'image-upload'].includes(item.type) && !Array.isArray(props.formData[item.name])) {
+      props.formData[item.name] = props.formData[item.name]
+        .split(',')
+        .filter((item: string) => item)
+        .map((item: string) => ({ url: item }))
+    } else if (item.type === 'file-upload' && typeof props.formData[item.name] === 'string') {
+      try {
+        props.formData[item.name] = JSON.parse(props.formData[item.name] || '[]').map((item: any) => ({
+          url: item.url,
+          name: item.name
+        }))
+      } catch (error) {
+        props.formData[item.name] = []
+      }
+    }
+    item.children && uploadValueChange(item.children)
+  })
+}
+
 const formData = computed(() => {
   if (props.formData.id) {
     // 将上传的值改成数组
-    props.formConfig.formItems.forEach(item => {
-      if (['upload', 'image-upload'].includes(item.type) && !Array.isArray(props.formData[item.name])) {
-        props.formData[item.name] = props.formData[item.name]
-          .split(',')
-          .filter((item: string) => item)
-          .map((item: string) => ({ url: item }))
-      } else if (item.type === 'file-upload' && typeof props.formData[item.name] === 'string') {
-        try {
-          props.formData[item.name] = JSON.parse(props.formData[item.name] || '[]').map((item: any) => ({
-            url: item.url,
-            name: item.name
-          }))
-        } catch (error) {
-          props.formData[item.name] = []
-        }
-      }
-    })
+    uploadValueChange(props.formConfig.formItems)
     return props.formData
   } else {
     // 构造表单值
     const res = props.formData
     const buildFormData = (formItems: Array<BasicFormItem>, res: any) => {
       formItems.forEach(item => {
+        console.log(item.type)
         if (!item.notFormItem || !notFormItem.includes(item.type)) {
           // 将上传的值改成数组
           if (['upload', 'image-upload'].includes(item.type) && !Array.isArray(item.value)) {
@@ -45,6 +52,7 @@ const formData = computed(() => {
                 .filter((item: string) => item)
                 .map((item: string) => ({ url: item })) || []
           } else if (item.type === 'file-upload' && typeof item.value === 'string') {
+            console.log('file:', item)
             try {
               item.value = JSON.parse(item.value || '[]').map((item: any) => ({
                 url: item.url,

src/components/core/form/ProForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BasicForm, FormSlot } from '@/types/form'
+import type { BasicForm, BasicFormItem, FormSlot } from '@/types/form'
 import { ElMessage, ElLoading } from 'element-plus'
 import { buildFormSlots } from '@/utils/utils'
 
@@ -31,24 +31,29 @@ if (!props.formSlots) {
   buildFormSlots(props.formConfig.formItems, formSlots.value)
 }
 
+// 递归将上传的值改成逗号隔开的字符串
+const uploadValueChange = (formItems: Array<BasicFormItem>, data: any) => {
+  formItems.forEach(item => {
+    if (item.type === 'upload' || item.type === 'image-upload') {
+      if (item.extra) {
+        data[item.name] = item.extra.join(',')
+      } else {
+        data[item.name] = data[item.name].join(',')
+      }
+    } else if (item.type === 'file-upload') {
+      data[item.name] = JSON.stringify(item.extra)
+    }
+    item.children && uploadValueChange(item.children, data)
+  })
+}
+
 const submit = async () => {
   let message, result
   return formRef.value.validate().then(async () => {
     const loading = ElLoading.service()
     try {
       const data = { ...formInitData.value }
-      // 将上传的值改成逗号隔开的字符串
-      props.formConfig.formItems.forEach(item => {
-        if (item.type === 'upload' || item.type === 'image-upload') {
-          if (item.extra) {
-            data[item.name] = item.extra.join(',')
-          } else {
-            data[item.name] = data[item.name].join(',')
-          }
-        } else if (item.type === 'file-upload') {
-          data[item.name] = JSON.stringify(item.extra)
-        }
-      })
+      uploadValueChange(props.formConfig.formItems, data)
       if (data.id) {
         result = await props.update(data)
         message = '编辑成功'

src/stores/user.ts

@@ -10,7 +10,7 @@ export const useUserStore = defineStore({
     flag: false,
     token:
       localStorage.getItem('token') ||
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiI5MWFjNzViNDRlNjc0Y2E4YWY2OWFmMTQ3OGM5NGRiZSIsImV4cCI6MTcwMTI0ODExMSwiaWF0IjoxNzAxMTYxNzExfQ.zj7-o1bTCs5uieDxFUJdyFBqMdCNdgJ7WpnaZSlIhuw'
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiI1NjQ0MzBmMDNhYWU0NmExODE2YmU1YmI4NDExY2RmNiIsImV4cCI6MTcwMjU0MjY0MywiaWF0IjoxNzAyNDU2MjQzfQ.xgjJxHoW-f3WPEZxKPKtMtFvWZfgLnQK-8MWhh-_3Qg'
   }),
   actions: {
     async getUserInfo() {

src/views/system/User.vue

@@ -20,7 +20,37 @@ const CRUD: ICRUD = {
     return saveUser(data)
   },
   getList(data: any) {
-    return getUserList(data)
+    return Promise.resolve({
+      total: 100,
+      rows: [
+        {
+          id: 1,
+          name: '张三',
+          loginName: 'zhangsan',
+          phone: '13888888888',
+          file: '[]',
+          roleList: [
+            {
+              id: 1,
+              name: '管理员'
+            }
+          ]
+        },
+        {
+          id: 2,
+          name: '李四',
+          loginName: 'lisi',
+          phone: '13888888888',
+          roleList: [
+            {
+              id: 2,
+              name: '普通用户'
+            }
+          ]
+        }
+      ]
+    })
+    // return getUserList(data)
   },
   delete(data: any) {
     return deleteUser({ ids: data.id })
@@ -52,6 +82,12 @@ const formConfig = reactive<BasicForm>({
       rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
       search: true
     },
+    {
+      label: 'dfd',
+      value: '',
+      name: 'file',
+      type: 'file-upload'
+    },
     {
       label: '登录名',
       value: '',