修改iframe相关问题

src/layout/indexCommon.vue

@@ -1,798 +1,800 @@
 <template>
-  <div class="common-layout">
-    <el-container>
-      <el-header
-        class="nav"
-        style="position: sticky; top: 0; left: 0; width: 100%; z-index: 999"
-      >
-        <div class="nav-top">
-          <div>
-            <img class="logoImg" src="@/assets/images/logos.png" /><span
-              >聚合智慧文档管理系统</span
-            >
-          </div>
-          <div class="search">
-            <el-input
-              v-model="searchText"
-              maxlength="32"
-              class="w-50 m-2"
-              size="small"
-              placeholder="搜索文件"
-              suffix-icon="Search"
-              clearable
-              @change="toSearch"
-              @@keyup.enter="toSearch"
-            />
-          </div>
-          <div>
-            <el-dropdown
-              @command="handleCommand"
-              class="right-menu-item hover-effect"
-              trigger="click"
-            >
-              <div class="avatar-wrapper">
-                <img
-                  :src="
+	<div class="common-layout">
+		<el-container>
+			<el-header class="nav" style="position: sticky; top: 0; left: 0; width: 100%; z-index: 999">
+				<div class="nav-top">
+					<div>
+						<img class="logoImg" src="@/assets/images/logos.png" /><span>聚合智慧文档管理系统</span>
+					</div>
+					<div class="search">
+						<el-input v-model="searchText" maxlength="32" class="w-50 m-2" size="small" placeholder="搜索文件"
+							suffix-icon="Search" clearable @change="toSearch" @@keyup.enter="toSearch" />
+					</div>
+					<div>
+						<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+							<div class="avatar-wrapper">
+								<img :src="
                     userStore.avatar
                       ? userStore.avatar
                       : '@/assets/images/profile.png'
-                  "
-                  class="head-img"
-                /><span>{{ userStore.name }}</span>
-              </div>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <router-link to="/user/profile">
-                    <el-dropdown-item>个人中心</el-dropdown-item>
-                  </router-link>
-                  <el-dropdown-item divided command="logout">
-                    <span>退出登录</span>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
-        </div>
-      </el-header>
-      <el-container>
-        <el-aside width="92px" class="asides">
-          <div class="aside-con">
-            <router-link
-              :to="item.path"
-              v-for="(item, index) in menuList.data"
-              :key="index"
-              @click="clickPath(index, item)"
-              ><div
-                style="position: relative"
-                :class="
+                  " class="head-img" /><span>{{ userStore.name }}</span>
+							</div>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<router-link to="/user/profile">
+										<el-dropdown-item>个人中心</el-dropdown-item>
+									</router-link>
+									<el-dropdown-item divided command="logout">
+										<span>退出登录</span>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+				</div>
+			</el-header>
+			<el-container>
+				<el-aside width="92px" class="asides">
+					<div class="aside-con">
+						<router-link :to="item.path" v-for="(item, index) in menuList.data" :key="index"
+							@click="clickPath(index, item)">
+							<div style="position: relative" :class="
                   $route.path == item.path
                     ? 'acitve-img-style img-style'
                     : 'img-style'
-                "
-              >
-                <img
-                  :src="$route.path == item.path ? item.beimgs : item.imgs"
-                />
-                <div class="text-style" v-if="$route.path != item.path">
-                  {{ item.label }}
-                </div>
-                <span
-                  class="yuandian"
-                  v-if="
+                ">
+								<img :src="$route.path == item.path ? item.beimgs : item.imgs" />
+								<div class="text-style" v-if="$route.path != item.path">
+									{{ item.label }}
+								</div>
+								<span class="yuandian" v-if="
                     websoctStore.messOne?.fromId &&
                     item.path == '/index' &&
                     $route.path != item.path &&
                     clickId !== index
-                  "
-                ></span>
-              </div> </router-link
-            ><br />
-          </div>
-        </el-aside>
-        <el-main class="main">
-          <div class="tab_box">
-            <!-- <el-tabs
+                  "></span>
+							</div>
+						</router-link><br />
+					</div>
+				</el-aside>
+				<el-main class="main">
+					<div class="tab_box">
+						<!-- <el-tabs
               v-model="editableTabsValue"
               @tab-change="clickTab"
               @tab-add="addTab"
               type="card"
               class="common-tabs"
             > -->
