优化表格组件,新增过滤功能,调整数据获取逻辑,更新相关页面及路由

This commit is contained in:
2025-12-17 23:39:33 +07:00
parent 63ca414f2b
commit df876ffc3c
3 changed files with 64 additions and 17 deletions

View File

@@ -14,16 +14,21 @@ import type { TableColumnCheck } from '~/packages/hooks/src';
const route = useRoute();
const { t } = useI18n();
const title = t(route.meta.i18nKey as string);
const props = defineProps<{
fetchData: TableFetchData;
columns: TableBaseColumns;
showHeaderOperation?: boolean;
filterColumns?: TableFilterColumns;
}>();
const props = withDefaults(
defineProps<{
fetchData: TableFetchData;
columns: TableBaseColumns;
showHeaderOperation?: boolean;
filterColumns?: TableFilterColumns;
}>(),
{
filterColumns: () => []
}
);
const emit = defineEmits<{
(e: 'add'): void;
(e: 'refresh'): void;
(e: 'delete'): void;
}>();
@@ -86,7 +91,7 @@ defineExpose({
<template>
<div class="space-y-5">
<TableFilter :columns="filterColumns" @confirm="handleSearch" />
<TableFilter v-if="filterColumns.length > 0" :columns="filterColumns" @confirm="handleSearch" />
<div class="rounded-lg bg-white p-5 space-y-5">
<TableHeaderOperation

View File

@@ -1,19 +1,28 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { NInput } from 'naive-ui';
import type { TableFilterColumns } from '.';
defineProps<{
const props = defineProps<{
columns?: TableFilterColumns;
}>();
const emit = defineEmits<{
(e: 'confirm', form: Record<string, any>): void;
}>();
const inlineForm: Record<string, any> = {};
const form = ref<Record<string, any>>({});
onMounted(() => {
props.columns?.forEach(col => {
inlineForm[col.key] = null;
form.value[col.key] = null;
});
});
function handleReset() {
form.value = {};
form.value = { ...inlineForm };
emit('confirm', form.value);
}
@@ -30,7 +39,12 @@ function handleConfirm() {
<NGrid x-gap="20" :cols="4">
<NGi v-for="col in columns" :key="col.key">
<NFormItem :label="col.title" :path="col.key">
<component :is="col.component || NInput" v-model:value="form[col.key]" v-bind="col.componentProps" />
<component
:is="col.component || NInput"
:value="form[col.key]"
v-bind="col.componentProps"
@update:value="(val: any) => (form[col.key] = val)"
/>
</NFormItem>
</NGi>
<NGi>