云盘

src/components/CloudDisk/CloudDiskList.vue

@@ -13,7 +13,7 @@
               <IconSearch class="cusor-pointer" @click.stop="refreshHandler"></IconSearch>
             </template>
             <template #append>
-              <el-select v-model="queryObj.type" placeholder="Select" style="width: 100px"
+              <el-select v-model="queryObj.QPPTistCloudGroupIds" placeholder="Select" style="width: 100px"
               @change="refreshHandler">
                 <el-option label="稿定模板" value="1" />
                 <el-option label="我的空间" value="2" />
@@ -69,11 +69,7 @@
           <div class="CloudDisk-R grow">
             <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':'']"
-                @click="setDropdown(item,3)">{{item.Name}}</span>
-              </div>
+              <div class="fz14 PingFangSC colorBA"></div>
               <div>
                   <el-dropdown trigger="click" @visible-change="changeDrop(1)"
                   :class="[currentSearchType==1?'DiskRHActive':'']">
@@ -92,12 +88,12 @@
                           </template>
                         </el-input>
                         <div class="row flex-between items-center q-pt-md">
-                          <el-checkbox label="png" value="A" />
-                          <span>7</span>
+                          <el-checkbox v-model="queryObj.QFileType" label="jpg" @change="refreshHandler"/>
+                          <span></span>
                         </div>
                         <div class="row flex-between items-center q-pt-md">
-                          <el-checkbox label="xlsx" value="B" />
-                          <span>7</span>
+                          <el-checkbox v-model="queryObj.QFileType" label="png" @change="refreshHandler"/>
+                          <span></span>
                         </div>
                       </div>
                     </template>
@@ -113,12 +109,13 @@
                         <el-date-picker
                             class="CloudDisk-date"
                             style="width: 95px;"
-                            v-model="queryObj.date"
+                            v-model="dateArr"
                             type="daterange"
                             start-placeholder=""
                             end-placeholder=""
                             value-format="YY-MM-DD"
                             ref="dropdownDade"
+                            @change="getDate"
                           />
                       </div>
                     </div>
@@ -136,17 +133,23 @@
                       <el-dropdown-menu>
                         <template v-for="(item,index) in sortType">
                           <el-dropdown-item :command="item.ID" class="row flex-between"
-                          :divided="index==4?true:false"
                           @click="setDropdown(item,1)">
                             <span style="width: 80px;">{{item.Name}}</span>
                             <IconCheck class="q-pl-lg" v-if="item.check"></IconCheck>
                           </el-dropdown-item>
                         </template>
+                        <template v-for="(item,index) in sortTypeUD">
+                          <el-dropdown-item :command="item.ID" class="row flex-between"
+                          :divided="index==0?true:false"
+                          @click="setDropdown(item,2)">
+                            <span style="width: 80px;">{{item.Name}}</span>
+                            <IconCheck class="q-pl-lg" v-if="item.check"></IconCheck>
+                          </el-dropdown-item>
+                        </template>
                       </el-dropdown-menu>
                     </template>
                   </el-dropdown>
                   <el-dropdown trigger="click" @visible-change="changeDrop(4)"
-                  @command="OpenDropdown"
                   :class="[currentSearchType==4?'DiskRHActive':'']"
                   ref="dropdownLayout">
                     <el-button>
@@ -160,7 +163,7 @@
                       <el-dropdown-menu>
                         <template v-for="(item,index) in layoutType">
                           <el-dropdown-item :command="item.ID" class="row flex-between"
-                          @click="setDropdown(item,2)">
+                          @click="setDropdown(item,3)">
                             <div class="row items-center" style="width: 80px;">
                               <el-icon>
                                 <IconGridFour v-if="item.ID==1"/>
@@ -197,7 +200,7 @@
                   @MultipleChoice="MultipleChoice"
                   :Parent="datas"
                   ></waterfallFlowList>
