From 7ff34366265fcfe214b753c46016f6ad25efb628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 13 Mar 2022 16:27:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20API=E6=8E=A5=E5=8F=A3=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8TypeScript=E7=B1=BB=E5=9E=8B=E7=BA=A6=E6=9D=9F?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/role/components/Menu.vue | 119 +++++----
 src/views/system/role/components/Perm.vue | 127 +++++-----
 src/views/system/role/components/Role.vue | 292 +++++++++++-----------
 src/views/system/role/index.vue           |  82 +++---
 src/views/system/user/index.vue           |  81 +++---
 5 files changed, 367 insertions(+), 334 deletions(-)

diff --git a/src/views/system/role/components/Menu.vue b/src/views/system/role/components/Menu.vue
index d86636d8..8091c74c 100644
--- a/src/views/system/role/components/Menu.vue
+++ b/src/views/system/role/components/Menu.vue
@@ -1,111 +1,124 @@
 <template>
   <div class="menu-container">
-    <el-form >
+    <el-form>
       <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>
     </el-form>
 
     <el-tree
-        ref="menuRef"
-        v-if="refreshTree"
-        :default-expanded-keys="expandedKeys"
-        :default-expand-all="isExpandAll"
-        :data="menuOptions"
-        show-checkbox
-        node-key="id"
-        empty-text="加载菜单中..."
-        :check-strictly="checkStrictly"
-        highlight-current
-        @node-click="handleNodeClick"
+      ref="menuRef"
+      v-if="refreshTree"
+      :default-expanded-keys="expandedKeys"
+      :default-expand-all="isExpandAll"
+      :data="menuOptions"
+      show-checkbox
+      node-key="id"
+      empty-text="加载菜单中..."
+      :check-strictly="checkStrictly"
+      highlight-current
+      @node-click="handleNodeClick"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import {listTreeSelectMenus} from "@/api/system/menu";
-import {listRoleMenuIds, updateRoleMenu} from "@/api/system/role"
-import { nextTick, onMounted, reactive, ref, toRefs, watch} from "vue"
-import {ElTree, ElMessage, ElMessageBox} from "element-plus"
-import {Switch, Check} from '@element-plus/icons-vue'
+import { listSelectMenus } from "@/api/system/menu";
+import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
+import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
+import { ElTree, ElMessage, ElMessageBox } from "element-plus";
+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) => {
-  const roleId = props.role.id
-  if (roleId) {
-    state.checkStrictly = true
-    listRoleMenuIds(roleId).then(response => {
-      const checkedMenuIds = response.data
-      menuRef.value.setCheckedKeys(checkedMenuIds)
-      state.checkStrictly = false
-    })
+watch(
+  () => props.role.id as any,
+  (newVal, oldVal) => {
+    const roleId = props.role.id;
+    if (roleId) {
+      state.checkStrictly = true;
+      listRoleMenuIds(roleId).then(({ data }) => {
+        menuRef.value.setCheckedKeys(data);
+        state.checkStrictly = false;
+      });
+    }
   }
-})
+);
 
 const state = reactive({
-  expandedKeys: [],  // 展开的节点
-  menuOptions: [],
+  expandedKeys: [], // 展开的节点
+  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 => {
-    state.menuOptions = response.data
-  })
+  await listSelectMenus().then(({ data }) => {
+    state.menuOptions = data;
+  });
 }
 
 function handleNodeClick(node: any) {
-  emit('menuClick', node)
+  emit("menuClick", node);
 }
 
 /**
  * 展开/收缩
  */
 function toggleExpandAll() {
-  state.refreshTree = false
-  state.isExpandAll = !state.isExpandAll
+  state.refreshTree = false;
+  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>
diff --git a/src/views/system/role/components/Perm.vue b/src/views/system/role/components/Perm.vue
index aec78b41..943261ed 100644
--- a/src/views/system/role/components/Perm.vue
+++ b/src/views/system/role/components/Perm.vue
@@ -4,29 +4,32 @@
       <el-row>
         <el-col :span="12">
           <el-checkbox
-              :indeterminate="isIndeterminate"
-              v-model="checkAll"
-              @change="handleCheckAllChange"
-          >全选
+            :indeterminate="isIndeterminate"
+            v-model="checkAll"
+            @change="handleCheckAllChange"
+            >全选
           </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>
 
       <el-row>
         <el-col
-            :span="8"
-            v-for="item in permissionOptions"
-            style="margin-top: 20px"
+          :span="8"
+          v-for="item in permissionOptions"
+          style="margin-top: 20px"
+          :key="item.id"
         >
           <el-checkbox
-              border
-              v-model="item.checked"
-              :label="item.id"
-              :key="item.id"
-              @change="handleCheckedPermChange"
+            border
+            v-model="item.checked"
+            :label="item.id"
+            :key="item.id"
+            @change="handleCheckedPermChange"
           >
             {{ item.name }}
           </el-checkbox>
@@ -34,46 +37,57 @@
       </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>
 
 <script setup lang="ts">
-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 { 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 { PermQueryParam, MenuItem } from "@/types";
 
 const props = defineProps({
   role: {
     type: Object,
-    default: {}
+    default: {},
   },
   menu: {
     type: Object,
-    default: {}
-  }
-})
+    default: {},
+  },
+});
 
