通行记录页面添加搜索条件，导出表格功能

src/api/accessrecords.js

@@ -24,3 +24,10 @@ export function fetchGroupList(query) {
   })
 }
 
+export function exportExcel(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getTrafficRecordListByParamsToExcel',
+    method: 'get',
+    params: query
+  })
+}

src/layout/components/index.js

@@ -1,5 +1,5 @@
 export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
-export { default as Settings } from './Settings'
+// export { default as Settings } from './Settings'
 export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'

src/views/accessRecords/index.vue

@@ -8,7 +8,6 @@
           v-model="listQuery.deviceName"
           size="mini"
           clearable
-          @clear="handleChangeFilter"
           placeholder="请选择设备名称"
         >
           <el-option
@@ -16,8 +15,7 @@
             :key="item.id"
             :label="item.name"
             :value="item.name"
-          >
-          </el-option>
+          />
         </el-select>
       </span>
 
@@ -28,10 +26,8 @@
           size="mini"
           placeholder="请输入卡号"
           clearable
-          @clear="handleChangeFilter"
           @keyup.enter.native="handleFilter"
-        >
-        </el-input>
+        />
       </span>
 
       <span>姓名：</span>
@@ -41,10 +37,30 @@
           size="mini"
           placeholder="请输入姓名"
           clearable
-          @clear="handleChangeFilter"
           @keyup.enter.native="handleFilter"
-        >
-        </el-input>
+        />
+      </span>
+
+      <span>学院：</span>
+      <span class="input">
+        <el-input
+          v-model="listQuery.college"
+          size="mini"
+          placeholder="请输入学院"
+          clearable
+          @keyup.enter.native="handleFilter"
+        />
+      </span>
+
+      <span>专业：</span>
+      <span class="input">
+        <el-input
+          v-model="listQuery.major"
+          size="mini"
+          placeholder="请输入专业"
+          clearable
+          @keyup.enter.native="handleFilter"
+        />
       </span>
 
       <span>通行时间：</span>
@@ -55,18 +71,39 @@
         start-placeholder="开始时间"
         end-placeholder="结束时间"
         value-format="timestamp"
-        @change="handleChangeFilter($event)"
-      >
-      </el-date-picker>
+      />
 
-      <el-button type="primary" size="mini" class="button" @click="handleFilter"
-        >查询</el-button
+      <el-button
+        type="primary"
+        size="mini"
+        class="button"
+        @click="handleFilter"
       >
+        查询
+      </el-button>
     </div>
 
+    <!-- 导出按钮区域 -->
+    <el-button
+      type="primary"
+      size="mini"
+      class="button_down"
+      :disabled="!listQuery.time"
+      @click="handleDownLoad"
+    >
+      导出
+    </el-button>
+    <span class="button_text">选择通行时间后可导出</span>
+
     <!-- 表格区域 -->
     <div class="form">
-      <el-table :data="list">
+      <el-table
+        v-loading="loading"
+        height="550px"
+        :data="list"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+      >
         <el-table-column label="序号" align="center">
           <template slot-scope="{ row }">
             <span>{{ row.id }}</span>
@@ -85,6 +122,18 @@
           </template>
         </el-table-column>
 
+        <el-table-column label="学院" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.groupName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="专业" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.profession }}</span>
+          </template>
+        </el-table-column>
+
         <el-table-column label="身份类型" align="center">
           <template slot-scope="{ row }">
             <span>{{ row.identityName }}</span>
@@ -97,11 +146,11 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="分组名称" align="center">
+        <!-- <el-table-column label="分组名称" align="center">
           <template slot-scope="{ row }">
             <span>{{ row.groupName }}</span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
 
         <el-table-column label="信息" align="center" width="300px">
           <template slot-scope="{ row }">
@@ -124,7 +173,7 @@
             :total="total"
             :page.sync="listQuery.page"
             :limit.sync="listQuery.limit"
-            @pagination="getList"
+            @pagination="handleChangePage"
           />
         </template>
       </div>
@@ -133,160 +182,150 @@
 </template>
 
 <script>
