refactor: API类型声明优化调整

Former-commit-id: 0ae696c2e872fa90feba0c5df9a92391c02d3e0b

src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: 'dept'
+  name: 'dept',
 };
 </script>
 
@@ -13,13 +13,12 @@ import {
   updateDept,
   addDept,
   listDeptOptions,
-  listDepartments
+  listDepartments,
 } from '@/api/dept';
 
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
+import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import { DeptFormData, DeptItem, DeptQueryParam } from '@/types/api/dept';
-import { Dialog, Option } from '@/types/common';
+import { Dept, DeptForm, DeptQuery } from '@/api/dept/types';
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
@@ -29,21 +28,21 @@ const state = reactive({
   // 选中ID数组
   ids: [] as number[],
   // 表格树数据
-  dataList: [] as DeptItem[],
-  deptOptions: [] as Option[],
-  dialog: { visible: false } as Dialog,
-  queryParams: {} as DeptQueryParam,
+  dataList: [] as Dept[],
+  deptOptions: [] as OptionType[],
+  dialog: { visible: false } as DialogType,
+  queryParams: {} as DeptQuery,
   formData: {
     sort: 1,
-    status: 1
-  } as DeptFormData,
+    status: 1,
+  } as DeptForm,
   rules: {
     parentId: [
-      { required: true, message: '上级部门不能为空', trigger: 'blur' }
+      { required: true, message: '上级部门不能为空', trigger: 'blur' },
     ],
     name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
-    sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
-  }
+    sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+  },
 });
 
 const {
@@ -54,7 +53,7 @@ const {
   queryParams,
   formData,
   rules,
-  dialog
+  dialog,
 } = toRefs(state);
 
 /**
@@ -85,11 +84,11 @@ function handleSelectionChange(selection: any) {
  */
 async function getDeptOptions() {
   const deptOptions: any[] = [];
-  listDeptOptions().then(response => {
+  listDeptOptions().then((response) => {
     const rootDeptOption = {
       value: '0',
       label: '顶级部门',
-      children: response.data
+      children: response.data,
     };
     deptOptions.push(rootDeptOption);
     state.deptOptions = deptOptions;
@@ -105,7 +104,7 @@ function handleAdd(row: any) {
   formData.value.parentId = row.id;
   dialog.value = {
     title: '添加部门',
-    visible: true
+    visible: true,
   };
 }
 
@@ -117,7 +116,7 @@ async function handleUpdate(row: any) {
   const deptId = row.id || state.ids;
   state.dialog = {
     title: '修改部门',
-    visible: true
+    visible: true,
   };
   getDeptForm(deptId).then((response: any) => {
     state.formData = response.data;
@@ -160,7 +159,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deleteDept(ids)
@@ -266,28 +265,24 @@ onMounted(() => {
           <template #default="scope">
             <el-button
               type="primary"
-              :icon="Edit"
-              circle
-              plain
+               link
               @click.stop="handleUpdate(scope.row)"
-            >
+            >新增
             </el-button>
             <el-button
               type="success"
-              :icon="Plus"
-              circle
-              plain
+              link
               @click.stop="handleAdd(scope.row)"
             >
+            修改
             </el-button>
 
             <el-button
               type="danger"
-              :icon="Delete"
-              circle
-              plain
+              link
               @click.stop="handleDelete(scope.row)"
             >
+            删除
             </el-button>
           </template>
         </el-table-column>

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

@@ -1,46 +1,41 @@
 <script lang="ts">
 export default {
-  name: 'dictItem'
+  name: 'dictItem',
 };
 </script>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref, toRefs, watch } from 'vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import {
-  DictItem,
-  DictItemFormData,
-  DictItemQueryParam
-} from '@/types/api/dict';
 
-import { Dialog } from '@/types/common';
 import {
   listDictItemPages,
   getDictItemData,
   saveDictItem,
   updateDictItem,
-  deleteDictItems
+  deleteDictItems,
 } from '@/api/dict';
 import { Search, Plus, Edit, 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 => {
+  (value) => {
     state.queryParams.typeCode = value;
     state.formData.typeCode = value;
     handleQuery();
@@ -59,21 +54,21 @@ const state = reactive({
   // 非多个禁用
   multiple: true,
   total: 0,
-  queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
+  queryParams: { pageNum: 1, pageSize: 10 } as DictItemQuery,
   dictItemList: [] as DictItem[],
-  dialog: { visible: false } as Dialog,
+  dialog: { visible: false } as DialogType,
   formData: {
     typeCode: props.typeCode,
     typeName: props.typeName,
     status: 1,
-    sort: 1
-  } as DictItemFormData,
+    sort: 1,
+  } as DictItemForm,
   rules: {
     name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
-    value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
+    value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
   },
   localDictCode: props.typeCode,
-  localDictName: props.typeName
+  localDictName: props.typeName,
 });
 
 const {
@@ -84,7 +79,7 @@ const {
   dialog,
   formData,
   rules,
-  total
+  total,
 } = toRefs(state);
 
 function handleQuery() {
@@ -121,14 +116,14 @@ function handleAdd() {
   }
   state.dialog = {
     title: '添加字典数据项',
-    visible: true
+    visible: true,
   };
 }
 
 function handleUpdate(row: any) {
   state.dialog = {
     title: '修改字典数据项',
-    visible: true
+    visible: true,
   };
   const id = row.id || state.ids;
   getDictItemData(id).then(({ data }) => {
@@ -167,7 +162,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deleteDictItems(ids).then(() => {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: 'dictType'
+  name: 'dictType',
 };
 </script>
 
@@ -135,13 +135,11 @@ import {
   getDictTypeForm,
   addDictType,
   updateDictType,
-  deleteDictTypes
+  deleteDictTypes,
 } from '@/api/dict';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-
-import { Dialog } from '@/types/common';
-import { Dict, DictTypeFormData, DictQueryParam } from '@/types/api/dict';
+import { Dict, DictQuery, DictTypeForm } from '@/api/dict/types';
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
@@ -158,18 +156,18 @@ const state = reactive({
   multiple: true,
   queryParams: {
     pageNum: 1,
-    pageSize: 10
-  } as DictQueryParam,
+    pageSize: 10,
+  } as DictQuery,
   dictList: [] as Dict[],
   total: 0,
-  dialog: { visible: false } as Dialog,
+  dialog: { visible: false } as DialogType,
   formData: {
-    status: 1
-  } as DictTypeFormData,
+    status: 1,
+  } as DictTypeForm,
   rules: {
     name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
-  }
+    code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
+  },
 });
 
 const { total, dialog, loading, dictList, formData, rules, queryParams } =
@@ -199,14 +197,14 @@ function handleSelectionChange(selection: any) {
 function handleAdd() {
   state.dialog = {
     title: '添加字典',
-    visible: true
+    visible: true,
   };
 }
 
 function handleUpdate(row: any) {
   state.dialog = {
     title: '修改字典',
-    visible: true
+    visible: true,
   };
   const id = row.id || state.ids;
   getDictTypeForm(id).then(({ data }) => {
@@ -245,7 +243,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deleteDictTypes(ids).then(() => {

src/views/system/menu/index.vue

@@ -100,25 +100,28 @@
           <template #default="scope">
             <el-button
               type="success"
-              :icon="Plus"
-              circle
-              plain
+              link
               @click.stop="handleAdd(scope.row)"
-            />
+
+              v-if="scope.row.type=='CATALOG' ||scope.row.type=='MENU'"
+            >
+            新增
+          </el-button>
+
             <el-button
               type="primary"
-              :icon="Edit"
-              circle
-              plain
+              link
               @click.stop="handleUpdate(scope.row)"
-            />
+            >
+          修改
+          </el-button>
             <el-button
               type="danger"
-              :icon="Delete"
-              circle
-              plain
+             link
               @click.stop="handleDelete(scope.row)"
-            />
+           >
+          删除
+          </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -276,9 +279,7 @@ import { reactive, ref, onMounted, toRefs } from 'vue';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
 
-import { Dialog, Option } from '@/types/common';
-
-import { MenuFormData, MenuItem, MenuQueryParam } from '@/types/api/menu';
+import { MenuQuery, MenuForm, Menu } from '@/api/menu/types';
 // API 依赖
 import {
   listMenus,
@@ -286,7 +287,7 @@ import {
   listMenuOptions,
   addMenu,
   deleteMenus,
-  updateMenu
+  updateMenu,
 } from '@/api/menu';
 
 import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -305,34 +306,34 @@ const state = reactive({
   single: true,
   // 非多个禁用
   multiple: true,
-  queryParams: {} as MenuQueryParam,
-  menuList: [] as MenuItem[],
-  dialog: { visible: false } as Dialog,
+  queryParams: {} as MenuQuery,
+  menuList: [] as Menu[],
+  dialog: { visible: false } as DialogType,
   formData: {
     parentId: '0',
     name: '',
     visible: 1,
     sort: 1,
     component: undefined,
-    type: 'MENU'
-  } as MenuFormData,
+    type: 'MENU',
+  } as MenuForm,
   rules: {
     parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
     name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
     type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
     path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
     component: [
-      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
-    ]
+      { required: true, message: '请输入组件完整路径', trigger: 'blur' },
+    ],
   },
-  menuOptions: [] as Option[],
+  menuOptions: [] as OptionType[],
   currentRow: undefined,
   // Icon选择器显示状态
   iconSelectVisible: false,
   cacheData: {
     menuType: '',
-    menuPath: ''
-  }
+    menuPath: '',
+  },
 });
 
 const {
@@ -344,7 +345,7 @@ const {
   rules,
   menuOptions,
   iconSelectVisible,
-  cacheData
+  cacheData,
 } = toRefs(state);
 
 /**
@@ -393,7 +394,7 @@ async function handleAdd(row: any) {
   await loadMenuData();
   dialog.value = {
     title: '添加菜单',
-    visible: true
+    visible: true,
   };
 
   if (row.id) {
@@ -416,11 +417,11 @@ async function handleAdd(row: any) {
 /**
  * 编辑菜单
  */
-async function handleUpdate(row: MenuFormData) {
+async function handleUpdate(row: MenuForm) {
   await loadMenuData();
   state.dialog = {
     title: '编辑菜单',
-    visible: true
+    visible: true,
   };
   const id = row.id as string;
   getMenuDetail(id).then(({ data }) => {
@@ -474,7 +475,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deleteMenus(ids).then(() => {

src/views/system/role/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: 'role'
+  name: 'role',
 };
 </script>
 
@@ -13,15 +13,13 @@ import {
   addRole,
   deleteRoles,
   getRoleMenuIds,
-  updateRoleMenus
+  updateRoleMenus,
 } from '@/api/role';
 import { listResources } from '@/api/menu';
 
 import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
-import { RoleFormData, RoleItem, RoleQueryParam } from '@/types/api/role';
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import { Option, Dialog } from '@/types/common';
+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);
@@ -34,21 +32,23 @@ const state = reactive({
   ids: [] as number[],
   queryParams: {
     pageNum: 1,
-    pageSize: 10
-  } as RoleQueryParam,
-  roleList: [] as RoleItem[],
+    pageSize: 10,
+  } as RoleQuery,
+  roleList: [] as Role[],
   total: 0,
   dialog: {
     title: '',
-    visible: false
-  } as Dialog,
-  formData: {} as RoleFormData,
+    visible: false,
+  } as DialogType,
+  formData: {} as RoleForm,
   rules: {
     name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
+    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
+    dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
+    status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
   },
   menuDialogVisible: false,
-  resourceOptions: [] as Option[],
+  resourceOptions: [] as OptionType[],
   btnPerms: {} as any,
   // 勾选的菜单ID
   checkedMenuIds: new Set([]),
@@ -56,8 +56,8 @@ const state = reactive({
   // 选中的角色
   checkedRole: {
     id: '',
-    name: ''
-  }
+    name: '',
+  },
 });
 
 const {
@@ -71,7 +71,7 @@ const {
   rules,
   menuDialogVisible,
   checkedRole,
-  resourceOptions
+  resourceOptions,
 } = toRefs(state);
 
 /**
@@ -105,14 +105,14 @@ function handleRowClick(row: any) {
 function handleAdd() {
   dialog.value = {
     title: '添加角色',
-    visible: true
+    visible: true,
   };
 }
 
 function handleUpdate(row: any) {
   dialog.value = {
     title: '修改角色',
-    visible: true
+    visible: true,
   };
   const roleId = row.id || state.ids;
   getRoleFormDetail(roleId).then(({ data }) => {
@@ -160,7 +160,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deleteRoles(ids).then(() => {
@@ -174,24 +174,27 @@ function handleDelete(row: any) {
 /**
  * 资源分配
  */
-function showRoleMenuDialog(row: RoleItem) {
+function showRoleMenuDialog(row: Role) {
   menuDialogVisible.value = true;
   loading.value = true;
 
   const roleId: any = row.id;
   checkedRole.value = {
     id: roleId,
-    name: row.name
+    name: row.name,
   };
 
   // 获取所有的资源
-  listResources().then(response => {
+  listResources().then((response) => {
     resourceOptions.value = response.data;
     // 角色拥有的资源
     getRoleMenuIds(roleId).then(({ data }) => {
       // 勾选回显
       const checkedMenuIds = data;
-      resourceRef.value.setCheckedKeys(checkedMenuIds);
+      checkedMenuIds.forEach((menuId) =>
+        resourceRef.value.setChecked(menuId, true)
+      );
+
       loading.value = false;
     });
   });
@@ -204,7 +207,7 @@ function handleRoleResourceSubmit() {
     .getCheckedNodes(false, true)
     .map((node: any) => node.value);
 
-  updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
+  updateRoleMenus(checkedRole.value.id, checkedMenuIds).then((res) => {
     ElMessage.success('分配权限成功');
     menuDialogVisible.value = false;
     handleQuery();
@@ -258,7 +261,7 @@ onMounted(() => {
           >删除</el-button
         >
       </template>
-      <!--table-->
+
       <el-table
         ref="dataTableRef"
         v-loading="loading"
@@ -269,8 +272,8 @@ onMounted(() => {
         border
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="角色名称" prop="name" min-width="300" />
-        <el-table-column label="角色编码" prop="code" width="200" />
+        <el-table-column label="角色名称" prop="name" min-width="150" />
+        <el-table-column label="角色编码" prop="code" width="150" />
 
         <el-table-column label="状态" align="center" width="150">
           <template #default="scope">
@@ -280,36 +283,29 @@ onMounted(() => {
         </el-table-column>
 
         <el-table-column label="排序" align="center" width="100" prop="sort" />
-        <el-table-column prop="createTime" label="创建时间" width="250" />
-        <el-table-column prop="updateTime" label="修改时间" width="250" />
+        <el-table-column prop="createTime" label="创建时间" width="160" />
+        <el-table-column prop="updateTime" label="修改时间" width="160" />
 
-        <el-table-column label="操作" align="center" width="200">
+        <el-table-column label="操作" align="left" >
           <template #default="scope">
-            <el-tooltip content="分配资源" effect="light">
-              <el-button
-                type="success"
-                circle
-                plain
-                @click.stop="showRoleMenuDialog(scope.row)"
-              >
-                <svg-icon icon-class="perm" />
-              </el-button>
-            </el-tooltip>
+            <el-button
+              type="success"
+              link
+              @click.stop="showRoleMenuDialog(scope.row)"
+            >
+              资源分配
+            </el-button>
 
             <el-button
               type="primary"
-              :icon="Edit"
-              circle
-              plain
+              link
               @click.stop="handleUpdate(scope.row)"
-            />
-            <el-button
-              type="danger"
-              :icon="Delete"
-              circle
-              plain
-              @click.stop="handleDelete(scope.row)"
-            />
+            >
+              修改
+            </el-button>
+            <el-button type="danger" link @click.stop="handleDelete(scope.row)">
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -345,6 +341,22 @@ onMounted(() => {
           <el-input v-model="formData.code" placeholder="请输入角色编码" />
         </el-form-item>
 
+        <el-form-item label="数据权限" prop="dataScope">
+          <el-select v-model="formData.dataScope">
+            <el-option :key="0" label="全部数据" :value="0" />
+            <el-option :key="1" label="部门及子部门数据" :value="1" />
+            <el-option :key="2" label="本部门数据" :value="2" />
+            <el-option :key="3" label="本人数据" :value="3" />
+          </el-select>
+        </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="sort">
           <el-input-number
             v-model="formData.sort"
@@ -353,13 +365,6 @@ onMounted(() => {
             style="width: 100px"
           />
         </el-form-item>
-
-        <el-form-item label="状态">
-          <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>
 
       <template #footer>
@@ -370,7 +375,7 @@ onMounted(() => {
       </template>
     </el-dialog>
 
-    <!--分配资源弹窗-->
+    <!-- assign permission dialog -->
     <el-dialog
       :title="'【' + checkedRole.name + '】资源分配'"
       v-model="menuDialogVisible"

src/views/system/user/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: 'user'
+  name: 'user',
 };
 </script>
 
@@ -11,13 +11,13 @@ import {
   watchEffect,
   onMounted,
   getCurrentInstance,
-  toRefs
+  toRefs,
 } from 'vue';
 
 // api
 import {
   listUserPages,
-  getUserFormData,
+  getUserForm,
   deleteUsers,
   addUser,
   updateUser,
@@ -25,37 +25,33 @@ import {
   updateUserPassword,
   downloadTemplate,
   exportUser,
-  importUser
+  importUser,
 } from '@/api/user';
 import { listDeptOptions } from '@/api/dept';
 import { listRoleOptions } from '@/api/role';
 
 import {
-  ElMessage,
-  ElMessageBox,
   ElTree,
   ElForm,
-  UploadFile
+  ElMessageBox,
+  ElMessage,
+  UploadFile,
 } from 'element-plus';
 import {
   Search,
   Plus,
-  Edit,
   Refresh,
   Delete,
-  Lock,
   Download,
   Top,
-  UploadFilled
+  UploadFilled,
 } from '@element-plus/icons-vue';
 import {
-  UserItem,
-  UserQueryParam,
-  UserFormData,
-  UserImportData
-} from '@/types/api/user';
-
-import { Option, Dialog } from '@/types/common';
+  UserForm,
+  UserImportData,
+  UserQuery,
+  UserType,
+} from '@/api/user/types';
 
 const deptTreeRef = ref(ElTree); // 部门树
 const queryFormRef = ref(ElForm); // 查询表单
@@ -71,28 +67,28 @@ const state = reactive({
   ids: [] as number[],
   // 总条数
   total: 0,
-  userList: [] as UserItem[],
+  userList: [] as UserType[],
   dialog: {
-    visible: false
-  } as Dialog,
+    visible: false,
+  } as DialogType,
   deptName: undefined,
   // 部门下拉项
-  deptOptions: [] as Option[],
+  deptOptions: [] as OptionType[],
   // 性别下拉项
-  genderOptions: [] as Option[],
+  genderOptions: [] as OptionType[],
   // 角色下拉项
-  roleOptions: [] as Option[],
+  roleOptions: [] as OptionType[],
   formData: {
-    status: 1
-  } as UserFormData,
+    status: 1,
+  } as UserForm,
   queryParams: {
     pageNum: 1,
-    pageSize: 10
-  } as UserQueryParam,
+    pageSize: 10,
+  } as UserQuery,
   rules: {
     username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
     nickname: [
-      { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+      { required: true, message: '用户昵称不能为空', trigger: 'blur' },
     ],
     deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
     roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
@@ -100,25 +96,25 @@ const state = reactive({
       {
         pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
         message: '请输入正确的邮箱地址',
-        trigger: 'blur'
-      }
+        trigger: 'blur',
+      },
     ],
     mobile: [
       {
         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
         message: '请输入正确的手机号码',
-        trigger: 'blur'
-      }
-    ]
+        trigger: 'blur',
+      },
+    ],
   },
 
   importDialog: {
     title: '用户搭配',
-    visible: false
-  } as Dialog,
+    visible: false,
+  } as DialogType,
   importFormData: {} as UserImportData,
   excelFile: undefined as any,
-  excelFilelist: [] as File[]
+  excelFilelist: [] as File[],
 });
 
 const {
@@ -135,7 +131,7 @@ const {
   roleOptions,
   importDialog,
   importFormData,
-  excelFilelist
+  excelFilelist,
 } = toRefs(state);
 
 watchEffect(
@@ -143,7 +139,7 @@ watchEffect(
     deptTreeRef.value.filter(state.deptName);
   },
   {
-    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
 );
 
@@ -169,7 +165,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
  * 获取角色下拉项
  */
 async function getRoleOptions() {
-  listRoleOptions().then(response => {
+  listRoleOptions().then((response) => {
     state.roleOptions = response.data;
   });
 }
@@ -185,7 +181,7 @@ function handleStatusChange(row: { [key: string]: any }) {
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning'
+      type: 'warning',
     }
   )
     .then(() => {
@@ -235,7 +231,7 @@ function resetPassword(row: { [key: string]: any }) {
     '重置密码',
     {
       confirmButtonText: '确定',
-      cancelButtonText: '取消'
+      cancelButtonText: '取消',
     }
   )
     .then(({ value }) => {
@@ -256,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
 async function handleAdd() {
   state.dialog = {
     title: '添加用户',
-    visible: true
+    visible: true,
   };
   await getDeptOptions();
   await getRoleOptions();
@@ -266,15 +262,15 @@ async function handleAdd() {
  * 修改用户
  **/
 async function handleUpdate(row: { [key: string]: any }) {
-  state.dialog = {
+  dialog.value = {
     title: '修改用户',
-    visible: true
+    visible: true,
   };
 
   const userId = row.id || state.ids;
   await getDeptOptions();
   await getRoleOptions();
-  getUserFormData(userId).then(({ data }) => {
+  getUserForm(userId).then(({ data }) => {
     formData.value = data;
   });
 }
@@ -314,7 +310,7 @@ function handleDelete(row: { [key: string]: any }) {
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning'
+      type: 'warning',
     }
   )
     .then(function () {
@@ -339,7 +335,7 @@ function closeDialog() {
  * 获取部门下拉项
  */
 async function getDeptOptions() {
-  listDeptOptions().then(response => {
+  listDeptOptions().then((response) => {
     state.deptOptions = response.data;
   });
 }
@@ -359,7 +355,7 @@ function getGenderOptions() {
 function handleDownloadTemplate() {
   downloadTemplate().then((response: any) => {
     const blob = new Blob([response.data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
     });
     const a = document.createElement('a');
     const href = window.URL.createObjectURL(blob); // 下载链接
@@ -411,7 +407,7 @@ function submitImportForm() {
 
       const deptId = state.importFormData.deptId;
       const roleIds = state.importFormData.roleIds.join(',');
-      importUser(deptId, roleIds, state.excelFile).then(response => {
+      importUser(deptId, roleIds, state.excelFile).then((response) => {
         ElMessage.success(response.data);
         closeImportDialog();
         handleQuery();
@@ -436,7 +432,7 @@ function closeImportDialog() {
 function handleExport() {
   exportUser(queryParams.value).then((response: any) => {
     const blob = new Blob([response.data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
     });
     const a = document.createElement('a');
     const href = window.URL.createObjectURL(blob); // 下载的链接
@@ -573,7 +569,7 @@ onMounted(() => {
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column
               key="id"
-              label="用户编号"
+              label="编号"
               align="center"
               prop="id"
               width="100"
@@ -584,11 +580,11 @@ onMounted(() => {
               align="center"
               prop="username"
             />
-            <el-table-column label="用户昵称" align="center" prop="nickname" />
+            <el-table-column label="用户昵称" width="120" align="center" prop="nickname" />
 
-            <el-table-column label="性别" align="center" prop="genderLabel" />
+            <el-table-column label="性别" width="100" align="center" prop="genderLabel" />
 
-            <el-table-column label="部门" align="center" prop="deptName" />
+            <el-table-column label="部门" width="120" align="center" prop="deptName" />
             <el-table-column
               label="手机号码"
               align="center"
@@ -612,31 +608,25 @@ onMounted(() => {
               prop="createTime"
               width="180"
             ></el-table-column>
-            <el-table-column label="操作" align="center" width="150">
+            <el-table-column label="操作" align="left" width="200">
               <template #default="scope">
+                <el-button type="success" link @click="resetPassword(scope.row)"
+                  >重置密码</el-button
+                >
                 <el-button
                   type="primary"
-                  :icon="Edit"
-                  circle
-                  plain
+                  link
                   @click="handleUpdate(scope.row)"
                   v-hasPerm="['sys:user:edit']"
-                ></el-button>
+                  >修改</el-button
+                >
                 <el-button
                   type="danger"
-                  :icon="Delete"
-                  circle
-                  plain
+                  link
                   @click="handleDelete(scope.row)"
-                  v-hasPerm="['sys:user:delete']"
-                ></el-button>
-                <el-button
-                  type="warning"
-                  :icon="Lock"
-                  circle
-                  plain
-                  @click="resetPassword(scope.row)"
-                ></el-button>
+                  v-hasPerm="['sys:user:del']"
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>