2
0

fix:话单管理界面搜索栏重置功能修复

This commit is contained in:
zhongzm
2025-02-14 14:48:46 +08:00
parent 410b6c40cb
commit 4f35b17b03
2 changed files with 41 additions and 31 deletions

View File

@@ -66,7 +66,7 @@ const scrollConfig = computed(() => ({
x: 1200 x: 1200
})); }));
const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({ const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams } = useTable({
apiFn: doGetCdrInfo, apiFn: doGetCdrInfo,
immediate: true, immediate: true,
apiParams: { apiParams: {
@@ -164,6 +164,21 @@ const handleTableChange = (
searchParams.pageSize = pagination.pageSize; searchParams.pageSize = pagination.pageSize;
getData(); 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> </script>
<template> <template>
@@ -171,7 +186,7 @@ const handleTableChange = (
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"> <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<CdrSearch <CdrSearch
v-model:model="searchParams" v-model:model="searchParams"
@reset="resetSearchParams" @reset="handleReset"
@search="getData" @search="getData"
/> />
<ACard <ACard

View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from '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 { Form, DatePicker } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
const { t } = useI18n(); const { t } = useI18n();
const { RangePicker: ARangePicker } = DatePicker;
interface SearchModel { interface SearchModel {
pageNum: number; pageNum: number;
@@ -28,18 +29,12 @@ const props = withDefaults(defineProps<{
}) })
}); });
const emit = defineEmits<{ const emit = defineEmits(['update:model', 'search', 'reset']);
'update:model': [value: SearchModel];
'search': [];
'reset': [];
}>();
const formRef = ref<FormInstance>();
const { resetFields } = Form.useForm(props.model);
// 使用计算属性来处理双向绑定
const formModel = computed({ const formModel = computed({
get: () => props.model, get: () => props.model,
set: (val: SearchModel) => emit('update:model', val) set: (val) => emit('update:model', val)
}); });
const dateRange = ref<[Dayjs, Dayjs] | null>(null); const dateRange = ref<[Dayjs, Dayjs] | null>(null);
@@ -54,30 +49,28 @@ const handleDateRangeChange = (dates: [Dayjs, Dayjs] | null) => {
} }
}; };
function handleReset() { const search = () => {
resetFields();
dateRange.value = null;
emit('reset');
}
function handleSearch() {
emit('search'); emit('search');
} };
const reset = () => {
// 重置日期范围选择器
dateRange.value = null;
// 触发重置事件
emit('reset');
};
</script> </script>
<template> <template>
<ACard :bordered="false" class="search-card"> <ACard :bordered="false" class="search-card">
<AForm <AForm layout="inline">
ref="formRef"
:model="formModel"
layout="inline"
class="flex flex-wrap gap-16px items-center"
>
<AFormItem :label="t('page.cdr.username')"> <AFormItem :label="t('page.cdr.username')">
<AInput <AInput
v-model:value="formModel.userName" v-model:value="formModel.userName"
:placeholder="t('page.cdr.pleusername')" :placeholder="t('page.cdr.pleusername')"
allow-clear allow-clear
class="w-200px"
@pressEnter="search"
/> />
</AFormItem> </AFormItem>
<AFormItem :label="t('page.cdr.clientname')"> <AFormItem :label="t('page.cdr.clientname')">
@@ -85,6 +78,8 @@ function handleSearch() {
v-model:value="formModel.clientName" v-model:value="formModel.clientName"
:placeholder="t('page.cdr.pleclientname')" :placeholder="t('page.cdr.pleclientname')"
allow-clear allow-clear
class="w-200px"
@pressEnter="search"
/> />
</AFormItem> </AFormItem>
<AFormItem :label="t('page.cdr.timerange')"> <AFormItem :label="t('page.cdr.timerange')">
@@ -99,15 +94,15 @@ function handleSearch() {
@change="handleDateRangeChange" @change="handleDateRangeChange"
/> />
</AFormItem> </AFormItem>
<AFormItem class="flex-1 justify-end"> <AFormItem>
<ASpace> <ASpace>
<AButton type="primary" ghost @click="handleSearch"> <AButton type="primary" ghost @click="search">
<template #icon> <template #icon>
<icon-mdi-search /> <icon-mdi-search />
</template> </template>
{{ t('page.cdr.search') }} {{ t('page.cdr.search') }}
</AButton> </AButton>
<AButton @click="handleReset"> <AButton @click="reset">
<template #icon> <template #icon>
<icon-mdi-refresh /> <icon-mdi-refresh />
</template> </template>