文件预览 菜单颜色显示

src/utils/index.js

@@ -15,6 +15,18 @@ export function formatDate(cellValue) {
   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
 }
 
+
+/**
+ * 判断该文件是否可以预览
+ * @param {string} fileType
+ */
+export const canPreviewFile = (fileType)=>{
+    const array = ['.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']
+    if(array.includes(fileType)){
+      return true
+    }
+    return false
+}
 /**
  * @param {number} time
  * @param {string} option

src/views/myfile/MyFile.vue

@@ -83,7 +83,7 @@
                             </div>
                         </div>
                         <template v-for="(item, index) in useMenu">
-                            <div style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;"
+                            <div :class="{'isCheck':haveCheck}" style="display: flex;width: 82px;opacity:0.5;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;"
                                 @click="getMenu(item, index)">
                                 <div style="margin-left: 5px;">
                                     <img :src="item.img" style="width: 24px;height: 24px;" alt="">
@@ -236,7 +236,7 @@
                     <el-button @click="editOnline = true">返回</el-button>
                 </div>
                 <FileEdit :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew"
-                    :historycopyRow="historycopyRow"></FileEdit>
+                    :historycopyRow="historycopyRow" :onlyView="onlyView"></FileEdit>
             </div>
             <!-- 扩容弹窗 -->
             <div>
@@ -433,6 +433,7 @@ import historyList from "@/components/historyList/index.vue"; //选择文件发
 import { listVersion } from "@/api/biz/version";
 import useUserStore from "@/store/modules/user";
 import { useRouter, useRoute } from "vue-router";
+import { canPreviewFile } from "@/utils/index.js"
 export default {
     setup() {
         let fileTrees = ref(false)//filetree父传子
@@ -638,6 +639,10 @@ export default {
         const foldertop = ref(0);
         const folderleft = ref(0);
         const thisFolder = ref({}); //当前右键的文件夹
+        const folderCheckout = ref(false)//是否有勾选
+        const fileCheckout = ref(false)//是否有勾选
+        const haveCheck = ref(false)//是否有勾选
+        const onlyView = ref(false) //预览
         function getAllCollect() {
             collect.getCollect({}).then(res => {
                 const maxAge = res.rows.reduce((max, obj) => (obj.orderNum > max ? obj.orderNum : max), res.rows[0].orderNum)
@@ -819,9 +824,23 @@ export default {
                 // console.log('row=', toRaw(row));
                 // console.log('copyFileId',copyFileId.value);//文件id
                 // console.log('copyFileType',copyFileType.value);//文件type
-                showPreview.value = true
-                const res = await preview(copyFileId.value)
-                previewData.value = URL.createObjectURL(res)
+                //---------------------------
+                // showPreview.value = true
+                // const res = await preview(copyFileId.value)
+                // previewData.value = URL.createObjectURL(res)
+                //--------------------------------------
+                const filePreview = canPreviewFile(copyFileType.value)
+                if(filePreview){
+                    onlyView.value = true
+                    editOnline.value = false
+                    cliCC.value = false
+                }else{
+                      showPreview.value = true
+                      const res = await preview(copyFileId.value)
+                      previewData.value = URL.createObjectURL(res)
+                }
+                console.log('filePreview',filePreview);
+
                 // console.log('res',res);
             } else if (row.name === "历史版本") {
                 const resHistory = await listVersion({ docId: clickRowId.value })
@@ -952,6 +971,7 @@ export default {
         }
         // 表格多选框
         function handleSelectionChange(val) {
+            console.log('checkout val',toRaw(val));
             if (val.length > 1) {
                 // 如果选择了多项，只保留最后一项
                 val.shift();
@@ -959,6 +979,15 @@ export default {
             if (val.length === 1) {
                 fileId.value = val[0].docId
             }
+            if(val.length){
+               folderCheckout.value = true 
+               haveCheck.value = true
+            }else{
+                folderCheckout.value = false
+                if(!fileCheckout.value){
+                  haveCheck.value = false
+                }
+            }
         }
         // 文件夹
         function handleSelectionChange1(val) {
@@ -969,6 +998,15 @@ export default {
             if (val.length === 1) {
                 folderId.value = val[0].dirId
             }
+             if(val.length){
+               fileCheckout.value = true 
+               haveCheck.value = true
+            }else{
+                fileCheckout.value = false
+                 if(!folderCheckout.value){
+                  haveCheck.value = false
+                }
+            }
         }
         // 重命名
         function restName(row, index) {
@@ -1162,13 +1200,17 @@ export default {
 
         //对mouseCli数组进行筛选，实现菜单的区分显示
         const filterMouseCli = ()=>{
+            const array = ['.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','.pdf']
             const imgTypeArr = ['.png','.jpg','.jpeg','.JPG']
             let arr = []
-            if (!typeArr.includes(copyFileType.value)) {
+            if (!(typeArr.includes(copyFileType.value) || array.includes(copyFileType.value)) ) {
                 arr = mouseCli.value.filter(item => item.name !== "预览")
             } else {
-                arr = mouseCli.value.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
+                arr = toRaw(mouseCli.value)
+            }
+            if(!array.includes(copyFileType.value)){
+                arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
             }
             if(!imgTypeArr.includes(copyFileType.value)){
                 arr = arr.filter(item=>item.name !== "文字识别")
@@ -1339,6 +1381,10 @@ export default {
             getCback,
             mouseClick,
             workOrEdit,
+            folderCheckout,
+            fileCheckout,
+            haveCheck,
+            onlyView
         }
 
     },
@@ -1602,6 +1648,9 @@ p {
     }
   }
 }
+.isCheck{
+    opacity: 1!important;
+}
 
 :deep(.el-tag__content) {
     display: block;

src/views/myfile/components/FileEdit.vue

@@ -35,7 +35,11 @@ export default {
         historycopyRow:{//点击历史预览的哪项数据
             type: Object,
             default:()=>{}
-        }
+        },
+        onlyView:{
+            Boolean,
+            default:false
+        },
     },
     setup(props) {
         let docId = props.docId;
@@ -43,7 +47,7 @@ export default {
         let option = ref({
             key: '',
             url: '', //在线文档地址
-            isEdit: '', //是否允许编辑
+            isEdit: props.onlyView, //是否允许编辑
             fileType: '', //文件扩展名
             title: '', //文件标题
             user: {