优化表格组件,新增过滤功能,调整数据获取逻辑,更新相关页面及路由
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user