refactor: API接口调用TypeScript类型约束完善

src/views/system/role/components/Menu.vue

@@ -4,10 +4,18 @@
       <el-form-item>
         <el-row>
           <el-col :span="16">
-            <el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
+            <el-button
+              type="success"
+              plain
+              :icon="Switch"
+              @click="toggleExpandAll"
+              >展开/折叠</el-button
+            >
           </el-col>
           <el-col :span="8" style="text-align: right">
-            <el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
+            <el-button type="primary" :icon="Check" @click="handleSubmit"
+              >提交</el-button
+            >
           </el-col>
         </el-row>
       </el-form-item>
@@ -30,82 +38,87 @@
 </template>
 
 <script setup lang="ts">
-import {listTreeSelectMenus} from "@/api/system/menu";
+import { listSelectMenus } from "@/api/system/menu";
-import {listRoleMenuIds, updateRoleMenu} from "@/api/system/role"
+import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
-import { nextTick, onMounted, reactive, ref, toRefs, watch} from "vue"
+import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
-import {ElTree, ElMessage, ElMessageBox} from "element-plus"
+import { ElTree, ElMessage, ElMessageBox } from "element-plus";
-import {Switch, Check} from '@element-plus/icons-vue'
+import { Switch, Check } from "@element-plus/icons-vue";
+import { Option } from "@/types";
 
-const emit = defineEmits(['menuClick'])
+const emit = defineEmits(["menuClick"]);
 const props = defineProps({
   role: {
     type: Object,
-    default: {}
+    default: {},
-  }
+  },
-})
+});
 
-const menuRef = ref(ElTree) // 属性名必须和元素的ref属性值一致
+const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
 
-watch(() => props.role.id as any, (newVal, oldVal) => {
+watch(
-  const roleId = props.role.id
+  () => props.role.id as any,
+  (newVal, oldVal) => {
+    const roleId = props.role.id;
     if (roleId) {
-    state.checkStrictly = true
+      state.checkStrictly = true;
-    listRoleMenuIds(roleId).then(response => {
+      listRoleMenuIds(roleId).then(({ data }) => {
-      const checkedMenuIds = response.data
+        menuRef.value.setCheckedKeys(data);
-      menuRef.value.setCheckedKeys(checkedMenuIds)
+        state.checkStrictly = false;
-      state.checkStrictly = false
+      });
-    })
     }
-})
+  }
+);
 
 const state = reactive({
   expandedKeys: [], // 展开的节点
-  menuOptions: [],
+  menuOptions: [] as Option[],
   checkStrictly: false,
   isExpandAll: true,
-  refreshTree: true
+  refreshTree: true,
-})
+});
 
-const {expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree} = toRefs(state)
+const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
+  toRefs(state);
 
 /**
  * 加载菜单树
  */
 async function loadTreeSelectMenuOptions() {
-  await listTreeSelectMenus().then(response => {
+  await listSelectMenus().then(({ data }) => {
-    state.menuOptions = response.data
+    state.menuOptions = data;
-  })
+  });
 }
 
 function handleNodeClick(node: any) {
-  emit('menuClick', node)
+  emit("menuClick", node);
 }
 
 /**
  * 展开/收缩
  */
 function toggleExpandAll() {
-  state.refreshTree = false
+  state.refreshTree = false;
-  state.isExpandAll = !state.isExpandAll
+  state.isExpandAll = !state.isExpandAll;
   nextTick(() => {
-    state.refreshTree = true
+    state.refreshTree = true;
-  })
+  });
 }
 
 /**
  * 保存角色的菜单
  */
 function handleSubmit() {
-  const checkedMenuIds = menuRef.value.getCheckedNodes(false, true).map((node: any) => node.id)
+  const checkedMenuIds = menuRef.value
+    .getCheckedNodes(false, true)
+    .map((node: any) => node.id);
   updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
-    ElMessage.success('提交成功')
+    ElMessage.success("提交成功");
-  })
+  });
 }
 
 onMounted(() => {
-  loadTreeSelectMenuOptions()
+  loadTreeSelectMenuOptions();
-})
+});
-
 </script>
 
 <style lang="scss" scoped>

