云盘

src/components/CloudDisk/cellList.vue

@@ -2,7 +2,7 @@
     <div class="CloudDisk-R-Center row">
         <template v-for="(item,index) in dataList">
             <div style="position: relative;">
-                <el-checkbox style="position: absolute;left: 30px;top: -3px;" 
+                <el-checkbox style="position: absolute;left: 30px;top: 0px;" 
                 class="fz14" label="" v-model="item.check" 
                 @change="handleSelectionChange(item)"/>
                 <el-dropdown trigger="click">
@@ -58,7 +58,7 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from "vue";
+    import { ref, watch } from "vue";
     import CloudDiskService from "@/services/CloudDiskService";
     import { ApiResult } from "@/configs/axios";
     const props = defineProps({
@@ -132,20 +132,26 @@
         emit('deleteImg',item)
 
     }
+    watch(()=>props,(n,o)=>{
+        if(n.Parent.SelectedDatas.length==0) multipleSelection.value = []
+    },{
+        deep: true,
+        immediate:true
+    })
 </script>
 <style lang="scss" scoped>
 .CloudDisk-R-Center{
     flex-wrap: wrap;
 }
 .CloudDisk-R-Box{
-    width: 87px;
+    width: 247px;
     margin-left: 24px;
     margin-bottom: 24px;
     position: relative;
 }
 .CloudDisk-R-Box.active .CloudDisk-R-Img{
-    width: 85px;
-    height: 85px;
+    width: 247px;
+    height: 247px;
     background: #8790F3;
     box-shadow: 0px 0px 13px 0px #0D3EBC;
     border-radius: 8px;
@@ -170,8 +176,8 @@
     display: block;
 }
 .CloudDisk-R-Img{
-    width: 85px;
-    height: 85px;
+    width: 247px;
+    height: 247px;
     margin-bottom: 9px;
     border-radius: 8px;
     overflow: hidden;
@@ -181,10 +187,10 @@
 }
 
 .CloudDisk-R-Img .el-image{
-    width: 85px;
+    width: 247px;
 }
 .title{
-    width: 85px;
+    width: 247px;
     line-height: 17px;
     overflow: hidden;
     white-space: nowrap;

src/components/CloudDisk/list.vue

 <template>
     <div class="CloudDisk-R-Center row" v-if="dataList.length>0">
         <el-table :data="dataList" style="width: 100%;"
-        ref="multipleTableRef">
-            <el-table-column type="selection" width="55" 
-            @selection-change="handleSelectionChange"/>
+        ref="multipleTableRef" 
+        @selection-change="handleSelectionChange"
+        row-key="DetailsId">
+            <el-table-column type="selection" width="55"/>
             <el-table-column label="基本信息" show-overflow-tooltip min-width="200">
               <template #default="scope">
                 <div class="row items-center">
@@ -49,9 +50,17 @@
             </el-table-column>
             <el-table-column align="center" min-width="80">
                 <template #header>
-                    <el-icon>
-                        <IconSetting></IconSetting>
-                    </el-icon>
+                    <el-dropdown trigger="click" >
+                        <el-icon class="cursor-pointer" size="16" color="#b1b7cf"><IconSetting /></el-icon>
+                        <template #dropdown>
+                            <el-dropdown-menu class="q-pa-md microsoft">
+                                <el-dropdown-item icon="CopyDocument" @click="CopyTo()">复制到</el-dropdown-item>
+                                <el-dropdown-item icon="Expand" @click="MoveFile()">移动到</el-dropdown-item>
+                                <el-dropdown-item icon="Delete" @click="deleteImg()">删除</el-dropdown-item>
+                              </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    
                 </template>
                 <template #default="scope">
                     <el-dropdown trigger="click" >
@@ -71,7 +80,8 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, reactive } from "vue";
+    import { ref, reactive, watch } from "vue";
+    import { ElTable } from 'element-plus'
     import CloudDiskService from "@/services/CloudDiskService";
     import { ApiResult } from "@/configs/axios";
     const props = defineProps({
@@ -82,6 +92,10 @@
         Parent:{
             type: Object,
             default: {}, 
+        },
+        params:{
+            type: Object,
+            default: {}, 
         }
     })
     const emit = defineEmits<{
@@ -97,10 +111,12 @@
     const nickNam = ref(''||  Number)
     const editLoading = ref(false)
     const errImg = ref(require('@/assets/img/noImg.png') as any)
+    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
     const multipleSelection = ref([] as any)
 
     const handleSelectionChange = (val: []) =>{
         multipleSelection.value = val.map(x=>{return x.DetailsId})
+        emit('MultipleChoice',multipleSelection.value)
     }
     const setCloudNameHandler = async (target:any)=>{
         if(editLoading.value || nickNam.value=='' || !nickNam.value) return
@@ -140,6 +156,49 @@
         emit('deleteImg',item)
 
     }
+
+    const toggleSelection = (rows:any,state:undefined) => {
+        if (rows) {
+            rows.forEach((row) => {
+                multipleTableRef.value!.toggleRowSelection(row, state)
+            })
+        } else {
+            if(state) multipleTableRef.value.toggleAllSelection(state)
+            else multipleTableRef.value!.clearSelection()
+        }
+    }
+
+    watch(()=>props,(n,o)=>{
+        if(props.Parent.SelectedDatas.length>0) {
+            setTimeout(()=>{
+                props.Parent.SelectedDatas.forEach(x => {
+                    let filterS = props.dataList.filter((y,index)=>{
+                        y.index=index
+                        return x==y.DetailsId
+                    })
+                    let index = filterS&&filterS[0]&&filterS[0].index
+                    if(index>=0) {
+                        toggleSelection([props.dataList[index]],true)
+                    }
+                });
+            },3000)
+        }
+        if(props.dataList.length>0&&props.Parent.selectAll&&!props.Parent.indeterminate){
+            setTimeout(()=>{
+                for(let i=0;i<props.dataList.length;i++){
+                    let x = props.dataList[i]
+                    toggleSelection([x], true)
+                }
+            },3000)
+        }
+        
+    },{
+        deep: true,
+        immediate:true
+    })
+
+    
+    
 </script>
 <style lang="scss" scoped>
 .editor-pencli{
@@ -149,7 +208,7 @@
     display: block;
 }
 .CloudDisk-R-Center::v-deep(.el-table__body){
-    margin-top: 8px;
+    margin-top: 19px;
 }
 .CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
     background-color: #f5f7fa;

src/components/CloudDisk/waterfallFlowList.vue

@@ -2,9 +2,9 @@
     <div class="CloudDisk-R-Center">
         <Waterfall :list="dataList" 
             :breakpoints="{
-            1400:{rowPerView:12},
-            800:{rowPerView:12},
-            500:{rowPerView:12}
+            1400:{rowPerView:5},
+            800:{rowPerView:5},
+            500:{rowPerView:5}
             }" 
             :hasAroundGutter="false" :align="'left'"
             rowKey="DetailsId" :gutter="24"
@@ -12,7 +12,7 @@
         >
             <template #item="{ item, url, index }">
                 <div style="position: relative;">
-                    <el-checkbox style="position: absolute;left: 30px;top: -3px;" 
+                    <el-checkbox style="position: absolute;left: 10px;top: 0px;" 
                     class="fz14" label="" v-model="item.check" 
                     @change="handleSelectionChange(item)"/>
                     <el-dropdown trigger="click">
@@ -69,7 +69,7 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, reactive } from "vue";
+    import { ref, reactive, watch } from "vue";
     import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
     import 'vue-waterfall-plugin-next/dist/style.css'
     import CloudDiskService from "@/services/CloudDiskService";
