邮件配置页

huangyinfeng

9 天以前 63d60873dad6a4767b1aa52791ee45c7235afcd9

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

@@ -1,125 +1,137 @@
<template>
  <div style="height: 70vh; overflow: auto">
    <div v-for="(item, index) in groupedEmails" :key="index">
      <span class="span-title">{{ `${item.name}(${item.data.length})` }}</span>
      <vxe-table
        ref="vxeTableRef"
        style="margin: 10px 0"
        :showHeader="false"
        :data="item.data"
        size="small"
        min-height="40px"
        :row-config="{ isCurrent: true, isHover: true }"
        :menu-config="tableMenu"
        @menu-click="contextMenuClickEvent"
        @cell-click="cellClickEvent"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-column type="checkbox" width="30"></vxe-column>
        <vxe-column field="sender" title="发件人" data-index="sender" min-width="300px">
          <template #default="{ row }">
            <div style="display: flex; align-items: center">
              <div
                v-if="row.mailType != 0"
                class="dot"
                :class="row.readFlag ? 'dot-color' : ''"
                @click.stop="fnRowUpdateRead(row)"
              ></div>
              <a-tooltip placement="bottom">
                <template #title>
                  <span>陌生人</span>
                </template>
                <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
              </a-tooltip>
  <div style="overflow: auto">
    <div v-if="groupedEmails.length != 0">
      <div v-for="(item, index) in groupedEmails" :key="index">
        <div class="span-title">{{ `${item.name}(${item.data.length})` }}</div>
        <vxe-table
          ref="vxeTableRef"
          style="margin: 10px 0"
          :showHeader="false"
          :data="item.data"
          size="small"
          min-height="40px"
          :row-config="{ isCurrent: true, isHover: true }"
          :menu-config="tableMenu"
          @menu-click="contextMenuClickEvent"
          @cell-click="cellClickEvent"
          @checkbox-change="selectChangeEvent"
        >
          <vxe-column type="checkbox" width="30"></vxe-column>
          <vxe-column field="sender" title="发件人" data-index="sender" min-width="300px">
            <template #default="{ row }">
              <div style="display: flex; align-items: center">
                <div
                  v-if="row.mailType != 0"
                  class="dot"
                  :class="row.readFlag ? 'dot-color' : ''"
                  @click.stop="fnRowUpdateRead(row)"
                ></div>
                <a-tooltip placement="bottom">
                  <template #title>
                    <span>陌生人</span>
                  </template>
                  <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
                </a-tooltip>

              <a-popover placement="bottom">
                <template #content>
                  <div
                    class="p-2"
                    style="
                      display: flex;
                      align-items: center;
                      border-bottom: 1px solid rgb(5 5 5 / 6%);
                    "
                  >
                    <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
                    <span style="color: #000; font-weight: 700">{{ row.sender }}</span>
                    <CopyOutlined />
                <a-popover placement="bottom">
                  <template #content>
                    <div
                      class="p-2"
                      style="
                        display: flex;
                        align-items: center;
                        border-bottom: 1px solid rgb(5 5 5 / 6%);
                      "
                    >
                      <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
                      <span style="color: #000; font-weight: 700">{{ row.sender }}</span>
                      <CopyOutlined />
                    </div>
                    <div class="display-flex p-2">
                      <a-button type="link" size="small">新建客户</a-button>
                      <a-dropdown>
                        <a style="margin-right: 5px" class="ant-dropdown-link" @click.prevent>
                          <DownOutlined />
                        </a>
                        <template #overlay>
                          <a-menu>
                            <a-menu-item>
                              <a href="javascript:;">添加到已有客户</a>
                            </a-menu-item>
                          </a-menu>
                        </template>
                      </a-dropdown>
                      <a-button type="link" size="small">添加为线索</a-button>

                      <a-dropdown style="margin-right: 5px">
                        <a style="margin-right: 5px" class="ant-dropdown-link" @click.prevent>
                          <DownOutlined />
                        </a>
                        <template #overlay>
                          <a-menu>
                            <a-menu-item>
                              <a href="javascript:;">添加到通讯录</a>
                            </a-menu-item>
                          </a-menu>
                        </template>
                      </a-dropdown>
                      <a-button type="link" size="small">往来邮件</a-button></div
                    >
                  </template>
                  <div class="title-dot" :class="row.readFlag ? '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>
                  </div>
                  <div class="display-flex p-2">
                    <a-button type="link" size="small">新建客户</a-button>
                    <a-dropdown>
                      <a style="margin-right: 5px" class="ant-dropdown-link" @click.prevent>
                        <DownOutlined />
                      </a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item>
                            <a href="javascript:;">添加到已有客户</a>
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                    <a-button type="link" size="small">添加为线索</a-button>
                </a-popover>
              </div>
            </template>
          </vxe-column>
          <vxe-column
            show-overflow
            field="subject"
            title="表题"
            data-index="subject"
            min-width="250"
          >
            <template #default="{ row }">
              <span
                class="title-dot"
                :class="row.readFlag ? 'title-dot-color' : ''"
                style="font-weight: 500"
                >{{ row.subject || '（无主题）' }}</span
              >
              -
              <span style="color: #999">{{ row.subject }}</span>
            </template>
          </vxe-column>
          <vxe-column field="action" title="Action" width="190">
            <template #default="{ row, rowIndex }">
              <span style="display: flex; justify-content: space-around">
                <span>{{
                  row.mailType !== 0
                    ? formatToDateDay(row.receiveTime)
                    : formatToDateDay(row.createTime)
                }}</span>

                    <a-dropdown style="margin-right: 5px">
                      <a style="margin-right: 5px" class="ant-dropdown-link" @click.prevent>
                        <DownOutlined />
                      </a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item>
                            <a href="javascript:;">添加到通讯录</a>
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                    <a-button type="link" size="small">往来邮件</a-button></div
                  >
                </template>
                <div class="title-dot" :class="row.readFlag ? '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>
                </div>
              </a-popover>
            </div>
          </template>
        </vxe-column>
        <vxe-column show-overflow field="subject" title="表题" data-index="subject" min-width="250">
          <template #default="{ row }">
            <span
              class="title-dot"
              :class="row.readFlag ? 'title-dot-color' : ''"
              style="font-weight: 500"
              >{{ row.subject || '（无主题）' }}</span
            >
            -
            <span style="color: #999">{{ row.subject }}</span>
          </template>
        </vxe-column>
        <vxe-column field="action" title="Action" width="190">
          <template #default="{ row, rowIndex }">
            <span style="display: flex; justify-content: space-around">
              <span>{{
                row.mailType !== 0
                  ? formatToDateDay(row.receiveTime)
                  : formatToDateDay(row.createTime)
              }}</span>
                <TooltipAndDropdown
                  :tooltipTitle="'待处理邮件'"
                  :initialDropdownOpen="false"
                  :initialTooltipOpen="false"
                  :showTooltip="!!row.handleTime"
                  :row="row"
                  :docCodeS="[row.docCode]"
                />
                <span style="margin-left: 5px"><PushpinOutlined @click.stop="fnTagging" /></span>
              </span>
            </template>
          </vxe-column>
        </vxe-table> 
        </div
    ></div>

              <TooltipAndDropdown
                :tooltipTitle="'待处理邮件'"
                :initialDropdownOpen="false"
                :initialTooltipOpen="false"
                :showTooltip="!!row.handleTime"
                :row="row"
                :docCodeS="[row.docCode]"
              />
              <span style="margin-left: 5px"><PushpinOutlined @click.stop="fnTagging" /></span>
            </span>
          </template>
        </vxe-column>
      </vxe-table>
    <div v-else style="height: 70vh; display: flex; align-items: center; justify-content: center">
      <a-empty />
    </div>
    <DrawerDetail
      ref="drawerDetailRef"
@@ -155,8 +167,8 @@
  watch(
    () => props.pageList,
    (newValue) => {
      dataSource.value = newValue;
      groupedEmails.value = groupEmailsByDate(newValue);
      dataSource.value = newValue || [];
      groupedEmails.value = groupEmailsByDate(newValue || []);
    },
  );
  import dayjs from 'dayjs';
@@ -425,9 +437,11 @@
  }

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

  .table {