-            <el-tabs
-              v-model="editableTabsValue"
-              @tab-add="addTab"
-              type="card"
-              class="common-tabs"
-            >
-              <el-tab-pane label="首页"> </el-tab-pane>
-              <el-tab-pane
-                v-for="(item, index) in toRaw(editableTabs)"
-                :key="item.path"
-                :label="item.label"
-                :name="item.path"
-                :data-item="JSON.stringify(item)"
-              >
-                <template #label>
-                  <div class="tab_pane" @click="paneClick(item)">
-                    <div class="tab_text">{{ item.label }}</div>
-                    <img
-                      src="@/assets/images/close.png"
-                      @click="closeTab(item, index, $event)"
-                      alt=""
-                    />
-                  </div>
-                </template>
-              </el-tab-pane>
-              <!-- 文件的iframe -->
-              <div v-for="item in iFrameData" :key="item.id">
-                <el-tab-pane :label="item.name" v-if="item.src">
-                  <template #label>
-                    <div class="tab_pane" @click="filePaneClick(item)">
-                      <div class="tab_text">{{ item.name }}</div>
-                      <img
-                        src="@/assets/images/close.png"
-                        @click="closeFileTab(item, index, $event)"
-                        alt=""
-                      />
-                    </div>
-                  </template>
-                </el-tab-pane>
-              </div>
-            </el-tabs>
-          </div>
-          <div v-show="isAlive">
-            <router-view v-slot="{ Component }">
-              <KeepAlive :exclude="['identifyFont', 'allback', 'search']">
-                <component :is="Component" />
-              </KeepAlive>
-            </router-view>
-          </div>
-          <div v-show="!isAlive" style="width: 100%">
-            <div v-for="item in iFrameData" :key="item.id">
-              <div style="width: 100%" v-show="item.show">
-                <iframe
-                  :src="item.src"
-                  frameborder="0"
-                  :id="`iframe${item.id}`"
-                  width="100%"
-                  height="1000px"
-                  class="iframeBox"
-                  v-show="item.show"
-                ></iframe>
-              </div>
-            </div>
-          </div>
-        </el-main>
-      </el-container>
-    </el-container>
-  </div>
+						<el-tabs v-model="editableTabsValue" @tab-add="addTab" type="card" class="common-tabs">
+							<el-tab-pane label="首页"> </el-tab-pane>
+							<el-tab-pane v-for="(item, index) in toRaw(editableTabs)" :key="item.path"
+								:label="item.label" :name="item.path" :data-item="JSON.stringify(item)">
+								<template #label>
+									<div class="tab_pane" @click="paneClick(item)">
+										<div class="tab_text">{{ item.label }}</div>
+										<img src="@/assets/images/close.png" @click="closeTab(item, index, $event)"
+											alt="" />
+									</div>
+								</template>
+							</el-tab-pane>
+							<!-- 文件的iframe -->
+							<div v-for="item in iFrameData" :key="item.id">
+								<el-tab-pane :label="item.name" v-if="item.src">
+									<template #label>
+										<div class="tab_pane" @click="filePaneClick(item)">
+											<div class="tab_text">{{ item.name }}</div>
+											<img src="@/assets/images/close.png"
+												@click="closeFileTab(item, index, $event)" alt="" />
+										</div>
+									</template>
+								</el-tab-pane>
+							</div>
+						</el-tabs>
+					</div>
+					<div v-show="isAlive">
+						<router-view v-slot="{ Component }">
+							<KeepAlive :exclude="['identifyFont', 'allback', 'search']">
+								<component :is="Component" />
+							</KeepAlive>
+						</router-view>
+					</div>
+					<div v-show="!isAlive" style="width: 100%">
+						<div v-for="item in iFrameData" :key="item.id">
+							<div style="width: 100%" v-show="item.show">
+								<iframe :src="item.src" frameborder="0" :id="`iframe${item.id}`" width="100%"
+									height="800px" class="iframeBox" v-show="item.show"></iframe>
+							</div>
+						</div>
+					</div>
+				</el-main>
+			</el-container>
+		</el-container>
+	</div>
 </template>
 
 <script setup>
