右键店家

src/views/myfile/MyFile.vue

@@ -127,93 +127,90 @@
                     </div>
                 </div>
                 <!-- 展示文件夹盒子 -->
-                    <!-- 文件夹 -->
-                    <div class="detailBox">
-                        <el-collapse v-model="folder" accordion class="collapseSell">
-                            <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
-                                <el-table :data="folderList" style="width: 100%" @selection-change="handleSelectionChange1"
-                                    :single-select="true" @row-click="folderClick" @row-contextmenu="folderRClick">
-                                    <el-table-column type="selection" width="55" />
-                                    <el-table-column label="名称" width="180">
-                                        <template #default="scope">
-                                            <span>
-                                                <img src="../../assets/images/fileBox.png" style="width: 20px;height: 24px;"
-                                                    alt="">
-                                                {{ scope.row.dirName }}
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column prop="createTime" label="时间" width="180" />
-                                    <el-table-column prop="dirType" label="类型">
-                                        <template #default="scope">
-                                            <span>{{ scope.row.dirType === "1" ? "文件夹" : "未知类型" }}</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="大小">
-                                        <template #default="scope">
-                                            <span>
-                                                10KB
-                                            </span>
-                                        </template>
-                                    </el-table-column>
+                <!-- 文件夹 -->
+                <div class="detailBox" @click="mouseClick">
+                    <el-collapse v-model="folder" accordion class="collapseSell">
+                        <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
+                            <el-table :data="folderList" style="width: 100%" @selection-change="handleSelectionChange1"
+                                :single-select="true" @row-click="folderClick" @row-contextmenu="folderRClick">
+                                <el-table-column type="selection" width="55" />
+                                <el-table-column label="名称" width="180">
+                                    <template #default="scope">
+                                        <span>
+                                            <img src="../../assets/images/fileBox.png" style="width: 20px;height: 24px;"
+                                                alt="">
+                                            {{ scope.row.dirName }}
+                                        </span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="createTime" label="时间" width="180" />
+                                <el-table-column prop="dirType" label="类型">
+                                    <template #default="scope">
+                                        <span>{{ scope.row.dirType === "1" ? "文件夹" : "未知类型" }}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="大小">
+                                    <template #default="scope">
+                                        <span>
+                                            10KB
+                                        </span>
+                                    </template>
+                                </el-table-column>
 
-                                </el-table>
-                            </el-collapse-item>
-                        </el-collapse>
-                          <!-- 右键唤出的菜单 -->
-                        <div
-                            class="right_menu"
-                            v-if="folderVisible"
-                            :style="{ left: folderleft + 'px', top: foldertop + 'px' }"
-                        >
-                            <div class="menu_item" @click="restName(null,null)">
+                            </el-table>
+                        </el-collapse-item>
+                    </el-collapse>
+                    <!-- 右键唤出的菜单 -->
+                    <div class="right_menu" v-if="folderVisible"
+                        :style="{ left: folderleft + 'px', top: foldertop + 'px' }">
+                        <div class="menu_item" @click="restName(null, null)">
                             <!-- <img src="@/assets/images/textbox.png" alt="" /> -->
                             <span>重命名</span>
-                            </div>
-                            <div class="menu_item" @click="folderClick(null,null)">
+                        </div>
+                        <div class="menu_item" @click="folderClick(null, null)">
                             <!-- <img src="@/assets/images/trash.png" alt="" /> -->
                             <span>打开</span>
-                            </div>
                         </div>
                     </div>
-                    <!-- 文件 -->
-                    <div class="fileTable">
-                        <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
-                            <el-collapse-item title="文件" name="2" class="">
-                                <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick"
-                                    @selection-change="handleSelectionChange">
-                                    <el-table-column type="selection" width="55" />
-                                    <el-table-column label="名称" width="200">
-                                        <template #default="scope">
-                                            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                                <el-icon v-if="collectImg">
-                                                    <Star />
-                                                </el-icon>
-                                                <img v-else src="../../assets/images/yellowstar.png" alt="">
-                                                <img :src="getImage(scope.row.fileType)" alt="">
-                                                {{ scope.row.fileName }}
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column prop="createTime" label="时间" width="180" />
-                                    <el-table-column prop="fileType" label="类型" />
-                                    <el-table-column label="大小">
-                                        <template #default="scope">
-                                            <span>
-                                                {{ scope.row.fileSize }}KB
-                                            </span>
-                                        </template>
-                                    </el-table-column>
+                </div>
+                <!-- 文件 -->
+                <div class="fileTable">
+                    <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
+                        <el-collapse-item title="文件" name="2" class="">
+                            <el-table :data="fileList" style="width: 100%" @row-contextmenu="handleRowClick"
+                                @selection-change="handleSelectionChange">
+                                <el-table-column type="selection" width="55" />
+                                <el-table-column label="名称" width="200">
+                                    <template #default="scope">
+                                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                            <el-icon v-if="collectImg">
+                                                <Star />
+                                            </el-icon>
+                                            <img v-else src="../../assets/images/yellowstar.png" alt="">
+                                            <img :src="getImage(scope.row.fileType)" alt="">
+                                            {{ scope.row.fileName }}
+                                        </span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="createTime" label="时间" width="180" />
+                                <el-table-column prop="fileType" label="类型" />
+                                <el-table-column label="大小">
+                                    <template #default="scope">
+                                        <span>
+                                            {{ scope.row.fileSize }}KB
+                                        </span>
+                                    </template>
+                                </el-table-column>
 
