From efb4569338df5aeeba8317921bb5ee164dc03ed9 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 11 七月 2022 17:49:19 +0800
Subject: [PATCH] 基础模块

---
 src/views/system/role/index.vue                      |   99 +--
 src/api/user/index.ts                                |   37 +
 src/api/role/index.ts                                |   25 
 src/views/system/department/component/deptDialog.vue |   47 -
 src/views/system/user/component/userDialog.vue       |  221 ++++++++
 src/views/system/department/index.vue                |   44 +
 /dev/null                                            |  202 -------
 src/views/system/menu/index.vue                      |   14 
 src/views/system/user/index.vue                      |  153 +++--
 src/views/system/role/component/roleDialog.vue       |  150 +++++
 src/api/department/index.ts                          |   17 
 src/api/menu/index.ts                                |   19 
 src/views/system/menu/component/menuDialog.vue       |  518 +++++++++---------
 13 files changed, 914 insertions(+), 632 deletions(-)

diff --git a/src/api/department/index.ts b/src/api/department/index.ts
index 0ed427c..3733527 100644
--- a/src/api/department/index.ts
+++ b/src/api/department/index.ts
@@ -2,24 +2,35 @@
 
 export function departmentApi() {
     return {
+        // v2
         getDepartmentList: () => {
             return request({
                 url: `/department/list`,
-                method: 'post',
+                method: 'post'
             });
         },
+        // v2
         addDepartment: (data: object) => {
             return request({
                 url: `/department/add`,
                 method: 'post',
-                data:data
+                data: data
             });
         },
+        // v2
         modDepartment: (data: object) => {
             return request({
                 url: `/department/mod`,
                 method: 'post',
-                data:data
+                data: data
+            });
+        },
+        // v1
+        deleteDepartment: (value?: object) => {
+            return request({
+                url: `/department/del`,
+                method: 'post',
+                data: value
             });
         },
     };
diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index a8e0864..e5e9291 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -8,32 +8,43 @@
  */
 export function useMenuApi() {
 	return {
+		// v2
 		getMenuAdmin: (value?: string) => {
 			return request({
 				url: `/auth/menu?projectId= ${value}`,
-				method: 'post',
+				method: 'post'
 			});
 		},
+		// v1
 		addMenu: (value?: object) => {
 			return request({
 				url: `/menu/add`,
 				method: 'post',
-				data:value
+				data: value
 			});
 		},
+		// v1
 		modMenu: (value?: object) => {
 			return request({
 				url: `/menu/mod`,
 				method: 'post',
-				data:value
+				data: value
 			});
 		},
+		// v1
 		deleteMenu: (value?: object) => {
 			return request({
 				url: `/menu/del`,
 				method: 'post',
-				data:value,
+				data: value
 			});
 		},
+		// v1
+		getProjectList: () => {
+			return request({
+				url: `/project/list`,
+				method: 'post'
+			});
+		}
 	};
 }
diff --git a/src/api/role/index.ts b/src/api/role/index.ts
index 137195d..3b85d45 100644
--- a/src/api/role/index.ts
+++ b/src/api/role/index.ts
@@ -2,10 +2,35 @@
 
 export function useRoleApi() {
     return {
+        // v2
         getRoleList: () => {
             return request({
                 url: `/role/list`,
+                method: 'post'
+            });
+        },
+        // v2
+        addRole: (data: object) => {
+            return request({
+                url: `/role/add`,
                 method: 'post',
+                data: data
+            });
+        },
+        // v2
+        modRole: (data: object) => {
+            return request({
+                url: `/role/mod`,
+                method: 'post',
+                data: data
+            });
+        },
+        // v2
+        deleteRole: (value?: object) => {
+            return request({
+                url: `/role/del`,
+                method: 'post',
+                data: value
             });
         },
     };
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
new file mode 100644
index 0000000..8959ea7
--- /dev/null
+++ b/src/api/user/index.ts
@@ -0,0 +1,37 @@
+import request from '/@/utils/request';
+
+export function userApi() {
+    return {
+        // v1
+        getUserList: (data: any) => {
+            return request({
+                url: `/account/page/list`,
+                method: 'post',
+                data: data
+            });
+        },
+        // v1
+        addUser: (data: object) => {
+            return request({
+                url: `/account/add`,
+                method: 'post',
+                data: data
+            });
+        },
+        // v1
+        modUser: (data: object) => {
+            return request({
+                url: `/account/mod`,
+                method: 'post',
+                data: data
+            });
+        },
+        // v1
+        getUserLByDepartment: (depId: number | null) => {
+            return request({
+                url: `/account/dep/list?depId=${depId}`,
+                method: 'get'
+            });
+        }
+    };
+}
diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue
index 0477317..e3757f2 100644
--- a/src/views/system/department/component/deptDialog.vue
+++ b/src/views/system/department/component/deptDialog.vue
@@ -7,23 +7,23 @@
 						<el-form-item label="上级部门">
 							<el-cascader
 								:options="deptData"
-								:props="{ checkStrictly: true, value: 'id', label: 'name' }"
+								:props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
 								placeholder="请选择部门"
 								clearable
 								class="w100"
-								v-model="departmentForm.struct"
+								v-model="departmentForm.parentDepId"
 							>
 							</el-cascader>
 						</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="departmentForm.name" placeholder="请输入部门名称" clearable></el-input>
+							<el-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input>
 						</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="departmentForm.info" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
+							<el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -31,7 +31,7 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -45,7 +45,6 @@
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-	struct: Array<string>;
 	name:string,
 	info:string,
 	parentId:string,
@@ -55,10 +54,9 @@
 	title:string;
 	isShowDialog: boolean;
 	departmentForm: {
-		struct: Array<string>;
-		name:string,
-		info:string,
-		parentId:string
+        depName:string,
+        depInfo:string,
+        parentDepId:string
 	};
 	deptData: Array<TableDataRow>;
 }
@@ -70,10 +68,9 @@
 			title:'',
 			isShowDialog: false,
 			departmentForm: {
-				name:'',
-				parentId:'',
-				info:'',
-				struct:[]
+                depName:'',
+                parentDepId:'',
+                depInfo:'',
 			},
 			deptData: [], // 部门数据
 		});
@@ -84,13 +81,13 @@
 			if(type === '新增'){
 				state.title = '新增部门'
 				state.departmentForm = {
-					name:'',
-					parentId:'',
-					info:'',
-					struct:[]
+                    depName:'',
+                    parentDepId:'',
+                    depInfo:'',
 				}
 			}else{
-				state.title = '编辑部门'
+				state.title = '修改部门'
+				state.departmentForm = JSON.parse(JSON.stringify(value))
 			}
 		};
 		// 关闭弹窗
