cloudfile-ui/src/layout/components/TopMenu/TopMenu.vue

<template>
  <div class="TopMenu">
    <div class="logo" @click="toIndex">
      <img :src="LOGO" alt="" />
      <span class="name">{{ TITLE }}</span>
    </div>
    <div class="menu">
      <div class="menuList">
        <div class="oneMenu finger" @click="openTab('我的文件', '/myfile')">
          <img src="@/assets/images/newIndex/users.png" alt="" />
          <span>我的文件</span>
        </div>
        <div class="oneMenu finger" @click="openTab('收藏文件', '/collect')">
          <img src="@/assets/images/newIndex/collect.png" alt="" />
          <span>收藏文件</span>
        </div>
        <div class="oneMenu finger" @click="showMoreMenu">
          <img src="@/assets/images/newIndex/more.png" alt="" />
          <span>更多</span>
        </div>
      </div>
      <div v-if="showMore" class="moreMenu">
        <div
          v-for="item in menuList"
          class="oneBox"
          :key="item.name"
          @click="openTab(item.name, item.path)"
        >
          <img :src="item.imgs" alt="" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="user">
      <div
        class="AIBot hand"
        v-if="showAi"
        @click="openTab('智聚AI', '/aipage')"
      >
        <img src="@/assets/images/newIndex/bot.png" alt="" />
        <span>智聚AI</span>
      </div>
      <!-- <img
        src="@/assets/images/newIndex/p2w.png"
        @click="openTab('Pdf转Word', '/camera')"
        class="hand"
        alt=""
      /> -->
      <img
        src="@/assets/images/newIndex/p2w.png"
        @click="openTab('Pdf转Word', '/pdf2word')"
        class="hand"
        alt=""
      />
      <img
        src="@/assets/images/newIndex/OCR.png"
        @click="openTab('文字识别', '/identifyFont')"
        class="hand"
        alt=""
      />
      <div class="clockBox">
        <img
          src="@/assets/images/newIndex/clock.png"
          @click="openTab('会话消息', '/chat')"
          class="hand"
          alt=""
        />
        <span class="yuandian" v-if="hasNewMessage"></span>
      </div>
      <img
        v-if="hasRole"
        src="@/assets/images/newIndex/setting.png"
        @click="openTab('系统管理', systemPath.path)"
        class="hand"
        alt=""
      />
      <div class="userInfo" @click="changeShowMenu">
        <span>{{ userStore.name }}</span>
        <img v-if="!showMenu" src="@/assets/images/newIndex/arrow.png" alt="" />
        <img
          v-else
          class="upArrow"
          src="@/assets/images/newIndex/arrow.png"
          alt=""
        />
      </div>
      <div class="menu" v-if="showMenu">
        <div class="oneBox hand" @click="openTab('个人中心', '/user/profile')">
          <img src="@/assets/images/newIndex/userInfo.png" alt="" />
          <span>个人中心</span>
        </div>
        <div class="oneBox hand" @click="logout">
          <img src="@/assets/images/newIndex/edit.png" alt="" />
          <span>退出登录</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 扫描文档 -->
  <ScanFile
    v-if="openScan"
    :openScan="openScan"
    :scannerFiles="scannerFiles"
    @saveScanFile="saveScanFile"
    @closeOpen="closeOpen"
  ></ScanFile>
  <!-- 可用扫描仪信息 -->
  <div>
    <el-dialog v-model="checkScanner" title="扫描仪" width="30%">
      <div v-if="scannerList.length==0">请联系管理员先添加扫描仪设备</div>
      <div v-if="scannerList.length>0" style="margin-bottom: 10px;">请选择扫描仪设备</div>
      <div v-if="scannerList.length>0"
        v-for="item in scannerList"
        :key="item.scannerId"
        @click="checkScanFn(item)"
        id="Onescan"
        :class="checkScanId==item.scannerId?'hand Onescan checkScan':'hand Onescan'"
      >
        <img src="@/assets/images/scanImg.png" alt="" />
        {{ item.scannerName }}
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeCheckScanner">取消</el-button>
          <el-button v-if="scannerList.length>0" type="primary" @click="sureScaner">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 扫描文件移动到 -->
  <MoveTo
    v-if="openScanMove"
    :spaceType="3"
    :scanFileArr="scanFileArr"
    :thisFolder="thisFolder"
    :openScanMove="openScanMove"
    :spaceId="spaceId"
    @closeOpenScanMove="closeOpenScanMove"
  ></MoveTo>
</template>

