日期组件

src/point/view/integral/deptRank.vue

@@ -3,7 +3,9 @@
     <van-nav-bar title="部门对比" left-text="返回" @click-left="$route_back" left-arrow />
     <van-dropdown-menu v-if="showSearchBar">
 <!--  A/B分    -->
-      <van-dropdown-item :title="timeScopeText" @open="calendarOpen"></van-dropdown-item>
+      <van-dropdown-item @open="calendarOpen">
+        <van-icon name="calendar-o" slot="title" size="1.5em" />
+      </van-dropdown-item>
       <van-dropdown-item :title="searchForm.deptName" ref="deptDropdownItem"><DeptSelectorDropdown @onConfirm="onConfirmDept" /></van-dropdown-item>
       <van-dropdown-item title="规则" ref="ruleDropdownItem"><RuleCategorySelDropdown @onConfirm="onConfirmRule" @onCancel="searchForm.ruleId = 0"/></van-dropdown-item>
       <van-dropdown-item>
@@ -49,7 +51,28 @@
       color="#26A2FF"
       @close="calendarClose"
       @confirm="calendarConfirm"
-    />
+    >
+      <template v-slot:title>
+        <van-row>
+          <van-col span="20">
+            <van-row type="flex" justify="space-between" style="height: 1rem;">
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="success" size="medium" @click="timeScopeThisWeek">本周</van-tag>
+              </van-col>
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="success" size="medium" @click="timeScopeLastWeek">上周</van-tag>
+              </van-col>
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="primary" size="medium" @click="timeScopeThisMoth">本月</van-tag>
+              </van-col>
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="primary" size="medium" @click="timeScopeLastMonth">上月</van-tag>
+              </van-col>
+            </van-row>
+          </van-col>
+        </van-row>
+      </template>
+    </van-calendar>
 
 
   </div>
@@ -153,6 +176,22 @@ export default {
   },
   created() {},
   methods:{
+    timeScopeThisWeek(){
+      this.timeScope = [new Date(moment().startOf('week').format('YYYY-MM-DD')),new Date(moment().endOf('week').format('YYYY-MM-DD'))]
+      this.showCalendar= false
+    },
+    timeScopeLastWeek(){
+      this.timeScope = [new Date(moment().subtract(1,'week').startOf('week').format('YYYY-MM-DD')),new Date(moment().subtract(1,'week').endOf('week').format('YYYY-MM-DD'))]
+      this.showCalendar = false
+    },
+    timeScopeThisMoth(){
+      this.timeScope = [new Date(moment().startOf('month').format('YYYY-MM-DD')),new Date(moment().endOf('month').format('YYYY-MM-DD'))]
+      this.showCalendar = false
+    },
+    timeScopeLastMonth(){
+      this.timeScope = [new Date(moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD')),new Date(moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD'))]
+      this.showCalendar = false
+    },
     calendarOpen(){
       this.showCalendar = true;
     },

src/point/view/pointHome.vue

@@ -203,8 +203,30 @@
       :min-date="pk.minDate"
       :max-date="pk.maxDate"
       :default-date="pkTimeScope"
+      :show-confirm="false"
       color="#26A2FF"
-    />
+    >
+      <template v-slot:title >
+        <van-row>
+          <van-col span="20">
+            <van-row type="flex" justify="space-between" style="height: 1rem;">
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="success" size="medium" @click="timeScopeThisWeek">本周</van-tag>
+              </van-col>
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="success" size="medium" @click="timeScopeLastWeek">上周</van-tag>
+              </van-col>
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="primary" size="medium" @click="timeScopeThisMoth">本月</van-tag>
+              </van-col>
+              <van-col span="6" style="text-align: center; align-self: center;">
+                <van-tag type="primary" size="medium" @click="timeScopeLastMonth">上月</van-tag>
+              </van-col>
+            </van-row>
+          </van-col>
+        </van-row>
+      </template>
+    </van-calendar>
   </div>
 </template>
 
@@ -318,6 +340,22 @@ export default {
     });
   },
   methods: {
+    timeScopeThisWeek(){
+      this.pkTimeScope = [new Date(moment().startOf('week').format('YYYY-MM-DD')),new Date(moment().endOf('week').format('YYYY-MM-DD'))]
+      this.pk.showDocDatePicker= false
+    },
+    timeScopeLastWeek(){
+      this.pkTimeScope = [new Date(moment().subtract(1,'week').startOf('week').format('YYYY-MM-DD')),new Date(moment().subtract(1,'week').endOf('week').format('YYYY-MM-DD'))]
+      this.pk.showDocDatePicker = false
+    },
+    timeScopeThisMoth(){
+      this.pkTimeScope = [new Date(moment().startOf('month').format('YYYY-MM-DD')),new Date(moment().endOf('month').format('YYYY-MM-DD'))]
+      this.pk.showDocDatePicker = false
+    },
+    timeScopeLastMonth(){
+      this.pkTimeScope = [new Date(moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD')),new Date(moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD'))]
+      this.pk.showDocDatePicker = false
+    },
     getCount(done) {
       var http1 = this.$axiosUser('get','/api/pro/integral/review/list', { type: 'waiting', page: 1,page_size:1, pt_id: 0, source_type: 0 }); // 获取为审批数量
       var http2 = this.$axiosUser('get','/api/pro/integral/work/list', { status: 'running', page: 1,page_size:1, pt_id: 0 }); // 获取任务数