<template>
|
<div :style="style" class="custom-dropdown">
|
<!-- <template #overlay> -->
|
<a-menu>
|
<a-menu-item key="reply" @click="handleMenuAction('reply')">回复</a-menu-item>
|
<a-menu-item key="replyAll" @click="handleMenuAction('replyAll')">回复全部</a-menu-item>
|
<a-menu-item key="replyWithAttachment" @click="handleMenuAction('replyWithAttachment')">
|
带附件回复
|
</a-menu-item>
|
<a-menu-item key="replyAllWithAttachment" @click="handleMenuAction('replyAllWithAttachment')">
|
带附件回复全部
|
</a-menu-item>
|
<a-menu-item key="forward" @click="handleMenuAction('forward')">转发</a-menu-item>
|
<a-menu-item key="forwardAsAttachment" @click="handleMenuAction('forwardAsAttachment')">
|
作为附件转发
|
</a-menu-item>
|
<a-menu-item key="reEdit" @click="handleMenuAction('reEdit')">分发</a-menu-item>
|
<a-menu-item key="addNote" @click="handleMenuAction('addNote')">设置备注</a-menu-item>
|
<a-divider style="margin: 5px" />
|
|
<!-- <a-menu-item key="toProcess" @click="handleMenuAction('toProcess')">
|
<div class="my-display">
|
<a-dropdown>
|
<span>待处理 <FieldTimeOutlined /></span>
|
<template #overlay>
|
<a-card title="选择稍后处理时间：" style="width: 250px" size="small">
|
<div
|
class="date p-1"
|
v-for="item in dateList"
|
:key="item.key"
|
@click="fnSelectDate(item)"
|
>
|
<div class="date-left">{{ item.name }}</div>
|
<div class="date-right">
|
<span v-if="item.key !== 'today'">{{ item.dayOfWeek }}</span>
|
<span style="margin-left: 5px">{{ item.time }}</span>
|
</div>
|
</div>
|
<a-divider style="margin: 5px 0" />
|
<div class="date p-1">
|
<a-popover
|
:trigger="trigger"
|
title="自定义时间"
|
v-model:open="customTimeDropdownOpen"
|
@confirm="onSubmitCustomTime"
|
>
|
<template #content>
|
<CustomTimePicker
|
:form="form"
|
@cancel="cancelCustomTime"
|
@submit="submitCustomTime"
|
/>
|
</template>
|
|
<div class="date-left" @click="toggleCustomTime">自定义时间</div>
|
</a-popover>
|
</div>
|
</a-card>
|
</template>
|
</a-dropdown>
|
</div>
|
</a-menu-item> -->
|
<a-menu-item key="markAs" @click="handleMenuAction('markAs')">{{
|
`标记${row.readFlag ? '未' : '已'}读`
|
}}</a-menu-item>
|
<a-menu-item key="markAs" @click="handleMenuAction('markAs')">标记为</a-menu-item>
|
<a-divider style="margin: 5px" />
|
<a-menu-item key="createRule" @click="handleMenuAction('createRule')"
|
>新建收发件规则</a-menu-item
|
>
|
<a-menu-item key="moveTo" @click="handleMenuAction('moveTo')">移动到</a-menu-item>
|
<a-divider style="margin: 5px" />
|
<a-menu-item key="exportEmail" @click="handleMenuAction('exportEmail')">导出邮件</a-menu-item>
|
<a-menu-item key="trackCustomer" @click="handleMenuAction('trackCustomer')"
|
>建为客户跟进</a-menu-item
|
>
|
<a-menu-item key="createSchedule" @click="handleMenuAction('createSchedule')"
|
>新建日程</a-menu-item
|
>
|
<a-divider style="margin: 5px" />
|
|
<a-menu-item key="delete" @click="handleMenuAction('delete')">标为垃圾邮件</a-menu-item>
|
<a-menu-item key="delete" @click="handleMenuAction('delete')">删除</a-menu-item>
|
</a-menu>
|
<!-- </template> -->
|
</div>
|
</template>
|
|
<script setup>
|
import { defineProps, defineEmits, computed, ref, reactive, inject } from 'vue';
|
import CustomTimePicker from './CustomTimePicker.vue';
|
const props = defineProps({
|
style: Object,
|
selectedCell: Object,
|
});
|
|
const row = computed(() => props.selectedCell.row);
|
const emit = defineEmits(['close-menu']);
|
import { useRouter } from 'vue-router';
|
const router = useRouter();
|
import { updateReadApi, updateHandleAPi, deleteEmailAPi } from '@/api/email/userList';
|
const getDataList = inject('getDataList');
|
const handleMenuAction = (action) => {
|
const res = props.selectedCell.row;
|
// 根据不同的action执行对应的操作
|
switch (action) {
|
case 'reply':
|
router.push({ path: '/email/edit', query: { docCode: res.docCode, type: 'reply' } });
|
break;
|
case 'replyAll':
|
router.push({ path: '/email/edit', query: { docCode: res.docCode, type: 'reply' } });
|
break;
|
case 'replyWithAttachment':
|
router.push({ path: '/email/edit', query: { docCode: res.docCode, type: 'reply' } });
|
break;
|
case 'replyAllWithAttachment':
|
router.push({ path: '/email/edit', query: { docCode: res.docCode, type: 'reply' } });
|
break;
|
case 'forward':
|
console.log('Forward action triggered');
|
break;
|
case 'addNote':
|
console.log('Add Note action triggered');
|
break;
|
case 'forwardAsAttachment':
|
console.log('Forward as Attachment action triggered');
|
break;
|
case 'reEdit':
|
console.log('Re-edit action triggered');
|
break;
|
case 'toProcess':
|
console.log('Add to Process action triggered');
|
break;
|
case 'markAs':
|
const data = {
|
status: !res.readFlag,
|
list: [res.docCode],
|
};
|
updateReadApi(data).then((res) => {
|
if (res.code == 0) {
|
getDataList({});
|
}
|
});
|
console.log('Mark as action triggered');
|
break;
|
case 'createRule':
|
console.log('Create rule action triggered');
|
break;
|
case 'moveTo':
|
console.log('Move to action triggered');
|
break;
|
case 'exportEmail':
|
console.log('Export Email action triggered');
|
break;
|
case 'trackCustomer':
|
console.log('Track Customer action triggered');
|
break;
|
case 'createSchedule':
|
console.log('Create Schedule action triggered');
|
break;
|
case 'delete':
|
deleteEmailAPi([res.docCode]).then((res) => {
|
if (res.code == 0) {
|
getDataList({});
|
}
|
});
|
break;
|
default:
|
console.warn('Unknown action:', action);
|
}
|
|
// 操作完成后关闭菜单
|
emit('close-menu');
|
};
|
|
// 待处理
|
import { FieldTimeOutlined, PushpinOutlined } from '@ant-design/icons-vue';
|
function processDateList() {
|
const dateList = [
|
{ name: '今天稍晚', key: 'today' },
|
{ name: '明天', key: 'tomorrow' },
|
{ name: '本周稍晚', key: 'thisWeek' },
|
{ name: '本周末', key: 'thisWeekend' },
|
{ name: '下周', key: 'nextWeek' },
|
];
|
|
const now = new Date();
|
|
const dateArray = dateList.map((item) => {
|
let date = new Date(); // 初始化当前日期
|
let dayOfWeekString = ''; // 初始化星期几
|
let timeString = ''; // 初始化时间
|
|
switch (item.key) {
|
case 'today':
|
// 今天稍晚是今天的 16:00
|
date.setHours(16, 0, 0, 0);
|
break;
|
case 'tomorrow':
|
// 明天 08:00
|
date.setDate(now.getDate() + 1);
|
date.setHours(8, 0, 0, 0);
|
break;
|
case 'thisWeek':
|
// 本周稍晚：周五 08:00
|
const dayOfWeek = now.getDay();
|
const daysUntilFriday = (5 - dayOfWeek + 7) % 7; // 计算到周五的天数
|
date.setDate(now.getDate() + daysUntilFriday);
|
date.setHours(8, 0, 0, 0);
|
break;
|
case 'thisWeekend':
|
// 本周末：周日 08:00
|
const daysUntilSunday = (7 - now.getDay()) % 7; // 计算到周日的天数
|
date.setDate(now.getDate() + daysUntilSunday);
|
date.setHours(8, 0, 0, 0);
|
break;
|
case 'nextWeek':
|
// 下周一 08:00
|
const daysUntilNextMonday = ((1 - now.getDay() + 7) % 7) + 7; // 计算到下周一的天数
|
date.setDate(now.getDate() + daysUntilNextMonday);
|
date.setHours(8, 0, 0, 0);
|
break;
|
default:
|
break;
|
}
|
|
// 获取星期几的字符串表示
|
dayOfWeekString = date.toLocaleDateString('zh-CN', { weekday: 'long' });
|
|
// 获取仅时间部分
|
timeString = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
|
|
// 返回日期、星期几和时间信息
|
return {
|
name: item.name,
|
key: item.key,
|
date: date,
|
dayOfWeek: dayOfWeekString,
|
time: timeString, // 保存仅时间部分
|
};
|
});
|
|
return dateArray;
|
}
|
const dateList = processDateList();
|
const customTimeDropdownOpen = ref(false);
|
function onSubmitCustomTime() {
|
customTimeDropdownOpen.value = true;
|
}
|
|
const disabledDate = (currentDate) => {
|
return currentDate && currentDate < dayjs().startOf('day');
|
};
|
const cancelCustomTime = () => {
|
customTimeDropdownOpen.value = false;
|
dropdownOpen.value = true;
|
};
|
const submitCustomTime = () => {
|
formRef.value.validate().then((valid) => {
|
if (valid) {
|
customTimeDropdownOpen.value = false;
|
const date = form.date ? dayjs(form.date).format('YYYY-MM-DD') : '';
|
const time = form.time ? dayjs(form.time).format('HH:mm') : '';
|
const data = {
|
handleTime: date + ' ' + time,
|
docCode: props.docCodeS,
|
};
|
pushUpdateHandle(data);
|
} else {
|
return false;
|
}
|
});
|
};
|
|
const toggleCustomTime = () => {
|
customTimeDropdownOpen.value = !customTimeDropdownOpen.value;
|
dropdownOpen.value = false;
|
};
|
// 表单数据
|
const form = reactive({
|
date: '',
|
time: '',
|
});
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
import { formatToDateDay } from '@/utils/dateUtil';
|
|
function fnSelectDate(item) {
|
dropdownOpen.value = false;
|
const date = formatToDateDay(new Date(item.date));
|
const data = {
|
handleTime: date,
|
docCode: props.docCodeS,
|
};
|
pushUpdateHandle(data);
|
}
|
function pushUpdateHandle(data) {
|
updateHandleAPi(data)
|
.then((res) => {
|
if (res.code == 0) {
|
createMessage.success(res.msg);
|
// getDataList({});
|
}
|
})
|
.catch((err) => {});
|
}
|
</script>
|
|
<style scoped>
|
.custom-dropdown {
|
position: absolute;
|
z-index: 9900;
|
width: 250px;
|
padding: 10px;
|
border: 1px solid #0505050f;
|
background-color: #fff;
|
}
|
|
.custom-dropdown :deep(.ant-menu-vertical) {
|
border-inline-end: 0;
|
}
|
|
.custom-dropdown :deep(.ant-menu-item) {
|
height: 32px;
|
line-height: 32px;
|
}
|
</style>
|
