Browse Source
* feat: department management demo * perf: department page improve * feat: demo api middleware * fix: add losing importpull/5612/head
Netfan
12 months ago
committed by
GitHub
GitHub
19 changed files with 811 additions and 8 deletions
@ -0,0 +1,15 @@ |
|||
import { verifyAccessToken } from '~/utils/jwt-utils'; |
|||
import { |
|||
sleep, |
|||
unAuthorizedResponse, |
|||
useResponseSuccess, |
|||
} from '~/utils/response'; |
|||
|
|||
export default eventHandler(async (event) => { |
|||
const userinfo = verifyAccessToken(event); |
|||
if (!userinfo) { |
|||
return unAuthorizedResponse(event); |
|||
} |
|||
await sleep(600); |
|||
return useResponseSuccess(null); |
|||
}); |
|||
@ -0,0 +1,15 @@ |
|||
import { verifyAccessToken } from '~/utils/jwt-utils'; |
|||
import { |
|||
sleep, |
|||
unAuthorizedResponse, |
|||
useResponseSuccess, |
|||
} from '~/utils/response'; |
|||
|
|||
export default eventHandler(async (event) => { |
|||
const userinfo = verifyAccessToken(event); |
|||
if (!userinfo) { |
|||
return unAuthorizedResponse(event); |
|||
} |
|||
await sleep(1000); |
|||
return useResponseSuccess(null); |
|||
}); |
|||
@ -0,0 +1,15 @@ |
|||
import { verifyAccessToken } from '~/utils/jwt-utils'; |
|||
import { |
|||
sleep, |
|||
unAuthorizedResponse, |
|||
useResponseSuccess, |
|||
} from '~/utils/response'; |
|||
|
|||
export default eventHandler(async (event) => { |
|||
const userinfo = verifyAccessToken(event); |
|||
if (!userinfo) { |
|||
return unAuthorizedResponse(event); |
|||
} |
|||
await sleep(2000); |
|||
return useResponseSuccess(null); |
|||
}); |
|||
@ -0,0 +1,67 @@ |
|||
import { faker } from '@faker-js/faker'; |
|||
import { verifyAccessToken } from '~/utils/jwt-utils'; |
|||
import { |
|||
sleep, |
|||
unAuthorizedResponse, |
|||
useResponseSuccess, |
|||
} from '~/utils/response'; |
|||
|
|||
const formatterCN = new Intl.DateTimeFormat('zh-CN', { |
|||
timeZone: 'Asia/Shanghai', |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit', |
|||
}); |
|||
|
|||
function generateMockDataList(count: number) { |
|||
const dataList = []; |
|||
|
|||
for (let i = 0; i < count; i++) { |
|||
const dataItem: Record<string, any> = { |
|||
id: faker.string.uuid(), |
|||
pid: 0, |
|||
name: faker.commerce.department(), |
|||
status: faker.helpers.arrayElement([0, 1]), |
|||
createTime: formatterCN.format( |
|||
faker.date.between({ from: '2021-01-01', to: '2022-12-31' }), |
|||
), |
|||
remark: faker.lorem.sentence(), |
|||
}; |
|||
if (faker.datatype.boolean()) { |
|||
dataItem.children = Array.from( |
|||
{ length: faker.number.int({ min: 1, max: 5 }) }, |
|||
() => ({ |
|||
id: faker.string.uuid(), |
|||
pid: dataItem.id, |
|||
name: faker.commerce.department(), |
|||
status: faker.helpers.arrayElement([0, 1]), |
|||
createTime: formatterCN.format( |
|||
faker.date.between({ from: '2023-01-01', to: '2023-12-31' }), |
|||
), |
|||
remark: faker.lorem.sentence(), |
|||
}), |
|||
); |
|||
} |
|||
dataList.push(dataItem); |
|||
} |
|||
|
|||
return dataList; |
|||
} |
|||
|
|||
const mockData = generateMockDataList(10); |
|||
|
|||
export default eventHandler(async (event) => { |
|||
const userinfo = verifyAccessToken(event); |
|||
if (!userinfo) { |
|||
return unAuthorizedResponse(event); |
|||
} |
|||
|
|||
await sleep(600); |
|||
|
|||
const listData = structuredClone(mockData); |
|||
|
|||
return useResponseSuccess(listData); |
|||
}); |
|||
@ -0,0 +1,54 @@ |
|||
import { requestClient } from '#/api/request'; |
|||
|
|||
export namespace SystemDeptApi { |
|||
export interface SystemDept { |
|||
[key: string]: any; |
|||
children?: SystemDept[]; |
|||
id: string; |
|||
name: string; |
|||
remark?: string; |
|||
status: 0 | 1; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取部门列表数据 |
|||
*/ |
|||
async function getDeptList() { |
|||
return requestClient.get<Array<SystemDeptApi.SystemDept>>( |
|||
'/system/dept/list', |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 创建部门 |
|||
* @param data 部门数据 |
|||
*/ |
|||
async function createDept( |
|||
data: Omit<SystemDeptApi.SystemDept, 'children' | 'id'>, |
|||
) { |
|||
return requestClient.post('/system/dept', data); |
|||
} |
|||
|
|||
/** |
|||
* 更新部门 |
|||
* |
|||
* @param id 部门 ID |
|||
* @param data 部门数据 |
|||
*/ |
|||
async function updateDept( |
|||
id: string, |
|||
data: Omit<SystemDeptApi.SystemDept, 'children' | 'id'>, |
|||
) { |
|||
return requestClient.put(`/system/dept/${id}`, data); |
|||
} |
|||
|
|||
/** |
|||
* 删除部门 |
|||
* @param id 部门 ID |
|||
*/ |
|||
async function deleteDept(id: string) { |
|||
return requestClient.delete(`/system/dept/${id}`); |
|||
} |
|||
|
|||
export { createDept, deleteDept, getDeptList, updateDept }; |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"title": "System Management", |
|||
"dept": { |
|||
"name": "Department", |
|||
"title": "Department Management", |
|||
"deptName": "Department Name", |
|||
"status": "Status", |
|||
"createTime": "Create Time", |
|||
"remark": "Remark", |
|||
"operation": "Operation", |
|||
"parentDept": "Parent Department" |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"dept": { |
|||
"createTime": "创建时间", |
|||
"deptName": "部门名称", |
|||
"name": "部门", |
|||
"operation": "操作", |
|||
"parentDept": "上级部门", |
|||
"remark": "备注", |
|||
"status": "状态", |
|||
"title": "部门管理" |
|||
}, |
|||
"title": "系统管理" |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
import type { RouteRecordRaw } from 'vue-router'; |
|||
|
|||
import { $t } from '#/locales'; |
|||
|
|||
const routes: RouteRecordRaw[] = [ |
|||
{ |
|||
meta: { |
|||
icon: 'ion:settings-outline', |
|||
order: 9997, |
|||
title: $t('system.title'), |
|||
}, |
|||
name: 'System', |
|||
path: '/system', |
|||
children: [ |
|||
{ |
|||
path: '/system/dept', |
|||
name: 'SystemDept', |
|||
meta: { |
|||
icon: 'charm:organisation', |
|||
title: $t('system.dept.title'), |
|||
}, |
|||
component: () => import('#/views/system/dept/list.vue'), |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
export default routes; |
|||
@ -0,0 +1,135 @@ |
|||
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; |
|||
|
|||
import type { VbenFormSchema } from '#/adapter/form'; |
|||
import type { OnActionClickFn } from '#/adapter/vxe-table'; |
|||
import type { SystemDeptApi } from '#/api/system/dept'; |
|||
|
|||
import { z } from '#/adapter/form'; |
|||
import { getDeptList } from '#/api/system/dept'; |
|||
import { $t } from '#/locales'; |
|||
|
|||
/** |
|||
* 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量 |
|||
*/ |
|||
export function useSchema(): VbenFormSchema[] { |
|||
return [ |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'name', |
|||
label: $t('system.dept.deptName'), |
|||
rules: z |
|||
.string() |
|||
.min(2, $t('ui.formRules.minLength', [$t('system.dept.deptName'), 2])) |
|||
.max( |
|||
20, |
|||
$t('ui.formRules.maxLength', [$t('system.dept.deptName'), 20]), |
|||
), |
|||
}, |
|||
{ |
|||
component: 'ApiTreeSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
api: getDeptList, |
|||
class: 'w-full', |
|||
labelField: 'name', |
|||
valueField: 'id', |
|||
childrenField: 'children', |
|||
}, |
|||
fieldName: 'pid', |
|||
label: $t('system.dept.parentDept'), |
|||
}, |
|||
{ |
|||
component: 'RadioGroup', |
|||
componentProps: { |
|||
buttonStyle: 'solid', |
|||
options: [ |
|||
{ label: $t('common.enabled'), value: 1 }, |
|||
{ label: $t('common.disabled'), value: 0 }, |
|||
], |
|||
optionType: 'button', |
|||
}, |
|||
defaultValue: 1, |
|||
fieldName: 'status', |
|||
label: $t('system.dept.status'), |
|||
}, |
|||
{ |
|||
component: 'Textarea', |
|||
componentProps: { |
|||
maxLength: 50, |
|||
rows: 3, |
|||
showCount: true, |
|||
}, |
|||
fieldName: 'remark', |
|||
label: $t('system.dept.remark'), |
|||
rules: z |
|||
.string() |
|||
.max(50, $t('ui.formRules.maxLength', [$t('system.dept.remark'), 50])) |
|||
.optional(), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 获取表格列配置 |
|||
* @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头 |
|||
* @param onActionClick 表格操作按钮点击事件 |
|||
*/ |
|||
export function useColumns( |
|||
onActionClick?: OnActionClickFn<SystemDeptApi.SystemDept>, |
|||
): VxeTableGridOptions<SystemDeptApi.SystemDept>['columns'] { |
|||
return [ |
|||
{ |
|||
align: 'left', |
|||
field: 'name', |
|||
fixed: 'left', |
|||
title: $t('system.dept.deptName'), |
|||
treeNode: true, |
|||
width: 150, |
|||
}, |
|||
{ |
|||
cellRender: { name: 'CellTag' }, |
|||
field: 'status', |
|||
title: $t('system.dept.status'), |
|||
width: 100, |
|||
}, |
|||
{ |
|||
field: 'createTime', |
|||
title: $t('system.dept.createTime'), |
|||
width: 180, |
|||
}, |
|||
{ |
|||
field: 'remark', |
|||
title: $t('system.dept.remark'), |
|||
}, |
|||
{ |
|||
align: 'right', |
|||
cellRender: { |
|||
attrs: { |
|||
nameField: 'name', |
|||
nameTitle: $t('system.dept.name'), |
|||
onClick: onActionClick, |
|||
}, |
|||
name: 'CellOperation', |
|||
options: [ |
|||
{ |
|||
code: 'append', |
|||
text: '新增下级', |
|||
}, |
|||
'edit', // 默认的编辑按钮
|
|||
{ |
|||
code: 'delete', // 默认的删除按钮
|
|||
disabled: (row: SystemDeptApi.SystemDept) => { |
|||
return !!(row.children && row.children.length > 0); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
field: 'operation', |
|||
fixed: 'right', |
|||
headerAlign: 'center', |
|||
showOverflow: false, |
|||
title: $t('system.dept.operation'), |
|||
width: 200, |
|||
}, |
|||
]; |
|||
} |
|||
@ -0,0 +1,143 @@ |
|||
<script lang="ts" setup> |
|||
import type { |
|||
OnActionClickParams, |
|||
VxeTableGridOptions, |
|||
} from '#/adapter/vxe-table'; |
|||
import type { SystemDeptApi } from '#/api/system/dept'; |
|||
|
|||
import { Page, useVbenModal } from '@vben/common-ui'; |
|||
import { Plus } from '@vben/icons'; |
|||
|
|||
import { Button, message } from 'ant-design-vue'; |
|||
|
|||
import { useVbenVxeGrid } from '#/adapter/vxe-table'; |
|||
import { deleteDept, getDeptList } from '#/api/system/dept'; |
|||
import { $t } from '#/locales'; |
|||
|
|||
import { useColumns } from './data'; |
|||
import Form from './modules/form.vue'; |
|||
|
|||
const [FormModal, formModalApi] = useVbenModal({ |
|||
connectedComponent: Form, |
|||
destroyOnClose: true, |
|||
}); |
|||
|
|||
/** |
|||
* 编辑部门 |
|||
* @param row |
|||
*/ |
|||
function onEdit(row: SystemDeptApi.SystemDept) { |
|||
formModalApi.setData(row).open(); |
|||
} |
|||
|
|||
/** |
|||
* 添加下级部门 |
|||
* @param row |
|||
*/ |
|||
function onAppend(row: SystemDeptApi.SystemDept) { |
|||
formModalApi.setData({ pid: row.id }).open(); |
|||
} |
|||
|
|||
/** |
|||
* 创建新部门 |
|||
*/ |
|||
function onCreate() { |
|||
formModalApi.setData(null).open(); |
|||
} |
|||
|
|||
/** |
|||
* 删除部门 |
|||
* @param row |
|||
*/ |
|||
function onDelete(row: SystemDeptApi.SystemDept) { |
|||
const hideLoading = message.loading({ |
|||
content: $t('ui.actionMessage.deleting', [row.name]), |
|||
duration: 0, |
|||
key: 'action_process_msg', |
|||
}); |
|||
deleteDept(row.id) |
|||
.then(() => { |
|||
message.success({ |
|||
content: $t('ui.actionMessage.deleteSuccess', [row.name]), |
|||
key: 'action_process_msg', |
|||
}); |
|||
refreshGrid(); |
|||
}) |
|||
.catch(() => { |
|||
hideLoading(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 表格操作按钮的回调函数 |
|||
*/ |
|||
function onActionClick({ |
|||
code, |
|||
row, |
|||
}: OnActionClickParams<SystemDeptApi.SystemDept>) { |
|||
switch (code) { |
|||
case 'append': { |
|||
onAppend(row); |
|||
break; |
|||
} |
|||
case 'delete': { |
|||
onDelete(row); |
|||
break; |
|||
} |
|||
case 'edit': { |
|||
onEdit(row); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
|
|||
const [Grid, gridApi] = useVbenVxeGrid({ |
|||
gridEvents: {}, |
|||
gridOptions: { |
|||
columns: useColumns(onActionClick), |
|||
height: 'auto', |
|||
keepSource: true, |
|||
pagerConfig: { |
|||
enabled: false, |
|||
}, |
|||
proxyConfig: { |
|||
ajax: { |
|||
query: async (_params) => { |
|||
return await getDeptList(); |
|||
}, |
|||
}, |
|||
}, |
|||
toolbarConfig: { |
|||
custom: true, |
|||
export: false, |
|||
refresh: { code: 'query' }, |
|||
zoom: true, |
|||
}, |
|||
treeConfig: { |
|||
parentField: 'pid', |
|||
rowField: 'id', |
|||
transform: false, |
|||
}, |
|||
} as VxeTableGridOptions, |
|||
}); |
|||
|
|||
/** |
|||
* 刷新表格 |
|||
*/ |
|||
function refreshGrid() { |
|||
gridApi.query(); |
|||
} |
|||
</script> |
|||
<template> |
|||
<Page auto-content-height> |
|||
<FormModal @success="refreshGrid" /> |
|||
<Grid table-title="部门列表"> |
|||
<template #toolbar-tools> |
|||
<Button type="primary" @click="onCreate"> |
|||
<Plus class="size-5" /> |
|||
{{ $t('ui.actionTitle.create', [$t('system.dept.name')]) }} |
|||
</Button> |
|||
</template> |
|||
</Grid> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,78 @@ |
|||
<script lang="ts" setup> |
|||
import type { SystemDeptApi } from '#/api/system/dept'; |
|||
|
|||
import { computed, ref } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
|
|||
import { Button } from 'ant-design-vue'; |
|||
|
|||
import { useVbenForm } from '#/adapter/form'; |
|||
import { createDept, updateDept } from '#/api/system/dept'; |
|||
import { $t } from '#/locales'; |
|||
|
|||
import { useSchema } from '../data'; |
|||
|
|||
const emit = defineEmits(['success']); |
|||
const formData = ref<SystemDeptApi.SystemDept>(); |
|||
const getTitle = computed(() => { |
|||
return formData.value?.id |
|||
? $t('ui.actionTitle.edit', [$t('system.dept.name')]) |
|||
: $t('ui.actionTitle.create', [$t('system.dept.name')]); |
|||
}); |
|||
|
|||
const [Form, formApi] = useVbenForm({ |
|||
layout: 'vertical', |
|||
schema: useSchema(), |
|||
showDefaultActions: false, |
|||
}); |
|||
|
|||
function resetForm() { |
|||
formApi.resetForm(); |
|||
formApi.setValues(formData.value || {}); |
|||
} |
|||
|
|||
const [Modal, modalApi] = useVbenModal({ |
|||
async onConfirm() { |
|||
const { valid } = await formApi.validate(); |
|||
if (valid) { |
|||
modalApi.lock(); |
|||
const data = formApi.getValues(); |
|||
try { |
|||
await (formData.value?.id |
|||
? updateDept(formData.value.id, data) |
|||
: createDept(data)); |
|||
modalApi.close(); |
|||
emit('success'); |
|||
} finally { |
|||
modalApi.lock(false); |
|||
} |
|||
} |
|||
}, |
|||
onOpenChange(isOpen) { |
|||
if (isOpen) { |
|||
const data = modalApi.getData<SystemDeptApi.SystemDept>(); |
|||
if (data) { |
|||
if (data.pid === 0) { |
|||
data.pid = undefined; |
|||
} |
|||
formData.value = data; |
|||
formApi.setValues(formData.value); |
|||
} |
|||
} |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Modal :title="getTitle"> |
|||
<Form class="mx-4" /> |
|||
<template #prepend-footer> |
|||
<div class="flex-auto"> |
|||
<Button type="primary" danger @click="resetForm"> |
|||
{{ $t('common.reset') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
</Modal> |
|||
</template> |
|||
Loading…
Reference in new issue