feat: 修改bug

src/layout/components/Header/RecycleModal.vue

@@ -20,10 +20,14 @@ const cardStyle = {
   '--n-padding-left': '120px',
 }
 
+let startTime = 0;
+let endTime = 0;
+let startCalTime = false;
 const message = useMessage()
-const timeRange = ref('')
-const similarRange = ref('')
+const timeRange = ref('desc')
+const similarRange = ref('desc')
 const batch = ref(false)
+const imageRef = ref<ComponentElRef | null>();
 let filterId = null;
 let sortObj: any = {
   orderByUptime: 'desc'
@@ -64,6 +68,7 @@ const viewLabel = computed(() => {
 
 const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
+const elwc = ref<HTMLDivElement | null>(null)
 const listData = ref<any[]>([])
 const pagination = reactive({
   pageNo: 1,
@@ -149,7 +154,18 @@ async function loadMore() {
 }
 
 onUpdated(() => {
-  console.log('onUpdated', onUpdated)
+  if(startCalTime) {
+    endTime = new Date().getTime();
+    if(endTime - startTime > 1000) {
+      createDom()
+    }
+  }else {
+    removeDom()
+  }
+  console.log('onUpdated')
+  // if(elwc.value) {
+  //   on(elwc.value!, 'click', showjjj)
+  // }
   layout()
 })
 
@@ -163,6 +179,9 @@ let selectionBox: HTMLDivElement | null
 const selectIds = ref<string[]>([])
 
 function downHandler(event: MouseEvent) {
+  console.log("downHandler-------------------", event);
+  startTime = new Date().getTime();
+  startCalTime = true;
   if (!selectionBox)
     return
 
@@ -218,6 +237,14 @@ function isSelected(pictureId: number) {
 }
 
 function moveHandler(e: MouseEvent) {
+  if(startCalTime) {
+    endTime = new Date().getTime();
+    if(endTime - startTime > 1000) {
+      createDom()
+    }
+  }else {
+    removeDom()
+  }
   if (!selectionBox || !start)
     return
 
@@ -234,20 +261,52 @@ function moveHandler(e: MouseEvent) {
   imUpdateSelectIds(x, y, w, h)
 }
 
+function createDom() {
+  let dom = document.createElement('div');
+  dom.className = "selection-box";
+  dom.style.width = "1px";
+  dom.style.border = "1px dotted black";
+  dom.style.position = "absolute";
+  dom.style.display = "block";
+  dom.style.zIndex = '9999';
+  document.body.appendChild(dom);
+  selectionBox = document.querySelector('.selection-box') as HTMLDivElement
+}
+
+function removeDom() {
+  let dom = document.getElementsByClassName("selection-box")[0];
+  if(dom) {
+    document.body.removeChild(dom);
+  }
+}
+
 function upHandler(event: MouseEvent) {
+  endTime = new Date().getTime();
+  startCalTime = false;
+  console.log("upHandle--------------------", startTime, endTime);
+  if(endTime - startTime > 1000) {
+    createDom()
+  }else {
+    removeDom()
+  }
   if (!selectionBox)
   return
+  selectionBox.style.display = 'none'
+  start = null
   if(selectionBox.style.width == "0px") {
+    removeDom()
+    if(event.target?.className.indexOf("n-checkbox-box__border") != -1 ) {
+      return
+    }
     selectIds.value = []
     selectedApproveItems.value.forEach((item) => (item.checked = false));
     selectedApproveItems.value.length = 0;
+    console.log("11111111111111", event, selectionBox.style);
     listData.value.map(item => {
       item.checked = false;
     });
     batch.value = false;
   }
-  selectionBox.style.display = 'none'
-  start = null
 }
 
 const gridHeight = computed(() => {
@@ -266,17 +325,19 @@ const gridHeight = computed(() => {
 })
 
 function addListeners() {
-  selectionBox = document.querySelector('.selection-box') as HTMLDivElement
-
+  
+  // selectionBox.style['z-index'] = '-1'
   on(el.value!, 'mousedown', downHandler)
   on(el.value!, 'mousemove', moveHandler)
   on(document, 'mouseup', upHandler)
+  // on(elwc.value!, 'mouseup', upHandler)
 }
 
 function removeListeners() {
   off(el.value!, 'mousedown', downHandler)
   on(el.value!, 'mousemove', moveHandler)
   on(document, 'mouseup', upHandler)
+  // on(elwc.value!, 'mouseup', upHandler)
 }
 
 function afterEnter() {
@@ -289,6 +350,7 @@ function afterLeave() {
 
 onMounted(() => {
   show.value && addListeners()
+  removeDom()
 })
 
 async function showModal() {
@@ -300,20 +362,30 @@ async function showModal() {
   layout()
 }
 
-async function onChange(val) {
+async function onChange() {
+  if(timeRange.value  == "desc") {
+    timeRange.value  = "asc";
+  }else {
+    timeRange.value  = "desc";
+  }
   sortObj = {
     // orderbyname: val,
-    orderByUptime: val
+    orderByUptime: timeRange.value
   }
   pagination.pageNo = 1
   const list = await featchList()
   listData.value = list
 }
 
-async function onChangeView(val) {
+async function onChangeView() {
+  if(similarRange.value  == "desc") {
+    similarRange.value  = "asc";
+  }else {
+    similarRange.value  = "desc";
+  }
   sortObj = {
     // orderbyname: val,
-    orderBySimilarity: val
+    orderBySimilarity: similarRange.value
   }
   pagination.pageNo = 1
   const list = await featchList()
@@ -368,6 +440,7 @@ const showActions = computed(() => {
 
 
 function onCheckChange(checked: any, item: any) {
+  
   item.checked = checked
   const index = selectedApproveItems.value.indexOf(item);
   const picIndex = selectIds.value.indexOf(item.pictureId);
@@ -382,6 +455,12 @@ function onCheckChange(checked: any, item: any) {
   } else {
     selectIds.value.splice(picIndex, 1);
   }
+  setTimeout(() => {
+    nextTick(() => {
+      batch.value = true
+      console.log("2222222222222222222");
+    })
+  }, 100)
 }
 
 function rejectHandler() {
@@ -466,37 +545,48 @@ function reloadList() {
 }
 async function refreshHandler(filtersearchId?: any) {
   // 注释 rao start
-  // reset()
-  // const list = await featchList()
-  // listData.value = list
-  // layout()
+  reset()
+  const list = await featchList()
+  listData.value = list
+  layout()
 // 注释 rao end
-  reset();
+  // reset();
 
-  if (filtersearchId) {
-    filterId = filtersearchId;
-  }
+  // if (filtersearchId) {
+  //   filterId = filtersearchId;
+  // }
 
-  nextTick(() => {
-    setTimeout(() => {
-      useInfiniteScroll(
-        el as any,
-        () => {
-          loadMore();
-        },
-        { distance: 10, canLoadMore: () => canloadMore }
-      );
-    }, 300);
-  });
+  // nextTick(() => {
+  //   setTimeout(() => {
+  //     useInfiniteScroll(
+  //       el as any,
+  //       () => {
+  //         loadMore();
+  //       },
+  //       { distance: 10, canLoadMore: () => canloadMore }
+  //     );
+  //   }, 300);
+  // });
 }
 
+function previewHandler(index: number, event: MouseEvent) {
+  console.log("imageRef.value?.[index]", imageRef.value?.[index]);
+  // event.stopImmediatePropagation();
+  // event.stopPropagation();
+  if (imageRef.value?.[index] && (imageRef.value[index] as any).src)
+    (imageRef.value?.[index] as any).click();
+}
+
+function showjjj (e) {
+  console.log("showjjj------------------", e);
+}
 </script>
 
 <template>
   <div>
     <n-modal v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
       @after-enter="afterEnter" @after-leave="afterLeave">
-      <n-card :style="cardStyle" class="card card-1" style="position: fixed;top:64px" :bordered="false" size="huge"
+      <n-card ref="elwc" :style="cardStyle" class="card card-1" style="position: fixed;top:64px" :bordered="false" size="huge"
         role="dialog" aria-modal="true">
         <div class="wrapper">
           <div class="wrapper-m32">
@@ -510,7 +600,27 @@ async function refreshHandler(filtersearchId?: any) {
           <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="viewMode" :options="viewOptions" trigger="click">
+                  <div class="wrapper-form-dropdown">
+                    <span>视图模式</span>
+                    <SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
+                  </div>
+                </n-popselect>
+                <div
+                  style="margin-left: 15px; cursor: pointer; color: #323233"
+                  @click="onChange()"
+                >
+                  <span>时间排序</span>
+                  <SvgIcon style="margin-left: 8px" name="sort" size="12" />
+                </div>
+                <div
+                  style="margin-left: 15px; cursor: pointer; color: #323233"
+                  @click="onChangeView()"
+                >
+                  <span>相似度排序</span>
+                  <SvgIcon style="margin-left: 8px" name="sort" size="12" />
+                </div>
+                <!-- <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
                   <div class="wrapper-content-form-dropdown">
                     <span>时间排序</span>
                     <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
@@ -521,13 +631,7 @@ async function refreshHandler(filtersearchId?: any) {
                     <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>视图模式</span>
-                    <SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
-                  </div>
-                </n-popselect>
+                </n-popselect> -->
               </div>
               <div>
                 <div class="remove" @click="remove">
@@ -561,15 +665,17 @@ async function refreshHandler(filtersearchId?: any) {
                 <div v-for="(item, index) in listData" :key="item.pictureId" :data-id="item.pictureId"
                   :class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }"
                   class="grid-item">
-                  <n-image 
+                  <n-image
+                  ref="imageRef"
                   :src="item.imgUrl"
+                  :preview-src="item.imgUrl"
                   class="img "
                     :class="{ 
                       'img-fit': viewMode === 'horizontalVersion', 
                       'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" 
                     />
                   <n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
-                    style="position:absolute;left:20px;top:20px" @click.prevent
+                    style="position:absolute;left:20px;top:20px" @click.prevent.stop
                     @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"