120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
||
<el-dialog title="打印确认" width="400px" v-model="showDayBusiness">
|
||
<div class="business_wrap">
|
||
<div class="title">
|
||
<el-text>请选择要打印的日期：</el-text> <el-text type="danger">周期最长为7天</el-text>
|
||
</div>
|
||
<div class="row">
|
||
<el-date-picker v-model="printDayBusinessParams.date" type="daterange" start-placeholder="开始日期"
|
||
end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate"
|
||
@change="handleDateChange" clearable />
|
||
</div>
|
||
<div class="business_tips">
|
||
<el-text type="info">若数据过多，打印时间会比较长，请耐心等待</el-text>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="showDayBusiness = false">取 消</el-button>
|
||
<el-button type="primary" @click="confirmHandle" :loading="printDayBusinessLoading">确 定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import dayjs from "dayjs";
|
||
import { ref, onMounted } from "vue";
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: '经营日报'
|
||
}
|
||
})
|
||
|
||
const showDayBusiness = ref(false)
|
||
const emits = defineEmits(['success'])
|
||
|
||
// 打印参数
|
||
const printDayBusinessParams = ref({
|
||
date: [],
|
||
})
|
||
const printDayBusinessLoading = ref(false)
|
||
|
||
// 取消
|
||
const confirmHandle = () => {
|
||
// 校验日期
|
||
if (!printDayBusinessParams.value.date || printDayBusinessParams.value.date.length !== 2) {
|
||
ElMessage.warning('请选择日期范围')
|
||
return
|
||
}
|
||
showDayBusiness.value = false
|
||
emits('success', { date: printDayBusinessParams.value.date })
|
||
}
|
||
|
||
// 日期禁用规则：只能选昨天及更早，不能选未来
|
||
const disabledDate = (time) => {
|
||
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||
return dayjs(time).isAfter(yesterday)
|
||
}
|
||
|
||
// 日期选择后校验：区间长度不能超过7天
|
||
const handleDateChange = (val) => {
|
||
if (!val || val.length !== 2) return
|
||
const [start, end] = val
|
||
const days = dayjs(end).diff(start, 'day') + 1 // 包含起止日
|
||
if (days > 7) {
|
||
ElMessage.warning('日期范围最多只能选择7天')
|
||
printDayBusinessParams.value.date = [] // 清空选择
|
||
}
|
||
}
|
||
|
||
// 判断当前时间 是否在 00:00 ~ 05:20 之间
|
||
const time = ref(['00:00', '05:20'])
|
||
const isInTimeRange = () => {
|
||
const now = dayjs()
|
||
const startTime = dayjs(time.value[0], 'HH:mm')
|
||
const endTime = dayjs(time.value[1], 'HH:mm')
|
||
return now.isAfter(startTime) && now.isBefore(endTime)
|
||
}
|
||
|
||
// 打开弹窗
|
||
const show = () => {
|
||
if (isInTimeRange()) {
|
||
ElMessage.warning(`当前时间不能打印${props.title}，打印时间：${time.value[0]}点至${time.value[1]}点`)
|
||
return
|
||
}
|
||
showDayBusiness.value = true
|
||
}
|
||
|
||
// 暴露方法
|
||
defineExpose({ show })
|
||
|
||
// 初始化默认选中昨天
|
||
onMounted(() => {
|
||
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||
printDayBusinessParams.value.date = [yesterday, yesterday]
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.business_wrap {
|
||
.title {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
|
||
.row {
|
||
padding-top: 14px;
|
||
}
|
||
|
||
.business_tips {
|
||
padding-top: 6px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |