feat：【system】操作日志 80%（增加时间范围的检索）

src/pages-system/operate-log/index.vue

@@ -75,7 +75,7 @@ import { getOperateLogPage } from '@/api/system/operate-log'
 import { useAccess } from '@/hooks/useAccess'
 import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDateTime } from '@/utils/date'
+import { formatDateRange, formatDateTime } from '@/utils/date'
 import SearchForm from './modules/search-form.vue'
 
 definePage({
@@ -98,7 +98,7 @@ const queryParams = reactive({
   subType: undefined as string | undefined,
   bizId: undefined as number | undefined,
   action: undefined as string | undefined,
-  createTime: undefined as string | undefined,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 返回上一页 */
@@ -110,9 +110,9 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getOperateLogPage({
-      ...queryParams,
-    })
+    const params: any = { ...queryParams }
+    params.createTime = formatDateRange(queryParams.createTime)
+    const data = await getOperateLogPage(params)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'

src/pages-system/operate-log/modules/search-form.vue

@@ -1,3 +1,4 @@
+<!-- TODO @AI：参考 /Users/yunai/Java/yudao-ui-admin-uniapp-next-v4/src/pages/message/components/search-form.vue 和 /Users/yunai/Java/yudao-ui-admin-uniapp-next-v4/src/pages/message/index.vue，实现对 time + 范围的处理； -->
 <template>
   <!-- 搜索框入口 -->
   <wd-search
@@ -69,15 +70,55 @@
           clearable
         />
       </view>
-      <view class="mb-24rpx">
+      <view class="mb-32rpx">
         <view class="mb-12rpx text-28rpx text-[#666]">
           创建时间
         </view>
-        <wd-input
-          v-model="formData.createTime"
-          placeholder="请输入创建时间"
-          clearable
+        <view class="flex items-center gap-16rpx">
+          <view class="flex-1" @click="visibleCreateTime[0] = true">
+            <view
+              class="h-72rpx flex items-center justify-center rounded-8rpx bg-[#f5f5f5] px-24rpx text-28rpx"
+            >
+              {{ formatDate(formData.createTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          <text class="text-28rpx text-[#999]">至</text>
+          <view class="flex-1" @click="visibleCreateTime[1] = true">
+            <view
+              class="h-72rpx flex items-center justify-center rounded-8rpx bg-[#f5f5f5] px-24rpx text-28rpx"
+            >
+              {{ formatDate(formData.createTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view
+          v-if="visibleCreateTime[0]"
+          v-model="tempCreateTime[0]"
+          type="date"
+          :columns-height="200"
         />
+        <view v-if="visibleCreateTime[0]" class="mt-16rpx flex justify-end gap-16rpx">
+          <wd-button size="small" plain @click="handleCreateTime0Cancel">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view
+          v-if="visibleCreateTime[1]"
+          v-model="tempCreateTime[1]"
+          type="date"
+          :columns-height="200"
+        />
+        <view v-if="visibleCreateTime[1]" class="mt-16rpx flex justify-end gap-16rpx">
+          <wd-button size="small" plain @click="handleCreateTime1Cancel">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
+            确定
+          </wd-button>
+        </view>
       </view>
       <view class="w-full flex justify-center gap-24rpx">
         <wd-button class="flex-1" plain @click="handleReset">
@@ -93,6 +134,7 @@
 
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from 'vue'
+import { formatDate } from '@/utils/date'
 
 /** 搜索表单数据 */
 export interface SearchFormData {
@@ -101,7 +143,7 @@ export interface SearchFormData {
   subType?: string
   bizId?: number
   action?: string
-  createTime?: string
+  createTime?: [number | undefined, number | undefined]
 }
 
 const props = defineProps<{
@@ -114,6 +156,14 @@ const emit = defineEmits<{
 }>()
 
 const visible = ref(false)
+const formData = reactive<SearchFormData>({
+  userId: undefined,
+  type: undefined,
+  subType: undefined,
+  bizId: undefined,
+  action: undefined,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
+})
 
 /** 搜索条件 placeholder 拼接 */
 const searchPlaceholder = computed(() => {
@@ -133,21 +183,12 @@ const searchPlaceholder = computed(() => {
   if (props.searchParams?.action) {
     conditions.push(`操作内容:${props.searchParams.action}`)
   }
-  if (props.searchParams?.createTime) {
-    conditions.push(`创建时间:${props.searchParams.createTime}`)
+  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
+    conditions.push(`创建时间:${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索操作日志'
 })
 
-const formData = reactive<SearchFormData>({
-  userId: undefined,
-  type: undefined,
-  subType: undefined,
-  bizId: undefined,
-  action: undefined,
-  createTime: undefined,
-})
-
 /** 监听弹窗打开，同步外部参数 */
 watch(visible, (val) => {
   if (val && props.searchParams) {
@@ -156,10 +197,36 @@ watch(visible, (val) => {
     formData.subType = props.searchParams.subType
     formData.bizId = props.searchParams.bizId
     formData.action = props.searchParams.action
-    formData.createTime = props.searchParams.createTime
+    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
   }
 })
 
+// 时间范围选择器状态
+const visibleCreateTime = ref<[boolean, boolean]>([false, false])
+const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
+
+/** 创建时间[0]确认 */
+function handleCreateTime0Confirm() {
+  formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
+  visibleCreateTime.value[0] = false
+}
+
+/** 创建时间[0]取消 */
+function handleCreateTime0Cancel() {
+  visibleCreateTime.value[0] = false
+}
+
+/** 创建时间[1]确认 */
+function handleCreateTime1Confirm() {
+  formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
+  visibleCreateTime.value[1] = false
+}
+
+/** 创建时间[1]取消 */
+function handleCreateTime1Cancel() {
+  visibleCreateTime.value[1] = false
+}
+
 /** 搜索 */
 function handleSearch() {
   visible.value = false
@@ -173,7 +240,7 @@ function handleReset() {
   formData.subType = undefined
   formData.bizId = undefined
   formData.action = undefined
-  formData.createTime = undefined
+  formData.createTime = [undefined, undefined]
   visible.value = false
   emit('reset')
 }