2
0

fix:终端设备界面搜索栏重置功能修复

This commit is contained in:
zhongzm
2025-02-14 11:59:42 +08:00
parent f587e4f673
commit bf149afbbb
2 changed files with 34 additions and 22 deletions

View File

@@ -58,7 +58,7 @@ import { useElementSize } from '@vueuse/core';
import { fetchTerminalList } from '@/service/api/auth';
import { Card as ACard, Table as ATable, Tag as ATag } from 'ant-design-vue';
import TerminalSearch from './modules/terminal-search.vue';
import { formatStorage, formatTime } from '@/utils/units';
import { formatStorage } from '@/utils/units';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
@@ -115,7 +115,6 @@ const {
getData,
mobilePagination,
searchParams,
resetSearchParams
} = useTable({
apiFn: async (params: Api.Device.TerminalDeviceParams) => {
try {
@@ -256,9 +255,19 @@ const handleSearch = () => {
getData();
};
// 添加重置处理函数
// 修改重置处理函数
const handleReset = () => {
resetSearchParams();
// 保存当前的 pageSize
const currentPageSize = searchParams.pageSize;
// 重置搜索参数
searchParams.clientName = '';
searchParams.clientDeviceType = '';
searchParams.clientMac = '';
searchParams.pageNum = 1;
searchParams.pageSize = currentPageSize;
// 重新获取数据
getData();
};
</script>

View File

@@ -3,25 +3,25 @@
<AForm layout="inline">
<AFormItem :label="t('page.terminal.name')">
<AInput
v-model:value="model.clientName"
v-model:value="formModel.clientName"
:placeholder="t('page.terminal.pledevice')"
allow-clear
class="w-200px"
@pressEnter="search"
/>
</AFormItem>
<!-- <AFormItem label="设备类型">-->
<!-- <AInput-->
<!-- v-model:value="model.clientDeviceType"-->
<!-- placeholder="请输入设备类型"-->
<!-- allow-clear-->
<!-- class="w-200px"-->
<!-- @pressEnter="search"-->
<!-- />-->
<!-- </AFormItem>-->
<!-- <AFormItem label="设备类型">-->
<!-- <AInput-->
<!-- v-model:value="model.clientDeviceType"-->
<!-- placeholder="请输入设备类型"-->
<!-- allow-clear-->
<!-- class="w-200px"-->
<!-- @pressEnter="search"-->
<!-- />-->
<!-- </AFormItem>-->
<AFormItem :label="t('page.terminal.mac')">
<AInput
v-model:value="model.clientMac"
v-model:value="formModel.clientMac"
:placeholder="t('page.terminal.plemac')"
allow-clear
class="w-200px"
@@ -51,7 +51,10 @@
<script setup lang="ts">
import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
const { t } = useI18n();
interface Props {
model: {
clientName?: string;
@@ -69,18 +72,18 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits(['update:model', 'search', 'reset']);
// 使用计算属性来处理双向绑定
const formModel = computed({
get: () => props.model,
set: (val) => emit('update:model', val)
});
const search = () => {
emit('search');
};
const reset = () => {
emit('update:model', {
...props.model,
clientName: '',
clientDeviceType: '',
clientMac: '',
pageNum: 1
});
// 只触发重置事件
emit('reset');
};
</script>