云盘

src/assets/styles/common.css

@@ -570,6 +570,9 @@ page {
 .colorBA{
 	color: #BABABA;
 }
+.color959AA3{
+	color: #959AA3;
+}
 .text-right{
 	text-align: right;
 }

src/components/CloudDisk/CloudDiskList.vue

@@ -94,7 +94,8 @@
               </div>
           </div>
           <div class="CloudDisk-R grow">
-            <div class="CloudDisk-R-header row flex-between q-mb-xs">
+            <div class="CloudDisk-R-header row flex-between items-center "
+            :class="[queryObj.layout==3?'q-mb-lg':'q-mb-xs']">
               <div class="fz14 PingFangSC colorBA">
                 <span class="q-pr-lg figureTBOX cusor-pointer" v-for="(item,index) in figureType" 
                 :class="[queryObj.imgType==item.ID?'active':'']"
@@ -192,7 +193,7 @@
                               </el-icon>
                               <span>{{item.Name}}</span>
                             </div>
-                            <IconCheck class="q-pl-lg" v-if="queryObj.layout==item.ID"></IconCheck>
+                            <IconCheck class="q-pl-lg" v-if="item.check"></IconCheck>
                           </el-dropdown-item>
                         </template>
                       </el-dropdown-menu>
@@ -200,14 +201,16 @@
                   </el-dropdown>
               </div>
             </div>
-              <div ref="imgDiskRef" class="full-height" style="padding-top: 10px; overflow: auto;"
-              :style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'20px':'85px'}">
+            <div ref="imgDiskRef" class="full-height" style="padding-top: 10px;overflow:auto"
+            :style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'60px':'130px'}">
               <cellList v-show="queryObj.layout==1" :dataList="dataList" 
                   @refreshHandler="refreshHandler"
                   @CopyTo="CopyTo"
                   @MoveFile="MoveFile"
                   @getImg="getImg"
                   @deleteImg="deleteImg"
+                  @MultipleChoice="MultipleChoice"
+                  :Parent="datas"
                   ></cellList>
               <waterfallFlowList v-show="queryObj.layout==2" :dataList="dataList" 
                   @refreshHandler="refreshHandler"
@@ -215,6 +218,8 @@
                   @MoveFile="MoveFile"
                   @getImg="getImg"
                   @deleteImg="deleteImg"
+                  @MultipleChoice="MultipleChoice"
+                  :Parent="datas"
                   ></waterfallFlowList>
               <list v-show="queryObj.layout==3" :dataList="dataList"
                   @refreshHandler="refreshHandler"
@@ -222,6 +227,8 @@
                   @MoveFile="MoveFile"
                   @getImg="getImg"
                   @deleteImg="deleteImg"
+                  @MultipleChoice="MultipleChoice"
+                  :Parent="datas"
                   ></list>
                 <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg">
                   <!-- <img :src="noDataImg(2)" width="118" /> -->
@@ -241,17 +248,43 @@
                 @current-change="handleCurrentChange"
                 />
             </div> -->
+             <div class="CloudDisk-RBF animate__animated animate__fadeInUp" v-show="datas.ControlsShow">
+              <div class="CloudDisk-RBFCenter microsoft">
+                <div class="row flex-center">
+                  <div class="CloudDisk-RBFbj rounded row items-center">
+                    <div class="row items-center">
+                      <el-checkbox class="fz14" label="全选" v-model="datas.selectAll" 
+                      :indeterminate="datas.indeterminate" style="position: relative;top: 1px;"
+                      @change="setSelecAll"/>
+                      <span class="fz14 q-pl-md color959AA3"><span>已选择</span> <span class="q-pl-xs">{{datas.SelectedDatas.length}}</span></span>
+                    </div>
+                    <div class="q-px-lg">
+                      <div style="border-right: 1px solid #BABABA;height: 13px;">&nbsp;</div>
+                    </div>
+                    <el-button icon="CopyDocument" size="small" @click="CopyTo()">复制到</el-button>
+                    <el-button icon="Expand" size="small" @click="CopyTo()">移动到</el-button>
+                    <el-button icon="Delete" size="small" @click="CopyTo()">删除</el-button>
+                    <el-button icon="View" size="small" @click="CopyTo()">查看</el-button>
+                    <span class="close-btn cursor-pointer column items-center flex-center q-pl-md" @click="datas.ControlsShow=false">
+                      <IconClose :size="14"></IconClose>
+                    </span>
+                  </div>
                   
                 </div>
               </div>
              </div>
           </div>
