Compare commits

...

4 Commits

20 changed files with 582 additions and 66 deletions

View File

@ -40,6 +40,10 @@ export namespace UserApi {
confirmPassword: string;
}
export interface PasswordModel {
password: string;
}
export interface RoleCreateRecord {
name: string;
dataScope: string;
@ -95,7 +99,7 @@ export namespace UserApi {
}
export interface UserUpdateRecord {
username?: string;
name?: string;
email?: string;
phone?: string;
address?: string;
@ -115,6 +119,17 @@ export function resetPassword(data: UserApi.PasswordReSetModel) {
return requestClient.patch('/rest/user/self/update-password', data);
}
// 重置密码
export function resetPasswordApi(id: any, data: UserApi.PasswordModel) {
return requestClient.patch(
`/rest/user/${id}/update-password`,
{},
{
params: data,
},
);
}
// 注册用户
export function register(data: UserApi.CreateRecord) {
return requestClient.post('/rest/user/register', data);

View File

@ -11,7 +11,7 @@ const routes: RouteRecordRaw[] = [
icon: MaterPerson,
title: '个人',
order: 5,
authority: ['dashboard'],
authority: ['user'],
},
},
];

View File

@ -1,6 +1,13 @@
import type { RouteRecordRaw } from 'vue-router';
import { EosRole, IconLog, IconSystem, MdiUser, RiDept } from '@vben/icons';
import {
EosRole,
FluentWorkflow,
IconLog,
IconSystem,
MdiUser,
RiDept,
} from '@vben/icons';
const routes: RouteRecordRaw[] = [
{
@ -50,7 +57,17 @@ const routes: RouteRecordRaw[] = [
meta: {
icon: IconLog,
title: '系统日志',
authority: ['system'],
authority: ['system:operationLog'],
},
},
{
name: 'workflow',
path: '/system/workflow',
component: () => import('#/views/workflow/list.vue'),
meta: {
icon: FluentWorkflow,
title: '工作流管理',
authority: ['system:workflow'],
},
},
],

View File

@ -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: '创建时间',
// },
];
}
/**
*
@ -157,10 +151,20 @@ export function useColumns(
{
code: 'append',
text: '新增下级',
permission: 'system:dept:create',
},
// {
// code: 'auth',
// text: '工作流',
// },
{
code: 'edit',
text: '修改',
permission: 'system:dept:update',
},
'edit', // 默认的编辑按钮
{
code: 'delete', // 默认的删除按钮
permission: 'system:dept:delete',
disabled: (row: DeptApi.Dept) => {
return !!(row.children && row.children.length > 0);
},
@ -176,3 +180,23 @@ export function useColumns(
},
];
}
// export function useAuthColumns(): VxeTableGridOptions['columns'] {
// return [
// {
// field: 'id',
// type: 'checkbox',
// width: 100,
// },
// {
// field: 'name',
// title: '名称',
// width: 200,
// },
// {
// field: 'type',
// minWidth: 100,
// title: '类型',
// },
// ];
// }

View File

@ -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: {
formOptions: {
// fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
// schema: useGridFormSchema(),
// },
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

View 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>

View File

@ -80,7 +80,14 @@ async function onDelete() {
<FormDrawer />
<Grid table-title="用户列表">
<template #toolbar-tools>
<Button type="primary" @click="onDelete" danger> 批量删除 </Button>
<Button
type="primary"
@click="onDelete"
danger
v-access:code="'system:log:delete'"
>
批量删除
</Button>
</template>
<template #makeTime="{ row }">
{{ dayjs(row.makeTime).format('YYYY-MM-DD HH:mm') }}

View File

@ -22,7 +22,7 @@ const { userInfo } = toRefs(props);
//
const handleSubmit = async () => {
const res = await selfUpdate({
username: userInfo.value.username,
name: userInfo.value.name,
phone: userInfo.value.phone,
email: userInfo.value.email,
address: userInfo.value.address,
@ -51,7 +51,7 @@ const handleSubmit = async () => {
style="max-width: 500px; margin: 0 auto"
>
<Form.Item label="用户名">
<Input v-model:value="userInfo.username" />
<Input v-model:value="userInfo.name" />
</Form.Item>
<Form.Item label="邮箱" name="email">
<Input v-model:value="userInfo.email" />

View File

@ -120,6 +120,18 @@ export function useColumns<T = RoleApi.Role>(
nameField: 'name',
nameTitle: '角色',
onClick: onActionClick,
options: [
{
code: 'edit',
text: '编辑',
permission: 'system:role:update',
},
{
code: 'delete',
text: '删除',
permission: 'system:role:delete',
},
],
},
name: 'CellOperation',
},

View File

@ -155,7 +155,11 @@ function onCreate() {
<FormDrawer />
<Grid table-title="角色列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate">
<Button
type="primary"
@click="onCreate"
v-access:code="'system:role:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['角色']) }}
</Button>

View File

@ -68,22 +68,27 @@ const [Drawer, drawerApi] = useVbenDrawer({
}
if (menuIds.value.length === 0) {
loadPermissions();
await loadPermissions();
}
}
},
});
function convertToTreeNode(item: any) {
return {
key: item.id,
title: item.name,
pid: item.pid || '',
children: item.children?.map(convertToTreeNode) ?? null,
meta: item.meta,
};
}
async function loadPermissions() {
loadingPermissions.value = true;
try {
const res = await queryMenuList('all');
menuIds.value = res.map((item) => ({
key: item.id,
title: item.name,
children: item.children || null,
meta: item.meta,
}));
menuIds.value = res.map((item) => convertToTreeNode(item));
} finally {
loadingPermissions.value = false;
}
@ -119,7 +124,7 @@ function getNodeClass(node: Recordable<any>) {
:default-expanded-level="2"
:get-node-class="getNodeClass"
v-bind="slotProps"
value-field="id"
value-field="key"
label-field="meta.title"
icon-field="meta.icon"
>

View File

@ -188,13 +188,20 @@ export function useColumns<T = UserApi.User>(
onClick: onActionClick,
},
options: [
{
code: 'resetPassword',
text: '重置密码',
permission: 'system:user:update',
},
{
code: 'edit',
text: '修改',
permission: 'system:user:update',
},
{
code: 'delete',
text: '删除',
permission: 'system:user:delete',
},
],
name: 'CellOperation',
@ -202,7 +209,7 @@ export function useColumns<T = UserApi.User>(
field: 'operation',
fixed: 'right',
title: '操作',
width: 130,
width: 200,
},
];
}

View File

@ -7,7 +7,7 @@ import type {
} from '#/adapter/vxe-table';
import type { UserApi } from '#/api';
import { Page, useVbenDrawer } from '@vben/common-ui';
import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message, Modal } from 'ant-design-vue';
@ -19,12 +19,18 @@ import { $t } from '#/locales';
import { useColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ResetModal from './modules/reset-form.vue';
const [FormDrawer, formDrawerApi] = useVbenDrawer({
connectedComponent: Form,
destroyOnClose: true,
});
const [ResetPasswordModal, modalApi] = useVbenModal({
connectedComponent: ResetModal,
destroyOnClose: true,
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
@ -73,6 +79,10 @@ function onActionClick(e: OnActionClickParams<UserApi.User>) {
onEdit(e.row);
break;
}
case 'resetPassword': {
onResetPassword(e.row);
break;
}
}
}
@ -123,6 +133,10 @@ function onEdit(row: UserApi.User) {
formDrawerApi.setData(row).open();
}
function onResetPassword(row: UserApi.User) {
modalApi.setData(row).open();
}
function onDelete(row: UserApi.User) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
@ -152,10 +166,15 @@ function onCreate() {
</script>
<template>
<Page auto-content-height>
<FormDrawer />
<ResetPasswordModal @success="onRefresh" />
<FormDrawer @success="onRefresh" />
<Grid table-title="用户列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate">
<Button
type="primary"
@click="onCreate"
v-access:code="'system:user:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['用户']) }}
</Button>

View File

@ -21,7 +21,7 @@ import { useFormSchema } from '../data';
const emits = defineEmits(['success']);
const formData = ref<UserApi.User>();
const id = ref();
const [Form, formApi] = useVbenForm({
schema: useFormSchema(),
showDefaultActions: false,
@ -30,7 +30,6 @@ const [Form, formApi] = useVbenForm({
const permissions = ref<DataNode[]>([]);
const loadingPermissions = ref(false);
const id = ref();
const [Drawer, drawerApi] = useVbenDrawer({
async onConfirm() {
const { valid } = await formApi.validate();

View File

@ -0,0 +1,51 @@
<script setup lang="ts">
import type { UserApi } from '#/api';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Input } from 'ant-design-vue';
import { resetPasswordApi } from '#/api';
const emits = defineEmits(['success']);
const userId = ref();
const resetpasswordData = ref();
const formData = ref();
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (!resetpasswordData.value) return;
modalApi.lock();
try {
await resetPasswordApi(userId.value, {
password: resetpasswordData.value,
});
emits('success');
modalApi.close();
} finally {
modalApi.lock(false);
}
},
onOpenChange(isOpen) {
if (isOpen) {
formData.value = modalApi.getData<UserApi.User>();
userId.value = formData.value.id;
}
},
});
</script>
<template>
<Modal title="重置密码" class="flex flex-col">
<Input.Password
class="my-4"
placeholder="请输入密码"
v-model:value="resetpasswordData"
/>
</Modal>
</template>
<style scoped></style>

View File

@ -0,0 +1,84 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
export function useGridFormSchema(): VbenFormSchema[] {
return [
// {
// component: 'Input',
// fieldName: 'type',
// label: '类型',
// },
{
component: 'Select',
componentProps: {
allowClear: true,
options: [
{ label: 'WORD', value: 1 },
{ label: 'PPT', value: 2 },
{ label: 'SPIDER', value: 3 },
],
},
fieldName: 'type',
label: '类型',
},
];
}
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'deptIds',
formItemClass: 'items-start',
label: '部门',
modelPropName: 'modelValue',
labelWidth: 40,
},
];
}
export function useColumns(
onActionClick?: OnActionClickFn<any>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: 'ID',
// type: 'checkbox',
minWidth: 100,
},
{
field: 'mode',
width: 200,
title: '类型',
},
{
field: 'name',
title: '名称',
minWidth: 100,
},
{
align: 'center',
cellRender: {
name: 'CellOperation',
attrs: {
nameField: 'name',
nameTitle: '工作流',
onClick: onActionClick,
},
options: [
{
code: 'update',
text: '关联部门',
permission: 'workflow:update',
},
],
},
field: 'operation',
headerAlign: 'center',
showOverflow: false,
title: '操作',
width: 200,
},
];
}

View File

@ -0,0 +1,102 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { UserApi } from '#/api';
import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAppList } from '#/api';
import { useColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormDrawer] = useVbenDrawer({
destroyOnClose: true,
});
// const selectedRowIds = ref<number[]>([]);
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/**
* 编辑工作流
* @param row
*/
function onEdit(row: any) {
formModalApi.setData(row).open();
}
/**
* 表格操作按钮的回调函数
*/
function onActionClick({ code, row }: OnActionClickParams<any>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useColumns(onActionClick),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const res = await getAppList({
page: page.currentPage,
size: page.pageSize,
current: page.currentPage,
...formValues,
});
return {
items: res,
total: res.length,
};
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
custom: true,
export: false,
refresh: { code: 'query' },
search: true,
zoom: true,
},
} as VxeTableGridOptions<UserApi.User>,
});
// function onRefresh() {
// gridApi.query();
// }
</script>
<template>
<Page auto-content-height>
<FormDrawer />
<FormModal />
<Grid table-title="工作流列表">
<!-- <template #toolbar-tools>-->
<!-- <Button type="primary" @click="onDelete" danger> 批量删除 </Button>-->
<!-- </template>-->
<!-- <template #makeTime="{ row }">-->
<!-- {{ dayjs(row.makeTime).format('YYYY-MM-DD HH:mm') }}-->
<!-- </template>-->
</Grid>
</Page>
</template>