-              <list v-show="queryObj.layout==3" :dataList="dataList"
+              <list v-if="queryObj.layout==3" :dataList="dataList"
                   @refreshHandler="refreshHandler"
                   @CopyTo="CopyTo"
                   @MoveFile="MoveFile"
@@ -205,6 +208,7 @@
                   @deleteImg="deleteImg"
                   @MultipleChoice="MultipleChoice"
                   :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" /> -->
@@ -224,7 +228,7 @@
                 @current-change="handleCurrentChange"
                 />
             </div> -->
-             <div class="CloudDisk-RBF animate__animated animate__fadeInUp" v-show="datas.ControlsShow">
+             <div v-if="queryObj.layout!=3&&datas.ControlsShow" class="CloudDisk-RBF animate__animated animate__fadeInUp">
               <div class="CloudDisk-RBFCenter microsoft">
                 <div class="row flex-center">
                   <div class="CloudDisk-RBFbj rounded row items-center">
@@ -240,7 +244,7 @@
                     <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>
+                    <!-- <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>
@@ -291,6 +295,7 @@
   import { noDataImg } from "@/utils/common";
   import { useRouter } from "vue-router";
   import AliyunUpload from '@/utils/upload/aliyun'
+  import { getLastMonthDate } from "@/utils/time";
 
   import cellList from './cellList'
   import waterfallFlowList from './waterfallFlowList'
@@ -305,19 +310,25 @@
     isPersonage: '' as any,
   })
   const RefreshLoading = ref(false)
+  let time = getLastMonthDate()
   const queryObj = reactive({
     pageIndex: 1,
-    pageSize: 72,
+    pageSize: 100,
     CloudGroupId: '',
     FileName: '',
     total: 0,
-    type: '1',//稿定模版
+    QPPTistCloudGroupIds: '1',//稿定模版 云盘分组数组[1,2] 待定
     imgType: 1,//模版 素材
-    Sorts: [],//排序
     layout: 1,//布局
-    date: '',//日期
-
+    QFileType: [],//格式
+    QStartTime: time[0],
+    QEndTime: time[1],
+    QOrderFiled: 1,//排序字段(1-创建时间，2-文件大小 3文件名称
+    QOrderBy: 2,//1-升序，2-倒序
+    QCreateBy: '',//上传人员
   })
+  
+  const dateArr = ref([time[0],time[1]] as any)
   if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
   const loading = ref(false as any)
   const dataList = ref([] as Array<any>);
@@ -353,17 +364,15 @@
     new Date(2000, 1, 1),
     new Date(2000, 2, 1),
   ]
