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

<template>
  <div v-loading="loading" class="box">
    <div
      style="
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      "
    >
      <el-button
        :disabled="currentMailIndex === 0"
        @click="handleChangeEail('10')"
        >上一封</el-button
      >
      <el-button
        :disabled="currentMailIndex === allLength - 1"
        @click="handleChangeEail('20')"
        >下一封</el-button
      >
      <el-button type="primary" @click="handleReply('10')">回复</el-button>
      <el-button type="primary" @click="handleReply('30')">全部回复</el-button>
      <el-button type="warning" @click="handleReply('20')">转发</el-button>
      <el-button @click="handleReply('40')">再次编辑</el-button>
      <el-button @click="handleMove">移动</el-button>
      <el-button @click="handleRemove">删除</el-button>
      <div
        style="
          background-color: #eff6ff;
          padding: 6px;
          margin-left: 10px;
          cursor: pointer;
          border-radius: 2px 2px 2px 2px;
        "
        @click="handleAddTag"
      >
        <span
          class="iconfont icon-icon_biaoqian2"
          style="color: #0084ff; font-size: 20px"
        ></span>
      </div>
      <!-- <el-tag
        style="margin-left: 8px; cursor: pointer"
        type="success"
        @click="handleAddTag"
      >
        +
      </el-tag> -->
    </div>
    <div class="top">
      <div class="top-row">
        <div class="subject">
          {{ subject }}
        </div>
      </div>
      <div class="top-row" v-if="mailTagList && mailTagList.length > 0">
        <el-tag
          style="margin-left: 8px"
          type="success"
          closable
          v-for="(tag, index) in mailTagList"
          :key="index"
          @close="tagClose(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </div>
      <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>

    <el-dialog
      title="移动邮件"
      v-model="myFolderDialog"
      width="300px"
      destroy-on-close
      v-loading="submitLoading"
    >
      <byForm
        :formConfig="myFolderFormConfig"
        :formOption="formOption"
        v-model="formData.myFolderData"
        :rules="rules"
        ref="myFolderForm"
      >
      </byForm>
      <template #footer>
        <el-button @click="myFolderDialog = false" size="large"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="submitMyFolderForm()"
          size="large"
          :loading="submitLoading"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      title="添加标签"
      v-model="tagDialog"
      width="300px"
      destroy-on-close
      v-loading="submitLoading"
    >
      <byForm
        :formConfig="tagFormConfig"
        :formOption="formOption"
        v-model="formData.tagData"
        :rules="rules"
        ref="tagForm"
      >
      </byForm>
      <template #footer>
        <el-button @click="tagDialog = false" size="large">取 消</el-button>
        <el-button
          type="primary"
          @click="submitTagForm()"
          size="large"
          :loading="submitLoading"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useMailStore from "@/store/modules/mail";
import useUserStore from "@/store/modules/user";
import byForm from "@/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const mailStore = useMailStore();
let loading = ref(false);
const detailsData = reactive({
  data: {},
});
const currentMailIndex = computed(() => mailStore.currentMailIndex);
const allLength = computed(() => mailStore.mailDataList.length);
const to = ref([]);
const cc = ref([]);
const bcc = ref([]);
const replyTo = ref([]);
const fileList = ref([]);
const requestData = ref({});
const time = ref("");
const subject = ref("");

// 移动文件夹
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const myFolderForm = ref(null);
const myFolderTreeData = ref([]);
const myFolderDialog = ref(false);
const submitLoading = ref(false);
const editType = ref("add");
const myFolderFormConfig = computed(() => [
  {
    type: "treeSelect",
    prop: "myFolderId",
    label: "文件夹",
    disabled: false,
    itemWidth: 100,
    data: myFolderTreeData.value,
    style: {
      width: "100%",
    },
  },
]);

const formData = reactive({
  myFolderData: {},
  tagData: {},
});

const rules = ref({
  myFolderId: [{ required: true, message: "请选择文件夹", trigger: "change" }],
  myTagId: [{ required: true, message: "请选择标签", trigger: "change" }],
});

const allTagList = ref([]);
const mailTagList = ref([]);
const tagForm = ref(null);
const tagDialog = ref(false);
const tagFormConfig = computed(() => [
  {
    type: "select",
    prop: "myTagId",
    label: "标签名称",
    disabled: false,
    itemWidth: 100,
    data: allTagList.value,
    style: {
      width: "100%",
    },
  },
]);

const getMyFolderTree = (flag) => {
  if (flag) {
    setTimeout(() => {
      proxy
        .post("/myFolder/tree", { mailboxId: mailStore.selectMail.id })
        .then((res) => {
          myFolderTreeData.value = res.map((x) => ({ ...x, value: x.id }));
        });
    }, 1500);
  } else {
    proxy
      .post("/myFolder/tree", { mailboxId: mailStore.selectMail.id })
      .then((res) => {
        myFolderTreeData.value = res.map((x) => ({ ...x, value: x.id }));
      });
  }
};

