<!-- TooltipAndDropdown.vue -->
|
<template>
|
<div style="display: flex; justify-content: space-around">
|
<!-- Tooltip -->
|
|
<!-- Dropdown -->
|
<a-dropdown v-model:open="dropdownOpen" :trigger="['click']" placement="bottomLeft">
|
<a-tooltip v-if="showTooltip" v-model:open="tooltipOpen" placement="bottomLeft">
|
<template #title>
|
<div class="p-1" style="width: 210px">
|
<span>{{ tooltipTitle }}</span>
|
<div class="p-2" style="font-size: 18px; font-weight: 600">{{ formattedTime }}</div>
|
<div class="p-2" style="text-align: center">
|
<CButton size="small" shape="round" type="success" @click="onUpdate">修改</CButton>
|
<a-button
|
style="margin-left: 10px"
|
size="small"
|
shape="round"
|
type="primary"
|
@click="onComplete"
|
>完成</a-button
|
>
|
</div>
|
</div>
|
</template>
|
<FieldTimeOutlined v-if="showTooltip" class="color-handle" />
|
</a-tooltip>
|
<FieldTimeOutlined v-else @click.stop="toggleDropdown" />
|
<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>
|
<a-form :model="form" ref="formRef">
|
<a-form-item
|
label="日期"
|
name="date"
|
:rules="[{ required: true, message: '请选择日期' }]"
|
>
|
<a-date-picker
|
format="YYYY/MM/DD"
|
:disabledDate="disabledDate"
|
v-model:value="form.date"
|
/>
|
</a-form-item>
|
<a-form-item
|
label="时间"
|
name="time"
|
:rules="[{ required: true, message: '请选择时间' }]"
|
>
|
<a-time-picker v-model:value="form.time" />
|
</a-form-item>
|
<a-form-item>
|
<a-button @click="cancelCustomTime">取消</a-button>
|
<a-button style="margin-left: 10px" type="primary" @click="submitCustomTime"
|
>确定</a-button
|
>
|
</a-form-item>
|
</a-form>
|
</template>
|
<div class="date-left" @click="toggleCustomTime">自定义时间</div>
|
</a-popover>
|
</div>
|
</a-card>
|
</template>
|
</a-dropdown>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, reactive, defineProps, defineEmits, computed, inject, nextTick } from 'vue';
|
import { FieldTimeOutlined, PushpinOutlined } from '@ant-design/icons-vue';
|
import dayjs from 'dayjs';
|
import CButton from '@/components/CButton/index.vue';
|
const getDataList = inject('getDataList');
|
|
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 props = defineProps({
|
tooltipTitle: String, // Tooltip 标题
|
initialDropdownOpen: Boolean, // Dropdown 初始打开状态
|
showTooltip: Boolean, // 是否展示 Tooltip
|
initialTooltipOpen: Boolean, // Tooltip 初始打开状态
|
row: Object, // 当前行对象
|
docCodeS: Array,
|
trigger: {
|
type: String,
|
default: 'click',
|
},
|
});
|
|
const emit = defineEmits(['updateHandleTime', 'completeAction', 'customTimeSubmit', 'tagRow']);
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
import { formatToDateDay } from '@/utils/dateUtil';
|
import { updateHandleAPi } from '@/api/email/userList';
|
|
const { createMessage } = useMessage();
|
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) => {});
|
}
|
|
// Dropdown 和 Tooltip 状态管理
|
const dropdownOpen = ref(props.initialDropdownOpen);
|
const tooltipOpen = ref(props.initialTooltipOpen);
|
const customTimeDropdownOpen = ref(false);
|
|
// 表单数据
|
const form = reactive({
|
date: '',
|
time: '',
|
});
|
const onUpdate = () => {
|
dropdownOpen.value = true;
|
tooltipOpen.value = false;
|
};
|
// 事件处理
|
const toggleDropdown = () => {
|
dropdownOpen.value = !dropdownOpen.value;
|
};
|
|
const toggleTooltip = () => {
|
tooltipOpen.value = !tooltipOpen.value;
|
};
|
|
const toggleCustomTime = () => {
|
customTimeDropdownOpen.value = !customTimeDropdownOpen.value;
|
dropdownOpen.value = false;
|
};
|
|
const onComplete = () => {
|
const data = {
|
docCode: props.docCodeS,
|
};
|
pushUpdateHandle(data);
|
};
|
const formRef = ref();
|
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 cancelCustomTime = () => {
|
customTimeDropdownOpen.value = false;
|
dropdownOpen.value = true;
|
};
|
|
// 处理时间格式化
|
const formattedTime = computed(() =>
|
props.row.handleTime ? dayjs(props.row.handleTime).format('YYYY-MM-DD HH:mm') : '',
|
);
|
|
// 日期禁用处理
|
const disabledDate = (currentDate) => {
|
return currentDate && currentDate < dayjs().startOf('day');
|
};
|
|
function TooltipAndDropdown() {}
|
|
function onSubmitCustomTime() {
|
customTimeDropdownOpen.value = true;
|
}
|
</script>
|
|
<style scoped lang="less">
|
.display-flex {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.date {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.date-left {
|
flex-grow: 1;
|
}
|
|
.color-handle {
|
cursor: pointer;
|
}
|
|
.date:hover {
|
transition: all 0.2s;
|
background-color: #0000000a;
|
}
|
|
.color-handle {
|
color: #0a6aff;
|
}
|
</style>
|
