fix:话单管理界面搜索栏重置功能修复
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user