refactor: 审批支持框选

src/layout/components/Header/RecycleModal.vue

@@ -144,15 +144,18 @@ function downHandler(event: MouseEvent) {
   if (!selectionBox)
     return
 
-  selectIds.value.length = 0
-
-  start = { x: event.clientX, y: event.clientY }
-  selectionBox.style.width = '0'
-  selectionBox.style.height = '0'
-  selectionBox.style.left = `${start.x}px`
-  selectionBox.style.top = `${start.y}px`
-  selectionBox.style.display = 'block'
-  selectionBox.style.zIndex = '9999'
+  const classname = (event.target as any).className
+
+  if (!classname.includes('checkbox')) {
+    selectIds.value.length = 0
+    start = { x: event.clientX, y: event.clientY }
+    selectionBox.style.width = '0'
+    selectionBox.style.height = '0'
+    selectionBox.style.left = `${start.x}px`
+    selectionBox.style.top = `${start.y}px`
+    selectionBox.style.display = 'block'
+    selectionBox.style.zIndex = '9999'
+  }
 }
 
 function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
@@ -238,6 +241,12 @@ function closeModal(event: MouseEvent) {
 defineExpose({
   showModal,
 })
+
+const checked = ref(false)
+function onCheckChange(val: any, item: any) {
+  checked.value = val
+  console.log('onCheckChange')
+}
 </script>
 
 <template>
@@ -295,6 +304,11 @@ defineExpose({
                     class="wrapper-content-item-img"
                     :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
                   >
+                  <n-checkbox
+                    v-model:checked="item.checked"
+                    style="position:absolute;left:20px;top:20px" @click.prevent
+                    @update:checked="onCheckChange($event, item)"
+                  />
                 </div>
               </div>
               <!-- </n-scrollbar> -->
@@ -421,6 +435,7 @@ defineExpose({
     .scroll {
       overflow-y: scroll;
       height: calc(100vh - 282px);
+      background-color: aqua;
     }
   }
 }

src/views/task/modal/BatchModal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue'
+import { computed, onMounted, onUpdated, reactive, ref, watch } from 'vue'
 import Masonry from 'masonry-layout'
 import { useInfiniteScroll } from '@vueuse/core'
 import { debounce } from 'lodash-es'
@@ -56,6 +56,7 @@ const sortBy: PictureSortParam = {
   orderbyname: 'asc',
   orderbyvalue: 'fromuptime',
 }
+const batch = ref(false)
 
 const layout = debounce(() => {
   if (!show.value)
@@ -135,23 +136,25 @@ onUpdated(() => {
 let start: { x: number, y: number } | null = null
 let selectionBox: HTMLDivElement | null
 const selectIds = ref<string[]>([])
-const selectItems = ref<any[]>([])
 
 function downHandler(event: MouseEvent) {
   event.stopPropagation()
 
-  if (!selectionBox)
+  if (!selectionBox || batch.value === false)
     return
 
-  selectIds.value.length = 0
-
-  start = { x: event.clientX, y: event.clientY }
-  selectionBox.style.width = '0'
-  selectionBox.style.height = '0'
-  selectionBox.style.left = `${start.x}px`
-  selectionBox.style.top = `${start.y}px`
-  selectionBox.style.display = 'block'
-  selectionBox.style.zIndex = '9999'
+  const classname = (event.target as any).className
+
+  if (!classname.includes('checkbox')) {
+    selectIds.value.length = 0
+    start = { x: event.clientX, y: event.clientY }
+    selectionBox.style.width = '0'
+    selectionBox.style.height = '0'
+    selectionBox.style.left = `${start.x}px`
+    selectionBox.style.top = `${start.y}px`
+    selectionBox.style.display = 'block'
+    selectionBox.style.zIndex = '9999'
+  }
 }
 
 function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
@@ -168,7 +171,7 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
 }
 
 function moveHandler(e: MouseEvent) {
-  if (!selectionBox || !start)
+  if (!selectionBox || !start || batch.value === false)
     return
 
   const x = Math.min(e.clientX, start.x)
@@ -197,39 +200,30 @@ const gridHeight = computed(() => {
 })
 
 function addListeners() {
-  // selectionBox = document.querySelector('.selection-box') as HTMLDivElement
+  selectionBox = document.querySelector('.selection-box') as HTMLDivElement
 
-  // on(el.value!, 'mousedown', downHandler)
-  // on(el.value!, 'mousemove', moveHandler)
-  // on(document, 'mouseup', upHandler)
+  on(el.value!, 'mousedown', downHandler)
+  on(el.value!, 'mousemove', moveHandler)
+  on(document, 'mouseup', upHandler)
 
   emitter.on('refresh', refreshHandler)
 }
 
 function removeListeners() {
-  // off(el.value!, 'mousedown', downHandler)
-  // on(el.value!, 'mousemove', moveHandler)
-  // on(document, 'mouseup', upHandler)
+  off(el.value!, 'mousedown', downHandler)
+  on(el.value!, 'mousemove', moveHandler)
+  on(document, 'mouseup', upHandler)
 
   emitter.off('refresh', refreshHandler)
 }
 
 async function afterEnter() {
   addListeners()
-
-  const packageid = taskStore.getPackageid
-  const taskId = taskStore.getActiveId
-  taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
-
-  const list = await featchList()
-  listData.value = list
+  refreshHandler()
 }
 
 function afterLeave() {
   removeListeners()
-
-  pagination.pageNo = 1
-  pagination.pageSize = 30
 }
 
 onMounted(() => {
@@ -257,57 +251,48 @@ function backHandler() {
 }
 
 function onCheckChange(checked: any, item: any) {
-  const index = selectItems.value.indexOf(item)
-  item.checked = checked
+  const index = selectIds.value.indexOf(item.id)
 
   if (index === -1 && checked)
-    selectItems.value.push(item)
+    selectIds.value.push(item.id)
 
   else
-    selectItems.value.splice(index, 1)
+    selectIds.value.splice(index, 1)
 }
 
-// watch(() => selectIds.value.length, () => {
-//   const list = listData.value
-//   for (const item of list) {
-//     if (selectIds.value.includes(item.id))
-//       item.checked = true
-//     else
-//       item.checked = false
-//   }
-// })
-
-const batch = ref(false)
+watch(() => selectIds.value.length, () => {
+  const list = listData.value
+  for (const item of list) {
+    if (selectIds.value.includes(item.id))
+      item.checked = true
+    else
+      item.checked = false
+  }
+})
 
 const showActions = computed(() => {
-  return selectItems.value.length > 0 && batch
+  return selectIds.value.length > 0 && batch
 })
 
 function setBatch(value: boolean) {
   batch.value = value
-  if (value === false) {
-    selectItems.value.forEach(item => item.checked = false)
-    selectItems.value.length = 0
-  }
+  if (value === false)
+    selectIds.value.length = 0
 }
 
 function reject() {
-  emit('reject', selectItems.value)
+  emit('reject', getSelectItems())
 }
 
 function approval() {
-  emit('approval', selectItems.value)
+  emit('approval', getSelectItems())
 }
 
-async function refreshHandler() {
-  pagination.pageNo = 1
-  pagination.pageSize = 30
-
-  const list = await featchList()
-  listData.value = list
+function getSelectItems() {
+  return listData.value.filter(item => selectIds.value.includes(item.id))
 }
 
-watch(() => taskStore.activeId, async (newValue, oldValue) => {
+async function refreshHandler() {
   const packageid = taskStore.getPackageid
   const taskId = taskStore.getActiveId
   taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
@@ -319,6 +304,10 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
   const list = await featchList()
   listData.value = list
   layout()
+}
+
+watch(() => taskStore.activeId, async (newValue, oldValue) => {
+  refreshHandler()
 })
 </script>