-
-watch(() => props.menu.id as any, (newVal, oldVal) => {
-  const menuId = props.menu.id
-  if (menuId) {
-    loadData()
+watch(
+  () => props.menu.id,
+  (value) => {
+    if (value) {
+      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()
-    return false
+    resetData();
+    return false;
   }
   state.loading = true;
-  listPerms({menuId: props.menu.id}).then(response => {
-    state.permissionOptions = response.data
-    listRolePerms(props.role.id, props.menu.id).then(res => {
-      const checkedPermIds = res.data
+
+  const params = { menuId: props.menu.id } as PermQueryParam;
+  listPerms(params).then(({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(
-      props.role.id,
-      props.menu.id,
-      checkedPermIds
-  ).then(() => {
+    .filter((item) => item.checked)
+    .map((item) => item.id);
+  saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
     ElMessage.success("提交成功");
   });
 }
 
 function resetData() {
-  state.permissionOptions = []
-  state.isIndeterminate = true
-  state.checkAll = false
+  state.permissionOptions = [];
+  state.isIndeterminate = true;
+  state.checkAll = false;
 }
 
 onMounted(() => {
-  loadData()
-})
+  loadData();
+});
 </script>
 
 <style scoped>
diff --git a/src/views/system/role/components/Role.vue b/src/views/system/role/components/Role.vue
index 7ea620d6..6e49c2a3 100644
--- a/src/views/system/role/components/Role.vue
+++ b/src/views/system/role/components/Role.vue
@@ -1,59 +1,65 @@
 <template>
   <div class="role-container">
     <!-- 搜索表单 -->
-    <el-form
-        ref="queryForm"
-        :model="queryParams"
-        :inline="true"
-    >
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
       <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button type="danger" :icon='Delete' :disabled="multiple" @click="handleDelete">删除</el-button>
+        <el-button type="success" :icon="Plus" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button
+          type="danger"
+          :icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
       </el-form-item>
 
       <el-form-item prop="name">
         <el-input
-            v-model="queryParams.name"
-            placeholder="角色名称"
-            clearable
-            @keyup.enter.native="handleQuery"
+          v-model="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 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"
-        v-loading="loading"
-        :data="pageList"
-        @selection-change="handleSelectionChange"
-        @row-click="handleRowClick"
-        highlight-current-row
-        border
+      ref="dataTableRef"
+      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"/>
-      <el-table-column label="角色编码" prop="code"/>
+      <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="120">
         <template #default="scope">
           <el-button
-              type="primary"
-              :icon="Edit"
-              circle
-              plain
-              @click.stop="handleUpdate(scope.row)"
+            type="primary"
+            :icon="Edit"
+            circle
+            plain
+            @click.stop="handleUpdate(scope.row)"
           />
           <el-button
-              type="danger"
-              :icon="Delete"
-              circle
-              plain
-              @click.stop="handleDelete(scope.row)"
+            type="danger"
+            :icon="Delete"
+            circle
+            plain
+            @click.stop="handleDelete(scope.row)"
           />
         </template>
       </el-table-column>
@@ -61,35 +67,41 @@
 
     <!-- 分页工具条 -->
     <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="handleQuery"
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="handleQuery"
     />
 
     <!-- 表单弹窗 -->
     <el-dialog
-        :title="dialog.title"
-        v-model="dialog.visible"
-        width="450px"
+      :title="dialog.title"
+      v-model="dialog.visible"
+      @close="cancel"
+      width="450px"
     >
       <el-form
-          ref="dataForm"
-          :model="formData"
-          :rules="rules"
-          label-width="100px"
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
       >
         <el-form-item label="角色名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入角色名称"/>
+          <el-input v-model="formData.name" placeholder="请输入角色名称" />
         </el-form-item>
 
         <el-form-item label="角色编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入角色编码"/>
+          <el-input v-model="formData.code" placeholder="请输入角色编码" />
         </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 { 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 {
+  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 { 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
-  },
-  pageList: [],
+  } as RoleQueryParam,
+  roleList: [] as RoleItem[],
   total: 0,
   dialog: {
-    title: '',
-    visible: false
-  },
-  formData: {
-    id: undefined,
-    name: undefined,
-    code: undefined,
-    sort: 100,
-    status: 1
+    title: "",
+    visible: false,
   },
+  formData: {} as RoleFormData,
   rules: {
-    name: [
-      {required: true, message: '请输入角色名称', trigger: 'blur'}
-    ],
-    code: [
-      {required: true, message: '请输入角色编码', trigger: 'blur'}
-    ]
-  }
-})
+    name: [{ 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', {})
-  state.loading = true
-  listRolesWithPage(state.queryParams).then(response => {
-    const {data, total} = response as any
-    state.pageList = data
-    state.total = total
-    state.loading = false
-  })
+  emit("roleClick", {});
+  state.loading = true;
+  listRolePages(state.queryParams).then(({ data }) => {
+    state.roleList = data.list;
+    state.total = data.total;
+    state.loading = false;
+  });
 }
 
 function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    name: undefined
-  }
-  handleQuery()
+  queryFormRef.value.resetFields();
+  handleQuery();
 }
 
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id)
-  state.single = selection.length !== 1
-  state.multiple = !selection.length
+  state.ids = selection.map((item: any) => item.id);
+  state.single = selection.length !== 1;
+  state.multiple = !selection.length;
 }
 
 function handleRowClick(row: any) {
-  emit('roleClick', row)
+  emit("roleClick", row);
 }
 
 function handleAdd() {
-  resetForm()
   state.dialog = {
-    title: '添加角色',
-    visible: true
-  }
+    title: "添加角色",
+    visible: true,
+  };
 }
 
 function handleUpdate(row: any) {
-  resetForm()
   state.dialog = {
-    title: '修改角色',
+    title: "修改角色",
     visible: true,
-  }
-  const roleId = row.id || state.ids
-  getRoleDetail(roleId).then((response) => {
-    state.formData = response.data
-  })
+  };
+  const roleId = row.id || state.ids;
+  getRoleFormDetail(roleId).then(({ data }) => {
+    state.formData = data;
+  });
 }
 
 function submitForm() {
-  const form = unref(dataForm)
-  form.validate((valid: any) => {
+  dataFormRef.value.validate((valid: any) => {
     if (valid) {
       if (state.formData.id) {
-        updateRole(state.formData.id as any, state.formData).then(response => {
-          ElMessage.success('修改成功')
-          state.dialog.visible = false
-          handleQuery()
-        })
+        updateRole(state.formData.id as any, state.formData).then(
+          (response) => {
+            ElMessage.success("修改成功");
+            state.dialog.visible = false;
+            handleQuery();
+          }
+        );
       } else {
-        addRole(state.formData).then(response => {
-          ElMessage.success('新增成功')
-          state.dialog.visible = false
-          handleQuery()
-        })
+        addRole(state.formData).then((response) => {
+          ElMessage.success("新增成功");
+          state.dialog.visible = false;
+          handleQuery();
+        });
       }
     }
-  })
+  });
 }
 
+/**
+ * 重置表单
+ */
 function resetForm() {
-  state.formData = {
-    id: undefined,
-    name: undefined,
-    code: undefined,
-    sort: 100,
-    status: 1
-  }
+  dataFormRef.value.resetFields();
+  handleQuery();
 }
 
 function cancel() {
-  resetForm()
-  state.dialog.visible = false
+  resetForm();
+  state.dialog.visible = false;
 }
 
 function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',')
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    deleteRoles(ids).then(() => {
-      ElMessage.success('删除成功')
-      handleQuery()
+  const ids = [row.id || state.ids].join(",");
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      deleteRoles(ids).then(() => {
+        ElMessage.success("删除成功");
+        handleQuery();
+      });
     })
-  }).catch(() =>
-      ElMessage.info('已取消删除')
-  )
+    .catch(() => ElMessage.info("已取消删除"));
 }
 
 onMounted(() => {
-  handleQuery()
-})
-
+  handleQuery();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 67fea6eb..1b43a5dd 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -4,110 +4,114 @@
       <el-col :span="10" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-            <svg-icon color="#333" icon-class="role"/>