-import { nextTick, onMounted, provide, ref } from "vue";
-import { ElMessageBox, ElMessage } from "element-plus";
-import useAppStore from "@/store/modules/app";
-import useUserStore from "@/store/modules/user";
-import useSettingsStore from "@/store/modules/settings";
-import Cookies from "js-cookie";
-import chat from "@/assets/images/chat.png";
-import bechat from "@/assets/images/bechat.png";
-import zuijin from "@/assets/images/zuijin.png";
-import bezuijin from "@/assets/images/bezuijin.png";
-import colloect from "@/assets/images/colloect.png";
-import becolloect from "@/assets/images/becolloect.png";
-import system from "@/assets/images/system.png";
-import issystem from "@/assets/images/issystem.png";
-import my from "@/assets/images/my.png";
-import bemy from "@/assets/images/bemy.png";
-import bumen from "@/assets/images/bumen.png";
-import bebumen from "@/assets/images/bebumen.png";
-import common from "@/assets/images/common.png";
-import becommon from "@/assets/images/becommon.png";
-import chuanshu from "@/assets/images/chuanshu.png";
-import bechuanshu from "@/assets/images/bechuanshu.png";
-import highsearch from "@/assets/images/highsearch.png";
-import behighsearch from "@/assets/images/behighsearch.png";
-import manyBody from "@/assets/images/manyBody.png";
-import manyBodyFalse from "@/assets/images/manyBodyFalse.png";
-import { AppMain, Navbar, Settings, TagsView } from "./components";
-import { flieSearch } from "@/api/search/search.js";
-import { useRouter, useRoute } from "vue-router";
-import useWebsoctStore from "@/store/modules/websocket";
-import { toRaw } from "@vue/reactivity";
-import iFrame from "@/components/iFrame/index.vue";
-const websoctStore = useWebsoctStore();
-const router = useRouter(); //注册路由
-const route = useRoute();
-const appStore = useAppStore();
-const userStore = useUserStore();
-const settingsStore = useSettingsStore();
-const searchText = ref(""); //搜索ipt的值
-const selectValue = ref(1); //文档空间类型
-const wangzhi = import.meta.env.VITE_APP_BASE_API;
-const isAlive = ref(true);
-const toFileData = ref();
-const uid = useUserStore().uid;
-const iFrameData = ref([
-  {
-    id: 1,
-    src: `http://192.168.1.9:81/fileEdit?clickRowId=1197`,
-    show: false,
-    name: "file1",
-  },
-  {
-    id: 2,
-    src: ``,
-    // src: `http://192.168.1.9:81/fileEdit?clickRowId=1198`,
-    show: false,
-    name: "file2",
-  },
-  {
-    id: 3,
-    src: ``,
-    show: false,
-    name: "",
-  },
-  {
-    id: 4,
-    src: ``,
-    show: false,
-    name: "",
-  },
-]);
-//--------tabs-----------------
-let tabIndex = 2;
-const editableTabsValue = ref("/index");
-const editableTabs = ref([]);
-
-// 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);
-// };
-//-------------------------
-
-function reload() {
-  isAlive.value = false;
-  console.log(11);
-  nextTick(() => {
-    isAlive.value = true;
-  });
-}
-
-provide("reload", reload);
-
-function toggleSideBar() {
-  appStore.toggleSideBar();
-}
-const logingName = ref("");
-onMounted(() => {
-  logingName.value = Cookies.get("username");
-  // console.log('router',router)
-});
-function handleCommand(command) {
-  switch (command) {
-    case "setLayout":
-      setLayout();
-      break;
-    case "logout":
-      logout();
-      break;
-    default:
-      break;
-  }
-}
-
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      userStore.logOut().then(() => {
-        location.href = "/index";
-      });
-    })
-    .catch(() => {});
-}
-
-// 跳转到全文搜索
-const toSearch = async () => {
-  if (!searchText.value) return;
-  // console.log('searchText = ',searchText.value);
-  const query = {
-    keyword: searchText.value,
-    isAsc: "asc",
-    orderByColumn: "createTime",
-    pageSize: 3,
-    pageNum: 1,
-  };
-  const res = await flieSearch(query);
-  // console.log("res", res);
-  if (res) {
-    // console.log("res", res);
-    // console.log("router", route.path);
-    if (route.path != "/search") {
-      router.push({
-        path: "/search",
-        query: {
-          searchData: JSON.stringify(res),
-          searchText: searchText.value,
-        },
-      });
-    } else {
-      router.replace({
-        path: "/allback",
-        query: {
-          searchData: JSON.stringify(res),
-          searchText: searchText.value,
-        },
-      });
-    }
-  }
-};
-const emits = defineEmits(["setLayout"]);
-function setLayout() {
-  emits("setLayout");
-}
-const clickId = ref("");
-const menuList = reactive({
-  data: [
-    {
-      label: "会话消息",
-      path: "/index",
-      imgs: chat,
-      beimgs: bechat,
-    },
-    // {
-    //   label: "接口",
-    //   path: "/swagger",
-    //   imgs: chat,
-    //   beimgs: bechat,
-    //   disabled:true
-    // },
-    {
-      label: "最近文件",
-      path: "/recent",
-      imgs: zuijin,
-      beimgs: bezuijin,
-    },
-    {
-      label: "收藏文件",
-      path: "/collect",
-      imgs: colloect,
-      beimgs: becolloect,
-    },
-    {
-      label: "我的文件",
-      path: "/myfile",
-      imgs: my,
-      beimgs: bemy,
-    },
-    {
-      label: "部门文件",
-      path: "/department",
-      imgs: bumen,
-      beimgs: bebumen,
-    },
-    {
-      label: "公共文件",
-      path: "/publicment",
-      imgs: common,
-      beimgs: becommon,
-    },
-    {
-      label: "高级搜索",
-      path: "/highsearch",
-      imgs: highsearch,
-      beimgs: behighsearch,
-    },
-    {
-      label: "传输列表",
-      path: "/transFile",
-      imgs: chuanshu,
-      beimgs: bechuanshu,
-    },
-    {
-      label: "系统管理",
-      path: "/admin",
-      imgs: system,
-      beimgs: issystem,
-    },
-    {
-      label: "我的协作",
-      path: "/myjoin",
-      imgs: manyBody,
-      beimgs: manyBodyFalse,
-    },
-  ],
-});
-const clickPath = (index, items) => {
-  items = toRaw(items);
-  // toFileData.value = null
-  console.log("clickPathitems", items);
-  // editableTabs.value = arr;
-  const arr = toRaw(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 {
-    toFileData.value = null;
-    clickTab(items.path);
-  }
-  editableTabsValue.value = items.path;
-  // console.log("editableTabs", editableTabs.value);
-};
-const clickTab = (item) => {
-  console.log("item", toRaw(item));
-  setTimeout(() => {
-    console.log("toFileData.value", toFileData.value);
-    if (toFileData.value) {
-      console.log(
-        "tofolder",
-        JSON.stringify(toRaw(toFileData.value.clickRowId))
-      );
-      router.push({
-        path: toFileData.value.path,
-        query: {
-          row: JSON.stringify(toRaw(toFileData.value.clickRowId)),
-        },
-      });
-      // router.push({
-      //   path: toFileData.value.path,
-      //   query: {
-      //     row: toFileData.value.row,
-      //   },
-      // });
-      return;
-    }
-    let regExp = new RegExp(/^\//);
-    let regFile = new RegExp(/^tofile/);
-    if (!regExp.test(toRaw(item))) {
-      const data = JSON.parse(toRaw(item));
-      console.log("data", data);
-      router.push({
-        // path: "/fileEdit" + data.docId,
-        path: "/fileEdit",
-        query: {
-          clickRowId: data.docId,
-          // row:JSON.stringify(toFileData.value)
-          // copyRow: JSON.stringify(data),
-        },
-      });
-    } else {
-      router.push({
-        path: item,
-      });
-    }
-  }, 0);
-};
-const paneClick = (item) => {
-  // 可以拿到当前的标签对象
-  isAlive.value = true;
-  console.log("paneItem", item);
-  if (item.clickRowId) {
-    // 判断是菜单还是目录
-    toFileData.value = item;
-  } else {
-    toFileData.value = null;
-  }
-  clickTab(item.path);
-  console.log("isAlive", isAlive.value);
-};
-// 点击文件标签
-const filePaneClick = (item) => {
-  console.log("filePaneClickitem", item);
-  const row = toRaw(item);
-  const arr = iFrameData.value.map((par) => {
-    if (par.id === row.id) {
-      par.show = true;
-      // document.getElementById('iframe'+par.id).window.document.iframe[0]
-      const outIframe = document.getElementById("iframe" + par.id);
-      const inIframe =
-        outIframe.contentDocument.getElementsByTagName("iframe")[0];
-      setTimeout(() => {
-        inIframe.style.height = outIframe.style.height =
-          outIframe.parentElement.offsetHeight + "px";
-        inIframe.style.width = outIframe.style.width =
-          outIframe.parentElement.offsetWidth + "px";
-
-        // console.log('dom',outIframe.parentElement.offsetWidth);
-        // console.log('inIframe',inIframe);
-      }, 500);
-    } else {
-      par.show = false;
-    }
-    return toRaw(par);
-  });
-  iFrameData.value = arr;
-  // console.log("Clicknewfilearr", iFrameData.value);
-  isAlive.value = false;
-  // console.log("isAlive", isAlive.value);
-};
-// 创建文件的标签
-const addFileTab = (data) => {
-  console.log("fileTabdata", data);
-  const thisData = toRaw(data);
-  const oldIFrameData = iFrameData.value;
-  const canAdd = oldIFrameData.some((par) => par.src == "");
-  if (!canAdd) return ElMessage.error("已到最大数量，请先关闭其他文件！");
-  const arr = oldIFrameData.map((par) => {
-    if (!par.src) {
-      if (thisData.docId) {
-        par.src = `http://192.168.1.9:81/fileEdit?clickRowId=${thisData.docId}`;
-        par.name = data.fileName;
-        thisData.docId = "";
-      }
-    }
-    return toRaw(par);
-  });
-  iFrameData.value = arr;
-  console.log("addFileTab", arr);
-};
-//创建tab标签事件
-const addTab = (data) => {
-  console.log("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),
-    // });
-    editableTabs.value.push({
-      label: data.fileName,
-      path: JSON.stringify(data),
-    });
-    //需要jSON去转 否则页面无变化 离谱得很
-    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
-    // editableTabsValue.value = data.path;
-  }
-};
-const addFolderAdd = (data) => {
-  console.log("data", data);
-  const arr = toRaw(editableTabs.value);
-  if (!arr.some((item) => item.label == data.row.dirName)) {
-    editableTabs.value.push({
-      label: data.name,
-      path: data.path,
-      clickRowId: data.row,
-    });
-    //需要jSON去转 否则页面无变化 离谱得很
-    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
-  }
-  console.log("editableTabs", toRaw(editableTabs.value));
-};
-provide("addTab", addTab);
-provide("addFolderAdd", addFolderAdd);
-provide("addFileTab", addFileTab);
-// TODO 删除tab事件
-const closeTab = (item, index, e) => {
-  e.preventDefault();
-  e.stopPropagation();
-  editableTabs.value.splice(index, 1);
-  editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
-  const nextTab =
-    editableTabs.value[index + 1] || editableTabs.value[index - 1];
-  clickTab(nextTab.path);
-  // console.log("item", item);
-  // console.log("index", index);
-  // console.log("e", e);
-};
-// TODO 删除tab事件
-const closeFileTab = (item, index, e) => {
-  e.preventDefault();
-  e.stopPropagation();
-  const data = toRaw(item);
-  console.log("closeFileTab", data);
-  const arr = iFrameData.value.map((par) => {
-    if (par.id === data.id) {
-      par.src = "";
-      par.show = false;
-      par.name = "";
-    }
-    return toRaw(par);
-  });
-  iFrameData.value = arr;
-  // console.log("index", index);
-  // console.log("e", e);
-};
+	import {
+		nextTick,
+		onMounted,
+		provide,
+		ref
+	} from "vue";
+	import {
+		ElMessageBox,
+		ElMessage
+	} from "element-plus";
+	import useAppStore from "@/store/modules/app";
+	import useUserStore from "@/store/modules/user";
+	import useSettingsStore from "@/store/modules/settings";
+	import Cookies from "js-cookie";
+	import chat from "@/assets/images/chat.png";
+	import bechat from "@/assets/images/bechat.png";
+	import zuijin from "@/assets/images/zuijin.png";
+	import bezuijin from "@/assets/images/bezuijin.png";
+	import colloect from "@/assets/images/colloect.png";
+	import becolloect from "@/assets/images/becolloect.png";
+	import system from "@/assets/images/system.png";
+	import issystem from "@/assets/images/issystem.png";
+	import my from "@/assets/images/my.png";
+	import bemy from "@/assets/images/bemy.png";
+	import bumen from "@/assets/images/bumen.png";
+	import bebumen from "@/assets/images/bebumen.png";
+	import common from "@/assets/images/common.png";
+	import becommon from "@/assets/images/becommon.png";
+	import chuanshu from "@/assets/images/chuanshu.png";
+	import bechuanshu from "@/assets/images/bechuanshu.png";
+	import highsearch from "@/assets/images/highsearch.png";
+	import behighsearch from "@/assets/images/behighsearch.png";
+	import manyBody from "@/assets/images/manyBody.png";
+	import manyBodyFalse from "@/assets/images/manyBodyFalse.png";
+	import {
+		AppMain,
+		Navbar,
+		Settings,
+		TagsView
+	} from "./components";
+	import {
+		flieSearch
+	} from "@/api/search/search.js";
+	import {
+		useRouter,
+		useRoute
+	} from "vue-router";
+	import useWebsoctStore from "@/store/modules/websocket";
+	import {
+		toRaw
+	} from "@vue/reactivity";
+	import iFrame from "@/components/iFrame/index.vue";
+	const websoctStore = useWebsoctStore();
+	const router = useRouter(); //注册路由
+	const route = useRoute();
+	const appStore = useAppStore();
+	const userStore = useUserStore();
+	const settingsStore = useSettingsStore();
+	const searchText = ref(""); //搜索ipt的值
+	const selectValue = ref(1); //文档空间类型
+	const wangzhi = import.meta.env.VITE_APP_BASE_API;
+	const isAlive = ref(true);
+	const toFileData = ref();
+	const uid = useUserStore().uid;
+	const iFrameData = ref([{
+			id: 1,
+			// src: `${window.location.origin}/fileEdit?clickRowId=113`,
+			show: false,
+			name: "file1",
+		},
+		{
+			id: 2,
+			src: ``,
+			// src: `http://192.168.1.9:81/fileEdit?clickRowId=1198`,
+			show: false,
+			name: "file2",
+		},
+		{
+			id: 3,
+			src: ``,
+			show: false,
+			name: "",
+		},
+		{
+			id: 4,
+			src: ``,
+			show: false,
+			name: "",
+		},
+	]);
+	//--------tabs-----------------
+	let tabIndex = 2;
+	const editableTabsValue = ref("/index");
+	const editableTabs = ref([]);
+
+	// 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);
+	// };
+	//-------------------------
+
+	function reload() {
+		isAlive.value = false;
+		console.log(11);
+		nextTick(() => {
+			isAlive.value = true;
+		});
+	}
+
+	provide("reload", reload);
+
+	function toggleSideBar() {
+		appStore.toggleSideBar();
+	}
+	const logingName = ref("");
+	onMounted(() => {
+		logingName.value = Cookies.get("username");
+		// console.log('router',router)
+	});
+
+	function handleCommand(command) {
+		switch (command) {
+			case "setLayout":
+				setLayout();
+				break;
+			case "logout":
+				logout();
+				break;
+			default:
+				break;
+		}
+	}
+
+	function logout() {
+		ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+				confirmButtonText: "确定",
+				cancelButtonText: "取消",
+				type: "warning",
+			})
+			.then(() => {
+				userStore.logOut().then(() => {
+					location.href = "/index";
+				});
+			})
+			.catch(() => {});
+	}
+
+	// 跳转到全文搜索
+	const toSearch = async () => {
+		if (!searchText.value) return;
+		// console.log('searchText = ',searchText.value);
+		const query = {
+			keyword: searchText.value,
+			isAsc: "asc",
+			orderByColumn: "createTime",
+			pageSize: 3,
+			pageNum: 1,
+		};
+		const res = await flieSearch(query);
+		// console.log("res", res);
+		if (res) {
+			// console.log("res", res);
+			// console.log("router", route.path);
+			if (route.path != "/search") {
+				router.push({
+					path: "/search",
+					query: {
+						searchData: JSON.stringify(res),
+						searchText: searchText.value,
+					},
+				});
+			} else {
+				router.replace({
+					path: "/allback",
+					query: {
+						searchData: JSON.stringify(res),
+						searchText: searchText.value,
+					},
+				});
+			}
+		}
+	};
+	const emits = defineEmits(["setLayout"]);
+
+	function setLayout() {
+		emits("setLayout");
+	}
+	const clickId = ref("");
+	const menuList = reactive({
+		data: [{
+				label: "会话消息",
+				path: "/index",
+				imgs: chat,
+				beimgs: bechat,
+			},
+			// {
+			//   label: "接口",
+			//   path: "/swagger",
+			//   imgs: chat,
+			//   beimgs: bechat,
+			//   disabled:true
+			// },
+			{
+				label: "最近文件",
+				path: "/recent",
+				imgs: zuijin,
+				beimgs: bezuijin,
+			},
+			{
+				label: "收藏文件",
+				path: "/collect",
+				imgs: colloect,
+				beimgs: becolloect,
+			},
+			{
+				label: "我的文件",
+				path: "/myfile",
+				imgs: my,
+				beimgs: bemy,
+			},
+			{
+				label: "部门文件",
+				path: "/department",
+				imgs: bumen,
+				beimgs: bebumen,
+			},
+			{
+				label: "公共文件",
+				path: "/publicment",
+				imgs: common,
+				beimgs: becommon,
+			},
+			{
+				label: "高级搜索",
+				path: "/highsearch",
+				imgs: highsearch,
+				beimgs: behighsearch,
+			},
+			{
+				label: "传输列表",
+				path: "/transFile",
+				imgs: chuanshu,
+				beimgs: bechuanshu,
+			},
+			{
+				label: "系统管理",
+				path: "/admin",
+				imgs: system,
+				beimgs: issystem,
+			},
+			{
+				label: "我的协作",
+				path: "/myjoin",
+				imgs: manyBody,
+				beimgs: manyBodyFalse,
+			},
+		],
+	});
+	const clickPath = (index, items) => {
+		items = toRaw(items);
+		// toFileData.value = null
+		console.log("clickPathitems", items);
+		// editableTabs.value = arr;
+		const arr = toRaw(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 {
+			toFileData.value = null;
+			clickTab(items.path);
+		}
+		editableTabsValue.value = items.path;
+		// console.log("editableTabs", editableTabs.value);
+	};
+	const clickTab = (item) => {
+		console.log("item", toRaw(item));
+		setTimeout(() => {
+			console.log("toFileData.value", toFileData.value);
+			if (toFileData.value) {
+				console.log(
+					"tofolder",
+					JSON.stringify(toRaw(toFileData.value.clickRowId))
+				);
+				router.push({
+					path: toFileData.value.path,
+					query: {
+						row: JSON.stringify(toRaw(toFileData.value.clickRowId)),
+					},
+				});
+				// router.push({
+				//   path: toFileData.value.path,
+				//   query: {
+				//     row: toFileData.value.row,
+				//   },
+				// });
+				return;
+			}
+			let regExp = new RegExp(/^\//);
+			let regFile = new RegExp(/^tofile/);
+			if (!regExp.test(toRaw(item))) {
+				const data = JSON.parse(toRaw(item));
+				console.log("data", data);
+				router.push({
+					// path: "/fileEdit" + data.docId,
+					path: "/fileEdit",
+					query: {
+						clickRowId: data.docId,
+						// row:JSON.stringify(toFileData.value)
+						// copyRow: JSON.stringify(data),
+					},
+				});
+			} else {
+				router.push({
+					path: item,
+				});
+			}
+		}, 0);
+	};
+	const paneClick = (item) => {
+		// 可以拿到当前的标签对象
+		isAlive.value = true;
+		console.log("paneItem", item);
+		if (item.clickRowId) {
+			// 判断是菜单还是目录
+			toFileData.value = item;
+		} else {
+			toFileData.value = null;
+		}
+		clickTab(item.path);
+		console.log("isAlive", isAlive.value);
+	};
+	// 点击文件标签
+	const filePaneClick = (item) => {
+		console.log("filePaneClickitem", item);
+		const row = toRaw(item);
+		const arr = iFrameData.value.map((par) => {
+			if (par.id === row.id) {
+				par.show = true;
+				// document.getElementById('iframe'+par.id).window.document.iframe[0]
+				const outIframe = document.getElementById("iframe" + par.id);
+				const inIframe =
+					outIframe.contentDocument.getElementsByTagName("iframe")[0];
+				setTimeout(() => {
+					console.error(outIframe.parentElement);
+					inIframe.style.height = outIframe.style.height =
+						outIframe.parentElement.offsetHeight + "px";
+					inIframe.style.width = outIframe.style.width =
+						outIframe.parentElement.offsetWidth + "px";
+
+					// console.log('dom',outIframe.parentElement.offsetWidth);
+					// console.log('inIframe',inIframe);
+				}, 500);
+			} else {
+				par.show = false;
+			}
+			return toRaw(par);
+		});
+		iFrameData.value = arr;
+		// console.log("Clicknewfilearr", iFrameData.value);
+		isAlive.value = false;
+		// console.log("isAlive", isAlive.value);
+	};
+	// 创建文件的标签
+	const addFileTab = (data) => {
+		console.log("fileTabdata", data);
+		const thisData = toRaw(data);
+		const oldIFrameData = iFrameData.value;
+		const canAdd = oldIFrameData.some((par) => par.src == "");
+		if (!canAdd) return ElMessage.error("已到最大数量，请先关闭其他文件！");
+		const arr = oldIFrameData.map((par) => {
+			if (!par.src) {
+				if (thisData.docId) {
+					par.src = `${window.location.origin}/fileEdit?clickRowId=${thisData.docId}`;
+					par.name = data.fileName;
+					thisData.docId = "";
+				}
+			}
+			return toRaw(par);
+		});
+		iFrameData.value = arr;
+		console.log("addFileTab", arr);
+	};
+	//创建tab标签事件
+	const addTab = (data) => {
+		console.log("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),
+			// });
+			editableTabs.value.push({
+				label: data.fileName,
+				path: JSON.stringify(data),
+			});
+			//需要jSON去转 否则页面无变化 离谱得很
+			editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
+			// editableTabsValue.value = data.path;
+		}
+	};
+	const addFolderAdd = (data) => {
+		console.log("data", data);
+		const arr = toRaw(editableTabs.value);
+		if (!arr.some((item) => item.label == data.row.dirName)) {
+			editableTabs.value.push({
+				label: data.name,
+				path: data.path,
+				clickRowId: data.row,
+			});
+			//需要jSON去转 否则页面无变化 离谱得很
+			editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
+		}
+		console.log("editableTabs", toRaw(editableTabs.value));
+	};
+	provide("addTab", addTab);
+	provide("addFolderAdd", addFolderAdd);
+	provide("addFileTab", addFileTab);
+	// TODO 删除tab事件
+	const closeTab = (item, index, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		editableTabs.value.splice(index, 1);
+		editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
+		const nextTab =
+			editableTabs.value[index + 1] || editableTabs.value[index - 1];
+		clickTab(nextTab.path);
+		// console.log("item", item);
+		// console.log("index", index);
+		// console.log("e", e);
+	};
+	// TODO 删除tab事件
+	const closeFileTab = (item, index, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const data = toRaw(item);
+		console.log("closeFileTab", data);
+		const arr = iFrameData.value.map((par) => {
+			if (par.id === data.id) {
+				par.src = "";
+				par.show = false;
+				par.name = "";
+			}
+			return toRaw(par);
+		});
+		iFrameData.value = arr;
+		// console.log("index", index);
+		// console.log("e", e);
+	};
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/mixin.scss";
-@import "@/assets/styles/variables.module.scss";
-//整体布局css
-.common-layout,
-.el-container {
-  height: 94vh;
-}
-:deep .el-main {
-  --el-main-padding: 8px !important;
-}
-.nav {
-  background: #06286c;
-  height: 48px;
-  .nav-top {
-    width: 98%;
-    display: flex;
-    justify-content: space-between;
-    & > div:first-child {
-      font-family: "Inter-SemiBold";
-    }
-    & > div:first-child,
-    & > div:last-child {
-      display: flex;
-      align-items: center;
-      color: #fff;
-      & > img {
-        width: 48px;
-        height: 48px;
-      }
-    }
-    .logoImg {
-      width: 150px !important;
-      height: 100%;
-      margin-right: 10px;
-    }
-  }
-  .head-img {
-    border-radius: 12px;
-    width: 24px;
-    height: 24px;
-    margin-right: 10px;
-  }
-  .avatar-wrapper {
-    color: #fff;
-    display: flex;
-    align-items: center;
-  }
-  .search {
-    .w-50,
-    :deep .el-input {
-      width: 400px;
-      height: 32px;
-      border-radius: 4px;
-      margin-top: 8px;
-      background: #6f85b5 !important;
-      --el-input-border-color: #6f85b5;
-    }
-    ::v-deep .el-input__inner {
-      color: #fff !important;
-    }
-  }
-  :deep .el-input__wrapper {
-    background: #1f3f7e !important;
-  }
-}
-
-.asides {
-  padding: 8px 10px !important;
-  font-size: 14px;
-  color: #000;
-  background: #fff;
-}
-.main {
-  background: #c7cbd8;
-}
-// tabs标签
-.tab_box {
-  width: 100%;
-  height: 32px;
-  border-radius: 4px 4px 4px 4px;
-  background-color: #fff;
-  margin-bottom: 8px;
-  .common-tabs {
-    height: 32px;
-    // display: flex;
-    // align-items: center;
-  }
-  .tab_pane {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    img {
-      margin-left: 8px;
-      width: 10px;
-      height: 10px;
-    }
-  }
-}
-:deep(.common-tabs .el-tabs__item) {
-  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: 24px;
-  font-weight: 400 !important;
-}
-// tag选中颜色
-:deep(.common-tabs .el-tabs__item.is-active) {
-  color: #fff !important;
-  font-weight: normal;
-  background-color: #6f85b5;
-}
-//侧边栏css
-.acitve-img-style {
-  background-color: #f5f7f9;
-  border-radius: 4px;
-}
-.img-style {
-  width: 72px;
-  height: 72px;
-  display: flex;
-  margin-bottom: 8px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  & > img {
-    width: 40px;
-    height: 40px;
-  }
-}
-.text-style {
-  text-align: center;
-  color: #000;
-}
+	@import "@/assets/styles/mixin.scss";
+	@import "@/assets/styles/variables.module.scss";
+
+	//整体布局css
+	.common-layout,
+	.el-container {
+		height: 94vh;
+	}
+
+	:deep .el-main {
+		--el-main-padding: 8px !important;
+	}
+
+	.nav {
+		background: #06286c;
+		height: 48px;
+
+		.nav-top {
+			width: 98%;
+			display: flex;
+			justify-content: space-between;
+
+			&>div:first-child {
+				font-family: "Inter-SemiBold";
+			}
+
+			&>div:first-child,
+			&>div:last-child {
+				display: flex;
+				align-items: center;
+				color: #fff;
+
+				&>img {
+					width: 48px;
+					height: 48px;
+				}
+			}
+
+			.logoImg {
+				width: 150px !important;
+				height: 100%;
+				margin-right: 10px;
+			}
+		}
+
+		.head-img {
+			border-radius: 12px;
+			width: 24px;
+			height: 24px;
+			margin-right: 10px;
+		}
+
+		.avatar-wrapper {
+			color: #fff;
+			display: flex;
+			align-items: center;
+		}
+
+		.search {
+
+			.w-50,
+			:deep .el-input {
+				width: 400px;
+				height: 32px;
+				border-radius: 4px;
+				margin-top: 8px;
+				background: #6f85b5 !important;
+				--el-input-border-color: #6f85b5;
+			}
+
+			::v-deep .el-input__inner {
+				color: #fff !important;
+			}
+		}
+
+		:deep .el-input__wrapper {
+			background: #1f3f7e !important;
+		}
+	}
+
+	.asides {
+		padding: 8px 10px !important;
+		font-size: 14px;
+		color: #000;
+		background: #fff;
+	}
+
+	.main {
+		background: #c7cbd8;
+	}
+
+	// tabs标签
+	.tab_box {
+		width: 100%;
+		height: 32px;
+		border-radius: 4px 4px 4px 4px;
+		background-color: #fff;
+		margin-bottom: 8px;
+
+		.common-tabs {
+			height: 32px;
+			// display: flex;
+			// align-items: center;
+		}
+
+		.tab_pane {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			img {
+				margin-left: 8px;
+				width: 10px;
+				height: 10px;
+			}
+		}
+	}
+
+	:deep(.common-tabs .el-tabs__item) {
+		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: 24px;
+		font-weight: 400 !important;
+	}
+
+	// tag选中颜色
+	:deep(.common-tabs .el-tabs__item.is-active) {
+		color: #fff !important;
+		font-weight: normal;
+		background-color: #6f85b5;
+	}
+
+	//侧边栏css
+	.acitve-img-style {
+		background-color: #f5f7f9;
+		border-radius: 4px;
+	}
+
+	.img-style {
+		width: 72px;
+		height: 72px;
+		display: flex;
+		margin-bottom: 8px;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		&>img {
+			width: 40px;
+			height: 40px;
+		}
+	}
+
+	.text-style {
+		text-align: center;
+		color: #000;
+	}
 </style>
 <style lang="scss" scoped>
-.el-popper.is-light.type_popper {
-  background-color: #1f3f7e !important;
-  border-radius: 4px 4px 4px 4px !important;
-  border: none !important;
-  // padding: 0 16px !important;
-  // box-sizing: border-box !important;
-}
-.el-popper__arrow::before {
-  content: none;
-}
-//鼠标移动上去的选中色
-.type_popper {
-  .el-select-dropdown__item.hover,
-  .el-select-dropdown__item:hover {
-    background: #6f85b5 !important;
-  }
-  //下拉框的文本颜色
-  .el-select-dropdown__item {
-    color: #a4b0d8 !important;
-  }
-  //选中之后的颜色
-  .el-select-dropdown__item.selected {
-    background: #6f85b5 !important;
-    color: #fff !important;
-  }
-}
-.yuandian {
-  width: 8px;
-  height: 8px;
-  position: absolute;
-  right: 8px;
-  top: 6px;
-  background: #fa5151;
-  border-radius: 4px;
-}
-::v-deep .qualityManual-container-office {
-  width: 1000px !important;
-  height: 1000px !important;
-  iframe {
-    width: 1000px !important;
-    height: 1000px !important;
-  }
-}
+	.el-popper.is-light.type_popper {
+		background-color: #1f3f7e !important;
+		border-radius: 4px 4px 4px 4px !important;
+		border: none !important;
+		// padding: 0 16px !important;
+		// box-sizing: border-box !important;
+	}
+
+	.el-popper__arrow::before {
+		content: none;
+	}
+
+	//鼠标移动上去的选中色
+	.type_popper {
+
+		.el-select-dropdown__item.hover,
+		.el-select-dropdown__item:hover {
+			background: #6f85b5 !important;
+		}
+
+		//下拉框的文本颜色
+		.el-select-dropdown__item {
+			color: #a4b0d8 !important;
+		}
+
+		//选中之后的颜色
+		.el-select-dropdown__item.selected {
+			background: #6f85b5 !important;
+			color: #fff !important;
+		}
+	}
+
+	.yuandian {
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		right: 8px;
+		top: 6px;
+		background: #fa5151;
+		border-radius: 4px;
+	}
+
+	::v-deep .qualityManual-container-office {
+		width: 1000px !important;
+		height: 1000px !important;
+
+		iframe {
+			width: 1000px !important;
+			height: 1000px !important;
+		}
+	}
 </style>