| | |
| | | <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="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> |
| | | <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-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 /> |
| | | <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> |
| | | <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-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> |
| | | |
| | | <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="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> |
| | | <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> |
| | | |
| | |
| | | watch( |
| | | () => props.pageList, |
| | | (newValue) => { |
| | | dataSource.value = newValue; |
| | | groupedEmails.value = groupEmailsByDate(newValue); |
| | | dataSource.value = newValue || []; |
| | | groupedEmails.value = groupEmailsByDate(newValue || []); |
| | | }, |
| | | ); |
| | | import dayjs from 'dayjs'; |
| | |
| | | |
| | | 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')) { |
| | |
| | | vxeTableRef.value.forEach((row) => { |
| | | row.setAllCheckboxRow(is); |
| | | }); |
| | | selectChangeEvent() |
| | | selectChangeEvent(); |
| | | } |
| | | |
| | | function selectChangeEvent() { |
| | |
| | | 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 getDataList = inject('getDataList'); |
| | | console.log(getDataList, '0000004'); |
| | | |
| | | // function sendUpdate() { |
| | | // getDataList({ a: '33' }); |
| | | // } |
| | | |
| | | import { updateReadApi } from '@/api/email/userList'; |
| | | import { updateReadApi, updateHandleAPi } from '@/api/email/userList'; |
| | | // 标志未读/经读 |
| | | function fnRowUpdateRead(row) { |
| | | const data = { |
| | |
| | | updateReadApi(params).then((res) => { |
| | | if (res.code == 0) { |
| | | // |
| | | getDataList({ a: '33' }); |
| | | getDataList({}); |
| | | } |
| | | }); |
| | | } |
| | |
| | | defineExpose({ |
| | | fnSelectAll, |
| | | }); |
| | | |
| | | import TooltipAndDropdown from './TooltipAndDropdown .vue'; |
| | | import { formatToDateDay } from '@/utils/dateUtil'; |
| | | </script> |
| | | <style scoped lang="less"> |
| | | .display-flex { |
| | |
| | | } |
| | | |
| | | .span-title { |
| | | padding: 20px; |
| | | width: 100%; |
| | | padding: 5px; |
| | | color: #000; |
| | | font-weight: 700; |
| | | text-align: left; |
| | | } |
| | | |
| | | .table { |