云盘

src/components/CloudDisk/CloudDiskList.vue

@@ -192,8 +192,11 @@
                   </el-dropdown>
               </div>
             </div>
-            <div ref="imgDiskRef" class="full-height" style="padding-top: 10px;overflow:auto"
-            :style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'60px':'130px'}">
+            
+            <div ref="imgDiskRef" class="full-height" style="padding-top: 10px;overflow:auto;"
+            :style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'60px':'130px'}"
+            @mousedown="handleMouseDown">
+              <div v-if="queryObj.layout!=3" class="mask" v-show="positionList.is_show_mask" :style="'width:' + mask_width + 'left:' + mask_left + 'height:' + mask_height + 'top:' + mask_top"></div>
               <cellList v-if="queryObj.layout==1" :dataList="dataList" 
                   @refreshHandler="refreshHandler"
                   @CopyTo="CopyTo"
@@ -225,9 +228,7 @@
                   :Parent="datas"
                   :params="queryObj"
                   ></list>
-                <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg">
-                  <!-- <img :src="noDataImg(2)" width="118" /> -->
-                </div>
+                <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"></div>
                 <template v-else>
                   <div style="height:40px;" class="no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
                 </template>
@@ -296,7 +297,7 @@
       
   </template>
   <script setup lang="ts">
-  import { ref, reactive, watch, provide, inject, onMounted, PropType, nextTick, onBeforeUnmount } from "vue";
+  import { ref, reactive, watch, provide, inject, onMounted, PropType, nextTick, onBeforeUnmount, computed } from "vue";
   import type { ElMessage,ElImage,DropdownInstance,ElLoading } from "element-plus";
   import { ArrowLeft,CopyDocument } from "@element-plus/icons-vue";
   import CloudDiskService from "@/services/CloudDiskService";
@@ -333,15 +334,15 @@
     total: 0,
     layout: 1,//布局
     QFileType: [],//格式
-    QStartTime: time[0],
-    QEndTime: time[1],
+    QStartTime: '',
+    QEndTime: '',
     QOrderFiled: 1,//排序字段(1-创建时间，2-文件大小 3文件名称
     QOrderBy: 2,//1-升序，2-倒序
     QCreateBy: '',//上传人员
     QFileName: '',
   })
   
-  const dateArr = ref([time[0],time[1]] as any)
+  const dateArr = ref([] as any)
   if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
   const loading = ref(false as any)
   const dataList = ref([] as Array<any>);
@@ -373,10 +374,6 @@
   const dropdownSort = ref<DropdownInstance>()
   const dropdownLayout = ref<DropdownInstance>()
   const dropdownDade = ref()
-  const defaultTime2: [Date, Date] = [
-    new Date(2000, 1, 1),
-    new Date(2000, 2, 1),
-  ]
 
   const sortType = ref([
     {Name: '添加时间',ID:1,check:true},
@@ -411,6 +408,95 @@
     if(x.ID==queryObj.layout) x.check = true
   })
 
