xmhjc-front-end/connect/E-mail/mail/com/main.vue

<template>
  <div class="container">
    <el-tabs
      v-model="activeMenu"
      closable
      :stretch="false"
      type="card"
      @tab-remove="handleTabRemove"
      @tab-change="handleTabChange"
    >
      <el-tab-pane
        v-for="(item, index) in menuList"
        :key="index"
        :label="item.title"
        :name="item.id"
      >
        <div class="main">
          <mailList
            v-show="item.id.includes('folder')"
            :ref="'folder' + index"
          ></mailList>
          <mailDetail
            v-show="item.id.includes('detail')"
            :ref="'detail' + index"
          ></mailDetail>
          <mailWrite
            v-show="item.id.includes('write')"
            :ref="'write' + index"
          ></mailWrite>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import mailList from "./mailList.vue";
import mailDetail from "./mailDetail.vue";
import mailWrite from "./mailWrite.vue";

import useMailStore from "@/store/modules/mail";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, watch } from "vue";

const mailStore = useMailStore();
const { proxy } = getCurrentInstance();
const menuList = ref([]);
let activeMenu = ref("");
// 订阅监听
mailStore.$subscribe((mutations, state) => {
  activeMenu.value = state.currentId;
  menuList.value = state.mailMenuList;
});

const handleTabRemove = (id) => {
  const clickIndex = menuList.value.findIndex((x) => x.id === id);
  let currentMenu = {};
  if (menuList.value.length > 1) {
    // 如果删除的是当前菜单
    if (activeMenu.value === id) {
      if (menuList.value.length > clickIndex + 1) {
        currentMenu = menuList.value[clickIndex + 1];
      } else {
        currentMenu = menuList.value[clickIndex - 1];
      }
      // 更新store值
      mailStore.currentMenu = currentMenu;
      mailStore.currentId = currentMenu.id;
    }
    menuList.value.splice(clickIndex, 1);
  } else {
    return ElMessage({
      message: "最后一个标签页啦！",
      type: "info",
    });
  }
};

const checkType = (menu, type) => {
  // if (type == "write") return;
  const index = menuList.value.findIndex((x) => x.id === activeMenu.value);
  const dom = type + index.toString();
  nextTick(() => {
    if (type == "write") {
      proxy.$refs[dom][0].initFn();
    } else {
      proxy.$refs[dom][0].initFn();
    }
  });
};

const handleTabChange = (val) => {
  const currentMenu = menuList.value.find((x) => x.id === val);
  mailStore.$patch({
    currentId: val,
    currentMenu: currentMenu,
  });
  // 判断是文件夹还是邮件详情
  let type = "";
  if (currentMenu.id.includes("folder")) {
    type = "folder";
    // 如果更换的是文件夹菜单则更新左侧样式
    proxy.$emit("changeFloderId", currentMenu.folderId);
  } else if (currentMenu.id.includes("detail")) {
    type = "detail";
  } else {
    type = "write";
  }
  checkType(currentMenu, type);
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.container {
  .main {
    height: calc(100vh - 180px);
    overflow: auto;
  }
}
</style>