tabs菜单切换

src/layout/indexCommon.vue

@@ -61,7 +61,7 @@
               :to="item.path"
               v-for="(item, index) in menuList.data"
               :key="index"
-              @click.stop="clickPath(index, item)"
+              @click="clickPath(index, item)"
               ><div
                 style="position: relative"
                 :class="
@@ -93,26 +93,33 @@
           <div class="tab_box">
             <el-tabs
               v-model="editableTabsValue"
+              @tab-change="clickTab"
+              addable
+              @tab-add="addTab"
               type="card"
               class="demo-tabs"
-              @tab-remove="removeTab"
             >
               <el-tab-pane
-                v-for="item in editableTabs"
+                v-for="item in toRaw(editableTabs)"
                 :key="item.path"
                 :label="item.label"
                 :name="item.path"
               >
                 <template #label>
                   <div class="tab_pane">
-                    <div class="tab_text">{{ item.title }}</div>
+                    <div class="tab_text">{{ item.label }}</div>
                     <img src="@/assets/images/close.png" alt="" />
                   </div>
                 </template>
               </el-tab-pane>
             </el-tabs>
           </div>
-          <router-view v-if="isAlive"></router-view>
+          <router-view v-slot="{ Component }" v-if="isAlive">
+            <!-- TODO文件缓存 点进文件掉createtabs生成tab -->
+            <KeepAlive>
+              <component :is="Component" />
+            </KeepAlive>
+          </router-view>
         </el-main>
       </el-container>
     </el-container>
@@ -163,26 +170,26 @@ const wangzhi = import.meta.env.VITE_APP_BASE_API;
 const isAlive = ref(true);
 //--------tabs-----------------
 let tabIndex = 2;
-const editableTabsValue = ref("2");
-const editableTabs = ref([]);
+const editableTabsValue = ref("/index");
+const editableTabs = ref([{ label: "会话消息", path: "/index" }]);
 
-const removeTab = (targetName) => {
-  const tabs = editableTabs.value;
-  let activeName = editableTabsValue.value;
-  if (activeName === targetName) {
-    tabs.forEach((tab, index) => {
-      if (tab.name === targetName) {
-        const nextTab = tabs[index + 1] || tabs[index - 1];
-        if (nextTab) {
-          activeName = nextTab.name;
-        }
-      }
-    });
-  }
+// const removeTab = (targetName) => {
+//   const tabs = editableTabs.value;
+//   let activeName = editableTabsValue.value;
+//   if (activeName === targetName) {
+//     tabs.forEach((tab, index) => {
+//       if (tab.name === targetName) {
+//         const nextTab = tabs[index + 1] || tabs[index - 1];
+//         if (nextTab) {
+//           activeName = nextTab.name;
+//         }
+//       }
+//     });
+//   }
 
-  editableTabsValue.value = activeName;
-  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
-};
+//   editableTabsValue.value = activeName;
+//   editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
+// };
 //-------------------------
 
 function reload() {
@@ -342,14 +349,49 @@ const menuList = reactive({
   ],
 });
 const clickPath = (index, items) => {
-  console.log("items", items);
-  // clickId.value = index;
-  console.log("editableTabs", editableTabs.value);
+  items = toRaw(items);
+  // console.log("items", items);
+  // editableTabs.value = arr;
   const arr = toRaw(editableTabs.value);
-  console.log("arr", arr);
-  editableTabs.value = arr.push({ label: items.label, path: items.path });
-  console.log("editableTabs", editableTabs.value);
+  if (!arr.some((item) => item.label == items.label)) {
+    editableTabs.value.push({ label: items.label, path: items.path });
+    //需要jSON去转 否则页面无变化 离谱得很
+    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
+  }else{
+    clickTab(items.path)
+  }
+    editableTabsValue.value = items.path
+  // console.log("editableTabs", editableTabs.value);
 };
