feat: 加上空数据展示

src/components/VEllipsisTooltip/src/VEllipsisTooltip.vue

@@ -193,6 +193,7 @@ watch(
 
 .ellipsis-container.is-clamp-multi .ellipsis-text {
   display: -webkit-box;
+  line-clamp: v-bind('lineClamp');
   -webkit-box-orient: vertical;
   -webkit-line-clamp: v-bind('lineClamp');
   white-space: normal;

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

@@ -51,29 +51,58 @@ const attachmentData = [
         attachmentList: [{ name: 'Commercial Invoice.pdf' }]
       }
     ]
-  }
-]
-
-const summaryList = [
+  },
   {
-    label: 'Customs Documents',
-    number: 8,
-    attachmentList: [
-      {
-        name: 'Commercial InvoiceCommercial InvoiceCommercial InvoiceCommercial Invoice.pdf'
-      },
-      {
-        name: 'Packing List.pdf'
-      },
+    id: 3,
+    no: 'Shipment No. S0000002841',
+    typeList: []
+  },
+  {
+    id: 2,
+    no: 'Shipment No. S0000002841',
+    typeList: [
       {
-        name: 'Certificate of Origin.pdf'
+        label: 'Customs Documents',
+        number: 2,
+        attachmentList: [
+          { name: 'Commercial Invoice.pdf' },
+          { name: 'Packing List.pdf' },
+          { name: 'Certificate of Origin.pdf' }
+        ]
       }
     ]
-  },
-  { label: 'House Bill of Lading', number: 4 },
-  { label: 'Master Bill of Lading', number: 4 }
+  }
 ]
 
+// const summaryList = [
+//   {
+//     label: 'Customs Documents',
+//     number: 8,
+//     attachmentList: [
+//       {
+//         name: 'Commercial InvoiceCommercial InvoiceCommercial InvoiceCommercial Invoice.pdf'
+//       },
+//       {
+//         name: 'Packing List.pdf'
+//       },
+//       {
+//         name: 'Certificate of Origin.pdf'
+//       }
+//     ]
+//   },
+//   {
+//     label: 'House Bill of Lading',
+//     number: 4,
+//     attachmentList: [{ name: 'Commercial Invoice.pdf' }]
+//   },
+//   {
+//     label: 'Master Bill of Lading',
+//     number: 4,
+//     attachmentList: [{ name: 'Commercial Invoice.pdf' }]
+//   }
+// ]
+const summaryList = []
+
 const activeNames = ref(['1'])
 </script>
 
@@ -92,7 +121,11 @@ const activeNames = ref(['1'])
             >
           </div>
           <div class="attachment-content">
-            <div class="attachment-type" v-for="typeItem in attItem.typeList" :key="typeItem.label">
+            <div
+              class="attachment-type"
+              v-for="typeItem in attItem?.typeList"
+              :key="typeItem.label"
+            >
               <div class="type-label">{{ typeItem.label }} ({{ typeItem.number }})</div>
               <div class="type-attachment-list">
                 <div
@@ -107,6 +140,7 @@ const activeNames = ref(['1'])
                 </div>
               </div>
             </div>
+            <div class="empty-attachment" v-if="!attItem?.typeList?.length">no file</div>
           </div>
         </div>
       </div>
@@ -127,8 +161,8 @@ const activeNames = ref(['1'])
           :key="index"
         >
           <div class="right-download">
-            <div class="count">
-              <span>12</span>
+            <div class="count" v-if="typeItem?.attachmentList?.length">
+              <span>{{ typeItem?.attachmentList?.length }}</span>
             </div>
             <span class="font_family icon-icon_download_b"></span>
           </div>
@@ -143,7 +177,7 @@ const activeNames = ref(['1'])
             <div class="attachment-list">
               <div
                 class="attachment-item"
-                v-for="attItem in typeItem.attachmentList"
+                v-for="attItem in typeItem?.attachmentList"
                 :key="attItem.name"
               >
                 <v-ellipsis-tooltip
@@ -156,6 +190,9 @@ const activeNames = ref(['1'])
             </div>
           </el-collapse-item>
         </el-collapse>
+        <div class="empty-file-data">
+          <img src="./images/empty-img.png" alt="empty-data" v-if="!summaryList?.length" />
+        </div>
       </div>
     </div>
   </div>
@@ -176,6 +213,11 @@ const activeNames = ref(['1'])
     margin-left: 24px;
     min-height: 400px;
     background-color: var(--color-attchment-summary-bg);
+    .empty-file-data {
+      height: calc(100% - 4px);
+      padding-top: 68px;
+      text-align: center;
+    }
   }
 }
 .left-select-section {
@@ -197,7 +239,6 @@ const activeNames = ref(['1'])
   }
 }
 .left-select-section .attachment-list .attachment-item {
-  flex: 1 1 calc(50% - 4px);
   width: calc(50% - 4px);
   height: 320px;
   border: 1px solid var(--color-border);
@@ -226,6 +267,13 @@ const activeNames = ref(['1'])
     padding: 13px 8px;
     overflow: auto;
     height: calc(100% - 48px);
+    .empty-attachment {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--color-neutral-2);
+    }
   }
   .attachment-type {
     margin-bottom: 8px;
@@ -273,6 +321,7 @@ const activeNames = ref(['1'])
     border-bottom: 1px solid var(--color-border);
   }
   .summary-content {
+    height: calc(100% - 84px);
     padding: 16px 8px;
   }