✨ Introducing new features. 完成用户管理的增删改查

src/api/admin/dept.ts

@@ -0,0 +1,9 @@
+import request from "/@/utils/request";
+
+export const depttree = (params?: Object) => {
+    return request({
+        url: '/admin/dept/tree',
+        method: "get",
+        params
+    })
+}

src/api/admin/menu.ts

@@ -0,0 +1,40 @@
+import request from "/@/utils/request";
+
+export const pageList = (params?: Object) => {
+    return request({
+        url: '/admin/menu/tree',
+        method: "get",
+        params
+    })
+}
+
+export const info = (id: String) => {
+    return request({
+        url: `/admin/menu/${id}`,
+        method: "get",
+    })
+}
+
+export const save = (data: Object) => {
+    return request({
+        url: '/admin/menu',
+        method: "post",
+        data: data
+    })
+}
+
+export const update = (data: Object) => {
+    return request({
+        url: '/admin/menu',
+        method: "put",
+        data: data
+    })
+}
+
+export const addObj = (data: Object) => {
+    return request({
+        url: '/admin/menu',
+        method: "post",
+        data: data
+    })
+}

src/api/admin/post.ts

@@ -0,0 +1,10 @@
+import request from "/@/utils/request";
+
+
+export const list = (params?: Object) => {
+    return request({
+        url: '/admin/post/list',
+        method: "get",
+        params
+    })
+}

src/api/admin/role.ts

@@ -0,0 +1,10 @@
+import request from "/@/utils/request";
+
+
+export const list = (params?: Object) => {
+    return request({
+        url: '/admin/role/list',
+        method: "get",
+        params
+    })
+}

src/api/admin/user.ts

@@ -0,0 +1,39 @@
+import request from "/@/utils/request";
+
+export const pageList = (params?: Object) => {
+    return request({
+        url: '/admin/user/page',
+        method: "get",
+        params
+    })
+}
+
+export const addObj = (obj: Object) =>  {
+    return request({
+        url: '/admin/user',
+        method: 'post',
+        data: obj
+    })
+}
+
+export const getObj = (id: String) => {
+    return request({
+        url: '/admin/user/' + id,
+        method: 'get'
+    })
+}
+
+export const delObj = (id: String) => {
+    return request({
+        url: '/admin/user/' + id,
+        method: 'delete'
+    })
+}
+
+export const putObj = (obj: Object) => {
+    return request({
+        url: '/admin/user',
+        method: 'put',
+        data: obj
+    })
+}

src/api/menu/index.ts

@@ -29,33 +29,4 @@ export function useMenuApi() {
 	};
 }
 
-export const pageList = (params?: Object) => {
-	return request({
-		url: '/admin/menu/tree',
-		method: "get",
-		params
-	})
-}
 
-export const info = (id: String) => {
-	return request({
-		url: `/admin/menu/${id}`,
-		method: "get",
-	})
-}
-
-export const save = (data: Object) => {
-	return request({
-		url: '/admin/menu',
-		method: "post",
-		data: data
-	})
-}
-
-export const update = (data: Object) => {
-	return request({
-		url: '/admin/menu',
-		method: "put",
-		data: data
-	})
-}

src/views/system/menu/dialog.vue

@@ -4,7 +4,7 @@
         <el-row :gutter="35">
           <el-col :span="12" class="mb20">
             <el-form-item label="菜单类型">
-              <el-radio-group v-model="state.ruleForm.menuType">
+              <el-radio-group v-model="state.ruleForm.menType">
                 <el-radio-button label="0">左菜单</el-radio-button>
                 <el-radio-button label="1">按钮</el-radio-button>
                 <el-radio-button label="2">顶菜单</el-radio-button>
@@ -66,10 +66,8 @@
 
 <script setup lang="ts" name="systemMenuDialog">
 import {defineAsyncComponent, nextTick, onMounted, reactive, ref} from 'vue';
-import {storeToRefs} from 'pinia';
-import {useRoutesList} from '/@/stores/routesList';
 import {i18n} from '/@/i18n/index';
-import {info, pageList, update} from "/@/api/menu";
+import {info, pageList, update, addObj} from "/@/api/admin/menu";
 import type {menuData} from './menu'
 
 // 定义子组件向父组件传值/事件
@@ -80,11 +78,8 @@ const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelect
 
 // 定义变量内容
 const menuDialogFormRef = ref();