+const clickTab = (item) => {
+  console.log("item", toRaw(item));
+  let regExp = new RegExp(/^\//)
+  if (!regExp.test(toRaw(item))) {
+    const data = JSON.parse(toRaw(item))
+    console.log('data',data);
+    router.push({
+        path: "/fileEdit",
+        query: {
+          clickRowId: data.docId,
+          copyRow: JSON.stringify(data),
+        },
+      });
+  } else {
+    router.push({
+      path: item,
+    });
+  }
+};
+//创建tab标签事件
+const addTab = (data) => {
+  const arr = toRaw(editableTabs.value);
+  if (!arr.some((item) => item.label == data.fileName)) {
+    editableTabs.value.push({ label: data.fileName, path: JSON.stringify(data) });
+    //需要jSON去转 否则页面无变化 离谱得很
+    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
+  }
+};
+provide("addTab", addTab);
 </script>
 
 <style lang="scss" scoped>
@@ -430,6 +472,11 @@ const clickPath = (index, items) => {
   border-radius: 4px 4px 4px 4px;
   background-color: #fff;
   margin-bottom: 8px;
+  .demo-tabs {
+    height: 32px;
+    // display: flex;
+    // align-items: center;
+  }
   .tab_pane {
     display: flex;
     align-items: center;
@@ -442,15 +489,18 @@ const clickPath = (index, items) => {
   }
 }
 :deep(.demo-tabs .el-tabs__item) {
-  height: 32px !important;
+  height: 24px !important;
   padding: 0px 8px !important;
+  margin-top: 4px !important;
+  margin-left: 4px !important;
+  border: 1px solid #c1cce3 !important;
   color: #505870 !important;
   font-size: 12px !important;
-  line-height: 32px;
+  line-height: 24px;
   font-weight: 400 !important;
 }
 // tag选中颜色
-:deep( .demo-tabs .el-tabs__item.is-active) {
+:deep(.demo-tabs .el-tabs__item.is-active) {
   color: #fff !important;
   font-weight: normal;
   background-color: #6f85b5;

src/router/index.js

@@ -172,6 +172,14 @@ export const constantRoutes = [{
 					icon: "department"
 				}
 			},{
+				path: "/fileEdit",
+				component: () => import("@/views/myfile/components/FileEdit.vue"),
+				name: "fileEdit",
+				meta: {
+					title: "文件预览",
+					icon: "department"
+				}
+			},{
 				path: "/allback",
 				component: () => import("@/views/highSearch/SupplierAllBack.vue"),
 				name: "allback",

src/views/highSearch/HighSearch.vue

@@ -92,7 +92,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, inject } from "vue";
 import { search } from "@/api/search/search.js";
 import FileEdit from "@/views/myfile/components/FileEdit.vue";
 // import IdentifyFont from "@/components/IdentifyFont/IdentifyFont.vue";
@@ -183,8 +183,10 @@ const setScroll = async () => {
     beEnd.value = true;
   }
 };
+const addTab = inject("addTab");
 // 预览事件
 const toPreview = (item) => {
+  addTab(item.content.docInfo);
   console.log("item", item);
   clickRowId.value = item.content.docInfo.docId;
   copyRow.value = item.content.docInfo;

src/views/myfile/components/FileEdit.vue

@@ -1,120 +1,138 @@
 <template>
-    <div>
-        <div class='qualityManual-container-office'>
-            <jjtOnlyOffice :option='option' />
-        </div>
+  <div>
+    <div class="qualityManual-container-office">
+      <jjtOnlyOffice :option="option" />
     </div>
+  </div>
 </template>
 
 <script>
-import { ref, onMounted,defineEmits  } from 'vue'
-import jjtOnlyOffice from '@/components/OnlyOffice/index.vue'
-import useUserStore from '@/store/modules/user'
+import { ref, onMounted, defineEmits } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import jjtOnlyOffice from "@/components/OnlyOffice/index.vue";
+import useUserStore from "@/store/modules/user";
 // import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import {
-    listInfo,
-    getInfo,
-    delInfo,
-    addInfo,
-    updateInfo
+  listInfo,
+  getInfo,
+  delInfo,
+  addInfo,
+  updateInfo,
 } from "@/api/biz/info";
 export default {
-    props: {
-        docId: {
-            type: Number, // 这里的类型应该匹配你要传递的数据类型
-            required: true, // 如果这个属性是必须的，请添加此项
-        },
-        copyRow: {//点击外层列表的哪项数据
-            type: Object,
-            required: true
-        },
-        historyPrew:{
-            Boolean,
-            default:false
-        },
-        historycopyRow:{//点击历史预览的哪项数据
-            type: Object,
-            default:()=>{}
-        },
-        onlyView:{
-            Boolean,
-            default:false
-        },
+  props: {
+    docId: {
+      type: Number, // 这里的类型应该匹配你要传递的数据类型
+    //   required: true, // 如果这个属性是必须的，请添加此项
     },
-    setup(props) {
-        let docId = props.docId;
-        let copyRow = props.copyRow
-        let option = ref({
-            key: '',
-            url: '', //在线文档地址
-            isEdit: props.onlyView, //是否允许编辑
-            fileType: '', //文件扩展名
-            title: '', //文件标题
-            user: {
-                id: null, //用户ID
-                name: '' //用户姓名
-            },
-            userdata: "",
-            editUrl: '' //回调地址
-        })
-        let show = ref(true)
-        let newObj = ref({})
-        function oo(docId, isEdit) {
-            if(docId&&!props.historyPrew){ 
-                getInfo(docId).then(response => {
-                const obj = response.data;
-                obj.isEdit =isEdit;
-                newObj.value = obj
-                option.value.isEdit = obj.isEdit
-                option.value.url=`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/access/${obj.fileId}`;
-                option.value.title = obj.fileName;
-                option.value.key = obj.fileId;
-                option.value.fileType = obj.fileType.replace(".", "");
-                option.value.editUrl = `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/only-office/callback/${obj.docId}?name=${useUserStore().uname}`;
-                option.value.user = {
-                    id: useUserStore().uid, //用户ID
-                    name: useUserStore().uname //用户姓名
-                };
-            });
-            }else if(docId&&props.historyPrew){
-                option.value.isEdit=false
-                option.value.url =`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/access/${props.historycopyRow.fileId}`
-                option.value.title =  props.copyRow.fileName
-                option.value.key =props.historycopyRow.fileId;
-                option.value.fileType = props.copyRow.fileType.replace(".", "");
-                option.value.editUrl = `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/only-office/callback/${props.docId}?name=${useUserStore().uname}`;
-                option.value.user = {
-                    id: useUserStore().uid, //用户ID
-                    name: useUserStore().uname //用户姓名
-                };
-                // const emit = defineEmits(["cancleHistoryPrew"]);
-                // emit("cancleHistoryPrew",false);
-                // console.log(option.value,'option3===');
-            }
-            
-        }
-        /** 修改按钮操作 */
-        function edit() { 
-            oo(docId, true);
-        }
-        onMounted(() => {
-            console.log(docId, 'doc');
-            console.log(copyRow, 'row');
-            edit()
-            // let row = JSON.parse(newObj.value)
-            // console.log(row, '852');
-        })
-        return {
-            option,
-            show,
-            newObj,
-        }
-
+    copyRow: {
+      //点击外层列表的哪项数据
+      type: Object,
+    //   required: true,
+    },
+    historyPrew: {
+      Boolean,
+      default: false,
+    },
+    historycopyRow: {
+      //点击历史预览的哪项数据
+      type: Object,
+      default: () => {},
     },
-    components: {
-        jjtOnlyOffice,
+    onlyView: {
+      Boolean,
+      default: false,
     },
-}
+  },
+  setup(props) {
+    let docId = props.docId || '';
+    let copyRow = props.copyRow || '';
+    const router = useRouter(); //注册路由
+    const route = useRoute();
+    let option = ref({
+      key: "",
+      url: "", //在线文档地址
+      isEdit: props.onlyView, //是否允许编辑
+      fileType: "", //文件扩展名
+      title: "", //文件标题
+      user: {
+        id: null, //用户ID
+        name: "", //用户姓名
+      },
+      userdata: "",
+      editUrl: "", //回调地址
+    });
+    let show = ref(true);
+    let newObj = ref({});
+    function oo(docId, isEdit) {
+      if (docId && !props.historyPrew) {
+        getInfo(docId).then((response) => {
+          const obj = response.data;
+          obj.isEdit = isEdit;
+          newObj.value = obj;
+          option.value.isEdit = obj.isEdit;
+          option.value.url = `${window.location.origin}${
+            import.meta.env.VITE_APP_BASE_API
+          }/api/access/${obj.fileId}`;
+          option.value.title = obj.fileName;
+          option.value.key = obj.fileId;
+          option.value.fileType = obj.fileType.replace(".", "");
+          option.value.editUrl = `${window.location.origin}${
+            import.meta.env.VITE_APP_BASE_API
+          }/only-office/callback/${obj.docId}?name=${useUserStore().uname}`;
+          option.value.user = {
+            id: useUserStore().uid, //用户ID
+            name: useUserStore().uname, //用户姓名
+          };
+        });
+      } else if (docId && props.historyPrew) {
+        option.value.isEdit = false;
+        option.value.url = `${window.location.origin}${
+          import.meta.env.VITE_APP_BASE_API
+        }/api/access/${props.historycopyRow.fileId}`;
+        option.value.title = props.copyRow.fileName;
+        option.value.key = props.historycopyRow.fileId;
+        option.value.fileType = props.copyRow.fileType.replace(".", "");
+        option.value.editUrl = `${window.location.origin}${
+          import.meta.env.VITE_APP_BASE_API
+        }/only-office/callback/${props.docId}?name=${useUserStore().uname}`;
+        option.value.user = {
+          id: useUserStore().uid, //用户ID
+          name: useUserStore().uname, //用户姓名
+        };
+        // const emit = defineEmits(["cancleHistoryPrew"]);
+        // emit("cancleHistoryPrew",false);
+        // console.log(option.value,'option3===');
+      }
+    }
+    /** 修改按钮操作 */
+    function edit() {
+      oo(docId, true);
+    }
+    onMounted(() => {
+      let route = useRoute(); 
+      console.log('route',route.query);
+      if(route.query.clickRowId){
+          docId = route.query.clickRowId
+          copyRow = JSON.parse(route.query.copyRow)
+      }
+      console.log(docId, "doc");
+      console.log(copyRow, "row");
+      edit();
+      // let row = JSON.parse(newObj.value)
+      // console.log(row, '852');
+    });
+    return {
+      option,
+      show,
+      newObj,
+      route
+    };
+  },
+  components: {
+    jjtOnlyOffice,
+  },
+};
 </script>
 
 <style scoped></style>