src/views/system/role/components/Perm.vue

@@ -11,7 +11,9 @@
           </el-checkbox>
         </el-col>
         <el-col :span="12" style="text-align: right">
-          <el-button type="primary" :icon="Check"  @click="handleSubmit">提交</el-button>
+          <el-button type="primary" :icon="Check" @click="handleSubmit"
+            >提交</el-button
+          >
         </el-col>
       </el-row>
 
@@ -20,6 +22,7 @@
           :span="8"
           v-for="item in permissionOptions"
           style="margin-top: 20px"
+          :key="item.id"
         >
           <el-checkbox
             border
@@ -34,7 +37,15 @@
       </el-row>
     </div>
     <div style="text-align: center" v-else>
-      <el-empty :description=" !role? '请选择角色': !menu? '请选择菜单': '暂无数据，您可在【菜单管理】配置权限数据'"></el-empty>
+      <el-empty
+        :description="
+          !role
+            ? '请选择角色'
+            : !menu
+            ? '请选择菜单'
+            : '暂无数据，您可在【菜单管理】配置权限数据'
+        "
+      ></el-empty>
     </div>
   </div>
 </template>
@@ -44,36 +55,39 @@ import {listPerms} from "@/api/system/perm";
 import { listRolePerms, saveRolePerms } from "@/api/system/role";
 import { onMounted, reactive, toRefs, watch } from "vue";
 import { ElMessage } from "element-plus";
-import {Check} from '@element-plus/icons-vue'
+import { Check } from "@element-plus/icons-vue";
+import { PermQueryParam, MenuItem } from "@/types";
 
 const props = defineProps({
   role: {
     type: Object,
-    default: {}
+    default: {},
   },
   menu: {
     type: Object,
-    default: {}
+    default: {},
-  }
+  },
-})
+});
 
-
+watch(
-watch(() => props.menu.id as any, (newVal, oldVal) => {
+  () => props.menu.id,
-  const menuId = props.menu.id
+  (value) => {
-  if (menuId) {
+    if (value) {
-    loadData()
+      loadData();
     }
-})
+  }
+);
 
 const state = reactive({
   loading: false,
   permissionOptions: [] as Array<any>,
   isIndeterminate: true,
   checkAll: false,
-  checkedPerms: []
+  checkedPerms: [],
-})
+});
 
-const {permissionOptions, isIndeterminate, checkAll, checkedPerms} = toRefs(state)
+const { permissionOptions, isIndeterminate, checkAll, checkedPerms } =
+  toRefs(state);
 
 function handleCheckAllChange(checked: Boolean) {
   state.isIndeterminate = false;
@@ -86,55 +100,56 @@ function handleCheckAllChange(checked: Boolean) {
 }
 
 function handleCheckedPermChange(value: any) {
-  const checkedCount = state.permissionOptions.filter(item => item.checked).length;
+  const checkedCount = state.permissionOptions.filter(
+    (item) => item.checked
+  ).length;
   state.checkAll = checkedCount === state.permissionOptions.length;
-  state.isIndeterminate = checkedCount > 0 && checkedCount < state.permissionOptions.length;
+  state.isIndeterminate =
+    checkedCount > 0 && checkedCount < state.permissionOptions.length;
 }
 
 function loadData() {
   if (!props.menu.id) {
-    resetData()
+    resetData();
-    return false
+    return false;
   }
   state.loading = true;
-  listPerms({menuId: props.menu.id}).then(response => {
+
-    state.permissionOptions = response.data
+  const params = { menuId: props.menu.id } as PermQueryParam;
-    listRolePerms(props.role.id, props.menu.id).then(res => {
+  listPerms(params).then(({data}) => {
-      const checkedPermIds = res.data
+    state.permissionOptions = data;
+    listRolePerms(props.role.id, props.menu.id).then((response) => {
+      const checkedPermIds = response.data;
       state.permissionOptions.map((item: any) => {
         if (checkedPermIds.includes(item.id)) {
           item.checked = true;
         } else {
-          state.checkAll = false
+          state.checkAll = false;
         }
       });
-      state.loading = false
+      state.loading = false;
-    })
+    });
-  })
+  });
 }
 
 function handleSubmit() {
   const checkedPermIds = state.permissionOptions
     .filter((item) => item.checked)
     .map((item) => item.id);
-  saveRolePerms(
+  saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
-      props.role.id,
-      props.menu.id,
-      checkedPermIds
-  ).then(() => {
     ElMessage.success("提交成功");
   });
 }
 
 function resetData() {
-  state.permissionOptions = []
+  state.permissionOptions = [];
-  state.isIndeterminate = true
+  state.isIndeterminate = true;
-  state.checkAll = false
+  state.checkAll = false;
 }
 
 onMounted(() => {
-  loadData()
+  loadData();
-})
+});
 </script>
 
 <style scoped>