+      </div>
+      </div> 
+    </div>
+    <!-- 编辑分组 -->
       <NewEditCloudDisk
       v-if="dialogFormVisible" 
       :dialogType="dialogType" 
       :addEditMsg="addEditMsg"
       @close="close"
       @success="close(),dialogFormVisible=false,querySearchGroup()"></NewEditCloudDisk>
+      <!-- 复制移动 -->
       <copyMove
       v-if="dialogCMVisible" 
       :dialogType="dialogType" 
@@ -260,7 +293,7 @@
       :GroupList="GroupAll"
       @close="close"
       @success="close(),dialogCMVisible=false,SearchGroup(),refreshHandler()"></copyMove>
-
+    <!-- 预览图 -->
     <el-image-viewer 
       @close="() => { isViewerShow = false }" 
       v-if="isViewerShow" 
@@ -305,7 +338,7 @@
     type: '1',//稿定模版
     imgType: 1,//模版 素材
     Sorts: [],//排序
-    layout: 3,//布局
+    layout: 1,//布局
     date: '',//日期
 
   })
@@ -357,11 +390,47 @@
     {Name: '降序',ID:6,check:false},
   ])
   const layoutType =  ref([
-    {Name: '宫格',ID:1},
-    {Name: '瀑布流',ID:2},
-    {Name: '列表',ID:3},
+    {Name: '宫格',ID:1,check:false},
+    {Name: '瀑布流',ID:2,check:false},
+    {Name: '列表',ID:3,check:false},
   ])
 
