From 4f8bc6c04602c917ae74149af766344a3e9ed054 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Wed, 16 Aug 2023 10:38:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/PermissionController.java      |   5 +-
 orion-ops-ui/src/api/system/menu.ts           |   7 +
 orion-ops-ui/src/api/user/user.ts             | 117 +++++++++
 .../system/menu/components/menu-table.vue     |  33 ++-
 .../user/user/components/user-form-modal.vue  | 171 +++++++++++++
 .../views/user/user/components/user-table.vue | 229 ++++++++++++++++++
 orion-ops-ui/src/views/user/user/index.vue    |  32 +++
 .../src/views/user/user/types/enum.types.ts   |  27 +++
 .../src/views/user/user/types/form.rules.ts   |  70 ++++++
 .../views/user/user/types/table.columns.ts    |  98 ++++++++
 10 files changed, 783 insertions(+), 6 deletions(-)
 create mode 100644 orion-ops-ui/src/api/user/user.ts
 create mode 100644 orion-ops-ui/src/views/user/user/components/user-form-modal.vue
 create mode 100644 orion-ops-ui/src/views/user/user/components/user-table.vue
 create mode 100644 orion-ops-ui/src/views/user/user/index.vue
 create mode 100644 orion-ops-ui/src/views/user/user/types/enum.types.ts
 create mode 100644 orion-ops-ui/src/views/user/user/types/form.rules.ts
 create mode 100644 orion-ops-ui/src/views/user/user/types/table.columns.ts

diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PermissionController.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PermissionController.java
index 4fc51375..fb781bad 100644
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PermissionController.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PermissionController.java
@@ -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();
diff --git a/orion-ops-ui/src/api/system/menu.ts b/orion-ops-ui/src/api/system/menu.ts
index 61e34740..365986a8 100644
--- a/orion-ops-ui/src/api/system/menu.ts
+++ b/orion-ops-ui/src/api/system/menu.ts
@@ -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');
+}
diff --git a/orion-ops-ui/src/api/user/user.ts b/orion-ops-ui/src/api/user/user.ts
new file mode 100644
index 00000000..115f233d
--- /dev/null
+++ b/orion-ops-ui/src/api/user/user.ts
@@ -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' });
+    }
+  });
+}
diff --git a/orion-ops-ui/src/views/system/menu/components/menu-table.vue b/orion-ops-ui/src/views/system/menu/components/menu-table.vue
index 1f93e3a2..0e3afef0 100644
--- a/orion-ops-ui/src/views/system/menu/components/menu-table.vue
+++ b/orion-ops-ui/src/views/system/menu/components/menu-table.vue
@@ -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 });
diff --git a/orion-ops-ui/src/views/user/user/components/user-form-modal.vue b/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
new file mode 100644
index 00000000..8ebe5c34
--- /dev/null
+++ b/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
@@ -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>
diff --git a/orion-ops-ui/src/views/user/user/components/user-table.vue b/orion-ops-ui/src/views/user/user/components/user-table.vue
new file mode 100644
index 00000000..9ae78fad
--- /dev/null
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -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>
diff --git a/orion-ops-ui/src/views/user/user/index.vue b/orion-ops-ui/src/views/user/user/index.vue
new file mode 100644
index 00000000..c38f6466
--- /dev/null
+++ b/orion-ops-ui/src/views/user/user/index.vue
@@ -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>
diff --git a/orion-ops-ui/src/views/user/user/types/enum.types.ts b/orion-ops-ui/src/views/user/user/types/enum.types.ts
new file mode 100644
index 00000000..894219bc
--- /dev/null
+++ b/orion-ops-ui/src/views/user/user/types/enum.types.ts
@@ -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',
+  },
+}
+
diff --git a/orion-ops-ui/src/views/user/user/types/form.rules.ts b/orion-ops-ui/src/views/user/user/types/form.rules.ts
new file mode 100644
index 00000000..3352c0ba
--- /dev/null
+++ b/orion-ops-ui/src/views/user/user/types/form.rules.ts
@@ -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[]>;
diff --git a/orion-ops-ui/src/views/user/user/types/table.columns.ts b/orion-ops-ui/src/views/user/user/types/table.columns.ts
new file mode 100644
index 00000000..1fd4894a
--- /dev/null
+++ b/orion-ops-ui/src/views/user/user/types/table.columns.ts
@@ -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;