From 12f7304fe9e2bb56ec328e4429a654a0653928a9 Mon Sep 17 00:00:00 2001
From: huangyinfeng <1244041895@qq.com>
Date: 星期五, 13 九月 2024 17:15:02 +0800
Subject: [PATCH] 邮件列表联调
---
src/views/email/components/ListPage/table.vue | 219 +++++++++++++++++++++++-------------------------------
1 files changed, 93 insertions(+), 126 deletions(-)
diff --git a/src/views/email/components/ListPage/table.vue b/src/views/email/components/ListPage/table.vue
index 2b56e6b..161eb3f 100644
--- a/src/views/email/components/ListPage/table.vue
+++ b/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: '鏇存噦澶栬锤鐨凙I绠″鏉ヤ簡锛屽府鎮ㄨ妭鐪�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>
--
Gitblit v1.8.0