feat(@vben/common-ui): 添加部门权限功能
This commit is contained in:
parent
d9383868d6
commit
38c01e8c73
@ -65,49 +65,43 @@ export function useSchema(): VbenFormSchema[] {
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
maxLength: 50,
|
||||
rows: 3,
|
||||
showCount: true,
|
||||
},
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
rules: z.string().optional(),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// export function useGridFormSchema(): VbenFormSchema[] {
|
||||
// return [
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'name',
|
||||
// label: '部门名称',
|
||||
// },
|
||||
// {
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// allowClear: true,
|
||||
// options: [
|
||||
// { label: $t('common.enabled'), value: true },
|
||||
// { label: $t('common.disabled'), value: false },
|
||||
// ],
|
||||
// },
|
||||
// fieldName: 'enable',
|
||||
// label: '状态',
|
||||
// },
|
||||
// // {
|
||||
// // component: 'Input',
|
||||
// // fieldName: 'remark',
|
||||
// // label: '备注',
|
||||
// // },
|
||||
// // {
|
||||
// // component: 'RangePicker',
|
||||
// // fieldName: 'createTime',
|
||||
// // label: '创建时间',
|
||||
// // },
|
||||
// ];
|
||||
// }
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '部门名称',
|
||||
},
|
||||
// {
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// allowClear: true,
|
||||
// options: [
|
||||
// { label: $t('common.enabled'), value: true },
|
||||
// { label: $t('common.disabled'), value: false },
|
||||
// ],
|
||||
// },
|
||||
// fieldName: 'enable',
|
||||
// label: '状态',
|
||||
// },
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'remark',
|
||||
// label: '备注',
|
||||
// },
|
||||
// {
|
||||
// component: 'RangePicker',
|
||||
// fieldName: 'createTime',
|
||||
// label: '创建时间',
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表格列配置
|
||||
@ -158,6 +152,10 @@ export function useColumns(
|
||||
code: 'append',
|
||||
text: '新增下级',
|
||||
},
|
||||
{
|
||||
code: 'auth',
|
||||
text: '权限',
|
||||
},
|
||||
'edit', // 默认的编辑按钮
|
||||
{
|
||||
code: 'delete', // 默认的删除按钮
|
||||
@ -176,3 +174,23 @@ export function useColumns(
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useAuthColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
type: 'checkbox',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '名称',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
minWidth: 100,
|
||||
title: '备注',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@ -15,7 +15,8 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getAllDeptTree, removeDept } from '#/api';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useColumns } from './data';
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import AuthForm from './modules/auth-form.vue';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
@ -23,6 +24,11 @@ const [FormModal, formModalApi] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const [AuthFormModal, authFormModalApi] = useVbenModal({
|
||||
connectedComponent: AuthForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* 编辑部门
|
||||
* @param row
|
||||
@ -78,6 +84,10 @@ function onActionClick({ code, row }: OnActionClickParams<DeptApi.Dept>) {
|
||||
onAppend(row);
|
||||
break;
|
||||
}
|
||||
case 'auth': {
|
||||
authFormModalApi.open();
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
onDelete(row);
|
||||
break;
|
||||
@ -90,10 +100,10 @@ function onActionClick({ code, row }: OnActionClickParams<DeptApi.Dept>) {
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
// formOptions: {
|
||||
// fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
// schema: useGridFormSchema(),
|
||||
// },
|
||||
formOptions: {
|
||||
// fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridEvents: {},
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick),
|
||||
@ -136,6 +146,7 @@ function refreshGrid() {
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormModal @success="refreshGrid" />
|
||||
<AuthFormModal @success="refreshGrid" />
|
||||
<Grid table-title="部门列表">
|
||||
<template #toolbar-tools>
|
||||
<Button
|
||||
|
||||
63
apps/web-antd/src/views/dept/modules/auth-form.vue
Normal file
63
apps/web-antd/src/views/dept/modules/auth-form.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { useVbenVxeGrid } from '@vben/plugins/vxe-table';
|
||||
|
||||
import { getAllDeptTree } from '#/api';
|
||||
|
||||
import { useAuthColumns } from '../data';
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
const formData = ref();
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
if (!formData.value) return;
|
||||
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = gridApi.grid.getCheckboxRecords();
|
||||
emits('success');
|
||||
modalApi.close();
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridEvents: {},
|
||||
gridOptions: {
|
||||
columns: useAuthColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async (_params) => {
|
||||
const res = await getAllDeptTree(0);
|
||||
return {
|
||||
items: res,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbarConfig: {
|
||||
export: false,
|
||||
},
|
||||
} as VxeTableGridOptions,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal title="权限" class="flex flex-col">
|
||||
<Grid />
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -10,7 +10,7 @@ import type { UserApi } from '#/api';
|
||||
import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
import { Button, message, Modal } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
@ -166,8 +166,8 @@ function onCreate() {
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<ResetPasswordModal />
|
||||
<FormDrawer />
|
||||
<ResetPasswordModal @success="onRefresh" />
|
||||
<FormDrawer @success="onRefresh" />
|
||||
<Grid table-title="用户列表">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
|
||||
@ -39,7 +39,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal title="重置密码">
|
||||
<Modal title="重置密码" class="flex flex-col">
|
||||
<Input.Password
|
||||
class="my-4"
|
||||
placeholder="请输入密码"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user