+            <svg-icon color="#333" icon-class="role" />
             角色列表
           </template>
-          <role ref="role" @roleClick="handleRoleClick"/>
+          <role ref="role" @roleClick="handleRoleClick" />
         </el-card>
       </el-col>
 
       <el-col :span="6" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-            <svg-icon color="#333" icon-class="menu"/>
-            <span style="margin:0 5px;">菜单分配</span>
+            <svg-icon color="#333" icon-class="menu" />
+            <span style="margin: 0 5px">菜单分配</span>
             <el-tag type="success" v-if="role.id">
-              <svg-icon color="green" icon-class="role"/>
+              <svg-icon color="green" icon-class="role" />
               {{ role.name }}
             </el-tag>
             <el-tag type="warning" v-else size="small">请选择角色</el-tag>
           </template>
-          <menus ref="menu" @menuClick="handleMenuClick" :role="role"/>
+          <menus ref="menu" @menuClick="handleMenuClick" :role="role" />
         </el-card>
       </el-col>
 
       <el-col :span="8" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-            <svg-icon color="#333" icon-class="perm"/>
-            <span style="margin:0 5px;">权限分配</span>
+            <svg-icon color="#333" icon-class="perm" />
+            <span style="margin: 0 5px">权限分配</span>
 
-            <el-tag type="success" style="margin:0 5px 0 0;" v-if="role.id" >
-              <svg-icon color="green" icon-class="role"/>
+            <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"/>
+              <svg-icon color="red" icon-class="menu" />
               {{ menu.name }}
             </el-tag>
             <el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
           </template>
