月报表、月异常报表月份添加范围查询

src/views/report/monthReport/index.vue

@@ -2,10 +2,13 @@
   <div class="app-container" id="monthReport">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="选择月份">
-        <el-date-picker
+        <!-- <el-date-picker
           v-model="queryParams.month"
           type="month" value-format="yyyy-MM"
           placeholder="选择月">
+        </el-date-picker> -->
+        <el-date-picker v-model="queryParams.month" type="monthrange" range-separator="至" start-placeholder="开始月份"
+          end-placeholder="结束月份" value-format="yyyy-MM" :clearable="false" :editable="false">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="部门" prop="orgId">
@@ -13,13 +16,8 @@
           placeholder="选择部门" style="width: 240px" />
       </el-form-item>
       <el-form-item label="姓名" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          placeholder="请输入姓名"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable style="width: 240px"
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -28,14 +26,8 @@
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['att:attMonthReport:export']"
-        >导出
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['att:attMonthReport:export']">导出
         </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -50,51 +42,46 @@
       </el-table-column>
       <el-table-column label="姓名" align="center" prop="userName" />
       <el-table-column label="所属部门" align="center" prop="orgName" />
+      <el-table-column label="考勤月份" align="center" prop="attCurrentMonth" />
       <el-table-column label="应出勤天数" align="center" prop="requiredDays" />
       <el-table-column label="工作时间外出次数" align="center" prop="normalNum" width="180">
         <template slot-scope="scope">