<script setup>
import {
  nextTick,
  onMounted,
  onBeforeMount,
  provide,
  ref,
  watchEffect,
  watch,
} from "vue";
import { canChat } from "@/api/chatglm/chatglm.js";
import bebumen from "@/assets/images/bebumen.png";
import common from "@/assets/images/becommon.png";
import manyBody from "@/assets/images/manyBodyFalse.png";
import useUserStore from "@/store/modules/user";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
import { getConfigKey } from "@/api/system/config.js";
import ScanFile from "@/components/ScanFile/ScanFile.vue";
import MoveTo from "@/components/MoveTo/MoveTo.vue";
import myfile from "@/api/myfile/myfile";
import useWebsoctStore from "@/store/modules/websocket";
import { listInfo, selectInfo, getFileByScanerId } from "@/api/scanner/info.js";
const websoctStore = useWebsoctStore();
const LOGO = import.meta.env.VITE_APP_LOGO;
const TITLE = import.meta.env.VITE_APP_TITLE;
const activeScannerClass=ref('hand Onescan')
const menuList = ref([
  {
    name: "部门文件",
    icon: "@/assets/images/newIndex/users.png",
    path: "/department",
    imgs: bebumen,
  },
  {
    name: "公共文件",
    icon: "@/assets/images/newIndex/collect.png",
    path: "/publicment",
    imgs: common,
  },
  {
    name: "协作",
    icon: "@/assets/images/newIndex/more.png",
    path: "/myjoin",
    imgs: manyBody,
  },
]);
const props = defineProps({
  systemPath: {
    type: Object,
    default: () => {},
  },
  hasRole: {
    type: Boolean,
    default: false,
  },
});
const userStore = useUserStore();
const showMore = ref(false); // 是否显示更多菜单
const showMenu = ref(false); // 是否显示用户菜单
const scannerList = ref(); // 扫描仪数据
const checkScanId = ref(); // 选中的scan的id
const checkScanner = ref(false); //显示扫描仪选择框
const scannerFiles = ref([]); //选择的扫描仪的文件
const openScanMove = ref(false);
const openScan = ref(false); //控制扫描文档显示
const scanFileArr = ref([]); //认领的扫描文件数组
const hasNewMessage = ref(false);
const showAi = ref(false);
const emit = defineEmits(["openMaxmin", "goIndex"]);
// 鼠标移入 显示更多菜单
const showMoreMenu = () => {
  if (!showMore.value) {
    setTimeout(() => {
      showMore.value = true;
    }, 200);
  }
};
const hideMoreMenu = () => {
  if (showMore.value) {
    setTimeout(() => {
      showMore.value = false;
    }, 0);
  }
};
//
const changeShowMenu = () => {
  showMenu.value = true;
};
const hideShowMenu = () => {
  if (showMenu.value) {
    setTimeout(() => {
      showMenu.value = false;
    }, 0);
  }
};
//打开/新建标签
const openTab = (title, path) => {
  emit("openMaxmin", title, path);
};
//logo点击事件 回到首页
const toIndex = () => {
  emit("goIndex");
};
// 判断是否可以使用ai
const canChatFn = async () => {
  const res = await canChat();
  showAi.value = res;
};
//退出
function logout() {
  setTimeout(() => {
    var el = document.querySelector(".is-message-box");
    el.style.zIndex = 9999999;
  }, 200);
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customStyle: { zIndex: 9999999 },
  })
    .then(() => {
      sessionStorage.clear();
      localStorage.setItem("passArr", "");
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}
//获取扫描仪列表
const scannerFile = async () => {
  const res = await selectInfo();
  scannerList.value = res.rows;
  checkScanner.value = true;
  checkScanId.value = scannerList.value.length>0 ? scannerList.value[0].scannerId : null;
  // console.log('scanner',res);
};
// 选择扫描仪
const checkScanFn = (item) => {
  checkScanId.value = item.scannerId;
};
// 确认选择扫描仪 获取扫描仪下文件列表
const sureScaner = async () => {
  if (!checkScanId.value) return;
  const res = await getFileByScanerId(checkScanId.value);
  // console.log("sureScanerres", res);
  scannerFiles.value = res.data;
  checkScanner.value = false;
  openScan.value = true;
};
// 关闭窗口
const closeCheckScanner = () => {
  checkScanner.value = false;
};
const closeOpen = () => {
  openScan.value = false;
};
// 移动到事件
const saveScanFile = (arr) => {
  // console.log("arr", arr);
  openScan.value = false;
  scanFileArr.value = arr;
  openScanMove.value = true;
};
// 关闭窗口
const closeOpenScanMove = () => {
  openScanMove.value = false;
  // refreshFile();
};
let lisetenMessageTime = null;
onMounted(() => {
  canChatFn();
  document.addEventListener("click", (e) => {
    if (e.target.className !== "oneMenu finger") {
      hideMoreMenu();
    }
  });
  window.addEventListener("click", hideShowMenu, true);
  //红点相关
  clearInterval(lisetenMessageTime);
  lisetenMessageTime = setInterval(() => {
    let tmplist = localStorage.getItem("noreadlist");
    if (tmplist == null || tmplist == "") {
      hasNewMessage.value = false;
      return;
    }
    tmplist = JSON.parse(tmplist);
    if (tmplist != null) hasNewMessage.value = true;
    else hasNewMessage.value = false;
  }, 1000);
});
watchEffect(async () => {
  if (websoctStore.noReadList != null) hasNewMessage.value = true;
  else hasNewMessage.value = false;
  // console.log("===============websoctStore.noReadList：",websoctStore.noReadList,'===========',hasNewMessage.value)
});
</script>

<style lang="scss" scoped>
.TopMenu {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  //   align-items: center;
}
.logo {
  width: 266px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  img {
    width: 66px;
    height: 100%;
    margin-right: 8px;
  }
  .name {
    font-size: 20px;
    font-family: Inter-LOGO;
    // line-height: 28px;
    color: #fff;
  }
}
.menu {
  width: 350px;
  height: 48px;
  position: relative;
  font-family: Inter-Medium;
  .menuList {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .oneMenu {
      display: flex;
      align-items: center;
      span {
        color: #fff;
        font-size: 16px;
        // font-weight: bold;
      }
    }
  }
  .moreMenu {
    width: 250px;
    // height: 280px;
    background-color: #fff;
    border-radius: 12px;
    position: absolute;
    bottom: -110px;
    right: -130px;
    display: flex;
    font-size: 14px;
    color: #030102;
    // font-weight: 500;
    padding: 10px;
    justify-content: space-around;
    z-index: 1000000;
    .oneBox {
      width: 68px;
      height: 84px;
      border-radius: 8px 8px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      img {
        width: 48px;
        height: 48px;
        margin-top: 6px;
        // border: 1px solid #d0d6e6;
        border-radius: 8px 8px 8px 8px;
      }
      &:hover {
        background-color: #f5f7f9;
      }
    }
  }
}
.user {
  // width: 220px;
  height: 44px;
  position: relative;
  display: flex;
  justify-content: space-around;
  font-family: Inter-Medium;
  .clockBox {
    position: relative;
    .yuandian {
      width: 8px;
      height: 8px;
      position: absolute;
      right: 20px;
      top: 6px;
      background: #fa5151;
      border-radius: 4px;
    }
  }
  .AIBot {
    width: 105px;
    height: 44px;
    margin-right: 12px;
    padding: 10px;
    background: linear-gradient(96deg, #bddcff 0%, #d2f7ff 100%);
    border-radius: 8px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 24px;
      height: 24px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
      color: #464df8;
    }
  }
  img {
    margin-right: 12px;
  }
  .userInfo {
    width: 134px;
    height: 44px;
    border-radius: 51px;
    cursor: pointer;
    border: 1px solid #edf0fa;
    color: #fff;
    font-size: 16px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .upArrow {
      transform: rotate(180deg);
    }
  }
  .menu {
    position: absolute;
    top: 120%;
    right: 0;
    width: 140px;
    height: 96px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 3px 26px 1px rgba(191, 191, 191, 0.25),
      0px 2px 3px 0px rgba(210, 210, 210, 0.25);
    .oneBox {
      width: 110px;
      height: 36px;
      display: flex;
      padding: 0 8px;
      align-items: center;
      justify-content: space-between;
      .img {
        width: 20px;
        height: 20px;
      }
      span {
        font-weight: 500;
        font-size: 14px;
        color: #0d0f39;
      }
      &:hover {
        background: #f5f7f9;
      }
    }
  }
}
.finger {
  cursor: pointer;
}
.checkScan {
  background-color: #cbe5ff !important;
  border-bottom: 1px solid #9b9bdf;
}
.Onescan {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  display: flex;
  align-items: center;
  background-color: #f1f1f7;
  margin-bottom: 5px;
}
.hand {
  cursor: pointer;
}
:deep(.el-overlay) {
  z-index: 99999999 !important;
}
// 底部标签样式
</style>