-                                </el-table>
-                                <div class="setCli" v-if="cliCC">
-                                    <template v-for="(item, index) in filterMouseCli()">
-                                        <p @click="chooseSet(item, index)" class="chooseSet">
-                                            <img :src="item.img" alt="">
-                                            {{ item.name }}
-                                            <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
-                                                style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
-                                        </p>
+                            </el-table>
+                            <div class="setCli" v-if="cliCC">
+                                <template v-for="(item, index) in filterMouseCli()">
+                                    <p @click="chooseSet(item, index)" class="chooseSet">
+                                        <img :src="item.img" alt="">
+                                        {{ item.name }}
+                                        <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
+                                            style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
+                                    </p>
                                 </template>
                             </div>
                             <div class="setCli1" v-if="anyP">
@@ -724,7 +721,9 @@ export default {
             this.menuList = this.menuList.filter(item => item.name !== row.name)
         }
         // 文件名表格每一行点击事件
-        function handleRowClick(row) {
+        function handleRowClick(row, col, e) {
+            e.preventDefault();
+            e.stopPropagation();
             copyRow.value = row
             clickRowId.value = row.docId
             copyDirId.value = row.dirId
@@ -1030,7 +1029,7 @@ export default {
             // 上一级dirId就是下一级的parentId
             // 判断是点击打开还是右键菜单打开
             row = row ? row : thisFolder.value
-            console.log('row',row);
+            console.log('row', row);
             newDirId.value = row.dirId
             newSpaceId.value = row.spaceId
             documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
@@ -1161,20 +1160,20 @@ export default {
         }
 
         //对mouseCli数组进行筛选，实现菜单的区分显示
-        const filterMouseCli = ()=>{
-            const typeArr = ['.png','.jpg','.jpeg','.JPG','.mp3','.mp4','.pdf']
-            const imgTypeArr = ['.png','.jpg','.jpeg','.JPG']
+        const filterMouseCli = () => {
+            const typeArr = ['.png', '.jpg', '.jpeg', '.JPG', '.mp3', '.mp4', '.pdf']
+            const imgTypeArr = ['.png', '.jpg', '.jpeg', '.JPG']
             let arr = []
             if (!typeArr.includes(copyFileType.value)) {
                 arr = mouseCli.value.filter(item => item.name !== "预览")
             } else {
                 arr = mouseCli.value.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
             }
-            if(!imgTypeArr.includes(copyFileType.value)){
-                arr = arr.filter(item=>item.name !== "文字识别")
+            if (!imgTypeArr.includes(copyFileType.value)) {
+                arr = arr.filter(item => item.name !== "文字识别")
             }
             return arr
-        }  
+        }
         function mouseClick() {
             if (cliCC.value) {
                 cliCC.value = false
@@ -1182,27 +1181,27 @@ export default {
             if (anyP) {
                 anyP.value = false
             }
-        } 
+        }
         // 文件夹右键事件
-        const folderRClick = (row,col,e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        let thisRow = toRaw(row)
-        // console.log("row", thisRow);
-        // console.log("col", toRaw(col));
-        // console.log("e", e);
-        // console.log("item", toRaw(item));
-        thisFolder.value = thisRow;
-        //  唤出右键菜单，思路：获取鼠标位置来定位菜单
-        folderVisible.value = true;
-        foldertop.value = e.pageY;
-        folderleft.value = e.pageX;
+        const folderRClick = (row, col, e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            let thisRow = toRaw(row)
+            // console.log("row", thisRow);
+            // console.log("col", toRaw(col));
+            // console.log("e", e);
+            // console.log("item", toRaw(item));
+            thisFolder.value = thisRow;
+            //  唤出右键菜单，思路：获取鼠标位置来定位菜单
+            folderVisible.value = true;
+            foldertop.value = e.pageY;
+            folderleft.value = e.pageX;
         };
         // 关闭文件夹右键菜单
         const closeRMenu = () => {
-        // console.log("close");
-        folderVisible.value = false;
-        };     
+            // console.log("close");
+            folderVisible.value = false;
+        };
         onMounted(() => {
             getAllTop()
             getAllCollect()
@@ -1580,27 +1579,30 @@ p {
 }
 
 .right_menu {
-  width: 100px;
-  position: absolute;
-  padding: 8px;
-  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
-  border-radius: 4px 4px 4px 4px;
-  border: 1px solid #c1cce3;
-  background-color: #fff;
-  z-index: 10000;
-  .menu_item {
-    width: 100%;
-    height: 40px;
+    width: 100px;
+    position: absolute;
+    padding: 8px;
+    box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
     border-radius: 4px 4px 4px 4px;
-    display: flex;
-    align-items: center;
-    &:hover {
-      background-color: #f5f7f9;
-    }
-    span {
-      margin-left: 4px;
+    border: 1px solid #c1cce3;
+    background-color: #fff;
+    z-index: 10000;
+
+    .menu_item {
+        width: 100%;
+        height: 40px;
+        border-radius: 4px 4px 4px 4px;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            background-color: #f5f7f9;
+        }
+
+        span {
+            margin-left: 4px;
+        }
     }
-  }
 }
 
 :deep(.el-tag__content) {