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

<template>
  <div v-loading="loading" class="box">
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="handleReply('10')">回 复</el-button>
      <el-button type="warning" @click="handleReply('20')">转 发</el-button>
    </div>
    <div class="top">
      <div class="top-row">
        <div class="label">发 件 人：</div>
        <div class="value">
          <span
            v-for="item in replyTo"
            :key="item.id"
            style="margin-right: 10px"
          >
            {{ item.email || item.personalName }}</span
          >
        </div>
      </div>
      <div class="top-row">
        <div class="label">收 件 人：</div>
        <div class="value">
          <span v-for="item in to" :key="item.id" style="margin-right: 10px">{{
            item.email || item.personalName
          }}</span>
        </div>
      </div>
      <div class="top-row" v-if="cc && cc.length > 0">
        <div class="label">抄 送 人：</div>
        <div class="value">
          <span v-for="item in cc" :key="item.id" style="margin-right: 10px">
            {{ item.email || item.personalName }}</span
          >
        </div>
      </div>
      <div class="top-row" v-if="bcc && bcc.length > 0">
        <div class="label">密 送 人：</div>
        <div class="value">
          <span v-for="item in bcc" :key="item.id" style="margin-right: 10px">
            {{ item.email || item.personalName }}</span
          >
        </div>
      </div>
      <div class="top-row">
        <div class="label">时 间：</div>
        <div class="value">
          {{ time }}
        </div>
      </div>
      <div class="top-row" v-if="fileList && fileList.length > 0">
        <div class="label">附 件：</div>
        <div class="value">
          <div
            v-for="(item, index) in fileList"
            style="margin-right: 20px; display: flex; align-items: center"
            :key="index"
          >
            <span style="cursor: pointer" @click="handleClickFile(item)">{{
              item.name
            }}</span>
            <span
              style="margin-left: 8px; cursor: pointer"
              @click="handleClickDownload(item)"
              ><el-icon color="#0084FF"><Download /></el-icon
            ></span>
          </div>
        </div>
      </div>
    </div>

    <div class="body">
      <iframe
        frameborder="0"
        allowTransparency="true"
        style="
          width: 99% !important;
          overflow-x: scroll;
          padding-top: 10px;
          height: 500px;
        "
        :srcdoc="showBodyText(detailsData.data.content)"
        :ref="'iframeText_' + mailStore.currentId"
        :id="'iframeText_' + mailStore.currentId"
      >
      </iframe>
    </div>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import useMailStore from "@/store/modules/mail";
const { proxy } = getCurrentInstance();
const mailStore = useMailStore();
let loading = ref(false);
const detailsData = reactive({
  data: {},
});
const to = ref([]);
const cc = ref([]);
const bcc = ref([]);
const replyTo = ref([]);
const fileList = ref([]);
const requestData = ref({});
const time = ref("");
const getDetails = () => {
  loading.value = true;
  proxy
    .post("/mailService/getMessageDetail", {
      type: mailStore.currentMenu.type,
      messageId: mailStore.currentMenu.messageId,
    })
    .then((res) => {
      if (mailStore.currentMenu.time) {
        time.value = mailStore.currentMenu.time;
      }

      detailsData.data = res;
      to.value = res.messageAddressList.filter((x) => x.type === 1);
      cc.value = res.messageAddressList.filter((x) => x.type === 2);
      bcc.value = res.messageAddressList.filter((x) => x.type === 3);
      replyTo.value = res.messageAddressList.filter((x) => x.type === 4);
      fileList.value = res.messageAttachmentList;
      loading.value = false;
    });
};

const showBodyText = (text) => {
  if (text) {
    let val = JSON.parse(JSON.stringify(text));
    val = val.replace("body {", "tbody {");
    val = val.replace(
      "td, p, li, th {",
      "tbody td, tbody p, tbody li, tbody th {"
    );
    val = val.replace(
      /<p>/g,
      '<p style="margin-block-start: 0; margin-block-end: 0;">'
    );
    return val;
  } else {
    return text;
  }
};

const init = () => {
  getDetails();
};

onMounted(() => {
  // init();
});

const handleReply = (pageType) => {
  // pageType 10为回复  20为转发  0为写信
  let title = "";
  if (pageType === "10") {
    title = "回复";
  } else if (pageType === "20") {
    title = "转发";
  }
  const menu = {
    title: title,
    type: mailStore.currentMenu.type,
    id: "write",
    pageType: pageType,
    details: {
      ...detailsData.data,
      ...mailStore.currentMenu.row,
    },
  };
  const index = mailStore.mailMenuList.findIndex((x) => x.id === menu.id);
  if (index >= 0) {
    mailStore.mailMenuList[index] = menu;
  } else {
    mailStore.mailMenuList.push(menu);
  }
  mailStore.currentMenu = menu;
  mailStore.currentId = menu.id;
};

const handleClickFile = (file) => {
  const path = file.path ? file.path : file.url ? file.url : "";
  if (path) {
    window.open(path, "_blank");
  }
};

const handleClickDownload = (file) => {
  let xhr = new XMLHttpRequest();
  //域名是华为云的
  xhr.open("GET", `${file.url}`, true);
  xhr.responseType = "blob";
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let url = window.URL.createObjectURL(xhr.response);
      const a = document.createElement("a");
      a.href = url;
      a.download = file.fileName; // 下载后文件名
      a.style.display = "none";
      document.body.appendChild(a);
      a.click(); // 点击下载
      window.URL.revokeObjectURL(a.href);
      document.body.removeChild(a); // 下载完成移除元素
    }
  };
};

defineExpose({
  initFn: init,
});
</script>

<style lang="scss" scoped>
.box {
  padding: 0 10px;
  font-size: 12px;
  .top {
    padding: 10px;
    background: #f1f1f1;
    .top-row {
      display: flex;
      margin-bottom: 10px;
      .label {
        min-width: 60px;
        color: #999999;
        text-align: right;
      }
      .value {
        flex: 1;
        color: #333333;
        font-weight: 700;
        margin-right: 10px;
        display: flex;
      }
    }
  }
}
</style>