View File

@ -0,0 +1,95 @@
<script setup lang="ts">
import type { DataNode } from 'ant-design-vue/es/tree';
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { useVbenModal, VbenTree } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { getAllDeptTree } from '#/api';
import { useFormSchema } from '../data';
const emits = defineEmits(['success']);
const formData = ref<string[]>([]);
const deptData = ref<DataNode[]>([]);
function convertToTreeNode(item: any): DataNode {
return {
key: item.id,
title: item.name,
pid: item.pid || '',
children: item.children?.map(convertToTreeNode) ?? null,
};
}
async function getDeptList() {
const res = await getAllDeptTree(0);
deptData.value = res.map((item) => convertToTreeNode(item));
}
const [Form] = useVbenForm({
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// const values = await formApi.getValues();
if (!formData.value) return;
modalApi.lock();
try {
emits('success');
modalApi.close();
} finally {
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
if (isOpen) {
await getDeptList();
}
},
});
function getNodeClass(node: Recordable<any>) {
const classes: string[] = [];
if (node.value?.type === 'button') {
classes.push('inline-flex');
if (node.index % 3 >= 1) {
classes.push('!pl-0');
}
}
return classes.join(' ');
}
</script>
<template>
<Modal title="修改工作流">
<Form class="mx-4">
<template #deptIds="slotProps">
<VbenTree
:tree-data="deptData"
multiple
bordered
:default-expanded-level="2"
:get-node-class="getNodeClass"
v-bind="slotProps"
value-field="key"
label-field="title"
>
<template #node="{ value }">
<!-- <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />-->
{{ value.title }}
</template>
</VbenTree>
</template>
</Form>
</Modal>
</template>
<style scoped></style>

View File

@ -6,7 +6,7 @@ export const LOGIN_PATH = '/auth/login';
/**
* @zh_CN
*/
export const DEFAULT_HOME_PATH = '/analytics';
export const DEFAULT_HOME_PATH = '/home';
export interface LanguageOption {
label: string;

View File

@ -19,4 +19,5 @@ export const IconSystem = createIconifyIcon('icon-park-twotone:system');
export const MaterPerson = createIconifyIcon('material-symbols:person');
export const IconLog = createIconifyIcon('icon-park-outline:log');
export const HugeAi = createIconifyIcon('hugeicons:ai-scan');
export const FluentWorkflow = createIconifyIcon('fluent:cloud-flow-24-regular');
// export const MdiUser = createIconifyIcon('mdi:user');