-const stores = useRoutesList();
-const { routesList } = storeToRefs(stores);
 // 定义需要的数据
 const state = reactive({
-  // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
   ruleForm: {
     menuId: '',
     name: '',
@@ -106,7 +101,7 @@ const state = reactive({
   },
 });
 
-// 从后端获取路由信息
+// 从后端获取菜单信息
 const getMenuData = async () => {
   pageList().then(res => {
     let menu: menuData;
@@ -135,7 +130,6 @@ const openDialog = (type: string, row?: any) => {
   if (type === 'edit') {
     // 模拟数据，实际请走接口
     info(row.id).then(res => {
-      console.log(res.data, 'res.data')
       state.ruleForm = (res.data as menuData)
     })
     state.dialog.title = '修改菜单';
@@ -150,6 +144,7 @@ const openDialog = (type: string, row?: any) => {
   }
   state.dialog.type = type;
   state.dialog.isShowDialog = true;
+  getMenuData();
 };
 // 关闭弹窗
 const closeDialog = () => {
@@ -168,13 +163,15 @@ const onSubmit = () => {
       emit('refresh');
     }).catch(err => {
     })
+  }else{
+    addObj(state.ruleForm).then(() => {
+      closeDialog(); // 关闭弹窗
+      emit('refresh');
+    }).catch(err => {
+    })
   }
 
 };
-// 页面加载时
-onMounted(() => {
-  getMenuData();
-});
 
 // 暴露变量 只有暴漏出来的变量 父组件才能使用
 defineExpose({

src/views/system/menu/index.vue

@@ -57,7 +57,7 @@
 import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
 import { RouteRecordRaw } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import { pageList } from '/@/api/menu'
+import { pageList } from '/@/api/admin/menu'
 import type { menuData } from './menu'
 // 引入组件
 const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));

src/views/system/user/dialog.vue

@@ -1,79 +1,83 @@
 <template>
 	<div class="system-user-dialog-container">
-		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
+		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="60%">
 			<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
 				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="账户名称">
-							<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
+					<el-col :span="12" class="mb20">
+						<el-form-item label="用户名">
+							<el-input v-model="state.ruleForm.username" placeholder="请输入用户名" :disabled="state.dialog.type === 'edit'"></el-input>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="用户昵称">
-							<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
+					<el-col :span="12" class="mb20">
+						<el-form-item label="密码">
+							<el-input v-model="state.ruleForm.password" type="password" placeholder="请输入密码" clearable></el-input>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="关联角色">
-							<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
-								<el-option label="超级管理员" value="admin"></el-option>
-								<el-option label="普通用户" value="common"></el-option>
+          <el-col :span="12" class="mb20">
+            <el-form-item label="姓名">
+              <el-input v-model="state.ruleForm.name" placeholder="请输入姓名" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item label="手机号">
+              <el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+					<el-col :span="12" class="mb20">
+						<el-form-item label="角色">
+							<el-select v-model="state.role" placeholder="请选择" clearable class="w100" multiple>
+                <el-option
+                    v-for="item in state.roleData"
+                    :key="item.roleId"
+                    :label="item.roleName"
+                    :value="item.roleId"
+                />
 							</el-select>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :span="12" class="mb20">
+            <el-form-item label="岗位">
+              <el-select v-model="state.post" placeholder="请选择" clearable class="w100" multiple>
+                <el-option
+                    v-for="item in state.postData"
+                    :key="item.postId"
+                    :label="item.postName"
+                    :value="item.postId"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+					<el-col :span="12" class="mb20">
 						<el-form-item label="部门">
-							<el-cascader
-								:options="state.deptData"
-								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
-								placeholder="请选择部门"
-								clearable
-								class="w100"
-								v-model="state.ruleForm.department"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.deptName }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
+              <el-tree-select
+                  v-model="state.ruleForm.deptId"
+                  :data="state.deptData"
+                  :props="{  value: 'id', label: 'name', children: 'children' }"
+                  class="w100"
+                  clearable
+                  check-strictly
+                  placeholder="请选择所属部门"
+              >
+              </el-tree-select>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="手机号">
-							<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+
+					<el-col :span="12" class="mb20">
 						<el-form-item label="邮箱">
 							<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="性别">
-							<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100">
-								<el-option label="男" value="男"></el-option>
-								<el-option label="女" value="女"></el-option>
-							</el-select>
+          <el-col :span="12" class="mb20">
+						<el-form-item label="昵称">
+							<el-input v-model="state.ruleForm.nickname" placeholder="请输入昵称" clearable></el-input>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="账户密码">
-							<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="账户过期">
-							<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="用户状态">
-							<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="用户描述">
-							<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
+					<el-col :span="12" class="mb20">
+						<el-form-item label="状态">
+              <el-radio-group v-model="state.ruleForm.lockFlag">
+                <el-radio label="0" border>有效</el-radio>
+                <el-radio label="9" border>禁用</el-radio>
+              </el-radio-group>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -89,8 +93,12 @@
 </template>
 
 <script setup lang="ts" name="systemUserDialog">
-import { reactive, ref } from 'vue';
-
+import {nextTick, reactive, ref, watchEffect} from 'vue';
+import {  getObj,addObj, putObj } from '/@/api/admin/user'
+import { list as roleList } from '/@/api/admin/role'
+import { list as postList } from '/@/api/admin/post'
+import { depttree } from '/@/api/admin/dept'
+import { ElMessage } from 'element-plus';
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['refresh']);
 
@@ -98,19 +106,28 @@ const emit = defineEmits(['refresh']);
 const userDialogFormRef = ref();
 const state = reactive({
 	ruleForm: {
-		userName: '', // 账户名称
-		userNickname: '', // 用户昵称
-		roleSign: '', // 关联角色
-		department: [] as string[], // 部门
-		phone: '', // 手机号
-		email: '', // 邮箱
-		sex: '', // 性别
-		password: '', // 账户密码
-		overdueTime: '', // 账户过期
-		status: true, // 用户状态
-		describe: '', // 用户描述
+    userId: '',
+    username: '',
+    password: '' as String | undefined,
+    salt: '',
+    wxOpenid: '',
+    qqOpenid: '',
+    lockFlag: '',
+    phone: '' as String | undefined,
+    deptId: '',
+    roleList: [],
+    postList: [],
+    nickname: '',
+    name: '',
+    email: '',
+    post: [] as String[],
+    role: [] as String[],
 	},
-	deptData: [] as DeptTreeType[], // 部门数据
+  post: [] as String[],
+  role: [] as String[],
+	deptData: [], // 部门数据
+  postData: [], //岗位数据
+  roleData: [], //角色数据
 	dialog: {
 		isShowDialog: false,
 		type: '',
@@ -120,21 +137,36 @@ const state = reactive({
 });
 
 // 打开弹窗
-const openDialog = (type: string, row: RowUserType) => {
+const openDialog = (type: string, row: any) => {
 	if (type === 'edit') {
-		state.ruleForm = row;
 		state.dialog.title = '修改用户';
 		state.dialog.submitTxt = '修 改';
+
+    state.ruleForm = Object.assign(state.ruleForm,row)
+    row.roleList.map((item: any) => {
+      state.role.push(item.roleId)
+    })
+    row.postList.map((item: any) => {
+      state.post.push(item.postId)
+    })
+    state.ruleForm.password = "******"
 	} else {
 		state.dialog.title = '新增用户';
 		state.dialog.submitTxt = '新 增';
 		// 清空表单，此项需加表单验证才能使用
-		// nextTick(() => {
-		// 	userDialogFormRef.value.resetFields();
-		// });
+		nextTick(() => {
+			userDialogFormRef.value.resetFields();
+      state.ruleForm = Object.assign({})
+      state.role = []
+      state.post = []
+		});
 	}
+  state.dialog.type = type;
 	state.dialog.isShowDialog = true;
-	getMenuData();
+  // 加载使用的数据
+	getDeptData();
+  getPostData();
+  getRoleData();
 };
 // 关闭弹窗
 const closeDialog = () => {
@@ -148,37 +180,57 @@ const onCancel = () => {
 const onSubmit = () => {
 	closeDialog();
 	emit('refresh');
-	// if (state.dialog.type === 'add') { }
+	if (state.dialog.type === 'edit') {
+    // 处理数据
+    if (state.ruleForm.phone && state.ruleForm.phone.indexOf("*") >= 0) {
+      state.ruleForm.phone = undefined;
+    }
+    if (state.ruleForm.password && state.ruleForm.password.indexOf("******") >= 0) {
+      state.ruleForm.password = undefined;
+    }
+    putObj(state.ruleForm).then(() => {
+      closeDialog(); // 关闭弹窗
+      emit('refresh');
+    }).catch(err => {
+      ElMessage.error(err.msg)
+    })
+  }else{
+    if (state.ruleForm.phone && state.ruleForm.phone.indexOf("*") > 0) {
+      state.ruleForm.phone = undefined;
+    }
+    addObj(state.ruleForm).then(() => {
+      ElMessage.success("保存成功")
+      closeDialog(); // 关闭弹窗
+      emit('refresh');
+    }).catch(err => {
+      ElMessage.error(err.msg)
+    })
+  }
 };
+
+watchEffect(() => {
+  state.ruleForm.post = state.post;
+  state.ruleForm.role = state.role
+})
 // 初始化部门数据
-const getMenuData = () => {
-	state.deptData.push({
-		deptName: 'vueNextAdmin',
-		createTime: new Date().toLocaleString(),
-		status: true,
-		sort: Math.random(),
-		describe: '顶级部门',
-		id: Math.random(),
-		children: [
-			{
-				deptName: 'IT外包服务',
-				createTime: new Date().toLocaleString(),
-				status: true,
-				sort: Math.random(),
-				describe: '总部',
-				id: Math.random(),
-			},
-			{
-				deptName: '资本控股',
-				createTime: new Date().toLocaleString(),
-				status: true,
-				sort: Math.random(),
-				describe: '分部',
-				id: Math.random(),
-			},
-		],
-	});
+const getDeptData = () => {
+  // 获取部门数据
+  depttree().then(res => {
+    state.deptData = res.data
+  })
 };
+// 岗位数据
+const getPostData =() => {
+  postList().then(res => {
+    state.postData = res.data
+  })
+}
+// 角色数据
+const getRoleData =() => {
+  roleList().then(res => {
+    state.roleData = res.data
+  })
+}
 
 // 暴露变量
 defineExpose({

src/views/system/user/index.vue

@@ -1,60 +1,98 @@
 <template>
 	<div class="system-user-container layout-padding">
-		<el-card shadow="hover" class="layout-padding-auto">
-			<div class="system-user-search mb15">
-				<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
-				<el-button size="default" type="primary" class="ml10">
-					<el-icon>
-						<ele-Search />
-					</el-icon>
-					查询
-				</el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
-					<el-icon>
-						<ele-FolderAdd />
-					</el-icon>
-					新增用户
-				</el-button>
-			</div>
-			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
-				<el-table-column type="index" label="序号" width="60" />
-				<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
-					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.status">启用</el-tag>
-						<el-tag type="info" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" width="100">
-					<template #default="scope">
-						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
-							>修改</el-button
-						>
-						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<el-pagination
-				@size-change="onHandleSizeChange"
-				@current-change="onHandleCurrentChange"
-				class="mt15"
-				:pager-count="5"
-				:page-sizes="[10, 20, 30]"
-				v-model:current-page="state.tableData.param.pageNum"
-				background
-				v-model:page-size="state.tableData.param.pageSize"
-				layout="total, sizes, prev, pager, next, jumper"
-				:total="state.tableData.total"
-			>
-			</el-pagination>
-		</el-card>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <el-card shadow="hover" class="layout-padding-auto">
+          <div class="head-container">
+            <el-input
+                v-model="deptData.search.deptName"
+                placeholder="请输入部门名称"
+                clearable
+                prefix-icon="Search"
+                style="margin-bottom: 20px"
+                @change="getDeptTree"
+            />
+          </div>
+          <div class="head-container">
+            <el-tree
+                :data="deptData.deptList"
+                :props="{ label: 'name', children: 'children',value: 'id' }"
+                :expand-on-click-node="false"
+                ref="deptTreeRef"
+                :loading="deptData.loading"
+                node-key="id"
+                highlight-current
+                default-expand-all
+                @node-click="handleNodeClick"
+            />
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-card shadow="hover" class="layout-padding-auto">
+          <div class="system-user-search mb15">
+            <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px" v-model="state.search.username"> </el-input>
+            <el-button size="default" type="primary" class="ml10" @click="getTableData">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增用户
+            </el-button>
+          </div>
+          <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+            <el-table-column type="index" label="序号" width="60" />
+            <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
+            <el-table-column label="岗位" show-overflow-tooltip>
+              <template #default="scope">
+                <el-tag v-for="(item,index) in scope.row.postList" type="success">{{item.postName}}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="角色" show-overflow-tooltip>
+              <template #default="scope">
+                <el-tag v-for="(item,index) in scope.row.roleList" type="success">{{item.roleName}}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" show-overflow-tooltip>
+              <template #default="scope">
+                <el-tag v-if="scope.row.lockFlag === '0'" type="success">有效</el-tag>
+                <el-tag v-if="scope.row.lockFlag === '9'" type="success">锁定</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" width="100">
+              <template #default="scope">
+                <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
+                >修改</el-button
+                >
+                <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+              @size-change="onHandleSizeChange"
+              @current-change="onHandleCurrentChange"
+              class="mt15"
+              :pager-count="5"
+              :page-sizes="[10, 20, 30]"
+              v-model:current-page="state.tableData.param.pageNum"
+              background
+              v-model:page-size="state.tableData.param.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="state.tableData.total"
+          >
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+
 		<UserDialog ref="userDialogRef" @refresh="getTableData()" />
 	</div>
 </template>
@@ -62,13 +100,15 @@
 <script setup lang="ts" name="systemUser">
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
+import { pageList, delObj } from '/@/api/admin/user'
+import { depttree } from '/@/api/admin/dept'
 
 // 引入组件
 const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));
 
 // 定义变量内容
 const userDialogRef = ref();
-const state = reactive<SysUserState>({
+const state = reactive({
 	tableData: {
 		data: [],
 		total: 0,
@@ -78,54 +118,81 @@ const state = reactive<SysUserState>({
 			pageSize: 10,
 		},
 	},
+  search: {
+    deptId: '',
+    username: ''
+  }
 });
 
+const search = reactive({
+  deptName: ''
+})
+const deptData = reactive({
+  deptList: [],
+  search: {
+    deptName: ''
+  },
+  loading: false
+})
+
 // 初始化表格数据
 const getTableData = () => {
 	state.tableData.loading = true;
-	const data = [];
-	for (let i = 0; i < 2; i++) {
-		data.push({
-			userName: i === 0 ? 'admin' : 'test',
-			userNickname: i === 0 ? '我是管理员' : '我是普通用户',
-			roleSign: i === 0 ? 'admin' : 'common',
-			department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
-			phone: '12345678910',
-			email: 'vueNextAdmin@123.com',
-			sex: '女',
-			password: '123456',
-			overdueTime: new Date(),
-			status: true,
-			describe: i === 0 ? '不可删除' : '测试用户',
-			createTime: new Date().toLocaleString(),
-		});
-	}
-	state.tableData.data = data;
-	state.tableData.total = state.tableData.data.length;
-	setTimeout(() => {
-		state.tableData.loading = false;
-	}, 500);
+  pageList(state.search).then(res => {
+    state.tableData.data = res.data.records;
+    state.tableData.total = res.data.total;
+    state.tableData.loading = false;
+  }).catch(err => {
+    ElMessage.error(err.msg)
+    state.tableData.loading = false;
+  })
 };
+
+// 获取部门数据
+
+const getDeptTree = () => {
+  deptData.loading = true
+  depttree(deptData.search).then(res => {
+    deptData.deptList = res.data
+  }).catch(err => {
+    ElMessage.error(err.msg)
+  }).finally(() => {
+    deptData.loading = false
+  })
+
+}
+
+// 点击数
+const handleNodeClick = (e: any) => {
+  state.search.deptId = e.id
+  getTableData()
+}
+
+
 // 打开新增用户弹窗
 const onOpenAddUser = (type: string) => {
 	userDialogRef.value.openDialog(type);
 };
 // 打开修改用户弹窗
-const onOpenEditUser = (type: string, row: RowUserType) => {
+const onOpenEditUser = (type: string, row: any) => {
 	userDialogRef.value.openDialog(type, row);
 };
 // 删除用户
-const onRowDel = (row: RowUserType) => {
-	ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
+const onRowDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
 	})
 		.then(() => {
-			getTableData();
-			ElMessage.success('删除成功');
+      // 删除用户的接口
+      delObj(row.userId).then(res => {
+        getTableData();
+        ElMessage.success('删除成功');
+      }).catch(err => {
+        ElMessage.error(err.msg)
+      })
 		})
-		.catch(() => {});
 };
 // 分页改变
 const onHandleSizeChange = (val: number) => {
@@ -140,6 +207,7 @@ const onHandleCurrentChange = (val: number) => {
 // 页面加载时
 onMounted(() => {
 	getTableData();
+  getDeptTree();
 });
 </script>