refactor: 系统管理接口和页面重构

Former-commit-id: d16371370c6bf6928bcf0883e1511a1a91ea388d

src/api/auth/types.ts

@@ -7,10 +7,11 @@ export interface LoginData {
 }
 
 /**
- * 登录详情
+ * 登录响应
  */
 export interface LoginResult {
   accessToken: string;
+  tokenType: string;
   refreshToken: string;
   expires: number;
 }

src/api/dept/index.ts

@@ -1,13 +1,13 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { DeptForm, DeptQuery, Dept } from './types';
+import { DeptForm, DeptQuery, DeptVO } from './types';
 
 /**
  * 部门树形表格
  *
  * @param queryParams
  */
-export function listDepartments(queryParams?: DeptQuery): AxiosPromise<Dept[]> {
+export function listDepts(queryParams?: DeptQuery): AxiosPromise<DeptVO[]> {
   return request({
     url: '/api/v1/dept',
     method: 'get',
@@ -18,7 +18,7 @@ export function listDepartments(queryParams?: DeptQuery): AxiosPromise<Dept[]> {
 /**
  * 部门下拉列表
  */
-export function listDeptOptions(): AxiosPromise<OptionType[]> {
+export function listDeptOptions(): AxiosPromise<[]> {
   return request({
     url: '/api/v1/dept/options',
     method: 'get'
@@ -30,7 +30,7 @@ export function listDeptOptions(): AxiosPromise<OptionType[]> {
  *
  * @param id
  */
-export function getDeptForm(id: string): AxiosPromise<DeptForm> {
+export function getDeptForm(id: number): AxiosPromise<DeptForm> {
   return request({
     url: '/api/v1/dept/' + id + '/form',
     method: 'get'
@@ -56,7 +56,7 @@ export function addDept(data: DeptForm) {
  * @param id
  * @param data
  */
-export function updateDept(id: string, data: DeptForm) {
+export function updateDept(id: number, data: DeptForm) {
   return request({
     url: '/api/v1/dept/' + id,
     method: 'put',

src/api/dept/types.ts

@@ -2,33 +2,70 @@
  * 部门查询参数
  */
 export interface DeptQuery {
-  keywords: string | undefined;
+  keywords?: string;
-  status: number | undefined;
+  status?: number;
 }
 
 /**
  * 部门类型
  */
-export interface Dept {
+export interface DeptVO {
-  id: string;
+  /**
-  name: string;
+   * 子部门
-  parentId: string;
+   */
-  treePath: string;
+  children?: DeptVO[];
-  sort: number;
+  /**
-  status: number;
+   * 创建时间
-  leader?: string;
+   */
-  mobile?: string;
+  createTime?: Date;
-  email?: string;
+  /**
-  children: Dept[];
+   * 部门ID
+   */
+  id?: number;
+  /**
+   * 部门名称
+   */
+  name?: string;
+  /**
+   * 父部门ID
+   */
+  parentId?: number;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态(1:启用；0:禁用)
+   */
+  status?: number;
+  /**
+   * 修改时间
+   */
+  updateTime?: Date;
 }
 
 /**
  * 部门表单类型
  */
 export interface DeptForm {
-  id?: string;
+  /**
-  parentId: string;
+   * 部门ID(新增不填)
-  name: string;
+   */
-  sort: number;
+  id?: number;
-  status: number;
+  /**
+   * 部门名称
+   */
+  name?: string;
+  /**
+   * 父部门ID
+   */
+  parentId: number;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态(1:启用；0：禁用)
+   */
+  status?: number;
 }

src/api/dict/index.ts

@@ -1,31 +1,31 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import {
-  DictQuery,
+  DictTypeQuery,
-  DictPageResult,
+  DictTypePageResult,
   DictTypeForm,
-  DictItemQuery,
+  DictQuery,
-  DictItemPageResult,
+  DictForm,
-  DictItemForm
+  DictPageResult
 } from './types';
 
 /**
- * 获取字典类型分页列表
+ * 字典类型分页列表
  *
  * @param queryParams
  */
-export function listDictTypePages(
+export function getDictTypePage(
-  queryParams: DictQuery
+  queryParams: DictTypeQuery
-): AxiosPromise<DictPageResult> {
+): AxiosPromise<DictTypePageResult> {
   return request({
-    url: '/api/v1/dict/types/pages',
+    url: '/api/v1/dict/types/page',
     method: 'get',
     params: queryParams
   });
 }
 
 /**
- * 获取字典类型表单数据
+ * 字典类型表单数据
  *
  * @param id
  */
@@ -78,7 +78,7 @@ export function deleteDictTypes(ids: string) {
  *
  * @param typeCode 字典类型编码
  */
-export function getDictionaries(typeCode: string): AxiosPromise<OptionType[]> {
+export function getDictOptions(typeCode: string): AxiosPromise<OptionType[]> {
   return request({
     url: '/api/v1/dict/types/' + typeCode + '/items',
     method: 'get'
@@ -86,36 +86,36 @@ export function getDictionaries(typeCode: string): AxiosPromise<OptionType[]> {
 }
 
 /**
- * 获取字典项分页列表
+ * 字典分页列表
  */
-export function listDictItemPages(
+export function getDictPage(
-  queryParams: DictItemQuery
+  queryParams: DictQuery
-): AxiosPromise<DictItemPageResult> {
+): AxiosPromise<DictPageResult> {
   return request({
-    url: '/api/v1/dict/items/pages',
+    url: '/api/v1/dict/page',
     method: 'get',
     params: queryParams
   });
 }
 
 /**
- * 获取字典数据项表单数据
+ * 获取字典表单数据
  *
  * @param id
  */
-export function getDictItemData(id: number): AxiosPromise<DictItemForm> {
+export function getDictFormData(id: number): AxiosPromise<DictForm> {
   return request({
-    url: '/api/v1/dict/items/' + id + '/form',
+    url: '/api/v1/dict/' + id + '/form',
     method: 'get'
   });
 }
 
 /**
- * 新增字典项
+ * 新增字典
  *
  * @param data
  */
-export function saveDictItem(data: DictItemForm) {
+export function addDict(data: DictForm) {
   return request({
     url: '/api/v1/dict/items',
     method: 'post',
@@ -129,22 +129,22 @@ export function saveDictItem(data: DictItemForm) {
  * @param id
  * @param data
  */
-export function updateDictItem(id: number, data: DictItemForm) {
+export function updateDict(id: number, data: DictForm) {
   return request({
-    url: '/api/v1/dict/items/' + id,
+    url: '/api/v1/dict/' + id,
     method: 'put',
     data: data
   });
 }
 
 /**
- * 批量删除字典数据项
+ * 删除字典
  *
  * @param ids 字典项ID，多个以英文逗号(,)分割
  */
-export function deleteDictItems(ids: string) {
+export function deleteDict(ids: string) {
   return request({
-    url: '/api/v1/dict/items/' + ids,
+    url: '/api/v1/dict/' + ids,
     method: 'delete'
   });
 }

src/api/dict/types.ts

@@ -1,44 +1,74 @@
 /**
- * 字典查询参数
+ * 字典类型查询参数
  */
-export interface DictQuery extends PageQuery {
+export interface DictTypeQuery extends PageQuery {
   /**
-   * 字典名称
+   * 字典类型名称
    */
   name?: string;
 }
 
 /**
- * 字典类型
+ * 字典类型分页对象
+ */
+export interface DictTypePageVO {
+  /**
+   * 字典类型ID
    */
-export interface Dict {
   id: number;
+  /**
+   * 类型编码
+   */
   code: string;
+  /**
+   * 类型名称
+   */
   name: string;
-  status: number;
+  /**
-  remark: string;
+   * 状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 备注
+   */
+  remark?: string;
 }
 
 /**
  * 字典分页项类型声明
  */
-export type DictPageResult = PageResult<Dict[]>;
+export type DictTypePageResult = PageResult<DictTypePageVO[]>;
 
 /**
  * 字典表单类型声明
  */
 export interface DictTypeForm {
-  id: number | undefined;
+  /**
-  name: string;
+   * 字典类型ID
-  code: string;
+   */
+  id?: number;
+  /**
+   * 类型名称
+   */
+  name?: string;
+  /**
+   * 类型编码
+   */
+  code?: string;
+  /**
+   * 类型状态：1:启用;0:禁用
+   */
   status: number;
-  remark: string;
+  /**
+   * 备注
+   */
+  remark?: string;
 }
 
 /**
- * 字典项查询参数类型声明
+ * 字典查询参数
  */
-export interface DictItemQuery extends PageQuery {
+export interface DictQuery extends PageQuery {
   /**
    * 字典项名称
    */
@@ -50,35 +80,63 @@ export interface DictItemQuery extends PageQuery {
 }
 
 /**
- * 字典数据项类型
+ * 字典分页对象
+ */
+export interface DictPageVO {
+  /**
+   * 字典ID
+   */
+  id?: number;
+  /**
+   * 字典名称
+   */
+  name?: string;
+  /**
+   * 状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 字典值
+   */
+  value?: string;
+}
+
+/**
+ * 字典分页
+ */
+export type DictPageResult = PageResult<DictPageVO[]>;
+
+/**
+ * 字典表单
+ */
+export interface DictForm {
+  /**
+   * 字典ID
+   */
+  id?: number;
+  /**
+   * 字典名称
+   */
+  name?: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 类型编码
+   */
+  typeCode?: string;
+  /**
+   * 值
+   */
+  value?: string;
+
+  /**
+   * 备注
    */
-export interface DictItem {
-  id: number;
-  name: string;
-  value: string;
-  typeCode: string;
-  sort: number;
-  status: number;
-  defaulted: number;
   remark?: string;
 }
-
-/**
- * 字典分页项类型声明
- */
-export type DictItemPageResult = PageResult<DictItem[]>;
-
-/**
- * 字典表单类型声明
- */
-export interface DictItemForm {
-  id?: number;
-  typeCode?: string;
-  typeName?: string;
-  name: string;
-  code: string;
-  value: string;
-  status: number;
-  sort: number;
-  remark: string;
-}

src/api/menu/index.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { MenuQuery, Menu, Resource, MenuForm } from './types';
+import { MenuQuery, MenuVO, MenuForm } from './types';
 
 /**
  * 获取路由列表
@@ -13,11 +13,11 @@ export function listRoutes() {
 }
 
 /**
- * 获取菜单表格列表
+ * 获取菜单树形列表
  *
  * @param queryParams
  */
-export function listMenus(queryParams: MenuQuery): AxiosPromise<Menu[]> {
+export function listMenus(queryParams: MenuQuery): AxiosPromise<MenuVO[]> {
   return request({
     url: '/api/v1/menus',
     method: 'get',
@@ -36,22 +36,13 @@ export function listMenuOptions(): AxiosPromise<OptionType[]> {
 }
 
 /**
- * 获取资源(菜单+权限)树形列表
+ * 获取菜单表单数据
- */
+ *
-export function listResources(): AxiosPromise<Resource[]> {
-  return request({
-    url: '/api/v1/menus/resources',
-    method: 'get'
-  });
-}
-
-/**
- * 获取菜单详情
  * @param id
  */
-export function getMenuDetail(id: string): AxiosPromise<MenuForm> {
+export function getMenuForm(id: number): AxiosPromise<MenuForm> {
   return request({
-    url: '/api/v1/menus/' + id,
+    url: '/api/v1/menus/' + id + '/form',
     method: 'get'
   });
 }
@@ -84,13 +75,13 @@ export function updateMenu(id: string, data: MenuForm) {
 }
 
 /**
- * 批量删除菜单
+ * 删除菜单
  *
- * @param ids 菜单ID，多个以英文逗号(,)分割
+ * @param id 菜单ID
  */
-export function deleteMenus(ids: string) {
+export function deleteMenu(id: number) {
   return request({
-    url: '/api/v1/menus/' + ids,
+    url: '/api/v1/menus/' + id,
     method: 'delete'
   });
 }

src/api/menu/types.ts

@@ -1,30 +1,72 @@
+import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+
 /**
- * 菜单查询参数类型声明
+ * 菜单查询参数类型
  */
 export interface MenuQuery {
   keywords?: string;
 }
 
 /**
- * 菜单分页列表项声明
+ * 菜单视图对象类型
+ */
+export interface MenuVO {
+  /**
+   * 子菜单
+   */
+  children?: MenuVO[];
+  /**
+   * 组件路径
+   */
+  component?: string;
+  /**
+   * ICON
+   */
+  icon?: string;
+  /**
+   * 菜单ID
    */
-
-export interface Menu {
   id?: number;
-  parentId: number;
+  /**
-  type?: string | 'CATEGORY' | 'MENU' | 'EXTLINK';
+   * 菜单名称
-  createTime: string;
+   */
-  updateTime: string;
+  name?: string;
-  name: string;
+  /**
-  icon: string;
+   * 父菜单ID
-  component: string;
+   */
-  sort: number;
+  parentId?: number;
-  visible: number;
+  /**
-  children: Menu[];
+   * 按钮权限标识
+   */
+  perm?: string;
+  /**
+   * 跳转路径
+   */
+  redirect?: string;
+  /**
+   * 路由名称
+   */
+  routeName?: string;
+  /**
+   * 路由相对路径
+   */
+  routePath?: string;
+  /**
+   * 菜单排序(数字越小排名越靠前)
+   */
+  sort?: number;
+  /**
+   * 菜单类型
+   */
+  type?: MenuTypeEnum;
+  /**
+   * 菜单是否可见(1:显示;0:隐藏)
+   */
+  visible?: number;
 }
 
 /**
- * 菜单表单类型声明
+ * 菜单表单对象类型
  */
 export interface MenuForm {
   /**
@@ -34,11 +76,11 @@ export interface MenuForm {
   /**
    * 父菜单ID
    */
-  parentId: string;
+  parentId?: number;
   /**
    * 菜单名称
    */
-  name: string;
+  name?: string;
   /**
    * 菜单是否可见(1:是;0:否;)
    */
@@ -55,7 +97,7 @@ export interface MenuForm {
   /**
    * 路由路径
    */
-  path: string;
+  path?: string;
   /**
    * 跳转路由路径
    */
@@ -64,42 +106,10 @@ export interface MenuForm {
   /**
    * 菜单类型
    */
-  type: string;
+  type: MenuTypeEnum;
 
   /**
    * 权限标识
    */
   perm?: string;
 }
-
-/**
- * 资源(菜单+权限)类型
- */
-export interface Resource {
-  /**
-   * 菜单值
-   */
-  value: string;
-  /**
-   * 菜单文本
-   */
-  label: string;
-  /**
-   * 子菜单
-   */
-  children: Resource[];
-}
-
-/**
- * 权限类型
- */
-export interface Permission {
-  /**
-   * 权限值
-   */
-  value: string;
-  /**
-   * 权限文本
-   */
-  label: string;
-}

src/api/role/index.ts

@@ -7,11 +7,11 @@ import { RoleQuery, RolePageResult, RoleForm } from './types';
  *
  * @param queryParams
  */
-export function listRolePages(
+export function getRolePage(
   queryParams?: RoleQuery
 ): AxiosPromise<RolePageResult> {
   return request({
-    url: '/api/v1/roles/pages',
+    url: '/api/v1/roles/page',
     method: 'get',
     params: queryParams
   });
@@ -33,11 +33,11 @@ export function listRoleOptions(
 }
 
 /**
- * 获取角色拥有的资源ID集合
+ * 获取角色的菜单ID集合
  *
  * @param queryParams
  */
-export function getRoleMenuIds(roleId: string): AxiosPromise<number[]> {
+export function getRoleMenuIds(roleId: number): AxiosPromise<number[]> {
   return request({
     url: '/api/v1/roles/' + roleId + '/menuIds',
     method: 'get'
@@ -45,12 +45,12 @@ export function getRoleMenuIds(roleId: string): AxiosPromise<number[]> {
 }
 
 /**
- * 修改角色资源权限
+ * 分配菜单权限给角色
  *
  * @param queryParams
  */
 export function updateRoleMenus(
-  roleId: string,
+  roleId: number,
   data: number[]
 ): AxiosPromise<any> {
   return request({
@@ -65,9 +65,9 @@ export function updateRoleMenus(
  *
  * @param id
  */
-export function getRoleDetail(id: number): AxiosPromise<RoleForm> {
+export function getRoleForm(id: number): AxiosPromise<RoleForm> {
   return request({
-    url: '/api/v1/roles/' + id,
+    url: '/api/v1/roles/' + id + '/form',
     method: 'get'
   });
 }

src/api/role/types.ts

@@ -1,40 +1,78 @@
 /**
- * 角色查询参数类型
+ * 角色查询参数
  */
 export interface RoleQuery extends PageQuery {
   keywords?: string;
 }
 
 /**
- * 角色分页列表项
+ * 角色分页对象
  */
-export interface Role {
+export interface RolePageVO {
-  id: string;
+  /**
-  name: string;
+   * 角色编码
-  code: string;
+   */
-  sort: number;
+  code?: string;
-  status: number;
+
-  deleted: number;
+  /**
-  menuIds?: any;
+   * 角色ID
-  permissionIds?: any;
+   */
+  id?: number;
+  /**
+   * 角色名称
+   */
+  name?: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 角色状态
+   */
+  status?: number;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 修改时间
+   */
+  updateTime?: Date;
 }
 
 /**
- * 角色分页项类型
+ * 角色分页
  */
-export type RolePageResult = PageResult<Role[]>;
+export type RolePageResult = PageResult<RolePageVO[]>;
 
 /**
- * 角色表单
+ * 角色表单对象
  */
 export interface RoleForm {
+  /**
+   * 角色ID
+   */
   id?: number;
-  name: string;
+
+  /**
+   * 角色编码
+   */
   code: string;
-  sort: number;
-  status: number;
   /**
    * 数据权限
    */
-  dataScope: number;
+  dataScope?: number;
+
+  /**
+   * 角色名称
+   */
+  name: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 角色状态(1-正常；0-停用)
+   */
+  status?: number;
 }

src/api/user/index.ts

@@ -17,11 +17,11 @@ export function getUserInfo(): AxiosPromise<UserInfo> {
  *
  * @param queryParams
  */
-export function listUserPages(
+export function getUserPage(
   queryParams: UserQuery
 ): AxiosPromise<PageResult<UserPageVO[]>> {
   return request({
-    url: '/api/v1/users/pages',
+    url: '/api/v1/users/page',
     method: 'get',
     params: queryParams
   });
@@ -139,14 +139,13 @@ export function exportUser(queryParams: UserQuery) {
  *
  * @param file
  */
-export function importUser(deptId: number, roleIds: string, file: File) {
+export function importUser(deptId: number, file: File) {
   const formData = new FormData();
   formData.append('file', file);
-  formData.append('deptId', deptId.toString());
-  formData.append('roleIds', roleIds);
   return request({
     url: '/api/v1/users/_import',
     method: 'post',
+    params: { deptId: deptId },
     data: formData,
     headers: {
       'Content-Type': 'multipart/form-data'

src/api/user/types.ts

@@ -12,9 +12,9 @@ export interface UserInfo {
  * 用户查询对象类型
  */
 export interface UserQuery extends PageQuery {
-  keywords: string;
+  keywords?: string;
-  status: number;
+  status?: number;
-  deptId: number;
+  deptId?: number;
 }
 
 /**
@@ -109,11 +109,3 @@ export interface UserForm {
    */
   username?: string;
 }
-
-/**
- * 用户导入视图对象类型
- */
-export interface UserImportVO {
-  deptId: number;
-  roleIds: number[];
-}

src/enums/MenuTypeEnum.ts

@@ -0,0 +1,19 @@
+export enum MenuTypeEnum {
+  /**
+   * 目录
+   */
+  CATALOG = 'CATALOG',
+  /**
+   * 菜单
+   */
+  MENU = 'MENU',
+
+  /**
+   * 按钮
+   */
+  BUTTON = 'BUTTON',
+  /**
+   * 外链
+   */
+  EXTLINK = 'EXTLINK'
+}

src/store/modules/user.ts

@@ -13,8 +13,8 @@ import { useStorage } from '@vueuse/core';
 export const useUserStore = defineStore('user', () => {
   // state
   const token = useStorage('accessToken', '');
-  const nickname = ref<string>('');
+  const nickname = ref('');
-  const avatar = ref<string>('');
+  const avatar = ref('');
   const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
   const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
 
@@ -28,8 +28,8 @@ export const useUserStore = defineStore('user', () => {
     return new Promise<void>((resolve, reject) => {
       loginApi(loginData)
         .then(response => {
-          const { accessToken } = response.data;
+          const { tokenType, accessToken } = response.data;
-          token.value = accessToken;
+          token.value = tokenType + ' ' + accessToken;
           resolve();
         })
         .catch(error => {

src/views/login/index.vue

@@ -72,8 +72,6 @@
 </template>
 
 <script setup lang="ts">
-// 组件依赖
-import { ElForm, ElInput } from 'element-plus';
 import router from '@/router';
 import LangSelect from '@/components/LangSelect/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';

src/views/system/dept/index.vue

@@ -5,142 +5,127 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from 'vue';
-
 import {
   getDeptForm,
   deleteDept,
   updateDept,
   addDept,
   listDeptOptions,
-  listDepartments
+  listDepts
 } from '@/api/dept';
 
-import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
+import { DeptVO, DeptForm, DeptQuery } from '@/api/dept/types';
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import { Dept, DeptForm, DeptQuery } from '@/api/dept/types';
 
 const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
+const deptFormRef = ref(ElForm);
 
-const state = reactive({
+const loading = ref(false);
-  loading: false,
+let ids = reactive([]);
-  // 选中ID数组
+const dialog = reactive<DialogOption>({
-  ids: [] as number[],
+  visible: false
-  // 表格树数据
-  dataList: [] as Dept[],
-  deptOptions: [] as OptionType[],
-  dialog: { visible: false } as DialogType,
-  queryParams: {} as DeptQuery,
-  formData: {
-    sort: 1,
-    status: 1
-  } as DeptForm,
-  rules: {
-    parentId: [
-      { required: true, message: '上级部门不能为空', trigger: 'blur' }
-    ],
-    name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
-    sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
-  }
 });
 
-const {
+const queryParams = reactive<DeptQuery>({});
-  ids,
+const deptList = ref<DeptVO[]>();
-  loading,
+
-  dataList,
+const deptOptions = ref<OptionType[]>();
-  deptOptions,
+
-  queryParams,
+const formData = reactive<DeptForm>({
-  formData,
+  status: 1,
-  rules,
+  parentId: 0
-  dialog
+});
-} = toRefs(state);
+
+const rules = reactive({
+  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
+});
 
 /**
  * 查询
  */
 function handleQuery() {
   loading.value = true;
-  listDepartments(state.queryParams).then(({ data }) => {
+  listDepts(queryParams).then(({ data }) => {
-    dataList.value = data;
+    deptList.value = data;
     loading.value = false;
   });
 }
 
 /**
- * 重置
+ * 重置查询
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
 }
 
+/**
+ * 行复选框选中记录选中ID集合
+ */
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
+  ids = selection.map((item: any) => item.id);
 }
 
 /**
  * 获取部门下拉数据
  */
 async function getDeptOptions() {
-  const deptOptions: any[] = [];
   listDeptOptions().then(response => {
-    const rootDeptOption = {
+    deptOptions.value = [
-      value: '0',
+      {
+        value: 0,
         label: '顶级部门',
         children: response.data
-    };
+      }
-    deptOptions.push(rootDeptOption);
+    ];
-    state.deptOptions = deptOptions;
   });
 }
 
 /**
- * 添加
+ * 打开弹窗
+ *
+ * @param parentId 父部门ID
+ * @param deptId 部门ID
  */
-function handleAdd(row: any) {
+async function openDialog(parentId?: number, deptId?: number) {
-  getDeptOptions();
-  formData.value.id = undefined;
-  formData.value.parentId = row.id;
-  dialog.value = {
-    title: '添加部门',
-    visible: true
-  };
-}
-
-/**
- * 修改
- */
-async function handleUpdate(row: any) {
   await getDeptOptions();
-  const deptId = row.id || state.ids;
+  dialog.visible = true;
-  state.dialog = {
+  if (deptId) {
-    title: '修改部门',
+    dialog.title = '修改部门';
-    visible: true
+    getDeptForm(deptId).then(({ data }) => {
-  };
+      Object.assign(formData, data);
-  getDeptForm(deptId).then((response: any) => {
-    state.formData = response.data;
     });
+  } else {
+    dialog.title = '新增部门';
+    formData.parentId = parentId ?? 0;
+  }
 }
 
 /**
- * 提交
+ * 表单提交
  */
-function submitForm() {
+function handleSubmit() {
-  dataFormRef.value.validate((valid: any) => {
+  deptFormRef.value.validate((valid: any) => {
     if (valid) {
-      if (state.formData.id) {
+      const deptId = formData.id;
-        updateDept(state.formData.id, state.formData).then(() => {
+      loading.value = true;
+      if (deptId) {
+        updateDept(deptId, formData)
+          .then(() => {
             ElMessage.success('修改成功');
             closeDialog();
             handleQuery();
-        });
+          })
+          .finally(() => (loading.value = false));
       } else {
-        addDept(state.formData).then(() => {
+        addDept(formData)
+          .then(() => {
             ElMessage.success('新增成功');
             closeDialog();
             handleQuery();
-        });
+          })
+          .finally(() => (loading.value = false));
       }
     }
   });
@@ -150,8 +135,8 @@ function submitForm() {
  * 删除
  */
 function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
+  const deptIds = [row.id || ids].join(',');
-  if (!ids) {
+  if (!deptIds) {
     ElMessage.warning('请勾选删除项');
     return;
   }
@@ -162,7 +147,7 @@ function handleDelete(row: any) {
     type: 'warning'
   })
     .then(() => {
-      deleteDept(ids)
+      deleteDept(deptIds)
         .then(() => {
           handleQuery();
           ElMessage.success('删除成功');
@@ -176,11 +161,22 @@ function handleDelete(row: any) {
 
 /**
  * 关闭弹窗
- **/
+ */
 function closeDialog() {
-  dialog.value.visible = false;
+  dialog.visible = false;
-  dataFormRef.value.resetFields();
+  resetForm();
-  dataFormRef.value.clearValidate();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  deptFormRef.value.resetFields();
+  deptFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.parentId = 0;
+  formData.status = 1;
 }
 
 onMounted(() => {
@@ -210,15 +206,11 @@ onMounted(() => {
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button class="filter-item" type="primary" @click="handleQuery">
-            class="filter-item"
+            <i-ep-search />
-            type="primary"
-            :icon="Search"
-            @click="handleQuery"
-          >
             搜索
           </el-button>
-          <el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
+          <el-button @click="resetQuery"> <i-ep-refresh />重置 </el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -226,58 +218,68 @@ onMounted(() => {
     <el-card>
       <!--toolbar-->
       <template #header>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
+        <el-button type="success" @click="openDialog(0, undefined)"
-          >新增</el-button
+          ><i-ep-plus />新增</el-button
         >
         <el-button
           type="danger"
-          :icon="Delete"
           @click="handleDelete"
           :disabled="ids.length === 0"
-          >删除
+          ><i-ep-delete />删除
         </el-button>
       </template>
 
-      <!--table-->
       <el-table
         v-loading="loading"
-        :data="dataList"
+        :data="deptList"
         row-key="id"
         default-expand-all
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column prop="name" label="部门名称" min-width="300" />
+        <el-table-column prop="name" label="部门名称" min-width="200" />
-        <el-table-column prop="status" label="状态" width="200">
+        <el-table-column prop="status" label="状态" width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
             <el-tag v-else type="info">禁用</el-tag>
           </template>
         </el-table-column>
 
-        <el-table-column prop="sort" label="排序" width="200" />
+        <el-table-column prop="sort" label="排序" width="100" />
 
-        <el-table-column prop="createTime" label="创建时间" width="250" />
+        <el-table-column prop="createTime" label="创建时间" width="200" />
-        <el-table-column prop="updateTime" label="修改时间" width="250" />
+        <el-table-column prop="updateTime" label="修改时间" width="200" />
 
-        <el-table-column label="操作" align="center" width="150">
+        <el-table-column label="操作" fixed="right" align="left" width="200">
           <template #default="scope">
-            <el-button type="primary" link @click.stop="handleAdd(scope.row)"
+            <el-button
-              >新增
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id, undefined)"
+              ><i-ep-plus />新增
             </el-button>
-            <el-button type="success" link @click.stop="handleUpdate(scope.row)"
+            <el-button
-              >编辑
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id, scope.row.parentId)"
+              ><i-ep-edit />编辑
             </el-button>
-            <el-button type="danger" link @click.stop="handleDelete(scope.row)">
+            <el-button
-              删除
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id, scope.row.parentId)"
+            >
+              <i-ep-delete />删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
 
-    <!-- dialog -->
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
@@ -285,7 +287,7 @@ onMounted(() => {
       @closed="closeDialog"
     >
       <el-form
-        ref="dataFormRef"
+        ref="deptFormRef"
         :model="formData"
         :rules="rules"
         label-width="80px"
@@ -321,7 +323,7 @@ onMounted(() => {
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm"> 确 定 </el-button>
+          <el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
           <el-button @click="closeDialog"> 取 消 </el-button>
         </div>
       </template>

src/views/system/dict/DictData.vue

@@ -0,0 +1,302 @@
+<!-- 字典数据 -->
+<script lang="ts">
+export default {
+  name: 'dictData'
+};
+</script>
+
+<script setup lang="ts">
+import {
+  getDictPage,
+  getDictFormData,
+  addDict,
+  updateDict,
+  deleteDict
+} from '@/api/dict';
+import { DictPageVO, DictForm, DictQuery } from '@/api/dict/types';
+
+const props = defineProps({
+  typeCode: {
+    type: String,
+    default: () => {
+      return '';
+    }
+  },
+  typeName: {
+    type: String,
+    default: () => {
+      return '';
+    }
+  }
+});
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<DictQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  typeCode: props.typeCode
+});
+
+const dictList = ref<DictPageVO[]>();
+
+const dialog = reactive<DialogOption>({
+  visible: false
+});
+
+const formData = reactive<DictForm>({
+  status: 1,
+  typeCode: props.typeCode,
+  sort: 1
+});
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
+  value: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
+});
+
+/**
+ * 查询
+ */
+function handleQuery() {
+  if (queryParams.typeCode) {
+    loading.value = true;
+    getDictPage(queryParams)
+      .then(({ data }) => {
+        dictList.value = data.list;
+        total.value = data.total;
+      })
+      .finally(() => (loading.value = false));
+  }
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+/**
+ * 行checkbox change事件
+ *
+ * @param selection
+ */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/**
+ * 打开字典表单弹窗
+ *
+ * @param dictId 字典ID
+ */
+function openDialog(dictId?: number) {
+  dialog.visible = true;
+  if (dictId) {
+    dialog.title = '修改字典';
+    getDictFormData(dictId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = '新增字典';
+  }
+}
+
+/**
+ * 字典表单提交
+ */
+function handleSubmit() {
+  loading.value = false;
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      const dictId = formData.id;
+      if (dictId) {
+        updateDict(dictId, formData)
+          .then(() => {
+            ElMessage.success('修改成功');
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        addDict(formData)
+          .then(() => {
+            ElMessage.success('新增成功');
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
+  formData.sort = 1;
+  formData.typeCode = props.typeCode;
+}
+
+/**
+ * 删除字典
+ */
+function handleDelete(dictId: number) {
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const dictIds = [dictId || ids.value].join(',');
+    deleteDict(dictIds).then(() => {
+      ElMessage.success('删除成功');
+      resetQuery();
+    });
+  });
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="search">
+      <!-- 搜索表单 -->
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="字典名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"
+            ><i-ep-search />搜索</el-button
+          >
+          <el-button @click="resetQuery"> <i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-card shadow="never">
+      <template #header>
+        <el-button type="success" @click="openDialog()"
+          ><i-ep-plus />新增</el-button
+        >
+        <el-button
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete"
+          ><i-ep-delete />删除</el-button
+        >
+      </template>
+
+      <!-- 数据表格 -->
+      <el-table
+        :data="dictList"
+        v-loading="loading"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column label="字典名称" prop="name" />
+        <el-table-column label="字典值" prop="value" />
+        <el-table-column label="状态" align="center">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" align="center">
+          <template #default="scope">
+            <el-button type="primary" link @click="openDialog(scope.row.id)"
+              ><i-ep-edit />编辑</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <!-- 表单弹窗 -->
+    <el-dialog
+      :title="dialog.title"
+      v-model="dialog.visible"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="字典名称">{{ typeName }}</el-form-item>
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典值" prop="value">
+          <el-input v-model="formData.value" placeholder="字典值" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/system/dict/components/DictItem.vue

@@ -1,290 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'dictItem'
-};
-</script>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, watch } from 'vue';
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-
-import {
-  listDictItemPages,
-  getDictItemData,
-  saveDictItem,
-  updateDictItem,
-  deleteDictItems
-} from '@/api/dict';
-import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
-import { DictItem, DictItemForm, DictItemQuery } from '@/api/dict/types';
-
-const props = defineProps({
-  typeCode: {
-    type: String,
-    default: () => {
-      return '';
-    }
-  },
-  typeName: {
-    type: String,
-    default: () => {
-      return '';
-    }
-  }
-});
-
-watch(
-  () => props.typeCode,
-  value => {
-    state.queryParams.typeCode = value;
-    state.formData.typeCode = value;
-    handleQuery();
-  }
-);
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [] as number[],
-  total: 0,
-  queryParams: { pageNum: 1, pageSize: 10 } as DictItemQuery,
-  dictItemList: [] as DictItem[],
-  dialog: { visible: false } as DialogType,
-  formData: {
-    typeCode: props.typeCode,
-    typeName: props.typeName,
-    status: 1,
-    sort: 1
-  } as DictItemForm,
-  rules: {
-    name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
-    value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
-  },
-  localDictCode: props.typeCode,
-  localDictName: props.typeName
-});
-
-const {
-  loading,
-  ids,
-  queryParams,
-  dictItemList,
-  dialog,
-  formData,
-  rules,
-  total
-} = toRefs(state);
-
-function handleQuery() {
-  if (queryParams.value.typeCode) {
-    loading.value = true;
-    listDictItemPages(state.queryParams).then(({ data }) => {
-      dictItemList.value = data.list;
-      total.value = data.total;
-      loading.value = false;
-    });
-  } else {
-    dictItemList.value = [];
-    total.value = 0;
-    queryParams.value.pageNum = 1;
-    loading.value = false;
-  }
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-}
-
-function handleAdd() {
-  if (!state.formData.typeCode) {
-    ElMessage.warning('请选择字典类型后添加数据项');
-    return;
-  }
-  state.dialog = {
-    title: '添加字典数据项',
-    visible: true
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: '修改字典数据项',
-    visible: true
-  };
-  const id = row.id || state.ids;
-  getDictItemData(id).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateDictItem(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改成功');
-          cancel();
-          handleQuery();
-        });
-      } else {
-        saveDictItem(state.formData).then(() => {
-          ElMessage.success('新增成功');
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function cancel() {
-  state.dialog.visible = false;
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      deleteDictItems(ids).then(() => {
-        ElMessage.success('删除成功');
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item label="关键字" prop="name">
-        <el-input v-model="queryParams.name" placeholder="数据标签" clearable />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-card shadow="hover">
-      <template #header>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="ids.length === 0"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </template>
-
-      <!-- 数据表格 -->
-      <el-table
-        :data="dictItemList"
-        v-loading="loading"
-        border
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="50" />
-        <el-table-column label="数据标签" prop="name" />
-        <el-table-column label="数据值" prop="value" />
-        <el-table-column label="状态" align="center">
-          <template #default="scope">
-            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
-            <el-tag v-else type="info">禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center">
-          <template #default="scope">
-            <el-button type="primary" link @click="handleUpdate(scope.row)"
-              >编辑</el-button
-            >
-            <el-button type="danger" link @click.stop="handleDelete(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="handleQuery"
-      />
-    </el-card>
-
-    <!-- 表单弹窗 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      width="500px"
-      @close="cancel"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="字典类型名称">{{ typeName }}</el-form-item>
-        <el-form-item label="数据项名称" prop="name">
-          <el-input
-            v-model="formData.name"
-            placeholder="请输入字典数据项名称"
-          />
-        </el-form-item>
-        <el-form-item label="数据项值" prop="value">
-          <el-input v-model="formData.value" placeholder="请输入字典数据项值" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 80px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="formData.remark" type="textarea"></el-input>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>

src/views/system/dict/components/DictType.vue

@@ -1,250 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'dictType'
-};
-</script>
-
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
-      <el-form-item label="关键字" prop="name">
-        <el-input
-          v-model="state.queryParams.name"
-          placeholder="字典名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery()"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery()">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-card shadow="hover">
-      <template #header>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="ids.length === 0"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </template>
-      <!-- 数据表格 -->
-      <el-table
-        highlight-current-row
-        :data="dictList"
-        v-loading="loading"
-        @row-click="handleRowClick"
-        @selection-change="handleSelectionChange"
-        border
-      >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="字典名称" prop="name" />
-        <el-table-column label="字典编码" prop="code" />
-        <el-table-column label="状态" align="center" width="100">
-          <template #default="scope">
-            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
-            <el-tag v-else type="info">禁用</el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" align="center" width="150">
-          <template #default="scope">
-            <el-button type="primary" link @click.stop="handleUpdate(scope.row)"
-              >编辑</el-button
-            >
-            <el-button type="danger" link @click.stop="handleDelete(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="handleQuery"
-      />
-    </el-card>
-
-    <!-- 弹窗表单 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      width="500px"
-      @close="cancel"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
-        <el-form-item label="字典名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入字典名称" />
-        </el-form-item>
-        <el-form-item label="字典编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入字典编码" />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input
-            v-model="formData.remark"
-            type="textarea"
-            placeholder="请输入内容"
-            :autosize="{ minRows: 2, maxRows: 4 }"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from 'vue';
-import {
-  listDictTypePages,
-  getDictTypeForm,
-  addDictType,
-  updateDictType,
-  deleteDictTypes
-} from '@/api/dict';
-import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import { Dict, DictQuery, DictTypeForm } from '@/api/dict/types';
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const emit = defineEmits(['dictClick']);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [] as number[],
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10
-  } as DictQuery,
-  dictList: [] as Dict[],
-  total: 0,
-  dialog: { visible: false } as DialogType,
-  formData: {
-    status: 1
-  } as DictTypeForm,
-  rules: {
-    name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
-  }
-});
-
-const { total, ids, dialog, loading, dictList, formData, rules, queryParams } =
-  toRefs(state);
-
-function handleQuery() {
-  emit('dictClick', null);
-  state.loading = true;
-  listDictTypePages(state.queryParams).then(({ data }) => {
-    state.dictList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-}
-
-function handleAdd() {
-  state.dialog = {
-    title: '添加字典',
-    visible: true
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: '修改字典',
-    visible: true
-  };
-  const id = row.id || state.ids;
-  getDictTypeForm(id).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateDictType(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改成功');
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addDictType(state.formData).then(() => {
-          ElMessage.success('新增成功');
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function cancel() {
-  formData.value.id = undefined;
-  dataFormRef.value.resetFields();
-  dialog.value.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      deleteDictTypes(ids).then(() => {
-        ElMessage.success('删除成功');
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-function handleRowClick(row: any) {
-  emit('dictClick', row);
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>

src/views/system/dict/index.vue

@@ -1,55 +1,333 @@
+<!--字典类型-->
+<script lang="ts">
+export default {
+  name: 'dictType'
+};
+</script>
+
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue';
+import {
-import DictType from './components/DictType.vue';
+  getDictTypePage,
-import DictItem from './components/DictItem.vue';
+  getDictTypeForm,
+  addDictType,
+  updateDictType,
+  deleteDictTypes
+} from '@/api/dict';
 
-import { reactive, toRefs } from 'vue';
+import DictData from '@/views/system/dict/DictData.vue';
 
-const state = reactive({
+import { DictTypePageVO, DictTypeQuery, DictTypeForm } from '@/api/dict/types';
-  typeCode: '',
+
-  typeName: ''
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<DictTypeQuery>({
+  pageNum: 1,
+  pageSize: 10
 });
 
-const { typeCode, typeName } = toRefs(state);
+const dictTypeList = ref<DictTypePageVO[]>();
 
-const handleDictTypeClick = (row: any) => {
+const dialog = reactive<DialogOption>({
-  if (row) {
+  visible: false
-    state.typeName = row.name;
+});
-    state.typeCode = row.code;
+
+const formData = reactive<DictTypeForm>({
+  status: 1
+});
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }]
+});
+
+/**
+ * 查询
+ */
+function handleQuery() {
+  loading.value = true;
+  getDictTypePage(queryParams)
+    .then(({ data }) => {
+      dictTypeList.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/**
+ * 行checkbox change事件
+ *
+ * @param selection
+ */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/**
+ * 打开字典类型表单弹窗
+ *
+ * @param dicTypeId 字典类型ID
+ */
+function openDialog(dicTypeId?: number) {
+  dialog.visible = true;
+  if (dicTypeId) {
+    dialog.title = '修改字典类型';
+    getDictTypeForm(dicTypeId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
   } else {
-    state.typeName = '';
+    dialog.title = '新增字典类型';
-    state.typeCode = '';
   }
-};
+}
+
+/**
+ * 字典类型表单提交
+ */
+function handleSubmit() {
+  loading.value = false;
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      const dictTypeId = formData.id;
+      if (dictTypeId) {
+        updateDictType(dictTypeId, formData)
+          .then(() => {
+            ElMessage.success('修改成功');
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        addDictType(formData)
+          .then(() => {
+            ElMessage.success('新增成功');
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
+}
+
+/**
+ * 删除字典类型
+ */
+function handleDelete(dictTypeId: number) {
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const dictTypeIds = [dictTypeId || ids.value].join(',');
+    deleteDictTypes(dictTypeIds).then(() => {
+      ElMessage.success('删除成功');
+      resetQuery();
+    });
+  });
+}
+
+const dictDataDialog = reactive<DialogOption>({
+  visible: false
+});
+
+// 当前选中的字典类型
+const selectedDictType = reactive({ typeCode: '', typeName: '' });
+
+/**
+ * 打开字典弹窗
+ */
+function openDictDialog(row: DictTypePageVO) {
+  dictDataDialog.visible = true;
+  dictDataDialog.title = '【' + row.name + '】字典数据';
+
+  selectedDictType.typeCode = row.code;
+  selectedDictType.typeName = row.name;
+}
+
+/**
+ * 关闭字典弹窗
+ */
+function closeDictDialog() {
+  dictDataDialog.visible = false;
+}
+
+onMounted(() => {
+  handleQuery();
+});
 </script>
 
 <template>
   <div class="app-container">
-    <el-row :gutter="10">
+    <div class="search">
-      <el-col :span="10" :xs="24">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-card class="box-card">
+        <el-form-item label="关键字" prop="name">
-          <template #header>
+          <el-input
-            <svg-icon icon-class="dict" />
+            v-model="queryParams.name"
-            字典类型
+            placeholder="字典类型名称/编码"
-          </template>
+            clearable
-          <dict-type @dictClick="handleDictTypeClick" />
+            @keyup.enter="handleQuery"
-        </el-card>
+          />
-      </el-col>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery()"
+            ><i-ep-search />搜索</el-button
+          >
+          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
 
-      <el-col :span="14" :xs="24">
+    <el-card shadow="never">
-        <el-card class="box-card">
       <template #header>
-            <svg-icon icon-class="dict_item" />
+        <el-button type="success" @click="openDialog()"
-            <span style="margin: 0 5px">字典数据项</span>
+          ><i-ep-plus />新增</el-button
-            <el-tag type="success" v-if="typeCode" size="small">{{
+        >
-              typeName
+        <el-button
-            }}</el-tag>
+          type="danger"
-            <el-tag type="danger" v-else size="small">未选择字典类型</el-tag>
+          :disabled="ids.length === 0"
+          @click="handleDelete"
+          ><i-ep-delete />删除</el-button
+        >
       </template>
-          <!-- 字典项组件 -->
+      <el-table
-          <dict-item :typeName="typeName" :typeCode="typeCode" />
+        highlight-current-row
+        :data="dictTypeList"
+        v-loading="loading"
+        @selection-change="handleSelectionChange"
+        border
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="字典类型名称" prop="name" width="200" />
+        <el-table-column label="字典类型编码" prop="code" width="200" />
+        <el-table-column label="状态" align="center" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark" align="center" />
+        <el-table-column fixed="right" label="操作" align="center" width="220">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDictDialog(scope.row)"
+              ><i-ep-Collection />字典数据</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id)"
+              ><i-ep-edit />编辑</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
     </el-card>
-      </el-col>
+
-    </el-row>
+    <el-dialog
+      :title="dialog.title"
+      v-model="dialog.visible"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典编码" prop="code">
+          <el-input v-model="formData.code" placeholder="请输入字典编码" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            type="textarea"
+            placeholder="字典类型备注"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--字典数据弹窗-->
+    <el-dialog
+      :title="dictDataDialog.title"
+      v-model="dictDataDialog.visible"
+      width="1000px"
+      @close="closeDictDialog"
+    >
+      <dict-data
+        v-model:typeCode="selectedDictType.typeCode"
+        v-model:typeName="selectedDictType.typeName"
+      />
+    </el-dialog>
   </div>
 </template>

src/views/system/menu/index.vue

@@ -5,40 +5,42 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { MenuQuery, MenuForm, Menu } from '@/api/menu/types';
+import { MenuQuery, MenuForm, MenuVO } from '@/api/menu/types';
-// API 依赖
 import {
   listMenus,
-  getMenuDetail,
+  getMenuForm,
   listMenuOptions,
   addMenu,
-  deleteMenus,
+  deleteMenu,
   updateMenu
 } from '@/api/menu';
 
+import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+
 import SvgIcon from '@/components/SvgIcon/index.vue';
 import IconSelect from '@/components/IconSelect/index.vue';
 
-const emit = defineEmits(['menuClick']);
 const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
+const menuFormRef = ref(ElForm);
 
-const state = reactive({
+const loading = ref(false);
-  loading: true,
+const dialog = reactive<DialogOption>({
-  // 选中ID数组
+  visible: false
-  ids: [],
+});
-  queryParams: {} as MenuQuery,
+
-  menuList: [] as Menu[],
+const queryParams = reactive<MenuQuery>({});
-  dialog: { visible: false } as DialogType,
+const menuList = ref<MenuVO[]>([]);
-  formData: {
+
-    parentId: '0',
+const menuOptions = ref<OptionType[]>([]);
-    name: '',
+
+const formData = reactive<MenuForm>({
+  parentId: 0,
   visible: 1,
   sort: 1,
-    component: undefined,
+  type: MenuTypeEnum.MENU
-    type: 'MENU'
+});
-  } as MenuForm,
+
-  rules: {
+const rules = reactive({
   parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
   name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
   type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
@@ -46,48 +48,31 @@ const state = reactive({
   component: [
     { required: true, message: '请输入组件完整路径', trigger: 'blur' }
   ]
-  },
-  menuOptions: [] as OptionType[],
-  currentRow: undefined,
-  cacheData: {
-    menuType: '',
-    menuPath: ''
-  }
 });
 
-const {
+// 选择表格的行菜单ID
-  loading,
+const selectedRowMenuId = ref<number | undefined>();
-  queryParams,
+
-  menuList,
+const menuCacheData = reactive({
-  dialog,
+  type: '',
-  formData,
+  path: ''
-  rules,
+});
-  menuOptions,
-  cacheData
-} = toRefs(state);
 
 /**
  * 查询
  */
 function handleQuery() {
   // 重置父组件
-  emit('menuClick', null);
   loading.value = true;
-  listMenus(state.queryParams).then(({ data }) => {
+  listMenus(queryParams)
+    .then(({ data }) => {
       menuList.value = data;
+    })
+    .then(() => {
       loading.value = false;
     });
 }
 
-/**
- * 下拉菜单
- */
-async function loadMenuData() {
-  listMenuOptions().then(({ data }) => {
-    menuOptions.value = [{ value: '0', label: '顶级菜单', children: data }];
-  });
-}
-
 /**
  * 查询重置
  */
@@ -96,60 +81,53 @@ function resetQuery() {
   handleQuery();
 }
 
-function handleRowClick(row: any) {
+/**
-  state.currentRow = JSON.parse(JSON.stringify(row));
+ * 行点击事件
-  emit('menuClick', row);
+ *
+ * @param row
+ */
+function onRowClick(row: MenuVO) {
+  selectedRowMenuId.value = row.id;
 }
 
 /**
- * 新增菜单
+ * 打开表单弹窗
+ *
+ * @param parentId 父菜单ID
+ * @param menuId 菜单ID
  */
-async function handleAdd(row: any) {
+function openDialog(parentId?: number, menuId?: number) {
-  dialog.value = {
+  listMenuOptions()
-    title: '添加菜单',
+    .then(({ data }) => {
-    visible: true
+      menuOptions.value = [{ value: 0, label: '顶级菜单', children: data }];
-  };
+    })
-  await loadMenuData();
+    .then(() => {
-  if (row.id) {
+      dialog.visible = true;
-    // 行点击新增
+      if (menuId) {
-    formData.value.parentId = row.id;
+        // 编辑
+        dialog.title = '编辑菜单';
+        getMenuForm(menuId).then(({ data }) => {
+          Object.assign(formData, data);
+          menuCacheData.type = data.type;
+          menuCacheData.path = data.path ?? '';
+        });
       } else {
-    // 工具栏新增
+        // 新增
-    if (state.currentRow) {
+        dialog.title = '新增菜单';
-      // 选择行
+        formData.parentId = parentId;
-      formData.value.parentId = (state.currentRow as any).id;
-    } else {
-      // 未选择行
-      formData.value.parentId = '0';
       }
-  }
-}
-
-/**
- * 编辑菜单
- */
-async function handleUpdate(row: MenuForm) {
-  await loadMenuData();
-  dialog.value = {
-    title: '编辑菜单',
-    visible: true
-  };
-  const id = row.id as string;
-  getMenuDetail(id).then(({ data }) => {
-    state.formData = data;
-    cacheData.value.menuType = data.type;
-    cacheData.value.menuPath = data.path;
     });
 }
 
 /**
  * 菜单类型 change
  */
-function handleMenuTypeChange(menuType: any) {
+function onMenuTypeChange() {
-  if (menuType !== cacheData.value.menuType) {
+  // 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径
-    formData.value.path = '';
+  if (formData.type !== menuCacheData.type) {
+    formData.path = '';
   } else {
-    formData.value.path = cacheData.value.menuPath;
+    formData.path = menuCacheData.path;
   }
 }
 
@@ -157,18 +135,19 @@ function handleMenuTypeChange(menuType: any) {
  * 菜单提交
  */
 function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
+  menuFormRef.value.validate((isValid: boolean) => {
     if (isValid) {
-      if (state.formData.id) {
+      const menuId = formData.id;
-        updateMenu(state.formData.id, state.formData).then(() => {
+      if (menuId) {
+        updateMenu(menuId, formData).then(() => {
           ElMessage.success('修改成功');
-          cancel();
+          closeDialog();
           handleQuery();
         });
       } else {
-        addMenu(state.formData).then(() => {
+        addMenu(formData).then(() => {
           ElMessage.success('新增成功');
-          cancel();
+          closeDialog();
           handleQuery();
         });
       }
@@ -178,17 +157,19 @@ function submitForm() {
 
 /**
  * 删除菜单
- *
  */
-function handleDelete(row: any) {
+function handleDelete(menuId: number) {
-  const ids = [row.id || state.ids].join(',');
+  if (!menuId) {
+    return false;
+  }
+
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   })
     .then(() => {
-      deleteMenus(ids).then(() => {
+      deleteMenu(menuId).then(() => {
         ElMessage.success('删除成功');
         handleQuery();
       });
@@ -197,12 +178,24 @@ function handleDelete(row: any) {
 }
 
 /**
- * 取消关闭弹窗
+ * 闭弹窗
  */
-function cancel() {
+function closeDialog() {
-  formData.value.id = undefined;
+  dialog.visible = false;
-  dataFormRef.value.resetFields();
+  resetForm();
-  dialog.value.visible = false;
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  menuFormRef.value.resetFields();
+  menuFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.parentId = 0;
+  formData.visible = 1;
+  formData.sort = 1;
 }
 
 onMounted(() => {
@@ -234,10 +227,9 @@ onMounted(() => {
       </el-form>
     </div>
 
-    <!-- 数据表格 -->
     <el-card shadow="never">
       <template #header>
-        <el-button type="success" @click="handleAdd">
+        <el-button type="success" @click="openDialog(0)">
           <template #icon><i-ep-plus /></template>
           新增</el-button
         >
@@ -248,10 +240,10 @@ onMounted(() => {
         :data="menuList"
         highlight-current-row
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        @row-click="handleRowClick"
+        @row-click="onRowClick"
         row-key="id"
-        border
         default-expand-all
+        border
       >
         <el-table-column label="菜单名称">
           <template #default="scope">
@@ -266,16 +258,18 @@ onMounted(() => {
 
         <el-table-column label="菜单类型" align="center" width="150">
           <template #default="scope">
-            <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
+            <el-tag
+              v-if="scope.row.type === MenuTypeEnum.CATALOG"
+              type="warning"
               >目录</el-tag
             >
-            <el-tag v-if="scope.row.type === 'MENU'" type="success"
+            <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
               >菜单</el-tag
             >
-            <el-tag v-if="scope.row.type === 'BUTTON'" type="danger"
+            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger"
               >按钮</el-tag
             >
-            <el-tag v-if="scope.row.type === 'EXTLINK'" type="info"
+            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info"
               >外链</el-tag
             >
           </template>
@@ -312,25 +306,32 @@ onMounted(() => {
         >
         </el-table-column>
 
-        <el-table-column label="操作" align="center" width="200">
+        <el-table-column fixed="right" align="center" label="操作" width="220">
           <template #default="scope">
             <el-button
-              type="success"
+              type="primary"
               link
-              @click.stop="handleAdd(scope.row)"
+              size="small"
+              @click.stop="openDialog(scope.row.id)"
               v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
             >
-              新增
+              <i-ep-plus />新增
             </el-button>
 
             <el-button
               type="primary"
               link
-              @click.stop="handleUpdate(scope.row)"
+              size="small"
+              @click.stop="openDialog(undefined, scope.row.id)"
             >
-              编辑
+              <i-ep-edit />编辑
             </el-button>
-            <el-button type="danger" link @click.stop="handleDelete(scope.row)">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />
               删除
             </el-button>
           </template>
@@ -341,13 +342,13 @@ onMounted(() => {
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
-      @close="cancel"
+      @close="closeDialog"
       destroy-on-close
       appendToBody
       width="750px"
     >
       <el-form
-        ref="dataFormRef"
+        ref="menuFormRef"
         :model="formData"
         :rules="rules"
         label-width="100px"
@@ -368,10 +369,7 @@ onMounted(() => {
         </el-form-item>
 
         <el-form-item label="菜单类型" prop="type">
-          <el-radio-group
+          <el-radio-group v-model="formData.type" @change="onMenuTypeChange">
-            v-model="formData.type"
-            @change="handleMenuTypeChange"
-          >
             <el-radio label="CATALOG">目录</el-radio>
             <el-radio label="MENU">菜单</el-radio>
             <el-radio label="BUTTON">按钮</el-radio>
@@ -402,7 +400,7 @@ onMounted(() => {
 
         <!-- 组件页面完整路径 -->
         <el-form-item
-          v-if="formData.type == 'MENU'"
+          v-if="formData.type == MenuTypeEnum.MENU"
           label="页面路径"
           prop="component"
         >
@@ -411,10 +409,10 @@ onMounted(() => {
             placeholder="system/user/index"
             style="width: 95%"
           >
-            <template v-if="formData.parentId != '0'" #prepend
+            <template v-if="formData.parentId != 0" #prepend
               >src/views/</template
             >
-            <template v-if="formData.parentId != '0'" #append>.vue</template>
+            <template v-if="formData.parentId != 0" #append>.vue</template>
           </el-input>
         </el-form-item>
 
@@ -436,7 +434,10 @@ onMounted(() => {
           <icon-select v-model="formData.icon" />
         </el-form-item>
 
-        <el-form-item label="跳转路由" v-if="formData.type == 'CATEGORY'">
+        <el-form-item
+          label="跳转路由"
+          v-if="formData.type == MenuTypeEnum.CATALOG"
+        >
           <el-input v-model="formData.redirect" placeholder="跳转路由" />
         </el-form-item>
 
@@ -460,7 +461,7 @@ onMounted(() => {
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>

src/views/system/role/index.vue

@@ -5,84 +5,73 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from 'vue';
 import {
-  listRolePages,
+  getRolePage,
   updateRole,
-  getRoleDetail,
+  getRoleForm,
   addRole,
   deleteRoles,
   getRoleMenuIds,
   updateRoleMenus
 } from '@/api/role';
-import { listResources } from '@/api/menu';
+import { listMenuOptions } from '@/api/menu';
 
-import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
+import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types';
-import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
-import { Role, RoleForm, RoleQuery } from '@/api/role/types';
 
-const emit = defineEmits(['roleClick']);
 const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
+const roleFormRef = ref(ElForm);
-const resourceRef = ref(ElTree);
+const menuRef = ref(ElTree);
 
-const state = reactive({
+const loading = ref(false);
-  loading: true,
+const ids = ref<number[]>([]);
-  // 选中ID
+const total = ref(0);
-  ids: [] as number[],
+
-  queryParams: {
+const queryParams = reactive<RoleQuery>({
   pageNum: 1,
   pageSize: 10
-  } as RoleQuery,
+});
-  roleList: [] as Role[],
+
-  total: 0,
+const roleList = ref<RolePageVO[]>();
-  dialog: {
+
-    title: '',
+const dialog = reactive<DialogOption>({
   visible: false
-  } as DialogType,
+});
-  formData: {
+
+const formData = reactive<RoleForm>({
   sort: 1,
-    status: 1
+  status: 1,
-  } as RoleForm,
+  code: '',
-  rules: {
+  name: ''
+});
+
+const rules = reactive({
   name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
   code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
   dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
   status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
-  },
-  resourceDialogVisible: false,
-  resourceOptions: [] as OptionType[],
-  // 勾选的菜单ID
-  checkedMenuIds: new Set([]),
-  // 选中的角色
-  checkedRole: {
-    id: '',
-    name: ''
-  }
 });
 
-const {
+const menuDialogVisible = ref(false);
-  ids,
+
-  loading,
+const menuList = ref<OptionType[]>([]);
-  queryParams,
+
-  roleList,
+interface CheckedRole {
-  total,
+  id?: number;
-  dialog,
+  name?: string;
-  formData,
+}
-  rules,
+let checkedRole: CheckedRole = reactive({});
-  resourceDialogVisible,
-  checkedRole,
-  resourceOptions
-} = toRefs(state);
 
 /**
  * 查询
  */
 function handleQuery() {
   loading.value = true;
-  listRolePages(state.queryParams).then(({ data }) => {
+  getRolePage(queryParams)
+    .then(({ data }) => {
       roleList.value = data.list;
       total.value = data.total;
+    })
+    .finally(() => {
       loading.value = false;
     });
 }
@@ -91,134 +80,156 @@ function handleQuery() {
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
   handleQuery();
 }
 
+/**
+ * 行checkbox change事件
+ */
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
+  ids.value = selection.map((item: any) => item.id);
 }
 
-function handleRowClick(row: any) {
+/**
-  emit('roleClick', row);
+ * 打开角色表单弹窗
-}
+ *
-
+ * @param roleId
-function handleAdd() {
+ */
-  dialog.value = {
+function openDialog(roleId?: number) {
-    title: '添加角色',
+  dialog.visible = true;
-    visible: true
+  if (roleId) {
-  };
+    dialog.title = '修改角色';
-}
+    getRoleForm(roleId).then(({ data }) => {
-
+      Object.assign(formData, data);
-function handleUpdate(row: any) {
-  dialog.value = {
-    title: '修改角色',
-    visible: true
-  };
-  const roleId = row.id || state.ids;
-  getRoleDetail(roleId).then(({ data }) => {
-    formData.value = data;
-  });
-}
-
-function handleSubmit() {
-  loading.value = true;
-  dataFormRef.value.validate((valid: any) => {
-    if (valid) {
-      if (state.formData.id) {
-        updateRole(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改角色成功');
-          closeDialog();
-          handleQuery();
-          loading.value = false;
     });
   } else {
-        addRole(state.formData).then(() => {
+    dialog.title = '新增角色';
-          ElMessage.success('新增角色成功');
+  }
+}
+
+/**
+ * 角色表单提交
+ */
+function handleSubmit() {
+  loading.value = true;
+  roleFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const roleId = formData.id;
+      if (roleId) {
+        updateRole(roleId, formData)
+          .then(() => {
+            ElMessage.success('修改成功');
             closeDialog();
-          handleQuery();
+            resetQuery();
-          loading.value = false;
+          })
-        });
+          .finally(() => (loading.value = false));
+      } else {
+        addRole(formData)
+          .then(() => {
+            ElMessage.success('新增成功');
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
       }
     }
   });
 }
 
 /**
- * 取消
+ * 关闭弹窗
  */
 function closeDialog() {
-  dialog.value.visible = false;
+  dialog.visible = false;
-  dataFormRef.value.resetFields();
+  resetForm();
-  dataFormRef.value.clearValidate();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  roleFormRef.value.resetFields();
+  roleFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.sort = 1;
+  formData.status = 1;
 }
 
 /**
  * 删除
  */
-function handleDelete(row: any) {
+function handleDelete(roleId: number) {
-  const ids = [row.id || state.ids].join(',');
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  })
+  }).then(() => {
+    const roleIds = [roleId || ids.value].join(',');
+    loading.value = true;
+    deleteRoles(roleIds)
       .then(() => {
-      deleteRoles(ids).then(() => {
         ElMessage.success('删除成功');
-        handleQuery();
+        resetQuery();
-      });
       })
-    .catch(() => ElMessage.info('已取消删除'));
+      .finally(() => (loading.value = false));
+  });
 }
 
 /**
- * 资源分配弹窗
+ * 打开分配菜单弹窗
  */
-function openResourceDialog(row: Role) {
+function openMenuDialog(row: RolePageVO) {
-  resourceDialogVisible.value = true;
+  const roleId = row.id;
-  loading.value = true;
+  if (roleId) {
-
+    checkedRole = {
-  const roleId: any = row.id;
-  checkedRole.value = {
       id: roleId,
       name: row.name
     };
+    menuDialogVisible.value = true;
+    loading.value = true;
 
-  // 获取所有的资源
+    // 获取所有的菜单
-  listResources().then(response => {
+    listMenuOptions().then(response => {
-    resourceOptions.value = response.data;
+      menuList.value = response.data;
-    // 角色拥有的资源
+      // 回显角色已拥有的菜单
-    getRoleMenuIds(roleId).then(({ data }) => {
+      getRoleMenuIds(roleId)
-      // 勾选回显
+        .then(({ data }) => {
           const checkedMenuIds = data;
+          console.log('勾选权限', checkedMenuIds);
           checkedMenuIds.forEach(menuId =>
-        resourceRef.value.setChecked(menuId, true)
+            menuRef.value.setChecked(menuId, true, false)
           );
-
+        })
+        .finally(() => {
           loading.value = false;
         });
     });
+  }
 }
+
 /**
- * 资源分配提交
+ * 角色分配菜单提交
  */
-function handleAllocationSubmit() {
+function handleRoleMenuSubmit() {
-  const checkedMenuIds: number[] = resourceRef.value
+  const roleId = checkedRole.id;
+  if (roleId) {
+    const checkedMenuIds: number[] = menuRef.value
       .getCheckedNodes(false, true)
       .map((node: any) => node.value);
 
-  updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
+    loading.value = true;
+    updateRoleMenus(roleId, checkedMenuIds)
+      .then(res => {
         ElMessage.success('分配权限成功');
-    resourceDialogVisible.value = false;
+        menuDialogVisible.value = false;
-    handleQuery();
+        resetQuery();
+      })
+      .finally(() => {
+        loading.value = false;
       });
-}
+  }
-
-/**
- * 关闭资源弹窗
- */
-function closeResourceDailog() {
-  resourceDialogVisible.value = false;
 }
 
 onMounted(() => {
@@ -240,25 +251,24 @@ onMounted(() => {
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" :icon="Search" @click="handleQuery"
+          <el-button type="primary" @click="handleQuery"
-            >搜索</el-button
+            ><i-ep-search />搜索</el-button
           >
-          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+          <el-button @click="resetQuery"><i-ep-refresh />重置</el-button>
         </el-form-item>
       </el-form>
     </div>
 
     <el-card shadow="never">
       <template #header>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
+        <el-button type="success" @click="openDialog()"
-          >新增</el-button
+          ><i-ep-plus />新增</el-button
         >
         <el-button
           type="danger"
-          :icon="Delete"
           :disabled="ids.length === 0"
           @click="handleDelete"
-          >删除</el-button
+          ><i-ep-delete />删除</el-button
         >
       </template>
 
@@ -267,12 +277,11 @@ onMounted(() => {
         v-loading="loading"
         :data="roleList"
         @selection-change="handleSelectionChange"
-        @row-click="handleRowClick"
         highlight-current-row
         border
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="角色名称" prop="name" min-width="120" />
+        <el-table-column label="角色名称" prop="name" />
         <el-table-column label="角色编码" prop="code" width="100" />
 
         <el-table-column label="状态" align="center" width="100">
@@ -286,30 +295,36 @@ onMounted(() => {
         <el-table-column prop="createTime" label="创建时间" width="180" />
         <el-table-column prop="updateTime" label="修改时间" width="180" />
 
-        <el-table-column label="操作" align="left">
+        <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
-              type="success"
+              type="primary"
+              size="small"
               link
-              @click.stop="openResourceDialog(scope.row)"
+              @click="openMenuDialog(scope.row)"
             >
-              资源分配
+              <i-ep-position />分配权限
             </el-button>
             <el-button
               type="primary"
+              size="small"
               link
-              @click.stop="handleUpdate(scope.row)"
+              @click="openDialog(scope.row.id)"
             >
-              编辑
+              <i-ep-edit />编辑
             </el-button>
-            <el-button type="danger" link @click.stop="handleDelete(scope.row)">
+            <el-button
-              删除
+              type="primary"
+              size="small"
+              link
+              @click="handleDelete(scope.row.id)"
+            >
+              <i-ep-delete />删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
       <pagination
         v-if="total > 0"
         v-model:total="total"
@@ -319,7 +334,7 @@ onMounted(() => {
       />
     </el-card>
 
-    <!-- dialog -->
+    <!-- 角色表单弹窗 -->
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
@@ -327,7 +342,7 @@ onMounted(() => {
       @close="closeDialog"
     >
       <el-form
-        ref="dataFormRef"
+        ref="roleFormRef"
         :model="formData"
         :rules="rules"
         label-width="100px"
@@ -374,18 +389,18 @@ onMounted(() => {
       </template>
     </el-dialog>
 
-    <!-- assign permission dialog -->
+    <!-- 分配菜单弹窗  -->
     <el-dialog
-      :title="'【' + checkedRole.name + '】资源分配'"
+      :title="'【' + checkedRole.name + '】权限分配'"
-      v-model="resourceDialogVisible"
+      v-model="menuDialogVisible"
       width="800px"
     >
       <el-scrollbar max-height="600px" v-loading="loading">
         <el-tree
-          ref="resourceRef"
+          ref="menuRef"
           node-key="value"
           show-checkbox
-          :data="resourceOptions"
+          :data="menuList"
           :default-expand-all="true"
         >
           <template #default="{ data }">
@@ -396,10 +411,10 @@ onMounted(() => {
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleAllocationSubmit"
+          <el-button type="primary" @click="handleRoleMenuSubmit"
             >确 定</el-button
           >
-          <el-button @click="closeResourceDailog">取 消</el-button>
+          <el-button @click="menuDialogVisible = false">取 消</el-button>
         </div>
       </template>
     </el-dialog>

src/views/system/user/index.vue

@@ -5,18 +5,9 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { UploadFile } from 'element-plus';
 import {
-  reactive,
+  getUserPage,
-  ref,
-  watchEffect,
-  onMounted,
-  getCurrentInstance,
-  toRefs
-} from 'vue';
-
-// api
-import {
-  listUserPages,
   getUserForm,
   deleteUsers,
   addUser,
@@ -30,64 +21,32 @@ import {
 import { listDeptOptions } from '@/api/dept';
 import { listRoleOptions } from '@/api/role';
 
-import {
+import { UserForm, UserQuery, UserPageVO } from '@/api/user/types';
-  ElTree,
-  ElForm,
-  ElMessageBox,
-  ElMessage,
-  UploadFile
-} from 'element-plus';
-import {
-  Search,
-  Plus,
-  Refresh,
-  Delete,
-  UploadFilled
-} from '@element-plus/icons-vue';
-import {
-  UserForm,
-  UserImportVO,
-  UserQuery,
-  UserPageVO
-} from '@/api/user/types';
 
 const deptTreeRef = ref(ElTree); // 部门树
 const queryFormRef = ref(ElForm); // 查询表单
-const dataFormRef = ref(ElForm); // 用户表单
+const userFormRef = ref(ElForm); // 用户表单
-const importFormRef = ref(ElForm); // 导入表单
 
-const { proxy }: any = getCurrentInstance();
+const loading = ref(false);
-
+const ids = ref([]);
-const state = reactive({
+const total = ref(0);
-  // 遮罩层
+const dialog = reactive<DialogOption>({
-  loading: true,
-  // 选中数组
-  ids: [] as number[],
-  // 总条数
-  total: 0,
-  userList: [] as UserPageVO[],
-  dialog: {
   visible: false
-  } as DialogType,
+});
-  deptName: undefined,
+
-  // 部门下拉项
+const queryParams = reactive<UserQuery>({
-  deptOptions: [] as OptionType[],
-  // 性别下拉项
-  genderOptions: [] as OptionType[],
-  // 角色下拉项
-  roleOptions: [] as OptionType[],
-  formData: {
-    status: 1
-  } as UserForm,
-  queryParams: {
   pageNum: 1,
   pageSize: 10
-  } as UserQuery,
+});
-  rules: {
+const userList = ref<UserPageVO[]>();
+
+const formData = reactive<UserForm>({
+  status: 1
+});
+
+const rules = reactive({
   username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
-    nickname: [
+  nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
-      { required: true, message: '用户昵称不能为空', trigger: 'blur' }
-    ],
   deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
   roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
   email: [
@@ -104,37 +63,22 @@ const state = reactive({
       trigger: 'blur'
     }
   ]
-  },
-
-  importDialog: {
-    title: '用户导入',
-    visible: false
-  } as DialogType,
-  importFormData: {} as UserImportVO,
-  excelFile: undefined as any,
-  excelFilelist: [] as File[]
 });
 
-const {
+const searchDeptName = ref();
-  ids,
+const deptList = ref<OptionType[]>();
-  loading,
+const roleList = ref<OptionType[]>();
-  queryParams,
+const importDialog = reactive<DialogOption>({
-  userList,
+  title: '用户导入',
-  total,
+  visible: false
-  dialog,
+});
-  formData,
+const importDeptId = ref<number>(0);
-  rules,
+const excelFile = ref<File>();
-  deptName,
+const excelFilelist = ref<File[]>([]);
-  deptOptions,
-  roleOptions,
-  importDialog,
-  importFormData,
-  excelFilelist
-} = toRefs(state);
 
 watchEffect(
   () => {
-    deptTreeRef.value.filter(state.deptName);
+    deptTreeRef.value.filter(searchDeptName.value);
   },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -144,7 +88,7 @@ watchEffect(
 /**
  * 部门筛选
  */
-function filterDeptNode(value: string, data: any) {
+function handleDeptFilter(value: string, data: any) {
   if (!value) {
     return true;
   }
@@ -152,36 +96,32 @@ function filterDeptNode(value: string, data: any) {
 }
 
 /**
- * 部门树节点click
+ * 部门树节点
  */
 function handleDeptNodeClick(data: { [key: string]: any }) {
-  state.queryParams.deptId = data.value;
+  queryParams.deptId = data.value;
   handleQuery();
 }
 
 /**
- * 获取角色下拉项
+ * 获取角色下拉列表
  */
 async function getRoleOptions() {
   listRoleOptions().then(response => {
-    state.roleOptions = response.data;
+    roleList.value = response.data;
   });
 }
 
 /**
- * 用户状态change
+ * 修改用户状态
  */
 function handleStatusChange(row: { [key: string]: any }) {
   const text = row.status === 1 ? '启用' : '停用';
-  ElMessageBox.confirm(
+  ElMessageBox.confirm('确认要' + text + row.username + '用户吗?', '警告', {
-    '确认要' + text + '' + row.username + '用户吗?',
-    '警告',
-    {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-    }
+  })
-  )
     .then(() => {
       return updateUserStatus(row.id, row.status);
     })
@@ -197,27 +137,31 @@ function handleStatusChange(row: { [key: string]: any }) {
  * 查询
  */
 function handleQuery() {
-  state.loading = true;
+  loading.value = true;
-  listUserPages(state.queryParams).then(({ data }) => {
+  getUserPage(queryParams)
-    state.userList = data.list;
+    .then(({ data }) => {
-    state.total = data.total;
+      userList.value = data.list;
-    state.loading = false;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
     });
 }
 
 /**
- * 重置
+ * 重置查询
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
   handleQuery();
 }
 
 /**
- * 行选中
+ * 行checkbox change事件
  */
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
+  ids.value = selection.map((item: any) => item.id);
 }
 
 /**
@@ -245,53 +189,67 @@ function resetPassword(row: { [key: string]: any }) {
 }
 
 /**
- * 添加用户
+ * 打开弹窗
- **/
+ *
-async function handleAdd() {
+ * @param userId 用户ID
-  state.dialog = {
+ */
-    title: '添加用户',
+async function openDialog(userId?: number) {
-    visible: true
-  };
   await getDeptOptions();
   await getRoleOptions();
+  dialog.visible = true;
+  if (userId) {
+    dialog.title = '修改用户';
+    getUserForm(userId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = '新增用户';
+  }
 }
 
 /**
- * 修改用户
+ * 关闭用户弹窗
- **/
+ */
-async function handleUpdate(row: { [key: string]: any }) {
+function closeDialog() {
-  dialog.value = {
+  dialog.visible = false;
-    title: '修改用户',
+  resetForm();
-    visible: true
+}
-  };
 
-  const userId = row.id || state.ids;
+/**
-  await getDeptOptions();
+ * 重置表单
-  await getRoleOptions();
+ */
-  getUserForm(userId).then(({ data }) => {
+function resetForm() {
-    formData.value = data;
+  userFormRef.value.resetFields();
-  });
+  userFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
 }
 
 /**
  * 表单提交
  */
-function submitForm() {
+function handleSubmit() {
-  dataFormRef.value.validate((valid: any) => {
+  userFormRef.value.validate((valid: any) => {
     if (valid) {
-      const userId = state.formData.id;
+      const userId = formData.id;
+      loading.value = true;
       if (userId) {
-        updateUser(userId, state.formData).then(() => {
+        updateUser(userId, formData)
+          .then(() => {
             ElMessage.success('修改用户成功');
             closeDialog();
-          handleQuery();
+            resetQuery();
-        });
+          })
+          .finally(() => (loading.value = false));
       } else {
-        addUser(state.formData).then(() => {
+        addUser(formData)
+          .then(() => {
             ElMessage.success('新增用户成功');
             closeDialog();
-          handleQuery();
+            resetQuery();
-        });
+          })
+          .finally(() => (loading.value = false));
       }
     }
   });
@@ -300,34 +258,23 @@ function submitForm() {
 /**
  * 删除用户
  */
-function handleDelete(row: { [key: string]: any }) {
+function handleDelete(id: number) {
-  const userIds = row.id || state.ids.join(',');
+  const userIds = ([id] || ids.value).join(',');
-  ElMessageBox.confirm(
+  if (!userIds) {
-    '是否确认删除用户编号为「' + userIds + '」的数据项?',
+    ElMessage.warning('请勾选删除项');
-    '警告',
+    return;
-    {
+  }
+
+  ElMessageBox.confirm('确认删除用户?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-    }
+  }).then(function () {
-  )
-    .then(function () {
     deleteUsers(userIds).then(() => {
       ElMessage.success('删除成功');
-        handleQuery();
+      resetQuery();
+    });
   });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-/**
- * 关闭用户弹窗
- */
-function closeDialog() {
-  dialog.value.visible = false;
-  dataFormRef.value.resetFields();
-  dataFormRef.value.clearValidate();
-  formData.value.id = undefined;
 }
 
 /**
@@ -335,16 +282,7 @@ function closeDialog() {
  */
 async function getDeptOptions() {
   listDeptOptions().then(response => {
-    state.deptOptions = response.data;
+    deptList.value = response.data;
-  });
-}
-
-/**
- * 获取性别下拉项
- */
-function getGenderOptions() {
-  proxy.$getDictionaries('gender').then((response: any) => {
-    state.genderOptions = response?.data;
   });
 }
 
@@ -372,10 +310,10 @@ function downloadTemplate() {
 /**
  * 导入弹窗
  */
-async function showImportDialog() {
+async function openImportDialog() {
   await getDeptOptions();
   await getRoleOptions();
-  importDialog.value.visible = true;
+  importDialog.visible = true;
 }
 
 /**
@@ -386,50 +324,44 @@ async function showImportDialog() {
 function handleExcelChange(file: UploadFile) {
   if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
     ElMessage.warning('上传Excel只能为xlsx、xls格式');
-    state.excelFile = undefined;
+    excelFile.value = undefined;
-    state.excelFilelist = [];
+    excelFilelist.value = [];
     return false;
   }
-  state.excelFile = file.raw;
+  excelFile.value = file.raw;
 }
 
 /**
- * Excel文件上传
+ * 导入用户
  */
-function uploadUser() {
+function handleUserImport() {
-  importFormRef.value.validate((valid: any) => {
+  if (importDeptId.value) {
-    if (valid) {
+    if (!excelFile.value) {
-      if (!state.excelFile) {
       ElMessage.warning('上传Excel文件不能为空');
       return false;
     }
-
+    importUser(importDeptId.value, excelFile.value).then(response => {
-      const deptId = state.importFormData.deptId;
-      const roleIds = state.importFormData.roleIds.join(',');
-      importUser(deptId, roleIds, state.excelFile).then(response => {
       ElMessage.success(response.data);
       closeImportDialog();
-        handleQuery();
+      resetQuery();
     });
   }
-  });
 }
 
 /**
  * 关闭导入弹窗
  */
 function closeImportDialog() {
-  state.importDialog.visible = false;
+  importDialog.visible = false;
-  state.excelFile = undefined;
+  excelFile.value = undefined;
-  state.excelFilelist = [];
+  excelFilelist.value = [];
-  importFormRef.value.resetFields();
 }
 
 /**
  * 导出用户
  */
-function handleExport() {
+function handleUserExport() {
-  exportUser(queryParams.value).then((response: any) => {
+  exportUser(queryParams).then((response: any) => {
     const blob = new Blob([response.data], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
     });
@@ -447,12 +379,8 @@ function handleExport() {
 }
 
 onMounted(() => {
-  // 初始化性别字典
+  getDeptOptions(); // 初始化部门
-  getGenderOptions();
+  handleQuery(); // 初始化用户列表数据
-  // 初始化部门
-  getDeptOptions();
-  // 初始化用户列表数据
-  handleQuery();
 });
 </script>
 
@@ -462,26 +390,25 @@ onMounted(() => {
       <!-- 部门树 -->
       <el-col :lg="4" :xs="24" class="mb-[12px]">
         <el-card shadow="never">
-          <el-input
+          <el-input v-model="searchDeptName" placeholder="部门名称" clearable>
-            v-model="deptName"
+            <template #prefix>
-            placeholder="部门名称"
+              <i-ep-search />
-            clearable
+            </template>
-            :prefix-icon="Search"
+          </el-input>
-            style="margin-bottom: 20px"
+
-          />
           <el-tree
+            class="mt-2"
             ref="deptTreeRef"
-            :data="deptOptions"
+            :data="deptList"
             :props="{ children: 'children', label: 'label', disabled: '' }"
             :expand-on-click-node="false"
-            :filter-node-method="filterDeptNode"
+            :filter-node-method="handleDeptFilter"
             default-expand-all
             @node-click="handleDeptNodeClick"
           ></el-tree>
         </el-card>
       </el-col>
 
-      <!-- 用户数据 -->
       <el-col :lg="20" :xs="24">
         <div class="search">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
@@ -508,10 +435,13 @@ onMounted(() => {
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" :icon="Search" @click="handleQuery"
+              <el-button type="primary" @click="handleQuery"
-                >搜索</el-button
+                ><i-ep-search />搜索</el-button
+              >
+              <el-button @click="resetQuery">
+                <i-ep-refresh />
+                重置</el-button
               >
-              <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -522,18 +452,16 @@ onMounted(() => {
               <div>
                 <el-button
                   type="success"
-                  :icon="Plus"
+                  @click="openDialog()"
-                  @click="handleAdd"
                   v-hasPerm="['sys:user:add']"
-                  >新增</el-button
+                  ><i-ep-plus />新增</el-button
                 >
                 <el-button
                   type="danger"
-                  :icon="Delete"
                   :disabled="ids.length === 0"
                   @click="handleDelete"
                   v-hasPerm="['sys:user:delete']"
-                  >删除</el-button
+                  ><i-ep-delete />删除</el-button
                 >
               </div>
               <div>
@@ -544,13 +472,13 @@ onMounted(() => {
                       <el-dropdown-item @click="downloadTemplate">
                         <i-ep-download />下载模板</el-dropdown-item
                       >
-                      <el-dropdown-item @click="showImportDialog">
+                      <el-dropdown-item @click="openImportDialog">
                         <i-ep-top />导入数据</el-dropdown-item
                       >
                     </el-dropdown-menu>
                   </template>
                 </el-dropdown>
-                <el-button class="ml-3" @click="handleExport"
+                <el-button class="ml-3" @click="handleUserExport"
                   ><template #icon><i-ep-download /></template>导出</el-button
                 >
               </div>
@@ -619,24 +547,30 @@ onMounted(() => {
               prop="createTime"
               width="180"
             ></el-table-column>
-            <el-table-column label="操作" align="left" width="200">
+            <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
-                <el-button type="success" link @click="resetPassword(scope.row)"
+                <el-button
-                  >重置密码</el-button
+                  type="primary"
+                  size="small"
+                  link
+                  @click="resetPassword(scope.row)"
+                  ><i-ep-refresh-left />重置密码</el-button
                 >
                 <el-button
                   type="primary"
                   link
-                  @click="handleUpdate(scope.row)"
+                  size="small"
+                  @click="openDialog(scope.row.id)"
                   v-hasPerm="['sys:user:edit']"
-                  >编辑</el-button
+                  ><i-ep-edit />编辑</el-button
                 >
                 <el-button
-                  type="danger"
+                  type="primary"
                   link
-                  @click="handleDelete(scope.row)"
+                  size="small"
-                  v-hasPerm="['sys:user:del']"
+                  @click="handleDelete(scope.row.id)"
-                  >删除</el-button
+                  v-hasPerm="['sys:user:delete']"
+                  ><i-ep-delete />删除</el-button
                 >
               </template>
             </el-table-column>
@@ -653,7 +587,7 @@ onMounted(() => {
       </el-col>
     </el-row>
 
-    <!-- 用户表单 -->
+    <!-- 表单弹窗 -->
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
@@ -662,7 +596,7 @@ onMounted(() => {
       @close="closeDialog"
     >
       <el-form
-        ref="dataFormRef"
+        ref="userFormRef"
         :model="formData"
         :rules="rules"
         label-width="80px"
@@ -683,13 +617,32 @@ onMounted(() => {
           <el-tree-select
             v-model="formData.deptId"
             placeholder="请选择所属部门"
-            :data="deptOptions"
+            :data="deptList"
             filterable
             check-strictly
             :render-after-expand="false"
           />
         </el-form-item>
 
+        <el-form-item label="性别" prop="gender">
+          <el-select v-model="formData.gender" placeholder="请选择">
+            <el-option label="未知" :value="0" />
+            <el-option label="男" :value="1" />
+            <el-option label="女" :value="2" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="角色" prop="roleIds">
+          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
+            <el-option
+              v-for="item in roleList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="手机号码" prop="mobile">
           <el-input
             v-model="formData.mobile"
@@ -712,35 +665,16 @@ onMounted(() => {
             <el-radio :label="0">禁用</el-radio>
           </el-radio-group>
         </el-form-item>
-
-        <el-form-item label="用户性别" prop="gender">
-          <el-select v-model="formData.gender" placeholder="请选择">
-            <el-option label="未知" :value="0" />
-            <el-option label="男" :value="1" />
-            <el-option label="女" :value="2" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="角色" prop="roleIds">
-          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
           <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>
 
-    <!-- import dialog -->
+    <!-- 导入弹窗 -->
     <el-dialog
       :title="importDialog.title"
       v-model="importDialog.visible"
@@ -748,37 +682,17 @@ onMounted(() => {
       append-to-body
       @close="closeImportDialog"
     >
-      <el-form
+      <el-form label-width="80px">
-        ref="importFormRef"
+        <el-form-item label="部门">
-        :model="importFormData"
-        :rules="rules"
-        label-width="80px"
-      >
-        <el-form-item label="部门" prop="deptId">
           <el-tree-select
-            v-model="importFormData.deptId"
+            v-model="importDeptId"
             placeholder="请选择部门"
-            :data="deptOptions"
+            :data="deptList"
             filterable
             check-strictly
           />
         </el-form-item>
 
-        <el-form-item label="角色" prop="roleIds">
-          <el-select
-            v-model="importFormData.roleIds"
-            multiple
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-
         <el-form-item label="Excel">
           <el-upload
             class="upload-demo"
@@ -791,7 +705,7 @@ onMounted(() => {
             :limit="1"
           >
             <el-icon class="el-icon--upload">
-              <upload-filled />
+              <i-ep-upload-filled />
             </el-icon>
             <div class="el-upload__text">
               将文件拖到此处，或
@@ -805,7 +719,7 @@ onMounted(() => {
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="uploadUser">确 定</el-button>
+          <el-button type="primary" @click="handleUserImport">确 定</el-button>
           <el-button @click="closeImportDialog">取 消</el-button>
         </div>
       </template>