-  const figureType = ref([
-    {Name: '模版',ID:1},
-    {Name: '素材',ID:2},
-  ])
+
   const sortType = ref([
-    {Name: '添加时间',ID:1,check:false},
-    {Name: '修改时间',ID:2,check:false},
-    {Name: '文件大小',ID:3,check:false},
-    {Name: '文件名称',ID:4,check:false},
-    {Name: '升序',ID:5,check:false},
-    {Name: '降序',ID:6,check:false},
+    {Name: '添加时间',ID:1,check:true},
+    {Name: '文件大小',ID:2,check:false},
+    {Name: '文件名称',ID:3,check:false},
+  ])
+  const sortTypeUD = ref([
+    {Name: '升序',ID:1,check:false},
+    {Name: '降序',ID:2,check:true},
   ])
   const layoutType =  ref([
     {Name: '宫格',ID:1,check:false},
@@ -373,7 +382,7 @@
 
   const datas = reactive({
     selectAll: false,
-    SelectedDatas: [] as any,
+    SelectedDatas: [] as Array,
     ControlsShow: true,// 批量操作显示
     indeterminate: false,// 未全选状态
   })
@@ -384,13 +393,24 @@
 
   const newDatasSelected = () =>{
     if(datas.SelectedDatas.length==0) {
+      for(let i=0;i<dataList.value.length;i++){
+        dataList.value[i].check = false
+      }
       datas.selectAll = false
       datas.indeterminate = false
     }else if(datas.SelectedDatas.length>0){
       if(dataList.value.length==datas.SelectedDatas.length){
+        for(let i=0;i<dataList.value.length;i++){
+          dataList.value[i].check = true
+        }
         datas.selectAll = true
         datas.indeterminate = false
       }else if(dataList.value.length>datas.SelectedDatas.length){
+        for(let i=0;i<dataList.value.length;i++){
+          let x = dataList.value[i]
+          let findObj = datas.SelectedDatas.find(y=> y==x.DetailsId)
+          if(findObj) dataList.value[i].check = true
+        }
         datas.indeterminate = true
       }
     }
@@ -403,10 +423,11 @@
 
   const setSelecAll = () => {
     if(datas.selectAll){
-      dataList.value.forEach(x=>{
-        x.check = true
-        datas.SelectedDatas.push(x.DetailsId)
-      })
+      datas.SelectedDatas = []
+      for(let i=0;i<dataList.value.length;i++){
+        dataList.value[i].check = true
+        datas.SelectedDatas.push(dataList.value[i].DetailsId)
+      }
       datas.indeterminate = false
     }else if(datas.indeterminate){
       datas.SelectedDatas.forEach(x=>{
@@ -415,43 +436,61 @@
         })
       })
     }else{
-      dataList.value.forEach(x=>{
-        x.check = false
-      })
+      for(let i=0;i<dataList.value.length;i++){
+        dataList.value[i].check = false
+      }
       datas.SelectedDatas = []
       datas.indeterminate = false
     }
-    
   }
 
+  const getDate = () => {
+    if(dateArr.value&&dateArr.value.length>0){
+      queryObj.QStartTime = dateArr.value[0]
+      queryObj.QEndTime = dateArr.value[1]
+    }else{
+      queryObj.QStartTime = ''
+      queryObj.QEndTime = ''
+    }
+    refreshHandler()
+  }
   const OpenDropdown = () =>{
     if(currentSearchType.value==3)dropdownSort.value.handleOpen()
-    if(currentSearchType.value==4)dropdownLayout.value.handleOpen()
   }
   const setDropdown = (item:any,type:Number) =>{
-    if(type==1){
-      item.check = !item.check
-      let newSortType = sortType.value.filter(x=>x.check)
-      queryObj.Sorts = newSortType.map(x=>{return x.ID})
+    if(type==1||type==2){
+      if(type==1){
+        item.check = !item.check
+        sortType.value.forEach(x=>{
+          if(x.ID!=item.ID) x.check = false
+        })
+        queryObj.QOrderFiled = item.ID
+      }else{
+        item.check = !item.check
+        sortTypeUD.value.forEach(x=>{
+          if(x.ID!=item.ID) x.check = false
+        })
+        queryObj.QOrderBy = item.ID
+      }
+      refreshHandler()
     }
-    if(type==2){
+    if(type==3){
+      loading.value = true
       layoutType.value.forEach(x=>{
         if(x.ID!=item.ID) x.check = false
       })
       item.check = true
       queryObj.layout = item.ID
-    }
-    if(type==3){
-      queryObj.imgType = item.ID
+      setTimeout(()=>{
+        loading.value = false
+      },3000)
     }
     
   }
   const changeDrop = (type:Number) =>{
     if(currentSearchType.value==type) currentSearchType.value = 0
     else currentSearchType.value = type
-    if(currentSearchType.value==2) {
-      dropdownDade.value.handleOpen()
-    }
+    if(currentSearchType.value==2) dropdownDade.value.handleOpen()
   }
   const getImg = (item:any,index:Number) => {
     currentImg.value = index
@@ -671,11 +710,13 @@ const SearchImg = () =>{
     if(row&&row.Id) {
       if(row.Id==queryObj.CloudGroupId) return
       queryObj.CloudGroupId = row.Id
-      datas.SelectedDatas = []
+      datas.selectAll = false
+      datas.indeterminate = false
     }
     RefreshLoading.value = true;
     queryObj.pageIndex = 1;
     srcList.value = []
+    
     querySearchHandler();
   };
 

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