|
|
@@ -2,19 +2,56 @@
|
|
|
<div>
|
|
|
<!-- flex盒子 -->
|
|
|
<div class="bigBox">
|
|
|
- <template v-for="(item,index) in fileList">
|
|
|
+ <template v-for="(item, index) in fileList">
|
|
|
<!-- 循环盒子 -->
|
|
|
- <div>
|
|
|
+ <div class="flexBox" @contextmenu="rightClick(item, $event)">
|
|
|
<!-- 图片 -->
|
|
|
- <div>
|
|
|
- <img :src="getImage(item.fileType)" alt="">
|
|
|
+ <div class="imgBox">
|
|
|
+ <img :src="getImage(item.fileType)" alt="" style="vertical-align: middle;">
|
|
|
</div>
|
|
|
<!-- 名称 -->
|
|
|
- <div>
|
|
|
- <p>{{ item.fileName }}</p>
|
|
|
+ <div class="nameBox">
|
|
|
+ <p class="nameName">{{ item.fileName }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: (yz - 330) + 'px' }">
|
|
|
+ <template v-for="(item, index) in filterMouseCli()">
|
|
|
+ <p @click="chooseSet(item, index, 1)" 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">
|
|
|
+ <p @click="chooseSet1(0)" class="chooseSet">
|
|
|
+ <img src="../../../assets/images/user.png" alt="">
|
|
|
+ 选择人员
|
|
|
+ </p>
|
|
|
+ <p class="chooseSet" @click="goLock">
|
|
|
+ <img src="../../../assets/images/archiveTray.png" alt="">
|
|
|
+ 归档
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <TransferModal v-if="thanks" :thanks="thanks" :clickRowId="clickRowId" :workOrEdit="workOrEdit"
|
|
|
+ @getCback="getCback"></TransferModal>
|
|
|
+ </div>
|
|
|
+ <!-- 复制粘贴 -->
|
|
|
+ <div>
|
|
|
+ <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"
|
|
|
+ @getChildren="getChildren" :copyOrMove="copyOrMove"></FileTree>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
|
|
|
+ @closeImgPreview="closeImgPreview"></ImgPreview>
|
|
|
+ </div>
|
|
|
+ <!-- <div>
|
|
|
+ <FileEdit v-if="editOnline" :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew" :historycopyRow="historycopyRow"
|
|
|
+ :onlyView="onlyView" @cancleHistoryPrew="cancleHistoryPrew"></FileEdit>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -24,10 +61,16 @@ import { ref, onMounted } from "vue"
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import myfile from "../../../api/myfile/myfile";
|
|
|
import documents from "../../../api/document/document";
|
|
|
+import TransferModal from '../modalComponebts/Transfer.vue'
|
|
|
+import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
|
|
|
+import FileEdit from './FileEdit.vue'
|
|
|
+import FileTree from './FileTree.vue'
|
|
|
import ImgFile from "../jsComponents/ImgFile";
|
|
|
-// import bigFolder from '../../../assets/images/folderBig.png'
|
|
|
+import { canPreviewFile } from "@/utils/index.js"
|
|
|
+import { preview } from "@/api/common/common.js";
|
|
|
+import { listVersion } from "@/api/biz/version";
|
|
|
export default {
|
|
|
- setup() {
|
|
|
+ setup(props, { emit }) {
|
|
|
let impDirId = ref(0)
|
|
|
let impSpaceId = ref(0)
|
|
|
let newSpaceId = ref(0)
|
|
|
@@ -37,6 +80,85 @@ export default {
|
|
|
let folderList = ref([])
|
|
|
let fileTotal = ref(0)
|
|
|
let fileMenu = ref([])
|
|
|
+ let isFolder = ref("")
|
|
|
+ let clickRow = ref({})
|
|
|
+ let copyRow = ref("")
|
|
|
+ let clickRowId = ref("")
|
|
|
+ let copyDirId = ref("")
|
|
|
+ let copySpaceId = ref("")
|
|
|
+ let copyFileId = ref("")
|
|
|
+ let copyFileSize = ref("")
|
|
|
+ let copyFileType = ref("")
|
|
|
+ let workOrEdit = ref(0)
|
|
|
+ let copyOrMove = ref(0)
|
|
|
+ let nameForm = ref({
|
|
|
+ name: ""
|
|
|
+ })
|
|
|
+ const historycopyRow = ref({})
|
|
|
+ let copyFileName = ref("")
|
|
|
+ let yz = ref(0)
|
|
|
+ let xz = ref(0)
|
|
|
+ let cliCC = ref(false)
|
|
|
+ let anyP = ref(false)
|
|
|
+ let thanks = ref(false)
|
|
|
+ let fileTrees = ref(false)
|
|
|
+ let onlyView = ref(false)
|
|
|
+ let editOnline = ref(false)
|
|
|
+ let showPreview = ref(false)
|
|
|
+ let historyPrew = ref(false)
|
|
|
+ let historyTotal = ref(0)
|
|
|
+ const fileUserTreeData = reactive({ data: {} });
|
|
|
+ let previewData = ref()
|
|
|
+ let mouseCli = ref([
|
|
|
+ {
|
|
|
+ img: ImgFile.previewIcon,
|
|
|
+ name: "预览"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.addolder,
|
|
|
+ name: "移动到...",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.copy,
|
|
|
+ name: "复制到...",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.collect,
|
|
|
+ name: "收藏"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.downLoad,
|
|
|
+ name: "下载"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.textbox,
|
|
|
+ name: "重命名"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.share,
|
|
|
+ name: "分享"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.notePencil,
|
|
|
+ name: "在线编辑"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.togger,
|
|
|
+ name: "协作"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.icc,
|
|
|
+ name: "文字识别"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.history,
|
|
|
+ name: "历史版本"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: ImgFile.trash,
|
|
|
+ name: "删除"
|
|
|
+ }
|
|
|
+ ])
|
|
|
// 获取文件夹，中栏，文件
|
|
|
function getAllTop() {
|
|
|
documents.getTop(3).then(res => {
|
|
|
@@ -79,10 +201,9 @@ export default {
|
|
|
}
|
|
|
// 筛选后缀图片
|
|
|
function getImage(file) {
|
|
|
- console.log(file,'file');
|
|
|
if (file === '.txt') {
|
|
|
return ImgFile.bigTxt
|
|
|
- } else if (file === '.xlxs' || file === '.docx') {
|
|
|
+ } else if (file === '.xlxs' || file === '.docx' || file === '.xls') {
|
|
|
return ImgFile.bigxlsx
|
|
|
} else if (file === '.pptx') {
|
|
|
return ImgFile.bigpptx
|
|
|
@@ -90,10 +211,181 @@ export default {
|
|
|
return ImgFile.bigdoc
|
|
|
} else if (file === '.pdf') {
|
|
|
return ImgFile.bigpdf
|
|
|
+ } else if (file === ".mp3") {
|
|
|
+ return ImgFile.audio
|
|
|
+ } else if (file === '.mp4') {
|
|
|
+ return ImgFile.video
|
|
|
+ } else if (file === ".png" || file === ".jpg") {
|
|
|
+ return ImgFile.pic
|
|
|
+ } else {
|
|
|
+ return ImgFile.elseFile
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function rightClick(row, event) {
|
|
|
+ event.preventDefault()
|
|
|
+ isFolder.value = "N"
|
|
|
+ clickRow.value = row
|
|
|
+ xz.value = event.pageX
|
|
|
+ yz.value = event.pageY
|
|
|
+ copyRow.value = row
|
|
|
+ clickRowId.value = row.docId
|
|
|
+ copyDirId.value = row.dirId
|
|
|
+ copySpaceId.value = row.spaceId
|
|
|
+ copyFileId.value = row.fileId
|
|
|
+ copyFileSize.value = row.fileSize
|
|
|
+ copyFileType.value = row.fileType
|
|
|
+ nameForm.value.name = row.fileName
|
|
|
+ copyFileName.value = row.fileName
|
|
|
+ if (cliCC.value === true) {
|
|
|
+ cliCC.value = false
|
|
|
+ } else {
|
|
|
+ cliCC.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //对mouseCli数组进行筛选，实现菜单的区分显示
|
|
|
+ const filterMouseCli = () => {
|
|
|
+ const canPreviewArray = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.pdf', '.rtf', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx']
|
|
|
+ const typeArr = ['.png', '.jpg', '.jpeg', '.JPG', '.mp3', '.mp4']
|
|
|
+ const imgTypeArr = ['.png', '.jpg', '.jpeg', '.JPG']
|
|
|
+ const canEditArr = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp']
|
|
|
+ let arr = []
|
|
|
+ if (!(typeArr.includes(copyFileType.value) || canPreviewArray.includes(copyFileType.value))) {
|
|
|
+ arr = mouseCli.value.filter(item => item.name !== "预览")
|
|
|
+ } else {
|
|
|
+ arr = toRaw(mouseCli.value)
|
|
|
+ }
|
|
|
+ if (!canEditArr.includes(copyFileType.value)) {
|
|
|
+ arr = arr.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
|
|
|
+ }
|
|
|
+ if (anyP) {
|
|
|
+ anyP.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ async function chooseSet(row, index, num) {
|
|
|
+ if (row.name == '在线编辑' || row.name == '协作') {
|
|
|
+ cliCC.value = true
|
|
|
+ } else {
|
|
|
+ cliCC.value = false
|
|
|
+ }
|
|
|
+ if (row.name == '分享') {
|
|
|
+ workOrEdit.value = num
|
|
|
+ thanks.value = true
|
|
|
+ } else {
|
|
|
+ thanks.value = false
|
|
|
+ }
|
|
|
+ if (row.name == '协作') {
|
|
|
+ if (anyP.value) {
|
|
|
+ anyP.value = false
|
|
|
+ } else {
|
|
|
+ anyP.value = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ anyP.value = false
|
|
|
+ }
|
|
|
+ if (row.name == '删除') {
|
|
|
+ myfile.delMenu(clickRowId.value).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功"
|
|
|
+ })
|
|
|
+ getAllTop()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (row.name === '复制到...') {
|
|
|
+ copyOrMove.value = 0
|
|
|
+ fileTrees.value = true
|
|
|
+ }
|
|
|
+ if (row.name === '移动到...') {
|
|
|
+ copyOrMove.value = 1
|
|
|
+ fileTrees.value = true
|
|
|
+ }
|
|
|
+ if (row.name === '重命名') {
|
|
|
+ fileNameChange.value = true
|
|
|
+ }
|
|
|
+ if (row.name === "下载") {
|
|
|
+ location.href = `${import.meta.env.VITE_APP_BASE_API}/api/download/${copyFileId.value}`;
|
|
|
+ }
|
|
|
+ if (row.name === '收藏') {
|
|
|
+ collects.value = true
|
|
|
+ }
|
|
|
+ if (row.name === '在线编辑') {
|
|
|
+ editOnline.value = false
|
|
|
+ cliCC.value = false
|
|
|
+ }
|
|
|
+ if (row.name === '文字识别') {
|
|
|
+ router.push({
|
|
|
+ path: '/identifyFont',
|
|
|
+ query: {
|
|
|
+ fileId: copyFileId.value,
|
|
|
+ fileType: copyFileType.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (row.name === '预览') {
|
|
|
+ // editOnline.value = true
|
|
|
+ // emit("showFile", false)
|
|
|
+ const filePreview = canPreviewFile(copyFileType.value)
|
|
|
+ if (filePreview) {
|
|
|
+ onlyView.value = true
|
|
|
+ emit("showFile", false, clickRowId.value, copyRow.value)
|
|
|
+ cliCC.value = false
|
|
|
+ } else {
|
|
|
+ showPreview.value = true
|
|
|
+ const res = await preview(copyFileId.value)
|
|
|
+ previewData.value = URL.createObjectURL(res)
|
|
|
+ console.log(888);
|
|
|
+ }
|
|
|
+ showPreview.value = true
|
|
|
+ const res = await preview(copyFileId.value)
|
|
|
+ previewData.value = URL.createObjectURL(res)
|
|
|
+ } else if (row.name === "历史版本") {
|
|
|
+ const resHistory = await listVersion({ docId: clickRowId.value })
|
|
|
+ historyTotal.value = resHistory.total
|
|
|
+ fileUserTreeData.data = resHistory.rows;
|
|
|
+ openForwardFile.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function changeMsgClose(val, item) {
|
|
|
+ if (val) {
|
|
|
+ historycopyRow.value = item
|
|
|
+ editOnline.value = false
|
|
|
+ cliCC.value = false
|
|
|
+ historyPrew.value = true
|
|
|
+ }
|
|
|
+ openForwardFile.value = val
|
|
|
+ }
|
|
|
+
|
|
|
+ function chooseSet1(num) {
|
|
|
+ workOrEdit.value = num
|
|
|
+ thanks.value = true
|
|
|
+ anyP.value = false
|
|
|
+ }
|
|
|
+ function getChildren(data) {
|
|
|
+ fileTrees.value = data
|
|
|
+ }
|
|
|
+ function getCback(data) {
|
|
|
+ thanks.value = data
|
|
|
+ }
|
|
|
+ function closeImgPreview(data) {
|
|
|
+ showPreview.value = data
|
|
|
+ }
|
|
|
+ function cancleHistoryPrew(data) {
|
|
|
+ historyPrew.value = false
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
getAllTop()
|
|
|
+ window.addEventListener("click", mouseClick);
|
|
|
})
|
|
|
return {
|
|
|
getAllTop,
|
|
|
@@ -106,9 +398,137 @@ export default {
|
|
|
folderList,
|
|
|
fileTotal,
|
|
|
getImage,
|
|
|
+ rightClick,
|
|
|
+ filterMouseCli,
|
|
|
+ copyRow,
|
|
|
+ clickRow,
|
|
|
+ clickRowId,
|
|
|
+ copyDirId,
|
|
|
+ copySpaceId,
|
|
|
+ copyFileId,
|
|
|
+ copyFileSize,
|
|
|
+ copyFileType,
|
|
|
+ nameForm,
|
|
|
+ copyFileName,
|
|
|
+ cliCC,
|
|
|
+ mouseClick,
|
|
|
+ anyP,
|
|
|
+ xz,
|
|
|
+ yz,
|
|
|
+ chooseSet,
|
|
|
+ chooseSet1,
|
|
|
+ thanks,
|
|
|
+ FileTree,
|
|
|
+ fileTrees,
|
|
|
+ getCback,
|
|
|
+ getChildren,
|
|
|
+ copyOrMove,
|
|
|
+ onlyView,
|
|
|
+ editOnline,
|
|
|
+ showPreview,
|
|
|
+ ImgPreview,
|
|
|
+ previewData,
|
|
|
+ closeImgPreview,
|
|
|
+ FileEdit,
|
|
|
+ cancleHistoryPrew,
|
|
|
+ historycopyRow,
|
|
|
+ changeMsgClose,
|
|
|
+ historyPrew,
|
|
|
}
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ TransferModal,
|
|
|
+ FileTree,
|
|
|
+ ImgPreview,
|
|
|
+ FileEdit
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style scoped>
|
|
|
+.bigBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.imgBox {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 88px;
|
|
|
+}
|
|
|
+
|
|
|
+.flexBox {
|
|
|
+ width: 104px;
|
|
|
+ height: 148px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.nameName {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 禁止文本换行 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 隐藏溢出部分文本 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 显示省略号 */
|
|
|
+}
|
|
|
+
|
|
|
+.setCli {
|
|
|
+ width: 156px;
|
|
|
+ max-height: auto;
|
|
|
+ position: absolute;
|
|
|
+ flex-wrap: 400;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid gray;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 3;
|
|
|
+ overflow-y: auto;
|
|
|
+ /* // font-size: 16px; */
|
|
|
+}
|
|
|
+
|
|
|
+.setCli1 {
|
|
|
+ width: 156px;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 185px;
|
|
|
+ left: 455px;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid gray;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 2;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.chooseSet {
|
|
|
+ width: 140px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 5px auto;
|
|
|
+ font-size: 13px;
|
|
|
+ /*
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative; */
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.chooseSet img {
|
|
|
+ margin-right: 4px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+.chooseSet:hover {
|
|
|
+ width: 140px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 5px auto;
|
|
|
+ font-size: 13px;
|
|
|
+ background-color: #F5F7F9;
|
|
|
+ /* color: white; */
|
|
|
+}
|
|
|
+</style>
|
liyangzheng
