onbus_crm.git - Gitblit

huangyinfeng

6 天以前 a9a03d64cf190188d3db04d14970fc0908b03491

提交 \| 用户 \| age
74a35f	1	<!-- TooltipAndDropdown.vue -->
H	2	<template>
	3	<div style="display: flex; justify-content: space-around">
	4	<!-- Tooltip -->
	5
	6	<!-- Dropdown -->
	7	<a-dropdown v-model:open="dropdownOpen" :trigger="['click']" placement="bottomLeft">
	8	<a-tooltip v-if="showTooltip" v-model:open="tooltipOpen" placement="bottomLeft">
	9	<template #title>
	10	<div class="p-1" style="width: 210px">
	11	<span>{{ tooltipTitle }}</span>
	12	<div class="p-2" style="font-size: 18px; font-weight: 600">{{ formattedTime }}</div>
	13	<div class="p-2" style="text-align: center">
	14	<CButton size="small" shape="round" type="success" @click="onUpdate">修改</CButton>
	15	<a-button
	16	style="margin-left: 10px"
	17	size="small"
	18	shape="round"
	19	type="primary"
	20	@click="onComplete"
	21	>完成</a-button
	22	>
	23	</div>
	24	</div>
	25	</template>
	26	<FieldTimeOutlined v-if="showTooltip" class="color-handle" />
	27	</a-tooltip>
	28	<FieldTimeOutlined v-else @click.stop="toggleDropdown" />
	29	<template #overlay>
	30	<a-card title="选择稍后处理时间：" style="width: 250px" size="small">
	31	<div
	32	class="date p-1"
	33	v-for="item in dateList"
	34	:key="item.key"
	35	@click="fnSelectDate(item)"
	36	>
	37	<div class="date-left">{{ item.name }}</div>
	38	<div class="date-right">
	39	<span v-if="item.key !== 'today'">{{ item.dayOfWeek }}</span>
	40	<span style="margin-left: 5px">{{ item.time }}</span>
	41	</div>
	42	</div>
	43	<a-divider style="margin: 5px 0" />
	44	<div class="date p-1">
	45	<a-popover
	46	trigger="click"
	47	title="自定义时间"
	48	v-model:open="customTimeDropdownOpen"
	49	@confirm="onSubmitCustomTime"
	50	>
	51	<template #content>
	52	<a-form :model="form" ref="formRef">
	53	<a-form-item
	54	label="日期"
	55	name="date"
	56	:rules="[{ required: true, message: '请选择日期' }]"
	57	>
	58	<a-date-picker
	59	format="YYYY/MM/DD"
	60	:disabledDate="disabledDate"
	61	v-model:value="form.date"
	62	/>
	63	</a-form-item>
	64	<a-form-item
	65	label="时间"
	66	name="time"
	67	:rules="[{ required: true, message: '请选择时间' }]"
	68	>
	69	<a-time-picker v-model:value="form.time" />
	70	</a-form-item>
	71	<a-form-item>
	72	<a-button @click="cancelCustomTime">取消</a-button>
	73	<a-button style="margin-left: 10px" type="primary" @click="submitCustomTime"
	74	>确定</a-button
	75	>
	76	</a-form-item>
	77	</a-form>
	78	</template>
	79	<div class="date-left" @click="toggleCustomTime">自定义时间</div>
	80	</a-popover>
	81	</div>
	82	</a-card>
	83	</template>
	84	</a-dropdown>
	85	</div>
	86	</template>
	87
	88	<script lang="ts" setup>
	89	import { ref, reactive, defineProps, defineEmits, computed, inject, nextTick } from 'vue';
	90	import { FieldTimeOutlined, PushpinOutlined } from '@ant-design/icons-vue';
	91	import dayjs from 'dayjs';
	92	import CButton from '@/components/CButton/index.vue';
	93	const getDataList = inject('getDataList');
	94
	95	function processDateList() {
	96	const dateList = [
	97	{ name: '今天稍晚', key: 'today' },
	98	{ name: '明天', key: 'tomorrow' },
	99	{ name: '本周稍晚', key: 'thisWeek' },
	100	{ name: '本周末', key: 'thisWeekend' },
	101	{ name: '下周', key: 'nextWeek' },
	102	];
	103
	104	const now = new Date();
	105
	106	const dateArray = dateList.map((item) => {
	107	let date = new Date(); // 初始化当前日期
	108	let dayOfWeekString = ''; // 初始化星期几
	109	let timeString = ''; // 初始化时间
	110
	111	switch (item.key) {
	112	case 'today':
	113	// 今天稍晚是今天的 16:00
	114	date.setHours(16, 0, 0, 0);
	115	break;
	116	case 'tomorrow':
	117	// 明天 08:00
	118	date.setDate(now.getDate() + 1);
	119	date.setHours(8, 0, 0, 0);
	120	break;
	121	case 'thisWeek':
	122	// 本周稍晚：周五 08:00
	123	const dayOfWeek = now.getDay();
	124	const daysUntilFriday = (5 - dayOfWeek + 7) % 7; // 计算到周五的天数
	125	date.setDate(now.getDate() + daysUntilFriday);
	126	date.setHours(8, 0, 0, 0);
	127	break;
	128	case 'thisWeekend':
	129	// 本周末：周日 08:00
	130	const daysUntilSunday = (7 - now.getDay()) % 7; // 计算到周日的天数
	131	date.setDate(now.getDate() + daysUntilSunday);
	132	date.setHours(8, 0, 0, 0);
	133	break;
	134	case 'nextWeek':
	135	// 下周一 08:00
	136	const daysUntilNextMonday = ((1 - now.getDay() + 7) % 7) + 7; // 计算到下周一的天数
	137	date.setDate(now.getDate() + daysUntilNextMonday);
	138	date.setHours(8, 0, 0, 0);
	139	break;
	140	default:
	141	break;
	142	}
	143
	144	// 获取星期几的字符串表示
	145	dayOfWeekString = date.toLocaleDateString('zh-CN', { weekday: 'long' });
	146
	147	// 获取仅时间部分
	148	timeString = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
	149
	150	// 返回日期、星期几和时间信息
	151	return {
	152	name: item.name,
	153	key: item.key,
	154	date: date,
	155	dayOfWeek: dayOfWeekString,
	156	time: timeString, // 保存仅时间部分
	157	};
	158	});
	159
	160	return dateArray;
	161	}
	162	const dateList = processDateList();
	163	const props = defineProps({
	164	tooltipTitle: String, // Tooltip 标题
	165	initialDropdownOpen: Boolean, // Dropdown 初始打开状态
	166	showTooltip: Boolean, // 是否展示 Tooltip
	167	initialTooltipOpen: Boolean, // Tooltip 初始打开状态
	168	row: Object, // 当前行对象
	169	docCodeS: Array,
	170	});
	171
	172	const emit = defineEmits(['updateHandleTime', 'completeAction', 'customTimeSubmit', 'tagRow']);
	173
	174	import { useMessage } from '@/hooks/web/useMessage';
	175	import { formatToDateDay } from '@/utils/dateUtil';
	176	import { updateHandleAPi } from '@/api/email/userList';
	177
	178	const { createMessage } = useMessage();
	179	function fnSelectDate(item) {
	180	dropdownOpen.value = false;
	181	const date = formatToDateDay(new Date(item.date));
	182	const data = {
	183	handleTime: date,
	184	docCode: props.docCodeS,
	185	};
	186	pushUpdateHandle(data);
	187	}
	188	function pushUpdateHandle(data) {
	189	updateHandleAPi(data)
	190	.then((res) => {
	191	if (res.code == 0) {
	192	createMessage.success(res.msg);
	193	getDataList({});
	194	}
	195	})
	196	.catch((err) => {});
	197	}
	198
	199	// Dropdown 和 Tooltip 状态管理
	200	const dropdownOpen = ref(props.initialDropdownOpen);
	201	const tooltipOpen = ref(props.initialTooltipOpen);
	202	const customTimeDropdownOpen = ref(false);
	203
	204	// 表单数据
	205	const form = reactive({
	206	date: '',
	207	time: '',
	208	});
	209	const onUpdate = () => {
	210	dropdownOpen.value = true;
	211	tooltipOpen.value = false;
	212	};
	213	// 事件处理
	214	const toggleDropdown = () => {
	215	dropdownOpen.value = !dropdownOpen.value;
	216	};
	217
	218	const toggleTooltip = () => {
	219	tooltipOpen.value = !tooltipOpen.value;
	220	};
	221
	222	const toggleCustomTime = () => {
	223	customTimeDropdownOpen.value = !customTimeDropdownOpen.value;
	224	dropdownOpen.value = false;
	225	};
	226
	227	const onComplete = () => {
	228	const data = {
	229	handleTime: '',
	230	docCode: props.docCodeS,
	231	};
	232	pushUpdateHandle(data);
	233	};
	234	const formRef = ref();
	235	const submitCustomTime = () => {
	236	formRef.value.validate().then((valid) => {
	237	if (valid) {
	238	customTimeDropdownOpen.value = false;
	239	const date = form.date ? dayjs(form.date).format('YYYY-MM-DD') : '';
	240	const time = form.time ? dayjs(form.time).format('HH:mm') : '';
	241	const data = {
	242	handleTime: date + ' ' + time,
	243	docCode: props.docCodeS,
	244	};
	245	pushUpdateHandle(data);
	246	} else {
	247	return false;
	248	}
	249	});
	250	};
	251
	252	const cancelCustomTime = () => {
	253	customTimeDropdownOpen.value = false;
	254	dropdownOpen.value = true;
	255	};
	256
	257	// 处理时间格式化
	258	const formattedTime = computed(() =>
	259	props.row.handleTime ? dayjs(props.row.handleTime).format('YYYY-MM-DD HH:mm') : '',
	260	);
	261
	262	// 日期禁用处理
	263	const disabledDate = (currentDate) => {
	264	return currentDate && currentDate < dayjs().startOf('day');
	265	};
	266
	267	function TooltipAndDropdown() {}
	268
	269	function onSubmitCustomTime() {
	270	customTimeDropdownOpen.value = true;
	271	}
	272	</script>
	273
	274	<style scoped lang="less">
	275	.display-flex {
	276	display: flex;
	277	align-items: center;
	278	justify-content: space-between;
	279	}
	280
	281	.date {
	282	display: flex;
	283	align-items: center;
	284	justify-content: space-between;
	285	}
	286
	287	.date-left {
	288	flex-grow: 1;
	289	}
	290
	291	.color-handle {
	292	cursor: pointer;
	293	}
	294
	295	.date:hover {
	296	transition: all 0.2s;
	297	background-color: #0000000a;
	298	}
	299
	300	.color-handle {
	301	color: #0a6aff;
	302	}
	303	</style>