From 2b63e8577aab12761636779c7f48b2d98da623c6 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Tue, 2 Apr 2024 11:35:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=AF=E7=96=91=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Header/RecycleModal.vue | 68 +++++++++++++------
 1 file changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/layout/components/Header/RecycleModal.vue b/src/layout/components/Header/RecycleModal.vue
index f24faff..7f66e7b 100644
--- a/src/layout/components/Header/RecycleModal.vue
+++ b/src/layout/components/Header/RecycleModal.vue
@@ -37,7 +37,7 @@ const timeLabel = computed(() => {
   return item?.label
 })
 
-const viewMode = ref('masonry')
+const viewMode = ref('horizontalVersion')
 
 const viewLabel = computed(() => {
   const item = viewOptions.find((option) => {
@@ -134,6 +134,7 @@ async function loadMore() {
 }
 
 onUpdated(() => {
+  console.log('onUpdated',onUpdated)
   layout()
 })
 
@@ -265,8 +266,8 @@ async function commit() {
     layout()
   }
 }
- function remove() {
-  if ( !selectIds.value|| selectIds.value.length === 0) {
+function remove() {
+  if (!selectIds.value || selectIds.value.length === 0) {
     message.error('至少选中一个')
     return
   }
@@ -313,9 +314,8 @@ function rejectHandler() {
 
 function reset() {
   batch.value = false;
-  pagination.pageNo = 0;
+  pagination.pageNo = 1;
   pagination.pageSize = 20;
-  listData.value.length = 0;
   selectedApproveItems.value.length = 0;
   loading = false;
   canloadMore = true;
@@ -386,9 +386,11 @@ function doAudit(param: any) {
 function reloadList() {
   refreshHandler()
 }
-function refreshHandler() {
+async function refreshHandler() {
   reset()
-  featchList()
+  const list = await featchList()
+  listData.value = list
+  layout()
 }
 
 </script>
@@ -413,13 +415,13 @@ function refreshHandler() {
               <div>
                 <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
                   <div class="wrapper-content-form-dropdown">
-                    <span>{{ timeLabel || '时间排序' }}</span>
+                    <span>时间排序</span>
                     <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
                   </div>
                 </n-popselect>
                 <n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
                   <div class="wrapper-form-dropdown">
-                    <span>{{ viewLabel || '视图模式' }}</span>
+                    <span>视图模式</span>
                     <SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
                   </div>
                 </n-popselect>
@@ -456,17 +458,18 @@ function refreshHandler() {
                 <div v-for="(item, index) in listData" :key="item.id" :data-id="item.id"
                   :class="{ 'grid-item-selected': isSelected(item.id) }" :style="{ height: gridHeight }"
                   class="grid-item">
-                  <!-- <img
-                    class="wrapper-content-item-img"
-                    :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
-                  > -->
                   <n-image :src="item.imgUrl" class="img "
                     :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" />
-                  <n-checkbox v-if="batch" v-model:checked="item.checked" style="position:absolute;left:20px;top:20px"
-                    @click.prevent @update:checked="onCheckChange($event, item)" />
-                  <!-- <div class="percent">
-                    {{ getPercent(item.pictureid, item) }}
-                  </div> -->
+                  <n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
+                    style="position:absolute;left:20px;top:20px" @click.prevent
+                    @update:checked="onCheckChange($event, item)" />
+                  <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
+                  <img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png"
+                    alt="">
+
+                  <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+                    {{ item.similarityScore }}<span class="percent-unit">%</span>
+                  </div>
                 </div>
               </div>
               <!-- </n-scrollbar> -->
@@ -480,7 +483,7 @@ function refreshHandler() {
       </n-card>
     </n-modal>
     <NotPassed ref="notPassModalRef" @success="reloadList" />
-    <ConfrimModal ref="confrimModalRef" @commit="commit" :selectedTotal="selectIds.length"/>
+    <ConfrimModal ref="confrimModalRef" @commit="commit" :selectedTotal="selectIds.length" />
 
   </div>
 </template>
@@ -597,20 +600,40 @@ function refreshHandler() {
       width: 214px;
       padding: 16px;
       position: relative;
+
+      .tag-status {
+        width: 46px;
+        height: 22px;
+        position: absolute;
+        left: 16px;
+        top: 20px;
+      }
+
     }
 
     .percent {
       position: absolute;
-      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 35px;
       height: 18px;
       opacity: 0.9;
       background: #6f92fd;
       border-radius: 6px 0px 6px 0px;
       z-index: 5;
-      right: 22px;
-      top: 22px;
+      right: 28px;
+      top: 20px;
       color: #fff;
+      font-size: 14px;
+
+      .percent-unit {
+        font-size: 8px;
+        margin-top: 4px;
+      }
+    }
+    .percent-red {
+      background: #ff4e4f;
     }
 
     .grid-item-selected {
@@ -620,6 +643,7 @@ function refreshHandler() {
     .scroll {
       overflow-y: auto;
       height: calc(100vh - 282px);
+      margin-left: 20px;
     }
   }
 }