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

2025-05-27 11:21:55 +08:00 · 2025-05-27 11:21:55 +08:00 · 8ecee15180
commit 8ecee15180
parent efb410b657
4 changed files with 148 additions and 57 deletions
--- a/components.d.ts
+++ b/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']
--- a/src/components/search/searchByCondition.vue
+++ b/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">
-          <n-date-picker
+        <!-- <div v-if="state.condition === 'date'" class="search-by-date"> -->
+        <!-- <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 {
-  :deep(.n-date-panel-header) {
-    display: none;
-  }
-  .search-date-picker {
+.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;
--- a/src/utils/auth.js
+++ b/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'
 }

 /**
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive, computed, watch } from 'vue'
-import { NDrawer, NCard, NTag, NInput } from 'naive-ui'
+import { reactive, computed, watch, ref } from 'vue'
+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%;