|
|
|
@@ -2,37 +2,35 @@ |
|
|
|
<div class="top"> |
|
|
|
<!-- 输入框 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-input v-model="input4" placeholder="请输入ETC卡号" style="width: 220px;"> </el-input> |
|
|
|
<el-input v-model="formData.input1" placeholder="请输入ETC卡号" style="width: 220px"> </el-input> |
|
|
|
</div> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-input v-model="input4" placeholder="请输入车牌号" style="width: 220px;"> </el-input> |
|
|
|
<el-input v-model="formData.input2" placeholder="请输入车牌号" style="width: 220px"> </el-input> |
|
|
|
</div> |
|
|
|
<!-- 日期框 --> |
|
|
|
<div class="topstyle" > |
|
|
|
<div class="topstyle"> |
|
|
|
<el-date-picker |
|
|
|
v-model="value1" |
|
|
|
v-model="formData.input3" |
|
|
|
type="datetime" |
|
|
|
placeholder="开始日期" |
|
|
|
format="YYYY/MM/DD hh:mm:ss" |
|
|
|
|
|
|
|
/> |
|
|
|
<!-- <span>-</span> --> |
|
|
|
<!-- <el-button>至</el-button> --> |
|
|
|
<!-- <el-button>至</el-button> --> |
|
|
|
<el-date-picker |
|
|
|
v-model="value1" |
|
|
|
v-model="formData.input4" |
|
|
|
type="datetime" |
|
|
|
|
|
|
|
placeholder="结束日期" |
|
|
|
format="YYYY/MM/DD hh:mm:ss" |
|
|
|
style="margin-left: 5px;" |
|
|
|
style="margin-left: 5px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<!-- 按钮 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-button v-model="input4" type="success" :icon="Search" @click="search">搜索</el-button> |
|
|
|
<el-button type="warning" :icon="Refresh" @click="reset">重置</el-button> |
|
|
|
<el-button type="success" :icon="Search" @click="submitForm">搜索</el-button> |
|
|
|
<el-button type="warning" :icon="Refresh" @click="submitReset">重置</el-button> |
|
|
|
<el-button type="primary" plain @click="downloadExcel">导出当前页</el-button> |
|
|
|
<el-button type="primary" plain @click="dddd">导出所有</el-button> |
|
|
|
<el-button type="primary" plain @click="dddd">导出所有</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="padding-top: 12px"> |
|
|
|
@@ -51,29 +49,89 @@ |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div style="padding-top: 12px" class="as-gravity-center-end"> |
|
|
|
<el-pagination |
|
|
|
:page-sizes="[10, 20, 30, 40]" |
|
|
|
layout="sizes, prev, pager, next" |
|
|
|
:total="1000" |
|
|
|
/> |
|
|
|
<el-pagination :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="1000" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { reactive, ref} from 'vue' |
|
|
|
import { reactive, ref } from 'vue' |
|
|
|
import { useRoute, useRouter } from 'vue-router' |
|
|
|
import { Calendar, Search, Refresh } from '@element-plus/icons-vue' |
|
|
|
import type { ElTable } from 'element-plus' |
|
|
|
import { getCurrentInstance } from 'vue' |
|
|
|
const instance = getCurrentInstance() |
|
|
|
const _this= instance.appContext.config.globalProperties |
|
|
|
|
|
|
|
const input3 = ref('') |
|
|
|
const input4 = ref('') |
|
|
|
const value1 = ref('') |
|
|
|
|
|
|
|
function reset() {} |
|
|
|
function search() {} |
|
|
|
const formData = reactive({ |
|
|
|
input1:'', |
|
|
|
input2:'', |
|
|
|
input3:'', |
|
|
|
input4:'', |
|
|
|
date1: '1', |
|
|
|
date2: '52011328220200481698', |
|
|
|
date3: '贵A710AE', |
|
|
|
date4: '省内流水', |
|
|
|
date5: '2019-12-27 20:14:02', |
|
|
|
date6: '贵阳西主线站', |
|
|
|
date7: '2019-12-27 20:18:20', |
|
|
|
date8: '贵阳西主线站', |
|
|
|
date9: '38.25', |
|
|
|
date10: '0.00', |
|
|
|
date11: '38.25', |
|
|
|
}) |
|
|
|
// 搜索 |
|
|
|
const submitForm = () => { |
|
|
|
const { date1, date2, date3,date4,date5,date6,date7,date8,date9,date10,date11 } = formData |
|
|
|
console.log(date1, date2, date3,date4,date5,date6,date7,date8,date9,date10,date11) |
|
|
|
} |
|
|
|
// 重置 |
|
|
|
const submitReset = () => { |
|
|
|
myform.value?.resetFields() |
|
|
|
} |
|
|
|
|
|
|
|
function exportAll() {} |
|
|
|
|
|
|
|
function exportAll() {} |
|
|
|
function downloadExcel() { |
|
|
|
_this.$confirm('将导出为excel文件，确认导出?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning', |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
_this.excelData = _this.tableData |
|
|
|
_this.export2Excel() |
|
|
|
}) |
|
|
|
.catch(() => {}) |
|
|
|
} |
|
|
|
// 数据写入excel |
|
|
|
function export2Excel() { |
|
|
|
var that = _this |
|
|
|
require.ensure([], () => { |
|
|
|
const { export_json_to_excel } = require('../../../excel/export2Excel') // 这里必须使用绝对路径，使用@/+存放export2Excel的路径 |
|
|
|
const tHeader = ['序号', 'ETC卡号', '车牌号', '消费类型', '入口时间', '入口站名', '出口时间', '出口站名', '交易前余额（元）', '交易金额（元）', '交易后金额（元）'] // 导出的excel的表头字段 |
|
|
|
const filterVal = [ |
|
|
|
'date1', |
|
|
|
'date2', |
|
|
|
'date3', |
|
|
|
'date4', |
|
|
|
'date5', |
|
|
|
'date6', |
|
|
|
'date7', |
|
|
|
'date8', |
|
|
|
'date9', |
|
|
|
'date10', |
|
|
|
'date11', |
|
|
|
] // 对象属性，对应于tHeader |
|
|
|
const list = that.excelData //json数组对象，接口返回的数据 |
|
|
|
const data = that.formatJson(filterVal, list) |
|
|
|
export_json_to_excel(tHeader, data, '通行流水查询表') // 导出的表格名称 |
|
|
|
}) |
|
|
|
} |
|
|
|
// 格式转换，直接复制即可 |
|
|
|
function formatJson(filterVal, jsonData) { |
|
|
|
return jsonData.map((v) => filterVal.map((j) => v[j])) |
|
|
|
} |
|
|
|
interface User { |
|
|
|
date1: string |
|
|
|
date2: string |
