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

2022-02-18 16:10:22 +08:00 · 2022-02-18 16:10:22 +08:00 · 17d4d31461
parent 507cf65cf2
commit 17d4d31461
6 changed files with 94 additions and 56 deletions
--- a/ruoyi-ui/src/layout/mixin/PickerOptions.js
+++ b/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]);
+          }
+        }]
+      },
+    }
+  },
+
+}
--- a/ruoyi-ui/src/views/business/english/word/index.vue
+++ b/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 {
      // 抽屉遮罩层
--- a/ruoyi-ui/src/views/business/log/apilog/index.vue
+++ b/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 {
      // 遮罩层
@ -242,11 +245,11 @@ export default {
        pageNum: 1,
        pageSize: 10,
        apiName: null,
-        url:null,
-        request:null,
-        response:null,
-        isSuccess:null,
-        method:null,
+        url: null,
+        request: null,
+        response: null,
+        isSuccess: null,
+        method: null,
      },
      // 表单参数
      form: {},
--- a/ruoyi-ui/src/views/business/log/reptilelog/index.vue
+++ b/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 {
      // 遮罩层
@ -225,8 +228,8 @@ export default {

      //回显的时候正常回显
      if (beginRequestTime != null && '' !== beginRequestTime && endRequestTime != null && '' !== endRequestTime) {
-        this.queryParams.beginRequestTime = beginRequestTime ;
-        this.queryParams.endRequestTime = endRequestTime ;
+        this.queryParams.beginRequestTime = beginRequestTime;
+        this.queryParams.endRequestTime = endRequestTime;
      }
    },

--- a/ruoyi-ui/src/views/business/openapi/topsearch/index.vue
+++ b/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>
@ -157,18 +163,19 @@ export default {
  methods: {
    //获取历史热搜榜
    getHistoryTopSearch() {
-      this.topsearchList={}
+      this.topsearchList = {}
      this.loading = true
-      console.log(this.dateValue)
-      getHistoryTopSearch(this.dateValue).then(res =>{
+      getHistoryTopSearch(this.dateValue).then(res => {
        this.loading = false
-        this.topsearchList=res.data
+        this.topsearchList = res.data
      })
    },

    //获取热搜榜
    getTopsearch() {
      this.loading = true
+      this.dateValue = null
+
      getTopsearch().then(res => {
        this.topsearchList = res.data
        this.loading = false
--- a/ruoyi-ui/src/views/business/webmagic/sina/sinaNews/index.vue
+++ b/ruoyi-ui/src/views/business/webmagic/sina/sinaNews/index.vue
@ -98,10 +98,15 @@

 <script>

-import {listSinaNews, delSinaNews,getType} from "@/api/business/webmagic/sina/sinaNews"
+import {listSinaNews, delSinaNews, getType} from "@/api/business/webmagic/sina/sinaNews"
+
+import {pickerOptions} from "@/layout/mixin/PickerOptions"

 export default {
  name: "SinaNews",
+
+  mixins: [pickerOptions],
+
  data() {
    return {
      // 遮罩层
@ -138,44 +143,9 @@ export default {
      daterangeCreateTime: [],

      //类型集合
-      typeList:[],
+      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]);
-          }
-        }]
-      },
    };
  },

@ -186,8 +156,8 @@ export default {
  methods: {
    //获取类型
    getType() {
-      getType().then(res =>{
-        this.typeList=res.data
+      getType().then(res => {
+        this.typeList = res.data
      })
    },