UPDATE: 处理控制台警告问题
This commit is contained in:
贾同学
@@ -1,19 +1,20 @@
|
||||
<template>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/images/403.png" class="not-img" alt="403" />
|
||||
<div class="not-detail">
|
||||
<h2>403</h2>
|
||||
<h4>抱歉，您无权访问该页面~🙅♂️🙅♀️</h4>
|
||||
<el-button type="primary" @click="router.back"> 返回上一页 </el-button>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/images/403.png" class="not-img" alt="403" />
|
||||
<div class="not-detail">
|
||||
<h2>403</h2>
|
||||
<h4>抱歉，您无权访问该页面~🙅♂️🙅♀️</h4>
|
||||
<el-button type="primary" @click="router.back">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="403">
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
@use './index.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<template>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/images/404.png" class="not-img" alt="404" />
|
||||
<div class="not-detail">
|
||||
<h2>404</h2>
|
||||
<h4>抱歉，您访问的页面不存在~🤷♂️🤷♀️</h4>
|
||||
<el-button type="primary" @click="router.back"> 返回上一页 </el-button>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/images/404.png" class="not-img" alt="404" />
|
||||
<div class="not-detail">
|
||||
<h2>404</h2>
|
||||
<h4>抱歉，您访问的页面不存在~🤷♂️🤷♀️</h4>
|
||||
<el-button type="primary" @click="router.back">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="404">
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
@use './index.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<template>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/images/500.png" class="not-img" alt="500" />
|
||||
<div class="not-detail">
|
||||
<h2>500</h2>
|
||||
<h4>抱歉，您的网络不见了~🤦♂️🤦♀️</h4>
|
||||
<el-button type="primary" @click="router.back"> 返回上一页 </el-button>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/images/500.png" class="not-img" alt="500" />
|
||||
<div class="not-detail">
|
||||
<h2>500</h2>
|
||||
<h4>抱歉，您的网络不见了~🤦♂️🤦♀️</h4>
|
||||
<el-button type="primary" @click="router.back">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="500">
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
@use './index.scss';
|
||||
</style>
|
||||
|
||||
@@ -9,5 +9,5 @@
|
||||
<script setup lang="ts" name="Loading"></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
@use "./index.scss";;
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<div class='icon-box' >
|
||||
<el-input
|
||||
ref='inputRef'
|
||||
v-model='valueIcon'
|
||||
v-bind='$attrs'
|
||||
:placeholder='placeholder'
|
||||
:clearable='clearable'
|
||||
@clear='clearIcon'
|
||||
@click='openDialog'
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon='customIcons[iconValue]' />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dialog v-model='dialogVisible' :title='placeholder' top='5%' width='30%' >
|
||||
<el-input v-model='inputValue' placeholder='搜索图标' size='large' :prefix-icon='Icons.Search' />
|
||||
<el-scrollbar v-if='Object.keys(iconsList).length'>
|
||||
<div class='icon-list'>
|
||||
<div v-for='item in iconsList' :key='item' class='icon-item' @click='selectIcon(item)'>
|
||||
<component :is='item'></component>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-empty v-else description='未搜索到您要找的图标~' />
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<el-input
|
||||
ref="inputRef"
|
||||
v-model="valueIcon"
|
||||
v-bind="$attrs"
|
||||
:placeholder="placeholder"
|
||||
:clearable="clearable"
|
||||
@clear="clearIcon"
|
||||
@click="openDialog"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="customIcons[iconValue]" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dialog v-model="dialogVisible" :title="placeholder" top="5%" width="30%">
|
||||
<el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
|
||||
<el-scrollbar v-if="Object.keys(iconsList).length">
|
||||
<div class="icon-list">
|
||||
<div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
|
||||
<component :is="item"></component>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-empty v-else description="未搜索到您要找的图标~" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup name='SelectIcon'>
|
||||
<script lang="ts" setup name="SelectIcon">
|
||||
import * as Icons from '@element-plus/icons-vue'
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
interface SelectIconProps {
|
||||
iconValue: string| undefined;
|
||||
title?: string;
|
||||
clearable?: boolean;
|
||||
placeholder?: string;
|
||||
iconValue: string | undefined
|
||||
title?: string
|
||||
clearable?: boolean
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SelectIconProps>(), {
|
||||
iconValue: '',
|
||||
title: '请选择图标',
|
||||
clearable: true,
|
||||
placeholder: '请选择图标',
|
||||
iconValue: '',
|
||||
title: '请选择图标',
|
||||
clearable: true,
|
||||
placeholder: '请选择图标'
|
||||
})
|
||||
|
||||
// 重新接收一下，防止打包后 clearable 报错
|
||||
@@ -55,37 +55,36 @@ const openDialog = () => (dialogVisible.value = true)
|
||||
|
||||
// 选择图标(触发更新父组件数据)
|
||||
const emit = defineEmits<{
|
||||
'update:iconValue': [value: string];
|
||||
'update:iconValue': [value: string]
|
||||
}>()
|
||||
const selectIcon = (item: any) => {
|
||||
dialogVisible.value = false
|
||||
valueIcon.value = item.name
|
||||
emit('update:iconValue', item.name)
|
||||
setTimeout(() => inputRef.value.blur(), 0)
|
||||
dialogVisible.value = false
|
||||
valueIcon.value = item.name
|
||||
emit('update:iconValue', item.name)
|
||||
setTimeout(() => inputRef.value.blur(), 0)
|
||||
}
|
||||
|
||||
// 清空图标
|
||||
const inputRef = ref()
|
||||
const clearIcon = () => {
|
||||
valueIcon.value = ''
|
||||
emit('update:iconValue', '')
|
||||
setTimeout(() => inputRef.value.blur(), 0)
|
||||
valueIcon.value = ''
|
||||
emit('update:iconValue', '')
|
||||
setTimeout(() => inputRef.value.blur(), 0)
|
||||
}
|
||||
|
||||
// 监听搜索框值
|
||||
const inputValue = ref('')
|
||||
const customIcons: { [key: string]: any } = Icons
|
||||
const iconsList = computed((): { [key: string]: any } => {
|
||||
if (!inputValue.value) return Icons
|
||||
let result: { [key: string]: any } = {}
|
||||
for (const key in customIcons) {
|
||||
if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
|
||||
}
|
||||
return result
|
||||
if (!inputValue.value) return Icons
|
||||
let result: { [key: string]: any } = {}
|
||||
for (const key in customIcons) {
|
||||
if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
@import "./index.scss";
|
||||
<style scoped lang="scss">
|
||||
@use './index.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,97 +1,84 @@
|
||||
<template>
|
||||
<div class='time-control'>
|
||||
<el-select
|
||||
class='select'
|
||||
v-model='timeUnit'
|
||||
placeholder='选择时间单位'
|
||||
@change='handleChange'
|
||||
>
|
||||
<!-- 采用 v-for 动态渲染 -->
|
||||
<el-option
|
||||
v-for='unit in timeUnits'
|
||||
:key='unit.value'
|
||||
:label='unit.label'
|
||||
:value='unit.value'
|
||||
></el-option>
|
||||
</el-select>
|
||||
<div class="time-control">
|
||||
<el-select class="select" v-model="timeUnit" placeholder="选择时间单位" @change="handleChange">
|
||||
<!-- 采用 v-for 动态渲染 -->
|
||||
<el-option v-for="unit in timeUnits" :key="unit.value" :label="unit.label" :value="unit.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 禁用时间选择器 -->
|
||||
<div class='date-display'>
|
||||
<el-date-picker
|
||||
class='date-picker'
|
||||
v-model='startDate'
|
||||
type='date'
|
||||
placeholder='起始时间'
|
||||
@change='emitDateChange'
|
||||
:disabled-date='disableStartDate'
|
||||
:readonly="timeUnit != '自定义'"
|
||||
></el-date-picker>
|
||||
<el-text>~</el-text>
|
||||
<el-date-picker
|
||||
class='date-picker'
|
||||
v-model='endDate'
|
||||
type='date'
|
||||
placeholder='结束时间'
|
||||
@change='emitDateChange'
|
||||
:disabled-date='disableEndDate'
|
||||
:readonly="timeUnit !== '自定义'"
|
||||
></el-date-picker>
|
||||
<!-- 禁用时间选择器 -->
|
||||
<div class="date-display">
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
v-model="startDate"
|
||||
type="date"
|
||||
placeholder="起始时间"
|
||||
@change="emitDateChange"
|
||||
:disabled-date="disableStartDate"
|
||||
:readonly="timeUnit != '自定义'"
|
||||
></el-date-picker>
|
||||
<el-text>~</el-text>
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
v-model="endDate"
|
||||
type="date"
|
||||
placeholder="结束时间"
|
||||
@change="emitDateChange"
|
||||
:disabled-date="disableEndDate"
|
||||
:readonly="timeUnit !== '自定义'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="date-display" v-if="timeUnit !== '自定义'">
|
||||
<el-button
|
||||
style="width: 10px"
|
||||
class="triangle-button"
|
||||
type="primary"
|
||||
@click="prevPeriod"
|
||||
@change="emitDateChange"
|
||||
>
|
||||
<div class="left_triangle"></div>
|
||||
</el-button>
|
||||
<el-button class="triangle-button" type="primary" @click="goToCurrent">当前</el-button>
|
||||
<el-button
|
||||
style="width: 10px"
|
||||
class="triangle-button"
|
||||
type="primary"
|
||||
@click="nextPeriod"
|
||||
:disabled="isNextDisabled"
|
||||
>
|
||||
<div class="right_triangle"></div>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='date-display' v-if="timeUnit !== '自定义'">
|
||||
<el-button
|
||||
style='width: 10px;'
|
||||
class='triangle-button'
|
||||
type='primary'
|
||||
@click='prevPeriod'
|
||||
@change='emitDateChange'
|
||||
>
|
||||
<div class='left_triangle'></div>
|
||||
</el-button>
|
||||
<el-button class='triangle-button' type='primary' @click='goToCurrent'>
|
||||
当前
|
||||
</el-button>
|
||||
<el-button
|
||||
style='width: 10px;'
|
||||
class='triangle-button'
|
||||
type='primary'
|
||||
@click='nextPeriod'
|
||||
:disabled='isNextDisabled'
|
||||
>
|
||||
<div class='right_triangle'></div>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, defineProps, defineEmits } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
// 定义时间单位的类型
|
||||
interface TimeUnit {
|
||||
label: string;
|
||||
value: string;
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
// 定义组件的props，包含包括和排除的时间单位
|
||||
const props = defineProps({
|
||||
include: {
|
||||
type: Array as () => string[],
|
||||
default: () => ['日', '周', '月', '季度', '年', '自定义'],
|
||||
},
|
||||
exclude: {
|
||||
type: Array as () => string[],
|
||||
default: () => [],
|
||||
},
|
||||
default: {
|
||||
type: String,
|
||||
default: '月',
|
||||
},
|
||||
include: {
|
||||
type: Array as () => string[],
|
||||
default: () => ['日', '周', '月', '季度', '年', '自定义']
|
||||
},
|
||||
exclude: {
|
||||
type: Array as () => string[],
|
||||
default: () => []
|
||||
},
|
||||
default: {
|
||||
type: String,
|
||||
default: '月'
|
||||
}
|
||||
})
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits<{
|
||||
(e: 'update-dates', startDate: string, endDate: string): void;
|
||||
(e: 'update-dates', startDate: string, endDate: string): void
|
||||
}>()
|
||||
const timeUnit = ref<string>(props.default) // 默认选择
|
||||
const startDate = ref<Date>(new Date()) // 起始日期
|
||||
@@ -100,219 +87,206 @@ const isNextDisabled = ref<boolean>(false) // 控制下一周期按钮的禁用
|
||||
const today = ref<Date>(new Date()) // 当前日期
|
||||
// 过滤出可用的时间单位
|
||||
const timeUnits = ref<TimeUnit[]>(
|
||||
props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({
|
||||
label: unit,
|
||||
value: unit,
|
||||
})),
|
||||
props.include
|
||||
.filter(unit => !props.exclude.includes(unit))
|
||||
.map(unit => ({
|
||||
label: unit,
|
||||
value: unit
|
||||
}))
|
||||
)
|
||||
|
||||
// 发出日期变化事件
|
||||
const emitDateChange = () => {
|
||||
emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
|
||||
|
||||
emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
|
||||
}
|
||||
|
||||
// 在组件挂载时更新日期范围
|
||||
onMounted(() => {
|
||||
updateDateRange()
|
||||
updateDateRange()
|
||||
})
|
||||
const handleChange = (unit: string) => {
|
||||
// 根据选择的时间单位处理日期变化
|
||||
if (unit !== '自定义') {
|
||||
updateDateRange()
|
||||
} else {
|
||||
// 自定义选项逻辑
|
||||
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
|
||||
endDate.value = new Date()
|
||||
}
|
||||
timeUnit.value = unit
|
||||
// 根据选择的时间单位处理日期变化
|
||||
if (unit !== '自定义') {
|
||||
updateDateRange()
|
||||
} else {
|
||||
// 自定义选项逻辑
|
||||
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
|
||||
endDate.value = new Date()
|
||||
}
|
||||
timeUnit.value = unit
|
||||
|
||||
// 确保开始时间和结束时间不为空
|
||||
if (!startDate.value) {
|
||||
startDate.value = new Date()
|
||||
}
|
||||
if (!endDate.value) {
|
||||
endDate.value = new Date()
|
||||
}
|
||||
startDate.value = new Date()
|
||||
}
|
||||
if (!endDate.value) {
|
||||
endDate.value = new Date()
|
||||
}
|
||||
|
||||
emitDateChange() // 变化时也发出更新事件
|
||||
updateNextButtonStatus()
|
||||
emitDateChange() // 变化时也发出更新事件
|
||||
updateNextButtonStatus()
|
||||
}
|
||||
const updateDateRange = () => {
|
||||
// 根据选择的时间单位计算起始和结束日期
|
||||
if (timeUnit.value === '日') {
|
||||
startDate.value = today.value
|
||||
endDate.value = today.value
|
||||
} else if (timeUnit.value === '周') {
|
||||
startDate.value = getStartOfWeek(today.value)
|
||||
endDate.value = getEndOfWeek(today.value)
|
||||
} else if (timeUnit.value === '月') {
|
||||
// 获取本月的开始和结束日期
|
||||
startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1)
|
||||
endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0)
|
||||
|
||||
// 根据选择的时间单位计算起始和结束日期
|
||||
if (timeUnit.value === '日') {
|
||||
startDate.value = today.value
|
||||
endDate.value = today.value
|
||||
} else if (timeUnit.value === '周') {
|
||||
startDate.value = getStartOfWeek(today.value)
|
||||
endDate.value = getEndOfWeek(today.value)
|
||||
|
||||
} else if (timeUnit.value === '月') {
|
||||
// 获取本月的开始和结束日期
|
||||
startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1);
|
||||
endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0);
|
||||
|
||||
// // 确保结束日期不超过今天
|
||||
// if (endDate.value > today.value) {
|
||||
// endDate.value = new Date(today.value);
|
||||
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
|
||||
// }
|
||||
// // 确保结束日期不超过今天
|
||||
// if (endDate.value > today.value) {
|
||||
// endDate.value = new Date(today.value);
|
||||
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
|
||||
// }
|
||||
} else if (timeUnit.value === '季度') {
|
||||
const quarter = Math.floor(today.value.getMonth() / 3)
|
||||
startDate.value = new Date(today.value.getFullYear(), quarter * 3, 1)
|
||||
endDate.value = new Date(today.value.getFullYear(), quarter * 3 + 3, 0)
|
||||
|
||||
} else if (timeUnit.value === '季度') {
|
||||
const quarter = Math.floor(today.value.getMonth() / 3);
|
||||
startDate.value = new Date(today.value.getFullYear(), quarter * 3, 1);
|
||||
endDate.value = new Date(today.value.getFullYear(), quarter * 3 + 3, 0);
|
||||
// // 确保结束日期不超过今天
|
||||
// if (endDate.value > today.value) {
|
||||
// endDate.value = new Date(today.value);
|
||||
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
|
||||
// }
|
||||
} else if (timeUnit.value === '年') {
|
||||
startDate.value = new Date(today.value.getFullYear(), 0, 1)
|
||||
endDate.value = new Date(today.value.getFullYear(), 11, 31)
|
||||
|
||||
// // 确保结束日期不超过今天
|
||||
// if (endDate.value > today.value) {
|
||||
// endDate.value = new Date(today.value);
|
||||
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
|
||||
// }
|
||||
// // 确保结束日期不超过今天
|
||||
// if (endDate.value > today.value) {
|
||||
|
||||
} else if (timeUnit.value === '年') {
|
||||
startDate.value = new Date(today.value.getFullYear(), 0, 1);
|
||||
endDate.value = new Date(today.value.getFullYear(), 11, 31);
|
||||
// endDate.value = new Date(today.value);
|
||||
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
|
||||
// }
|
||||
}
|
||||
// 确保开始时间和结束时间不为空
|
||||
if (!startDate.value) {
|
||||
startDate.value = new Date()
|
||||
}
|
||||
if (!endDate.value) {
|
||||
endDate.value = new Date()
|
||||
}
|
||||
|
||||
// // 确保结束日期不超过今天
|
||||
// if (endDate.value > today.value) {
|
||||
|
||||
// endDate.value = new Date(today.value);
|
||||
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
|
||||
// }
|
||||
}
|
||||
// 确保开始时间和结束时间不为空
|
||||
if (!startDate.value) {
|
||||
startDate.value = new Date()
|
||||
}
|
||||
if (!endDate.value) {
|
||||
endDate.value = new Date()
|
||||
}
|
||||
|
||||
updateNextButtonStatus()
|
||||
updateNextButtonStatus()
|
||||
}
|
||||
const getStartOfWeek = (date: Date) => {
|
||||
const startOfWeek = new Date(date)
|
||||
const day = startOfWeek.getDay()
|
||||
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
|
||||
startOfWeek.setDate(startOfWeek.getDate() + diff)
|
||||
return startOfWeek
|
||||
const startOfWeek = new Date(date)
|
||||
const day = startOfWeek.getDay()
|
||||
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
|
||||
startOfWeek.setDate(startOfWeek.getDate() + diff)
|
||||
return startOfWeek
|
||||
}
|
||||
const getEndOfWeek = (date: Date) => {
|
||||
const endOfWeek = new Date(date)
|
||||
const day = endOfWeek.getDay()
|
||||
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
|
||||
endOfWeek.setDate(endOfWeek.getDate() + diff)
|
||||
const endOfWeek = new Date(date)
|
||||
const day = endOfWeek.getDay()
|
||||
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
|
||||
endOfWeek.setDate(endOfWeek.getDate() + diff)
|
||||
|
||||
// 获取今天的日期
|
||||
const today = new Date();
|
||||
today.setHours(23, 59, 59, 999); // 设置今天的结束时间（23:59:59.999）
|
||||
// 获取今天的日期
|
||||
const today = new Date()
|
||||
today.setHours(23, 59, 59, 999) // 设置今天的结束时间（23:59:59.999）
|
||||
|
||||
// 返回不超过今天的结束时间
|
||||
//return endOfWeek > today ? today : endOfWeek;
|
||||
return endOfWeek
|
||||
// 返回不超过今天的结束时间
|
||||
//return endOfWeek > today ? today : endOfWeek;
|
||||
return endOfWeek
|
||||
}
|
||||
const prevPeriod = () => {
|
||||
const prevStartDate = new Date(startDate.value)
|
||||
const prevEndDate = new Date(endDate.value)
|
||||
const prevStartDate = new Date(startDate.value)
|
||||
const prevEndDate = new Date(endDate.value)
|
||||
|
||||
if (timeUnit.value === '日') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 1)
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 1)
|
||||
} else if (timeUnit.value === '周') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 7)
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 7)
|
||||
} else if (timeUnit.value === '月') {
|
||||
if (timeUnit.value === '日') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 1)
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 1)
|
||||
} else if (timeUnit.value === '周') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 7)
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 7)
|
||||
} else if (timeUnit.value === '月') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
|
||||
} else if (timeUnit.value === '季度') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
|
||||
} else if (timeUnit.value === '年') {
|
||||
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
|
||||
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
|
||||
}
|
||||
|
||||
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
|
||||
|
||||
|
||||
|
||||
} else if (timeUnit.value === '季度') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
|
||||
} else if (timeUnit.value === '年') {
|
||||
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
|
||||
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
|
||||
}
|
||||
|
||||
startDate.value = prevStartDate
|
||||
endDate.value = prevEndDate
|
||||
updateNextButtonStatus()
|
||||
startDate.value = prevStartDate
|
||||
endDate.value = prevEndDate
|
||||
updateNextButtonStatus()
|
||||
}
|
||||
const goToCurrent = () => {
|
||||
if (timeUnit.value !== '自定义') {
|
||||
updateDateRange() // 更新为当前选择时间单位的时间范围
|
||||
}
|
||||
if (timeUnit.value !== '自定义') {
|
||||
updateDateRange() // 更新为当前选择时间单位的时间范围
|
||||
}
|
||||
}
|
||||
const nextPeriod = () => {
|
||||
const nextStartDate = new Date(startDate.value)
|
||||
const nextEndDate = new Date(endDate.value)
|
||||
const nextStartDate = new Date(startDate.value)
|
||||
const nextEndDate = new Date(endDate.value)
|
||||
|
||||
if (timeUnit.value === '日') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 1)
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 1)
|
||||
} else if (timeUnit.value === '周') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 7)
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 7)
|
||||
} else if (timeUnit.value === '月') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
|
||||
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
|
||||
} else if (timeUnit.value === '季度') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
|
||||
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
|
||||
} else if (timeUnit.value === '年') {
|
||||
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
|
||||
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
|
||||
}
|
||||
if (timeUnit.value === '日') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 1)
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 1)
|
||||
} else if (timeUnit.value === '周') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 7)
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 7)
|
||||
} else if (timeUnit.value === '月') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
|
||||
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
|
||||
} else if (timeUnit.value === '季度') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
|
||||
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
|
||||
} else if (timeUnit.value === '年') {
|
||||
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
|
||||
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
|
||||
}
|
||||
|
||||
startDate.value = nextStartDate
|
||||
endDate.value = nextEndDate
|
||||
updateNextButtonStatus()
|
||||
startDate.value = nextStartDate
|
||||
endDate.value = nextEndDate
|
||||
updateNextButtonStatus()
|
||||
}
|
||||
const updateNextButtonStatus = () => {
|
||||
|
||||
// 更新下一个按钮的禁用状态
|
||||
const maxDate = new Date() // 假设最新日期为今天
|
||||
// 将 maxDate 设置为当天的开始时间
|
||||
maxDate.setHours(0, 0, 0, 0)
|
||||
// 将 endDate 设置为当天的开始时间并进行比较
|
||||
const endDateAdjusted = new Date(endDate.value)
|
||||
endDateAdjusted.setHours(0, 0, 0, 0)
|
||||
// 仅比较日期部分
|
||||
isNextDisabled.value = endDateAdjusted >= maxDate
|
||||
emitDateChange() // 变化时也发出更新事件
|
||||
// 更新下一个按钮的禁用状态
|
||||
const maxDate = new Date() // 假设最新日期为今天
|
||||
// 将 maxDate 设置为当天的开始时间
|
||||
maxDate.setHours(0, 0, 0, 0)
|
||||
// 将 endDate 设置为当天的开始时间并进行比较
|
||||
const endDateAdjusted = new Date(endDate.value)
|
||||
endDateAdjusted.setHours(0, 0, 0, 0)
|
||||
// 仅比较日期部分
|
||||
isNextDisabled.value = endDateAdjusted >= maxDate
|
||||
emitDateChange() // 变化时也发出更新事件
|
||||
}
|
||||
|
||||
|
||||
// 限制开始日期不能选择超过当前日期
|
||||
const disableStartDate = (date: Date) => {
|
||||
return date > today.value
|
||||
return date > today.value
|
||||
}
|
||||
// 限制结束日期不能超过当前日期且必须大于开始日期
|
||||
const disableEndDate = (date: Date) => {
|
||||
if (timeUnit.value !== '自定义') return false // 如果不是自定义时间单位，则不限制
|
||||
const start = new Date(startDate.value)
|
||||
return date > today.value || (start && date <= start)
|
||||
if (timeUnit.value !== '自定义') return false // 如果不是自定义时间单位，则不限制
|
||||
const start = new Date(startDate.value)
|
||||
return date > today.value || (start && date <= start)
|
||||
}
|
||||
|
||||
|
||||
// 格式化日期yyyy-mm-dd
|
||||
function formatDate(date: Date | null): string {
|
||||
if (!date) {
|
||||
return '';
|
||||
}
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
@import "./index.scss";
|
||||
<style scoped lang="scss">
|
||||
@use './index.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
// import 'echarts/lib/component/dataZoom'
|
||||
|
||||
Reference in New Issue
Block a user