+  const datas = reactive({
+    selectAll: false,
+    SelectedDatas: [] as any,
+    ControlsShow: true,// 批量操作显示
+    indeterminate: false,// 未全选状态
+  })
+
+  layoutType.value.forEach(x=>{
+    if(x.ID==queryObj.layout) x.check = true
+  })
+
+  const MultipleChoice = (row:Array) =>{
+    datas.SelectedDatas = row
+    console.log(datas.SelectedDatas,'---000')
+    if(datas.SelectedDatas.length==0) {
+      datas.selectAll = false
+      datas.indeterminate = false
+    }else if(datas.SelectedDatas.length>0){
+      if(dataList.value.length==datas.SelectedDatas.length){
+        datas.selectAll = true
+        datas.indeterminate = false
+      }else if(dataList.value.length>datas.SelectedDatas.length){
+        datas.indeterminate = true
+      }
+    }
+  }
+
+  const setSelecAll = () => {
+    if(datas.selectAll){
+      datas.SelectedDatas = dataList.value.map(x=>{x.DetailsId})
+    }else{
+      datas.SelectedDatas = []
+    }
+    datas.indeterminate = false
+  }
+
   const OpenDropdown = () =>{
     if(currentSearchType.value==3)dropdownSort.value.handleOpen()
     if(currentSearchType.value==4)dropdownLayout.value.handleOpen()
@@ -373,6 +442,10 @@
       queryObj.Sorts = newSortType.map(x=>{return x.ID})
     }
     if(type==2){
+      layoutType.value.forEach(x=>{
+        if(x.ID!=item.ID) x.check = false
+      })
+      item.check = true
       queryObj.layout = item.ID
     }
     if(type==3){
@@ -619,7 +692,7 @@ const SearchImg = () =>{
       if (pageRes.data.resultCode==ApiResult.SUCCESS) {
         let arrList = function (list) {
           list.forEach((x) => {
-            x.show = false;
+            x.check = false;
           });
         };
         arrList(pageRes.data.data.pageData);
@@ -685,13 +758,16 @@ onMounted(()=>{
   .CloudDisk-R-header {
     padding: 0 0 0 20px;
   }
-  .CloudDisk-R::v-deep(.el-button){
+  .CloudDisk-R-header::v-deep(.el-button){
     height: auto;
     padding: 10px;
     background-color: rgba(23,23,23,0);
     border: rgba(23,23,23,0);
   }
-  .CloudDisk-R .DiskRHActive::v-deep(.el-button){
+  .CloudDisk-R {
+    overflow: hidden;
+  }
+  .CloudDisk-R-header .DiskRHActive::v-deep(.el-button){
     height: auto;
     padding: 10px;
     background-color: #E8E8E8;
@@ -713,7 +789,7 @@ onMounted(()=>{
     width: 112px;
     /* height: 36px; */
 }
-.CloudDisk-L-inquire .el-button{
+.CloudDisk-L-inquire::v-deep(.el-button){
     /* height: 36px; */
     margin-left: 20px;
 }
@@ -793,15 +869,28 @@ onMounted(()=>{
     font-size: 14px;
     // color: #CECECE;
 }
-
-
-
 .CloudDisk-L-Center{
     height: 95%;
     overflow-y: scroll;
 }
-
-
-
+.CloudDisk-RBF{
+  position: fixed;
+  bottom: 10px;
+  left: 515px;
+  right: 0;
+  z-index: 2;
+}
+.CloudDisk-RBFCenter{
+  margin: auto;
+}
+.CloudDisk-RBFbj{
+  background: #fff;
+  box-shadow: 0px 0px 13px 0px #eee;
+  border-color:#eee;
+  padding: 5px 15px;
+}
+.CloudDisk-RBFbj .close-btn:hover{
+  color: $themeColor;
+}
   </style>
   
\ No newline at end of file

src/components/CloudDisk/cellList.vue

 <template>
     <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;" 
+                class="fz14" label="" v-model="item.check" 
+                @change="handleSelectionChange(item)"/>
                 <el-dropdown trigger="click">
                     <div class="CloudDisk-R-Box cursor-pointer" :key="index">
                         <div class="CloudDisk-R-Img">
@@ -48,6 +52,8 @@
                       </el-dropdown-menu>
                     </template>
                 </el-dropdown>
+            </div>
+           
         </template>
     </div>
 </template>
@@ -60,6 +66,10 @@
             type: Array,
             default: [],
         },
+        Parent:{
+            type: Object,
+            default: {}, 
+        }
     })
     const emit = defineEmits<{
         (event: 'close'): void,
@@ -68,10 +78,24 @@
         (event: 'MoveFile'): void,
         (event: 'getImg'): void,
         (event: 'deleteImg'): void,
+        (event: 'MultipleChoice'): void,
     }>()
     const editorTarget = ref('')
     const nickNam = ref(''||  Number)
     const editLoading = ref(false)
+    const multipleSelection = ref([] as any)
+
+    const handleSelectionChange = (row: any) =>{
+        let filter = props.Parent.SelectedDatas.filter(x=>x==row.DetailsId)
+        if(filter.length==0&&row.check) {
+            multipleSelection.value.push(row.DetailsId)
+            emit('MultipleChoice',multipleSelection.value)
+        }else {
+            let newFilter = props.Parent.SelectedDatas.filter(x=>x!=row.DetailsId)
+            multipleSelection.value = newFilter
+            emit('MultipleChoice',multipleSelection.value)
+        }
+    }
     const setCloudNameHandler = async (target:any)=>{
         if(editLoading.value || nickNam.value=='' || !nickNam.value) return
         editLoading.value = true

src/components/CloudDisk/list.vue

 <template>
-    <div class="CloudDisk-R-Center row">
-        <el-table :data="dataList" style="width: 100%">
-            <el-table-column type="selection" width="55" />
-            <el-table-column label="Date" show-overflow-tooltip>
+    <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"/>
+            <el-table-column label="基本信息" show-overflow-tooltip min-width="200">
               <template #default="scope">
                 <div class="row items-center">
-                    <el-image class="rounded" :src="scope.row.FilePath" style="width: 85px; height: auto;"
-                        fit="cover"/>
-                    <span class="microsoft q-pl-md">{{scope.row.FileName}}</span>
-                    <!-- <div class="cloudDownName microsoft">
-                        <div class="col row items-center" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId"> 
+                        <el-image
+                        class="cursor-pointer"
+                        style="width: 50px; height: auto"
+                        :src="scope.row.FilePath"
+                        :zoom-rate="1.2"
+                        :max-scale="7"
+                        :min-scale="0.2"
+                        :preview-src-list="[]"
+                        :initial-index="4"
+                        fit="contain"
+                        @click="getImg(scope.row,scope.$index)"
+                        >
+                        <template #error>
+                            <el-image :src="errImg"></el-image>
+                        </template>
+                    </el-image>
+                    <div class="cloudDownName microsoft q-pl-md">
+                        <div class="cloudDownNameH col row items-center cursor-pointer" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId"> 
                             <span class="grow">{{scope.row.FileName}}</span>
                             <IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(scope.row)"></IconPencli>
                         </div>
@@ -19,22 +34,44 @@
                             :loading="editLoading">确认</el-button>
                             <el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
                         </div>
-                    </div> -->
+                    </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column property="ExtName" label="格式" width="100" />
-            <el-table-column label="尺寸" width="240">
-                <template #default="scope">{{ scope.row.WithHeight }} px</template>
+            <el-table-column property="ExtName" label="格式" width="" />
+            <el-table-column label="尺寸" min-width="150">
+                <template #default="scope">
+                    <template v-if="scope.row.WithHeight">{{ scope.row.WithHeight }} px</template>
+                </template>
             </el-table-column>
-            <el-table-column label="大小" width="240">
+            <el-table-column label="大小" min-width="100">
                 <template #default="scope">{{ scope.row.FileSize }} kb</template>
             </el-table-column>
+            <el-table-column align="center" min-width="80">
+                <template #header>
+                    <el-icon>
+                        <IconSetting></IconSetting>
+                    </el-icon>
+                </template>
+                <template #default="scope">
+                    <el-dropdown trigger="click" >
+                        <el-icon class="cursor-pointer" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
+                        <template #dropdown>
+                            <el-dropdown-menu class="q-pa-md microsoft">
+                                <el-dropdown-item icon="CopyDocument" @click="CopyTo(scope.row)">复制到</el-dropdown-item>
+                                <el-dropdown-item icon="Expand" @click="MoveFile(scope.row)">移动到</el-dropdown-item>
+                                <el-dropdown-item icon="Delete" @click="deleteImg(scope.row)">删除</el-dropdown-item>
+                                <el-dropdown-item icon="View" @click="getImg(scope.row,scope.$index)">查看</el-dropdown-item>
+                              </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </template>
+            </el-table-column>
         </el-table>
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from "vue";
+    import { ref, reactive } from "vue";
     import CloudDiskService from "@/services/CloudDiskService";
     import { ApiResult } from "@/configs/axios";
     const props = defineProps({
@@ -42,6 +79,10 @@
             type: Array,
             default: [],
         },
+        Parent:{
+            type: Object,
+            default: {}, 
+        }
     })
     const emit = defineEmits<{
         (event: 'close'): void,
@@ -50,10 +91,17 @@
         (event: 'MoveFile'): void,
         (event: 'getImg'): void,
         (event: 'deleteImg'): void,
+        (event: 'MultipleChoice'): void,
     }>()
     const editorTarget = ref('')
     const nickNam = ref(''||  Number)
     const editLoading = ref(false)
+    const errImg = ref(require('@/assets/img/noImg.png') as any)
+    const multipleSelection = ref([] as any)
+
+    const handleSelectionChange = (val: []) =>{
+        multipleSelection.value = val.map(x=>{return x.DetailsId})
+    }
     const setCloudNameHandler = async (target:any)=>{
         if(editLoading.value || nickNam.value=='' || !nickNam.value) return
         editLoading.value = true
@@ -63,6 +111,8 @@
         }
         let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
         if (dataRes.data.resultCode==ApiResult.SUCCESS) {
+            editorTarget.value = ''
+            nickNam.value = ''
             emit('refreshHandler')
         }
         editLoading.value = false
@@ -92,77 +142,25 @@
     }
 </script>
 <style lang="scss" scoped>
-.CloudDisk-R-Center{
-    padding-left: 24px;
-}
-.CloudDisk-R-Box{
-    width: 87px;
-    margin-left: 24px;
-    margin-bottom: 24px;
-    position: relative;
-}
-.CloudDisk-R-Box.active .CloudDisk-R-Img{
-    width: 85px;
-    height: 85px;
-    background: #8790F3;
-    box-shadow: 0px 0px 13px 0px #0D3EBC;
-    border-radius: 8px;
-    border-color:#3556F9;
-}
-.CloudDisk-R-Box .close-btn{
-    position: absolute;
-    top: -10px;
-    right: 0px;
-    width: 20px;
-    height: 20px;
-    line-height: 12px;
-    background: #fff;
-    border:1px solid #AFAFAF;
-    text-align: center;
-    color:#AFAFAF;
-    border-radius: 50%;
-    z-index: 3;
+.editor-pencli{
     display: none;
 }
-.CloudDisk-R-Box.active2:hover .close-btn{
+.cloudDownNameH:hover .editor-pencli{
     display: block;
 }
-.CloudDisk-R-Img{
-    width: 85px;
-    height: 85px;
-    margin-bottom: 9px;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0px 0px 13px 0px #eee;
-    border-radius: 8px;
-    border-color:#eee;
-}
-
-.CloudDisk-R-Img .el-image{
-    width: 85px;
-}
-.title{
-    width: 85px;
-    line-height: 17px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-family: PingFang SC;
-    font-weight: 400;
-    font-size: 14px;
-    color: #000000;
+.CloudDisk-R-Center::v-deep(.el-table__body){
+    margin-top: 8px;
 }
-.cloudDownName{
-  min-width: 200px;
-  padding: 10px 20px 15px 20px;
-  font-size: 14px;
-  color: #000;
+.CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
+    background-color: #f5f7fa;
 }
-.cloudDownText{
-  padding: 0 20px 10px 20px;
-  font-size: 14px;
+.CloudDisk-R-Center::v-deep(.el-table__header-wrapper){
+    position:fixed;
+    top: 180px;
+    z-index: 2
 }
-.cloudDownTextLin{
-  border-bottom: 1px solid #F0F0F0;
+.CloudDisk-R-Center{
+    padding-left: 24px;
+    padding-bottom: 20px;
 }
 </style>
\ No newline at end of file

src/components/CloudDisk/waterfallFlowList.vue

@@ -84,6 +84,7 @@
         (event: 'MoveFile'): void,
         (event: 'getImg'): void,
         (event: 'deleteImg'): void,
+        (event: 'MultipleChoice'): void,
     }>()
     const editorTarget = ref('')
     const nickNam = ref(''||  Number)
@@ -92,6 +93,12 @@
         logo,
         error
     })
+    const multipleSelection = ref([] as any)
+
+    const handleSelectionChange = (row: any) =>{
+        multipleSelection.value.push(row.DetailsId)
+        emit('MultipleChoice',multipleSelection.value)
+    }
     const setCloudNameHandler = async (target:any)=>{
         if(editLoading.value || nickNam.value=='' || !nickNam.value) return
         editLoading.value = true