no message

src/components/CloudDisk/CloudDiskList.vue

@@ -21,7 +21,7 @@
       <div class="row items-center flex-between">
         <div class="text-dark text-weight-bolder">云盘空间</div>
         <div class="row flex-center CloudDisk-R-inquire">
-          <el-input style="max-width:600px" v-model="queryObj.FileName" placeholder="请输入图片名称搜索" class="q-pr-33" clearable
+          <!-- <el-input style="max-width:600px" v-model="queryObj.FileName" placeholder="请输入图片名称搜索" class="q-pr-33" clearable
           @keyup.enter="refreshHandler" @input="SearchImg">
             <template #append>
               <div @click.stop="refreshHandler">
@@ -30,6 +30,22 @@
                 </div>
               </div>
             </template>
+          </el-input> -->
+          <el-input
+          style="max-width:600px" v-model="queryObj.FileName" placeholder="请输入图片名称搜索" 
+          class="q-pr-33 input-with-select" clearable
+          @keyup.enter="refreshHandler" @input="SearchImg"
+          >
+            <template #prefix>
+              <IconSearch class="cusor-pointer" @click.stop="refreshHandler"></IconSearch>
+            </template>
+            <template #append>
+              <el-select v-model="queryObj.type" placeholder="Select" style="width: 100px"
+              @change="refreshHandler">
+                <el-option label="稿定模板" value="1" />
+                <el-option label="我的空间" value="2" />
+              </el-select>
+            </template>
           </el-input>
         </div>
         <FileInput @change="files => insertImageElement(files)">
@@ -78,7 +94,71 @@
               </div>
           </div>
           <div class="CloudDisk-R grow">
-              
+            <div class="CloudDisk-R-header row flex-between q-mb-md">
+              <div class="fz14 PingFangSC colorBA">
+                <span>模版</span>
+                <span class="q-pl-md">素材</span>
+              </div>
+              <div>
+                  <el-dropdown trigger="click" @visible-change="changeDrop(1)"
+                  :class="[currentSearchType==1?'DiskRHActive':'']">
+                    <el-button color="#EFEFEF">
+                        <span>格式</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <div class="q-py-lg q-px-lg">
+                        <el-input
+                        style="max-width:200px" v-model="queryObj.FileName" placeholder="搜索" 
+                        class="input-with-select" clearable
+                        @keyup.enter="refreshHandler" @input="SearchImg"
+                        >
+                          <template #prefix>
+                            <IconSearch class="cusor-pointer" @click.stop="refreshHandler"></IconSearch>
+                          </template>
+                        </el-input>
+                        <div class="row flex-between items-center q-pt-md">
+                          <el-checkbox label="png" value="A" />
+                          <span>7</span>
+                        </div>
+                        <div class="row flex-between items-center q-pt-md">
+                          <el-checkbox label="xlsx" value="B" />
+                          <span>7</span>
+                        </div>
+                      </div>
+                    </template>
+                  </el-dropdown>
+                  <el-dropdown trigger="click" @visible-change="changeDrop(2)"
+                  :class="[currentSearchType==2?'DiskRHActive':'']">
+                    <el-button color="#EFEFEF">
+                        <span>添加时间</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      
+                    </template>
+                  </el-dropdown>
+                  <el-dropdown trigger="click" @visible-change="changeDrop(3)"
+                  :class="[currentSearchType==3?'DiskRHActive':'']"
+                  ref="dropdownSort">
+                    <el-button>
+                      <el-icon color="#BABABA">
+                        <IconSortOne></IconSortOne>
+                      </el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <template v-for="(item,index) in sortType">
+                          <el-dropdown-item :command="item.ID" class="row flex-between"
+                          :divided="index==5?true:false"
+                          @click.stop="setSort(item,index)">
+                            <span>{{item.Name}}</span>
+                            <IconCheck class="q-pl-lg" v-if="item.check"></IconCheck>
+                          </el-dropdown-item>
+                        </template>
+                      </el-dropdown-menu>
+                    </template>
+                  </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 class="CloudDisk-R-Center row">
@@ -190,7 +270,7 @@
       
   </template>
   <script setup lang="ts">
-  import { ref, reactive, watch, inject, onMounted, PropType, nextTick } from "vue";
+  import { ref, reactive, watch, inject, onMounted, PropType, nextTick, onBeforeUnmount } from "vue";
   import { ElMessage,ElImage } from "element-plus";
   import { ArrowLeft,CopyDocument } from "@element-plus/icons-vue";
   import CloudDiskService from "@/services/CloudDiskService";
@@ -218,7 +298,9 @@
     pageSize: 72,
     CloudGroupId: '',
     FileName: '',
-    total: 0
+    total: 0,
+    type: '1',//稿定模版
+    Sorts: []
   })
   if(props.isPersonage) queryObj.CloudGroupId = parmas.value.id
   const loading = ref(false as any)
@@ -246,6 +328,30 @@
   const srcList = ref([] as Array<any>)
   const isViewerShow = ref(false);
 
+  const currentSearchType = ref(0)
+
+  const dropdownSort = ref()
+  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},
+  ])
+
+  const setSort = (item:any,index:Number) =>{
+    
+    item.check = !item.check
+    let newSortType = sortType.value.filter(x=>x.check)
+    queryObj.Sorts = newSortType.map(x=>{return x.ID})
+    console.log(queryObj.Sorts,dropdownSort.value)
+    // if(dropdownSort.value)dropdownSort.value.hideOnClick = true
+  }
+  const changeDrop = (type:Number) =>{
+    if(currentSearchType.value==type) currentSearchType.value = 0
+    else currentSearchType.value = type
+  }
   const getImg = (item:any,index:Number) => {
     currentImg.value = index
     isViewerShow.value = true
@@ -511,10 +617,33 @@ const SearchImg = () =>{
 querySearchGroup()
 querySearchHandler()
 onMounted(()=>{
+  document.addEventListener('click', (e) => {
+      if (currentSearchType.value==3) {
+          
+      }
+  });
   imgDiskRef.value.addEventListener("scroll", scrollingHandler);
 })
+  onBeforeUnmount(() => {
+      document.removeEventListener('click', () => {});
+  })
   </script>
   <style lang="scss" scoped>
+  .CloudDisk-R-header {
+    padding: 0 0 0 20px;
+  }
+  .CloudDisk-R::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){
+    height: auto;
+    padding: 10px;
+    background-color: #E8E8E8;
+    border: #E8E8E8;
+  }
     .CloudDisk-R-inquire::v-deep(.el-button){
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;