更改门禁导出，更改考勤记录的样式

src/api/access/accessControl.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
-// 查询门禁管理列表
+// 导出考勤
 export function listBarracks(query) {
   return request({
-    url: '/barracksManagement/barracks/list',
+    url: '/grassrootsregistration/attendancerecord/export',
     method: 'get',
     params: query
   })

src/views/access/Renaccess/index.vue

@@ -17,37 +17,62 @@
       <el-form-item> </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8"> </el-row>
-
-    <el-table
-      v-loading="loading"
-      :data="bdglevenList"
-      :header-cell-style="{ background: '#003C69', color: 'white' }"
-    >
-      <!-- <el-table-column label="序号" align="center" prop="id" /> -->
-      <el-table-column label="序号" type="index" width="50" align="center">
-        <template scope="scope">
-          <span>{{
-            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
-          }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="编号" align="center" prop="pin" />
-      <el-table-column label="姓名" align="center" prop="name" />
-      <el-table-column
-        label="单位"
-        align="center"
-        prop="deptname"
-        show-overflow-tooltip
-      />
-      <el-table-column label="手机号码" align="center" prop="mobile" />
-      <el-table-column label="办公电话" align="center" prop="telephone" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <span v-if="scope.row.status == 0">在职</span>
-          <span v-else>离职</span>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="tables" :class="{ sollore: length > 3 }" v-if="length > 1">
+      <div
+        v-for="(item, i) in length"
+        :key="i"
+        style="width: 400px; margin-right: 20px"
+      >
+        <el-table
+          v-loading="loading"
+          :data="bdglevenList[i]"
+          :header-cell-style="{ background: '#003C69', color: 'white' }"
+        >
+          <el-table-column label="序号" type="index" width="50" align="center">
+            <template scope="scope">
+              <span>{{
+                (queryParams.pageNum - 1) * queryParams.pageSize +
+                scope.$index +
+                1
+              }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="编号" align="center" prop="pin" width="50" /> -->
+          <el-table-column label="姓名" align="center" prop="name" width="" />
+          <el-table-column
+            label="时间"
+            align="center"
+            prop="checktime"
+            show-overflow-tooltip
+          />
+        </el-table>
+      </div>
+    </div>
+    <div v-else>
+      <el-table
+        v-loading="loading"
+        :data="bdglevenList"
+        :header-cell-style="{ background: '#003C69', color: 'white' }"
+      >
+        <el-table-column label="序号" type="index" width="50" align="center">
+          <template scope="scope">
+            <span>{{
+              (queryParams.pageNum - 1) * queryParams.pageSize +
+              scope.$index +
+              1
+            }}</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="编号" align="center" prop="pin" /> -->
+        <el-table-column label="姓名" align="center" prop="name" />
+        <el-table-column
+          label="时间"
+          align="center"
+          prop="checktime"
+          show-overflow-tooltip
+        />
+      </el-table>
+    </div>
   </div>
 </template> 
 <script>
@@ -58,7 +83,7 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 //日期
 import VueHorizontalCalendar from "vue-horizontal-calendar";
 export default {
-  name: "access",
+  name: "Raccess",
   components: {
     Treeselect,
     VueHorizontalCalendar,
@@ -76,8 +101,6 @@ export default {
       showSearch: true,
       // 遮罩层
       loading: false,
-      // 总条数
-      total: 0,
       //   人员数据
       renList: [],
       // 弹出层标题
@@ -106,6 +129,8 @@ export default {
       endtimes: null,
       // new date
       xinDate: null,
+      // length
+      length: 0,
     };
   },
   created() {
@@ -114,7 +139,7 @@ export default {
   },
   methods: {
     dateChange2(day) {
-      this.year=[];
+      this.year = [];
       let date = new Date(day.timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
       let Y = date.getFullYear() + "-";
       let M =
@@ -175,6 +200,14 @@ export default {
       this.endtimes =
         new Date(lastDay).toISOString().slice(0, 10) + " " + "23:59:50";
     },
+    group(array, subGroupLength) {
+      let index = 0;
+      let newArray = [];
+      while (index < array.length) {
+        newArray.push(array.slice(index, (index += subGroupLength)));
+      }
+      return newArray;
+    },
     // 获取列表
     getList(starttime, endtime, number) {
       this.loading = true;
@@ -188,8 +221,13 @@ export default {
         )
         .then((res) => {
           this.loading = false;
-          this.bdglevenList = res.data.data.items;
-          this.total = res.data.data.items.length;
+          var groupedArray = this.group(res.data.data.items, 15);
+          this.length = groupedArray.length;
+          if (groupedArray.length > 1) {
+            this.bdglevenList = groupedArray;
+          } else {
+            this.bdglevenList = res.data.data.items;
+          }
         });
     },
   },
@@ -384,8 +422,19 @@ export default {
   color: #fff;
 }
 ::v-deep .date-highlighted {
-  background: rgba(255,255,0,.5) !important;
-  border-right: 1px solid rgba(255,255,0,.1) !important;
+  background: rgba(255, 255, 0, 0.5) !important;
+  border-right: 1px solid rgba(255, 255, 0, 0.1) !important;
+}
+/* 当前日期 */
+::v-deep .today {
+  background-color: rgba(13, 141, 224, 0.5) !important;
+}
+
+.tables {
+  display: -webkit-box;
+}
+.sollore {
+  overflow-x: scroll;
 }
 </style>
   

src/views/access/accessControl/index.vue

@@ -35,7 +35,18 @@
         <el-button size="btr" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-row :gutter="10" class="mb8"> </el-row>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleDao"
+          >导出</el-button
+        >
+      </el-col>
+    </el-row>
 
     <el-table
       v-loading="loading"
@@ -83,6 +94,7 @@
 
 <script>
 import axios from "axios";
+import { listBarracks } from "@/api/access/accessControl";
 export default {
   name: "access",
   data() {
@@ -90,7 +102,7 @@ export default {
       // 查询参数
       queryParams: {
         number: 10,
-        pageNum:1,
+        pageNum: 1,
         pageSize: 10,
       },
       bdglevenList: [],
@@ -106,6 +118,21 @@ export default {
     this.getTiem();
   },
   methods: {
+    // 导出操作
+    handleDao() {
+      if (this.queryParams.starttime && this.queryParams.endtime) {
+        var forms = {};
+        forms.startTime = this.queryParams.starttime;
+        forms.endTime = this.queryParams.endtime;
+        listBarracks(forms).then((res) => {
+          // console.log(res);
+          this.$download.name(res.msg);
+          // this.exportLoading = false;
+        });
+      } else {
+        this.$message.error("导出必须有开始结束时间！");
+      }
+    },
     // 获取当月的时间
     getTiem() {
       var date = new Date();
@@ -124,13 +151,13 @@ export default {
       this.getList(starttimes, endtimes);
     },
     handleQuery() {
-      this.getList(this.queryParams.starttime,this.queryParams.endtime,)
+      this.getList(this.queryParams.starttime, this.queryParams.endtime);
     },
     // 重置
     resetQuery() {
-      this.getTiem()
-      this.queryParams.starttime="";
-      this.queryParams.endtime="";
+      this.getTiem();
+      this.queryParams.starttime = "";
+      this.queryParams.endtime = "";
     },
     getList(starttime, endtime, number) {
       this.loading = true;
@@ -144,8 +171,10 @@ export default {
         )
         .then((res) => {
           this.loading = false;
-          this.bdglevenList = res.data.data.items;
-          this.total = res.data.data.items.length;
+          if (res.data.ret != 174) {
+            this.bdglevenList = res.data.data.items;
+            this.total = res.data.data.items.length;
+          }
         });
     },
   },