From 4f35b17b0378cc3534c380bc3b8de5db23b463e2 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 14 Feb 2025 14:48:46 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E8=AF=9D=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2=E6=90=9C=E7=B4=A2=E6=A0=8F=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=9F=E8=83=BD=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user-center/cdr/index.vue           | 19 ++++++-
 .../user-center/cdr/modules/cdr-search.vue    | 53 +++++++++----------
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/views/user-center/cdr/index.vue b/src/views/user-center/cdr/index.vue
index f1c5615..12f1bbe 100644
--- a/src/views/user-center/cdr/index.vue
+++ b/src/views/user-center/cdr/index.vue
@@ -66,7 +66,7 @@ const scrollConfig = computed(() => ({
   x: 1200
 }));
 
-const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams } = useTable({
   apiFn: doGetCdrInfo,
   immediate: true,
   apiParams: {
@@ -164,6 +164,21 @@ const handleTableChange = (
   searchParams.pageSize = pagination.pageSize;
   getData();
 };
+const handleReset = () => {
+  // 保存当前的 pageSize
+  const currentPageSize = searchParams.pageSize;
+
+  // 重置搜索参数
+  searchParams.userName = '';
+  searchParams.clientName = '';
+  searchParams.endTimeS = undefined;
+  searchParams.endTimeE = undefined;
+  searchParams.pageNum = 1;
+  searchParams.pageSize = currentPageSize;
+
+  // 重新获取数据
+  getData();
+};
 </script>
 
 <template>
@@ -171,7 +186,7 @@ const handleTableChange = (
     <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
       <CdrSearch
         v-model:model="searchParams"
-        @reset="resetSearchParams"
+        @reset="handleReset"
         @search="getData"
       />
       <ACard
diff --git a/src/views/user-center/cdr/modules/cdr-search.vue b/src/views/user-center/cdr/modules/cdr-search.vue
index 8ca8f02..56f3fc0 100644
--- a/src/views/user-center/cdr/modules/cdr-search.vue
+++ b/src/views/user-center/cdr/modules/cdr-search.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { Form, DatePicker } from 'ant-design-vue';
-import type { FormInstance } from 'ant-design-vue';
+import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard, DatePicker } from 'ant-design-vue';
 import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
 import type { Dayjs } from 'dayjs';
+
 const { t } = useI18n();
+const { RangePicker: ARangePicker } = DatePicker;
 
 interface SearchModel {
   pageNum: number;
@@ -28,18 +29,12 @@ const props = withDefaults(defineProps<{
   })
 });
 
-const emit = defineEmits<{
-  'update:model': [value: SearchModel];
-  'search': [];
-  'reset': [];
-}>();
-
-const formRef = ref<FormInstance>();
-const { resetFields } = Form.useForm(props.model);
+const emit = defineEmits(['update:model', 'search', 'reset']);
 
+// 使用计算属性来处理双向绑定
 const formModel = computed({
   get: () => props.model,
-  set: (val: SearchModel) => emit('update:model', val)
+  set: (val) => emit('update:model', val)
 });
 
 const dateRange = ref<[Dayjs, Dayjs] | null>(null);
@@ -54,30 +49,28 @@ const handleDateRangeChange = (dates: [Dayjs, Dayjs] | null) => {
   }
 };
 
-function handleReset() {
-  resetFields();
-  dateRange.value = null;
-  emit('reset');
-}
-
-function handleSearch() {
+const search = () => {
   emit('search');
-}
+};
+
+const reset = () => {
+  // 重置日期范围选择器
+  dateRange.value = null;
+  // 触发重置事件
+  emit('reset');
+};
 </script>
 
 <template>
   <ACard :bordered="false" class="search-card">
-    <AForm
-      ref="formRef"
-      :model="formModel"
-      layout="inline"
-      class="flex flex-wrap gap-16px items-center"
-    >
+    <AForm layout="inline">
       <AFormItem :label="t('page.cdr.username')">
         <AInput
           v-model:value="formModel.userName"
           :placeholder="t('page.cdr.pleusername')"
           allow-clear
+          class="w-200px"
+          @pressEnter="search"
         />
       </AFormItem>
       <AFormItem :label="t('page.cdr.clientname')">
@@ -85,6 +78,8 @@ function handleSearch() {
           v-model:value="formModel.clientName"
           :placeholder="t('page.cdr.pleclientname')"
           allow-clear
+          class="w-200px"
+          @pressEnter="search"
         />
       </AFormItem>
       <AFormItem :label="t('page.cdr.timerange')">
@@ -99,15 +94,15 @@ function handleSearch() {
           @change="handleDateRangeChange"
         />
       </AFormItem>
-      <AFormItem class="flex-1 justify-end">
+      <AFormItem>
         <ASpace>
-          <AButton type="primary" ghost @click="handleSearch">
+          <AButton type="primary" ghost @click="search">
             <template #icon>
               <icon-mdi-search />
             </template>
             {{ t('page.cdr.search') }}
           </AButton>
-          <AButton @click="handleReset">
+          <AButton @click="reset">
             <template #icon>
               <icon-mdi-refresh />
             </template>