m

src/layout/index.vue

   .el-menu-vertical-demo:not(.el-menu--collapse) {
     width: 248px;
     min-height: 400px;
+    padding-bottom: 40px;
   }
 
   .bg-theme {

src/views/shengbo/blacklistQuery/blacklistQuery.vue

       <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="primary" :icon="Plus" @click="dialogFormVisible = true">添加</el-button>
-      <el-dialog v-model="dialogFormVisible" title="卡黑名单-操作(下黑反白)" class="as-gravity-center">
-        <el-form :model="form">
+    </div>
+  </div>
+  <!-- 弹窗 -->
+  <div>
+    <el-dialog v-model="dialogFormVisible" class="as-gravity-center">
+        <span class="as-gravity-center" style="font-size: 25px;">卡黑名单-操作(下黑反白)</span>
+        <el-form :model="form" style="padding-top:22px;">
           <el-form-item label="卡号：" :label-width="100">
             <el-input v-model="form.name" style="width: 215px" />
           </el-form-item>
           </span>
         </template>
       </el-dialog>
-    </div>
   </div>
   <div style="padding-top: 12px">
     <el-table :data="tableData" border style="width: 100%">
               <el-form-item label="卡号：" :label-width="100">
                 <el-input v-model="form1.data" style="width: 215px" disabled />
               </el-form-item>
-            </el-form>
-            <el-form :model="form1">
               <el-form-item label="车辆号：" :label-width="100">
                 <el-input v-model="form1.data1" style="width: 215px" disabled />
               </el-form-item>
-            </el-form>
-            <el-form :model="form1">
               <el-form-item label="机构名称：" :label-width="100">
                 <el-input v-model="form1.data2" style="width: 215px" disabled />
               </el-form-item>
-            </el-form>
-            <el-form :model="form1">
               <el-form-item label="黑名单类型：" :label-width="100">
                 <el-input v-model="form1.data3" style="width: 215px" disabled />
               </el-form-item>
               <el-form-item label="查询结果：" :label-width="100" style="color: rgb(209, 65, 65)">
                 <el-input v-model="form1.data5" style="width: 215px" disabled />
               </el-form-item>
-            </el-form>
-            <el-form :model="form1">
               <el-form-item label="下黑原因：" :label-width="100" style="color: rgb(209, 65, 65)">
                 <el-input v-model="form1.data6" type="textarea" disabled />
               </el-form-item>
   margin-right: 10px;
   align-items: center;
   justify-content: flex-start;
+
 }
 </style>

src/views/shengbo/trafficFlow/trafficFlow.vue

   <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">
     </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