src/views/system/role/components/Role.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="role-container">
     <!-- 搜索表单 -->
-    <el-form
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        ref="queryForm"
-        :model="queryParams"
-        :inline="true"
-    >
       <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="success" :icon="Plus" @click="handleAdd"
-        <el-button type="danger" :icon='Delete' :disabled="multiple" @click="handleDelete">删除</el-button>
+          >新增</el-button
+        >
+        <el-button
+          type="danger"
+          :icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
       </el-form-item>
 
       <el-form-item prop="name">
@@ -16,21 +20,23 @@
           v-model="queryParams.name"
           placeholder="角色名称"
           clearable
-            @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" :icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 数据表格 -->
     <el-table
-        ref="dataTable"
+      ref="dataTableRef"
       v-loading="loading"
-        :data="pageList"
+      :data="roleList"
       @selection-change="handleSelectionChange"
       @row-click="handleRowClick"
       highlight-current-row
@@ -72,10 +78,11 @@
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
+      @close="cancel"
       width="450px"
     >
       <el-form
-          ref="dataForm"
+        ref="dataFormRef"
         :model="formData"
         :rules="rules"
         label-width="100px"
@@ -89,7 +96,12 @@
         </el-form-item>
 
         <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px"/>
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+            style="width: 100px"
+          />
         </el-form-item>
 
         <el-form-item label="状态">
@@ -106,19 +118,27 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
-
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import {listRolesWithPage, updateRole, getRoleDetail, addRole, deleteRoles} from '@/api/system/role'
+import {
-import { onMounted, reactive, ref, toRefs, unref} from "vue"
+  listRolePages,
+  updateRole,
+  getRoleFormDetail,
+  addRole,
+  deleteRoles,
+} from "@/api/system/role";
+import { onMounted, reactive, ref, toRefs, unref } from "vue";
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
+import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
+import { RoleFormData, RoleItem, RoleQueryParam } from "@/types";
+
+const emit = defineEmits(["roleClick"]);
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
 
-const emit = defineEmits(['roleClick'])
-const dataForm = ref(ElForm)  // 属性名必须和元素的ref属性值一致
 const state = reactive({
   loading: true,
   // 选中ID数组
@@ -130,139 +150,129 @@ const state = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    name: undefined
+  } as RoleQueryParam,
-  },
+  roleList: [] as RoleItem[],
-  pageList: [],
   total: 0,
   dialog: {
-    title: '',
+    title: "",
-    visible: false
+    visible: false,
-  },
-  formData: {
-    id: undefined,
-    name: undefined,
-    code: undefined,
-    sort: 100,
-    status: 1
   },
+  formData: {} as RoleFormData,
   rules: {
-    name: [
+    name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-      {required: true, message: '请输入角色名称', trigger: 'blur'}
+    code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-    ],
+  },
-    code: [
+});
-      {required: true, message: '请输入角色编码', trigger: 'blur'}
-    ]
-  }
-})
 
