添加用户页面.

This commit is contained in:
lijiahang
2023-08-16 10:38:56 +08:00
parent 482b928532
commit 4f8bc6c046
10 changed files with 783 additions and 6 deletions

View File

@@ -13,6 +13,7 @@ import lombok.extern.slf4j.Slf4j;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@@ -38,9 +39,9 @@ public class PermissionController {
@Resource
private PermissionService permissionService;
@GetMapping("/init-cache")
@PutMapping("/init-cache")
@Operation(summary = "初始化角色权限缓存")
@PreAuthorize("@ss.hasPermission('infra:system:init-permission-cache')")
@PreAuthorize("@ss.hasPermission('infra:system-menu:init-cache')")
public HttpWrapper<?> initCache() {
permissionService.initPermissionCache();
return HttpWrapper.ok();

View File

@@ -85,3 +85,10 @@ export function updateMenuStatus(request: MenuUpdateRequest) {
export function deleteMenu(id: number) {
return axios.delete<MenuQueryResponse[]>('/infra/system-menu/delete', { params: { id } });
}
/**
* 初始化缓存
*/
export function initCache() {
return axios.put('/infra/permission/init-cache');
}

View File

@@ -0,0 +1,117 @@
import axios from 'axios';
import qs from 'query-string';
import { DataGrid, Pagination } from '@/types/global';
/**
* 用户创建请求
*/
export interface UserCreateRequest {
username?: string;
password?: string;
nickname?: string;
avatar?: string;
mobile?: string;
email?: string;
status?: number;
lastLoginTime?: string;
}
/**
* 用户更新请求
*/
export interface UserUpdateRequest extends UserCreateRequest {
id: number;
}
/**
* 用户查询请求
*/
export interface UserQueryRequest extends Pagination {
id?: number;
username?: string;
password?: string;
nickname?: string;
avatar?: string;
mobile?: string;
email?: string;
status?: number;
lastLoginTime?: string;
}
/**
* 用户查询响应
*/
export interface UserQueryResponse {
id?: number;
username?: string;
password?: string;
nickname?: string;
avatar?: string;
mobile?: string;
email?: string;
status?: number;
lastLoginTime?: number;
createTime: number;
updateTime: number;
creator: string;
updater: string;
}
/**
* 创建用户
*/
export function createUser(request: UserCreateRequest) {
return axios.post('/infra/system-user/create', request);
}
/**
* 通过 id 更新用户
*/
export function updateUser(request: UserUpdateRequest) {
return axios.put('/infra/system-user/update', request);
}
/**
* 通过 id 查询用户
*/
export function getUser(id: number) {
return axios.get<UserQueryResponse>('/infra/system-user/get', { params: { id } });
}
/**
* 通过 id 批量查询用户
*/
export function getUserList(idList: Array<number>) {
return axios.get<UserQueryResponse[]>('/infra/system-user/list', {
params: { idList },
paramsSerializer: params => {
return qs.stringify(params, { arrayFormat: 'comma' });
}
});
}
/**
* 分页查询用户
*/
export function getUserPage(request: UserQueryRequest) {
return axios.post<DataGrid<UserQueryResponse>>('/infra/system-user/query', request);
}
/**
* 通过 id 删除用户
*/
export function deleteUser(id: number) {
return axios.delete('/infra/system-user/delete', { params: { id } });
}
/**
* 通过 id 批量删除用户
*/
export function batchDeleteUser(idList: Array<number>) {
return axios.delete('/infra/system-user/delete-batch', {
params: { idList },
paramsSerializer: params => {
return qs.stringify(params, { arrayFormat: 'comma' });
}
});
}

View File

@@ -55,13 +55,27 @@
<icon-refresh />
</template>
</a-button>
<!-- 展开 -->
<!-- 折叠/展开 -->
<a-button @click="toggleExpand">
折叠/展开
{{ expandStatus ? '折叠' : '展开' }}
<template #icon>
<icon-expand />
<icon-shrink v-if="expandStatus" />
<icon-expand v-else />
</template>
</a-button>
<!-- 刷新缓存 -->
<a-popconfirm content="确定要刷新全局菜单缓存吗?"
position="left"
type="warning"
@ok="doInitCache">
<a-button type="primary" status="warning"
v-permission="['infra:system-menu:init-cache']">
刷新缓存
<template #icon>
<icon-sync />
</template>
</a-button>
</a-popconfirm>
</a-space>
</a-col>
</a-row>
@@ -158,7 +172,7 @@
<script lang="ts" setup>
import { reactive, ref, onUnmounted } from 'vue';
import useLoading from '@/hooks/loading';
import { getMenuList, deleteMenu, updateMenuStatus, MenuQueryRequest, MenuQueryResponse } from '@/api/system/menu';
import { getMenuList, deleteMenu, updateMenuStatus, initCache, MenuQueryRequest, MenuQueryResponse } from '@/api/system/menu';
import { toOptions, getEnumValue, toggleEnumValue } from '@/utils/enum';
import { MenuStatusEnum, MenuVisibleEnum, MenuTypeEnum } from '../types/enum.types';
import columns from '../types/table.columns';
@@ -264,6 +278,17 @@
tableRef.value.expandAll(expandStatus.value = !expandStatus.value);
};
// 刷新缓存
const doInitCache = async () => {
try {
setFetchLoading(true);
await initCache();
Message.success('刷新成功');
} finally {
setFetchLoading(false);
}
};
// 修改状态
const updateStatus = async (id: number, status: number) => {
await updateMenuStatus({ id, status });

View File

@@ -0,0 +1,171 @@
<template>
<a-modal v-model:visible="visible"
body-class="modal-form"
title-align="start"
:title="title"
:top="120"
:align-center="false"
:draggable="true"
:mask-closable="false"
:unmount-on-close="true"
:ok-button-props="{ disabled: loading }"
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
@close="handleClose">
<a-spin :loading="loading">
<a-form :model="formModel"
ref="formRef"
label-align="right"
:style="{ width: '460px' }"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
:rules="formRules">
<!-- 用户名 -->
<a-form-item field="username" label="用户名">
<a-input v-model="formModel.username" placeholder="请输入用户名" />
</a-form-item>
<!-- 密码 -->
<a-form-item field="password" label="密码">
<a-input v-model="formModel.password" placeholder="请输入密码" />
</a-form-item>
<!-- 花名 -->
<a-form-item field="nickname" label="花名">
<a-input v-model="formModel.nickname" placeholder="请输入花名" />
</a-form-item>
<!-- 头像地址 -->
<a-form-item field="avatar" label="头像地址">
<a-input v-model="formModel.avatar" placeholder="请输入头像地址" />
</a-form-item>
<!-- 手机号 -->
<a-form-item field="mobile" label="手机号">
<a-input v-model="formModel.mobile" placeholder="请输入手机号" />
</a-form-item>
<!-- 邮箱 -->
<a-form-item field="email" label="邮箱">
<a-input v-model="formModel.email" placeholder="请输入邮箱" />
</a-form-item>
<!-- 用户状态 0停用 1启用 2锁定 -->
<a-form-item field="status" label="用户状态 0停用 1启用 2锁定">
<a-input-number v-model="formModel.status" placeholder="请输入用户状态 0停用 1启用 2锁定" />
</a-form-item>
<!-- 最后登录时间 -->
<a-form-item field="lastLoginTime" label="最后登录时间">
<a-date-picker v-model="formModel.lastLoginTime"
style="width: 100%"
placeholder="请选择最后登录时间"
show-time />
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script lang="ts">
export default {
name: 'user-user-form-modal'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import formRules from '../types/form.rules';
import { createUser, updateUser } from '@/api/user/user';
import { Message } from '@arco-design/web-vue';
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
const title = ref<string>();
const isAddHandle = ref<boolean>(true);
const defaultForm = () => {
return {
id: undefined,
username: undefined,
password: undefined,
nickname: undefined,
avatar: undefined,
mobile: undefined,
email: undefined,
status: undefined,
lastLoginTime: undefined,
};
};
const formRef = ref<any>();
const formModel = reactive<Record<string, any>>(defaultForm());
const emits = defineEmits(['added', 'updated']);
// 打开新增
const openAdd = () => {
title.value = '添加用户';
isAddHandle.value = true;
renderForm({ ...defaultForm() });
setVisible(true);
};
// 打开修改
const openUpdate = (record: any) => {
title.value = '修改用户';
isAddHandle.value = false;
renderForm({ ...defaultForm(), ...record });
setVisible(true);
};
// 渲染表单
const renderForm = (record: any) => {
Object.keys(formModel).forEach(k => {
formModel[k] = record[k];
});
};
defineExpose({ openAdd, openUpdate });
// 确定
const handlerOk = async () => {
setLoading(true);
try {
// 验证参数
const error = await formRef.value.validate();
if (error) {
return false;
}
if (isAddHandle.value) {
// 新增
await createUser(formModel as any);
Message.success('创建成功');
emits('added');
} else {
// 修改
await updateUser(formModel as any);
Message.success('修改成功');
emits('updated');
}
// 清空
handlerClear();
} catch (e) {
return false;
} finally {
setLoading(false);
}
};
// 关闭
const handleClose = () => {
handlerClear();
};
// 清空
const handlerClear = () => {
setLoading(false);
setVisible(false);
};
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,229 @@
<template>
<!-- 搜索 -->
<a-card class="general-card table-search-card">
<a-query-header :model="formModel"
label-align="left"
@submit="fetchTableData"
@reset="fetchTableData">
<!-- id -->
<a-form-item field="id" label="id" label-col-flex="60px">
<a-input-number v-model="formModel.id" placeholder="请输入id" allow-clear/>
</a-form-item>
<!-- 用户名 -->
<a-form-item field="username" label="用户名" label-col-flex="60px">
<a-input v-model="formModel.username" placeholder="请输入用户名" allow-clear/>
</a-form-item>
<!-- 密码 -->
<a-form-item field="password" label="密码" label-col-flex="60px">
<a-input v-model="formModel.password" placeholder="请输入密码" allow-clear/>
</a-form-item>
<!-- 花名 -->
<a-form-item field="nickname" label="花名" label-col-flex="60px">
<a-input v-model="formModel.nickname" placeholder="请输入花名" allow-clear/>
</a-form-item>
<!-- 头像地址 -->
<a-form-item field="avatar" label="头像地址" label-col-flex="60px">
<a-input v-model="formModel.avatar" placeholder="请输入头像地址" allow-clear/>
</a-form-item>
<!-- 手机号 -->
<a-form-item field="mobile" label="手机号" label-col-flex="60px">
<a-input v-model="formModel.mobile" placeholder="请输入手机号" allow-clear/>
</a-form-item>
<!-- 邮箱 -->
<a-form-item field="email" label="邮箱" label-col-flex="60px">
<a-input v-model="formModel.email" placeholder="请输入邮箱" allow-clear/>
</a-form-item>
<!-- 用户状态 0停用 1启用 2锁定 -->
<a-form-item field="status" label="用户状态 0停用 1启用 2锁定" label-col-flex="60px">
<a-input-number v-model="formModel.status" placeholder="请输入用户状态 0停用 1启用 2锁定" allow-clear/>
</a-form-item>
<!-- 最后登录时间 -->
<a-form-item field="lastLoginTime" label="最后登录时间" label-col-flex="60px">
<a-date-picker v-model="formModel.lastLoginTime"
style="width: 100%"
placeholder="请选择最后登录时间"
show-time
allow-clear/>
</a-form-item>
</a-query-header>
</a-card>
<!-- 表格 -->
<a-card class="general-card table-card">
<template #title>
<!-- 左侧标题 -->
<div class="table-title">
用户列表
</div>
<!-- 右侧按钮 -->
<div class="table-bar-handle">
<a-space>
<!-- 新增 -->
<a-button type="primary"
v-permission="['infra:system-user:create']"
@click="emits('openAdd')">
新增
<template #icon>
<icon-plus />
</template>
</a-button>
<!-- 删除 -->
<a-popconfirm position="br"
type="warning"
:content="`确认删除选中的${selectedKeys.length}条记录吗?`"
@ok="deleteSelectRows">
<a-button v-permission="['infra:system-user:delete']"
type="secondary"
status="danger"
:disabled="selectedKeys.length === 0">
删除
<template #icon>
<icon-delete />
</template>
</a-button>
</a-popconfirm>
</a-space>
</div>
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
label-align="left"
:loading="loading"
:columns="columns"
v-model:selectedKeys="selectedKeys"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
:bordered="false">
<!-- 操作 -->
<template #handle="{ record }">
<div class="table-handle-wrapper">
<!-- 修改 -->
<a-button type="text"
size="mini"
v-permission="['infra:system-user:update']"
@click="emits('openUpdate', record)">
修改
</a-button>
<!-- 删除 -->
<a-popconfirm content="确认删除这条记录吗?"
position="left"
type="warning"
@ok="deleteRow(record)">
<a-button type="text" size="mini"
status="danger"
v-permission="['infra:system-user:delete']">
删除
</a-button>
</a-popconfirm>
</div>
</template>
</a-table>
</a-card>
</template>
<script lang="ts">
export default {
name: 'user-user-table'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { batchDeleteUser, deleteUser, getUserPage, UserQueryRequest, UserQueryResponse } from '@/api/user/user';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { defaultPagination, defaultRowSelection } from '@/types/table';
const tableRenderData = ref<UserQueryResponse[]>();
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate']);
const pagination = reactive(defaultPagination());
const selectedKeys = ref<number[]>([]);
const rowSelection = reactive(defaultRowSelection());
const formModel = reactive<UserQueryRequest>({
id: undefined,
username: undefined,
password: undefined,
nickname: undefined,
avatar: undefined,
mobile: undefined,
email: undefined,
status: undefined,
lastLoginTime: undefined,
});
// 删除选中行
const deleteSelectRows = async () => {
try {
setLoading(true);
// 调用删除接口
await batchDeleteUser(selectedKeys.value);
Message.success(`成功删除${selectedKeys.value.length}条数据`);
selectedKeys.value = [];
// 重新加载数据
await fetchTableData();
} finally {
setLoading(false);
}
};
// 删除当前行
const deleteRow = async ({ id }: { id: number }) => {
try {
setLoading(true);
// 调用删除接口
await deleteUser(id);
Message.success('删除成功');
// 重新加载数据
await fetchTableData();
} finally {
setLoading(false);
}
};
// 添加后回调
const addedCallback = () => {
fetchTableData();
};
// 更新后回调
const updatedCallback = () => {
fetchTableData();
};
defineExpose({
addedCallback, updatedCallback
});
// 加载数据
const doFetchTableData = async (request: UserQueryRequest) => {
try {
setLoading(true);
const { data } = await getUserPage(request);
tableRenderData.value = data.rows;
pagination.total = data.total;
pagination.current = request.page;
pagination.pageSize = request.limit;
} finally {
setLoading(false);
}
};
// 切换页码
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
doFetchTableData({ page, limit, ...form });
};
fetchTableData();
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,32 @@
<template>
<div class="layout-container">
<!-- 表格 -->
<user-table ref="table"
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)" />
<!-- 添加修改模态框 -->
<user-form-modal ref="modal"
@added="() => table.addedCallback()"
@updated="() => table.updatedCallback()" />
</div>
</template>
<script lang="ts">
export default {
name: 'userUser'
};
</script>
<script lang="ts" setup>
import UserTable from './components/user-table.vue';
import UserFormModal from './components/user-form-modal.vue';
import { ref } from 'vue';
const table = ref();
const modal = ref();
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,27 @@
/**
*
*/
export const USER_STATUS_ENUM = {
DISABLED: {
value: null,
label: '',
color: '',
status: '0',
name: 'DISABLED',
},
ENABLED: {
value: null,
label: '',
color: '',
status: '1',
name: 'ENABLED',
},
LOCKED: {
value: null,
label: '',
color: '',
status: '2',
name: 'LOCKED',
},
}

View File

@@ -0,0 +1,70 @@
import { FieldRule } from '@arco-design/web-vue';
export const username = [{
required: true,
message: '请输入用户名'
}, {
maxLength: 32,
message: '用户名长度不能大于32位'
}] as FieldRule[];
export const password = [{
required: true,
message: '请输入密码'
}, {
maxLength: 64,
message: '密码长度不能大于64位'
}] as FieldRule[];
export const nickname = [{
required: true,
message: '请输入花名'
}, {
maxLength: 16,
message: '花名长度不能大于16位'
}] as FieldRule[];
export const avatar = [{
required: true,
message: '请输入头像地址'
}, {
maxLength: 500,
message: '头像地址长度不能大于500位'
}] as FieldRule[];
export const mobile = [{
required: true,
message: '请输入手机号'
}, {
maxLength: 15,
message: '手机号长度不能大于15位'
}] as FieldRule[];
export const email = [{
required: true,
message: '请输入邮箱'
}, {
maxLength: 64,
message: '邮箱长度不能大于64位'
}] as FieldRule[];
export const status = [{
required: true,
message: '请输入用户状态 0停用 1启用 2锁定'
}] as FieldRule[];
export const lastLoginTime = [{
required: true,
message: '请输入最后登录时间'
}] as FieldRule[];
export default {
username,
password,
nickname,
avatar,
mobile,
email,
status,
lastLoginTime,
} as Record<string, FieldRule | FieldRule[]>;

View File

@@ -0,0 +1,98 @@
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { dateFormat } from '@/utils';
const columns = [
{
title: 'id',
dataIndex: 'id',
slotName: 'id',
width: 70,
align: 'left',
fixed: 'left',
}, {
title: '用户名',
dataIndex: 'username',
slotName: 'username',
align: 'center',
ellipsis: true,
tooltip: true,
}, {
title: '密码',
dataIndex: 'password',
slotName: 'password',
align: 'center',
ellipsis: true,
tooltip: true,
}, {
title: '花名',
dataIndex: 'nickname',
slotName: 'nickname',
align: 'center',
ellipsis: true,
tooltip: true,
}, {
title: '头像地址',
dataIndex: 'avatar',
slotName: 'avatar',
align: 'center',
ellipsis: true,
tooltip: true,
}, {
title: '手机号',
dataIndex: 'mobile',
slotName: 'mobile',
align: 'center',
ellipsis: true,
tooltip: true,
}, {
title: '邮箱',
dataIndex: 'email',
slotName: 'email',
align: 'center',
ellipsis: true,
tooltip: true,
}, {
title: '用户状态 0停用 1启用 2锁定',
dataIndex: 'status',
slotName: 'status',
align: 'center',
}, {
title: '最后登录时间',
dataIndex: 'lastLoginTime',
slotName: 'lastLoginTime',
align: 'center',
render: ({ record }) => {
return record.lastLoginTime && dateFormat(new Date(record.lastLoginTime));
},
}, {
title: '创建时间',
dataIndex: 'createTime',
slotName: 'createTime',
render: ({ record }) => {
return dateFormat(new Date(record.createTime));
},
}, {
title: '修改时间',
dataIndex: 'updateTime',
slotName: 'updateTime',
render: ({ record }) => {
return dateFormat(new Date(record.createTime));
},
}, {
title: '创建人',
dataIndex: 'creator',
slotName: 'creator',
}, {
title: '修改人',
dataIndex: 'updater',
slotName: 'updater',
}, {
title: '操作',
slotName: 'handle',
width: 130,
align: 'center',
fixed: 'right',
},
] as TableColumnData[];
export default columns;