-import Pagination from "@/components/Pagination";
-import { fetchList, searchList, fetchGroupList } from "@/api/accessrecords";
+import Pagination from '@/components/Pagination'
+import { searchList, fetchGroupList, exportExcel } from '@/api/accessrecords'
 export default {
   components: {
-    Pagination,
+    Pagination
   },
   data() {
     return {
+      // 表格数据
       list: [],
+      // 设备数组
       groupList: [],
-      total: 0, //数据的总数//
+      // 总条数
+      total: 0,
+      // 表格加载状态
+      loading: false,
       listQuery: {
+        // 当前页
         page: 1,
+        // 每页多少条
         limit: 8,
-        cardNumber: "",
-        deviceName: "",
-        groupName: "",
-        identityName: "",
-        message: "",
-        time: "",
-        userName: "",
-      },
-    };
+        // 卡号输入框绑定数据
+        cardNumber: '',
+        // 设备筛选框绑定数据
+        deviceName: '',
+        //  通行时间选择框绑定数据
+        time: '',
+        // 姓名输入框绑定数据
+        userName: '',
+        // 学院输入框绑定数据
+        college: '',
+        // 专业输入框绑定数据
+        major: ''
+      }
+    }
   },
   created() {
-    this.getList();
-    this.getgroupList();
+    this.getList()
+    this.getgroupList()
   },
   methods: {
+    // 获取表格数据
     getList() {
-      if (
-        this.listQuery.cardNumber ||
-        this.listQuery.deviceName ||
-        this.listQuery.userName ||
-        this.listQuery.time
-      ) {
-        searchList(this.listQuery).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
-      } else {
-        fetchList({
-          page: this.listQuery.page,
-          limit: this.listQuery.limit,
-        }).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
-      }
+      this.loading = true
+      searchList({
+        page: this.listQuery.page,
+        limit: this.listQuery.limit,
+        cardNumber: this.listQuery.cardNumber,
+        deviceName: this.listQuery.deviceName,
+        time1: this.listQuery.time === null ? null : this.listQuery.time[0],
+        time2: this.listQuery.time === null ? null : this.listQuery.time[1],
+        userName: this.listQuery.userName,
+        groupName: this.listQuery.college,
+        profession: this.listQuery.major
+      }).then((response) => {
+        this.list = response.data
+        this.total = response.total
+        this.loading = false
+      })
     },
+    // 获取设备数组
     getgroupList() {
-      fetchGroupList({ page: this.listQuery.page, limit: "999" }).then(
-        (response) => {
-          this.groupList = response.data;
-        }
-      );
-    },
-    handleChangeFilter(e) {
-      if (e == null) {
-        // 清空时间
-        if (
-          !this.listQuery.userName &&
-          !this.listQuery.cardNumber &&
-          !this.listQuery.deviceName &&
-          !this.listQuery.time
-        ) {
-          this.getList();
-        } else {
-          searchList({
-            page: this.listQuery.page,
-            limit: this.listQuery.limit,
-            cardNumber: this.listQuery.cardNumber,
-            deviceName: this.listQuery.deviceName,
-            time1: this.listQuery.time === null ? null : this.listQuery.time[0],
-            time2: this.listQuery.time === null ? null : this.listQuery.time[1],
-            userName: this.listQuery.userName,
-          }).then((response) => {
-            this.list = response.data;
-            this.total = response.total;
-          });
-        }
-      } else {
-        // 设置时间
-      }
+      fetchGroupList({ page: 1, limit: 999 }).then((response) => {
+        this.groupList = response.data
+      })
     },
+    // 查询按钮回调
     handleFilter() {
-      //搜索数据
-      if (
-        !this.listQuery.userName &&
-        !this.listQuery.cardNumber &&
-        !this.listQuery.deviceName &&
-        !this.listQuery.time
-      ) {
-        alert("请输入搜索条件");
-      } else {
-        searchList({
-          page: 1,
-          limit: this.listQuery.limit,
-          cardNumber: this.listQuery.cardNumber,
-          deviceName: this.listQuery.deviceName,
-          time1: this.listQuery.time === null ? null : this.listQuery.time[0],
-          time2: this.listQuery.time === null ? null : this.listQuery.time[1],
-          userName: this.listQuery.userName,
-        }).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
-        this.listQuery.page = 1;
-      }
+      this.list = []
+      this.listQuery.page = 1
+      this.getList()
+    },
+
+    // 分页器改变分页回调
+    handleChangePage(e) {
+      // console.log(e);
+      this.list = []
+      this.listQuery.page = e.page
+      this.listQuery.limit = e.limit
+      this.getList()
+    },
+
+    // 导出按钮回调
+    handleDownLoad() {
+      exportExcel({
+        page: this.listQuery.page,
+        limit: this.listQuery.limit,
+        cardNumber: this.listQuery.cardNumber,
+        deviceName: this.listQuery.deviceName,
+        time1: this.listQuery.time === null ? null : this.listQuery.time[0],
+        time2: this.listQuery.time === null ? null : this.listQuery.time[1],
+        userName: this.listQuery.userName,
+        groupName: this.listQuery.college,
+        profession: this.listQuery.major
+      }).then((response) => {
+        // console.log(response);
+        location.href = `https://chtech.ncjti.edu.cn/access-control${response.downurl}`
+      })
     },
+
+    // 时间格式转化函数
     timestampToTime(time) {
-      //格式化时间
-      var date = new Date(time);
-      var year = date.getFullYear();
+      // 格式化时间
+      var date = new Date(time)
+      var year = date.getFullYear()
       var month =
         date.getMonth() + 1 < 10
-          ? "0" + (date.getMonth() + 1)
-          : date.getMonth() + 1;
-      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+          ? '0' + (date.getMonth() + 1)
+          : date.getMonth() + 1
+      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
       var hours =
-        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+        date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
       var minutes =
-        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
       var seconds =
-        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
       return (
         year +
-        "-" +
+        '-' +
         month +
-        "-" +
+        '-' +
         day +
-        "  " +
+        '  ' +
         hours +
-        ":" +
+        ':' +
         minutes +
-        ":" +
+        ':' +
         seconds
-      );
-    },
-  },
-};
+      )
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .form-head {
   margin: 0 40px;
-  width: 1380px;
   line-height: 118px;
   font-size: 9px;
 
   .input {
     display: inline-block;
     margin-right: 10px;
-    width: 210px;
+    // width: 210px;
   }
 
   .input-select {
@@ -300,9 +339,18 @@ export default {
   }
 }
 
-.form {
+.button_down {
   margin-left: 40px;
-  width: 1400px;
+}
+
+.button_text {
+  font-size: 14px;
+  margin-left: 20px;
+  color: #ccc;
+}
+
+.form {
+  margin: 0 40px;
 
   .button-img {
     img {

vue.config.js

@@ -1,113 +1,108 @@
-'use strict'
-const path = require('path')
-const defaultSettings = require('./src/settings.js')
+"use strict";
+const path = require("path");
+const defaultSettings = require("./src/settings.js");
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const name = defaultSettings.title || '门禁设备管理平台' // page title
+const name = defaultSettings.title || "门禁设备管理平台"; // page title
 
-const port = process.env.port || process.env.npm_config_port || 9527
+const port = process.env.port || process.env.npm_config_port || 9527;
 
 module.exports = {
-  publicPath: '/access-control/ncjtEntranceGuard/',
-  outputDir: 'dist',
-  assetsDir: 'static',
+  publicPath: "/access-control/dist/",
+  outputDir: "dist",
+  assetsDir: "static",
   // lintOnSave: process.env.NODE_ENV === 'development',
-  lintOnSave: false,  //关闭eslint校验
+  lintOnSave: false, //关闭eslint校验
   productionSourceMap: false,
   devServer: {
     port: port,
     open: true,
     overlay: {
       warnings: false,
-      errors: true
+      errors: true,
     },
     // before: require('./mock/mock-server.js'),
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
         // target: 'http://192.168.31.162:8280',
         // target: 'http://127.0.0.1:8280',
-        target: 'https://chtech.ncjti.edu.cn/access-control',
+        target: "https://chtech.ncjti.edu.cn/access-control",
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
-    }
+          ["^" + process.env.VUE_APP_BASE_API]: "",
+        },
+      },
+    },
   },
   configureWebpack: {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src')
-      }
-    }
+        "@": resolve("src"),
+      },
+    },
   },
   chainWebpack(config) {
-    config.plugin('preload').tap(() => [
+    config.plugin("preload").tap(() => [
       {
-        rel: 'preload',
+        rel: "preload",
         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-        include: 'initial'
-      }
-    ])
+        include: "initial",
+      },
+    ]);
 
-    config.plugins.delete('prefetch')
+    config.plugins.delete("prefetch");
 
+    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
     config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
-    config.module
-      .rule('icons')
+      .rule("icons")
       .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
+      .include.add(resolve("src/icons"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: "icon-[name]",
       })
-      .end()
+      .end();
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          config.optimization.runtimeChunk('single')
-        }
-      )
-  }
-}
+    config.when(process.env.NODE_ENV !== "development", (config) => {
+      config
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
+          {
+            inline: /runtime\..*\.js$/,
+          },
+        ])
+        .end();
+      config.optimization.splitChunks({
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: "initial", // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: "chunk-elementUI", // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+          },
+          commons: {
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true,
+          },
+        },
+      });
+      config.optimization.runtimeChunk("single");
+    });
+  },
+};