@@ -103,20 +100,16 @@
 		};
 		// 新增
 		const onSubmit = async () => {
-			if(state.departmentForm.struct && state.departmentForm.struct !== []){
-				let departmentId = JSON.parse(JSON.stringify(state.departmentForm.struct))
-				state.departmentForm.parentId = departmentId[departmentId.length - 1]
-			}
 			if(state.title === '新增部门'){
 				let res = await departmentApi().addDepartment(state.departmentForm)
 				if(res.data.code === '200'){
 					ElMessage({
 						type:'success',
-						message:'菜单新增成功',
+						message:'部门新增成功',
 						duration:2000
 					})
 					closeDialog();
-					context.emit('getMenuList')
+					context.emit('getDepartmentList')
 				}else{
 					ElMessage({
 						type:'warning',
@@ -128,11 +121,11 @@
 				if(res.data.code === '200'){
 					ElMessage({
 						type:'success',
-						message:'菜单修改成功',
+						message:'部门修改成功',
 						duration:2000
 					})
 					closeDialog();
-					context.emit('getMenuList')
+					context.emit('getDepartmentList')
 				}else{
 					ElMessage({
 						type:'warning',
diff --git a/src/views/system/department/component/editDept.vue b/src/views/system/department/component/editDept.vue
deleted file mode 100644
index 7b16f44..0000000
--- a/src/views/system/department/component/editDept.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-	<div class="system-edit-dept-container">
-		<el-dialog title="修改部门" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" size="default" label-width="90px">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="上级部门">
-							<el-cascader
-								:options="deptData"
-								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
-								placeholder="请选择部门"
-								clearable
-								class="w100"
-								v-model="ruleForm.deptLevel"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.deptName }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
-						</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="ruleForm.deptName" 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="ruleForm.person" 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="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-form-item label="邮箱">
-							<el-input v-model="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-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
-						</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="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="ruleForm.describe" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	deptName: string;
-	createTime: string;
-	status: boolean;
-	sort: number;
-	describe: string;
-	id: number;
-	children?: TableDataRow[];
-}
-interface RuleFormState {
-	deptLevel: Array<string>;
-	deptName: string;
-	person: string;
-	phone: string | number;
-	email: string;
-	sort: number;
-	status: boolean;
-	describe: string;
-}
-interface DeptSate {
-	isShowDialog: boolean;
-	ruleForm: RuleFormState;
-	deptData: Array<TableDataRow>;
-}
-
-export default defineComponent({
-	name: 'systemEditDept',
-	setup() {
-		const state = reactive<DeptSate>({
-			isShowDialog: false,
-			ruleForm: {
-				deptLevel: [], // 上级部门
-				deptName: '', // 部门名称
-				person: '', // 负责人
-				phone: '', // 手机号
-				email: '', // 邮箱
-				sort: 0, // 排序
-				status: true, // 部门状态
-				describe: '', // 部门描述
-			},
-			deptData: [], // 部门数据
-		});
-		// 打开弹窗
-		const openDialog = (row: RuleFormState) => {
-			row.deptLevel = ['vueNextAdmin'];
-			row.person = 'lyt';
-			row.phone = '12345678910';
-			row.email = 'vueNextAdmin@123.com';
-			state.ruleForm = row;
-			state.isShowDialog = true;
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
-		// 初始化部门数据
-		const initTableData = () => {
-			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(),
-					},
-				],
-			});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>
diff --git a/src/views/system/department/index.vue b/src/views/system/department/index.vue
index 4f33400..28464ce 100644
--- a/src/views/system/department/index.vue
+++ b/src/views/system/department/index.vue
@@ -19,18 +19,11 @@
 			<el-table
 				:data="tableData.data"
 				style="width: 100%"
-				row-key="id"
-				default-expand-all
+				row-key="depId"
 				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
 			>
-				<el-table-column prop="name" 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="info" label="部门描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="depName" label="部门名称" show-overflow-tooltip> </el-table-column>
+				<el-table-column prop="depInfo" label="部门描述" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" show-overflow-tooltip width="140">
 					<template #default="scope">
 						<el-button size="small" text type="primary" @click="onOpenDeptDialog('新增','')">新增</el-button>
@@ -40,7 +33,7 @@
 				</el-table-column>
 			</el-table>
 		</el-card>
-		<deptDialog ref="deptDialog" />
+		<deptDialog ref="deptDialog" @getDepartmentList="initTableData"/>
 	</div>
 </template>
 
@@ -49,6 +42,7 @@
 import { ElMessageBox, ElMessage } from 'element-plus';
 import deptDialog from '/@/views/system/department/component/deptDialog.vue';
 import {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -56,7 +50,7 @@
 	status: boolean;
 	parentId: number;
 	info: string;
-	id: number;
+    depId: number;
 	children?: TableDataRow[];
 }
 interface TableDataState {
@@ -93,18 +87,31 @@
 			}
 		};
 		// 打开新增菜单弹窗
-		const onOpenDeptDialog = (type: string,value: any) => {
-			deptDialog.value.openDialog(type,value,state.tableData.data);
+		const onOpenDeptDialog = (type: string, value: any) => {
+			deptDialog.value.openDialog(type, value, state.tableData.data);
 		};
 		// 删除当前行
 		const onTabelRowDel = (row: TableDataRow) => {
-			ElMessageBox.confirm(`此操作将永久删除部门：${row.id}, 是否继续?`, '提示', {
+			ElMessageBox.confirm(`此操作将永久删除部门：${row.depId}, 是否继续?`, '提示', {
 				confirmButtonText: '删除',
 				cancelButtonText: '取消',
 				type: 'warning',
-			}).then(() => {
-					ElMessage.success('删除成功');
-			}).catch(() => {});
+			}).then(async () => {
+                let res = await departmentApi().deleteDepartment({depId:row.depId})
+                if(res.data.code ==='200'){
+                    ElMessage({
+                        type:'success',
+                        duration:2000,
+                        message:'删除成功'
+                    })
+                    await initTableData()
+                }else{
+                    ElMessage({
+                        type:'warning',
+                        message:res.data.msg
+                    })
+                }
+            }).catch(() => {});
 		};
 		// 页面加载时
 		onMounted(() => {
@@ -112,6 +119,7 @@
 		});
 		return {
 			deptDialog,
+			initTableData,
 			onOpenDeptDialog,
 			onTabelRowDel,
 			...toRefs(state),
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 500a948..f223f93 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/src/views/system/menu/component/menuDialog.vue
@@ -1,267 +1,267 @@
 <template>
-	<div class="system-add-menu-container">
-		<el-dialog :title="title" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" size="default" label-width="80px">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="上级菜单">
-							<el-cascader
-									:options="menuData"
-									:props="{ checkStrictly: true, value: 'id', label: 'title' }"
-									placeholder="请选择上级菜单"
-									clearable
-									class="w100"
-									v-model="ruleForm.menuSuperior"
-							>
-							</el-cascader>
-						</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="ruleForm.meta.title" placeholder="格式：message.router.xxx" 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="ruleForm.name" placeholder="路由中的 name 值" 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="ruleForm.path" placeholder="路由中的 path 值" 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="ruleForm.redirect" 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="菜单图标">
-							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
-						</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="ruleForm.component" 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="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
-								<el-option label="admin" value="admin"></el-option>
-								<el-option label="common" value="common"></el-option>
-							</el-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-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
-								<el-option
-										v-for="item in projectList"
-										:key="item.key"
-										:value="item.id"
-										:label="item.name"
-								>
-								</el-option>
-							</el-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-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100"/>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="是否隐藏">
-							<el-radio-group v-model="ruleForm.meta.isHide">
-								<el-radio :label="true">隐藏</el-radio>
-								<el-radio :label="false">不隐藏</el-radio>
-							</el-radio-group>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
+    <div class="system-add-menu-container">
+        <el-dialog :title="title" v-model="isShowDialog" width="769px">
+            <el-form :model="ruleForm" size="default" label-width="80px">
+                <el-row :gutter="35">
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+                        <el-form-item label="上级菜单">
+                            <el-cascader
+                                :options="menuData"
+                                :props="{ checkStrictly: true, value: 'id', label: 'title' }"
+                                placeholder="请选择上级菜单"
+                                clearable
+                                class="w100"
+                                v-model="ruleForm.menuSuperior"
+                            >
+                            </el-cascader>
+                        </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="ruleForm.meta.title" placeholder="格式：message.router.xxx" 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="ruleForm.name" placeholder="路由中的 name 值" 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="ruleForm.path" placeholder="路由中的 path 值" 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="ruleForm.redirect" 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 placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
+                            <!--							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />-->
+                        </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="ruleForm.component" 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="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
+                                <el-option label="admin" value="admin"></el-option>
+                                <el-option label="common" value="common"></el-option>
+                            </el-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-select
+                                @change="handelMenu"
+                                v-model="ruleForm.projectId"
+                                controls-position="right"
+                                placeholder="请输入排序"
+                                class="w100"
+                            >
+                                <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
+                            </el-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-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+                        <el-form-item label="是否隐藏">
+                            <el-radio-group v-model="ruleForm.meta.isHide">
+                                <el-radio :label="true">隐藏</el-radio>
+                                <el-radio :label="false">不隐藏</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="onCancel" size="default">取 消</el-button>
+                    <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 
 <script lang="ts">
-	import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-	import { storeToRefs } from 'pinia';
-	import { useRoutesList } from '/@/stores/routesList';
-	import { i18n } from '/@/i18n/index';
-	import IconSelector from '/@/components/iconSelector/index.vue';
-	import { useMenuApi } from '/@/api/menu/index'
-	import { ElMessageBox, ElMessage } from 'element-plus';
-	import {Session} from "/@/utils/storage";
-	// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
+import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRoutesList } from '/@/stores/routesList';
+import { i18n } from '/@/i18n/index';
+import IconSelector from '/@/components/iconSelector/index.vue';
+import { useMenuApi } from '/@/api/menu/index';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { Session } from '/@/utils/storage';
+// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
 
-	export default defineComponent({
-		name: 'systemAddMenu',
-		components: { IconSelector },
-		setup(props,context) {
-			const stores = useRoutesList();
-			const { routesList } = storeToRefs(stores);
-			const state = reactive({
-				isShowDialog: false,
-				title:'',
-				buttonName:'',
-				// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
-				ruleForm: {
-					projectId:'',
-					parentId:0,
-					menuSuperior: [], // 上级菜单
-					menuType: 'menu', // 菜单类型
-					name: '', // 路由名称
-					component: '', // 组件路径
-					priority: 0, // 菜单排序
-					path: '', // 路由路径
-					redirect: '', // 路由重定向，有子集 children 时
-					meta: {
-						title: '', // 菜单名称
-						icon: '', // 菜单图标
-						isHide: false, // 是否隐藏
-						isKeepAlive: true, // 是否缓存
-						isAffix: false, // 是否固定
-						isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
-						isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
-						roles: '', // 权限标识，取角色管理
-					},
-					btnPower: '', // 菜单类型为按钮时，权限标识
-				},
-				menuData: [], // 上级菜单数据
-				projectList:[
-				],
-			});
-			// 获取 vuex 中的路由
-			const getMenuList = (routes: any) => {
-				const arr: any = [];
-				routes.map((val: any) => {
-					val['title'] = val.meta.title;
-					val['id'] = val.id
-					arr.push(val);
-					if (val.children) getMenuList(val.children);
-				});
-				return arr;
-			};
-			// 打开弹窗
-			const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
-				state.projectList = JSON.parse(JSON.stringify(projectList))
-				state.isShowDialog = true;
-				if(type === '新增'){
-					state.buttonName = '新增'
-					state.title = '新增菜单'
-					state.ruleForm = {
-						projectId:projectId,
-						parentId:0,
-						menuSuperior: [],
-						menuType: 'menu',
-						name: '',
-						component: '',
-						priority: 0,
-						path: '',
-						redirect: '',
-						meta: {
-							title: '',
-							icon: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isLink: '',
-							isIframe: false,
-							roles: '',
-						},
-						btnPower: '',
-					}
-				}else{
-					state.buttonName = '修改'
-					state.title = '修改菜单'
-					state.ruleForm = JSON.parse(JSON.stringify(value))
-					state.ruleForm.projectId = projectId.toString()
-				}
-				handelMenu()
-			};
-			// 关闭弹窗
-			const closeDialog = () => {
-				state.isShowDialog = false;
-			};
-			// 是否内嵌下拉改变
-			// const onSelectIframeChange = () => {
-			// 	if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
-			// 	else state.ruleForm.isLink = false;
-			// };
-			// 取消
-			const onCancel = () => {
-				closeDialog();
-			};
-			// 新增
-			const onSubmit = async () => {
-				if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
-					let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
-					state.ruleForm.parentId = menuId[menuId.length - 1]
-				}
-				if(state.title === '新增菜单'){
-					let res = await useMenuApi().addMenu(state.ruleForm)
-					if(res.data.code === '200'){
-						ElMessage({
-							type:'success',
-							message:'菜单新增成功',
-							duration:2000
-						})
-						closeDialog();
-						context.emit('getMenuList')
-					}else{
-						ElMessage({
-							type:'warning',
-							message:res.data.msg
-						})
-					}
-				}else{
-					let res = await useMenuApi().modMenu(state.ruleForm)
-					if(res.data.code === '200'){
-						ElMessage({
-							type:'success',
-							message:'菜单修改成功',
-							duration:2000
-						})
-						closeDialog();
-						context.emit('getMenuList')
-					}else{
-						ElMessage({
-							type:'warning',
-							message:res.data.msg
-						})
-					}
-				}
+export default defineComponent({
+    name: 'systemAddMenu',
+    components: { IconSelector },
+    setup(props, context) {
+        const stores = useRoutesList();
+        const { routesList } = storeToRefs(stores);
+        const state = reactive({
+            isShowDialog: false,
+            title: '',
+            buttonName: '',
+            // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
+            ruleForm: {
+                projectId: '',
+                parentId: 0,
+                menuSuperior: [], // 上级菜单
+                menuType: 'menu', // 菜单类型
+                name: '', // 路由名称
+                component: '', // 组件路径
+                priority: 0, // 菜单排序
+                path: '', // 路由路径
+                redirect: '', // 路由重定向，有子集 children 时
+                meta: {
+                    title: '', // 菜单名称
+                    icon: '', // 菜单图标
+                    isHide: false, // 是否隐藏
+                    isKeepAlive: true, // 是否缓存
+                    isAffix: false, // 是否固定
+                    isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
+                    isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
+                    roles: [] // 权限标识，取角色管理
+                },
+                btnPower: '' // 菜单类型为按钮时，权限标识
+            },
+            menuData: [], // 上级菜单数据
+            projectList: []
+        });
+        // 获取 vuex 中的路由
+        const getMenuList = (routes: any) => {
+            const arr: any = [];
+            routes.map((val: any) => {
+                val['title'] = val.meta.title;
+                val['id'] = val.id;
+                arr.push(val);
+                if (val.children) getMenuList(val.children);
+            });
+            return arr;
+        };
+        // 打开弹窗
+        const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
+            state.projectList = JSON.parse(JSON.stringify(projectList));
+            state.isShowDialog = true;
+            if (type === '新增') {
+                state.buttonName = '新增';
+                state.title = '新增菜单';
+                state.ruleForm = {
+                    projectId: projectId,
+                    parentId: 0,
+                    menuSuperior: [],
+                    menuType: 'menu',
+                    name: '',
+                    component: '',
+                    priority: 0,
+                    path: '',
+                    redirect: '',
+                    meta: {
+                        title: '',
+                        icon: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isLink: '',
+                        isIframe: false,
+                        roles: []
+                    },
+                    btnPower: ''
+                };
+            } else {
+                state.buttonName = '修改';
+                state.title = '修改菜单';
+                state.ruleForm = JSON.parse(JSON.stringify(value));
+                state.ruleForm.projectId = projectId.toString();
+            }
+            handelMenu();
+        };
+        // 关闭弹窗
+        const closeDialog = () => {
+            state.isShowDialog = false;
+        };
+        // 是否内嵌下拉改变
+        // const onSelectIframeChange = () => {
+        // 	if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
+        // 	else state.ruleForm.isLink = false;
+        // };
+        // 取消
+        const onCancel = () => {
+            closeDialog();
+        };
+        // 新增
+        const onSubmit = async () => {
+            if (state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []) {
+                let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior));
+                state.ruleForm.parentId = menuId[menuId.length - 1];
+            }
+            if (state.title === '新增菜单') {
+                let res = await useMenuApi().addMenu(state.ruleForm);
+                if (res.data.code === '200') {
+                    ElMessage({
+                        type: 'success',
+                        message: '菜单新增成功',
+                        duration: 2000
+                    });
+                    closeDialog();
+                    context.emit('getMenuList');
+                } else {
+                    ElMessage({
+                        type: 'warning',
+                        message: res.data.msg
+                    });
+                }
+            } else {
+                let res = await useMenuApi().modMenu(state.ruleForm);
+                if (res.data.code === '200') {
+                    ElMessage({
+                        type: 'success',
+                        message: '菜单修改成功',
+                        duration: 2000
+                    });
+                    closeDialog();
+                    context.emit('getMenuList');
+                } else {
+                    ElMessage({
+                        type: 'warning',
+                        message: res.data.msg
+                    });
+                }
+            }
 
-				// closeDialog(); // 关闭弹窗
-				// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
-			};
+            // closeDialog(); // 关闭弹窗
+            // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
+        };
 
-			const handelMenu = async () => {
-				let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId)
-				state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
-			}
-			// 页面加载时
-			onMounted(async () => {
-				// let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
-				// state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
-			});
-			return {
-				openDialog,
-				closeDialog,
-				onCancel,
-				onSubmit,
-				handelMenu,
-				...toRefs(state),
-			};
-		},
-	});
+        const handelMenu = async () => {
+            let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId);
+            state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)));
+        };
+        // 页面加载时
+        onMounted(async () => {
+            // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
+            // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
+        });
+        return {
+            openDialog,
+            closeDialog,
+            onCancel,
+            onSubmit,
+            handelMenu,
+            ...toRefs(state)
+        };
+    }
+});
 </script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 1fc2094..0d0881c 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -146,6 +146,20 @@
 					})
 				}
 			};