-const {loading, single, multiple, queryParams, pageList, total, dialog, formData, rules} = toRefs(state)
+const {
+  loading,
+  single,
+  multiple,
+  queryParams,
+  roleList,
+  total,
+  dialog,
+  formData,
+  rules,
+} = toRefs(state);
 
 function handleQuery() {
-  emit('roleClick', {})
+  emit("roleClick", {});
-  state.loading = true
+  state.loading = true;
-  listRolesWithPage(state.queryParams).then(response => {
+  listRolePages(state.queryParams).then(({ data }) => {
-    const {data, total} = response as any
+    state.roleList = data.list;
-    state.pageList = data
+    state.total = data.total;
-    state.total = total
+    state.loading = false;
-    state.loading = false
+  });
-  })
 }
 
 function resetQuery() {
-  state.queryParams = {
+  queryFormRef.value.resetFields();
-    pageNum: 1,
+  handleQuery();
-    pageSize: 10,
-    name: undefined
-  }
-  handleQuery()
 }
 
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id)
+  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1
+  state.single = selection.length !== 1;
-  state.multiple = !selection.length
+  state.multiple = !selection.length;
 }
 
 function handleRowClick(row: any) {
-  emit('roleClick', row)
+  emit("roleClick", row);
 }
 
 function handleAdd() {
-  resetForm()
   state.dialog = {
-    title: '添加角色',
+    title: "添加角色",
-    visible: true
+    visible: true,
-  }
+  };
 }
 
 function handleUpdate(row: any) {
-  resetForm()
   state.dialog = {
-    title: '修改角色',
+    title: "修改角色",
     visible: true,
-  }
+  };
-  const roleId = row.id || state.ids
+  const roleId = row.id || state.ids;
-  getRoleDetail(roleId).then((response) => {
+  getRoleFormDetail(roleId).then(({ data }) => {
-    state.formData = response.data
+    state.formData = data;
-  })
+  });
 }
 
 function submitForm() {
-  const form = unref(dataForm)
+  dataFormRef.value.validate((valid: any) => {
-  form.validate((valid: any) => {
     if (valid) {
       if (state.formData.id) {
-        updateRole(state.formData.id as any, state.formData).then(response => {
+        updateRole(state.formData.id as any, state.formData).then(
-          ElMessage.success('修改成功')
+          (response) => {
-          state.dialog.visible = false
+            ElMessage.success("修改成功");
-          handleQuery()
+            state.dialog.visible = false;
-        })
+            handleQuery();
+          }
+        );
       } else {
-        addRole(state.formData).then(response => {
+        addRole(state.formData).then((response) => {
-          ElMessage.success('新增成功')
+          ElMessage.success("新增成功");
-          state.dialog.visible = false
+          state.dialog.visible = false;
-          handleQuery()
+          handleQuery();
-        })
+        });
       }
     }
-  })
+  });
 }
 
+/**
+ * 重置表单
+ */
 function resetForm() {
-  state.formData = {
+  dataFormRef.value.resetFields();
-    id: undefined,
+  handleQuery();
-    name: undefined,
-    code: undefined,
-    sort: 100,
-    status: 1
-  }
 }
 
 function cancel() {
-  resetForm()
+  resetForm();
-  state.dialog.visible = false
+  state.dialog.visible = false;
 }
 
 function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',')
+  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: '确定',
+    confirmButtonText: "确定",
-    cancelButtonText: '取消',
+    cancelButtonText: "取消",
-    type: 'warning'
+    type: "warning",
-  }).then(() => {
-    deleteRoles(ids).then(() => {
-      ElMessage.success('删除成功')
-      handleQuery()
   })
-  }).catch(() =>
+    .then(() => {
-      ElMessage.info('已取消删除')
+      deleteRoles(ids).then(() => {
-  )
+        ElMessage.success("删除成功");
+        handleQuery();
+      });
+    })
+    .catch(() => ElMessage.info("已取消删除"));
 }
 
 onMounted(() => {
-  handleQuery()
+  handleQuery();
-})
+});
-
 </script>
 
 <style lang="scss" scoped>

src/views/system/role/index.vue

@@ -15,7 +15,7 @@
         <el-card class="box-card" shadow="always">
           <template #header>
             <svg-icon color="#333" icon-class="menu" />
-            <span style="margin:0 5px;">菜单分配</span>
+            <span style="margin: 0 5px">菜单分配</span>
             <el-tag type="success" v-if="role.id">
               <svg-icon color="green" icon-class="role" />
               {{ role.name }}
