src/components/charge/ChargeQueue.vue

@@ -2,15 +2,14 @@
   <Panel title="收费队列">
     <template #tools>
       <div @click="setDate" class="date-btn">
-        <span>筛选</span>
+        <span>{{ selectedDateStr }}</span>
         <el-icon style="margin-left: 21px">
           <Calendar/>
         </el-icon>
       </div>
       <el-date-picker
           v-model="selectedDate"
-          type="daterange"
+          type="date"
-          @change="dateChangeHandler"
           placeholder="选择日期"
           ref="datePickerRef"
           format="YYYY-MM-DD"
@@ -81,7 +80,7 @@
 import {nextTick, onMounted, ref, watch} from "vue";
 import {post} from "@/utils/request.ts";
 import Panel from "@/components/common/Panel.vue";
-import {formatListTime, getCurrentDate, getEndOfDay, getToday} from "@/utils/dateUtils.ts";
+import {formatListTime, getCurrentDate, getEndOfDay} from "@/utils/dateUtils.ts";
 import { Search,Calendar} from "@element-plus/icons-vue";
 import {apiConfig} from "@/assets/config/apiConfig.ts";
 import Edit from "@/components/registration/Edit.vue";
@@ -104,18 +103,19 @@ const addChargeOrder = () => {
 const clickFirst = () => {
   clickItem(ChargeQueueList.value[0])
 }
-const selectedDate: any = ref()
+const selectedDate: any = ref('')
 const query = ref({
   pageSize: 20,
   pageNum: 1,
   keyword: "",
   status: 0,
-  beginTime: "",
+  beginTime: selectedDate.value,
-  endTime: ""
+  endTime: getEndOfDay(selectedDate.value)
 })
 const init = async () => {
-  query.value.beginTime = selectedDate.value[0]
+  selectedDateStr.value = setDateTip()
-  query.value.endTime = getEndOfDay(selectedDate.value[1])
+  query.value.beginTime = selectedDate.value
+  query.value.endTime = getEndOfDay(selectedDate.value)
   loading.value = true
   try {
     let data: any = await post(apiConfig.RecordGetChargeQueue, {query: query.value}, {catch_error: true})
@@ -133,8 +133,7 @@ const delDraft = () => {
 }
 defineExpose({delDraft, init})
 onMounted(() => {
-  let today = getToday()
+  selectedDate.value = getCurrentDate()
-  selectedDate.value =[today.start,getEndOfDay(today.end)]
   init()
 })
 const statusList = ref([
@@ -162,8 +161,8 @@ const tab = (item: any) => {
 }
 const getTipCount = () => {
   post('statistics/getTipCount', {
-    beginTime: query.value.beginTime,
+    beginTime: selectedDate.value,
-    endTime: query.value.endTime
+    endTime: getEndOfDay(selectedDate.value)
   }).then((res: any) => {
     statusList.value[0].num = res.unchargedCount
     statusList.value[1].num = res.chargedCount
@@ -171,18 +170,39 @@ const getTipCount = () => {
   })
 }
 
+const selectedDateStr: any = ref('')
 const datePickerRef = ref()
 const setDate = function () {
   if (datePickerRef.value) {
     datePickerRef.value.handleOpen()
   }
 }
-const dateChangeHandler =(seDate:any)=>{
+const setDateTip = () => {
-  let date = formatListTime(seDate);
+  const seletctedDateObj = new Date(selectedDate.value);
-  query.value.beginTime = date[0]
+  //如果选择的日期是今天
-  query.value.endTime = getEndOfDay(seDate)
+  if (seletctedDateObj.getFullYear() == new Date().getFullYear() && seletctedDateObj.getMonth() == new Date().getMonth() && seletctedDateObj.getDate() == new Date().getDate()) {
-  init()
+    return '今天'
+  }
+  if (seletctedDateObj.getFullYear() == new Date().getFullYear() && seletctedDateObj.getMonth() == new Date().getMonth() && seletctedDateObj.getDate() == new Date().getDate() - 1) {
+    return '昨天'
+  }
+  //如果为今年
+  if (seletctedDateObj.getFullYear() == new Date().getFullYear()) {
+    return `${seletctedDateObj.getMonth() + 1}-${seletctedDateObj.getDate()}`
+  }
+  return seletctedDateObj.getFullYear();
+
+
 }
+watch(() => selectedDate.value, (newValue, oldValue) => {
+  if (newValue == oldValue) {
+    return;
+  }
+  if (newValue == null) {
+    return;
+  }
+  init()
+})
 const searchInput = (v: any) => {
   query.value.keyword = v
   init()