feat:广告上传

src/api/product/device/index.ts

@@ -45,4 +45,4 @@ export const DeviceApi = {
   exportDevice: async (params) => {
     return await request.download({ url: `/product/device/export-excel`, params })
   },
-}
+}

src/views/infra/file/index.vue

@@ -126,6 +126,7 @@ import { fileSizeFormatter } from '@/utils'
 import { dateFormatter } from '@/utils/formatTime'
 import * as FileApi from '@/api/infra/file'
 import FileForm from './FileForm.vue'
+import { ElMessage } from 'element-plus'
 
 defineOptions({ name: 'InfraFile' })
 

src/views/mall/product/device/DeviceForm.vue

@@ -96,24 +96,50 @@ const open = async (type: string, id?: number) => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits<{
+  success: [eventData: { type: string; data: DeviceVO }]
+}>()
+/** 提交表单 */
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as DeviceVO
+    const data = { ...formData.value } as unknown as DeviceVO
+
+    // 根据广告图类型设置 fileUrl
+    if (data.adType === 'upload' && data.adImage) {
+      data.fileUrl = data.adImage
+    } else if (data.adType === 'link' && data.adUrl) {
+      data.fileUrl = data.adUrl
+    }
+    // 如果没有设置广告，清空 fileUrl
+    else {
+      data.fileUrl = ''
+    }
+
+    let result
     if (formType.value === 'create') {
-      await DeviceApi.createDevice(data)
+      result = await DeviceApi.createDevice(data)
       message.success(t('common.createSuccess'))
     } else {
-      await DeviceApi.updateDevice(data)
+      result = await DeviceApi.updateDevice(data)
       message.success(t('common.updateSuccess'))
     }
+
     dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
+    // 发送操作成功的事件，传递处理后的数据
+    emit('success', {
+  type: formType.value,
+  data: {
+    ...data,
+    id: formType.value === 'create' ? result?.id || Date.now() : data.id,
+    createTime: formType.value === 'create'
+      ? new Date().toISOString()
+      : new Date().toISOString(),
+  } as DeviceVO,
+})
   } finally {
     formLoading.value = false
   }

src/views/mall/product/device/index.vue

@@ -86,7 +86,8 @@ type="success" plain @click="handleExport" :loading="exportLoading"
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <DeviceForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：添加/修改 -->
+  <DeviceForm ref="formRef" @success="handleFormSuccess" />
 </template>
 
 <script setup lang="ts">
@@ -124,6 +125,7 @@ const getList = async () => {
     const data = await DeviceApi.getDevicePage(queryParams)
     list.value = data.list
     total.value = data.total
+    console.log("getList:", data);
   } finally {
     loading.value = false
   }
@@ -205,4 +207,20 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
+
+/** 处理表单操作成功 */
+const handleFormSuccess = (eventData: { type: string; data: DeviceVO }) => {
+  if (eventData.type === 'create') {
+    // 新增成功，直接将新数据添加到列表顶部
+    list.value.unshift(eventData.data)
+    total.value += 1
+  } else {
+    // 更新成功，找到对应项并替换整个对象（包括广告）
+    const index = list.value.findIndex(item => item.id === eventData.data.id)
+    if (index !== -1) {
+      // 使用 Vue 的响应式替换，确保广告图片能立即更新
+      list.value.splice(index, 1, eventData.data)
+    }
+  }
+}
 </script>