@@ -30,13 +30,20 @@
         <el-card class="box-card" shadow="always">
           <template #header>
             <svg-icon color="#333" icon-class="perm" />
-            <span style="margin:0 5px;">权限分配</span>
+            <span style="margin: 0 5px">权限分配</span>
 
-            <el-tag type="success" style="margin:0 5px 0 0;" v-if="role.id" >
+            <el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
               <svg-icon color="green" icon-class="role" />
               {{ role.name }}
             </el-tag>
-            <el-tag type="warning" style="margin:0 5px  0 0;" v-else  size="small"> 请选择角色</el-tag>
+            <el-tag
+              type="warning"
+              style="margin: 0 5px 0 0"
+              v-else
+              size="small"
+            >
+              请选择角色</el-tag
+            >
 
             <el-tag type="success" v-if="menu.id" size="small">
               <svg-icon color="red" icon-class="menu" />
@@ -47,67 +54,64 @@
           <perm ref="perm" :menu="menu" :role="role" />
         </el-card>
       </el-col>
-
     </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
-import Role from './components/Role.vue'
-import Menus from './components/Menu.vue'
-import Perm from './components/Perm.vue'
 import { reactive, toRefs } from "vue";
 import { ElMessage } from "element-plus";
-import SvgIcon from '@/components/SvgIcon/index.vue';
+import SvgIcon from "@/components/SvgIcon/index.vue";
+
+import Role from "./components/Role.vue";
+import Menus from "./components/Menu.vue";
+import Perm from "./components/Perm.vue";
 
 const state = reactive({
   role: {
     id: undefined,
-    name: '',
+    name: "",
   },
   menu: {
     id: undefined,
-    name: ''
+    name: "",
-  }
+  },
-})
+});
 
-const {role,menu} =toRefs(state)
+const { role, menu } = toRefs(state);
 
 function handleRoleClick(roleRow: any) {
   if (roleRow) {
     state.role = {
       id: roleRow.id,
-      name: roleRow.name
+      name: roleRow.name,
-    }
+    };
   } else {
     state.role = {
       id: undefined,
-      name: ''
+      name: "",
-    }
+    };
   }
 }
 
 function handleMenuClick(menuRow: any) {
   if (!state.role.id) {
-    ElMessage.warning('请选择角色')
+    ElMessage.warning("请选择角色");
-    return false
+    return false;
   }
-
   if (menuRow) {
     state.menu = {
-      id: menuRow.id,
+      id: menuRow.value,
-      name: menuRow.label
+      name: menuRow.label,
-    }
+    };
   } else {
     state.menu = {
       id: undefined,
-      name: ''
+      name: ""
+    };
   }
 }
-}
-
 </script>
 
 <style scoped>
-
 </style>

src/views/system/user/index.vue

@@ -80,7 +80,7 @@
 
           <el-table
             v-loading="loading"
-            :data="pageList"
+            :data="userList"
             @selection-change="handleSelectionChange"
           >
             <el-table-column type="selection" width="50" align="center" />
@@ -283,7 +283,7 @@ import {
   updateUser,
   updateUserPart,
 } from "@/api/system/user";
-import { listDeptSelect } from "@/api/system/dept";
+import { listSelectDepartments } from "@/api/system/dept";
 import { listRoles } from "@/api/system/role";
 
 // 组件依赖
@@ -297,6 +297,14 @@ import {
   Lock,
 } from "@element-plus/icons-vue";
 import TreeSelect from "@/components/TreeSelect/index.vue";
+import {
+  UserItem,
+  UserQueryParam,
+  UserFormData,
+  Option,
+  RoleItem,
+  Dialog,
+} from "@/types";
 
 // DOM元素的引用声明定义
 const deptTreeRef = ref(ElTree); // 变量名和DOM的ref属性值一致