-          <perm ref="perm" :menu="menu" :role="role"/>
+          <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 { reactive, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+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('请选择角色')
-    return false
+    ElMessage.warning("请选择角色");
+    return false;
   }
-
   if (menuRow) {
     state.menu = {
-      id: menuRow.id,
-      name: menuRow.label
-    }
+      id: menuRow.value,
+      name: menuRow.label,
+    };
   } else {
     state.menu = {
       id: undefined,
-      name: ''
-    }
+      name: ""
+    };
   }
 }
-
 </script>
 
 <style scoped>
-
 </style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index c7241b54..8f43d078 100644
--- a/src/views/system/user/index.vue
+++ b/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: {
-    id: undefined,
-    deptId: undefined,
-    username: undefined,
-    nickname: undefined,
-    password: "",
-    mobile: undefined,
-    email: undefined,
-    gender: undefined,
-    status: 1,
-    remark: undefined,
-    roleIds: [],
-  },
+  formData: {} as UserFormData,
   // 查询参数
-  queryParams:{
+  queryParams: {
     pageNum: 1,
     pageSize: 10,
-    keywords: undefined,
-    status: undefined,
-    deptId: undefined,
-  },
+  } as UserQueryParam,
   // 表单校验
   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);
-    deptTree.filter(state.deptName);
+    deptTreeRef.value.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) => {
-    const { data, total } = response as any;
-    state.pageList = data;
-    state.total = total;
+  listUserPages(state.queryParams).then(({ data }) => {
+    state.userList = data.list;
+    state.total = data.total;
     state.loading = false;
   });
 }
@@ -472,8 +462,7 @@ function handleQuery() {
  * 重置查询
  */
 function resetQuery() {
-  const queryForm = unref(queryFormRef);
-  queryForm.resetFields();
+  queryFormRef.value.resetFields();
   handleQuery();
 }
 
@@ -535,8 +524,8 @@ async function handleUpdate(row: { [key: string]: any }) {
     title: "修改用户",
     visible: true,
   };
-  getUserFormDetail(userId).then((response: any) => {
-    state.formData = response.data;
+  getUserFormDetail(userId).then(({ data }) => {
+    state.formData = data;
   });
 }
 
@@ -544,8 +533,7 @@ async function handleUpdate(row: { [key: string]: any }) {
  * 表单提交
  */
 function submitForm() {
-  const dataForm = unref(dataFormRef);
-  dataForm.validate((valid: any) => {
+  dataFormRef.value.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();
 }