你是一个vue前端工程师，有着多年的研发经验，查询日期范围默认赋值： 1、开始时间为今天向前一个自然月的第一天； 2、结束时间为今天； 3、开始时间选择和结束时间选择区间最大1个月； 4、要给dateRange一个初始值； <template> <div class="mainbody"> <dt-location :data="[{title:'报告管理'},{title:'车辆报告'}]"></dt-location> <dt-toolbar-box> <template #default> <div class="list-box"> <div class="l-list"> <el-button-group> <el-button icon="Plus" @click="$common.linkUrl('/vinReport/edit')">查询</el-button> <el-button icon="Download" @click="exportExcel">导出Excel</el-button> <!-- <el-button icon="Delete" @click="deleteCheckAll">删除</el-button> --> </el-button-group> </div> <div class="r-list"> <div class="search-box"> <el-input placeholder="输入关健字" v-model="datas.keyword" @clear="initData" @keyup.enter.native="initData" clearable> <template #append> <el-button icon="Search" @click="initData"></el-button> </template> </el-input> </div> </div> </div> </template> <template #more> <div class="more-box"> <dl> <dt>报告类型</dt> <dd> <el-select v-model="datas.reportType" placeholder="请选择..." @change="initData"> <el-option label="全部类型" :value="-1"></el-option> <el-option label="精选-A" :value="1"></el-option> <el-option label="优选-A" :value="2"></el-option> <el-option label="优选-B" :value="3"></el-option> <el-option label="优选-D" :value="4"></el-option> <el-option label="优选-C" :value="5"></el-option> <el-option label="优选-E" :value="6"></el-option> <el-option label="精选-C" :value="7"></el-option> <el-option label="优选-F" :value="8"></el-option> <el-option label="优选-G" :value="9"></el-option> <el-option label="精选-D" :value="10"></el-option> <el-option label="优选-H" :value="11"></el-option> <el-option label="优选-I" :value="12"></el-option> <el-option label="精选-E" :value="13"></el-option> <!-- <el-option label="甄选-B" :value="22"></el-option> --> </el-select> </dd> </dl> <dl> <dt>状态</dt> <dd> <el-select v-model="datas.reportStatus" placeholder="请选择..." @change="initData"> <el-option label="全部状态" :value="-1"></el-option> <el-option label="待确认" :value="100"></el-option> <el-option label="待付款" :value="110"></el-option> <el-option label="生成中" :value="120"></el-option> <el-option label="已生效" :value="130"></el-option> <el-option label="已退单" :value="190"></el-option> <el-option label="查询失败" :value="199"></el-option> </el-select> </dd> </dl> <dl> <dt>查询日期</dt> <dd> <el-date-picker style="width:280px" v-model="datas.dateRange" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" @change="initData"> </el-date-picker> </dd> </dl> </div> </template> </dt-toolbar-box> <div class="content-box"> <el-card class="table-card"> <el-table ref="tableRef" v-loading="datas.loading" :data="datas.listData" stripe class="table-list" @selection-change="handleSelectionChange"> <el-table-column fixed="left" type="selection" width="45"></el-table-column> <el-table-column fixed="left" prop="reportNo" label="报告编号" min-width="200" show-overflow-tooltip></el-table-column> <el-table-column prop="userName" label="用户名" width="100" show-overflow-tooltip></el-table-column> <el-table-column label="报告类型" width="95"> <template #default="scope"> <el-tag size="small" type="info" effect="plain" v-if="scope.row.reportType==1">精选-A</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==2">优选-A</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==3">优选-B</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==4">优选-D</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==5">优选-C</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==6">优选-E</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==7">精选-C</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==8">优选-F</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==9">优选-G</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==10">精选-D</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==11">优选-H</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==12">优选-I</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==13">精选-E</el-tag> <el-tag size="small" type="info" effect="plain" v-else-if="scope.row.reportType==22">甄选-B</el-tag> <el-tag size="small" effect="info" v-else>未定义</el-tag> </template> </el-table-column> <el-table-column label="状态" width="95"> <template #default="scope"> <el-tag size="small" type="dark" effect="dark" v-if="scope.row.reportStatus==100">待确认</el-tag> <el-tag size="small" type="dark" effect="dark" v-else-if="scope.row.reportStatus==110">待付款</el-tag> <el-tag size="small" type="danger" effect="dark" v-else-if="scope.row.reportStatus==120">生成中</el-tag> <el-tag size="small" type="success" effect="dark" v-else-if="scope.row.reportStatus==130">已生效</el-tag> <el-tag size="small" type="info" effect="dark" v-else-if="scope.row.reportStatus==190">已退单</el-tag> <el-tag size="small" type="info" effect="dark" v-else-if="scope.row.reportStatus==199">查询失败</el-tag> <el-tag size="small" type="info" effect="dark" v-else>未知</el-tag> </template> </el-table-column> <el-table-column prop="vin" label="Vin" width="180" show-overflow-tooltip></el-table-column> <el-table-column label="报告内容" width="260" show-overflow-tooltip> <template #default="scope"> <span class="nowrap">{{scope.row.reportContent}}</span> </template> </el-table-column> <el-table-column label="报告链接" width="260" show-overflow-tooltip> <template #default="scope"> <span class="nowrap">{{scope.row.reportUrl}}</span> </template> </el-table-column> <el-table-column label="查询日期" width="160"> <template #default="scope"> <span class="nowrap">{{scope.row.addTime}}</span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> <!-- <template #default="scope"> <el-button size="small" icon="Finished" @click="$common.linkUrl(`/vinReport/edit/${scope.row.id}`)"></el-button> <el-button size="small" type="danger" icon="Delete" @click="deleteItem(scope.row.id)"></el-button> </template> --> </el-table-column> </el-table> </el-card> <div class="pager-box"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="datas.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="datas.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="datas.totalCount"> </el-pagination> </div> </div> </div> </template> <script setup> import { ref, reactive, getCurrentInstance } from "vue" import DtToolbarBox from '../../components/layout/DtToolbarBox.vue' //获取全局属性 const { proxy } = getCurrentInstance() const tableRef = ref(null) //定义属性 const datas = reactive({ loading: false, keyword: '', totalCount: 0, pageSize: 10, pageIndex: 1, listData: [], multipleSelection: [], reportType: -1, reportStatus: -1, dateRange: [], }) //初始化工具栏 const initLoad = () => { } //初始化数据 const initData = async () => { if (!ValidateDateRange(datas.dateRange)) { proxy.$message.warning("日期范围不能超过2个月，请重新选择！"); return; } let sendUrl = `/vehicleReport/reports?pageSize=${datas.pageSize}&pageIndex=${datas.pageIndex}` + `&reportType=${datas.reportType}` + `&reportStatus=${datas.reportStatus}` if (datas.dateRange.length > 0) { sendUrl += `&startTime=${datas.dateRange[0]}` sendUrl += `&endTime=${datas.dateRange[1]}` } if (datas.keyword.length > 0) { sendUrl += `&keyword=${encodeURI(datas.keyword)}` } //获取分页列表 await proxy.$api.request({ url: sendUrl, beforeSend() { datas.loading = true }, success(res) { datas.listData = res.data let pageInfo = JSON.parse(res.headers["x-pagination"]) datas.totalCount = pageInfo.totalCount datas.pageSize = pageInfo.pageSize datas.pageIndex = pageInfo.pageIndex }, error(err) { datas.listData = [] }, complete() { datas.loading = false } }) } //多选删除 const deleteCheckAll = () => { //拿到选中的数据 let list = datas.multipleSelection //检查是否有选中 if (!list.length) { proxy.$message({ type: 'warning', message: '请选择要删除的记录' }) return false } //执行删除操作 proxy.$confirm('确认要删除该记录吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let ids = list.map(obj => obj.id) proxy.$api.request({ method: 'delete', url: `/vehicleReport/reports?ids=${ids.toString()}`, loading: true, successMsg: '已删除成功', success(res) { tableRef.value.clearSelection() //清除选中状态 initData() //重新加载列表 } }) }).catch(() => {}) } //单项删除 const deleteItem = (val) => { //执行删除操作 proxy.$confirm('确认要删除该记录吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { proxy.$api.request({ method: 'delete', url: `/vehicleReport/reports/${val}`, loading: true, successMsg: '已删除成功', success(res) { initData() //重新加载列表 } }) }).catch(() => {}) } //选中第几行 const handleSelectionChange = (val) => { datas.multipleSelection = val } //每页显示数量 const handleSizeChange = (val) => { if (datas.pageSize != val) { datas.pageSize = val initData() } } //跳转到第几页 const handleCurrentChange = (val) => { if (datas.pageIndex != val) { datas.pageIndex = val initData() } } // 导出处理方法 const exportExcel = async () => { try { const params = { StartTime: datas.dateRange[0], EndTime: datas.dateRange[1], ReportType: datas.reportType, ReportStatus: datas.reportStatus, Keyword: datas.keyword, Format: "xlsx" // 支持 csv 或 xlsx }; // 显示加载动画 if (proxy && proxy.$loading) { proxy.$loading.show(); } const response = await proxy.$api.request({ url: "/vehicleReport/ExportExcel", method: "POST", data: params, responseType: 'arraybuffer', // 确保以二进制形式接收数据 headers: { 'Content-Type': 'application/json' }, success(res) { console.log(res); // 检查 response 是否有效 if (!res || !res.data) { throw new Error("服务器未返回有效数据"); } // 创建Blob对象并下载文件 const blob = new Blob([res.data], { type: res.headers['content-type'] || "application/octet-stream" }); const url = window.URL.createObjectURL(blob); console.log(url); // 隐藏加载动画 if (proxy && proxy.$loading) { proxy.$loading.hide(); } // 创建下载链接 const link = document.createElement("a"); link.href = url; link.download = `车辆报告_${new Date().toISOString().slice(0, 10)}.${params.Format}`; link.click(); // 释放 URL 对象 window.URL.revokeObjectURL(url); }, error(err) { throw new Error("服务器未返回有效数据"); }, complete() { datas.loading = false } }); } catch (error) { // 隐藏加载动画 if (proxy && proxy.$loading) { proxy.$loading.hide(); } console.error("导出失败:", error.message || error); proxy.$message.error("导出失败，请检查网络或联系管理员！"); } }; // 计算自然月的第一天 const getFirstDayOfPreviousMonth = () => { const today = new Date() const firstDay = new Date(today.getFullYear(), today.getMonth() - 1, 1) return proxy.$dayjs(firstDay).format('YYYY-MM-DD') } // 初始化日期范围 const initDateRange = () => { const today = proxy.$dayjs().format('YYYY-MM-DD') const firstDayPrevMonth = getFirstDayOfPreviousMonth() datas.dateRange = [firstDayPrevMonth, today] } // 日期选择器配置 const pickerOptions = reactive({ disabledDate: (time) => { if (!datas.dateRange || datas.dateRange.length === 0) return false const [start, end] = datas.dateRange const limitDate = start ? proxy.$dayjs(start).add(1, 'month').toDate() : proxy.$dayjs(end).subtract(1, 'month').toDate() return start ? time.getTime() > limitDate.getTime() || time.getTime() > Date.now() : time.getTime() < limitDate.getTime() }, onPick: ({ maxDate, minDate }) => { // 自动限制选择范围 if (maxDate && minDate) { const diff = proxy.$dayjs(maxDate).diff(minDate, 'month') if (diff >= 1) { proxy.$nextTick(() => { datas.dateRange = [ minDate, proxy.$dayjs(minDate).add(1, 'month').toDate() ] proxy.$message.warning('时间选择范围不能超过1个月') }) } } } }) //初始化工具栏时设置默认日期范围 initLoad = () => { initDateRange() // 初始化默认日期范围 } //执行初始化方法 initData() = () => { initDateRange() // 初始化默认日期范围 } // 修改日期范围时的处理 const handleDateChange = (val) => { if (!val || val.length !== 2) return const [start, end] = val const monthDiff = proxy.$dayjs(end).diff(start, 'month', true) if (monthDiff > 1) { proxy.$message.warning('时间选择范围不能超过1个月') initDateRange() // 重置为默认范围 return } datas.dateRange = val initData() } </script> // 样式 <style scoped> .el-tooltip { max-width: 600px; } </style>