|
|
@@ -1,7 +1,70 @@
|
|
|
<template>
|
|
|
- <div class="container" v-if="!showPreview">
|
|
|
- <div class="statistics">
|
|
|
- <div class="left_box">
|
|
|
+ <div class="container">
|
|
|
+ <div class="topPath">
|
|
|
+ <!-- <el-icon><ArrowDown /></el-icon> -->
|
|
|
+ <span @click="backTopPath">{{ topPath }}</span>
|
|
|
+ <PathLabel
|
|
|
+ v-if="!loadingPreview"
|
|
|
+ @folderClick="folderClick"
|
|
|
+ :pathLabelData="pathLabelData"
|
|
|
+ ></PathLabel>
|
|
|
+ <!-- <BreadMenu></BreadMenu> -->
|
|
|
+ </div>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <div class="tags">
|
|
|
+ <div class="tags_left">
|
|
|
+ <el-tabs
|
|
|
+ v-model="clickCollect"
|
|
|
+ class="tabSign"
|
|
|
+ @tab-change="tabchange"
|
|
|
+ ref="tabs"
|
|
|
+ >
|
|
|
+ <!-- <el-tab-pane label="常用" name="first"></el-tab-pane> -->
|
|
|
+ <el-tab-pane label="默认" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="item in toRaw(tabList)"
|
|
|
+ :key="item"
|
|
|
+ :name="item.labelId"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <div
|
|
|
+ v-if="isChangeTabName !== item.labelId"
|
|
|
+ @click.right="tabClick($event, item)"
|
|
|
+ >
|
|
|
+ {{ item.labelName }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-input
|
|
|
+ v-model="changeTabName"
|
|
|
+ size="mini"
|
|
|
+ @blur="reTabName"
|
|
|
+ maxlength="32"
|
|
|
+ placeholder="请输入不多于32位字符"
|
|
|
+ :autofocus="true"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <!-- 添加标签 -->
|
|
|
+ <div class="addCollect">
|
|
|
+ <div v-if="!isAddCollect">
|
|
|
+ <el-icon color="#2E6BC8">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <span @click="toAddCollectFn">添加标签</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-input
|
|
|
+ v-model="tabName"
|
|
|
+ size="mini"
|
|
|
+ @change="addCollectFn"
|
|
|
+ maxlength="32"
|
|
|
+ placeholder="请输入不多于32位字符"
|
|
|
+ :autofocus="true"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right_box">
|
|
|
<img
|
|
|
@@ -30,63 +93,6 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 标签 -->
|
|
|
- <div class="tags">
|
|
|
- <!-- TODO 标签可以拖动位置 -->
|
|
|
-
|
|
|
- <el-tabs
|
|
|
- v-model="clickCollect"
|
|
|
- class="tabSign"
|
|
|
- @tab-change="tabchange"
|
|
|
- ref="tabs"
|
|
|
- >
|
|
|
- <!-- <el-tab-pane label="常用" name="first"></el-tab-pane> -->
|
|
|
- <el-tab-pane label="默认" name="second"></el-tab-pane>
|
|
|
- <el-tab-pane
|
|
|
- v-for="item in toRaw(tabList)"
|
|
|
- :key="item"
|
|
|
- :name="item.labelId"
|
|
|
- >
|
|
|
- <template #label>
|
|
|
- <div
|
|
|
- v-if="isChangeTabName !== item.labelId"
|
|
|
- @click.right="tabClick($event, item)"
|
|
|
- >
|
|
|
- {{ item.labelName }}
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <el-input
|
|
|
- v-model="changeTabName"
|
|
|
- size="mini"
|
|
|
- @blur="reTabName"
|
|
|
- maxlength="32"
|
|
|
- placeholder="请输入不多于32位字符"
|
|
|
- :autofocus="true"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <!-- 添加标签 -->
|
|
|
- <div class="addCollect">
|
|
|
- <div v-if="!isAddCollect">
|
|
|
- <el-icon color="#2E6BC8">
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- <span @click="toAddCollectFn">添加标签</span>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <el-input
|
|
|
- v-model="tabName"
|
|
|
- size="mini"
|
|
|
- @change="addCollectFn"
|
|
|
- maxlength="32"
|
|
|
- placeholder="请输入不多于32位字符"
|
|
|
- :autofocus="true"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<el-collapse v-model="activeNames">
|
|
|
<div v-if="isList == 1">
|
|
|
<el-collapse-item name="folder">
|
|
|
@@ -147,7 +153,7 @@
|
|
|
alt=""
|
|
|
style=""
|
|
|
/>
|
|
|
- <span class="shouzhi"> {{ scope.row.docInfo.fileName }}</span>
|
|
|
+ <span class="shouzhi"> {{ scope.row.docInfo.fileName }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -167,14 +173,14 @@
|
|
|
<span class="collapseItem_title">文件夹</span>
|
|
|
</template>
|
|
|
<!-- 平铺 -->
|
|
|
- <el-scrollbar style="height: 37vh;">
|
|
|
+ <el-scrollbar style="height: 37vh">
|
|
|
<div class="tile_box">
|
|
|
<div
|
|
|
class="file_box"
|
|
|
@click.right="fileRight($event, item)"
|
|
|
v-for="item in folderArr"
|
|
|
:key="item"
|
|
|
- style="cursor: pointer;"
|
|
|
+ style="cursor: pointer"
|
|
|
>
|
|
|
<img
|
|
|
class="big_file_img"
|
|
|
@@ -198,14 +204,14 @@
|
|
|
<span class="collapseItem_title">文件</span>
|
|
|
</template>
|
|
|
<!-- 平铺 -->
|
|
|
- <el-scrollbar style="height: 37vh;">
|
|
|
+ <el-scrollbar style="height: 37vh">
|
|
|
<div class="tile_box">
|
|
|
<div
|
|
|
class="file_box"
|
|
|
@click.right="fileRight($event, item)"
|
|
|
v-for="item in fileArr"
|
|
|
:key="item"
|
|
|
- style="cursor: pointer;"
|
|
|
+ style="cursor: pointer"
|
|
|
>
|
|
|
<img
|
|
|
class="big_file_img"
|
|
|
@@ -232,7 +238,7 @@
|
|
|
<div
|
|
|
class="right_menu shouzhi"
|
|
|
v-if="visible"
|
|
|
- :style="{ left: left + 'px', top: top + 'px',margin:'0' }"
|
|
|
+ :style="{ left: left + 'px', top: top + 'px', margin: '0' }"
|
|
|
>
|
|
|
<div class="menu_item" @click="reName">
|
|
|
<img src="@/assets/images/textbox.png" alt="" />
|
|
|
@@ -243,16 +249,6 @@
|
|
|
<span>删除</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-else class="preview">
|
|
|
- <!-- TODO 预览功能后续实现-->
|
|
|
- <!-- <FileEdit
|
|
|
- :docId="thisRData.docInfo.docId"
|
|
|
- :copyRow="thisRData"
|
|
|
- :historyPrew="historyPrew"
|
|
|
- :historycopyRow="historycopyRow"
|
|
|
- :onlyView="onlyView"
|
|
|
- ></FileEdit> -->
|
|
|
- </div>
|
|
|
<RightMenu v-if="showFlieRM" :fileRightXY="fileRightXY"></RightMenu>
|
|
|
</template>
|
|
|
|
|
|
@@ -287,7 +283,7 @@ const thisTab = ref({}); //当前右键的标签
|
|
|
const isChangeTabName = ref(0); //存放修改状标签的id
|
|
|
const folderArr = ref(); //文件夹数组
|
|
|
const fileArr = ref(); //文件数组
|
|
|
-const isList = ref(sessionStorage.getItem('fileGrid') || 0); //控制显示方式
|
|
|
+const isList = ref(sessionStorage.getItem("fileGrid") || 0); //控制显示方式
|
|
|
const showPreview = ref(false); //预览
|
|
|
const fileRightXY = ref({}); //右键菜单坐标
|
|
|
const showFlieRM = ref(false); //右键菜单显示
|
|
|
@@ -306,7 +302,7 @@ import file_zip from "../../assets/images/fileType/file_zip.png";
|
|
|
onMounted(async () => {
|
|
|
await getList();
|
|
|
await getCollectList();
|
|
|
- await tabchange('second')
|
|
|
+ await tabchange("second");
|
|
|
// rowDrop();
|
|
|
// 添加监听,点击其他地方关闭菜单
|
|
|
window.addEventListener("click", closeMenu, true);
|
|
|
@@ -509,16 +505,15 @@ const tabchange = async (labelId) => {
|
|
|
console.log("fileArr", fileArr.value);
|
|
|
};
|
|
|
const changeShow = () => {
|
|
|
-// isList.value = !isList.value;
|
|
|
-// fileGrid.value = fileGrids
|
|
|
-// folderGrid.value = fileGrids;
|
|
|
-if(isList.value == 1){
|
|
|
- isList.value = 0
|
|
|
-}else{
|
|
|
- isList.value = 1
|
|
|
-}
|
|
|
-sessionStorage.setItem('fileGrid',isList.value)
|
|
|
-
|
|
|
+ // isList.value = !isList.value;
|
|
|
+ // fileGrid.value = fileGrids
|
|
|
+ // folderGrid.value = fileGrids;
|
|
|
+ if (isList.value == 1) {
|
|
|
+ isList.value = 0;
|
|
|
+ } else {
|
|
|
+ isList.value = 1;
|
|
|
+ }
|
|
|
+ sessionStorage.setItem("fileGrid", isList.value);
|
|
|
};
|
|
|
const changeSort = async () => {
|
|
|
isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
|
|
|
@@ -591,33 +586,16 @@ const setIcon = (fileType) => {
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
- .statistics {
|
|
|
+ height: 88vh;
|
|
|
+ .topPath {
|
|
|
width: 100%;
|
|
|
- height: 40px;
|
|
|
- background-color: #fff;
|
|
|
- padding-left: 16px;
|
|
|
+ height: 24px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ margin-left: 4px;
|
|
|
+ cursor: pointer;
|
|
|
color: #6f85b5;
|
|
|
- .left_box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .dataNum {
|
|
|
- margin-left: 4px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- .right_box {
|
|
|
- width: 50px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-right: 30px;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
.tags {
|
|
|
display: flex;
|
|
|
@@ -627,6 +605,21 @@ const setIcon = (fileType) => {
|
|
|
border-top: 1px solid #c1cce3;
|
|
|
border-bottom: 1px solid #c1cce3;
|
|
|
background-color: #f5f7f9;
|
|
|
+ justify-content: space-between;
|
|
|
+ .tags_left {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .right_box {
|
|
|
+ width: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16px;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.addCollect {
|
|
|
margin-left: 16px;
|
|
|
@@ -687,29 +680,29 @@ const setIcon = (fileType) => {
|
|
|
width: 27px;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
-::v-deep .el-collapse-item__content {
|
|
|
+:deep(.el-collapse-item__content) {
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
-::v-deep .el-collapse-item__header {
|
|
|
+:deep(.el-collapse-item__header) {
|
|
|
background-color: #ebeff6 !important;
|
|
|
width: 100% !important;
|
|
|
height: 24px !important;
|
|
|
}
|
|
|
-::v-deep .el-collapse-item__arrow {
|
|
|
+:deep(.el-collapse-item__arrow) {
|
|
|
position: relative;
|
|
|
color: #2e6bc8;
|
|
|
right: 97%;
|
|
|
}
|
|
|
-::v-deep .el-table td.el-table__cell {
|
|
|
+:deep(.el-table td.el-table__cell) {
|
|
|
border: none;
|
|
|
font-size: 14px !important;
|
|
|
font-weight: 400 !important;
|
|
|
color: #000 !important;
|
|
|
}
|
|
|
-::v-deep .el-table__row {
|
|
|
+:deep(.el-table__row) {
|
|
|
height: 35px !important;
|
|
|
}
|
|
|
-::v-deep .el-table .el-table__header-wrapper th {
|
|
|
+:deep(.el-table .el-table__header-wrapper th) {
|
|
|
border-bottom: none;
|
|
|
border-right: 1px solid #c1cce3;
|
|
|
background-color: #fff !important;
|
|
|
@@ -724,7 +717,7 @@ const setIcon = (fileType) => {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
// 表格右边3个靠右对齐
|
|
|
-::v-deep .el-table__header thead tr th {
|
|
|
+:deep(.el-table__header thead tr th) {
|
|
|
font-family: Inter-Medium;
|
|
|
font-size: 14px;
|
|
|
color: #505870;
|