-          <div
-            @click="openOutCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
+          <div @click="openOutCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
             {{ scope.row.outCount }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="正常打卡天数" align="center" prop="normalNum">
         <template slot-scope="scope">
-          <div
-            @click="openRecord(scope.row,title1)" style="color: #02a7f0; cursor: pointer">
+          <div @click="openRecord(scope.row, title1)" style="color: #02a7f0; cursor: pointer">
             {{ scope.row.normalNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="迟到天数" align="center" prop="lateNum">
         <template slot-scope="scope">
-          <div
-            @click="openRecord(scope.row,title2)" style="color: #02a7f0; cursor: pointer">
+          <div @click="openRecord(scope.row, title2)" style="color: #02a7f0; cursor: pointer">
             {{ scope.row.lateNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="早退天数" align="center" prop="earlyNum">
         <template slot-scope="scope">
-          <div
-            @click="openRecord(scope.row,title3)" style="color: #02a7f0; cursor: pointer">
+          <div @click="openRecord(scope.row, title3)" style="color: #02a7f0; cursor: pointer">
             {{ scope.row.earlyNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="旷工天数" align="center" prop="skippingNum">
         <template slot-scope="scope">
-          <div
-            @click="openRecord(scope.row,title4)" style="color: #02a7f0; cursor: pointer">
+          <div @click="openRecord(scope.row, title4)" style="color: #02a7f0; cursor: pointer">
             {{ scope.row.skippingNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="打卡地异常天数" align="center" prop="addressErrorNum">
         <template slot-scope="scope">
-          <div
-            @click="openRecord(scope.row,title5)" style="color: #02a7f0; cursor: pointer">
+          <div @click="openRecord(scope.row, title5)" style="color: #02a7f0; cursor: pointer">
             {{ scope.row.addressErrorNum }}
           </div>
         </template>
@@ -139,13 +126,8 @@
 
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 相关记录 -->
     <el-dialog :title="title" :visible.sync="showRecord" width="1300px" height="1000px" append-to-body
@@ -153,16 +135,9 @@
       <el-form :model="queryRecord" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch"
         label-width="110px">
         <el-form-item label="选择考勤时间段">
-          <el-date-picker
-            v-model="dateRange"
-            style="width: 240px"
-            value-format="yyyy-MM-dd"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :picker-options="pickerOptions"
-          ></el-date-picker>
+          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+            :picker-options="pickerOptions"></el-date-picker>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRecord">查询</el-button>
@@ -200,13 +175,8 @@
         <el-table-column label="下班打卡地址" align="center" prop="offWorkAddress" width="180" sortable />
       </el-table>
 
-      <pagination
-        v-show="totalTwo>0"
-        :total="totalTwo"
-        :page.sync="queryRecord.pageNum"
-        :limit.sync="queryRecord.pageSize"
-        @pagination="getListRecord"
-      />
+      <pagination v-show="totalTwo > 0" :total="totalTwo" :page.sync="queryRecord.pageNum"
+        :limit.sync="queryRecord.pageSize" @pagination="getListRecord" />
 
     </el-dialog>
 
@@ -235,13 +205,8 @@
         <el-table-column label="打卡地址" align="center" prop="attAddress" sortable />
       </el-table>
 
-      <pagination
-        v-show="totalTwoOutCount>0"
-        :total="totalTwoOutCount"
-        :page.sync="queryRecord.pageNum"
-        :limit.sync="queryRecord.pageSize"
-        @pagination="getOutCountList"
-      />
+      <pagination v-show="totalTwoOutCount > 0" :total="totalTwoOutCount" :page.sync="queryRecord.pageNum"
+        :limit.sync="queryRecord.pageSize" @pagination="getOutCountList" />
     </el-dialog>
   </div>
 </template>
@@ -362,7 +327,7 @@ export default {
         day: nowDate.getDate()
       };
       const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
-      this.$set(this.queryParams, "month", dayDate.toString());
+      this.$set(this.queryParams, "month", [dayDate,dayDate]);
     },
     getDeptList() {
       listDeptTree().then(response => {
@@ -389,7 +354,12 @@ export default {
     getList() {
       this.loading = true;
       console.log(this.queryParams)
-      getMonthAttReport(this.queryParams).then(response => {
+      let query = _.cloneDeep(this.queryParams);
+      query.startMonth = query.month[0];
+      query.endMonth = query.month[1];
+      delete query['month'];
+      console.log(query)
+      getMonthAttReport(query).then(response => {
         this.typeList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -474,7 +444,12 @@ export default {
 
     /** 导出按钮操作 */
     handleExport() {
-      exportMonthReport(this.queryParams).then(res => {
+      let query = _.cloneDeep(this.queryParams);
+      query.startMonth = query.month[0];
+      query.endMonth = query.month[1];
+      delete query['month'];
+      console.log(query)
+      exportMonthReport(query).then(res => {
         this.downloadFile({
           fileName: `月报表记录_${new Date().getTime()}.xlsx`,
           fileData: res,

src/views/report/monthlyError/index.vue

@@ -2,13 +2,16 @@
     <div class="app-container" id="monthlyError">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="选择月份" prop="attCurrentMonth">
-          <el-date-picker
+          <!-- <el-date-picker
             v-model="queryParams.attCurrentMonth"
             style="width: 240px"
             placeholder="请选择月份"
             type="month"
             value-format="yyyy-MM"
-          ></el-date-picker>
+          ></el-date-picker> -->
+          <el-date-picker v-model="queryParams.attCurrentMonth" type="monthrange" range-separator="至" start-placeholder="开始月份"
+          end-placeholder="结束月份" value-format="yyyy-MM" :clearable="false" :editable="false">
+        </el-date-picker>
         </el-form-item>
         <el-form-item label="部门" prop="orgId">
             <treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" @select="handleSelect" placeholder="选择部门" style="width: 240px"/>
@@ -298,7 +301,7 @@
           };
           const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
           // var date = new Date();
-          this.$set(this.queryParams, "attCurrentMonth", dayDate.toString());
+          this.$set(this.queryParams, "attCurrentMonth", [dayDate.toString(),dayDate.toString()]);
         },
         formatDate(dateString){
           const date = new Date(dateString); // 创建日期对象
@@ -337,7 +340,12 @@
         /** 查询月异常列表 */
         getList() {
             this.loading = true;
-            listMonthlyError(this.queryParams).then(response => {
+            let query = _.cloneDeep(this.queryParams);
+            query.startMonth = query.attCurrentMonth[0];
+            query.endMonth = query.attCurrentMonth[1];
+            delete query['attCurrentMonth'];
+            console.log(query)
+            listMonthlyError(query).then(response => {
               this.tableData = response.rows;
               this.total = response.total;
               this.loading = false;
@@ -413,7 +421,12 @@
 
         /** 导出按钮操作 */
         handleExport() {
-        exportMonthlyError(this.queryParams).then(res => {
+          let query = _.cloneDeep(this.queryParams);
+          query.startMonth = query.attCurrentMonth[0];
+          query.endMonth = query.attCurrentMonth[1];
+          delete query['attCurrentMonth'];
+          console.log(query)
+        exportMonthlyError(query).then(res => {
           downloadFile({ fileName: `月异常报表_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
         })
       },