<
template>
<div class="tabel-search marb-20">
<div class="left" style="display
: flex; align-
items
: center; justify-content
: space-between;">
<div class="search-group" style="display
: flex; gap
: 10px; flex-wrap
: wrap;">
<el-select v-model="datas.reportType" placeholder="请选择..." @change="initData" style="min-width
: 120px;">
<el-option label="所有类型"
:value="-1"></el-option>
<el-option label="精选-A"
:value="1"></el-option>
<el-option label="精选-C"
:value="7"></el-option>
<el-option label="精选-D"
:value="10"></el-option>
<el-option label="优选-A"
:value="2"></el-option>
<el-option label="优选-B"
:value="3"></el-option>
<el-option label="优选-C"
:value="5"></el-option>
<el-option label="优选-D"
:value="4"></el-option>
<el-option label="优选-E"
:value="6"></el-option>
<el-option label="优选-F"
:value="8"></el-option>
<el-option label="优选-G"
:value="9"></el-option>
<el-option label="优选-H"
:value="11"></el-option>
<el-option label="优选-I"
:value="12"></el-option>
</el-select>
</div>
<div style="margin-left
:1rem">
<el-select v-model="datas.reportStatus" placeholder="请选择..." @change="initData"
style="min-width
: 120px;">
<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>
</div>
</div>
<div class="right" style="display
: flex; justify-content
: space-between;">
<div style="display
: flex; gap
: 10px; flex-wrap
: wrap;">
<el-input v-model="datas.keyword" placeholder="请输入关健字" @clear="initData" @keyup.enter.native="initData"
clearable>
<
template #append>
<el-button
:icon="ElIconSearch" @click="initData" />
</
template>
</el-input>
</div>
<div style="margin-left
:1rem">
<el-button type="primary"
:icon="Download" @click="exportExcel">导出Excel</el-button>
</div>
</div>
</div>
<div class="order-list">
<el-skeleton
:loading="datas.loading" animated>
<
template #
template>
</
template>
<div v-if="datas.listData.length===0" class="nodata">
<span class="text">暂无记录</span>
</div>
<el-table ref="tableRef" v-loading="datas.loading"
:data="datas.listData" stripe class="table-list">
<el-table-column prop="reportNo" label="订单号" min-width="120"></el-table-column>
<el-table-column label="报告类型" width="120">
<
template #default="scope">
<el-tag v-if="scope.row.reportType===1">精选-A</el-tag>
<el-tag v-else-if="scope.row.reportType===7">精选-C</el-tag>
<el-tag v-else-if="scope.row.reportType===10">精选-D</el-tag>
<el-tag v-else-if="scope.row.reportType===2">优选-A</el-tag>
<el-tag v-else-if="scope.row.reportType===3">优选-B</el-tag>
<el-tag v-else-if="scope.row.reportType===5">优选-C</el-tag>
<el-tag v-else-if="scope.row.reportType===4">优选-D</el-tag>
<el-tag v-else-if="scope.row.reportType===6">优选-E</el-tag>
<el-tag v-else-if="scope.row.reportType===8">优选-F</el-tag>
<el-tag v-else-if="scope.row.reportType===9">优选-G</el-tag>
<el-tag v-else-if="scope.row.reportType===11">优选-H</el-tag>
<el-tag v-else-if="scope.row.reportType===12">优选-I</el-tag>
<el-tag v-else type="warning">未知</el-tag>
</
template>
</el-table-column>
<el-table-column prop="vin" label="车架号" width="200"></el-table-column>
<el-table-column prop="addTime" label="下单时间" width="200"></el-table-column>
<el-table-column label="状态" width="120">
<
template #default="scope">
<el-tag v-if="scope.row.reportStatus===130" type="success">已生效</el-tag>
<el-tag v-else-if="scope.row.reportStatus===100" type="info">待确认</el-tag>
<el-tag v-else-if="scope.row.reportStatus===190" type="info">已退单</el-tag>
<el-tag v-else-if="scope.row.reportStatus===199" type="info">查询失败</el-tag>
<el-tag v-else-if="scope.row.reportStatus===110" type="warning">待付款</el-tag>
<el-tag v-else-if="scope.row.reportStatus===120" type="warning">生成中</el-tag>
<el-tag v-else type="warning">未知</el-tag>
</
template>
</el-table-column>
</el-table>
</el-skeleton>
</div>
<div class="pager-box">
<el-pagination background
:page-size="datas.pageSize"
:current-page="datas.pageIndex"
:total="datas.totalCount"
layout="prev,pager,next" @current-change="handleCurrentChange" />
</div>
</
template>
<script setup>
//获取当前站点信息
const siteConfig = await useSite('site')
//页面SEO设置
useSeoMeta({
title
: `订单管理 - ${siteConfig.seoKeyword}`,
ogTitle
: siteConfig.seoKeyword,
description
: siteConfig.seoDescription,
ogDescription
: siteConfig.seoDescription,
})
//获取路由信息
const route = useRoute()
//定义属性
const datas = reactive({
loading
: false,
keyword
: '',
totalCount
: 0,
pageSize
: 10,
pageIndex
: 1,
listData
: [],
reportType
: -1,
reportStatus
: -1,
dateRange
: [],
})
//初始化数据
const initData = async () => {
let sendUrl =
`/account/vinReport?pageSize=${datas.pageSize}&pageIndex=${datas.pageIndex}`
if (datas.reportType >= 0) {
sendUrl += `&reportType=${datas.reportType}`
}
if (datas.reportStatus >= 0) {
sendUrl += `&reportStatus=${datas.reportStatus}`
}
if (datas.keyword.length > 0) {
sendUrl += `&keyword=${encodeURI(datas.keyword)}`
}
if (datas.dateRange.length > 0) {
sendUrl += `&startTime=${datas.dateRange[0]}`
sendUrl += `&endTime=${datas.dateRange[1]}`
}
//获取分页列表
useHttp({
url
: sendUrl,
beforeSend() {
datas.loading = true
},
success(res) {
datas.listData = res.data
datas.totalCount = res.pagination.totalCount
datas.pageIndex = res.pagination.pageIndex
datas.pageSize = res.pagination.pageSize
},
error(err) {
datas.listData = []
},
complete() {
datas.loading = false
}
})
}
//跳转到第几页
const handleCurrentChange = (val) => {
if (datas.pageIndex != val) {
datas.pageIndex = val
initData()
}
}
//数据导出功能 ------------
const exportExcel = async () => {
let sendUrl = `/vehicleReport/reports/ExportExcel?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,
responseType
: 'blob',
beforeSend() {
datas.loading = true
},
success(res) {
let exportData = res.data;
// console.log('导出数据', res);
// 获取当前日期时间
const now = new Date();
// 获得年月日时分秒
const datetimeStr =
now.getFullYear() +
(now.getMonth() + 1).toString().padStart(2, '0') +
now.getDate().toString().padStart(2, '0') +
now.getHours().toString().padStart(2, '0') +
now.getMinutes().toString().padStart(2, '0') +
now.getSeconds().toString().padStart(2, '0');
// 从响应头获取文件名
let filename = "车辆报告_" + datetimeStr +".xlsx";
// 创建下载链接
const url = window.URL.createObjectURL(new Blob([exportData]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
// 清理
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
},
error(err) {
proxy.$message.error('导出失败，请重试！')
},
complete() {
datas.loading = false
}
})
}
//数据导出功能 ------------
//页面完成后执行
onMounted(() => {
if (route.params.type) {
datas.reportType = parseInt(route.params.type)
}
initData()
})
</script>
模板代码优化技巧
本文探讨了在编写模板代码时如何避免代码重复，并介绍了通过使用函数参数或类成员变量替代模板参数来减少代码膨胀的方法。
扫一扫
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
