no message

src/components/CloudDisk/index.vue

+<template>
+    <div class="CloudDisk-form row">
+        <div class="CloudDisk-L">
+            <div class="row CloudDisk-L-inquire">
+                <el-input v-model="GName" 
+                placeholder="搜索分组名称" @keyup.enter="querySearchGroup">
+                </el-input>
+                <el-button type="primary" @click="addEditGroup">添加</el-button>
+            </div>
+            <div class="CloudDisk-L-Center fz14">
+                <div class="CloudDisk-L-Title row flex-between cusor-pointer"
+                v-for="(item,index) in GroupList" :key="index" @click="Search(item)"
+                :class="[GroupId==item.Id?'active':'']">
+                    <span class="black">{{item.GName}}</span>
+                    <div class="row">
+                        <template v-if="item.Id">
+                            <el-dropdown class="q-pl-lg" trigger="click">
+                                <div class="CloudDisk-L-Title-M row items-center flex-center">
+                                    <el-icon size="16" :color="GroupId==item.Id?'#3556F9':'#b1b7cf'"><MoreFilled /></el-icon>
+                                </div>
+                                <template #dropdown>
+                                    <el-dropdown-menu class="q-pa-md">
+                                        <el-dropdown-item @click="EditGroup(item)">
+                                            <el-button type="default" link :icon="Edit" size="small">重命名</el-button>
+                                        </el-dropdown-item>
+                                        <el-dropdown-item @click="deleteGroup(item)">
+                                            <el-button type="default" link :icon="Delete" size="small">删除分组</el-button>
+                                        </el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </template>
+                       <span v-if="item.RecordNum>0">{{item.RecordNum}}</span> 
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        <div class="CloudDisk-R grow">
+            <div class="row CloudDisk-R-inquire">
+                <el-input v-model="queryObj.FileName" 
+                placeholder="请输入图片名称搜索" @keyup.enter="Search">
+                </el-input>
+            </div>
+            <div ref="imgRef">
+                <div class="CloudDisk-R-Center row">
+                    <FileInput @change="files => insertImageElement(files)">
+                       <div class="CloudDisk-R-Box">
+                        <div class="CloudDisk-R-Plus column items-center cusor-pointer">
+                            <el-icon class="el-input__icon" color="#CECECE" size="30px" title="">
+                                <Plus/>
+                            </el-icon>
+                            <span>添加图片</span>
+                        </div>
+                        </div> 
+                    </FileInput>
+                    
+                    <template v-for="(item,index) in dataList">
+                        <div class="CloudDisk-R-Box">
+                            <div class="CloudDisk-R-Img">
+                                <el-image
+                                    style="width: 80px; height: 80px"
+                                    :src="item.FilePath"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="[item.FilePath]"
+                                    :initial-index="4"
+                                    fit="cover"
+                                    />
+                            </div>
+                            <span>{{item.FileName}}</span>
+                        </div>
+                    </template>
+                </div>
+            </div>
+           
+        </div>
+    </div>
+    <el-dialog v-model="dialogFormVisible" 
+    :title="dialogTitle" width="340" @close="close">
+        <div>
+            <el-input v-model="addEditMsg.GName" 
+            placeholder="请输入分组名称">
+            </el-input>
+            <el-input class="q-pt-lg" type="Number" v-model="addEditMsg.SortNum" 
+            placeholder="排序">
+            </el-input>
+        </div>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">取消</el-button>
+            <el-button type="primary" @click="setGroup" :loading="setLoading">
+              确认
+            </el-button>
+          </div>
+        </template>
+      </el-dialog>
+</template>
+<script lang="ts" setup>
+import { Plus, Top, Bottom, Delete, Edit  } from "@element-plus/icons-vue";
+import { reactive, ref, onMounted} from "vue";
+import CloudDiskService from '@/services/CloudDiskService'
+import { ElMessage } from "element-plus";
+import FileInput from '@/components/FileInput.vue'
+import { getImageDataURL } from '@/utils/image'
+import AliyunUpload from '@/utils/upload/aliyun'
+import { useUserStore } from "@/store";
+import { storeToRefs } from 'pinia'
+
+const { token, userInfo } = storeToRefs(useUserStore())
+
+const dialogFormVisible = ref(false)
+const dialogTitle = ref('')
+const queryObj = reactive({
+    pageIndex: 1,
+    pageSize: 10,
+    CloudGroupId: '',
+    FileName: '',
+})
+const GName= ref('')
+const addEditMsg = reactive({
+    Id: '',
+    GName: '',
+    SortNum: null,
+})
+const GroupId = ref(''|Number)
+const imgRef = ref<any>()
+const dataList = ref([] as any)
+const loading = ref(false)
+const GroupList = ref([] as any)
+
+const setLoading = ref(false)
+const deleteLoading = ref<any>(null)
+
+const insertImageElement = async (files: FileList) => {
+  let parms = {
+    isppt: '1',
+    uid: token.value,
+    gid: GroupId.value
+  }
+  let filePath="/Upload/User/";
+  let url  = await AliyunUpload.UploadAvatar(files[0], filePath, parms);
+  if(url) Search()
+}
+
+const addEditGroup = () =>{
+    dialogFormVisible.value = true
+    dialogTitle.value = '添加分组名称'
+}
+
+const setGroup = async () =>{
+    if(!addEditMsg.GName) return ElMessage.warning({
+          showClose: true,
+          message: `请输入分组名称`,
+      })
+    setLoading.value = true
+    let pageRes = await CloudDiskService.SetPPTCloudGroup(addEditMsg);
+    if (pageRes.data.resultCode == 1) {
+        dialogFormVisible.value = false
+        querySearchGroup()
+    }
+    setLoading.value = false
+}
+
+const close = () =>{
+    addEditMsg.Id = ''
+    addEditMsg.GName = ''
+    addEditMsg.SortNum = null
+}
+
+const EditGroup = (item:any) =>{
+    let data = JSON.parse(JSON.stringify(item))
+    addEditMsg.Id = data.Id
+    addEditMsg.GName = data.GName
+    addEditMsg.SortNum = data.SortNum
+    dialogFormVisible.value = true
+    dialogTitle.value ='编辑分组名称'
+}
+
+// 删除
+const deleteGroup = (item:any) => {
+  ElMessageBox.confirm(
+      `此操作将删除该分组，是否确定?`,
+      '提示',
+      {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      }
+  ).then(async () => {
+      try {
+          let queryMsg = {
+              TempId: item.TempId
+          }
+          deleteLoading.value = ElLoading.service({
+              lock:true,
+              text:'正在处理'
+          })
+          let dataRes = await CloudDiskService.RemovePPTCloudGroup(item.Id)
+          if (dataRes.data.resultCode == 1) {
+              querySearchGroup()
+          }
+          deleteLoading.value.close()
+          deleteLoading.value = null
+      } catch (error) {}
+  }).catch(() => {})
+  
+}
+
+
+const querySearchGroup = async () =>{
+    try {
+        let datasRes = await CloudDiskService.GetPPTCloudList(GName.value);
+        if (datasRes.data.resultCode == 1) {
+            GroupList.value = datasRes.data.data
+            let total = 0
+            for(let i=0;i<GroupList.value.lenght;i++){
+                total+=GroupList.value[i].RecordNum
+            }
+            GroupList.value.unshift({
+                Id: '',
+                GName: '全部',
+                RecordNum: total
+            })
+        }
+    } catch (error) {
+        
+    }
+}
+
+const Search = (item:any) =>{
+    if(item) GroupId.value = item.Id
+    queryObj.pageIndex = 1
+    querySearchHandler()
+}
+
+const querySearchHandler = async () =>{
+    loading.value = true
+    try {
+        if(queryObj.pageIndex == 1) dataList.value =[]
+        let pageRes = await CloudDiskService.GetPPTCloudInfoPage(queryObj);
+        if (pageRes.data.resultCode == 1) {
+            let arrList = function(list){
+                list.forEach(x=>{
+                    x.checked = false
+                })
+            }
+            arrList(pageRes.data.data.pageData)
+            dataList.value = dataList.value.concat(pageRes.data.data.pageData);
+            queryObj.pageCount = pageRes.data.data.pageCount;
+        }
+        setTimeout(()=>{
+            loading.value = false
+        },300)
+    } catch (error) {
+        loading.value = false
+    }
+}
+
+const scrollingHandler = () =>{
+    if(imgRef.value && !loading.value){
+        let maxHeight = imgRef.value.scrollHeight - imgRef.value.offsetHeight
+        let scrollTop = imgRef.value.scrollTop
+        if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
+            queryObj.pageIndex++
+            querySearchHandler()
+        }
+    }
+    
+}
+
+querySearchGroup()
+
+onMounted(()=>{
+    imgRef.value.addEventListener("scroll", scrollingHandler);
+})
+</script>
+<style lang="scss" scoped>
+.CloudDisk-L{
+    border-right: 1px solid #E9E9E9;
+    padding: 22px 22px 0 0;
+}
+.CloudDisk-L-inquire{
+    margin-bottom: 20px;
+}
+.CloudDisk-L-inquire .el-input{
+    width: 112px;
+    height: 36px;
+}
+.CloudDisk-L-inquire .el-button{
+    height: 36px;
+    margin-left: 20px;
+}
+.CloudDisk-L-Title:first-child{
+}
+.CloudDisk-L-Title{
+    padding: 11px 10px;
+    font-weight: 400;
+    font-family: PingFang SC;
+    border-radius: 8px;
+    margin-bottom: 3px;
+}
+.CloudDisk-L-Title span:first-child{
+    width: 108px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.CloudDisk-L-Title span:last-child{
+    color: #BBC7C3;
+}
+.CloudDisk-L-Title-M{
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    margin-right: 6px;
+}
+.CloudDisk-L-Title.active{
+    color: #3556F9 ;
+    background: #EEF3FF;
+}
+.CloudDisk-L-Title.active .CloudDisk-L-Title-M{
+    background: #BED0FB;
+}
+.CloudDisk-L-Title:hover{
+    background: #EEF3FF ;
+}
+.CloudDisk-L-Title:hover span:first-child{
+    color: #3556F9 ;
+}
+.CloudDisk-R{
+    padding: 22px 0 0 0;
+}
+.CloudDisk-R-inquire{
+    padding-bottom: 20px;
+    padding-left: 24px;
+}
+.CloudDisk-R-inquire .el-input{
+    width: 100%;
+    height: 36px;
+}
+.CloudDisk-R-Center{
+    flex-wrap: wrap;
+}
+.CloudDisk-R-Plus{
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    border: 2px dashed #000000;
+}
+.CloudDisk-R-Plus .el-icon{
+    margin-top: 13px;
+}
+.CloudDisk-R-Plus span{
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000000;
+}
+.CloudDisk-R-Box{
+    width: 80px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #000000;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: 26px;
+    margin-bottom: 24px;
+}
+.CloudDisk-R-Img{
+    width: 80px;
+    height: 80px;
+    margin-bottom: 9px;
+}
+.CloudDisk-R-Img .el-image{
+    border-radius: 8px;
+}
+.CloudDisk-L-Center,.CloudDisk-R-Center{
+    max-height: 400px;
+}
+</style>
\ No newline at end of file