邮件配置页

huangyinfeng

9 天以前 63d60873dad6a4767b1aa52791ee45c7235afcd9

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

@@ -1,97 +1,146 @@
<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="60"></vxe-column>
        <vxe-column field="sender" title="发件人" data-index="sender" min-width="300px">
          <template #default="{ row }">
            <div style="display: flex; align-items: center">
              <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
              <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.email }}</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>
  <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-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>
                  <span style="font-weight: 700">{{ row.sender }}</span
                  ><span style="padding: 0 8px; color: #999">|</span>
                  <span style="color: #999; font-weight: 500">{{ row.email }}</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 style="color: #3081fe; font-weight: 500">{{ row.subject }}</span> -
            <span style="color: #999">{{ row.subject }}</span>
          </template>
        </vxe-column>
        <vxe-column field="action" title="Action" width="180">
          <template #default="{ row }">
            <span style="display: flex; justify-content: space-around">
              <span>{{ row.date }}</span>
              <span><FieldTimeOutlined @click.stop="fnProcessingTime" /></span>
              <span><PushpinOutlined @click.stop="fnTagging" /></span>
            </span>
          </template>
        </vxe-column>
      </vxe-table>
                <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>
                </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>

    <div v-else style="height: 70vh; display: flex; align-items: center; justify-content: center">
      <a-empty />
    </div>
    <DrawerDetail ref="drawerDetailRef" v-model="openDrawerDetail" />
    <DrawerDetail
      ref="drawerDetailRef"
      v-model="openDrawerDetail"
      :mailId="rowMailId"
      :selectAllRow="selectRow"
      :allList="dataSource"
    />
    <a-dropdown :trigger="['click']" placement="bottomLeft" ref="dropdownRefs"> </a-dropdown>
  </div>
</template>

@@ -104,120 +153,24 @@
    DownOutlined,
  } from '@ant-design/icons-vue';

  import { ref, watch, defineProps, defineEmits, computed, defineExpose } from 'vue';
  import { ref, watch, defineProps, defineEmits, computed, defineExpose, inject } from 'vue';

  // 定义属性
  interface Props {
    page: number;
    pageList?: [];
    pageList: [];
  }
  // const props = defineProps<Props>();
  const props = defineProps<Props>();

  const dataSource = [
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-09-08 20:19',
    },
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-07-09 20:19',
    },
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-09-06 20:19',
    },
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-09-07 20:19',
    },
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-09-07 20:19',
    },
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-09-05 20:19',
    },
    {
      sender: '百旺金税云',
      email: 'gdbwjf.dzfp3@gdfapiao.com',
      subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
      date: '2024-09-05 20:19',
    },
    {
      sender: '微信支付小助手',
      email: 'weixinpay@tencent.com',
      subject: '自动提现失败通知 - 微信商户平台',
      date: '2024-09-05 11:46',
    },
    {
      sender: '网易外贸通',
      email: 'mianfei@qiye.163.com',
      subject: '开发外贸客户很难？这些方法开发精准客户效率直接提升3倍',
      date: '2024-09-04 10:13',
    },
    {
      sender: 'Apple Developer',
      email: 'developer@insideapple.app',
      subject: '开发者你好：2024年9月准备好迎接 Apple Intelligence...',
      date: '2024-09-04 01:13',
    },
    {
      sender: '微信支付小助手',
      email: 'weixinpay@tencent.com',
      subject: '自动提现失败通知 - 微信商户平台',
      date: '2024-09-03 11:45',
    },
    {
      sender: 'notice',
      email: 'notice@qiye.163.com',
      subject: '【反垃圾通知】您的邮箱共收到1封异常邮件',
      date: '2024-09-03 10:02',
    },
    {
      sender: '三星电子',
      email: 'memberclub.club@samsung.com',
      subject: '【三星电子】秋日畅享，以旧换“星”，等你来！',
      date: '2024-09-02 18:15',
    },
    {
      sender: '极光',
      email: 'support@amail.jpush.io',
      subject: '极光统计运营周报 - 运营周报 ERP 2024.08.26-2024.09.01...',
      date: '2024-09-02 12:00',
    },
    {
      sender: '微信支付小助手',
      email: 'weixinpay@tencent.com',
      subject: '自动提现失败通知 - 微信商户平台',
      date: '2024-09-02 12:00',
    },
    {
      sender: 'Salesforce Dreamforce',
      email: 'apacemarketing@salesforce.com',
      subject: 'Session lineup is live. Explore now on Salesforce+',
      date: '2024-09-02 11:01',
    },
    {
      sender: '网易外贸通',
      email: 'mianfei@qiye.163.com',
      subject: '更懂外贸的AI管家来了，帮您节省30%的人工成本',
      date: '2024-09-02 09:55',
    },
  ];
  const groupedEmails = ref<GroupedDataItem[]>([]);

  const dataSource = ref([]);
  watch(
    () => props.pageList,
    (newValue) => {
      dataSource.value = newValue || [];
      groupedEmails.value = groupEmailsByDate(newValue || []);
    },
  );
  import dayjs from 'dayjs';
  import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
  import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
