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
}));
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

View File

@@ -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>