feat：优化 search-form.vue 的实现，大大简化逻辑，并且和 index.vue 更解耦

src/pages-infra/apiAccessLog/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -53,49 +53,31 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
-
-/** 搜索表单数据 */
-export interface SearchFormData {
-  userId?: number
-  applicationName?: string
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
+import { computed, reactive, ref } from 'vue'
 
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  userId: undefined,
-  applicationName: undefined,
+const formData = reactive({
+  userId: undefined as number | undefined,
+  applicationName: undefined as string | undefined,
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.userId) {
-    conditions.push(`用户编号:${props.searchParams.userId}`)
+  if (formData.userId) {
+    conditions.push(`用户编号:${formData.userId}`)
   }
-  if (props.searchParams?.applicationName) {
-    conditions.push(`应用名:${props.searchParams.applicationName}`)
+  if (formData.applicationName) {
+    conditions.push(`应用名:${formData.applicationName}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索日志'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.userId = props.searchParams.userId
-    formData.applicationName = props.searchParams.applicationName
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false

src/pages-infra/apiAccessLog/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 日志列表 -->
     <view class="p-24rpx">
@@ -72,11 +68,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { ApiAccessLog } from '@/api/infra/apiAccessLog'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getApiAccessLogPage } from '@/api/infra/apiAccessLog'
 import { navigateBackPlus } from '@/utils'
 import { formatDateTime } from '@/utils/date'
@@ -92,11 +87,9 @@ definePage({
 const total = ref(0)
 const list = ref<ApiAccessLog[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  userId: undefined as number | undefined,
-  applicationName: undefined as string | undefined,
 })
 
 /** 返回上一页 */
@@ -108,24 +101,24 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getApiAccessLogPage({
-      ...queryParams,
-    })
+    const data = await getApiAccessLogPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.userId = data?.userId
-  queryParams.applicationName = data?.applicationName
-  queryParams.pageNo = 1
-  list.value = [] // 清空列表
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
   getList()
 }
 
@@ -139,7 +132,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

src/pages-infra/apiErrorLog/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -70,60 +70,43 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
-
-/** 搜索表单数据 */
-export interface SearchFormData {
-  userId?: number
-  applicationName?: string
-  processStatus: number // -1 表示全部
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
+import { computed, reactive, ref } from 'vue'
 
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  userId: undefined,
-  applicationName: undefined,
-  processStatus: -1,
+const formData = reactive({
+  userId: undefined as number | undefined,
+  applicationName: undefined as string | undefined,
+  processStatus: -1, // -1 表示全部
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.userId) {
-    conditions.push(`用户编号:${props.searchParams.userId}`)
+  if (formData.userId) {
+    conditions.push(`用户编号:${formData.userId}`)
   }
-  if (props.searchParams?.applicationName) {
-    conditions.push(`应用名:${props.searchParams.applicationName}`)
+  if (formData.applicationName) {
+    conditions.push(`应用名:${formData.applicationName}`)
   }
-  if (props.searchParams?.processStatus !== undefined && props.searchParams?.processStatus !== -1) {
+  if (formData.processStatus !== -1) {
     const statusMap: Record<number, string> = { 0: '未处理', 1: '已处理', 2: '已忽略' }
-    conditions.push(`状态:${statusMap[props.searchParams.processStatus]}`)
+    conditions.push(`状态:${statusMap[formData.processStatus]}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索日志'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.userId = props.searchParams.userId
-    formData.applicationName = props.searchParams.applicationName
-    formData.processStatus = props.searchParams.processStatus ?? -1
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData })
+  emit('search', {
+    ...formData,
+    processStatus: formData.processStatus === -1 ? undefined : formData.processStatus,
+  })
 }
 
 /** 重置 */

src/pages-infra/apiErrorLog/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 日志列表 -->
     <view class="p-24rpx">
@@ -62,11 +58,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { ApiErrorLog } from '@/api/infra/apiErrorLog'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getApiErrorLogPage } from '@/api/infra/apiErrorLog'
 import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
@@ -83,12 +78,9 @@ definePage({
 const total = ref(0)
 const list = ref<ApiErrorLog[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  userId: undefined as number | undefined,
-  applicationName: undefined as string | undefined,
-  processStatus: -1 as number, // -1 表示全部
 })
 
 /** 返回上一页 */
@@ -100,26 +92,24 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getApiErrorLogPage({
-      ...queryParams,
-      processStatus: queryParams.processStatus === -1 ? undefined : queryParams.processStatus,
-    })
+    const data = await getApiErrorLogPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.userId = data?.userId
-  queryParams.applicationName = data?.applicationName
-  queryParams.processStatus = data?.processStatus ?? -1
-  queryParams.pageNo = 1
-  list.value = [] // 清空列表
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
   getList()
 }
 
@@ -133,7 +123,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

src/pages-system/dept/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -59,59 +59,40 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
 
-/** 搜索表单数据 */
-export interface SearchFormData {
-  name?: string
-  status?: number
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
-
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  name: undefined,
-  status: -1,
+const formData = reactive({
+  name: undefined as string | undefined,
+  status: -1, // -1 表示全部
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索部门'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.status = props.searchParams.status !== undefined ? props.searchParams.status : -1
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  const params = { ...formData }
-  if (params.status === -1) {
-    params.status = undefined
-  }
-  emit('search', params)
+  emit('search', {
+    ...formData,
+    status: formData.status === -1 ? undefined : formData.status,
+  })
 }
 
 /** 重置 */

src/pages-system/dept/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 面包屑导航 -->
     <Breadcrumb ref="breadcrumbRef" v-model="currentParentId" />
@@ -72,10 +68,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { Dept } from '@/api/system/dept'
 import type { User } from '@/api/system/user'
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { getDeptList } from '@/api/system/dept'
 import { getSimpleUserList } from '@/api/system/user'
 import { navigateBackPlus } from '@/utils'
@@ -104,10 +99,7 @@ const currentList = computed(() => {
 }) // 当前层级的部门列表
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
 
-const queryParams = reactive<SearchFormData>({
-  name: undefined,
-  status: undefined,
-})
+const queryParams = ref<Record<string, any>>({})
 
 /** 返回上一页或上一层级 */
 function handleBack() {
@@ -134,7 +126,7 @@ function handleEnterChildren(item: Dept) {
 async function getList() {
   loading.value = true
   try {
-    const data = await getDeptList(queryParams)
+    const data = await getDeptList(queryParams.value)
     list.value = handleTree(data)
   } finally {
     loading.value = false
@@ -142,9 +134,8 @@ async function getList() {
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.name = data?.name
-  queryParams.status = data?.status
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = { ...data }
   // 重置面包屑
   currentParentId.value = 0
   breadcrumbRef.value?.reset()

src/pages-system/menu/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -52,39 +52,29 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
 
-/** 搜索表单数据 */
-export interface SearchFormData {
-  name?: string
-  status?: number
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
-
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  name: undefined,
-  status: undefined,
+const formData = reactive({
+  name: undefined as string | undefined,
+  status: undefined as number | undefined,
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.status !== undefined) {
-    const dict = getIntDictOptions(DICT_TYPE.COMMON_STATUS).find(d => d.value === props.searchParams?.status)
+  if (formData.status !== undefined) {
+    const dict = getIntDictOptions(DICT_TYPE.COMMON_STATUS).find(d => d.value === formData.status)
     if (dict) {
       conditions.push(`状态:${dict.label}`)
     }
@@ -92,14 +82,6 @@ const searchPlaceholder = computed(() => {
   return conditions.length > 0 ? conditions.join(' | ') : '搜索菜单'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.status = props.searchParams.status
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false

src/pages-system/menu/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 面包屑导航 -->
     <Breadcrumb ref="breadcrumbRef" v-model="currentParentId" />
@@ -72,9 +68,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { Menu } from '@/api/system/menu'
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { getMenuList } from '@/api/system/menu'
 import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE, SystemMenuTypeEnum } from '@/utils/constants'
@@ -101,10 +96,7 @@ const currentList = computed(() => {
 }) // 当前层级的菜单列表
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
 
-const queryParams = reactive<SearchFormData>({
-  name: undefined,
-  status: undefined,
-})
+const queryParams = ref<Record<string, any>>({})
 
 /** 返回上一页或上一层级 */
 function handleBack() {
@@ -164,7 +156,7 @@ function handleEnterChildren(item: Menu) {
 async function getList() {
   loading.value = true
   try {
-    const data = await getMenuList(queryParams)
+    const data = await getMenuList(queryParams.value)
     list.value = handleTree(data)
   } finally {
     loading.value = false
@@ -172,9 +164,8 @@ async function getList() {
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.name = data?.name
-  queryParams.status = data?.status
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = { ...data }
   // 重置面包屑
   currentParentId.value = 0
   breadcrumbRef.value?.reset()

src/pages-system/notice/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -59,55 +59,40 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
 
-/** 搜索表单数据 */
-export interface SearchFormData {
-  title?: string
-  status?: number
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData>
-}>()
-
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  title: undefined,
-  status: -1 as number,
+const formData = reactive({
+  title: undefined as string | undefined,
+  status: -1, // -1 表示全部
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.title) {
-    conditions.push(`公告标题:${props.searchParams.title}`)
+  if (formData.title) {
+    conditions.push(`公告标题:${formData.title}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`公告状态（0正常 1关闭）:${getDictLabel(DICT_TYPE.COMMON_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`公告状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索通知公告'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.title = props.searchParams.title
-    formData.status = props.searchParams.status ?? -1
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData } as SearchFormData)
+  emit('search', {
+    ...formData,
+    status: formData.status === -1 ? undefined : formData.status,
+  })
 }
 
 /** 重置 */

src/pages-system/notice/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 通知公告列表 -->
     <view class="p-24rpx">
@@ -67,11 +63,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { Notice } from '@/api/system/notice'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getNoticePage } from '@/api/system/notice'
 import { useAccess } from '@/hooks/useAccess'
 import { navigateBackPlus } from '@/utils'
@@ -89,13 +84,10 @@ definePage({
 const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<Notice[]>([])
-const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
-
-const queryParams = reactive({
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  title: undefined as string | undefined,
-  status: -1 as number, // -1 表示全部
 })
 
 /** 返回上一页 */
@@ -107,24 +99,23 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getNoticePage({
-      ...queryParams,
-      status: queryParams.status === -1 ? undefined : queryParams.status,
-    })
+    const data = await getNoticePage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.title = data?.title
-  queryParams.status = data?.status ?? -1
-  queryParams.pageNo = 1
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = []
   getList()
 }
@@ -139,7 +130,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

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

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 操作日志列表 -->
     <view class="p-24rpx">
@@ -66,16 +62,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './modules/search-form.vue'
 import type { OperateLog } from '@/api/system/operate-log'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getOperateLogPage } from '@/api/system/operate-log'
-import { useAccess } from '@/hooks/useAccess'
 import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDateRange, formatDateTime } from '@/utils/date'
+import { formatDateTime } from '@/utils/date'
 import SearchForm from './modules/search-form.vue'
 
 definePage({
@@ -85,20 +79,13 @@ definePage({
   },
 })
 
-const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<OperateLog[]>([])
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
 
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  userId: undefined as number | undefined,
-  type: undefined as string | undefined,
-  subType: undefined as string | undefined,
-  bizId: undefined as number | undefined,
-  action: undefined as string | undefined,
-  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 返回上一页 */
@@ -110,27 +97,23 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const params: any = { ...queryParams }
-    params.createTime = formatDateRange(queryParams.createTime)
-    const data = await getOperateLogPage(params)
+    const data = await getOperateLogPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.userId = data?.userId
-  queryParams.type = data?.type
-  queryParams.subType = data?.subType
-  queryParams.bizId = data?.bizId
-  queryParams.action = data?.action
-  queryParams.createTime = data?.createTime
-  queryParams.pageNo = 1
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = []
   getList()
 }
@@ -145,7 +128,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

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

@@ -1,8 +1,7 @@
-<!-- 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
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -133,74 +132,48 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
-import { formatDate } from '@/utils/date'
-
-/** 搜索表单数据 */
-export interface SearchFormData {
-  userId?: number
-  type?: string
-  subType?: string
-  bizId?: number
-  action?: string
-  createTime?: [number | undefined, number | undefined]
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData>
-}>()
+import { computed, reactive, ref } from 'vue'
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  userId: undefined,
-  type: undefined,
-  subType: undefined,
-  bizId: undefined,
-  action: undefined,
+const formData = reactive({
+  userId: undefined as number | undefined,
+  type: undefined as string | undefined,
+  subType: undefined as string | undefined,
+  bizId: undefined as number | undefined,
+  action: undefined as string | undefined,
   createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.userId !== undefined) {
-    conditions.push(`用户编号:${props.searchParams.userId}`)
+  if (formData.userId !== undefined) {
+    conditions.push(`用户编号:${formData.userId}`)
   }
-  if (props.searchParams?.type) {
-    conditions.push(`操作模块类型:${props.searchParams.type}`)
+  if (formData.type) {
+    conditions.push(`操作模块类型:${formData.type}`)
   }
-  if (props.searchParams?.subType) {
-    conditions.push(`操作名:${props.searchParams.subType}`)
+  if (formData.subType) {
+    conditions.push(`操作名:${formData.subType}`)
   }
-  if (props.searchParams?.bizId !== undefined) {
-    conditions.push(`操作数据模块编号:${props.searchParams.bizId}`)
+  if (formData.bizId !== undefined) {
+    conditions.push(`操作数据模块编号:${formData.bizId}`)
   }
-  if (props.searchParams?.action) {
-    conditions.push(`操作内容:${props.searchParams.action}`)
+  if (formData.action) {
+    conditions.push(`操作内容:${formData.action}`)
   }
-  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
-    conditions.push(`创建时间:${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`创建时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索操作日志'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.userId = props.searchParams.userId
-    formData.type = props.searchParams.type
-    formData.subType = props.searchParams.subType
-    formData.bizId = props.searchParams.bizId
-    formData.action = props.searchParams.action
-    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
-  }
-})
-
 // 时间范围选择器状态
 const visibleCreateTime = ref<[boolean, boolean]>([false, false])
 const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
@@ -230,7 +203,10 @@ function handleCreateTime1Cancel() {
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData } as SearchFormData)
+  emit('search', {
+    ...formData,
+    createTime: formatDateRange(formData.createTime),
+  })
 }
 
 /** 重置 */

src/pages-system/post/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -69,57 +69,37 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
 
-/** 搜索表单数据 */
-export interface SearchFormData {
-  name?: string
-  code?: string
-  status: number // -1 表示全部
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
-
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  name: undefined,
-  code: undefined,
-  status: -1,
+const formData = reactive({
+  name: undefined as string | undefined,
+  code: undefined as string | undefined,
+  status: -1, // -1 表示全部
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.code) {
-    conditions.push(`编码:${props.searchParams.code}`)
+  if (formData.code) {
+    conditions.push(`编码:${formData.code}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索岗位'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.code = props.searchParams.code
-    formData.status = props.searchParams.status ?? -1
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false

src/pages-system/post/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 岗位列表 -->
     <view class="p-24rpx">
@@ -63,11 +59,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { Post } from '@/api/system/post'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getPostPage } from '@/api/system/post'
 import { useAccess } from '@/hooks/useAccess'
 import { navigateBackPlus } from '@/utils'
@@ -85,12 +80,9 @@ const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<Post[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  name: undefined as string | undefined,
-  code: undefined as string | undefined,
-  status: -1 as number, // -1 表示全部
 })
 
 /** 返回上一页 */
@@ -102,25 +94,27 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getPostPage({
-      ...queryParams,
-      status: queryParams.status === -1 ? undefined : queryParams.status,
-    })
+    const params = { ...queryParams.value }
+    if ((params as any).status === -1) {
+      delete (params as any).status
+    }
+    const data = await getPostPage(params)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.name = data?.name
-  queryParams.code = data?.code
-  queryParams.status = data?.status ?? -1
-  queryParams.pageNo = 1
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = [] // 清空列表
   getList()
 }
@@ -135,7 +129,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

src/pages-system/role/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -69,57 +69,37 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
 
-/** 搜索表单数据 */
-export interface SearchFormData {
-  name?: string
-  code?: string
-  status: number // -1 表示全部
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
-
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  name: undefined,
-  code: undefined,
-  status: -1,
+const formData = reactive({
+  name: undefined as string | undefined,
+  code: undefined as string | undefined,
+  status: -1, // -1 表示全部
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.code) {
-    conditions.push(`标识:${props.searchParams.code}`)
+  if (formData.code) {
+    conditions.push(`标识:${formData.code}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索角色'
 })
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.code = props.searchParams.code
-    formData.status = props.searchParams.status ?? -1
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false

src/pages-system/role/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 角色列表 -->
     <view class="p-24rpx">
@@ -63,11 +59,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { Role } from '@/api/system/role'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getRolePage } from '@/api/system/role'
 import { useAccess } from '@/hooks/useAccess'
 import { navigateBackPlus } from '@/utils'
@@ -85,12 +80,9 @@ const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<Role[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  name: undefined as string | undefined,
-  code: undefined as string | undefined,
-  status: -1 as number, // -1 表示全部
 })
 
 /** 返回上一页 */
@@ -102,25 +94,27 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getRolePage({
-      ...queryParams,
-      status: queryParams.status === -1 ? undefined : queryParams.status,
-    })
+    const params = { ...queryParams.value }
+    if ((params as any).status === -1) {
+      delete (params as any).status
+    }
+    const data = await getRolePage(params)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.name = data?.name
-  queryParams.code = data?.code
-  queryParams.status = data?.status
-  queryParams.pageNo = 1
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = [] // 清空列表
   getList()
 }
@@ -135,7 +129,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

src/pages-system/user/components/search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -52,50 +52,30 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
-
-/** 搜索表单数据 */
-export interface SearchFormData {
-  username?: string
-  nickname?: string
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
+import { computed, reactive, ref } from 'vue'
 
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
+const formData = reactive({
+  username: undefined as string | undefined,
+  nickname: undefined as string | undefined,
+})
 
-/** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.username) {
-    conditions.push(`用户名:${props.searchParams.username}`)
+  if (formData.username) {
+    conditions.push(`用户名:${formData.username}`)
   }
-  if (props.searchParams?.nickname) {
-    conditions.push(`昵称:${props.searchParams.nickname}`)
+  if (formData.nickname) {
+    conditions.push(`昵称:${formData.nickname}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索用户'
 })
 
-const formData = reactive<SearchFormData>({
-  username: undefined,
-  nickname: undefined,
-})
-
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.username = props.searchParams.username
-    formData.nickname = props.searchParams.nickname
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false

src/pages-system/user/index.vue

@@ -8,11 +8,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" />
 
     <!-- 用户列表 -->
     <view class="p-24rpx">
@@ -79,11 +75,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { User } from '@/api/system/user'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getUserPage } from '@/api/system/user'
 import { useAccess } from '@/hooks/useAccess'
 import { navigateBackPlus } from '@/utils'
@@ -102,11 +97,9 @@ const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<User[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  username: undefined as string | undefined,
-  nickname: undefined as string | undefined,
 })
 
 /** 返回上一页 */
@@ -118,21 +111,23 @@ function handleBack() {
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const data = await getUserPage(queryParams)
+    const data = await getUserPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.username = data?.username
-  queryParams.nickname = data?.nickname
-  queryParams.pageNo = 1
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = [] // 清空列表
   getList()
 }
@@ -147,7 +142,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 

src/pages/bpm/components/copy-list.vue

@@ -1,11 +1,7 @@
 <template>
   <view>
     <!-- 搜索组件 -->
-    <CopySearchForm
-      :search-params="queryParams"
-      @search="handleSearch"
-      @reset="handleReset"
-    />
+    <CopySearchForm @search="handleSearch" @reset="handleReset" />
 
     <view class="bpm-list">
       <view
@@ -54,15 +50,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { CopySearchFormData } from './copy-search-form.vue'
 import type { ProcessInstanceCopy } from '@/api/bpm/processInstance'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { getProcessInstanceCopyPage } from '@/api/bpm/processInstance'
-import { formatDateRange, formatDateTime } from '@/utils/date'
+import { formatDateTime } from '@/utils/date'
 import CopySearchForm from './copy-search-form.vue'
-import './index.scss'
+import '../styles/index.scss'
 
 const props = defineProps<{
   active?: boolean
@@ -72,25 +67,21 @@ const total = ref(0)
 const list = ref<ProcessInstanceCopy[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
 const isFirstLoad = ref(true)
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  processInstanceName: undefined as string | undefined,
-  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 查询列表 */
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const params: any = { ...queryParams }
-    params.createTime = formatDateRange(queryParams.createTime)
-    const data = await getProcessInstanceCopyPage(params)
+    const data = await getProcessInstanceCopyPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
@@ -100,15 +91,17 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 
 /** 搜索 */
-function handleSearch(data?: CopySearchFormData) {
-  queryParams.processInstanceName = data?.processInstanceName
-  queryParams.createTime = data?.createTime ?? [undefined, undefined]
-  queryParams.pageNo = 1
+function handleSearch(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = []
   getList()
 }
@@ -131,7 +124,7 @@ onReachBottom(() => {
 /** 监听激活状态，刷新数据 */
 watch(() => props.active, (val) => {
   if (val && !isFirstLoad.value) {
-    queryParams.pageNo = 1
+    queryParams.value.pageNo = 1
     list.value = []
     getList()
   }

src/pages/bpm/components/copy-search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -92,43 +92,32 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
-import { formatDate } from '@/utils/date'
-
-/** 搜索表单数据 */
-export interface CopySearchFormData {
-  processInstanceName?: string
-  createTime?: [number | undefined, number | undefined]
-}
-
-const props = defineProps<{
-  searchParams?: Partial<CopySearchFormData>
-}>()
+import { computed, reactive, ref } from 'vue'
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
-  search: [data: CopySearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
+const formData = reactive({
+  processInstanceName: undefined as string | undefined,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
+})
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.processInstanceName) {
-    conditions.push(`名称:${props.searchParams.processInstanceName}`)
+  if (formData.processInstanceName) {
+    conditions.push(`名称:${formData.processInstanceName}`)
   }
-  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
-    conditions.push(`时间:${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索抄送任务'
 })
 
-const formData = reactive<CopySearchFormData>({
-  processInstanceName: undefined,
-  createTime: [undefined, undefined],
-})
-
 // 时间选择器状态
 const visibleCreateTime = ref<[boolean, boolean]>([false, false])
 const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
@@ -155,18 +144,13 @@ function handleCreateTime1Cancel() {
   visibleCreateTime.value[1] = false
 }
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.processInstanceName = props.searchParams.processInstanceName
-    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData })
+  emit('search', {
+    ...formData,
+    createTime: formatDateRange(formData.createTime),
+  })
 }
 
 /** 重置 */

src/pages/bpm/components/done-list.vue

@@ -1,11 +1,7 @@
 <template>
   <view>
     <!-- 搜索组件 -->
-    <DoneSearchForm
-      :search-params="queryParams"
-      @search="handleSearch"
-      @reset="handleReset"
-    />
+    <DoneSearchForm @search="handleSearch" @reset="handleReset" />
 
     <view class="bpm-list">
       <view
@@ -52,16 +48,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { DoneSearchFormData } from './done-search-form.vue'
 import type { Task } from '@/api/bpm/task'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { getTaskDonePage } from '@/api/bpm/task'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDateRange, formatDateTime } from '@/utils/date'
+import { formatDateTime } from '@/utils/date'
 import DoneSearchForm from './done-search-form.vue'
-import './index.scss'
+import '../styles/index.scss'
 
 const props = defineProps<{
   active?: boolean
@@ -71,25 +66,21 @@ const total = ref(0)
 const list = ref<Task[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
 const isFirstLoad = ref(true)
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  name: undefined as string | undefined,
-  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 查询列表 */
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const params: any = { ...queryParams }
-    params.createTime = formatDateRange(queryParams.createTime)
-    const data = await getTaskDonePage(params)
+    const data = await getTaskDonePage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
@@ -99,15 +90,17 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 
 /** 搜索 */
-function handleSearch(data?: DoneSearchFormData) {
-  queryParams.name = data?.name
-  queryParams.createTime = data?.createTime ?? [undefined, undefined]
-  queryParams.pageNo = 1
+function handleSearch(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = []
   getList()
 }
@@ -130,7 +123,7 @@ onReachBottom(() => {
 /** 监听激活状态，刷新数据 */
 watch(() => props.active, (val) => {
   if (val && !isFirstLoad.value) {
-    queryParams.pageNo = 1
+    queryParams.value.pageNo = 1
     list.value = []
     getList()
   }

src/pages/bpm/components/done-search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -132,51 +132,38 @@
 <script lang="ts" setup>
 import type { Category } from '@/api/bpm/category'
 import type { ProcessDefinition } from '@/api/bpm/definition'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { getCategorySimpleList } from '@/api/bpm/category'
 import { getProcessDefinitionList } from '@/api/bpm/definition'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDate } from '@/utils/date'
-
-/** 搜索表单数据 */
-export interface DoneSearchFormData {
-  name?: string
-  processDefinitionKey?: string
-  category?: string
-  status: number // -1 表示全部
-  createTime?: [number | undefined, number | undefined]
-}
-
-const props = defineProps<{
-  searchParams?: Partial<DoneSearchFormData>
-}>()
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
-  search: [data: DoneSearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<DoneSearchFormData>({
-  name: undefined,
-  processDefinitionKey: undefined,
-  category: undefined,
-  status: -1,
-  createTime: [undefined, undefined],
+const formData = reactive({
+  name: undefined as string | undefined,
+  processDefinitionKey: undefined as string | undefined,
+  category: undefined as string | undefined,
+  status: -1, // -1 表示全部
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_TASK_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_TASK_STATUS, formData.status)}`)
   }
-  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
-    conditions.push(`时间:${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索已办任务'
 })
@@ -228,21 +215,14 @@ async function getProcessDefinitions() {
   }
 }
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.processDefinitionKey = props.searchParams.processDefinitionKey
-    formData.category = props.searchParams.category
-    formData.status = props.searchParams.status ?? -1
-    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData })
+  emit('search', {
+    ...formData,
+    status: formData.status === -1 ? undefined : formData.status,
+    createTime: formatDateRange(formData.createTime),
+  })
 }
 
 /** 重置 */

src/pages/bpm/components/my-list.vue

@@ -1,11 +1,7 @@
 <template>
   <view>
     <!-- 搜索组件 -->
-    <MySearchForm
-      :search-params="queryParams"
-      @search="handleSearch"
-      @reset="handleReset"
-    />
+    <MySearchForm @search="handleSearch" @reset="handleReset" />
 
     <view class="bpm-list">
       <view
@@ -63,17 +59,16 @@
 </template>
 
 <script lang="ts" setup>
-import type { MySearchFormData } from './my-search-form.vue'
-import {getProcessInstanceCopyPage, ProcessInstance} from '@/api/bpm/processInstance'
+import type { ProcessInstance } from '@/api/bpm/processInstance'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { getProcessInstanceMyPage } from '@/api/bpm/processInstance'
 import { useUserStore } from '@/store'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDateRange, formatDateTime } from '@/utils/date'
+import { formatDateTime } from '@/utils/date'
 import MySearchForm from './my-search-form.vue'
-import './index.scss'
+import '../styles/index.scss'
 
 const props = defineProps<{
   active?: boolean
@@ -87,30 +82,21 @@ const list = ref<ProcessInstance[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
 const isFirstLoad = ref(true)
 
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  name: undefined as string | undefined,
-  createTime: [undefined, undefined] as [number | undefined, number | undefined],
-  status: -1,
-  categoryId: undefined as string | undefined,
 })
 
 /** 查询列表 */
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const params: any = {
-      ...queryParams,
-      status: queryParams.status === -1 ? undefined : queryParams.status,
-    }
-    params.createTime = formatDateRange(queryParams.createTime)
-    const data = await getProcessInstanceMyPage(params)
+    const data = await getProcessInstanceMyPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
@@ -120,17 +106,17 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 
 /** 搜索 */
-function handleSearch(data?: MySearchFormData) {
-  queryParams.name = data?.name
-  queryParams.createTime = data?.createTime ?? [undefined, undefined]
-  queryParams.status = data?.status ?? -1
-  queryParams.categoryId = data?.categoryId
-  queryParams.pageNo = 1
+function handleSearch(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = []
   getList()
 }
@@ -158,7 +144,7 @@ onReachBottom(() => {
 /** 监听激活状态，刷新数据 */
 watch(() => props.active, (val) => {
   if (val && !isFirstLoad.value) {
-    queryParams.pageNo = 1
+    queryParams.value.pageNo = 1
     list.value = []
     getList()
   }

src/pages/bpm/components/my-search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -132,51 +132,38 @@
 <script lang="ts" setup>
 import type { Category } from '@/api/bpm/category'
 import type { ProcessDefinition } from '@/api/bpm/definition'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { getCategorySimpleList } from '@/api/bpm/category'
 import { getProcessDefinitionList } from '@/api/bpm/definition'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDate } from '@/utils/date'
-
-/** 搜索表单数据 */
-export interface MySearchFormData {
-  name?: string
-  processDefinitionId?: string
-  createTime?: [number | undefined, number | undefined]
-  status: number // -1 表示全部
-  categoryId?: string
-}
-
-const props = defineProps<{
-  searchParams?: Partial<MySearchFormData>
-}>()
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
-  search: [data: MySearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<MySearchFormData>({
-  name: undefined,
-  processDefinitionId: undefined,
-  createTime: [undefined, undefined],
-  status: -1,
-  categoryId: undefined,
+const formData = reactive({
+  name: undefined as string | undefined,
+  processDefinitionId: undefined as string | undefined,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
+  status: -1, // -1 表示全部
+  categoryId: undefined as string | undefined,
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, formData.status)}`)
   }
-  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
-    conditions.push(`时间:${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索我的流程'
 })
@@ -228,21 +215,14 @@ async function getProcessDefinitions() {
   }
 }
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.processDefinitionId = props.searchParams.processDefinitionId
-    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
-    formData.status = props.searchParams.status ?? -1
-    formData.categoryId = props.searchParams.categoryId
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData })
+  emit('search', {
+    ...formData,
+    status: formData.status === -1 ? undefined : formData.status,
+    createTime: formatDateRange(formData.createTime),
+  })
 }
 
 /** 重置 */

src/pages/bpm/components/todo-list.vue

@@ -1,11 +1,7 @@
 <template>
   <view>
     <!-- 搜索组件 -->
-    <TodoSearchForm
-      :search-params="queryParams"
-      @search="handleSearch"
-      @reset="handleReset"
-    />
+    <TodoSearchForm @search="handleSearch" @reset="handleReset" />
 
     <view class="bpm-list">
       <view
@@ -63,15 +59,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { TodoSearchFormData } from './todo-search-form.vue'
 import type { Task } from '@/api/bpm/task'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { getTaskTodoPage } from '@/api/bpm/task'
-import { formatDateRange, formatPast } from '@/utils/date'
+import { formatPast } from '@/utils/date'
 import TodoSearchForm from './todo-search-form.vue'
-import './index.scss'
+import '../styles/index.scss'
 
 const props = defineProps<{
   active?: boolean
@@ -81,25 +76,21 @@ const total = ref(0)
 const list = ref<Task[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
 const isFirstLoad = ref(true)
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  name: undefined as string | undefined,
-  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 查询列表 */
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const params: any = { ...queryParams }
-    params.createTime = formatDateRange(queryParams.createTime)
-    const data = await getTaskTodoPage(params)
+    const data = await getTaskTodoPage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
@@ -109,15 +100,17 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 
 /** 搜索 */
-function handleSearch(data?: TodoSearchFormData) {
-  queryParams.name = data?.name
-  queryParams.createTime = data?.createTime ?? [undefined, undefined]
-  queryParams.pageNo = 1
+function handleSearch(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
   list.value = []
   getList()
 }
@@ -150,7 +143,7 @@ onReachBottom(() => {
 /** 监听激活状态，刷新数据 */
 watch(() => props.active, (val) => {
   if (val && !isFirstLoad.value) {
-    queryParams.pageNo = 1
+    queryParams.value.pageNo = 1
     list.value = []
     getList()
   }

src/pages/bpm/components/todo-search-form.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索框入口 -->
   <wd-search
-    :placeholder="searchPlaceholder"
+    :placeholder="placeholder"
     :hide-cancel="true"
     disabled
     @click="visible = true"
@@ -132,51 +132,38 @@
 <script lang="ts" setup>
 import type { Category } from '@/api/bpm/category'
 import type { ProcessDefinition } from '@/api/bpm/definition'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { getCategorySimpleList } from '@/api/bpm/category'
 import { getProcessDefinitionList } from '@/api/bpm/definition'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDate } from '@/utils/date'
-
-/** 搜索表单数据 */
-export interface TodoSearchFormData {
-  name?: string
-  processDefinitionKey?: string
-  category?: string
-  status: number // -1 表示全部
-  createTime?: [number | undefined, number | undefined]
-}
-
-const props = defineProps<{
-  searchParams?: Partial<TodoSearchFormData>
-}>()
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
-  search: [data: TodoSearchFormData]
+  search: [data: Record<string, any>]
   reset: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<TodoSearchFormData>({
-  name: undefined,
-  processDefinitionKey: undefined,
-  category: undefined,
-  status: -1,
-  createTime: [undefined, undefined],
+const formData = reactive({
+  name: undefined as string | undefined,
+  processDefinitionKey: undefined as string | undefined,
+  category: undefined as string | undefined,
+  status: -1, // -1 表示全部
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.name) {
-    conditions.push(`名称:${props.searchParams.name}`)
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
   }
-  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
-    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, props.searchParams.status)}`)
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, formData.status)}`)
   }
-  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
-    conditions.push(`时间:${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索待办任务'
 })
@@ -228,21 +215,14 @@ async function getProcessDefinitions() {
   }
 }
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.name = props.searchParams.name
-    formData.processDefinitionKey = props.searchParams.processDefinitionKey
-    formData.category = props.searchParams.category
-    formData.status = props.searchParams.status ?? -1
-    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData })
+  emit('search', {
+    ...formData,
+    status: formData.status === -1 ? undefined : formData.status,
+    createTime: formatDateRange(formData.createTime),
+  })
 }
 
 /** 重置 */

src/pages/message/components/search-form.vue

@@ -3,7 +3,7 @@
   <view class="flex items-center bg-white pr-30rpx">
     <view class="flex-1">
       <wd-search
-        :placeholder="searchPlaceholder"
+        :placeholder="placeholder"
         :hide-cancel="true"
         disabled
         @click="visible = true"
@@ -34,10 +34,10 @@
           <wd-radio :value="-1">
             全部
           </wd-radio>
-          <wd-radio :value="1">
+          <wd-radio :value="true">
             已读
           </wd-radio>
-          <wd-radio :value="0">
+          <wd-radio :value="false">
             未读
           </wd-radio>
         </wd-radio-group>
@@ -105,41 +105,31 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
-import { formatDate } from '@/utils/date'
-
-/** 搜索表单数据 */
-export interface SearchFormData {
-  readStatus: number // -1 表示全部, 0 未读, 1 已读
-  createTime?: [number | undefined, number | undefined]
-}
-
-const props = defineProps<{
-  searchParams?: Partial<SearchFormData> // 初始搜索参数
-}>()
+import { computed, reactive, ref } from 'vue'
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
-  search: [data: SearchFormData]
+  search: [data: Record<string, any>]
   reset: []
   readAll: []
 }>()
 
 const visible = ref(false)
-const formData = reactive<SearchFormData>({
-  readStatus: -1,
-  createTime: [undefined, undefined],
+const formData = reactive({
+  readStatus: -1 as -1 | boolean, // -1 表示全部, true 已读, false 未读
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
-const searchPlaceholder = computed(() => {
+const placeholder = computed(() => {
   const conditions: string[] = []
-  if (props.searchParams?.readStatus === 1) {
+  if (formData.readStatus === true) {
     conditions.push('已读')
-  } else if (props.searchParams?.readStatus === 0) {
+  } else if (formData.readStatus === false) {
     conditions.push('未读')
   }
-  if (props.searchParams?.createTime?.[0] && props.searchParams?.createTime?.[1]) {
-    conditions.push(`${formatDate(props.searchParams.createTime[0])}~${formatDate(props.searchParams.createTime[1])}`)
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
   }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索消息'
 })
@@ -175,18 +165,13 @@ function handleCreateTime1Cancel() {
   visibleCreateTime.value[1] = false
 }
 
-/** 监听弹窗打开，同步外部参数 */
-watch(visible, (val) => {
-  if (val && props.searchParams) {
-    formData.readStatus = props.searchParams.readStatus ?? -1
-    formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
-  }
-})
-
 /** 搜索 */
 function handleSearch() {
   visible.value = false
-  emit('search', { ...formData })
+  emit('search', {
+    readStatus: formData.readStatus === -1 ? undefined : formData.readStatus,
+    createTime: formatDateRange(formData.createTime),
+  })
 }
 
 /** 重置 */

src/pages/message/index.vue

@@ -7,12 +7,7 @@
     />
 
     <!-- 搜索组件 -->
-    <SearchForm
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-      @read-all="handleReadAll"
-    />
+    <SearchForm @search="handleQuery" @reset="handleReset" @read-all="handleReadAll" />
 
     <!-- 消息列表 -->
     <view class="p-24rpx">
@@ -81,11 +76,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { SearchFormData } from './components/search-form.vue'
 import type { NotifyMessage } from '@/api/system/notify'
 import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useToast } from 'wot-design-uni'
 import {
   getMyNotifyMessagePage,
@@ -94,7 +88,7 @@ import {
 } from '@/api/system/notify'
 import { getDictLabel } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
-import { formatDateRange, formatDateTime } from '@/utils/date'
+import { formatDateTime } from '@/utils/date'
 import DetailPopup from './components/detail-popup.vue'
 import SearchForm from './components/search-form.vue'
 
@@ -109,11 +103,9 @@ const toast = useToast()
 const total = ref(0)
 const list = ref<NotifyMessage[]>([])
 const loadMoreState = ref<LoadMoreState>('loading')
-const queryParams = reactive({
+const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
-  readStatus: -1 as number, // -1 表示全部
-  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 const detailPopupRef = ref<InstanceType<typeof DetailPopup>>() // 详情弹窗
 
@@ -121,29 +113,24 @@ const detailPopupRef = ref<InstanceType<typeof DetailPopup>>() // 详情弹窗
 async function getList() {
   loadMoreState.value = 'loading'
   try {
-    const params: any = { ...queryParams }
-    if (queryParams.readStatus !== -1) {
-      params.readStatus = queryParams.readStatus === 1
-    } else {
-      delete params.readStatus
-    }
-    params.createTime = formatDateRange(queryParams.createTime)
-    const data = await getMyNotifyMessagePage(params)
+    const data = await getMyNotifyMessagePage(queryParams.value)
     list.value = [...list.value, ...data.list]
     total.value = data.total
     loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
   } catch {
-    queryParams.pageNo = queryParams.pageNo > 1 ? queryParams.pageNo - 1 : 1
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
     loadMoreState.value = 'error'
   }
 }
 
 /** 搜索按钮操作 */
-function handleQuery(data?: SearchFormData) {
-  queryParams.readStatus = data?.readStatus ?? -1
-  queryParams.createTime = data?.createTime ?? [undefined, undefined]
-  queryParams.pageNo = 1
-  list.value = [] // 清空列表
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
   getList()
 }
 
@@ -157,7 +144,7 @@ function loadMore() {
   if (loadMoreState.value === 'finished') {
     return
   }
-  queryParams.pageNo++
+  queryParams.value.pageNo++
   getList()
 }
 
@@ -176,7 +163,7 @@ async function handleReadOne(item: NotifyMessage, showToast = true) {
   await updateNotifyMessageRead(item.id)
   // 更新本地状态
   item.readStatus = true
-  item.readTime = new Date().toISOString()
+  item.readTime = new Date()
   if (showToast) {
     toast.success('已标记为已读')
   }
@@ -194,7 +181,7 @@ function handleReadAll() {
       await updateAllNotifyMessageRead()
       toast.success('全部已读成功')
       // 刷新列表
-      queryParams.pageNo = 1
+      queryParams.value.pageNo = 1
       list.value = []
       await getList()
     },

src/types/auto-import.d.ts

@@ -13,9 +13,15 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const effectScope: typeof import('vue')['effectScope']
+  const getBoolDictOptions: typeof import('../hooks/useDict')['getBoolDictOptions']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
+  const getDictLabel: typeof import('../hooks/useDict')['getDictLabel']
+  const getDictObj: typeof import('../hooks/useDict')['getDictObj']
+  const getDictOptions: typeof import('../hooks/useDict')['getDictOptions']
+  const getIntDictOptions: typeof import('../hooks/useDict')['getIntDictOptions']
+  const getStrDictOptions: typeof import('../hooks/useDict')['getStrDictOptions']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
   const isProxy: typeof import('vue')['isProxy']
@@ -77,6 +83,7 @@ declare global {
   const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
+  const useAccess: typeof import('../hooks/useAccess')['default']
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
@@ -97,6 +104,9 @@ declare global {
   // @ts-ignore
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
+  // @ts-ignore
+  export type { DictDataType, NumberDictDataType, StringDictDataType } from '../hooks/useDict'
+  import('../hooks/useDict')
 }
 
 // for vue template auto import
@@ -111,9 +121,15 @@ declare module 'vue' {
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getBoolDictOptions: UnwrapRef<typeof import('../hooks/useDict')['getBoolDictOptions']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
+    readonly getDictLabel: UnwrapRef<typeof import('../hooks/useDict')['getDictLabel']>
+    readonly getDictObj: UnwrapRef<typeof import('../hooks/useDict')['getDictObj']>
+    readonly getDictOptions: UnwrapRef<typeof import('../hooks/useDict')['getDictOptions']>
+    readonly getIntDictOptions: UnwrapRef<typeof import('../hooks/useDict')['getIntDictOptions']>
+    readonly getStrDictOptions: UnwrapRef<typeof import('../hooks/useDict')['getStrDictOptions']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
@@ -175,6 +191,7 @@ declare module 'vue' {
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAccess: UnwrapRef<typeof import('../hooks/useAccess')['default']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>