@@ -281,8 +234,7 @@

    dataSource.forEach((item: any) => {
      try {
        const emailDate = dayjs(item.date);

        const emailDate = dayjs(item.createTime);
        if (emailDate.isSame(today, 'day')) {
          groupedData[0].data.push(item);
        } else if (emailDate.isSame(yesterday, 'day')) {
@@ -313,8 +265,6 @@

    return result;
  }
  const groupedEmails: GroupedDataItem[] = groupEmailsByDate(dataSource);
  console.log(groupedEmails);

  // 右键菜单
  const tableMenu = {
@@ -370,15 +320,16 @@
    vxeTableRef.value.forEach((row) => {
      row.setAllCheckboxRow(is);
    });
    selectChangeEvent();
  }

function selectChangeEvent() {
  const isAll = getCheckboxRecords().length === dataSource.length;
  const data = {
    isAll,
    records: getCheckboxRecords(),
  }
    emit('updateSelectAll',data,)
  function selectChangeEvent() {
    const isAll = getCheckboxRecords().length === dataSource.value.length;
    const data = {
      isAll,
      records: getCheckboxRecords(),
    };
    emit('updateSelectAll', data);
  }
  function getCheckboxRecords() {
    const list = new Set();
@@ -403,16 +354,43 @@
  import DrawerDetail from './drawerDetail.vue';
  // 详情内容
  const openDrawerDetail = ref(false);
  const rowMailId = ref('');
  const selectRow = ref([]);
  const cellClickEvent = (event) => {
    console.log(event);
    selectRow.value = [];
    rowMailId.value = event.row.docCode;
    selectRow.value.push({ docCode: event.row.docCode });
    openDrawerDetail.value = true;
    // collapseStore.toggle();
  };

  const emit = defineEmits(['selectAll',"updateSelectAll"]);
  // 更新祖父组件数据
  const getDataList = inject('getDataList');
  console.log(getDataList, '0000004');

  import { updateReadApi, updateHandleAPi } from '@/api/email/userList';
  // 标志未读/经读
  function fnRowUpdateRead(row) {
    const data = {
      status: !row.readFlag,
      list: [row.docCode],
    };
    pushReadApi(data);
  }
  function pushReadApi(params) {
    updateReadApi(params).then((res) => {
      if (res.code == 0) {
        //
        getDataList({});
      }
    });
  }
  const emit = defineEmits(['selectAll', 'updateSelectAll']);
  defineExpose({
    fnSelectAll,
  });

  import TooltipAndDropdown from './TooltipAndDropdown .vue';
  import { formatToDateDay } from '@/utils/dateUtil';
</script>
<style scoped lang="less">
  .display-flex {
@@ -459,9 +437,11 @@
  }

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

  .table {
@@ -471,4 +451,26 @@
  .my-menus {
    background-color: #f8f8f9;
  }
  // 圆点
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #0a6aff;
  }

  .dot-color {
    background-color: #d9d9d9;
    color: #d9d9d9;
  }

  .title-dot {
    color: #0a6aff;
  }

  .title-dot-color {
    color: #999;
  }
</style>