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