cloudfile-ui/src/layout/indexCommon.vue

<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="
                    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="
                  $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="
                    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
              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> -->
                  <router-link
                    :key="item"
                    :data-path="item.path"
                    :to="{
                      path: item.path,
                      query: {row:item.clickRowId},
                    }"
                    @click="paneClick(item)"
                    class="tags-view-item"
                  >
                  {{item.label}}
                  </router-link>
                </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>
</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`,
    // src: `${window.location.origin}/fileEdit?clickRowId=1197`,
    src: ``,
    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 = `${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;
}
</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;
  }
}
</style>