添加用户页面.
This commit is contained in:
@@ -13,6 +13,7 @@ import lombok.extern.slf4j.Slf4j;
|
|||||||
import org.springframework.security.access.prepost.PreAuthorize;
|
import org.springframework.security.access.prepost.PreAuthorize;
|
||||||
import org.springframework.validation.annotation.Validated;
|
import org.springframework.validation.annotation.Validated;
|
||||||
import org.springframework.web.bind.annotation.GetMapping;
|
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.RequestMapping;
|
||||||
import org.springframework.web.bind.annotation.RestController;
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
@@ -38,9 +39,9 @@ public class PermissionController {
|
|||||||
@Resource
|
@Resource
|
||||||
private PermissionService permissionService;
|
private PermissionService permissionService;
|
||||||
|
|
||||||
@GetMapping("/init-cache")
|
@PutMapping("/init-cache")
|
||||||
@Operation(summary = "初始化角色权限缓存")
|
@Operation(summary = "初始化角色权限缓存")
|
||||||
@PreAuthorize("@ss.hasPermission('infra:system:init-permission-cache')")
|
@PreAuthorize("@ss.hasPermission('infra:system-menu:init-cache')")
|
||||||
public HttpWrapper<?> initCache() {
|
public HttpWrapper<?> initCache() {
|
||||||
permissionService.initPermissionCache();
|
permissionService.initPermissionCache();
|
||||||
return HttpWrapper.ok();
|
return HttpWrapper.ok();
|
||||||
|
|||||||
@@ -85,3 +85,10 @@ export function updateMenuStatus(request: MenuUpdateRequest) {
|
|||||||
export function deleteMenu(id: number) {
|
export function deleteMenu(id: number) {
|
||||||
return axios.delete<MenuQueryResponse[]>('/infra/system-menu/delete', { params: { id } });
|
return axios.delete<MenuQueryResponse[]>('/infra/system-menu/delete', { params: { id } });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化缓存
|
||||||
|
*/
|
||||||
|
export function initCache() {
|
||||||
|
return axios.put('/infra/permission/init-cache');
|
||||||
|
}
|
||||||
|
|||||||
117
orion-ops-ui/src/api/user/user.ts
Normal file
117
orion-ops-ui/src/api/user/user.ts
Normal 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' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -55,13 +55,27 @@
|
|||||||
<icon-refresh />
|
<icon-refresh />
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
<!-- 展开 -->
|
<!-- 折叠/展开 -->
|
||||||
<a-button @click="toggleExpand">
|
<a-button @click="toggleExpand">
|
||||||
折叠/展开
|
{{ expandStatus ? '折叠' : '展开' }}
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-expand />
|
<icon-shrink v-if="expandStatus" />
|
||||||
|
<icon-expand v-else />
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</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-space>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
@@ -158,7 +172,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive, ref, onUnmounted } from 'vue';
|
import { reactive, ref, onUnmounted } from 'vue';
|
||||||
import useLoading from '@/hooks/loading';
|
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 { toOptions, getEnumValue, toggleEnumValue } from '@/utils/enum';
|
||||||
import { MenuStatusEnum, MenuVisibleEnum, MenuTypeEnum } from '../types/enum.types';
|
import { MenuStatusEnum, MenuVisibleEnum, MenuTypeEnum } from '../types/enum.types';
|
||||||
import columns from '../types/table.columns';
|
import columns from '../types/table.columns';
|
||||||
@@ -264,6 +278,17 @@
|
|||||||
tableRef.value.expandAll(expandStatus.value = !expandStatus.value);
|
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) => {
|
const updateStatus = async (id: number, status: number) => {
|
||||||
await updateMenuStatus({ id, status });
|
await updateMenuStatus({ id, status });
|
||||||
|
|||||||
171
orion-ops-ui/src/views/user/user/components/user-form-modal.vue
Normal file
171
orion-ops-ui/src/views/user/user/components/user-form-modal.vue
Normal 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>
|
||||||
229
orion-ops-ui/src/views/user/user/components/user-table.vue
Normal file
229
orion-ops-ui/src/views/user/user/components/user-table.vue
Normal 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>
|
||||||
32
orion-ops-ui/src/views/user/user/index.vue
Normal file
32
orion-ops-ui/src/views/user/user/index.vue
Normal 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>
|
||||||
27
orion-ops-ui/src/views/user/user/types/enum.types.ts
Normal file
27
orion-ops-ui/src/views/user/user/types/enum.types.ts
Normal 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',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
70
orion-ops-ui/src/views/user/user/types/form.rules.ts
Normal file
70
orion-ops-ui/src/views/user/user/types/form.rules.ts
Normal 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[]>;
|
||||||
98
orion-ops-ui/src/views/user/user/types/table.columns.ts
Normal file
98
orion-ops-ui/src/views/user/user/types/table.columns.ts
Normal 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;
|
||||||
Reference in New Issue
Block a user