|
@@ -126,78 +126,94 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 展示文件盒子 -->
|
|
|
- <!-- 文件夹 -->
|
|
|
- <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">
|
|
|
- <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">
|
|
|
+ <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>
|
|
|
- <!-- 文件 -->
|
|
|
- <div class="fileTable">
|
|
|
- <el-collapse v-model="files" accordion class="collapse" height="500px">
|
|
|
- <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>
|
|
|
- </el-table>
|
|
|
- <div class="setCli" v-if="cliCC">
|
|
|
- <template v-for="(item, index) in mouseCli">
|
|
|
- <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;">></span>
|
|
|
- </p>
|
|
|
+ </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)">
|
|
|
+ <!-- <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>
|
|
|
+
|
|
|
+ </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">
|
|
@@ -621,6 +637,10 @@ export default {
|
|
|
const showPreview = ref(false)//控制图片预览组件显示
|
|
|
const previewData = ref()//需要预览的文件的数据
|
|
|
const router = useRouter(); //注册路由
|
|
|
+ const folderVisible = ref(false); //显示文件夹右键菜单
|
|
|
+ const foldertop = ref(0);
|
|
|
+ const folderleft = ref(0);
|
|
|
+ const thisFolder = ref({}); //当前右键的文件夹
|
|
|
function getAllCollect() {
|
|
|
collect.getCollect({}).then(res => {
|
|
|
const maxAge = res.rows.reduce((max, obj) => (obj.orderNum > max ? obj.orderNum : max), res.rows[0].orderNum)
|
|
@@ -953,6 +973,8 @@ export default {
|
|
|
}
|
|
|
// 重命名
|
|
|
function restName(row, index) {
|
|
|
+ // 判断是点击打开还是右键菜单打开
|
|
|
+ row = row ? row : thisFolder.value
|
|
|
newName.value = row.dirName
|
|
|
folderName.value = true
|
|
|
selectedBox.value = row.dirId
|
|
@@ -1007,6 +1029,9 @@ export default {
|
|
|
// 文件夹每行点击事件
|
|
|
function folderClick(row, list) {
|
|
|
// 上一级dirId就是下一级的parentId
|
|
|
+ // 判断是点击打开还是右键菜单打开
|
|
|
+ row = row ? row : thisFolder.value
|
|
|
+ console.log('row',row);
|
|
|
newDirId.value = row.dirId
|
|
|
newSpaceId.value = row.spaceId
|
|
|
documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
|
|
@@ -1138,23 +1163,49 @@ export default {
|
|
|
|
|
|
//对mouseCli数组进行筛选,实现菜单的区分显示
|
|
|
const filterMouseCli = ()=>{
|
|
|
- const typeArr = ['.png','.jpg','.jpeg','.JPG','.mp3','.mp4']
|
|
|
+ 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 !== "文字识别")
|
|
|
+ }
|
|
|
return arr
|
|
|
- }
|
|
|
+ }
|
|
|
function mouseClick() {
|
|
|
if (cliCC.value) {
|
|
|
cliCC.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 closeRMenu = () => {
|
|
|
+ // console.log("close");
|
|
|
+ folderVisible.value = false;
|
|
|
+ };
|
|
|
onMounted(() => {
|
|
|
getAllTop()
|
|
|
getAllCollect()
|
|
|
+ // 添加监听,点击其他地方关闭文件夹右键菜单
|
|
|
+ window.addEventListener("click", closeRMenu, true);
|
|
|
})
|
|
|
return {
|
|
|
folderList,//文件夹的数据
|
|
@@ -1271,12 +1322,15 @@ export default {
|
|
|
changeMsgClose,
|
|
|
historyPrew,
|
|
|
historycopyRow,
|
|
|
- //历史版本=========
|
|
|
- forwardChangeMsg,
|
|
|
- fileUserTreeData,
|
|
|
thanks,
|
|
|
getCback,
|
|
|
mouseClick,
|
|
|
+ folderVisible,
|
|
|
+ foldertop,
|
|
|
+ folderleft,
|
|
|
+ thisFolder,
|
|
|
+ folderRClick,
|
|
|
+ closeRMenu
|
|
|
}
|
|
|
|
|
|
},
|
|
@@ -1517,6 +1571,30 @@ p {
|
|
|
max-width: auto;
|
|
|
}
|
|
|
|
|
|
+.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;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
:deep(.el-tag__content) {
|
|
|
display: block;
|
|
|
}
|