From a745761147b17a42b4698250a170ef4c0fa0b09b Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 03 七月 2024 21:18:39 +0800
Subject: [PATCH] 产品绑定工艺优化
---
src/components/Time/src/Time.vue | 172 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 84 insertions(+), 88 deletions(-)
diff --git a/src/components/Time/src/Time.vue b/src/components/Time/src/Time.vue
index 2789368..ed735e9 100644
--- a/src/components/Time/src/Time.vue
+++ b/src/components/Time/src/Time.vue
@@ -1,108 +1,104 @@
<template>
<span>{{ date }}</span>
</template>
-<script lang="ts">
- import { defineComponent, ref, watch } from 'vue';
- import { useI18n } from '/@/hooks/web/useI18n';
+<script lang="ts" setup>
+ import { ref, watch } from 'vue';
+ import { useI18n } from '@/hooks/web/useI18n';
import { useIntervalFn } from '@vueuse/core';
- import { formatToDateTime, formatToDate, dateUtil } from '/@/utils/dateUtil';
- import { isNumber, isObject, isString } from '/@/utils/is';
- import { propTypes } from '/@/utils/propTypes';
+ import { formatToDateTime, formatToDate, dateUtil } from '@/utils/dateUtil';
+ import { isNumber, isObject, isString } from '@/utils/is';
+ import { propTypes } from '@/utils/propTypes';
+
+ defineOptions({ name: 'Time' });
+
+ const props = defineProps({
+ value: propTypes.oneOfType([propTypes.number, propTypes.instanceOf(Date), propTypes.string])
+ .isRequired,
+ step: propTypes.number.def(60),
+ mode: propTypes.oneOf(['date', 'datetime', 'relative']).def('relative'),
+ });
const ONE_SECONDS = 1000;
const ONE_MINUTES = ONE_SECONDS * 60;
const ONE_HOUR = ONE_MINUTES * 60;
const ONE_DAY = ONE_HOUR * 24;
- export default defineComponent({
- name: 'Time',
- props: {
- value: propTypes.oneOfType([propTypes.number, propTypes.instanceOf(Date), propTypes.string])
- .isRequired,
- step: propTypes.number.def(60),
- mode: propTypes.oneOf(['date', 'datetime', 'relative']).def('relative'),
+ const date = ref('');
+
+ const { t } = useI18n();
+
+ useIntervalFn(setTime, props.step * ONE_SECONDS);
+
+ watch(
+ () => props.value,
+ () => {
+ setTime();
},
- setup(props) {
- const date = ref('');
+ { immediate: true },
+ );
- const { t } = useI18n();
+ function getTime() {
+ const { value } = props;
+ let time = 0;
+ if (isNumber(value)) {
+ const timestamp = value.toString().length > 10 ? value : value * 1000;
+ time = new Date(timestamp).getTime();
+ } else if (isString(value)) {
+ time = new Date(value).getTime();
+ } else if (isObject(value)) {
+ time = value.getTime();
+ }
+ return time;
+ }
- useIntervalFn(setTime, props.step * ONE_SECONDS);
-
- watch(
- () => props.value,
- () => {
- setTime();
- },
- { immediate: true },
- );
-
- function getTime() {
- const { value } = props;
- let time = 0;
- if (isNumber(value)) {
- const timestamp = value.toString().length > 10 ? value : value * 1000;
- time = new Date(timestamp).getTime();
- } else if (isString(value)) {
- time = new Date(value).getTime();
- } else if (isObject(value)) {
- time = value.getTime();
- }
- return time;
+ function setTime() {
+ const { mode, value } = props;
+ const time = getTime();
+ if (mode === 'relative') {
+ date.value = getRelativeTime(time);
+ } else {
+ if (mode === 'datetime') {
+ date.value = formatToDateTime(value);
+ } else if (mode === 'date') {
+ date.value = formatToDate(value);
}
+ }
+ }
- function setTime() {
- const { mode, value } = props;
- const time = getTime();
- if (mode === 'relative') {
- date.value = getRelativeTime(time);
- } else {
- if (mode === 'datetime') {
- date.value = formatToDateTime(value);
- } else if (mode === 'date') {
- date.value = formatToDate(value);
- }
- }
- }
+ function getRelativeTime(timeStamp: number) {
+ const currentTime = new Date().getTime();
- function getRelativeTime(timeStamp: number) {
- const currentTime = new Date().getTime();
+ // Determine whether the incoming timestamp is earlier than the current timestamp
+ const isBefore = dateUtil(timeStamp).isBefore(currentTime);
- // Determine whether the incoming timestamp is earlier than the current timestamp
- const isBefore = dateUtil(timeStamp).isBefore(currentTime);
+ let diff = currentTime - timeStamp;
+ if (!isBefore) {
+ diff = -diff;
+ }
- let diff = currentTime - timeStamp;
- if (!isBefore) {
- diff = -diff;
- }
+ let resStr = '';
+ let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
- let resStr = '';
- let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
-
- if (diff < ONE_SECONDS) {
- resStr = t('component.time.just');
- // Less than or equal to 59 seconds
- } else if (diff < ONE_MINUTES) {
- resStr = parseInt(diff / ONE_SECONDS) + t('component.time.seconds') + dirStr;
- // More than 59 seconds, less than or equal to 59 minutes and 59 seconds
- } else if (diff >= ONE_MINUTES && diff < ONE_HOUR) {
- resStr = Math.floor(diff / ONE_MINUTES) + t('component.time.minutes') + dirStr;
- // More than 59 minutes and 59 seconds, less than or equal to 23 hours, 59 minutes and 59 seconds
- } else if (diff >= ONE_HOUR && diff < ONE_DAY) {
- resStr = Math.floor(diff / ONE_HOUR) + t('component.time.hours') + dirStr;
- // More than 23 hours, 59 minutes and 59 seconds, less than or equal to 29 days, 59 minutes and 59 seconds
- } else if (diff >= ONE_DAY && diff < 2623860000) {
- resStr = Math.floor(diff / ONE_DAY) + t('component.time.days') + dirStr;
- // More than 29 days, 59 minutes, 59 seconds, less than 364 days, 23 hours, 59 minutes, 59 seconds, and the incoming timestamp is earlier than the current
- } else if (diff >= 2623860000 && diff <= 31567860000 && isBefore) {
- resStr = dateUtil(timeStamp).format('MM-DD-HH-mm');
- } else {
- resStr = dateUtil(timeStamp).format('YYYY');
- }
- return resStr;
- }
-
- return { date };
- },
- });
+ if (diff < ONE_SECONDS) {
+ resStr = t('component.time.just');
+ // Less than or equal to 59 seconds
+ } else if (diff < ONE_MINUTES) {
+ resStr = parseInt(diff / ONE_SECONDS) + t('component.time.seconds') + dirStr;
+ // More than 59 seconds, less than or equal to 59 minutes and 59 seconds
+ } else if (diff >= ONE_MINUTES && diff < ONE_HOUR) {
+ resStr = Math.floor(diff / ONE_MINUTES) + t('component.time.minutes') + dirStr;
+ // More than 59 minutes and 59 seconds, less than or equal to 23 hours, 59 minutes and 59 seconds
+ } else if (diff >= ONE_HOUR && diff < ONE_DAY) {
+ resStr = Math.floor(diff / ONE_HOUR) + t('component.time.hours') + dirStr;
+ // More than 23 hours, 59 minutes and 59 seconds, less than or equal to 29 days, 59 minutes and 59 seconds
+ } else if (diff >= ONE_DAY && diff < 2623860000) {
+ resStr = Math.floor(diff / ONE_DAY) + t('component.time.days') + dirStr;
+ // More than 29 days, 59 minutes, 59 seconds, less than 364 days, 23 hours, 59 minutes, 59 seconds, and the incoming timestamp is earlier than the current
+ } else if (diff >= 2623860000 && diff <= 31567860000 && isBefore) {
+ resStr = dateUtil(timeStamp).format('MM-DD-HH-mm');
+ } else {
+ resStr = dateUtil(timeStamp).format('YYYY');
+ }
+ return resStr;
+ }
</script>
--
Gitblit v1.9.3