feat: user search form

This commit is contained in:
dap
2024-09-24 10:35:49 +08:00
parent 226dfff97f
commit 741915e5cd
2 changed files with 86 additions and 17 deletions

View File

@@ -6,9 +6,11 @@ import { $t } from '@vben/locales';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter';
import { userExport } from '#/api/system/user';
import { downloadExcel } from '#/utils/file/download';
import { querySchema } from './data';
import DeptTree from './dept-tree.vue';
import userDrawer from './user-drawer.vue';
import userImportModal from './user-import-modal.vue';
@@ -37,6 +39,25 @@ function handleAdd() {
userDrawerApi.setData({ update: false });
userDrawerApi.open();
}
const [QueryForm] = useVbenForm({
// 默认展开
collapsed: false,
// 所有表单项共用,可单独在表单内覆盖
commonConfig: {
// 所有表单项
componentProps: {
class: 'w-full',
},
},
schema: querySchema(),
// 是否可展开
showCollapseButton: true,
submitButtonOptions: {
text: '查询',
},
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
});
</script>
<template>
@@ -47,23 +68,26 @@ function handleAdd() {
class="w-[260px]"
@select="handleSelect"
/>
<div class="flex gap-[8px]">
<a-button
v-access:code="['system:user:export']"
@click="downloadExcel(userExport, '用户管理', {})"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button v-access:code="['system:user:import']" @click="handleImport">
{{ $t('pages.common.import') }}
</a-button>
<a-button
type="primary"
v-access:code="['system:user:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
<div class="flex w-full flex-col gap-[8px]">
<QueryForm />
<div class="flex justify-end gap-[8px]">
<a-button
v-access:code="['system:user:export']"
@click="downloadExcel(userExport, '用户管理', {})"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button v-access:code="['system:user:import']" @click="handleImport">
{{ $t('pages.common.import') }}
</a-button>
<a-button
type="primary"
v-access:code="['system:user:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</div>
</div>
<UserImpotModal />
<UserDrawer />