@@ -81,6 +81,10 @@
             type: Array,
             default: [],
         },
+        Parent:{
+            type: Object,
+            default: {}, 
+        }
     })
     const emit = defineEmits<{
         (event: 'close'): void,
@@ -105,7 +109,7 @@
         if(filter.length==0&&row.check) {
             multipleSelection.value.push(row.DetailsId)
             emit('MultipleChoice',multipleSelection.value)
-        }else {
+        }else if(!row.check){
             let newFilter = props.Parent.SelectedDatas.filter(x=>x!=row.DetailsId)
             multipleSelection.value = newFilter
             emit('MultipleChoice',multipleSelection.value)
@@ -147,6 +151,15 @@
         emit('deleteImg',item)
 
     }
+    
+    watch(()=>props,(n,o)=>{
+        if(n.Parent.SelectedDatas.length==0) {
+            multipleSelection.value = []
+        }
+    },{
+        deep: true,
+        immediate:true
+    })
 </script>
 <style lang="scss" scoped>
 .CloudDisk-R-Center{
@@ -154,11 +167,11 @@
     padding-left: 24px;
 }
 .CloudDisk-R-Box{
-    width: 87px;
+    width: 247px;
     position: relative;
 }
 .CloudDisk-R-Box.active .CloudDisk-R-Img{
-    width: 85px;
+    width: 247px;
     background: #8790F3;
     box-shadow: 0px 0px 13px 0px #0D3EBC;
     border-radius: 8px;
@@ -183,7 +196,8 @@
     display: block;
 }
 .CloudDisk-R-Img{
-    width: 85px;
+    width: 247px;
+    min-height: 40px;
     height: auto;
     margin-bottom: 9px;
     border-radius: 8px;
@@ -192,11 +206,11 @@
 }
 
 .CloudDisk-R-Img .el-image{
-    width: 85px;
+    width: 247px;
     border-radius: 8px;
 }
 .title{
-    width: 85px;
+    width: 247px;
     line-height: 17px;
     overflow: hidden;
     white-space: nowrap;
@@ -221,6 +235,6 @@
 }
 ::v-deep(.lazy__img[lazy=error]){
     padding: 0;
-    width: 85px !important;
+    width: 247px !important;
 }
 </style>
\ No newline at end of file