Merge branch 'liuqiang' into v3

src/components/RightMenu/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- 右键唤出的菜单 -->
+  <div
+    class="right_menu"
+    :style="{ left: fileRightXY.left + 'px', top: fileRightXY.top + 'px' }"
+  >
+    <div class="menu_item" @click="folderClick(null, null)">
+      <img src="@/assets/images/trash.png" alt="" />
+      <span>打开</span>
+    </div>
+    <div class="menu_item" @click="collectFolder">
+      <img src="@/assets/images/collect.png" alt="" />
+      <span>取消收藏</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  reactive,
+  defineComponent,
+  watch,
+  onMounted,
+  defineExpose,
+} from "vue";
+const props = defineProps({
+  fileRightXY: {
+    type: String,
+    default: false,
+  },
+  foldertop: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.right_menu {
+  width: 156px;
+  position: absolute;
+  padding: 8px;
+  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid gray;
+  background-color: #fff;
+  z-index: 10000;
+
+  .menu_item {
+    width: 100%;
+    height: 30px;
+    border-radius: 4px 4px 4px 4px;
+    line-height: 30px;
+    display: flex;
+    margin: 5px auto;
+    align-items: center;
+    font-size: 13px;
+
+    &:hover {
+      background-color: #f5f7f9;
+    }
+
+    span {
+      margin-left: 4px;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -76,6 +76,7 @@ export const constantRoutes = [{
 				path: 'swagger',
 				component: () => import('@/views/tool/swagger/index.vue'),
 				name: 'swagger',
+				redirect: 'noredirect',
 				meta: {
 					title: '接口',
 					icon: 'dashboard'

src/views/collect/index.vue

@@ -131,10 +131,11 @@
             style="width: 100%"
             height="250"
             :scrollbar-always-on="true"
+            @row-contextmenu="fileRightTable"
           >
             <el-table-column fixed prop="date" label="名称" width="500">
               <template #default="scope">
-                <div>
+                <div class="folderName">
                   <img
                     class="table_icon"
                     src="@/assets/images/fileBox.png"
@@ -167,10 +168,11 @@
             style="width: 100%"
             height="250"
             :scrollbar-always-on="true"
+            @row-contextmenu="fileRightTable"
           >
             <el-table-column fixed prop="date" label="名称" width="500">
               <template #default="scope">
-                <div>
+                <div class="fileName">
                   <img
                     class="table_icon"
                     :src="setIcon(scope.row.docInfo.fileType)"
@@ -199,7 +201,12 @@
           <!-- 平铺 -->
           <el-scrollbar height="360px">
             <div class="tile_box">
-              <div class="file_box" v-for="item in folderArr" :key="item">
+              <div
+                class="file_box"
+                @click.right="fileRight($event, item)"
+                v-for="item in folderArr"
+                :key="item"
+              >
                 <img
                   class="big_file_img"
                   src="@/assets/images/fileBox.png"
@@ -224,7 +231,12 @@
           <!-- 平铺 -->
           <el-scrollbar height="360px">
             <div class="tile_box">
-              <div class="file_box" v-for="item in fileArr" :key="item">
+              <div
+                class="file_box"
+                @click.right="fileRight($event, item)"
+                v-for="item in fileArr"
+                :key="item"
+              >
                 <img
                   class="big_file_img"
                   :src="setIcon(item.docInfo.fileType)"
@@ -261,15 +273,17 @@
       <span>删除</span>
     </div>
   </div>
-    <div v-else class="preview">
-    <FileEdit
-      :docId="clickRowId"
-      :copyRow="copyRow"
+  <div v-else class="preview">
+    <!-- TODO 预览功能后续实现-->
+    <!-- <FileEdit
+      :docId="thisRData.docInfo.docId"
+      :copyRow="thisRData"
       :historyPrew="historyPrew"
       :historycopyRow="historycopyRow"
       :onlyView="onlyView"
-    ></FileEdit>
+    ></FileEdit> -->
   </div>
+  <RightMenu v-if="showFlieRM" :fileRightXY="fileRightXY"></RightMenu>
 </template>
 
 <script setup>
@@ -287,6 +301,7 @@ import {
   sortLabel,
 } from "@/api/biz/label.js";
 import { listFavorite, listFavoriteById } from "@/api/biz/favorite.js";
+import RightMenu from "@/components/RightMenu/index.vue";
 const activeNames = ref(["folder", "file"]);
 const clickCollect = ref("second"); //当前标签
 const isAddCollect = ref(false); //是否在添加标签
@@ -303,7 +318,10 @@ const isChangeTabName = ref(0); //存放修改状标签的id
 const folderArr = ref(); //文件夹数组
 const fileArr = ref(); //文件数组
 const isList = ref(false); //控制显示方式
-const showPreview = ref(false);//预览
+const showPreview = ref(false); //预览
+const fileRightXY = ref({}); //右键菜单坐标
+const showFlieRM = ref(false); //右键菜单显示
+const thisRData = ref(); //当前右键的文件
 //----引入图片----
 import file_DOC from "../../assets/images/fileType/file_DOC.png";
 import file_pdf from "../../assets/images/fileType/file_pdf.png";
@@ -321,6 +339,7 @@ onMounted(async () => {
   rowDrop();
   // 添加监听，点击其他地方关闭菜单
   window.addEventListener("click", closeMenu, true);
+  window.addEventListener("click", closeFlieRMenu, true);
 });
 // tab右键事件
 const tabClick = (e, item) => {
@@ -334,11 +353,42 @@ const tabClick = (e, item) => {
   top.value = e.pageY;
   left.value = e.pageX;
 };
+// file右键事件
+const fileRight = (e, item) => {
+  e.preventDefault();
+  e.stopPropagation();
+  // console.log("e", e);
+  // console.log("item", toRaw(item));
+  //  唤出右键菜单，思路：获取鼠标位置来定位菜单
+  thisRData.value = item;
+  console.log("thisRData", thisRData.value);
+  showFlieRM.value = true;
+  fileRightXY.value.top = e.pageY;
+  fileRightXY.value.left = e.pageX;
+};
+// folder右键事件
+const fileRightTable = (item, col, e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  // console.log("e", e);
+  // console.log("item", toRaw(item));
+  //  唤出右键菜单，思路：获取鼠标位置来定位菜单
+  thisRData.value = item;
+  console.log("thisRData", thisRData.value);
+  showFlieRM.value = true;
+  fileRightXY.value.top = e.pageY;
+  fileRightXY.value.left = e.pageX;
+};
 // 关闭右键菜单
 const closeMenu = () => {
   // console.log("close");
   visible.value = false;
 };
+// 关闭右键菜单
+const closeFlieRMenu = () => {
+  // console.log("close");
+  showFlieRM.value = false;
+};
 //添加标签
 const toAddCollectFn = async () => {
   isAddCollect.value = true;
@@ -705,6 +755,25 @@ const setIcon = (fileType) => {
     text-align: left;
   }
 }
+
+//表格文本超出隐藏
+:deep(.fileName) {
+  /*第一步： 溢出隐藏 */
+  overflow: hidden;
+  /* 第二步：让文本不会换行， 在同一行继续 */
+  white-space: nowrap;
+  /* 第三步：用省略号来代表未显示完的文本 */
+  text-overflow: ellipsis;
+}
+//表格文本超出隐藏
+:deep(.folderName) {
+  /*第一步： 溢出隐藏 */
+  overflow: hidden;
+  /* 第二步：让文本不会换行， 在同一行继续 */
+  white-space: nowrap;
+  /* 第三步：用省略号来代表未显示完的文本 */
+  text-overflow: ellipsis;
+}
 //平铺
 .tile_box {
   width: 100%;

src/views/myjoin/MyJoin.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="!showEdit">
         <div class="bigBox">
             <!-- 功能 -->
             <div class="tabBox">
@@ -9,7 +9,7 @@
                             <el-button @click="newFileAdd">新建文件</el-button>
                         </div>
                         <div>
-                            <el-table :data="myEjoy" style="width: 100%">
+                            <el-table :data="myEjoy" style="width: 100%" @row-click="rowClickFN">
                                 <el-table-column type="selection" width="55" />
                                 <el-table-column label="名称" width="200">
                                     <template #default="scope">
@@ -69,13 +69,24 @@
             </div>
         </div>
     </div>
+    <div v-else class="preview">
+        <FileEdit
+        :docId="clickRowId"
+        :copyRow="copyRow"
+        :historyPrew="historyPrew"
+        :historycopyRow="historycopyRow"
+        :onlyView="onlyView"
+        ></FileEdit>
+    </div>
 </template>
 
 <script>
 import { ref, onMounted } from 'vue'
 import fileCount from '../../api/fileCount/fileCount';
 import ImgFile from '../myfile/jsComponents/ImgFile';
+import { toRaw } from "@vue/reactivity";
 import AddFile from './components/AddFile.vue'
+import FileEdit from "@/views/myfile/components/FileEdit.vue";
 import { ElMessage } from 'element-plus';
 export default {
     setup() {
@@ -84,6 +95,20 @@ export default {
         let myEjoy = ref([])
         let myPack = ref([])
         let newAdd = ref(false)
+        const historycopyRow = ref(false);
+        const historyPrew = ref();
+        const clickRowId = ref();
+        const copyRow = ref();
+        const onlyView = ref(false);
+        const showEdit = ref(false)
+        const thisLClickRow = ref()//当前左键的文件
+        const rowClickFN = (row,col,e)=>{
+            console.log('row',row);
+            thisLClickRow.value = row
+            clickRowId.value = row.docId
+            copyRow.value = toRaw(row)
+            showEdit.value = true
+        }
         function getCountPeople() {
             fileCount.myCount({}).then(res => {
                 myEjoy.value = res.rows
@@ -148,10 +173,19 @@ export default {
             newAdd,
             newFileAdd,
             threeBe,
+            historycopyRow,
+            historyPrew,
+            onlyView,
+            rowClickFN,
+            thisLClickRow,
+            copyRow,
+            clickRowId,
+            showEdit
         }
     },
     components:{
         AddFile,
+        FileEdit
     }
 }
 </script>
@@ -170,7 +204,12 @@ export default {
     margin: 0 auto;
     background-color: #F5F7F9;
 }
-
+.preview {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  overflow: hidden;
+}
 :deep(.el-tabs__nav) {
     margin: 0 calc(100% - 55%);
 }