邮件右键菜单

huangyinfeng

4 天以前 db42d08c39ae6129e2b95cd24c0d57c6769282e5

 src/views/email/components/ListPage/drawerDetail.vue

@@ -53,9 +53,19 @@
          <span style="margin-right: 10px; font-size: 16px">
            <PushpinOutlined />
          </span>
          <a-tag
            v-if="tableRowData.attachmentPath?.length > 0"
            style="margin-right: 10px; font-size: 12px"
          >
            <PaperClipOutlined style="margin-right: 4px; color: #ffac00" />{{
              tableRowData.attachmentPath?.length
            }}
          </a-tag>
        </div>
        <div class="right">
          <div class="tate">{{ formatToDateDay(tableRowData.receiveTime || tableRowData.updateTime) }}</div>
          <div class="tate">{{
            formatToDateDay(tableRowData.receiveTime || tableRowData.updateTime)
          }}</div>
          <div>
            <a-dropdown-button>
              <div v-if="!isDrafts">
@@ -142,6 +152,28 @@
              <span>暂未查询到该客户的当地时间</span>
              <!-- <span>2024-06-08 22:22</span> -->
            </div>

            <div v-if="tableRowData.attachmentPath?.length>0" class="p-2 f-z-14" style="margin-top: 10px">
              <div style="display: flex; align-items: center">
                <span style="margin-right: 10px">{{
                  `附件(${tableRowData.attachmentPath?.length})`
                }}</span>
                <a type="link" @click="fnAllDownload">全部下载</a>
              </div>
              <div class="my-d-f" style="width: 100%; margin-top: 10px">
                <div
                  class="file-item my-d-f"
                  v-for="item in tableRowData.attachmentPath"
                  :key="item"
                >
                  <div class="icon"><FileExcelOutlined /></div>
                  <div class="name" @click="fnPreview(item)">{{ item.name }}</div>
                  <div class="size"> {{ item.size + 'k' }} </div>
                  <div class="download" @click="fnDownload(item)"><CloudDownloadOutlined /></div>
                  <!-- <div class="delete">删除</div> -->
                </div>
              </div>
            </div>
            <div class="ct">
              <div v-if="tableRowData.content">
                <TinymcePw ref="TinymcePwRef" v-model="tableRowData.content" />
@@ -177,6 +209,9 @@
    CopyOutlined,
    UserOutlined,
    RollbackOutlined,
    FileExcelOutlined,
    CloudDownloadOutlined,
    PaperClipOutlined,
  } from '@ant-design/icons-vue';
  import pageHeadLeft from './pageHeadLeft.vue';
  import UserTips from '@/views/email/components/userTips/index.vue';
@@ -322,6 +357,40 @@
  function replyEmail(row, type) {
    router.push({ path: '/email/edit', query: { docCode: row.docCode, type: type } });
  }

  const fnPreview = (item) => {
    if (!item) {
      console.error('Invalid file or response');
      return;
    }

    // // 获取文件类型（通过文件扩展名或 MIME 类型）
    const fileExt = item.fileType; // 获取文件扩展名
    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExt); // 判断是否为图片

    if (isImage) {
      // 直接打开图片
      window.open(item.url, '_blank');
    } else {
      const iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${item.url}`;
      window.open(iframeSrc, '_blank');
    }
  };

  const fnDownload = (item) => {
    const link = document.createElement('a');
    link.href = item.url;
    link.download = item.name; // 提取文件名
    document.body.appendChild(link); // 将链接添加到 DOM
    link.click(); // 模拟点击下载
    document.body.removeChild(link); // 下载后移除链接
  };

  const fnAllDownload = () => {
    const urls = tableRowData.value.attachmentPath.map((item) => item.url);
    const url = urls.join(',');
    fnDownload(url);
  };
</script>

<style scoped lang="less">
@@ -445,4 +514,45 @@
  .f-z-14 {
    font-size: 12px;
  }

  .file-item {
    width: 240px;
    margin-right: 10px;
    padding: 10px;
    border-radius: 4px;
    background-color: #f0f0f0;

    & .icon {
      width: 20px;
      margin-right: 5px;
    }

    & .name {
      flex: 1;
      margin-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .download {
      display: none;
      width: 20px;
    }
  }

  .file-item:hover .name {
    transition: 0.3s;
    color: #0960bd;
  }

  .file-item:hover .size {
    display: none;
    transition: 0.3s;
  }

  .file-item:hover .download {
    display: block;
    transition: 0.3s;
  }
</style>