Export function in charge connectivity for DC connector

https://dev.wormwood.com.sg/zentao/task-view-725.html

Strides-Admin/src/views/incident/info.vue

@@ -49,17 +49,32 @@
         </el-form-item-->
       </el-form>
     </div>
-    <div class="filter-container right">
-      <el-button
-        type="primary"
-        :loading="loading"
-        @click="onExport">
-        Export
-      </el-button>
+    <div class="filter-view">
+      <el-date-picker
+        v-model="params.pageVo.dateRange"
+        type="daterange"
+        format="yyyy-MM-dd"
+        value-format="yyyy-MM-dd"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        :picker-options="pickerOptions"
+        clearable
+        @change="getDetail"
+        @clear="getDetail"
+        class="filter-view-item"/>
+      <div class="filter-flex-button">
+        <el-button
+          type="primary"
+          :loading="loading"
+          @click="onExport">
+          Export
+        </el-button>
+      </div>
     </div>
     <el-table
       class="info-table"
-      :data="table.list">
+      :data="table.list"
+      v-loading="table.loading">
       <el-table-column
         label="Site Name"
         align="center"
@@ -101,7 +116,7 @@ export default {
     return {
       loading: false,
       form: {
-        
+        tempDate: ""
       },
       rule: {
         
@@ -111,21 +126,53 @@ export default {
         pageSize: 10,
         pageVo: {
           sitePk: "",
-          chargeBoxId: ""
+          chargeBoxId: "",
+          dateRange: []
         }
       },
       table: {
         list: [],
         total: 0,
         loading: false
-      }
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: 'Nearest Week',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }],
+        onPick: ({ maxDate, minDate }) => {
+          if (maxDate) {
+            this.form.tempDate = ""
+          } else {
+            this.form.tempDate = minDate.getTime()
+          }
+        },
+        disabledDate: (time) => {
+          if (this.form.tempDate) {
+            const week = 6 * 24 * 3600 * 1000;
+            const min = this.form.tempDate - week;
+            const max = this.form.tempDate + week;
+            return (time.getTime() < min || time.getTime() > max);
+          } else {
+            return false;
+          }
+        }
+      },
     }
   },
   components: { Pagination },
   created() {
     if (this.$route.params.id) {
       const params = JSON.parse(Base64.decode(this.$route.params.id));
-      this.params.pageVo = params;
+      this.params.pageVo = {
+        ...params,
+        dateRange: []
+      };
       this.getDetail();
     }
   },
@@ -152,22 +199,31 @@ export default {
       })
     },
     onExport() {
-      this.loading = true;
-      api.exportConnectivity(this.params.pageVo).then(res => {
-        if (res && res.size > 0) {
-          const name = 'Export-' + this.params.pageVo.chargeBoxId + '-' + new Date().getTime() + '.xls'
-          this.downloadFile(res, name);
-        } else {
-          this.$message.error('Empty files');
-        }
-      }).catch(err => {
+      let range = this.params.pageVo.dateRange;
+      console.log("----", this.params.pageVo);
+      if (range.length == 2 && range[0] && range[1]) {
+        this.loading = true;
+        api.exportConnectivity(this.params.pageVo).then(res => {
+          if (res && res.size > 0) {
+            const name = 'Export-' + this.params.pageVo.chargeBoxId + '-' + new Date().getTime() + '.xls'
+            this.downloadFile(res, name);
+          } else {
+            this.$message.error('Empty files');
+          }
+        }).catch(err => {
+          this.$message({
+            type: 'error',
+            message: err
+          })
+        }).finally(() => {
+          this.loading = false
+        });
+      } else {
         this.$message({
           type: 'error',
-          message: err
+          message: "Please select date range"
         })
-      }).finally(() => {
-        this.loading = false
-      })
+      }
     },
     downloadFile(res, fileName) {
       const blob = new Blob([res], {