添加用户页面.
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
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 />
|
||||
</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 });
|
||||
|
||||
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