Merge pull request 'shen' (#74) from shen into test

Reviewed-on: #74

src/views/final/comp/ListAction.vue

@@ -28,19 +28,25 @@ const actions = computed(() => {
 </script>
 
 <template>
-  <div :data-id="id">
-    <n-button
-      v-for="(action, index) in actions" :key="index" class="normal"
+  <div :data-id="id" class="wrap">
+    <div
+      v-for="(action, index) in actions" :key="index"
+      class="normal"
       :class="{ gap: index !== 0, reject: action.key === 'reject' }" text @click="(trigger(action) as any)"
     >
       {{ action.label }}
-    </n-button>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.wrap{
+  display: flex;
+  align-items: center;
+}
 .normal {
-  color: #507AFD
+  color: #507AFD;
+  cursor: pointer;
 }
 
 .gap {

src/views/final/comp/RepeatTaskTableModal.vue

@@ -397,25 +397,21 @@ defineExpose({
               </div>
             </div>
 
-            <div class="batch">
-              <div v-show="!showActions" style="display: flex; align-items: center">
-                <div class="btn-batch">
-                  <SvgIcon style="margin-right: 6px" size="22" name="batch" />
-                  批量审批
-                </div>
-              </div>
-              <div v-show="showActions" style="display: flex; align-items: center">
-                <NButton text @click="switchBatch()">
-                  <template #icon>
-                    <SvgIcon name="revoke" />
-                  </template>
-                  取消
-                </NButton>
-
+            <div v-show="showActions" class="batch">
+              <div style="display: flex; align-items: center">
                 <img class="btn-approval btn-left" style="margin-left: 16px" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="batchReject">
                 <SvgIcon size="24" name="vs" />
                 <img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="batchApproval">
               </div>
+              <div class="batch-right">
+                <div class="select">
+                  已选中 <span class="num">{{ selectionIds.length }}</span>
+                </div>
+                <div class="line" />
+                <div class="clear" @click="switchBatch">
+                  清空
+                </div>
+              </div>
             </div>
             <div class="wrapper-content">
               <NDataTable
@@ -454,6 +450,7 @@ defineExpose({
 .batch {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-top: 27px;
 
   .btn-approval{
@@ -462,6 +459,34 @@ defineExpose({
     cursor: pointer;
   }
 
+  .batch-right {
+    display: flex;
+    align-items: center;
+    .select{
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC-Regular;
+      font-weight: 500;
+      text-align: center;
+      color: #666666;
+    }
+
+    .num{
+      color: #507AFD;
+    }
+
+    .line{
+      width: 1px;
+      height: 14px;
+      background: #d8d8d8;
+      margin: 0 16px;
+    }
+
+    .clear{
+      color: #507AFD;
+      cursor: pointer;
+    }
+  }
+
 }
 .wrapper {
   display: flex;

src/views/final/content/Content.vue

@@ -832,9 +832,9 @@ defineExpose({
             <li>
               <SvgIcon size="20" name="download" /><span style="margin-left: 5px">导出全部数据</span>
             </li>
-            <!-- <li>
+            <li>
               <SvgIcon size="20" name="look" /><span style="margin-left: 5px">查看导入记录</span>
-            </li> -->
+            </li>
           </ul>
         </n-popover>
       </div>
@@ -1074,4 +1074,10 @@ defineExpose({
 :deep(.n-data-table .n-data-table-td.n-data-table-td--fixed-right) {
   z-index: 100 !important;
 }
+:deep(.n-data-table-th__title) {
+  color: #333;
+}
+:deep(.n-data-table .n-data-table-td) {
+  color: #666;
+}
 </style>

src/views/task/aside/Aside.vue

@@ -70,10 +70,8 @@ const showSearch = ref(false)
 
 function setShowSearch(value: boolean) {
   if (!value) {
-    console.log('setShowSearch', value)
     search.value = ''
     taskListRef.value.search('')
-    return
   }
   showSearch.value = value
 }

src/views/task/content/Content.vue

@@ -240,7 +240,9 @@ async function handleDragEnd(event, item) {
     const res = await dubiousfileyd({ pictureid: item.pictureId })
     if (res.code === 'OK') {
       message.success('加入成功')
+      setBatch(false)
       getTableData()
+      getImgList()
     }
     else {
       message.error(res.message)
@@ -355,6 +357,11 @@ async function getDetail() {
   getImgList()
 }
 
+function notPassSuccess(param) {
+  batchModalRef.value.reload()
+  reloadList(param, '不通过')
+}
+
 function reloadList(param, text) {
   // 修改左侧状态
   const id = currentTaskId()
@@ -643,10 +650,8 @@ function switchBatch() {
       </n-tab-pane>
     </n-tabs>
     <NotPassed
-      ref="notPassModalRef" @success="(param) => {
-        batchModalRef.value.reload()
-        reloadList(param, '不通过')
-      }"
+      ref="notPassModalRef"
+      @success="notPassSuccess"
     />
     <BatchModal
       ref="batchModalRef"

src/views/task/modal/BatchModal.vue

@@ -100,15 +100,17 @@ watch(viewMode, () => {
 
 let canloadMore = true
 
-useInfiniteScroll(
-  el as any,
-  () => {
-    loadMore()
-  },
-  { distance: 10, canLoadMore: () => canloadMore },
-)
+// useInfiniteScroll(
+//   el as any,
+//   () => {
+//     console.log(123456)
+//     loadMore()
+//   },
+//   { distance: 10, canLoadMore: () => canloadMore },
+// )
 
 async function loadMore() {
+  console.log('loadMore')
   if (loading.value || el.value == null)
     return
 
@@ -234,6 +236,7 @@ async function afterEnter() {
 }
 
 function afterLeave() {
+  reload()
   removeListeners()
 }
 
@@ -285,8 +288,12 @@ const showActions = computed(() => {
 
 function setBatch(value: boolean) {
   batch.value = value
-  if (value === false)
-    selectIds.value.length = 0
+  if (value === false) {
+    selectIds.value = []
+    listData.value.forEach((item) => {
+      item.checked = false
+    })
+  }
 }
 
 function reject() {
@@ -321,13 +328,15 @@ async function refreshHandler() {
   taskDetailInfo.value = await getTaskDetailInfo(taskId.value, '')
 
   nextTick(() => {
-    useInfiniteScroll(
-      el as any,
-      () => {
-        loadMore()
-      },
-      { distance: 10, canLoadMore: () => canloadMore },
-    )
+    setTimeout(() => {
+      useInfiniteScroll(
+        el as any,
+        () => {
+          loadMore()
+        },
+        { distance: 10, canLoadMore: () => canloadMore },
+      )
+    }, 300)
   })
 }
 
@@ -343,8 +352,31 @@ function switchBatch() {
 
 function reload() {
   selectIds.value = []
+  setBatch(false)
+  refreshHandler()
+}
+
+function sortHandler(orderby: 'similarityScore' | 'createdate') {
+  sortBy.orderName = orderby
+  sortBy.orderType = sortBy.orderType === 'asc' ? 'desc' : 'asc'
+
   refreshHandler()
 }
+
+// const gridHeight = computed(() => {
+//   let height = ''
+//   if (viewMode.value === 'masonry')
+//     height = ''
+//   else if (viewMode.value === 'horizontalVersion')
+//     height = '145px'
+//   else if (viewMode.value === 'verticalVersion')
+//     height = '300px'
+//   else if (viewMode.value === '3:4')
+//     height = '240px'
+
+//   return height
+// })
+
 defineExpose({
   showModal,
   reload,
@@ -364,10 +396,10 @@ defineExpose({
         <div class="wrapper">
           <div class="wrapper-m32">
             <SvgIcon name="task-batch" size="16" />
-            <span style="margin-left: 8px;">任务审批</span>
+            <span style="margin-left: 8px;color: #666;">任务审批</span>
           </div>
           <div class="wrapper-title wrapper-m32">
-            <span>任务ID:{{ taskDetailInfo.fromtaskname }}</span>
+            <span style="color: #333;">任务ID:{{ taskDetailInfo.fromtaskname }}</span>
             <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
             <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
           </div>
@@ -422,7 +454,7 @@ defineExpose({
           <div class="wrapper-content">
             <div class="wrapper-content-form wrapper-m32">
               <div>
-                <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
+                <!-- <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
                   <div class="wrapper-content-form-dropdown">
                     <span>{{ timeLabel || '时间模式' }}</span>
                     <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
@@ -433,7 +465,22 @@ defineExpose({
                     <span>{{ viewLabel || '视图模式' }}</span>
                     <SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
                   </div>
+                </n-popselect> -->
+                <n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
+                  <div class="dropdown">
+                    <!-- <span>{{ viewLabel || '请选择' }}</span> -->
+                    <span>视图</span>
+                    <SvgIcon class="gap" name="arrow-botton" size="14" />
+                  </div>
                 </n-popselect>
+                <div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('createdate')">
+                  <span>时间排序</span>
+                  <SvgIcon style="margin-left: 8px;" name="sort" size="12" />
+                </div>
+                <div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('similarityScore')">
+                  <span>相似度排序</span>
+                  <SvgIcon style="margin-left: 8px;" name="sort" size="12" />
+                </div>
               </div>
               <div>
                 <div v-show="!showActions" class="wrapper-content-form-button" @click="switchBatch()">
@@ -466,10 +513,15 @@ defineExpose({
                   class="grid-item"
                 >
                   <div class="img-wrap">
-                    <img
+                    <!-- <img
                       class="wrapper-content-item-img"
                       :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
-                    >
+                    > -->
+                    <n-image
+                      ref="imageRef"
+                      class="img"
+                      :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" :src="item.serverThumbnailUrl || item.imgUrl"
+                    />
                     <div class="small-mark" />
                     <div class="time">
                       <div v-if="item.photoDateTimestamp" class="time-item">
@@ -659,7 +711,7 @@ defineExpose({
     margin-bottom: 10px;
 
     th {
-      color: #d7d7d7;
+      color: #999999;
       text-align: left;
     }
 
@@ -733,6 +785,23 @@ defineExpose({
       }
     }
 
+    .img {
+      border-radius: 7px;
+      display: block;
+      height: calc(100% - 25px);
+    }
+
+    .img-full {
+      width: 100%;
+      overflow: hidden;
+
+      ::v-deep(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
     .grid-item {
       width: 214px;
       padding: 16px;