<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | <el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | ||||
</el-table> | </el-table> | ||||
</div> | </div> | ||||
<!-- <div style="padding-top: 12px" class="as-gravity-center-end"> | |||||
<el-pagination :page-sizes="7" :total="100" :current-page="2" /> | |||||
</div> --> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import * as XLSX from "xlsx"; | import * as XLSX from "xlsx"; | ||||
// const props = defineProps({ | |||||
// tableData: String, | |||||
// }) | |||||
export default { | export default { | ||||
props:{ | |||||
tableData: { | |||||
// 声明类型 | |||||
type:Array, | |||||
//声明是否必需 | |||||
require:true, | |||||
// 声明默认值 | |||||
//default:'默认值' | |||||
}, | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
isShow:false, | |||||
isShow:false, //隐藏按钮 | |||||
fileData: "" ,// 保存选择的文件数据, | fileData: "" ,// 保存选择的文件数据, | ||||
tableData:[ | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
] | |||||
}; | }; | ||||
}, | }, | ||||
create() { | create() { | ||||
console.log(XLSX); | console.log(XLSX); | ||||
}, | }, | ||||
//导出文件 | //导出文件 | ||||
exportExcel() { | exportExcel() { | ||||
if (!this.tableData.length) { | |||||
//this.tableData1=this.tableData | |||||
console.log(this.tableData,'=============='); | |||||
if (!this.tableData1.length) { | |||||
this.$message.warning("暂无数据导出"); | this.$message.warning("暂无数据导出"); | ||||
return false; | return false; | ||||
} | } | ||||
//格式转换 | //格式转换 | ||||
formatJson(filterVal) { | formatJson(filterVal) { | ||||
return this.tableData.map(v => | |||||
return this.tableData1.map(v => | |||||
// obj = { | // obj = { | ||||
// name:'', | // name:'', | ||||
// age:'' | // age:'' |
//搜索 | //搜索 | ||||
function search() { | function search() { | ||||
proxy.$request | proxy.$request | ||||
.post('/blacklistquery/queryBlackList',{}, | |||||
.post('/blacklistquery/queryBlackList',{ | |||||
cardId : formdata.ardNumber, | |||||
eTime : formdata.endDate, | |||||
sTime : formdata.startDate, | |||||
status : formdata.queryType, | |||||
}, | |||||
{ | { | ||||
baseURL: 'http://10.52.0.172:10389', | |||||
baseURL: 'http://10.52.0.172:10389/csms', | |||||
} | } | ||||
) | ) | ||||
.then((res: {}) => { | .then((res: {}) => { |
<el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button> | <el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button> | ||||
<el-button type="primary" plain @click="exportAll">导出所有</el-button> | |||||
<!-- <el-button type="primary" plain @click="exportAll">导出所有</el-button> --> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="padding-top: 12px"> | <div style="padding-top: 12px"> | ||||
<exportTable ref="exportTS"></exportTable> | |||||
<exportTable ref="exportTS" :tableData="tableData1"></exportTable> | |||||
</div> | </div> | ||||
<div style="padding-top: 12px" class="as-gravity-center-end"> | <div style="padding-top: 12px" class="as-gravity-center-end"> | ||||
<el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" /> | |||||
<!-- <el-pagination :page-sizes="pagesizes" :total="formData.total" :current-page="formData.pageNo" /> --> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
import exportTable from '../../../components/exportTable/exportTable.vue' | import exportTable from '../../../components/exportTable/exportTable.vue' | ||||
const { proxy }: any = getCurrentInstance() | const { proxy }: any = getCurrentInstance() | ||||
const pagesizes = ref(7) | |||||
const formData = reactive({ | const formData = reactive({ | ||||
pagesizes: '',//每页显示条数 | |||||
total: '', //总条数 | |||||
pageNo: '', //当前页 | |||||
etcCardNumber: '', //ETC卡号 | etcCardNumber: '', //ETC卡号 | ||||
licensePlateNumber: '', //车牌号 | licensePlateNumber: '', //车牌号 | ||||
startDate: '', //开始日期 | startDate: '', //开始日期 | ||||
}) | }) | ||||
const exportTS = ref() | const exportTS = ref() | ||||
const tableData = reactive({ | const tableData = reactive({ | ||||
title: 'xx公司表格', | |||||
serialNumber: '', //序号 | serialNumber: '', //序号 | ||||
etcCardNumber: '', //ETC卡号 | etcCardNumber: '', //ETC卡号 | ||||
licensePlateNumber: '', //车牌号 | licensePlateNumber: '', //车牌号 | ||||
function search() { | function search() { | ||||
if (formData.etcCardNumber != '') { | if (formData.etcCardNumber != '') { | ||||
proxy.$request | proxy.$request | ||||
.post('/uc/trafficrecord/query',{}, | |||||
.post('/uc/trafficrecord/query',{ | |||||
cardId : formData.etcCardNumber, | |||||
vehiclePlate : formData.licensePlateNumber, | |||||
pageNo:1, | |||||
}, | |||||
{ | { | ||||
baseURL: 'http://10.52.0.172:10389', | |||||
baseURL: 'http://10.52.0.172:10389/csms', | |||||
} | } | ||||
) | ) | ||||
.then((res: {}) => { | .then((res: {}) => { | ||||
console.log('导出当前页的表格数据') | console.log('导出当前页的表格数据') | ||||
} | } | ||||
//导出所有 | //导出所有 | ||||
function exportAll() { | |||||
proxy.$refs.exportTable.exportExcel() | |||||
console.log('导出所有数据') | |||||
} | |||||
// function exportAll() { | |||||
// proxy.$refs.exportTable.exportExcel() | |||||
// console.log('导出所有数据') | |||||
// } | |||||
interface User { | |||||
etcCardNumber: string //ETC卡号 | |||||
licensePlateNumber: string //车牌号 | |||||
consumptionType: string //消费类型 | |||||
entranceTime: string //入口时间 | |||||
entryStationName: string //入口站名 | |||||
exportTime: string //出口时间 | |||||
exitStationName: string //出口站名 | |||||
balanceBeforeTransaction: string //交易前余额 | |||||
transactionAmount: string //交易金额 | |||||
postransactionalance: string //交易后余额 | |||||
} | |||||
// interface User { | |||||
// etcCardNumber: string //ETC卡号 | |||||
// licensePlateNumber: string //车牌号 | |||||
// consumptionType: string //消费类型 | |||||
// entranceTime: string //入口时间 | |||||
// entryStationName: string //入口站名 | |||||
// exportTime: string //出口时间 | |||||
// exitStationName: string //出口站名 | |||||
// balanceBeforeTransaction: string //交易前余额 | |||||
// transactionAmount: string //交易金额 | |||||
// postransactionalance: string //交易后余额 | |||||
// } | |||||
const currentRow = ref() | |||||
const singleTableRef = ref<InstanceType<typeof ElTable>>() | |||||
// const currentRow = ref() | |||||
// const singleTableRef = ref<InstanceType<typeof ElTable>>() | |||||
const setCurrent = (row?: User) => { | |||||
singleTableRef.value!.setCurrentRow(row) | |||||
} | |||||
const handleCurrentChange = (val: User | undefined) => { | |||||
currentRow.value = val | |||||
} | |||||
// const setCurrent = (row?: User) => { | |||||
// singleTableRef.value!.setCurrentRow(row) | |||||
// } | |||||
// const handleCurrentChange = (val: User | undefined) => { | |||||
// currentRow.value = val | |||||
// } | |||||
const tableData1: User[] = [ | |||||
const tableData1 = [ | |||||
{ | { | ||||
etcCardNumber: '52011328220200481698', | etcCardNumber: '52011328220200481698', | ||||
licensePlateNumber: '贵A710AE', | licensePlateNumber: '贵A710AE', |