完成聊天记录按日期搜索功能

components.d.ts

@@ -52,6 +52,7 @@ declare module 'vue' {
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NIcon: typeof import('naive-ui')['NIcon']

src/components/search/searchByCondition.vue

@@ -2,8 +2,8 @@
   <div class="outer-layer search-by-condition-page">
     <n-infinite-scroll style="height: 455px;" :distance="40" @load="loadMore">
       <div class="root">
-        <div v-if="state.condition === 'dateTimePicker'" class="search-by-date">
+        <!-- <div v-if="state.condition === 'date'" class="search-by-date"> -->
-          <n-date-picker
+        <!-- <n-date-picker
             :panel="true"
             type="datetime"
             :clearable="true"
@@ -11,7 +11,7 @@
             :is-date-disabled="dateDisabled"
             :actions="['clear', 'confirm']"
             @confirm="onDatePickConfirm"
-          />
+          /> -->
         <!-- <tm-time-picker
           :show="state.showMonthPicker"
           :showDetail="{
@@ -56,7 +56,7 @@
           @getDArray="getDArray"
           :showDefault="false"
         ></tm-calendar-view> -->
-        </div>
+        <!-- </div> -->
         <div
           class="search-by-condition-input-list"
           v-if="
@@ -327,7 +327,7 @@ import { parseTime } from '@/utils/datetime'
 import { fileFormatSize, fileSuffix } from '@/utils/strings'
 import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
 
-const emits = defineEmits(['clearSearchMemberByAlphabet'])
+const emits = defineEmits(['clearSearchMemberByAlphabet', 'getDisabledDateArray'])
 
 const dialogueStore = useDialogueStore()
 // 当前对话参数
@@ -353,6 +353,16 @@ const props = defineProps({
     //搜索关键字文本
     type: String,
     default: ''
+  },
+  selectedDateTime: {
+    //选中的日期时间戳格式
+    type: [Number, null],
+    default: null
+  },
+  nowDateTime: {
+    //当前日期时间
+    type: Date,
+    default: new Date()
   }
 })
 
@@ -374,7 +384,7 @@ const state = reactive({
   msg_type: 0, //查询的消息类型
   group_member_id: 0, //群成员id
   flatList: [], // 用于存储扁平化的数据
-  selectedDateTime: '', //选中的日期时间戳格式
+  selectedDateTime: null, //选中的日期时间戳格式
   isLoadingChatRecord: false, // 添加加载状态标志
   hasNoMoreResults: false // 是否没有更多结果
 })
@@ -447,6 +457,7 @@ const ServeQueryTalkDate = (month) => {
       } else {
         state.disabledDateArray = state.dArray
       }
+      emits('getDisabledDateArray', state.disabledDateArray)
     } else {
     }
   })
@@ -454,16 +465,6 @@ const ServeQueryTalkDate = (month) => {
   resp.catch(() => {})
 }
 
-//禁用的日期
-const dateDisabled = (e) => {
-  const date = new Date(e)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const formattedDate = `${year}/${month}/${day}`
-  return state.disabledDateArray.includes(formattedDate)
-}
-
 //点击选择日期
 const selectDate = async (e) => {
   if (e == parseTime(state.nowDate, '{y}/{m}/{d}')) {
@@ -746,14 +747,6 @@ const toDialogueByMember = async (msgInfo) => {
   })
 }
 