@@ -317,42 +325,26 @@ const state = reactive({
   // 总条数
   total: 0,
   // 用户分页数据
-  pageList: [],
+  userList: [] as UserItem[],
   // 弹窗属性
   dialog: {
-    title: "",
     visible: false,
-  },
+  } as Dialog,
   deptName: undefined,
   // 部门树选项
-  deptOptions: [],
+  deptOptions: [] as Option[],
   // 部门名称
   // 性别状态字典
   genderOptions: [] as any[],
   // 角色选项
-  roleOptions: [] as any[],
+  roleOptions: [] as RoleItem[],
   // 表单参数
-  formData: {
+  formData: {} as UserFormData,
-    id: undefined,
-    deptId: undefined,
-    username: undefined,
-    nickname: undefined,
-    password: "",
-    mobile: undefined,
-    email: undefined,
-    gender: undefined,
-    status: 1,
-    remark: undefined,
-    roleIds: [],
-  },
   // 查询参数
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    keywords: undefined,
+  } as UserQueryParam,
-    status: undefined,
-    deptId: undefined,
-  },
   // 表单校验
   rules: {
     username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
@@ -383,7 +375,7 @@ const {
   single,
   multiple,
   queryParams,
-  pageList,
+  userList,
   total,
   dialog,
   formData,
@@ -398,8 +390,7 @@ const {
  */
 watchEffect(
   () => {
-    const deptTree = unref(deptTreeRef);
+    deptTreeRef.value.filter(state.deptName);
-    deptTree.filter(state.deptName);
   },
   {
     flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -414,7 +405,7 @@ function filterDeptNode(value: string, data: any) {
 }
 
 /**
- * 部门树节点点击事件
+ * 部门树节点点击
  */
 function handleDeptNodeClick(data: { [key: string]: any }) {
   state.queryParams.deptId = data.id;
@@ -460,10 +451,9 @@ function handleStatusChange(row: { [key: string]: any }) {
  **/
 function handleQuery() {
   state.loading = true;
-  listUserPages(state.queryParams).then((response) => {
+  listUserPages(state.queryParams).then(({ data }) => {
-    const { data, total } = response as any;
+    state.userList = data.list;
-    state.pageList = data;
+    state.total = data.total;
-    state.total = total;
     state.loading = false;
   });
 }
@@ -472,8 +462,7 @@ function handleQuery() {
  * 重置查询
  */
 function resetQuery() {
-  const queryForm = unref(queryFormRef);
+  queryFormRef.value.resetFields();
-  queryForm.resetFields();
   handleQuery();
 }
 
@@ -535,8 +524,8 @@ async function handleUpdate(row: { [key: string]: any }) {
     title: "修改用户",
     visible: true,
   };
-  getUserFormDetail(userId).then((response: any) => {
+  getUserFormDetail(userId).then(({ data }) => {
-    state.formData = response.data;
+    state.formData = data;
   });
 }
 
@@ -544,8 +533,7 @@ async function handleUpdate(row: { [key: string]: any }) {
  * 表单提交
  */
 function submitForm() {
-  const dataForm = unref(dataFormRef);
+  dataFormRef.value.validate((valid: any) => {
-  dataForm.validate((valid: any) => {
     if (valid) {
       const userId = state.formData.id;
       if (userId) {
@@ -576,7 +564,7 @@ function resetForm() {
 
 /**
  * 删除用户
- **/
+ */
 function handleDelete(row: { [key: string]: any }) {
   const userIds = row.id || state.ids.join(",");
   ElMessageBox.confirm(
@@ -598,7 +586,7 @@ function handleDelete(row: { [key: string]: any }) {
 }
 
 /**
- * 取消关闭
+ * 取消
  */
 function cancel() {
   state.dialog.visible = false;
@@ -606,16 +594,16 @@ function cancel() {
 }
 
 /**
- * 加载部门数据
+ * 加载部门
- **/
+ */
 async function loadDeptOptions() {
-  listDeptSelect().then((response) => {
+  listSelectDepartments().then((response) => {
     state.deptOptions = response.data;
   });
 }
 
 /**
- * 加载性别字典数据
+ * 加载性别字典
  */
 function loadGenderOptions() {
   proxy.$listDictsByCode("gender").then((response: any) => {
@@ -627,8 +615,11 @@ function loadGenderOptions() {
  * 初始化数据
  */
 function loadData() {
+  // 初始化性别字典
   loadGenderOptions();
+  // 初始化部门
   loadDeptOptions();
+  // 初始化用户列表数据
   handleQuery();
 }