+  const positionList = reactive({
+      is_show_mask: false,
+      box_screen_left: 0,
+      box_screen_top: 0,
+      start_x: 0,
+      start_y: 0,
+      end_x: 0,
+      end_y: 0
+  })
+  //分别计算遮罩层的位置，大小
+  const  mask_width = computed(()=> {
+      return `${Math.abs(positionList.end_x - positionList.start_x)}px;`;
+  })
+  const  mask_height = computed(()=> {
+      return `${Math.abs(positionList.end_y - positionList.start_y)}px;`;
+  })
+  const mask_left = computed(() =>{
+      return `${Math.min(positionList.start_x, positionList.end_x) - positionList.box_screen_left}px;`;
+  })
+  const mask_top = computed(()=> {
+      return `${Math.min(positionList.start_y, positionList.end_y) - positionList.box_screen_top}px;`;
+  })
+
+  //鼠标按下事件
+  const handleMouseDown = (event)=> {
+      if(queryObj.layout==3) return
+      positionList.is_show_mask = true;
+      positionList.start_x = event.clientX;
+      positionList.start_y = event.clientY;
+      positionList.end_x = event.clientX;
+      positionList.end_y = event.clientY;
+      document.body.addEventListener("mousemove", handleMouseMove); //监听鼠标移动事件
+      document.body.addEventListener("mouseup", handleMouseUp); //监听鼠标抬起事件
+      if (event.button === 0) {
+          event.preventDefault();
+      }
+  }
+
+  const handleMouseMove = (event) => {
+      positionList.end_x = event.clientX;
+      positionList.end_y = event.clientY;
+  }
+
+  const handleMouseUp = () => {
+      document.body.removeEventListener("mousemove", handleMouseMove);
+      document.body.removeEventListener("mouseup", handleMouseUp);
+      positionList.is_show_mask = false;
+      handleDomSelect();
+      resSetXY();
+  }
+  const handleDomSelect = () => {
+      const dom_mask = window.document.querySelector(".mask");
+      //getClientRects()每一个盒子的边界矩形的矩形集合
+      const rect_select = dom_mask.getClientRects()[0];
+      // console.log(rect_select);
+      const add_list = [];
+      const del_list = [];
+      document.querySelectorAll(".CloudDisk-R-Box").forEach((node, index) => {
+          const rects = node.getClientRects()[0];
+          if (collide(rects, rect_select) === true) {
+              if (datas.SelectedDatas.includes(dataList.value[index])) {
+                  dataList.value[index].check = !dataList.value[index].check
+                  del_list.push(dataList.value[index]);
+              } else {
+                  dataList.value[index].check = !dataList.value[index].check
+                  add_list.push(dataList.value[index]);
+              }
+          }
+      });
+      datas.SelectedDatas = datas.SelectedDatas.concat(add_list).filter((item) => !del_list.includes(item));
+      newDatasSelected()
+  }
+  //比较checkbox盒子边界和遮罩层边界最大最小值
+  const collide = (rect1, rect2) => {
+      const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
+      const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
+      const minX = Math.min(rect1.x, rect2.x);
+      const minY = Math.min(rect1.y, rect2.y);
+      return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height;
+  }
+
+  //清除
+  const resSetXY = () => {
+      positionList.start_x = 0;
+      positionList.start_y = 0;
+      positionList.end_x = 0;
+      positionList.end_y = 0;
+  }
+
   const remoteMethod = async (query: string) => {
     if (query) {
       CreateLoading.value = true
@@ -458,6 +544,10 @@
     refreshHandler()
   }
   const BatchCopyTo = () => {
+    if(datas.IdList.length==0) return ElMessage.warning({
+            showClose: true,
+            message: `请勾选需要复制的图`,
+        })
     addEditMsg.Id = datas.IdList
     GroupId.value = ''
     dialogType.value = 1
@@ -465,6 +555,10 @@
   }
 
   const BatchMoveFile = () => {
+    if(datas.IdList.length==0) return ElMessage.warning({
+            showClose: true,
+            message: `请勾选需要移动的图`,
+        })
     addEditMsg.Id = datas.IdList
     GroupId.value = ''
     dialogType.value = 2
@@ -472,6 +566,10 @@
   }
 
   const BatchRemove = () => {
+    if(datas.IdList.length==0) return ElMessage.warning({
+            showClose: true,
+            message: `请勾选需要删除的图`,
+        })
     let text = ''
     let mobel = ''
     let material = ''
@@ -530,7 +628,6 @@
 
   const MultipleChoice = (row:Array) =>{
     datas.SelectedDatas = row
-    datas.IdList = row.map(x=>{ return x.DetailsId})
     if(datas.SelectedDatas.length>0) datas.ControlsShow = true
     newDatasSelected()
   }
@@ -594,9 +691,10 @@
           text:'正在切换',
           lock:true
       })
-      layoutType.value.forEach(x=>{
-        if(x.ID!=item.ID) x.check = false
-      })
+      resSetXY()
+      for(let i=0;i<layoutType.value.length;i++){
+        layoutType.value[i].check = false
+      }
       item.check = true
       queryObj.layout = item.ID
       let time = 300
