司机考勤管理

src/api/bus/driverRecordInfo.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+
+function pageList(formData) {
+  return request.post(constant.serverUrl + "/bus/driverRecordInfo/pageList", formData);
+}
+
+
+
+export default {
+   pageList
+}

src/routers/modules/bus.js

@@ -107,6 +107,18 @@ var routers = [
                         title: '班次管理'
                 }
         },
+        {
+                path: '/bus/driverRecordInfo/list',
+                name: 'BusDriverRecordInfoList',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/bus/driverRecordInfo-list.vue'),
+                meta: {
+                        roles: ["admin"],
+                        title: '司机考勤管理'
+                }
+        },
 ]
 
 export default routers;

src/views/bus/driverRecordInfo-list.vue

@@ -0,0 +1,388 @@
+<template>
+  <div style="padding-left: 5px">
+    <el-breadcrumb separator=">">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="#">基础信息管理</a>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="/driverRecordInfo">司机考勤管理</a>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-divider></el-divider>
+    <el-form
+      ref="queryForm"
+      :model="queryModel"
+      inline
+      class="demo-form-inline"
+    >
+      <el-form-item label="司机姓名" prop="name">
+        <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
+      </el-form-item>
+      <el-form-item label="车牌号" prop="licensePlateNumber">
+        <el-input type="text" size="mini" v-model="queryModel.licensePlateNumber"></el-input>
+      </el-form-item>
+    <el-form-item label="考勤时间" prop="recordTimeRanges">
+        <el-date-picker
+        size="mini"
+        v-model="queryModel.recordTimeRanges"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        ></el-date-picker>
+    </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          size="mini"
+          icon="ios-search"
+          @click="changePage(1)"
+          :loading="loading"
+          >查询</el-button
+        >&nbsp;
+        <el-button
+          type="info"
+          size="mini"
+          style="margin-left: 8px"
+          @click="handleReset('queryForm')"
+          >重置</el-button
+        >&nbsp;
+      </el-form-item>
+    </el-form>
+    <el-divider></el-divider>
+    <el-table
+      ref="formTable"
+      :data="tableData"
+      v-loading="loading"
+      stripe
+      :max-height="tableHeight"
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="imageUrl" label="照片" width="150">
+        <template slot-scope="{row}">
+            <a v-if="row.imageUrl" :href="row.imageUrl" target="_blank">
+                <el-image
+                :size="50"
+                :src="row.imageUrl+'?x-oss-process=image/resize,m_fill,w_64,h_64'"
+                :key="row.id"
+                ></el-image>
+            </a>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="driverName"
+        label="司机姓名"
+        width="130"
+      ></el-table-column>
+      <el-table-column
+        prop="licensePlateNumber"
+        label="车牌号"
+        width="100"
+      ></el-table-column>
+      <el-table-column
+        prop="recordTime"
+        label="考勤记录时间"
+        width="180"
+      ></el-table-column>
+      <el-table-column
+        prop="place"
+        label="考勤地点"
+        width="300"
+      ></el-table-column>
+        <el-table-column prop="location" label="考勤定位">
+              <template slot-scope="{row}">
+                  <i class="el-icon-map-location my-font" @click="handleLocation(row)"></i>
+              </template>
+        </el-table-column>
+
+    </el-table>
+    <el-pagination
+      :current-page.sync="pageIndex"
+      :total="totalElements"
+      :page-sizes="pageSizeList"
+      @current-change="changePage"
+      @size-change="pageSizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+    <driverInfo-detail
+      v-if="showModal"
+      :businessKey="businessKey"
+      :title="modalTitle"
+      @close="onDetailModalClose"
+    ></driverInfo-detail>
+    <el-dialog
+      width="80%"
+      :visible.sync="showMapDialog"
+      title="考勤定位"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      style="text-align: left"
+      :close-on-click-modal="false"
+      v-loading="mapLoading"
+    >
+      <el-amap
+        ref="roadlineMap"
+        vid="roadlineMap"
+        :plugin="plugin"
+        :center="pointPosition"
+        :zoom="15"
+        style="width: 100%; height: 400px"
+      >
+      <el-amap-marker vid="amapDemo" :position="pointPosition"></el-amap-marker>
+      </el-amap>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showMapDialog = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Constant from "@/constant";
+import driverRecordInfoApi from "@/api/bus/driverRecordInfo";
+
+import { getToken } from "@/utils/auth"; // get token from cookie
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  name: "BusDriverRecordInfoList",
+  data() {
+    var self = this;
+    return {
+      activeName: "list",
+      queryModel: {
+        name: "",
+        licensePlateNumber:"",
+        recordTimeRanges:"",
+      },
+      loading: false,
+      tableData: [],
+      treeData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      
+      showModal: false,
+      modalTitle: "",
+      businessKey: "",
+      tableHeight: 400,
+      showDeviceModal: false,
+      companyId: "",
+      qrCode: "",
+      companyResult: [],
+      props: {
+        // 配置项（必选）
+        value: "id",
+        label: "name",
+        children: "children",
+      },
+      batchImportVisible: false,
+      batchImportFileList: [],
+      uploadUrlXls: Constant.serverUrl + "/bus/driverInfo/importXls",
+      uploadXlsData: {
+        subFolder: "driver",
+      },
+      headers: {
+        Authorization: getToken(),
+      },
+      xlsLoading: false,
+      sceneData: [],
+      typeData:[],
+      selectedRow: {},
+      centerPoint: [112.276585, 30.306401],
+      pointPosition: [112.240222, 30.337053],
+      showMapDialog: false,
+      mapLoading: false,
+      zoom: 12,
+      events: {
+        click: e => {
+          var pt = e.lnglat; //点击选择新地址为中心点
+          console.log(pt);
+
+          this.pointPosition = [pt.lng, pt.lat];
+          this.selectedRow.location = pt.lng + "," + pt.lat;
+        }
+      },
+      plugin: [
+        {
+          pName: "ToolBar",
+          events: {
+            init(instance) {
+              console.log(instance);
+            },
+          },
+        },
+      ],
+    };
+  },
+  created() {
+    this.changePage(1);
+  },
+  methods: {
+    changePage(pageIndex) {
+        var self = this;
+
+        self.loading = true;
+
+        self.pageIndex = pageIndex;
+        var formData = new FormData();
+
+        formData.append("pageIndex", self.pageIndex);
+        formData.append("pageSize", self.pageSize);
+
+        formData.append("name", this.queryModel.name);
+        formData.append("licensePlateNumber", this.queryModel.licensePlateNumber);
+        formData.append("recordTimeRanges", this.queryModel.recordTimeRanges);
+
+
+      driverRecordInfoApi
+        .pageList(formData)
+        .then(function (response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.tableData = jsonData.data;
+          self.totalPages = jsonData.totalPages;
+          self.totalElements = jsonData.recordsTotal;
+          //45为分页栏的高度
+          //页面高度-列表上面的高度-分页栏高度
+          self.tableHeight =
+            window.innerHeight - self.$refs.formTable.$el.offsetTop - 100;
+        })
+        .catch((error) => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order == "ascending" ? "asc" : "desc";
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleReset(name) {
+      this.$refs[name].resetFields();
+    },
+    handleLocation(row) {
+      this.selectedRow = row;
+      this.showMapDialog = true;
+
+      if (row.location != null && row.location.length > 0) {
+        var arr = row.location.split(",");
+
+        this.pointPosition = arr;
+      }
+    },
+    handleRegeo(){
+      var row = this.selectedRow;
+
+      if (row.location != null && row.location.length > 0) {
+        var arr = row.location.split(",");
+        this.pointPosition = arr;
+      }
+    },
+    handleSelectPoint() {
+      this.selectedRow.location =
+        this.pointPosition[0] + "," + this.pointPosition[1];
+      this.showMapDialog = false;
+    },
+    beforeUpload(file, fileList) {
+      //导入前判断
+    },
+    //批量导入-上传成功
+    handleBatchImportSuccess(response, file, fileList) {
+      var self = this;
+      self.xlsLoading = false;
+      if (response.result) {
+        self.$message.success(response.message);
+        this.batchImportFileList = [];
+        this.changePage(1);
+        this.uploadCompanyId = "";
+        this.uploadXlsData.companyId = "";
+        this.batchImportVisible = false;
+      } else {
+        //this.$message.error(response.message);
+        this.batchImportFileList = [];
+        this.changePage(1);
+        this.uploadCompanyId = "";
+        this.uploadXlsData.companyId = "";
+
+        if (response.data != null) {
+          //下载有错误信息提示的报表
+          //window.open(response.data);
+          self.$message({
+            showClose: true,
+            dangerouslyUseHTMLString: true,
+            message:
+              response.message +
+              `,<a href="${response.data}" target="_blank">点击下载未导入的数据报表</a>&nbsp;`,
+            duration: 30000,
+          });
+        }
+      }
+    },
+    //批量导入-预览
+    handleBatchImportPreview(file) {
+      console.log(file.url);
+    },
+    //批量导入-移除
+    handleBatchImportRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    //批量导入-移除前操作
+    beforeBatchImportRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    //批量导入-文件超出个数限制时的钩子
+    handleBatchImportExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+
+  },
+  mounted: function () {}
+};
+</script>
+<style lang="scss" scoped>
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+
+.el-divider {
+  margin: 5px 0;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.button-group {
+  margin-left: 10px;
+  text-align: left;
+}
+.my-font {
+  font-size: 30px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+</style>