byte-sailing-new/src/views/connect/E-mail/mail/com/left.vue

<template>
  <div class="left">
    <div class="top">
      <el-dropdown>
        <span class="mail">
          {{ selectMail.mailUser }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in mailList"
              :key="item.id"
              @click="handleClickMail(item)"
              >{{ item.mailUser }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-tabs v-model="activeName" class="demo-tabs" stretch>
        <el-tab-pane label="邮箱" name="first">
          <template #label>
            <span>邮箱</span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="联系人" name="second">
          <template #label>
            <span>联系人</span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="客户" name="third">
          <template #label>
            <span>客户</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div>
        <el-button type="primary" style="width: 100%" @click="handleGoWrite"
          >写信</el-button
        >
      </div>
    </div>
    <div class="body">
      <div v-if="activeName === 'first'">
        <ul class="mail-menu">
          <li
            class="menu-item"
            v-bind:class="{ 'select-menu': item.id === selectFloderId }"
            v-for="item in selectMail.mailFolderInfoList"
            :key="item.id"
            @click="handleOpenMenu(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div v-if="activeName === 'second'">b</div>
      <div v-if="activeName === 'third'">c</div>
    </div>
  </div>
</template>

<script setup>
import useMailStore from "@/store/modules/mail";
const mailStore = useMailStore();
const { proxy } = getCurrentInstance();
let selectMail = ref({});
let activeName = ref("first");
let selectFloderId = ref("");
const mailList = ref([]);
const getMialList = () => {
  proxy.get("/mailService/getUserEmailList").then((res) => {
    mailList.value = res.data;
    if (mailList.value.length) {
      selectMail.value = mailList.value[0];
      mailStore.selectMail = mailList.value[0];
      if (selectMail.value.mailFolderInfoList.length > 0) {
        handleOpenMenu(selectMail.value.mailFolderInfoList[0]);
      }
    }
  });
};

const handleClickMail = (item) => {
  selectMail.value = item;
  mailStore.selectMail = item;
};

const handleOpenMenu = (item) => {
  selectFloderId.value = item.id;
  const menu = {
    title: item.name,
    type: selectMail.value.type,
    folderId: item.id,
    id: "floder" + "," + item.id,
  };
  // 如没有这个菜单则push
  const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
  if (menuItem === undefined) {
    mailStore.mailMenuList.push(menu);
  }
  // 更新当前选择的tab数据和tab的Id值
  mailStore.currentMenu = menu;
  mailStore.currentId = menu.id;
};

const handleGoWrite = () => {
  const menu = {
    title: "写信",
    type: selectMail.value.type,
    id: "write",
  };
  const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
  if (menuItem === undefined) {
    mailStore.mailMenuList.push(menu);
  }
  mailStore.currentMenu = menu;
  mailStore.currentId = menu.id;
};

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

<style lang="scss" scoped>
.left {
  font-size: 14px;
  .top {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    .mail {
      color: black;
      font-weight: 700;
      font-size: 14px;
    }
  }
  .body {
    padding: 10px;
    .mail-menu {
      list-style: none;
      margin-block-start: 0;
      margin-block-end: 0;
      padding: 0px;
      .menu-item {
        font-weight: 700;
        padding-left: 10px;
        font-size: 12px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 3px;
        color: #696969;
        cursor: pointer;
        &:hover {
          background: #ddedfe;
        }
      }
    }
  }
}
.select-menu {
  background: #ddedfe;
  color: #169bd5 !important;
}
</style>