test-web/src/views/shengbo/trafficFlow/trafficFlow.vue

<template>
  <div class="top">
    <!-- 输入框 -->
    <div class="topstyle">
      <el-input v-model="formData.etcCardNumber" placeholder="请输入ETC卡号" style="width: 200px">
      </el-input>
    </div>
    <div class="topstyle">
      <el-input
        v-model="formData.licensePlateNumber"
        placeholder="请输入车牌号"
        style="width: 200px"
      >
      </el-input>
    </div>
    <!-- 日期框 -->
    <div class="topstyle">
      <el-date-picker
        v-model="formData.startDate"
        type="datetime"
        placeholder="开始日期"
        format="YYYY/MM/DD hh:mm:ss"
      />
      <!-- <span>-</span> -->
      <!-- <el-button>至</el-button> -->
      <el-date-picker
        v-model="formData.endDate"
        type="datetime"
        placeholder="结束日期"
        format="YYYY/MM/DD hh:mm:ss"
        style="margin-left: 5px"
      />
    </div>
    <!-- 按钮 -->
    <div class="topstyle">
      <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>
    </div>
  </div>
  <div style="padding-top: 12px">
    <el-table :data="tableData1" border style="width: 100%">
      <el-table-column property="serialNumber" label="序号" width="60" />
      <el-table-column property="etcCardNumber" label="ETC卡号" width="190" />
      <el-table-column property="licensePlateNumber" label="车牌号" width="100" />
      <el-table-column property="consumptionType" label="消费类型" width="90" />
      <el-table-column property="entranceTime" label="入口时间" width="110" />
      <el-table-column property="entryStationName" label="入口站名" width="110" />
      <el-table-column property="exportTime" label="出口时间" width="110" />
      <el-table-column property="exitStationName" label="出口站名" width="110" />
      <el-table-column property="balanceBeforeTransaction" label="交易前余额（元）" width="140" />
      <el-table-column property="transactionAmount" label="交易金额（元）" width="125" />
      <el-table-column property="postransactionalance" label="交易后余额（元）" width="140" />
    </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" />
  </div>
</template>

<script lang="ts" setup>
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, onMounted } from 'vue'
const { proxy } = getCurrentInstance()
onMounted(() => {
  proxy.$request
    .get('api/user', {})
    .then((res) => {
      console.log(res, '=====123')
    })
    .catch((err) => {
      console.log(err, '=====456')
    })
})

const formData = reactive({
  etcCardNumber: '', //ETC卡号
  licensePlateNumber: '', //车牌号
  startDate: '', //开始日期
  endDate: '', //结束日期
})
const tableData = reactive({
  serialNumber: '', //序号
  etcCardNumber: '', //ETC卡号
  licensePlateNumber: '', //车牌号
  consumptionType: '', //消费类型
  entranceTime: '', //入口时间
  entryStationName: '', //入口站名
  exportTime: '', //出口时间
  exitStationName: '', //出口站名
  balanceBeforeTransaction: '', //交易前余额
  transactionAmount: '', //交易金额
  postransactionalance: '', //交易后余额
})
// 搜索
const submitForm = () => {}
// 重置
const submitReset = () => {
  //myform.value?.resetFields()
}

function exportAll() {}

interface User {
  serialNumber: string //序号
  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 setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
}

const tableData1: User[] = [
  {
    serialNumber: '1',
    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',
  },
  {
    serialNumber: '2',
    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',
  },
  {
    serialNumber: '3',
    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',
  },
  {
    serialNumber: '4',
    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',
  },
  {
    serialNumber: '5',
    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',
  },
  {
    serialNumber: '6',
    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',
  },
]
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  margin-left: 10px;
}
.topstyle {
  display: flex;
  height: 40px;

  margin-right: 10px;
  align-items: center;
  justify-content: flex-start;
}
</style>