+
+			const getProjectList = async () => {
+				let res = await useMenuApi().getProjectList()
+				if(res.data.code === '200'){
+					state.menuTableData = res.data.data
+					if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
+				}else{
+					ElMessage({
+						type:'warning',
+						message:res.data.msg
+					})
+				}
+			};
+
 			onMounted( () => {
 				getMenuList()
 			});
diff --git a/src/views/system/role/component/addRole.vue b/src/views/system/role/component/addRole.vue
deleted file mode 100644
index adb0e83..0000000
--- a/src/views/system/role/component/addRole.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-	<div class="system-add-role-container">
-		<el-dialog title="新增角色" v-model="isShowDialog" width="769px">
-			<el-form :model="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="ruleForm.roleName" 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="角色标识">
-							<template #label>
-								<el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
-									<span>角色标识</span>
-								</el-tooltip>
-							</template>
-							<el-input v-model="ruleForm.roleSign" 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-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
-						</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="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="ruleForm.describe" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="菜单权限">
-							<el-tree :data="menuData" :props="menuProps" show-checkbox class="menu-data-tree" />
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface MenuDataTree {
-	id: number;
-	label: string;
-	children?: MenuDataTree[];
-}
-interface RoleState {
-	isShowDialog: boolean;
-	ruleForm: {
-		roleName: string;
-		roleSign: string;
-		sort: number;
-		status: boolean;
-		describe: string;
-	};
-	menuData: Array<MenuDataTree>;
-	menuProps: {
-		children: string;
-		label: string;
-	};
-}
-
-export default defineComponent({
-	name: 'systemAddRole',
-	setup() {
-		const state = reactive<RoleState>({
-			isShowDialog: false,
-			ruleForm: {
-				roleName: '', // 角色名称
-				roleSign: '', // 角色标识
-				sort: 0, // 排序
-				status: true, // 角色状态
-				describe: '', // 角色描述
-			},
-			menuData: [],
-			menuProps: {
-				children: 'children',
-				label: 'label',
-			},
-		});
-		// 打开弹窗
-		const openDialog = () => {
-			state.isShowDialog = true;
-			getMenuData();
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
-		// 获取菜单结构数据
-		const getMenuData = () => {
-			state.menuData = [
-				{
-					id: 1,
-					label: '系统管理',
-					children: [
-						{
-							id: 11,
-							label: '菜单管理',
-							children: [
-								{
-									id: 111,
-									label: '菜单新增',
-								},
-								{
-									id: 112,
-									label: '菜单修改',
-								},
-								{
-									id: 113,
-									label: '菜单删除',
-								},
-								{
-									id: 114,
-									label: '菜单查询',
-								},
-							],
-						},
-						{
-							id: 12,
-							label: '角色管理',
-							children: [
-								{
-									id: 121,
-									label: '角色新增',
-								},
-								{
-									id: 122,
-									label: '角色修改',
-								},
-								{
-									id: 123,
-									label: '角色删除',
-								},
-								{
-									id: 124,
-									label: '角色查询',
-								},
-							],
-						},
-						{
-							id: 13,
-							label: '用户管理',
-							children: [
-								{
-									id: 131,
-									label: '用户新增',
-								},
-								{
-									id: 132,
-									label: '用户修改',
-								},
-								{
-									id: 133,
-									label: '用户删除',
-								},
-								{
-									id: 134,
-									label: '用户查询',
-								},
-							],
-						},
-					],
-				},
-				{
-					id: 2,
-					label: '权限管理',
-					children: [
-						{
-							id: 21,
-							label: '前端控制',
-							children: [
-								{
-									id: 211,
-									label: '页面权限',
-								},
-								{
-									id: 212,
-									label: '页面权限',
-								},
-							],
-						},
-						{
-							id: 22,
-							label: '后端控制',
-							children: [
-								{
-									id: 221,
-									label: '页面权限',
-								},
-							],
-						},
-					],
-				},
-			];
-		};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.system-add-role-container {
-	.menu-data-tree {
-		width: 100%;
-		border: 1px solid var(--el-border-color);
-		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
-		padding: 5px;
-	}
-}
-</style>
diff --git a/src/views/system/role/component/editRole.vue b/src/views/system/role/component/editRole.vue
deleted file mode 100644
index fc6fe29..0000000
--- a/src/views/system/role/component/editRole.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
-	<div class="system-edit-role-container">
-		<el-dialog title="修改角色" v-model="isShowDialog" width="769px">
-			<el-form :model="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="ruleForm.roleName" 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="角色标识">
-							<template #label>
-								<el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
-									<span>角色标识</span>
-								</el-tooltip>
-							</template>
-							<el-input v-model="ruleForm.roleSign" 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-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
-						</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="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="ruleForm.describe" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="菜单权限">
-							<el-tree :data="menuData" :props="menuProps" :default-checked-keys="[112, 113]" node-key="id" show-checkbox class="menu-data-tree" />
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface MenuDataTree {
-	id: number;
-	label: string;
-	children?: MenuDataTree[];
-}
-interface DialogRow {
-	roleName: string;
-	roleSign: string;
-	sort: number;
-	status: boolean;
-	describe: string;
-}
-interface RoleState {
-	isShowDialog: boolean;
-	ruleForm: DialogRow;
-	menuData: Array<MenuDataTree>;
-	menuProps: {
-		children: string;
-		label: string;
-	};
-}
-
-export default defineComponent({
-	name: 'systemEditRole',
-	setup() {
-		const state = reactive<RoleState>({
-			isShowDialog: false,
-			ruleForm: {
-				roleName: '', // 角色名称
-				roleSign: '', // 角色标识
-				sort: 0, // 排序
-				status: true, // 角色状态
-				describe: '', // 角色描述
-			},
-			menuData: [],
-			menuProps: {
-				children: 'children',
-				label: 'label',
-			},
-		});
-		// 打开弹窗
-		const openDialog = (row: DialogRow) => {
-			state.ruleForm = row;
-			state.isShowDialog = true;
-			getMenuData();
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
-		// 获取菜单结构数据
-		const getMenuData = () => {
-			state.menuData = [
-				{
-					id: 1,
-					label: '系统管理',
-					children: [
-						{
-							id: 11,
-							label: '菜单管理',
-							children: [
-								{
-									id: 111,
-									label: '菜单新增',
-								},
-								{
-									id: 112,
-									label: '菜单修改',
-								},
-								{
-									id: 113,
-									label: '菜单删除',
-								},
-								{
-									id: 114,
-									label: '菜单查询',
-								},
-							],
-						},
-						{
-							id: 12,
-							label: '角色管理',
-							children: [
-								{
-									id: 121,
-									label: '角色新增',
-								},
-								{
-									id: 122,
-									label: '角色修改',
-								},
-								{
-									id: 123,
-									label: '角色删除',
-								},
-								{
-									id: 124,
-									label: '角色查询',
-								},
-							],
-						},
-						{
-							id: 13,
-							label: '用户管理',
-							children: [
-								{
-									id: 131,
-									label: '用户新增',
-								},
-								{
-									id: 132,
-									label: '用户修改',
-								},
-								{
-									id: 133,
-									label: '用户删除',
-								},
-								{
-									id: 134,
-									label: '用户查询',
-								},
-							],
-						},
-					],
-				},
-				{
-					id: 2,
-					label: '权限管理',
-					children: [
-						{
-							id: 21,
-							label: '前端控制',
-							children: [
-								{
-									id: 211,
-									label: '页面权限',
-								},
-								{
-									id: 212,
-									label: '页面权限',
-								},
-							],
-						},
-						{
-							id: 22,
-							label: '后端控制',
-							children: [
-								{
-									id: 221,
-									label: '页面权限',
-								},
-							],
-						},
-					],
-				},
-			];
-		};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.system-edit-role-container {
-	.menu-data-tree {
-		width: 100%;
-		border: 1px solid var(--el-border-color);
-		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
-		padding: 5px;
-	}
-}
-</style>
diff --git a/src/views/system/role/component/roleDialog.vue b/src/views/system/role/component/roleDialog.vue
new file mode 100644
index 0000000..d3b7c04
--- /dev/null
+++ b/src/views/system/role/component/roleDialog.vue
@@ -0,0 +1,150 @@
+<template>
+	<div class="system-add-role-container">
+		<el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
+			<el-form :model="roleForm" 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="roleForm.roleName" 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="roleForm.roleCode" placeholder="请输入角色标识" clearable></el-input>
+						</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="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="isShowRoleDialog = !isShowRoleDialog" size="default">取 消</el-button>
+					<el-button type="primary"  @click="onSubmit" size="default">{{ buttonName }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { ElMessage } from 'element-plus';
+import { reactive, toRefs, defineComponent } from 'vue';
+import {useRoleApi} from "/@/api/role";
+
+// 定义接口来定义对象的类型
+interface MenuDataTree {
+	id: number;
+	label: string;
+	children?: MenuDataTree[];
+}
+interface RoleState {
+	title:string,
+	buttonName:string,
+	isShowRoleDialog: boolean;
+	roleForm: {
+		roleName: string;
+        roleCode: string;
+        roleInfo: string;
+	};
+	menuData: Array<MenuDataTree>;
+	menuProps: {
+		children: string;
+		label: string;
+	};
+}
+
+export default defineComponent({
+	name: 'systemAddRole',
+	setup(prop,context) {
+		const state = reactive<RoleState>({
+			isShowRoleDialog: false,
+			title:'',
+			buttonName:'',
+			roleForm: {
+                roleName: '', // 角色名称
+                roleCode: '', // 角色标识
+                roleInfo: '', // 排序
+			},
+			menuData: [],
+			menuProps: {
+				children: 'children',
+				label: 'label',
+			},
+		});
+		// 打开弹窗
+		const openDialog = (type: string, value: any) => {
+			state.isShowRoleDialog = true;
+			if(type === '新增'){
+				state.title = '新增角色'
+				state.buttonName = '新增'
+				state.roleForm = {
+                    roleName:'',
+                    roleCode:'',
+                    roleInfo:'',
+				}
+			}else{
+				state.title = '修改角色'
+				state.buttonName = '修改'
+				state.roleForm = JSON.parse(JSON.stringify(value))
+			}
+		};
+		// 新增
+		const onSubmit = async () => {
+			if(state.title === '新增角色'){
+				let res = await useRoleApi().addRole(state.roleForm)
+				if(res.data.code === '200'){
+					ElMessage({
+						type:'success',
+						message:'角色新增成功',
+						duration:2000
+					})
+					state.isShowRoleDialog = false
+					context.emit('refreshRoleList')
+				}else{
+					ElMessage({
+						type:'warning',
+						message:res.data.msg
+					})
+				}
+			}else{
+				let res = await useRoleApi().modRole(state.roleForm)
+				if(res.data.code === '200'){
+					ElMessage({
+						type:'success',
+						message:'角色修改成功',
+						duration:2000
+					})
+					state.isShowRoleDialog = false
+					context.emit('refreshRoleList')
+				}else{
+					ElMessage({
+						type:'warning',
+						message:res.data.msg
+					})
+				}
+			}
+		};
+		// 获取菜单结构数据
+		return {
+			onSubmit,
+			openDialog,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.system-add-role-container {
+	.menu-data-tree {
+		width: 100%;
+		border: 1px solid var(--el-border-color);
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 5px;
+	}
+}
+</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 93ec4b2..93922e3 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -9,7 +9,7 @@
 					</el-icon>
 					查询
 				</el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+				<el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
@@ -18,55 +18,35 @@
 			</div>
 			<el-table :data="tableData.data" style="width: 100%">
 				<el-table-column type="index" label="序号" width="60" />
-				<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="code" label="角色标识" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="sort" 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="info" label="角色描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="roleInfo" 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">
+				<el-table-column label="操作" width="150">
 					<template #default="scope">
-						<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole(scope.row)"
-							>修改</el-button
-						>
-						<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+						<el-button size="small" text type="primary" @click="onOpenDialogRef('新增','')">新增</el-button>
+						<el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
+						<el-button 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="tableData.param.pageNum"
-				background
-				v-model:page-size="tableData.param.pageSize"
-				layout="total, sizes, prev, pager, next, jumper"
-				:total="tableData.total"
-			>
-			</el-pagination>
 		</el-card>
-		<AddRole ref="addRoleRef" />
-		<EditRole ref="editRoleRef" />
+		<roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
 	</div>
 </template>
 
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import AddRole from '/@/views/system/role/component/addRole.vue';
-import EditRole from '/@/views/system/role/component/editRole.vue';
+import roleDialog from '/@/views/system/role/component/roleDialog.vue';
 import {useRoleApi} from "/@/api/role";
+import {useMenuApi} from "/@/api/menu";
+import {Session} from "/@/utils/storage";
+import {initBackEndControlRoutes} from "/@/router/backEnd";
 
 // 定义接口来定义对象的类型
 interface TableData {
-	roleName: string;
+    roleName: string;
 	roleSign: string;
 	describe: string;
 	sort: number;
@@ -87,10 +67,9 @@
 
 export default defineComponent({
 	name: 'systemRole',
-	components: { AddRole, EditRole },
+	components: { roleDialog },
 	setup() {
-		const addRoleRef = ref();
-		const editRoleRef = ref();
+		const roleDialogRef = ref();
 		const state = reactive<TableDataState>({
 			tableData: {
 				data: [],
@@ -103,7 +82,7 @@
 			},
 		});
 		// 初始化表格数据
-		const initTableData = async () => {
+		const initRoleTableData = async () => {
 			let res = await useRoleApi().getRoleList()
 			if(res.data.code === '200'){
 				state.tableData.data = res.data.data;
@@ -113,15 +92,10 @@
 					message:res.data.msg
 				})
 			}
-
 		};
 		// 打开新增角色弹窗
-		const onOpenAddRole = () => {
-			addRoleRef.value.openDialog();
-		};
-		// 打开修改角色弹窗
-		const onOpenEditRole = (row: Object) => {
-			editRoleRef.value.openDialog(row);
+		const onOpenDialogRef = (type: string, value: any) => {
+			roleDialogRef.value.openDialog(type, value);
 		};
 		// 删除角色
 		const onRowDel = (row: any) => {
@@ -129,14 +103,25 @@
 				confirmButtonText: '确认',
 				cancelButtonText: '取消',
 				type: 'warning',
-			})
-				.then(() => {
-					ElMessage.success('删除成功');
-				})
-				.catch(() => {});
+			}).then(async () => {
+                let res = await useRoleApi().deleteRole({roleId:row.roleId})
+                if(res.data.code ==='200'){
+                    ElMessage({
+                        type:'success',
+                        duration:2000,
+                        message:'删除成功'
+                    })
+                    await initRoleTableData()
+                }else{
+                    ElMessage({
+                        type:'warning',
+                        message:res.data.msg
+                    })
+                }
+            }).catch(() => {});
 		};
 		const handleSearch = () => {
-			initTableData()
+			initRoleTableData()
 		}
 		// 分页改变
 		const onHandleSizeChange = (val: number) => {
@@ -148,17 +133,17 @@
 		};
 		// 页面加载时
 		onMounted(() => {
-			initTableData();
+			initRoleTableData();
 		});
 		return {
-			addRoleRef,
-			editRoleRef,
-			onOpenAddRole,
-			onOpenEditRole,
 			onRowDel,
+			roleDialog,
+			handleSearch,
+			roleDialogRef,
+			onOpenDialogRef,
+			initRoleTableData,
 			onHandleSizeChange,
 			onHandleCurrentChange,
-			handleSearch,
 			...toRefs(state),
 		};
 	},
diff --git a/src/views/system/user/component/addTeamLeader.vue b/src/views/system/user/component/addTeamLeader.vue
deleted file mode 100644
index 3c2d7ea..0000000
--- a/src/views/system/user/component/addTeamLeader.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-  <div class="system-edit-user-container">
-    <el-dialog title="修改用户" v-model="isShowDialog" width="769px">
-      <el-form :model="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="ruleForm.userName" 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="ruleForm.userNickname" 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="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
-                <el-option label="超级管理员" value="admin"></el-option>
-                <el-option label="普通用户" value="common"></el-option>
-              </el-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-cascader
-                  :options="deptData"
-                  :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
-                  placeholder="请选择部门"
-                  clearable
-                  class="w100"
-                  v-model="ruleForm.department"
-              >
-                <template #default="{ node, data }">
-                  <span>{{ data.deptName }}</span>
-                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-                </template>
-              </el-cascader>
-            </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="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-form-item label="邮箱">
-              <el-input v-model="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="ruleForm.sex" placeholder="请选择" clearable class="w100">
-                <el-option label="男" value="男"></el-option>
-                <el-option label="女" value="女"></el-option>
-              </el-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="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="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="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="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
-				</span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
-  deptName: string;
-  createTime: string;
-  status: boolean;
-  sort: number | string;
-  describe: string;
-  id: number;
-  children?: DeptData[];
-}
-interface RuleFormRow {
-  userName: string;
-  userNickname: string;
-  roleSign: string;
-  department: any;
-  phone: string;
-  email: string;
-  sex: string;
-  password: string;
-  overdueTime: string;
-  status: boolean;
-  describe: string;
-}
-interface UserState {
-  isShowDialog: boolean;
-  ruleForm: RuleFormRow;
-  deptData: Array<DeptData>;
-}
-
-export default defineComponent({
-  name: 'systemEditUser',
-  setup() {
-    const state = reactive<UserState>({
-      isShowDialog: false,
-      ruleForm: {
-        userName: '', // 账户名称
-        userNickname: '', // 用户昵称
-        roleSign: '', // 关联角色
-        department: [], // 部门
-        phone: '', // 手机号
-        email: '', // 邮箱
-        sex: '', // 性别
-        password: '', // 账户密码
-        overdueTime: '', // 账户过期
-        status: true, // 用户状态
-        describe: '', // 用户描述
-      },
-      deptData: [], // 部门数据
-    });
-    // 打开弹窗
-    const openDialog = (row: RuleFormRow) => {
-      state.ruleForm = row;
-      state.isShowDialog = true;
-    };
-    // 关闭弹窗
-    const closeDialog = () => {
-      state.isShowDialog = false;
-    };
-    // 取消
-    const onCancel = () => {
-      closeDialog();
-    };
-    // 新增
-    const onSubmit = () => {
-      closeDialog();
-    };
-    // 初始化部门数据
-    const initTableData = () => {
-      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(),
-          },
-        ],
-      });
-    };
-    // 页面加载时
-    onMounted(() => {
-      initTableData();
-    });
-    return {
-      openDialog,
-      closeDialog,
-      onCancel,
-      onSubmit,
-      ...toRefs(state),
-    };
-  },
-});
-</script>
diff --git a/src/views/system/user/component/addUser.vue b/src/views/system/user/component/addUser.vue
deleted file mode 100644
index 4a78153..0000000
--- a/src/views/system/user/component/addUser.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-	<div class="system-add-user-container">
-		<el-dialog title="新增用户" v-model="isShowDialog" width="769px">
-			<el-form :model="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="ruleForm.userName" 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="ruleForm.userNickname" 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="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
-								<el-option label="超级管理员" value="admin"></el-option>
-								<el-option label="普通用户" value="common"></el-option>
-							</el-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-cascader
-								:options="deptData"
-								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
-								placeholder="请选择部门"
-								clearable
-								class="w100"
-								v-model="ruleForm.department"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.deptName }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
-						</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="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-form-item label="邮箱">
-							<el-input v-model="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="ruleForm.sex" placeholder="请选择" clearable class="w100">
-								<el-option label="男" value="男"></el-option>
-								<el-option label="女" value="女"></el-option>
-							</el-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="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="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="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="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
-	deptName: string;
-	createTime: string;
-	status: boolean;
-	sort: number | string;
-	describe: string;
-	id: number;
-	children?: DeptData[];
-}
-interface UserState {
-	isShowDialog: boolean;
-	ruleForm: {
-		userName: string;
-		userNickname: string;
-		roleSign: string;
-		department: any;
-		phone: string;
-		email: string;
-		sex: string;
-		password: string;
-		overdueTime: string;
-		status: boolean;
-		describe: string;
-	};
-	deptData: Array<DeptData>;
-}
-
-export default defineComponent({
-	name: 'systemAddUser',
-	setup() {
-		const state = reactive<UserState>({
-			isShowDialog: false,
-			ruleForm: {
-				userName: '', // 账户名称
-				userNickname: '', // 用户昵称
-				roleSign: '', // 关联角色
-				department: [], // 部门
-				phone: '', // 手机号
-				email: '', // 邮箱
-				sex: '', // 性别
-				password: '', // 账户密码
-				overdueTime: '', // 账户过期
-				status: true, // 用户状态
-				describe: '', // 用户描述
-			},
-			deptData: [], // 部门数据
-		});
-		// 打开弹窗
-		const openDialog = () => {
-			state.isShowDialog = true;
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
-		// 初始化部门数据
-		const initTableData = () => {
-			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(),
-					},
-				],
-			});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>
diff --git a/src/views/system/user/component/editUser.vue b/src/views/system/user/component/editUser.vue
deleted file mode 100644
index b7a0793..0000000
--- a/src/views/system/user/component/editUser.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-	<div class="system-edit-user-container">
-		<el-dialog title="修改用户" v-model="isShowDialog" width="769px">
-			<el-form :model="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="ruleForm.userName" 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="ruleForm.userNickname" 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="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
-								<el-option label="超级管理员" value="admin"></el-option>
-								<el-option label="普通用户" value="common"></el-option>
-							</el-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-cascader
-								:options="deptData"
-								:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
-								placeholder="请选择部门"
-								clearable
-								class="w100"
-								v-model="ruleForm.department"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.deptName }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
-						</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="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-form-item label="邮箱">
-							<el-input v-model="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="ruleForm.sex" placeholder="请选择" clearable class="w100">
-								<el-option label="男" value="男"></el-option>
-								<el-option label="女" value="女"></el-option>
-							</el-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="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="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="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="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
-	deptName: string;
-	createTime: string;
-	status: boolean;
-	sort: number | string;
-	describe: string;
-	id: number;
-	children?: DeptData[];
-}
-interface RuleFormRow {
-	userName: string;
-	userNickname: string;
-	roleSign: string;
-	department: any;
-	phone: string;
-	email: string;
-	sex: string;
-	password: string;
-	overdueTime: string;
-	status: boolean;
-	describe: string;
-}
-interface UserState {
-	isShowDialog: boolean;
-	ruleForm: RuleFormRow;
-	deptData: Array<DeptData>;
-}
-
-export default defineComponent({
-	name: 'systemEditUser',
-	setup() {
-		const state = reactive<UserState>({
-			isShowDialog: false,
-			ruleForm: {
-				userName: '', // 账户名称
-				userNickname: '', // 用户昵称
-				roleSign: '', // 关联角色
-				department: [], // 部门
-				phone: '', // 手机号
-				email: '', // 邮箱
-				sex: '', // 性别
-				password: '', // 账户密码
-				overdueTime: '', // 账户过期
-				status: true, // 用户状态
-				describe: '', // 用户描述
-			},
-			deptData: [], // 部门数据
-		});
-		// 打开弹窗
-		const openDialog = (row: RuleFormRow) => {
-			state.ruleForm = row;
-			state.isShowDialog = true;
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
-		// 初始化部门数据
-		const initTableData = () => {
-			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(),
-					},
-				],
-			});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>
diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue
new file mode 100644
index 0000000..5500677
--- /dev/null
+++ b/src/views/system/user/component/userDialog.vue
@@ -0,0 +1,221 @@
+<template>
+	<div class="system-add-user-container">
+		<el-dialog :title="title" v-model="isShowUserDialog" width="769px">
+			<el-form :model="userForm" 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="userForm.username" 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="userForm.realName" 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="userForm.roleId" placeholder="请选择" clearable class="w100">
+								<el-option
+									v-for="item in roleData"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id"
+								>
+								</el-option>
+							</el-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-cascader
+								:options="departmentData"
+								:props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
+								placeholder="请选择部门"
+								clearable
+								class="w100"
+								v-model="userForm.depId"
+							>
+							</el-cascader>
+						</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="userForm.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-form-item label="邮箱">
+							<el-input v-model="userForm.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="userForm.sex" placeholder="请选择" clearable class="w100">
+								<el-option
+								v-for="item in sexList"
+								:key="item.id"
+								:value="item.id"
+								:label="item.name"
+								>
+								</el-option>
+							</el-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="userForm.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="userForm.expireTime" 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="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
+<!--						</el-form-item>-->
+<!--					</el-col>-->
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import {userApi} from "/@/api/user";
+
+// 定义接口来定义对象的类型
+interface DeptData {
+}
+interface roleData{
+
+}
+interface sexData{
+
+}
+interface UserState {
+	title:string,
+	isShowUserDialog: boolean;
+	userForm: {
+		username: string;
+		realName: string;
+		roleId: number | null;
+		depId: number | null;
+		phone: string;
+		email: string;
+		sex: number | null;
+		password: string;
+		expireTime: string;
+		status: number;
+	};
+	departmentData: Array<DeptData>;
+	roleData: Array<roleData>;
+	sexList:Array<sexData>,
+}
+
+export default defineComponent({
+	name: 'user',
+	setup(props,context) {
+		const state = reactive<UserState>({
+			title:'',
+			isShowUserDialog: false,
+			userForm: {
+				username: '', // 账户名称
+				realName: '', // 用户昵称
+				roleId: null, // 关联角色
+				depId:null, // 部门
+				phone: '', // 手机号
+				email: '', // 邮箱
+				sex: null, // 性别
+				password: '', // 账户密码
+				expireTime: '', // 账户过期
+				status: 1, // 用户状态
+			},
+			departmentData: [], // 部门数据
+			roleData:[],//角色数据
+			sexList:[{id:1,name:'男'},{id:0,name:'女'}]
+		});
+		// 打开弹窗
+		const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
+			state.isShowUserDialog = true;
+			state.departmentData = departmentList;
+			state.roleData = roleList;
+			if(type === '新增'){
+				state.title = '新增用户'
+				state.userForm = {
+					username: '',
+					realName: '',
+					roleId: null,
+					depId: null,
+					phone: '',
+					email: '',
+					sex: null,
+					password: '',
+					expireTime: '',
+					status: 1,
+				}
+			}else{
+				state.title = '修改用户'
+				state.userForm = JSON.parse(JSON.stringify(value))
+			}
+		};
+
+
+		// 新增修改
+		const onSubmit = async () => {
+			if(state.title === '新增用户'){
+				let res = await userApi().addUser(state.userForm)
+				if(res.data.code === '200'){
+					ElMessage({
+						type:'success',
+						message:'用户新增成功',
+						duration:2000
+					})
+					state.isShowUserDialog = false;
+					context.emit('getUserList')
+				}else{
+					ElMessage({
+						type:'warning',
+						message:res.data.msg
+					})
+				}
+			}else{
+				let res = await userApi().modUser(state.userForm)
+				if(res.data.code === '200'){
+					ElMessage({
+						type:'success',
+						message:'用户修改成功',
+						duration:2000
+					})
+					state.isShowUserDialog = false;
+					context.emit('getUserList')
+				}else{
+					ElMessage({
+						type:'warning',
+						message:res.data.msg
+					})
+				}
+			}
+		};
+
+		// 页面加载时
+		onMounted(() => {
+		});
+		return {
+			openDialog,
+			onSubmit,
+			...toRefs(state),
+		};
+	},
+});
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index a120c59..c4123dd 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -9,19 +9,20 @@
 					</el-icon>
 					查询
 				</el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
+				<el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
 					新增用户
 				</el-button>
 			</div>
-			<el-table :data="tableData.data" style="width: 100%">
+			<el-table :data="userTableData.data" 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="username" label="账户名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="department.name" 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>
@@ -30,11 +31,10 @@
 						<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 prop="gmtCreate" 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(scope.row)">修改</el-button>
+						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改',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>
@@ -45,24 +45,25 @@
 				class="mt15"
 				:pager-count="5"
 				:page-sizes="[10, 20, 30]"
-				v-model:current-page="tableData.param.pageNum"
+				v-model:current-page="userTableData.listQuery.pageIndex"
 				background
-				v-model:page-size="tableData.param.pageSize"
+				v-model:page-size="userTableData.listQuery.pageSize"
 				layout="total, sizes, prev, pager, next, jumper"
-				:total="tableData.total"
+				:total="userTableData.total"
 			>
 			</el-pagination>
 		</el-card>
-		<AddUer ref="addUserRef" />
-		<EditUser ref="editUserRef" />
+		<userDialog ref="userRef" @getUserList = "initUserTableData"/>
 	</div>
 </template>
 
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import AddUer from '/@/views/system/user/component/addUser.vue';
-import EditUser from '/@/views/system/user/component/editUser.vue';
+import userDialog from '/@/views/system/user/component/userDialog.vue';
+import {userApi} from "/@/api/user";
+import {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -79,96 +80,124 @@
 	describe: string;
 	createTime: string;
 }
+interface DepartmentDataRow{
+
+}
 interface TableDataState {
-	tableData: {
+	userTableData: {
 		data: Array<TableDataRow>;
 		total: number;
 		loading: boolean;
-		param: {
-			pageNum: number;
+		listQuery: {
+			searchParams:{
+				username:string,
+				realName:string,
+			},
+			pageIndex: number;
 			pageSize: number;
 		};
 	};
+	departmentList:[];
+	roleList:[];
 }
 
 export default defineComponent({
 	name: 'systemUser',
-	components: { AddUer, EditUser },
+	components: { userDialog },
 	setup() {
-		const addUserRef = ref();
-		const editUserRef = ref();
+		const userRef = ref();
 		const state = reactive<TableDataState>({
-			tableData: {
+			userTableData: {
 				data: [],
 				total: 0,
 				loading: false,
-				param: {
-					pageNum: 1,
+				listQuery: {
+					searchParams:{
+						username:'',
+						realName:'',
+					},
+					pageIndex: 1,
 					pageSize: 10,
 				},
 			},
+			departmentList:[],
+			roleList:[],
 		});
 		// 初始化表格数据
-		const initTableData = () => {
-			const data: Array<TableDataRow> = [];
-			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(),
-				});
+		const initUserTableData = async () => {
+			let res = await userApi().getUserList(state.userTableData.listQuery)
+			if(res.data.code === '200'){
+				state.userTableData.data = res.data.data;
+				state.userTableData.total = res.data.data.length;
+			}else{
+				ElMessage({
+					type:'warning',
+					message:res.data.msg
+				})
 			}
-			state.tableData.data = data;
-			state.tableData.total = state.tableData.data.length;
 		};
-		// 打开新增用户弹窗
-		const onOpenAddUser = () => {
-			addUserRef.value.openDialog();
+
+		const getDepartmentData = async () => {
+			let res = await departmentApi().getDepartmentList()
+			if(res.data.code === '200'){
+				state.departmentList = res.data.data
+			}else{
+				ElMessage({
+					type:'warning',
+					message:res.data.msg
+				})
+			}
+		}
+
+		const getRoleData = async () => {
+			let res = await useRoleApi().getRoleList()
+			if(res.data.code === '200'){
+				state.roleList = res.data.data
+			}else{
+				ElMessage({
+					type:'warning',
+					message:res.data.msg
+				})
+			}
+		}
+
+		// 打开新增修改用户弹窗
+		const onOpenUserDialog = (type: string,value: any) => {
+			userRef.value.openDialog(type, value, state.departmentList,state.roleList);
 		};
-		// 打开修改用户弹窗
-		const onOpenEditUser = (row: TableDataRow) => {
-			editUserRef.value.openDialog(row);
-		};
+
 		// 删除用户
 		const onRowDel = (row: TableDataRow) => {
 			ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
 				confirmButtonText: '确认',
 				cancelButtonText: '取消',
 				type: 'warning',
-			})
-				.then(() => {
+			}).then(() => {
 					ElMessage.success('删除成功');
-				})
-				.catch(() => {});
+			}).catch(() => {});
 		};
 		// 分页改变
 		const onHandleSizeChange = (val: number) => {
-			state.tableData.param.pageSize = val;
+			state.userTableData.listQuery.pageSize = val;
+			initUserTableData()
 		};
 		// 分页改变
 		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.pageNum = val;
+			state.userTableData.listQuery.pageSize = val;
+			initUserTableData()
 		};
 		// 页面加载时
 		onMounted(() => {
-			initTableData();
+			initUserTableData();
+			getDepartmentData();
+			getRoleData();
 		});
 		return {
-			addUserRef,
-			editUserRef,
-			onOpenAddUser,
-			onOpenEditUser,
+			userRef,
+			onOpenUserDialog,
 			onRowDel,
 			onHandleSizeChange,
+			initUserTableData,
 			onHandleCurrentChange,
 			...toRefs(state),
 		};

--
Gitblit v1.9.2