const handleMove = () => {
  formData.myFolderData.messageId = mailStore.currentMenu.messageId;
  myFolderDialog.value = true;
};

const handleRemove = () => {
  ElMessageBox.confirm(`此操作将删除该邮件, 是否继续?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 删除
    proxy
      .post("/mailService/deleteMail", {
        id: mailStore.currentMenu.messageId,
        type: mailStore.currentMenu.type,
      })
      .then((res) => {
        ElMessage({
          message: `操作成功！`,
          type: "success",
        });
      });
  });
};

const submitMyFolderForm = () => {
  myFolderForm.value.handleSubmit(() => {
    submitLoading.value = true;
    proxy.post("/myFolderMessage/add", formData.myFolderData).then(
      (res) => {
        ElMessage({
          message: `操作成功！`,
          type: "success",
        });
        myFolderDialog.value = false;
        submitLoading.value = false;
        getMyFolderTree(false);
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const getAllTagData = () => {
  proxy
    .post("/myTag/page", {
      pageNum: 1,
      pageSize: 9999,
      id: useUserStore().user.userId,
    })
    .then((res) => {
      allTagList.value = res.rows;
    });
};

const getMailTag = () => {
  if (mailStore.currentMenu.messageId) {
    proxy
      .post("/myTag/getListByMessageId", {
        id: mailStore.currentMenu.messageId,
      })
      .then((res) => {
        mailTagList.value = res;
      });
  }
};

const tagClose = (tag) => {
  proxy
    .post("/myTagMessage/deleteTag", {
      myTagId: tag.id,
      messageId: mailStore.currentMenu.messageId,
    })
    .then(() => {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      getMailTag();
    });
};

const handleAddTag = () => {
  formData.tagData.messageId = mailStore.currentMenu.messageId;
  formData.tagData.myTagId = "";
  tagDialog.value = true;
};

const submitTagForm = () => {
  tagForm.value.handleSubmit(() => {
    submitLoading.value = true;
    proxy.post("/myTagMessage/add", formData.tagData).then(
      (res) => {
        ElMessage({
          message: `操作成功！`,
          type: "success",
        });
        tagDialog.value = false;
        submitLoading.value = false;
        getMailTag();
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const getDetails = (messageId) => {
  loading.value = true;
  proxy
    .post("/mailService/getMessageDetail", {
      type: mailStore.currentMenu.type,
      messageId,
    })
    .then((res) => {
      if (mailStore.currentMenu.time) {
        time.value = mailStore.currentMenu.time;
      }
      if (mailStore.currentMenu.subject) {
        subject.value = mailStore.currentMenu.subject;
      }

      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 handleReply = (pageType) => {
  // pageType 10为回复  20为转发 30为全部回复 40为再次编辑  0为写信
  let title = "";
  if (pageType === "10") {
    title = "回复";
  } else if (pageType === "20") {
    title = "转发";
  } else if (pageType === "30") {
    title = "全部回复";
  } else if (pageType === "40") {
    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 handleChangeEail = (type) => {
  if (type === "10") {
    mailStore.currentMailIndex = currentMailIndex.value - 1;
  } else if (type === "20") {
    mailStore.currentMailIndex = currentMailIndex.value + 1;
  }
  // 拿到更变索引之后的行数据
  const row = mailStore.mailDataList[mailStore.currentMailIndex];
  // 查当前菜单的数据
  const arr = mailStore.currentMenu.id.split(",");
  if (arr.length > 1) {
    const index = mailStore.mailMenuList.findIndex(
      (x) => x.messageId === arr[1]
    );
    const menu = {
      title: row.subject.slice(0, 4) + "...",
      type: mailStore.selectMail.type,
      messageId: row.id,
      id: "detail" + "," + row.id,
      time: row.sendDate,
      row: { ...row },
    };
    const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
    if (menuItem === undefined) {
      mailStore.mailMenuList[index] = 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.name; // 下载后文件名
      a.style.display = "none";
      document.body.appendChild(a);
      a.click(); // 点击下载
      window.URL.revokeObjectURL(a.href);
      document.body.removeChild(a); // 下载完成移除元素
    }
  };
};

// onMounted(() => {
//   getMyFolderTree(true);
//   getAllTagData();
// });

const init = () => {
  //实时更换索引
  if (mailStore.currentMenu.messageId) {
    mailStore.currentMailIndex = mailStore.mailDataList.findIndex(
      (x) => x.id === mailStore.currentMenu.messageId
    );
  }
  getDetails(mailStore.currentMenu.messageId);
  getMailTag();
  getMyFolderTree(true);
  getAllTagData();
};

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

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

.el-tag.el-tag--success {
  color: #0084ff;
}
</style>
<style lang="scss">
.top-row {
  .el-tag .el-tag__close {
    color: #0084ff !important;
  }
  .el-tag .el-tag__close:hover {
    color: #fff !important;
    background: #0084ff !important ;
  }
}
</style>