fix: mall SeckillConfig

Author: puhui999

src/api/mall/promotion/seckill/seckillConfig.ts

@@ -5,7 +5,7 @@ export interface SeckillConfigVO {
   name: string
   startTime: string
   endTime: string
-  picUrl: string
+  sliderPicUrls: string[]
   status: number
 }
 

src/views/mall/promotion/seckill/config/SeckillConfigForm.vue

@@ -10,6 +10,7 @@
 <script lang="ts" name="SeckillConfigForm" setup>
 import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
 import { allSchemas, rules } from './seckillConfig.data'
+import { cloneDeep } from 'lodash-es'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -30,6 +31,9 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       const data = await SeckillConfigApi.getSeckillConfig(id)
+      data.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
+        url: item
+      }))
       formRef.value.setValues(data)
     } finally {
       formLoading.value = false
@@ -48,12 +52,20 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
+    // 处理轮播图列表
     const data = formRef.value.formModel as SeckillConfigApi.SeckillConfigVO
+    const cloneData = cloneDeep(data)
+    const newSliderPicUrls = []
+    cloneData.sliderPicUrls.forEach((item) => {
+      // 如果是前端选的图
+      typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
+    })
+    cloneData.sliderPicUrls = newSliderPicUrls
     if (formType.value === 'create') {
-      await SeckillConfigApi.createSeckillConfig(data)
+      await SeckillConfigApi.createSeckillConfig(cloneData)
       message.success(t('common.createSuccess'))
     } else {
-      await SeckillConfigApi.updateSeckillConfig(data)
+      await SeckillConfigApi.updateSeckillConfig(cloneData)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false

src/views/mall/promotion/seckill/config/index.vue

@@ -29,8 +29,14 @@
         total: tableObject.total
       }"
     >
-      <template #picUrl="{ row }">
-        <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+      <template #sliderPicUrls="{ row }">
+        <el-image
+          v-for="(item, index) in row.sliderPicUrls"
+          :key="index"
+          :src="item"
+          class="w-60px h-60px mr-10px"
+          @click="imagePreview(row.sliderPicUrls)"
+        />
       </template>
       <template #status="{ row }">
         <el-switch
@@ -70,6 +76,7 @@ import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
 import SeckillConfigForm from './SeckillConfigForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 import { CommonStatusEnum } from '@/utils/constants'
+import { isArray } from '@/utils/is'
 
 const message = useMessage() // 消息弹窗
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
@@ -82,10 +89,18 @@ const { tableObject, tableMethods } = useTable({
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
 
-/** 商品图预览 */
-const imagePreview = (imgUrl: string) => {
+/** 轮播图预览预览 */
+const imagePreview = (args) => {
+  const urlList = []
+  if (isArray(args)) {
+    args.forEach((item) => {
+      urlList.push(item)
+    })
+  } else {
+    urlList.push(args)
+  }
   createImageViewer({
-    urlList: [imgUrl]
+    urlList
   })
 }
 

src/views/mall/promotion/seckill/config/seckillConfig.data.ts

@@ -46,11 +46,14 @@ const crudSchemas = reactive<CrudSchema[]>([
     }
   },
   {
-    label: '秒杀主图',
-    field: 'picUrl',
+    label: '秒杀轮播图',
+    field: 'sliderPicUrls',
     isSearch: false,
     form: {
-      component: 'UploadImg'
+      component: 'UploadImgs'
+    },
+    table: {
+      width: 300
     }
   },
   {