修复选择轮播组时id精度丢失的问题

smsb-plus-ui/src/components/CarouselGroupSelector.vue

@@ -88,23 +88,35 @@ watch(
   (val) => {
     if (val) {
       try {
-        const parsedValue = JSON.parse(val);
+        // 使用 JSON.parse 的 reviver 函数确保大数 ID 保持为字符串
+        const parsedValue = JSON.parse(val, (key, value) => {
+          // 如果键是 id，确保它作为字符串返回
+          if (key === 'id' && value !== null && value !== undefined) {
+            return String(value);
+          }
+          return value;
+        });
+
+        // 确保 id 是字符串
+        const id = parsedValue.id ? String(parsedValue.id) : '';
+
         selectedGroup.value = {
-          id: parsedValue.id,
-          name: parsedValue.name,
-          itemCount: parsedValue.itemCount,
-          duration: parsedValue.duration,
-          createTime: parsedValue.createTime,
-          items: parsedValue.items
+          id: id,
+          name: String(parsedValue.name || ''),
+          itemCount: Number(parsedValue.itemCount) || 0,
+          duration: Number(parsedValue.duration) || 5,
+          createTime: String(parsedValue.createTime || ''),
+          items: Array.isArray(parsedValue.items) ? parsedValue.items : []
         };
-      } catch {
+      } catch (error) {
+        console.error('Error parsing modelValue:', error);
         selectedGroup.value = null;
       }
     } else {
       selectedGroup.value = null;
     }
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 );
 
 // 查询轮播组列表
@@ -121,17 +133,23 @@ const getCarouselList = async () => {
 
     const res = await listItem(query);
 
-    // 转换数据格式，并标记已选中的项
-    carouselList.value = (res.rows || []).map((item: ItemVO) => ({
-      id: item.id,
-      name: item.itemName || '',
-      itemName: item.itemName || '', // 保持与API返回的字段名一致
-      itemCount: item.sourceNum || 0,
-      duration: 5, // 默认5秒，可以根据实际需求调整
-      createTime: item.createTime || '',
-      selected: selectedGroup.value?.id === item.id,
-      items: [] // 不需要在UI中显示，仅用于内部处理
-    }));
+    // 转换数据格式，并标记已选中的项，确保 ID 是字符串
+    carouselList.value = (res.rows || []).map((item: ItemVO) => {
+      // 确保 ID 是字符串，避免大数精度问题
+      const itemId = item.id ? String(item.id) : '';
+      const isSelected = selectedGroup.value?.id === itemId;
+
+      return {
+        id: itemId,
+        name: item.itemName || '',
+        itemName: item.itemName || '', // 保持与API返回的字段名一致
+        itemCount: item.sourceNum || 0,
+        duration: 5, // 默认5秒，可以根据实际需求调整
+        createTime: item.createTime || '',
+        selected: isSelected,
+        items: [] // 不需要在UI中显示，仅用于内部处理
+      };
+    });
 
     // 如果当前有选中的组，确保它在列表中也被选中
     if (selectedGroup.value?.id) {
@@ -182,34 +200,41 @@ const removeGroup = () => {
 
 // 确认选择
 const confirmSelect = () => {
+  console.log('confirmSelect called, currentRow:', currentRow.value);
+
   if (!currentRow.value) {
     // 无选中项，清除选中
+    console.log('No row selected, clearing selection');
     selectedGroup.value = null;
     emit('update:modelValue', '');
     dialogVisible.value = false;
     return;
   }
 
-  // 确保ID是数字类型
-  const id = typeof currentRow.value.id === 'string' ? parseInt(currentRow.value.id, 10) : currentRow.value.id;
+  // 保持ID为字符串，避免精度丢失
+  const id = String(currentRow.value.id);
+  console.log('Selected group ID (as string):', id, 'Type:', typeof id);
 
-  if (isNaN(id)) {
+  if (!id) {
     console.error('Invalid group ID:', currentRow.value.id);
     return;
   }
 
-  // 只存储 id 和 name 字段
-  selectedGroup.value = {
-    id,
-    name: currentRow.value.name
+  // 只存储 id 和 name 字段，确保id是字符串
+  const selectedData = {
+    id: id, // 已经是字符串
+    name: String(currentRow.value.name || '') // 确保name是字符串
   };
 
+  console.log('Emitting selected data:', selectedData);
+  selectedGroup.value = selectedData;
+
   // 更新所有行的选中状态
   carouselList.value.forEach((item) => {
-    item.selected = item.id === currentRow.value.id;
+    item.selected = String(item.id) === id; // 确保比较时类型一致
   });
 
-  emit('update:modelValue', JSON.stringify(selectedGroup.value));
+  emit('update:modelValue', JSON.stringify(selectedData));
   dialogVisible.value = false;
 };
 

smsb-plus-ui/src/views/smsb/itemProgram/component/MediaAssetBoard.vue

@@ -88,6 +88,24 @@ const carouselGroup = computed(() => {
 
 const selected = computed(() => !!props.selected);
 
+// 清理轮播
+const clearSlideShow = () => {
+  if (slideInterval !== null) {
+    clearInterval(slideInterval);
+    slideInterval = null;
+  }
+};
+
+// 开始轮播
+const startSlideShow = () => {
+  clearSlideShow();
+  if (mediaItems.value.length <= 1) return;
+
+  slideInterval = window.setInterval(() => {
+    currentMediaIndex.value = (currentMediaIndex.value + 1) % mediaItems.value.length;
+  }, SLIDE_DURATION);
+};
+
 // 加载轮播组媒体项
 const loadCarouselGroupMedia = async () => {
   try {
@@ -98,7 +116,6 @@ const loadCarouselGroupMedia = async () => {
 
     // 获取轮播组详情
     const res = await getItem(carouselGroup.value.id);
-
     if (res.data && Array.isArray(res.data.fileIdList)) {
       mediaItems.value = res.data.fileIdList.map((fileId: string | number) => ({
         id: fileId,
@@ -132,22 +149,6 @@ watch(
   { immediate: true }
 );
 
-const startSlideShow = () => {
-  clearSlideShow();
-  if (mediaItems.value.length <= 1) return;
-
-  slideInterval = window.setInterval(() => {
-    currentMediaIndex.value = (currentMediaIndex.value + 1) % mediaItems.value.length;
-  }, SLIDE_DURATION);
-};
-
-const clearSlideShow = () => {
-  if (slideInterval !== null) {
-    clearInterval(slideInterval);
-    slideInterval = null;
-  }
-};
-
 const onVideoLoaded = (event: Event) => {
   const video = event.target as HTMLVideoElement;
   video.pause();