1、前端封装通用日期组件选择日期mixins

ruoyi-ui/src/layout/mixin/PickerOptions.js

@@ -0,0 +1,52 @@
+export const pickerOptions = {
+
+  data() {
+    return {
+      //日期组件
+      pickerOptions: {
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            end.setTime(start.getTime() + 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '昨天',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+    }
+  },
+
+}

ruoyi-ui/src/views/business/english/word/index.vue

@@ -28,6 +28,7 @@
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
+          :picker-options="pickerOptions"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -267,10 +268,12 @@
 <script>
 import {listWord, getWord, delWord, addWord, updateWord, getWordRPC} from "@/api/business/english/word";
 import {getOneEnglishApi} from "@/api/business/openapi/oneenglish";
+import {pickerOptions} from "@/layout/mixin/PickerOptions"
 
 export default {
   name: "Word",
   dicts: ['english_collect', 'english_top'],
+  mixins: [pickerOptions],
   data() {
     return {
       // 抽屉遮罩层

ruoyi-ui/src/views/business/log/apilog/index.vue

@@ -87,6 +87,7 @@
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
+          :picker-options="pickerOptions"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -213,10 +214,12 @@
 
 <script>
 import {listLog, delLog, getApiName} from "@/api/business/log/apilog";
+import {pickerOptions} from "@/layout/mixin/PickerOptions"
 
 export default {
   name: "Apilog",
   dicts: ['request_status', 'request_method'],
+  mixins: [pickerOptions],
   data() {
     return {
       // 遮罩层

ruoyi-ui/src/views/business/log/reptilelog/index.vue

@@ -48,6 +48,7 @@
         <el-date-picker
           v-model="daterangeCreateTime"
           size="small"
+          :picker-options="pickerOptions"
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
@@ -147,9 +148,11 @@
 
 <script>
 import {listWebmagicLog, delWebmagicLog} from "@/api/business/log/reptilelog";
+import {pickerOptions} from "@/layout/mixin/PickerOptions"
 
 export default {
   name: "ReptileLog",
+  mixins: [pickerOptions],
   data() {
     return {
       // 遮罩层

ruoyi-ui/src/views/business/openapi/topsearch/index.vue

@@ -12,11 +12,12 @@
             placeholder="选择日期"
             format="yyyy 年 MM 月 dd 日"
             value-format="yyyy-MM-dd"
+            @change="getHistoryTopSearch"
             :picker-options="pickerOptions">
           </el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getHistoryTopSearch">查询</el-button>
+          <el-button type="" @click="getTopsearch">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -29,7 +30,9 @@
               <span>{{ douyin.word }}</span>
               <el-divider direction="vertical"></el-divider>
               <span style="color: red;margin-left: 25px">{{ douyin.label }}</span>
-              <span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ douyin.createTime }}</span>
+              <span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
+                  douyin.createTime
+                }}</span>
               <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
             </div>
           </el-card>
@@ -40,7 +43,9 @@
               <span>{{ weibo.hotword }}</span>
               <el-divider direction="vertical"></el-divider>
               <span style="color: red;margin-left: 25px">{{ weibo.hottag }}</span>
-              <span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ weibo.createTime }}</span>
+              <span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
+                  weibo.createTime
+                }}</span>
               <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
             </div>
           </el-card>
@@ -83,7 +88,9 @@
           <el-card shadow="hover">
             <div v-for="wechat in topsearchList.wechatList" :key="wechat.id" class="douyin">
               <span>{{ wechat.word }}</span>
-              <span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ wechat.createTime }}</span>\
+              <span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
+                  wechat.createTime
+                }}</span>\
               <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
             </div>
           </el-card>
@@ -92,7 +99,6 @@
     </div>
 
 
-
     <!--  回到顶部-->
     <el-backtop target="" :bottom="100">
     </el-backtop>
@@ -159,7 +165,6 @@ export default {
     getHistoryTopSearch() {
       this.topsearchList = {}
       this.loading = true
-      console.log(this.dateValue)
       getHistoryTopSearch(this.dateValue).then(res => {
         this.loading = false
         this.topsearchList = res.data
@@ -169,6 +174,8 @@ export default {
     //获取热搜榜
     getTopsearch() {
       this.loading = true
+      this.dateValue = null
+
       getTopsearch().then(res => {
         this.topsearchList = res.data
         this.loading = false

ruoyi-ui/src/views/business/webmagic/sina/sinaNews/index.vue

@@ -100,8 +100,13 @@
 
 import {listSinaNews, delSinaNews, getType} from "@/api/business/webmagic/sina/sinaNews"
 
+import {pickerOptions} from "@/layout/mixin/PickerOptions"
+
 export default {
   name: "SinaNews",
+
+  mixins: [pickerOptions],
+
   data() {
     return {
       // 遮罩层
@@ -140,42 +145,7 @@ export default {
       //类型集合
       typeList: [],
 
-      //日期组件
-      pickerOptions: {
-        shortcuts: [{
-          text: '昨天',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
-      },
+
     };
   },