| | |
| | | @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"> |
| | | <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 |
| | |
| | | " |
| | | > |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | 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'; |
| | |
| | | |
| | | return result; |
| | | } |
| | | const groupedEmails: GroupedDataItem[] = groupEmailsByDate(dataSource); |
| | | console.log(groupedEmails); |
| | | |
| | | // 右键菜单 |
| | | const tableMenu = { |
| | |
| | | vxeTableRef.value.forEach((row) => { |
| | | row.setAllCheckboxRow(is); |
| | | }); |
| | | selectChangeEvent() |
| | | } |
| | | |
| | | function selectChangeEvent() { |
| | | const isAll = getCheckboxRecords().length === dataSource.length; |
| | | const isAll = getCheckboxRecords().length === dataSource.value.length; |
| | | const data = { |
| | | isAll, |
| | | records: getCheckboxRecords(), |
| | | } |
| | | emit('updateSelectAll',data,) |
| | | }; |
| | | emit('updateSelectAll', data); |
| | | } |
| | | function getCheckboxRecords() { |
| | | const list = new Set(); |
| | |
| | | // 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, |
| | | }); |
| | |
| | | .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> |