统计前端页面添加单选时间快捷选中

src/views/sta/index.vue

@@ -2,20 +2,23 @@
   <ContentWrap>
     <el-row>
         <el-form-item label="统计时间">
+          <el-radio-group v-model="radioType" @change="changeRadio">
+            <el-radio v-for="item in radioSelector" :value="item.value" :key="item.value">{{item.label}}</el-radio>
+          </el-radio-group>
           <el-date-picker
+            style="margin-left: 10px;"
             value-format="YYYY-MM-DD"
             v-model="time"
             type="daterange"
             range-separator="To"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
+            :default-time="[new Date().getDate() - 7,new Date()]"
             :shortcuts="shortcuts"
             size="big"
+            @change="changeDatePick"
           />
         </el-form-item>
-        <el-button type="primary" @click="getList" style="float: right;margin-left: 20px;">
-          <Icon icon="ep:search" class="mr-5px" /> 查询
-        </el-button>
     </el-row>
   </ContentWrap>
   <ContentWrap>
@@ -53,6 +56,7 @@
 import {StatisticsApi} from "@/api/inspect/statistics";
 import dayjs from "dayjs";
 import {PatientApi} from "@/api/inspect/inspectpatient";
+import {formatDate} from "@/utils/formatTime";
 
 const time = ref() // 日期
 const data = ref([
@@ -81,6 +85,13 @@ const data = ref([
     },
 ])*/
 const data1 = ref([])
+const radioSelector = ref([
+  {value:1,label:'全部'},
+  {value:2,label:'今天'},
+  {value:3,label:'最近一周'},
+  {value:4,label:'最近一个月'},
+])
+const radioType = ref(3) //
 const shortcuts = [
   {
     text: '最近一周',
@@ -109,6 +120,29 @@ const shortcuts = [
     },
   },
 ]
+/**
+ * 改变单选框
+ * @param e
+ */
+const changeRadio = (e) => {
+  let end = new Date()
+  let start = new Date()
+  let date = null
+  switch (e){
+    case 1 : date = [];break
+    case 2 : break
+    case 3 : start.setDate(start.getDate() - 7);break
+    case 4 : start.setMonth(start.getMonth() - 1);break
+    default : start.setDate(start.getDate() -7)
+  }
+  console.log(time.value)
+  time.value = [formatDate(start,'YYYY-MM-DD'),formatDate(end,'YYYY-MM-DD')]
+  getList()
+}
+const changeDatePick = () => {
+  radioType.value = null
+  getList()
+}
 /**
  * 获取统计数据
  */
@@ -158,6 +192,7 @@ const dataProcessing = (data) => {
 }
 onMounted(()=>{
   getList()
+  changeRadio(3)
 })
 </script>