<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 prop="id" label="Id" 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
-column type="primary" label="查看详情">
<div class="btns">
<el
-button type="primary"
@click="common.linkUrl(`/account/vinReport/show/${id}`)">查看详情</el
-button>
</div>
</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.create
Element('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>
本文介绍在Vue.js项目中如何处理El-Input组件的回车事件。通过添加native修饰符实现原生事件监听，确保自定义组件能正确响应键盘事件。
扫一扫
1872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
