邮件右键菜单

huangyinfeng

4 天以前 db42d08c39ae6129e2b95cd24c0d57c6769282e5

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

@@ -11,10 +11,10 @@
          size="small"
          min-height="40px"
          :row-config="{ isCurrent: true, isHover: true }"
          :menu-config="tableMenu"
          @menu-click="contextMenuClickEvent"
          :menu-config="{ enabled: true }"
          @cell-click="cellClickEvent"
          @checkbox-change="selectChangeEvent"
          @cell-menu="onCellContextMenu"
        >
          <vxe-column type="checkbox" width="30"></vxe-column>
          <vxe-column field="sender" title="发件人" data-index="sender" min-width="300px">
@@ -78,7 +78,7 @@
                      <a-button type="link" size="small">往来邮件</a-button></div
                    >
                  </template>
                  <div class="title-dot" :class="fnIsItHighlighted(row) ? 'title-dot-color' : ''">
                  <div :class="fnIsItHighlighted(row) ? 'title-dot-color' : ''">
                    <span style="font-weight: 700">{{ row.senderName }}</span
                    ><span style="padding: 0 8px">|</span>
                    <span style="font-weight: 500">{{ row.sender }}</span>
@@ -87,6 +87,26 @@
              </div>
            </template>
          </vxe-column>
          <vxe-column
            show-overflow
            field="icon"
            title="表题"
            data-index="icon"
            width="100"
            align="right"
          >
            <template #default="{ row }">
              <a-tooltip placement="bottom">
                <template #title>
                  <span>有附件</span>
                </template>
                <span v-show="row.attachmentList?.length > 0">
                  <PaperClipOutlined />
                </span>
              </a-tooltip>
            </template>
          </vxe-column>

          <vxe-column
            show-overflow
            field="subject"
@@ -110,7 +130,7 @@
              <span style="display: flex; justify-content: space-around">
                <span>{{
                  row.mailType !== 0
                    ? formatToDateDay(row.receiveTime)
                    ? formatToDateDay(row.receiveTime || row.createTime)
                    : formatToDateDay(row.createTime)
                }}</span>

@@ -126,7 +146,13 @@
              </span>
            </template>
          </vxe-column>
        </vxe-table> </div
        </vxe-table>
        <ContextMenu
          v-if="showMenu"
          :style="menuStyle"
          :selected-cell="selectedCell"
          @close-menu="showMenu = false"
        /> </div
    ></div>

    <div v-else style="display: flex; align-items: center; justify-content: center; height: 70vh">
@@ -151,6 +177,7 @@
    PushpinOutlined,
    CopyOutlined,
    DownOutlined,
    PaperClipOutlined,
  } from '@ant-design/icons-vue';

  import { ref, watch, defineProps, defineEmits, computed, defineExpose, inject } from 'vue';
@@ -268,57 +295,63 @@
  }

  // 右键菜单
  const tableMenu = {
    className: 'my-menus',
    body: {
      options: [
        [
          {
            code: 'reply',
            name: '回复',
          },
          { code: 'replyAll', name: '回复全部' },
          { code: 'replyWithAttachment', name: '带附件回复' },
          { code: 'replyAllWithAttachment', name: '带附件回复全部' },
          { code: 'forward', name: '转发' },
          { code: 'forwardAsAttachment', name: '作为附件转发' },
          { code: 'distribute', name: '分发' },
          { code: 'setRemark', name: '设置备注' },
        ],
        [
          { code: 'toHandle', name: '待处理' },
          { code: 'markAsUnread', name: '标为未读' },
          { code: 'labelAs', name: '标注为' },
        ],
        [
          { code: 'newRule', name: '新建收发件规则' },
          { code: 'moveTo', name: '移动到' },
        ],
        [
          { code: 'exportEmail', name: '导出邮件' },
          { code: 'createFollowUp', name: '建为客户跟进' },
          { code: 'createSchedule', name: '新建日程' },
        ],
        [
          { code: 'markAsSpam', name: '标为垃圾邮件' },
          { code: 'delete', name: '删除' },
        ],
      ],
    },
  import ContextMenu from '@/views/email/components/ContextMenu/index.vue';
  const showMenu = ref(false);
  const menuStyle = ref({});
  const selectedCell = ref(null);
  const onCellContextMenu = ({
    type,
    row,
    rowIndex,
    $rowIndex,
    column,
    columnIndex,
    $columnIndex,
    $event,
  }) => {
    $event.preventDefault(); // 阻止默认的浏览器右键菜单?
    selectedCell.value = { row, column, columnIndex }; // 保存当前选中的单元格数据

    // 计算菜单初始位置
    let menuX = $event.clientX;
    let menuY = $event.clientY;

    // 获取菜单的宽度和高度
    const menuWidth = 200; // 假设菜单宽度为200px，可以根据实际情况调整
    const menuHeight = 800; // 假设菜单高度为150px，可以根据实际情况调整
    // 获取窗口宽度和高度
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    // 检查菜单是否超出窗口的右边界，如果是，则向左调整
    if (menuX + menuWidth > windowWidth) {
      menuX = windowWidth - menuWidth;
    }

    // 检查菜单是否超出窗口的下边界，如果是，则向上调整
    if (menuY + menuHeight > windowHeight) {
      menuY = windowHeight - menuHeight;
    }
    menuStyle.value = {
      position: 'fixed',
      top: `${menuY}px`,
      left: `${menuX}px`,
    };
    showMenu.value = true;
  };

  function contextMenuClickEvent({ menu, row, column }) {
    switch (menu.code) {
      case 'copy':
        if (row && column) {
        }
        break;
      default:
    }
  }
  // 监听全局点击事件，点击页面其他地方关闭菜单
  document.addEventListener('click', () => {
    showMenu.value = false;
  });

  const vxeTableRef = ref();
  function fnIsItHighlighted(row) {
    return row.readFlag && props.isDrafts;
    if (props.isDrafts) {
      return row.readFlag && props.isDrafts;
    } else {
      return row.readFlag;
    }
  }
  function fnSelectAll(is) {
    try {
@@ -462,9 +495,11 @@

  .span-title {
    width: 100%;
    height: 30px;
    padding: 5px;
    color: #000;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
  }