feat: 实现Tracking批量下载页左侧选择file后右侧同步更新功能

src/views/Tracking/src/components/DownloadAttachment/src/DownloadAttachment.vue

@@ -9,20 +9,20 @@ const attachmentData = ref([
         label: 'Customs Documents',
         number: 2,
         attachmentList: [
-          { name: 'Commercial Invoice.pdf', isSelect: false },
-          { name: 'Packing List.pdf', isSelect: false },
-          { name: 'Certificate of Origin.pdf', isSelect: false }
+          { name: 'Commercial Invoice1.pdf', isSelect: false },
+          { name: 'Packing List1.pdf', isSelect: false },
+          { name: 'Certificate of Origin1.pdf', isSelect: false }
         ]
       },
       {
         label: 'House Bill of Lading',
         number: 1,
-        attachmentList: [{ name: 'Commercial Invoice.pdf', isSelect: false }]
+        attachmentList: [{ name: 'Commercial Invoice1.pdf', isSelect: false }]
       },
       {
         label: 'Master Bill of Lading',
         number: 1,
-        attachmentList: [{ name: 'Commercial Invoice.pdf', isSelect: false }]
+        attachmentList: [{ name: 'Commercial Invoice1.pdf', isSelect: false }]
       }
     ]
   },
@@ -67,9 +67,9 @@ const attachmentData = ref([
         label: 'Customs Documents',
         number: 2,
         attachmentList: [
-          { name: 'Commercial Invoice.pdf', isSelect: false },
-          { name: 'Packing List.pdf', isSelect: false },
-          { name: 'Certificate of Origin.pdf', isSelect: false }
+          { name: 'Commercial Invoice2.pdf', isSelect: false },
+          { name: 'Packing List2.pdf', isSelect: false },
+          { name: 'Certificate of Origin2.pdf', isSelect: false }
         ]
       }
     ]
@@ -101,6 +101,7 @@ const isAllSelected = computed({
   }
 })
 
+// 父级变化时，更新子级状态
 const handleParentToggle = (ship) => {
   const newVal = ship.isSelect
   ship.typeList.forEach((type) => {
@@ -146,7 +147,7 @@ const initShipments = () => {
 }
 
 initShipments()
-const summaryList = [
+const summaryList = ref([
   {
     label: 'Customs Documents',
     number: 8,
@@ -172,10 +173,56 @@ const summaryList = [
     number: 4,
     attachmentList: [{ name: 'Commercial Invoice.pdf' }]
   }
-]
-// const summaryList = []
+])
+const allChooseFiles = computed(() => {
+  return summaryList.value.reduce((acc, curr) => {
+    acc += curr.attachmentList.length
+    return acc
+  }, 0)
+})
+
+const generateSummary = () => {
+  const map = new Map() // 用 label 作为 key
+
+  attachmentData.value.forEach((item) => {
+    item?.typeList?.forEach((type) => {
+      // 遍历该类型下的所有附件
+      type?.attachmentList?.forEach((attach) => {
+        if (attach.isSelect) {
+          const label = type.label
+          if (!map.has(label)) {
+            map.set(label, {
+              label,
+              number: 0,
+              attachmentList: []
+            })
+          }
+          const group = map.get(label)
+          group.number += 1 // 每选中一个就 +1
+
+          group.attachmentList.push({ name: attach.name })
+        }
+      })
+    })
+  })
+
+  // 转为数组
+  summaryList.value = Array.from(map.values())
+}
 
-const activeNames = ref(['1'])
+// 👇 监听 attachmentData 中所有 isSelect 的变化
+watch(
+  () => {
+    // 创建一个扁平化的路径数组，用于监听所有 isSelect
+    return attachmentData.value.map((item) =>
+      item.typeList?.map((type) => type.attachmentList?.map((att) => att.isSelect))
+    )
+  },
+  () => {
+    generateSummary()
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -228,7 +275,8 @@ const activeNames = ref(['1'])
           class="el-button--main el-button--pain-theme"
           style="width: 100%; margin-bottom: 8px"
         >
-          <span class="font_family icon-icon_download_b"></span> <span>Download Selected (12)</span>
+          <span class="font_family icon-icon_download_b"></span>
+          <span>Download Selected ({{ allChooseFiles }})</span>
         </el-button>
         <el-collapse
           style="margin: 8px 0"