@@ -896,6 +994,10 @@ onMounted(()=>{
   onBeforeUnmount(() => {
       document.removeEventListener('click', () => {});
   })
+  watch(()=>datas.SelectedDatas,(n,o)=>{
+    datas.IdList = []
+    if(n.length>0) datas.IdList = datas.SelectedDatas.map(x=>{ return x.DetailsId})
+  })
   </script>
   <style lang="scss" scoped>
     .CloudDisk-R-Date{
@@ -1032,8 +1134,8 @@ onMounted(()=>{
   position: fixed;
   bottom: 10px;
   /* 515px */
-  left: 0;
-  right: 0;
+  left: 232px;
+  right: 232px;
   z-index: 2;
 }
 .CloudDisk-RBFCenter{
@@ -1048,5 +1150,12 @@ onMounted(()=>{
 .CloudDisk-RBFbj .close-btn:hover{
   color: $themeColor;
 }
+.mask {
+    position: absolute;
+    background: #409eff;
+    opacity: 0.4;
+    z-index: 100;
+}
+
   </style>
   
\ No newline at end of file

src/components/CloudDisk/list.vue

@@ -3,6 +3,7 @@
         <el-table :data="dataList" style="width: 100%;"
         ref="multipleTableRef" 
         @selection-change="handleSelectionChange"
+        @row-click="selectData"
         row-key="DetailsId">
             <el-table-column type="selection" width="55"/>
             <el-table-column label="基本信息" show-overflow-tooltip min-width="400">
@@ -128,6 +129,9 @@
         emit('BatchMoveFile')
     }
 
+    const selectData = (row: any, column: any, event: Event) =>{
+        multipleTableRef.value!.toggleRowSelection(row)
+    }
     const handleSelectionChange = (val: []) =>{
         multipleSelection.value = val.map(x=>{return x})
         emit('MultipleChoice',multipleSelection.value)
@@ -168,7 +172,6 @@
     // 删除
     const deleteImg = (item:any) => {
         emit('deleteImg',item)
-
     }
 
     const toggleSelection = (rows:any,state:undefined) => {

src/utils/time.ts

@@ -11,7 +11,7 @@ var month:any = end.getMonth() + 1 // 0-11表示 1-12月
 var day = end.getDate()
 var dateObj = {start:'' as any,end:'' as any}
 dateObj.start = null
-dateObj.end = year + '-' + (month>9?month:'0'+month) + '-' + day
+dateObj.end = year + '-' + (month>9?month:'0'+month) + '-' + (day>9?day:'0'+day)
 var endMonthDay = new Date(year, month, 0).getDate() // 当前月的总天数
 
 // 获取近一周日期范围
@@ -33,17 +33,17 @@ export const getLastWeekDate = () => {
 // 获取近一个月日期范围
 export const getLastMonthDate = () => {
   if (month - 1 <= 0) { // 如果是1月，年数往前推一年<br>
-    dateObj.start = (year - 1) + '-' + 12 + '-' + day
+    dateObj.start = (year - 1) + '-' + 12 + '-' + (day>9?day:'0'+day)
   } else {
     const startMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate()
     if (startMonthDay < day) { // 1个月前所在月的总天数小于现在的天日期
       if (day < endMonthDay) { // 当前天日期小于当前月总天数
-        dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + (startMonthDay - (endMonthDay - day))
+        dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + ((startMonthDay - (endMonthDay - day))>9?startMonthDay - (endMonthDay - day):'0'+(startMonthDay - (endMonthDay - day)))
       } else {
-        dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + startMonthDay
+        dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + (startMonthDay>9?startMonthDay:'0'+startMonthDay)
       }
     } else {
-      dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + day
+      dateObj.start = year + '-' + ((month - 1)>9?(month - 1):'0'+(month - 1)) + '-' + (day>9?day:'0'+day)
     }
   }
   const newMonthDate = [dateObj.start, dateObj.end]