<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
|
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"
|
>
|
<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>
|
|
<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>
|
</div>
|
<DrawerDetail ref="drawerDetailRef" v-model="openDrawerDetail" />
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
name: 'ListPageTable';
|
import {
|
FieldTimeOutlined,
|
PushpinOutlined,
|
CopyOutlined,
|
DownOutlined,
|
} from '@ant-design/icons-vue';
|
|
import { ref, watch, defineProps, defineEmits, computed, reactive } from 'vue';
|
|
// 定义属性
|
interface Props {
|
page: number;
|
pageList?: [];
|
}
|
// const props = defineProps<Props>();
|
|
const dataSource = [
|
{
|
sender: '百旺金税云',
|
email: 'gdbwjf.dzfp3@gdfapiao.com',
|
subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
|
date: '2024-09-06 20:19',
|
},
|
{
|
sender: '百旺金税云',
|
email: 'gdbwjf.dzfp3@gdfapiao.com',
|
subject: '您收到一张【佛山火炬创新创业园有限公司】开具的发票【发票号码: ...',
|
date: '2024-07-06 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',
|
},
|
];
|
|
import dayjs from 'dayjs';
|
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
import isoWeek from 'dayjs/plugin/isoWeek';
|
dayjs.extend(isSameOrAfter);
|
dayjs.extend(isSameOrBefore);
|
dayjs.extend(isoWeek);
|
|
interface EmailItem {
|
id: number;
|
subject: string;
|
}
|
|
// 确保 groupedData 的结构正确且 data 是 EmailItem 类型的数组
|
interface GroupedDataItem {
|
key: string;
|
data: EmailItem[];
|
name: string;
|
}
|
|
function groupEmailsByDate(dataSource) {
|
const today = dayjs();
|
const yesterday = dayjs().subtract(1, 'day');
|
const startOfWeek = dayjs().startOf('week');
|
const startOfMonth = dayjs().startOf('month');
|
const startOfLastMonth = dayjs().subtract(1, 'month').startOf('month');
|
const endOfLastMonth = dayjs().subtract(1, 'month').endOf('month');
|
|
const groupedData: GroupedDataItem[] = [
|
{
|
data: [],
|
name: '今天',
|
key: 'today',
|
},
|
{
|
data: [],
|
name: '昨天',
|
key: 'yesterday',
|
},
|
{
|
data: [],
|
name: '本周',
|
key: 'thisWeek',
|
},
|
{
|
data: [],
|
name: '这个月',
|
key: 'thisMonth',
|
},
|
{
|
data: [],
|
name: '上个月',
|
key: 'lastMonth',
|
},
|
{
|
data: [],
|
name: '更早',
|
key: 'earlier',
|
},
|
];
|
|
dataSource.forEach((item: any) => {
|
try {
|
const emailDate = dayjs(item.date);
|
|
if (emailDate.isSame(today, 'day')) {
|
groupedData[0].data.push(item);
|
} else if (emailDate.isSame(yesterday, 'day')) {
|
groupedData[1].data.push(item);
|
} else if (emailDate.isSameOrAfter(startOfWeek) && emailDate.isBefore(today, 'day')) {
|
groupedData[2].data.push(item);
|
} else if (emailDate.isSameOrAfter(startOfMonth) && emailDate.isBefore(today, 'day')) {
|
groupedData[3].data.push(item);
|
} else if (
|
emailDate.isSameOrAfter(startOfLastMonth) &&
|
emailDate.isSameOrBefore(endOfLastMonth)
|
) {
|
groupedData[4].data.push(item);
|
} else {
|
groupedData[5].data.push(item);
|
}
|
} catch (error) {
|
console.error(`Error processing item date: ${item.date}`, error);
|
}
|
});
|
// 将结果按中文映射进行返回
|
const result = <{ data: any; name: string; key: string }[]>[];
|
groupedData.forEach((group: { data: any; name: string; key: string }) => {
|
if (group.data.length > 0) {
|
result.push(group);
|
}
|
});
|
|
return result;
|
}
|
const groupedEmails: GroupedDataItem[] = groupEmailsByDate(dataSource);
|
console.log(groupedEmails);
|
|
// 右键菜单
|
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: '删除' },
|
],
|
],
|
},
|
};
|
|
function contextMenuClickEvent({ menu, row, column }) {
|
switch (menu.code) {
|
case 'copy':
|
if (row && column) {
|
}
|
break;
|
default:
|
}
|
}
|
|
// 操作row
|
function fnProcessingTime(row) {
|
console.log(row);
|
}
|
function fnTagging(row) {
|
console.log(row);
|
}
|
import DrawerDetail from './drawerDetail.vue';
|
// 详情内容
|
const openDrawerDetail = ref(false);
|
const cellClickEvent = (event) => {
|
console.log(event);
|
openDrawerDetail.value = true;
|
// collapseStore.toggle();
|
|
};
|
</script>
|
<style scoped lang="less">
|
.display-flex {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.head {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
border-bottom: 1px solid rgb(5 5 5 / 6%);
|
|
/* 增加选择器特异性 */
|
& .left {
|
width: 20%;
|
|
& .left-box {
|
display: flex;
|
align-items: center;
|
justify-content: space-flex-start;
|
width: 100%;
|
|
& .icon {
|
margin-right: 15px;
|
font-size: 16px;
|
}
|
}
|
}
|
|
& .right {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.left-bt {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-left: 27px;
|
background: #fffbe6;
|
}
|
|
.span-title {
|
padding: 20px;
|
color: #000;
|
font-weight: 700;
|
}
|
|
.table {
|
height: 80vh;
|
}
|
|
.my-menus {
|
background-color: #f8f8f9;
|
}
|
</style>
|
