邮件列表联调

huangyinfeng

2024-09-13 12f7304fe9e2bb56ec328e4429a654a0653928a9

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

@@ -15,11 +15,22 @@
        @cell-click="cellClickEvent"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <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">
              <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
              <div
                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
@@ -31,7 +42,7 @@
                    "
                  >
                    <a-avatar size="small" style="margin-right: 8px" :src="row.avatar" />
                    <span style="color: #000; font-weight: 700">{{ row.email }}</span>
                    <span style="color: #000; font-weight: 700">{{ row.sender }}</span>
                    <CopyOutlined />
                  </div>
                  <div class="display-flex p-2">
@@ -65,10 +76,10 @@
                    <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 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>
@@ -76,7 +87,13 @@
        </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
              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>
@@ -104,120 +121,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';
@@ -313,8 +234,6 @@

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

  // 右键菜单
  const tableMenu = {
@@ -370,15 +289,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();
@@ -409,7 +329,32 @@
    // collapseStore.toggle();
  };

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

  // function sendUpdate() {
  //   getDataList({ a: '33' });
  // }

  import { updateReadApi } 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({ a: '33' });
      }
    });
  }
  const emit = defineEmits(['selectAll', 'updateSelectAll']);
  defineExpose({
    fnSelectAll,
  });
@@ -471,4 +416,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>