|
|
@@ -74,11 +74,11 @@
|
|
|
<div style="margin-left: 5px;">
|
|
|
<el-icon
|
|
|
style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;"
|
|
|
- @click="createNewMenu">
|
|
|
+ @click="createNewMenu(0)">
|
|
|
<Plus />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
- <div style="margin-left: 5px;" @click="createNewMenu">
|
|
|
+ <div style="margin-left: 5px;" @click="createNewMenu(0)">
|
|
|
<span style="font-size: 14px;">新建</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -111,7 +111,7 @@
|
|
|
<!-- 前进后退 -->
|
|
|
<div style="display: flex;justify-content: space-around;align-items: center;">
|
|
|
<img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt=""
|
|
|
- @click="getAllTop()">
|
|
|
+ @click="getAllTop">
|
|
|
<img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
|
|
|
</div>
|
|
|
<!-- 面包屑 -->
|
|
|
@@ -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" @row-click="mouseClick">
|
|
|
+ <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">
|
|
|
@@ -262,21 +259,14 @@
|
|
|
</div>
|
|
|
<!-- 新增文件夹弹窗 -->
|
|
|
<div>
|
|
|
- <el-dialog v-model="addBoser" title="新建文件夹" width="30%">
|
|
|
- <el-form :model="boserForm" label-width="120px">
|
|
|
- <el-form-item label="目录名称">
|
|
|
- <el-input v-model="boserForm.dirName" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="addBoser = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="sureAddBoser">
|
|
|
- 确认
|
|
|
- </el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ <CreateFloder v-if="folderCase" :folderCase="folderCase" @getChildrenC="getChildrenC" :oneOrTwo="oneOrTwo"
|
|
|
+ :impDirId="impDirId"
|
|
|
+ :impSpaceId="impSpaceId"
|
|
|
+ :newDirId="newDirId"
|
|
|
+ :newSpaceId="newSpaceId"
|
|
|
+ :getAllTop="getAllTop"
|
|
|
+ >
|
|
|
+ </CreateFloder>
|
|
|
</div>
|
|
|
<!-- 废弃的顶层目录新增 -->
|
|
|
<div>
|
|
|
@@ -420,6 +410,7 @@ import FileTree from './components/FileTree.vue'
|
|
|
import BreadMenu from './components/BreadMenu.vue'
|
|
|
import FileEdit from './components/FileEdit.vue'
|
|
|
import TransferModal from './modalComponebts/Transfer.vue'
|
|
|
+import CreateFloder from './modalComponebts/CreateFloder.vue'
|
|
|
import ImgFile from "./jsComponents/ImgFile"
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
import blueLeft from '../../assets/images/blueLeft.png'
|
|
|
@@ -437,6 +428,7 @@ export default {
|
|
|
setup() {
|
|
|
let fileTrees = ref(false)//filetree父传子
|
|
|
let thanks = ref(false)//transfer父传子
|
|
|
+ let folderCase = ref(false)
|
|
|
let editOnline = ref(true)
|
|
|
let searchFire = ref('')
|
|
|
let selectedIndex = ref(0)
|
|
|
@@ -449,7 +441,6 @@ export default {
|
|
|
let askTalk = ref('')
|
|
|
let newTag = ref('')
|
|
|
let cliCC = ref(false)
|
|
|
- let addBoser = ref(false)
|
|
|
let addFile = ref(false)
|
|
|
let anyP = ref(false)
|
|
|
let uploadModal = ref(false)
|
|
|
@@ -480,18 +471,11 @@ export default {
|
|
|
let copyParentId = ref("")//文件夹
|
|
|
let needBag = ref("")
|
|
|
let copyOrMove = ref(0)//0代表复制,1代表移动
|
|
|
+ let oneOrTwo = ref(0)//0代表二级,1代表一级
|
|
|
let sortNum = ref(0)
|
|
|
const openForwardFile = ref(false) //历史版本展示
|
|
|
const historyPrew = ref(false)
|
|
|
const fileUserTreeData = reactive({ data: {} });
|
|
|
- let boserForm = ref({
|
|
|
- spaceId: "",//空间id
|
|
|
- dirName: "",
|
|
|
- dirPower: "",
|
|
|
- dirType: "",
|
|
|
- parentId: "",
|
|
|
- remark: ""//备注
|
|
|
- })
|
|
|
let fileForm = ref({
|
|
|
spaceType: '',
|
|
|
spaceName: "",
|
|
|
@@ -724,7 +708,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
|
|
|
@@ -738,11 +724,6 @@ export default {
|
|
|
} else {
|
|
|
cliCC.value = true
|
|
|
}
|
|
|
- fileShare.getSharePeople(row.docId).then(res => {
|
|
|
- console.log(res, 'res');
|
|
|
- }).catch(err => {
|
|
|
- console.log(err, 'err');
|
|
|
- })
|
|
|
}
|
|
|
// 申请扩容
|
|
|
function askApply() {
|
|
|
@@ -835,46 +816,8 @@ export default {
|
|
|
anyP.value = false
|
|
|
}
|
|
|
function createNewMenu(num) {
|
|
|
- impNum.value = num
|
|
|
- addBoser.value = true
|
|
|
- }
|
|
|
- // 新建文件夹
|
|
|
- function sureAddBoser() {
|
|
|
- if (impNum.value === 1) {
|
|
|
- documents.addDocument(
|
|
|
- {
|
|
|
- "dirName": boserForm.value.dirName,
|
|
|
- "parentId": impDirId.value - 0,
|
|
|
- "spaceId": impSpaceId.value - 0,
|
|
|
- }
|
|
|
- ).then(res => {
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage({
|
|
|
- message: '添加一级目录成功',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
- }
|
|
|
- addBoser.value = false
|
|
|
- getAllTop()
|
|
|
- })
|
|
|
- } else {
|
|
|
- documents.addDocument(
|
|
|
- {
|
|
|
- "dirName": boserForm.value.dirName,
|
|
|
- "parentId": newDirId.value - 0,
|
|
|
- "spaceId": newSpaceId.value - 0,
|
|
|
- }
|
|
|
- ).then(res => {
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage({
|
|
|
- message: '添加成功',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
- }
|
|
|
- addBoser.value = false
|
|
|
- getAllTop()
|
|
|
- })
|
|
|
- }
|
|
|
+ oneOrTwo.value = num
|
|
|
+ folderCase.value = true
|
|
|
}
|
|
|
|
|
|
function createNewFile() {
|
|
|
@@ -1030,7 +973,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 => {
|
|
|
@@ -1147,6 +1090,9 @@ export default {
|
|
|
function getCback(data) {
|
|
|
thanks.value = data
|
|
|
}
|
|
|
+ function getChildrenC(data) {
|
|
|
+ folderCase.value = data
|
|
|
+ }
|
|
|
//历史版本
|
|
|
const forwardTreeData = reactive({ data: {} });
|
|
|
const historycopyRow = ref({})
|
|
|
@@ -1161,20 +1107,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 +1128,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()
|
|
|
@@ -1240,10 +1186,7 @@ export default {
|
|
|
anyP,
|
|
|
chooseSet1,
|
|
|
fileMenu,
|
|
|
- addBoser,
|
|
|
- boserForm,
|
|
|
createNewMenu,
|
|
|
- sureAddBoser,
|
|
|
// delBoser,
|
|
|
clickRowId,
|
|
|
addFile,
|
|
|
@@ -1339,6 +1282,9 @@ export default {
|
|
|
getCback,
|
|
|
mouseClick,
|
|
|
workOrEdit,
|
|
|
+ folderCase,//新建文件夹传值
|
|
|
+ getChildrenC,
|
|
|
+ oneOrTwo,//父传子判断
|
|
|
}
|
|
|
|
|
|
},
|
|
|
@@ -1351,6 +1297,7 @@ export default {
|
|
|
FileTree,
|
|
|
historyList,
|
|
|
TransferModal,
|
|
|
+ CreateFloder,
|
|
|
},
|
|
|
}
|
|
|
|
|
|
@@ -1371,7 +1318,7 @@ p {
|
|
|
}
|
|
|
|
|
|
.settingBox {
|
|
|
- width: 20vw;
|
|
|
+ width: 25vw;
|
|
|
height: 92vh;
|
|
|
border: 1px solid black;
|
|
|
border-radius: 4px;
|
|
|
@@ -1580,27 +1527,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) {
|