refactor(@vben/common-ui): 新增用户管理功能
This commit is contained in:
parent
1464345c4a
commit
8aa7411f69
18
apps/web-antd/src/router/routes/modules/user.ts
Normal file
18
apps/web-antd/src/router/routes/modules/user.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import type { RouteRecordRaw } from 'vue-router';
|
||||||
|
|
||||||
|
import { MdiUser } from '@vben/icons';
|
||||||
|
|
||||||
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
name: 'user',
|
||||||
|
path: '/user',
|
||||||
|
component: () => import('#/views/user/index.vue'),
|
||||||
|
meta: {
|
||||||
|
icon: MdiUser,
|
||||||
|
title: '用户管理',
|
||||||
|
order: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
78
apps/web-antd/src/views/user/index.vue
Normal file
78
apps/web-antd/src/views/user/index.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { getAllDeptTree, queryUserList } from '#/api';
|
||||||
|
|
||||||
|
import UserTableView from './user-table-view.vue';
|
||||||
|
|
||||||
|
const generateFormModel = () => {
|
||||||
|
return {
|
||||||
|
id: '',
|
||||||
|
username: '',
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
createdTime: [],
|
||||||
|
enableState: '',
|
||||||
|
deptId: '',
|
||||||
|
page: 1,
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const treeData = ref([]);
|
||||||
|
|
||||||
|
const renderData = ref([]);
|
||||||
|
const formModel = ref(generateFormModel());
|
||||||
|
// const deptOptions = ref([]);
|
||||||
|
|
||||||
|
const getDeptData = async () => {
|
||||||
|
try {
|
||||||
|
treeData.value = await getAllDeptTree(0);
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUserTableData = async (params: any) => {
|
||||||
|
try {
|
||||||
|
const res = await queryUserList(params);
|
||||||
|
renderData.value = res.records;
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
const search = () => {
|
||||||
|
getUserTableData({
|
||||||
|
// ...pagination,
|
||||||
|
...formModel.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// const handleSelectDept = (id: any[]) => {
|
||||||
|
// const [deptId] = id;
|
||||||
|
// formModel.value.deptId = deptId;
|
||||||
|
// search();
|
||||||
|
// };
|
||||||
|
|
||||||
|
const handleSelectUser = (data: any) => {
|
||||||
|
formModel.value = data;
|
||||||
|
search();
|
||||||
|
};
|
||||||
|
|
||||||
|
getUserTableData({ page: 1, size: 10, current: 1 });
|
||||||
|
getDeptData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="px-1">
|
||||||
|
<div class="mt-5 flex flex-col lg:flex-row">
|
||||||
|
<!-- <div class="mr-4 w-full lg:w-1/4">-->
|
||||||
|
<!-- <UserDeptTree :treeData="treeData" @select="handleSelectDept" />-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="w-full">
|
||||||
|
<UserTableView :render-data="renderData" @change="handleSelectUser" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
Loading…
Reference in New Issue
Block a user