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