-//点击选择日期确认
-const onDatePickConfirm = (datePicker) => {
-  console.log(datePicker)
-  state.selectedDateTime = datePicker
-  resetSearchConditions('dateTimePicker')
-  queryAllSearch()
-}
-
 //重置部分搜索条件
 const resetSearchConditions = (newVal) => {
   state.cursor = 0
@@ -785,17 +778,14 @@ watch(
         state.pageTitle = '按群成员查找'
         state.msg_type = 0
         queryAllSearch()
-      } else if (newVal === 'dateTimePicker') {
+      } else if (newVal === 'date') {
+        //没选日期前，也等同于倒序查询全部
         state.showPageTitle = true
         state.pageTitle = '按日期查找'
         state.msg_type = 0
         ServeQueryTalkDate(parseTime(state.nowDate, '{y}{m}'))
         getDArray(parseTime(state.nowDate, '{y}-{m}'))
         queryAllSearch()
-      } else if (newVal === 'date') {
-        //没选日期前，也等同于倒序查询全部
-        state.msg_type = 0
-        queryAllSearch()
       } else if (newVal === 'imgAndVideo') {
         state.showPageTitle = true
         state.pageTitle = '图片与视频'
@@ -855,18 +845,30 @@ watch(
 watch(
   () => props?.searchRecordByConditionText,
   (newVal, oldVal) => {
-    console.log(newVal, oldVal)
     resetSearchConditions(state.condition)
     queryAllSearch()
   }
 )
+
+watch(
+  () => props?.selectedDateTime,
+  (newVal, oldVal) => {
+    state.selectedDateTime = newVal
+    resetSearchConditions('date')
+    queryAllSearch()
+  }
+)
+
+watch(
+  () => props?.nowDateTime,
+  (newVal, oldVal) => {
+    ServeQueryTalkDate(parseTime(newVal, '{y}{m}'))
+    getDArray(parseTime(newVal, '{y}-{m}'))
+  }
+)
 </script>
 <style scoped lang="scss">
-.search-by-date {
+.search-date-picker {
-  :deep(.n-date-panel-header) {
-    display: none;
-  }
-  .search-date-picker {
   padding: 10px 16px;
   display: flex;
   flex-direction: row;
@@ -881,9 +883,7 @@ watch(
     height: 6px;
     margin: 0 0 0 13px;
   }
-  }
 }
-
 body:deep(.text-overflow-1) {
   color: #666666 !important;
   line-height: 22px !important;

src/utils/auth.js

@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b895d12a77cebc3f489ae40e22c7fcd041709d942706b8ab6959f87300e0708cf1f6267ffc75eec184c873b180677744fb7af1a18227c61e570dd36542a83d608f51f3a124414eee16ad11c8b5d3aefd6bc'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8920ba7848670d6635bc65bc81e459c2d265c727a7b12d1bef76bc3ef2db21c5321a0369a434ada2629282bf55674fe5b6052fa62f66e10cdd8652c28aa0f4afd42fdc72282e2e591e7b7c0c17a3b85eca'
 }
 
 /**

src/views/message/inner/IndexContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive, computed, watch } from 'vue'
+import { reactive, computed, watch, ref } from 'vue'
-import { NDrawer, NCard, NTag, NInput } from 'naive-ui'
+import { NDrawer, NCard, NTag, NInput, NDatePicker } from 'naive-ui'
 import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
 import PanelHeader from './panel/PanelHeader.vue'
 import PanelContent from './panel/PanelContent.vue'
@@ -106,7 +106,11 @@ const state = reactive({
   groupNoticeContentChange: '', //群公告内容变化
   searchMemberByAlphabet: '', //群成员搜索文本
   searchMemberItem: '', //群成员搜索item
-  showMemberListByAlphabetPopover: false // 控制群成员弹窗显示
+  showMemberListByAlphabetPopover: false, // 控制群成员弹窗显示
+  disabledDateArray: [] as string[], // 被禁用的日期数组
+  selectedDateTime: null, // 选中的日期时间戳格式
+  nowDateTime: new Date(), // 当前日期时间
+  showDateConditionPopover: false // 控制日期条件弹窗显示
 })
 
 const events = {
@@ -421,6 +425,62 @@ const resetSearchRecordByCondition = () => {
   state.showMemberListByAlphabetPopover = false
   state.searchMemberByAlphabet = ''
 }
+
+//禁用的日期
+const dateDisabled = (e) => {
+  const date = new Date(e)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const formattedDate = `${year}/${month}/${day}`
+  return state.disabledDateArray.includes(formattedDate)
+}
+
+// 获取禁用日期
+const getDisabledDateArray = (disabledDateArray) => {
+  state.disabledDateArray = disabledDateArray
+}
+
+// 日期选择器确认事件
+const onDatePickConfirm = (datePicker) => {
+  console.log(datePicker)
+  state.selectedDateTime = datePicker
+  state.showDateConditionPopover = false
+}
+
+// 日期选择器清除事件
+const onDatePickClear = () => {
+  state.selectedDateTime = null
+  state.showDateConditionPopover = false
+  state.nowDateTime = new Date()
+}
+
+// 日期选择器前一个月事件
+const onPrevMonth = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear(), state.nowDateTime.getMonth() - 1, 1)
+}
+
+// 日期选择器后一个月事件
+const onNextMonth = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear(), state.nowDateTime.getMonth() + 1, 1)
+}
+
+// 日期选择器前一年事件
+const onPrevYear = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear() - 1, state.nowDateTime.getMonth(), 1)
+}
+
+// 日期选择器后一年事件
+const onNextYear = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear() + 1, state.nowDateTime.getMonth(), 1)
+}
+
+// 日期选择器显示事件（其实是popover显示事件）
+const onDatePickShow = (show) => {
+  if (show) {
+    // state.nowDateTime = new Date()
+  }
+}
 </script>
 
 <template>
@@ -549,11 +609,33 @@ const resetSearchRecordByCondition = () => {
           <div class="search-area-condition">
             <span @click="changeConditionTag('file')">文件</span>
             <span @click="changeConditionTag('imgAndVideo')">图片与视频</span>
-            <n-popover trigger="click" placement="bottom-start" style="height: 312px; padding: 0;">
+            <n-popover
+              v-model:show="state.showDateConditionPopover"
+              trigger="click"
+              placement="bottom-start"
+              style="height: 312px; padding: 0;"
+              @update:show="onDatePickShow"
+            >
               <template #trigger>
                 <span id="date-condition" @click="changeConditionTag('date')">日期</span>
               </template>
-              <historyRecord conditionType="dateTimePicker" v-if="state.conditionType === 'date'" />
+              <div class="search-by-date">
+                <n-date-picker
+                  :panel="true"
+                  type="datetime"
+                  :clearable="true"
+                  :first-day-of-week="6"
+                  :is-date-disabled="dateDisabled"
+                  :actions="['clear', 'confirm']"
+                  @confirm="onDatePickConfirm"
+                  @clear="onDatePickClear"
+                  @prev-month="onPrevMonth"
+                  @next-month="onNextMonth"
+                  @prev-year="onPrevYear"
+                  @next-year="onNextYear"
+                  v-model:value="state.selectedDateTime"
+                />
+              </div>
             </n-popover>
             <n-popover
               v-model:show="state.showMemberListByAlphabetPopover"
@@ -621,6 +703,9 @@ const resetSearchRecordByCondition = () => {
               :searchMemberItem="state.searchMemberItem"
               @clearSearchMemberByAlphabet="clearSearchMemberByAlphabet"
               :searchRecordByConditionText="state.searchRecordByConditionText"
+              @getDisabledDateArray="getDisabledDateArray"
+              :selectedDateTime="state.selectedDateTime"
+              :nowDateTime="state.nowDateTime"
             />
           </div>
         </n-card>
@@ -756,6 +841,11 @@ const resetSearchRecordByCondition = () => {
     }
   }
 }
+.search-by-date {
+  :deep(.n-date-panel-header) {
+    display: none;
+  }
+}
 .search-record-modal-content {
   box-sizing: border-box;
   width: 100%;