Merge pull request 'feat: 可疑文件夹增加批量审批审核' (#71) from jie into test

Reviewed-on: #71

src/layout/components/Header/RecycleModal.vue

@@ -11,6 +11,7 @@ import { debounce } from 'lodash-es'
 
 import { audit } from '@/api/task/task'
 import NotPassed from '@/components/Approval/NotPassed.vue'
+import { formatToDateHMS } from '@/utils/dateUtil'
 import { off, on } from '@/utils/domUtils'
 import ConfrimModal from "./ConfrimModal.vue"
 
@@ -37,7 +38,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 +135,7 @@ async function loadMore() {
 }
 
 onUpdated(() => {
+  console.log('onUpdated', onUpdated)
   layout()
 })
 
@@ -242,6 +244,7 @@ async function showModal() {
   pagination.pageNo = 1
   const list = await featchList()
   listData.value = list
+  layout()
 }
 
 async function onChange() {
@@ -313,9 +316,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 +388,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 +417,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 +460,35 @@ 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"
+                  <n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
-                    @click.prevent @update:checked="onCheckChange($event, item)" />
+                    style="position:absolute;left:20px;top:20px" @click.prevent
-                  <!-- <div class="percent">
+                    @update:checked="onCheckChange($event, item)" />
-                    {{ getPercent(item.pictureid, 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 class="time" style="left: 25px;bottom: 15px;">
+                    <!-- <div class="time-item">
+                      <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+                      <span>{{ item?.photoDateTimestamp ?
+                        formatToDateHMS(Number(item.photoDateTimestamp)) : '-' }}</span>
+                    </div>
+                    <div class="time-item time-item2">
+                      <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+                      <span>{{ item.submitDateTimestamp ?
+                        formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
                     </div> -->
+                    <div class="time-item">
+                      <SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
+                      <span>{{ item.submitDateTimestamp ?
+                        formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
+                    </div>
+                  </div>
                 </div>
               </div>
               <!-- </n-scrollbar> -->
@@ -597,29 +619,75 @@ function refreshHandler() {
       width: 214px;
       padding: 16px;
       position: relative;
+
+      .tag-status {
+        width: 46px;
+        height: 22px;
+        position: absolute;
+        left: 16px;
+        top: 20px;
+      }
+
+    }
+    .grid-item-selected {
+      background-color: #dae3ff;
     }
 
     .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;
+      right: 28px;
-      top: 22px;
+      top: 20px;
       color: #fff;
+      font-size: 14px;
+
+      .percent-unit {
+        font-size: 8px;
+        margin-top: 4px;
+      }
     }
 
-    .grid-item-selected {
+    .percent-red {
-      background-color: #dae3ff;
+      background: #ff4e4f;
     }
+    .time {
+        position: absolute;
+        z-index: 3;
+        left: 32px;
+        bottom: 32px;
+
+        .time-item {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC-Medium;
+          font-weight: 500;
+          color: #ffffff;
+          margin-bottom: 4px;
+        }
+
+        .time-item2 {
+          margin-bottom: 0;
+        }
+
+        .svg-time {
+          margin-right: 5px;
+        }
+      }
+
 
     .scroll {
       overflow-y: auto;
       height: calc(100vh - 282px);
+      margin-left: 20px;
     }
   }
 }
@@ -642,5 +710,4 @@ function refreshHandler() {
     height: 100%;
     object-fit: cover;
   }
-}
+}</style>
-</style>