From 6182435ce53bc2a77d876aaf0045254e6c890e3d Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Mon, 20 Jun 2022 17:03:16 +0800
Subject: [PATCH] 0620

---
 src/api/model/system.js          |  77 +++--
 src/components/scTable/index.vue |   2 +-
 src/config/route.js              |  29 +-
 src/views/{em => am}/em1.vue     |   0
 src/views/em/index.vue           |   0
 src/views/ops/menu.vue           | 340 +++++++++++++++++++++
 src/views/sys/dept.vue           |  12 +-
 src/views/sys/role.vue           | 254 ++++++++++++++++
 src/views/sys/user.vue           | 507 +++++++++++++++++++++++++++++++
 9 files changed, 1169 insertions(+), 52 deletions(-)
 rename src/views/{em => am}/em1.vue (100%)
 delete mode 100644 src/views/em/index.vue

diff --git a/src/api/model/system.js b/src/api/model/system.js
index 0c5d16c1..bfb936cf 100644
--- a/src/api/model/system.js
+++ b/src/api/model/system.js
@@ -2,22 +2,6 @@ import config from "@/config"
 import http from "@/utils/request"
 
 export default {
-	menu: {
-		myMenus: {
-			url: `${config.API_URL}/system/menu/my/1.6.1`,
-			name: "获取我的菜单",
-			get: async function(){
-				return await http.get(this.url);
-			}
-		},
-		list: {
-			url: `${config.API_URL}/system/menu/list`,
-			name: "获取菜单",
-			get: async function(){
-				return await http.get(this.url);
-			}
-		}
-	},
 	dept: {
 		list: {
 			url: `${config.API_URL}/system/dept/`,
@@ -45,7 +29,7 @@ export default {
 		delete: {
 			name: "删除部门",
 			req: async function(id){
-				return await http.delete(`${config.API_URL}/hrm/employee/${id}/`);
+				return await http.delete(`${config.API_URL}/system/employee/${id}/`);
 			}
 		}
 	},
@@ -158,28 +142,71 @@ export default {
 	},
 	role: {
 		list: {
-			url: `${config.API_URL}/system/role/list2`,
+			url: `${config.API_URL}/system/role`,
 			name: "获取角色列表",
-			get: async function(params){
-				return await http.get(this.url, params);
+			req: async function(data){
+				return await http.get(this.url, data);
 			}
-		}
+		},
+		create: {
+			url: `${config.API_URL}/system/role/`,
+			name: "新增角色",
+			req: async function(data){
+				return await http.post(this.url,data);
+			}
+		},
+		update: {
+			name: "更新角色",
+			req: async function(id, data){
+				return await http.put(
+					`${config.API_URL}/system/role/${id}/`,
+					data
+				);
+			}
+		},
+		delete: {
+			name: "删除菜单权限",
+			req: async function(id){
+				return await http.delete(`${config.API_URL}/system/role/${id}/`);
+			}
+		},
 	},
-
 	user: {
 		list: {
 			url: `${config.API_URL}/system/user/list`,
 			name: "获取用户列表",
-			get: async function(params){
+			req: async function(params){
 				return await http.get(this.url, params);
 			}
-		}
+		},
+		create: {
+			url: `${config.API_URL}/system/user/`,
+			name: "新增用户",
+			req: async function(data){
+				return await http.post(this.url,data);
+			}
+		},
+		update: {
+			name: "更新用户",
+			req: async function(id, data){
+				return await http.put(
+					`${config.API_URL}/system/user/${id}/`,
+					data
+				);
+			}
+		},
+		delete: {
+			name: "删除用户",
+			req: async function(id){
+				return await http.delete(`${config.API_URL}/system/user/${id}/`);
+			}
+		},
 	},
 	log: {
 		list: {
 			url: `${config.API_URL}/system/log/list`,
 			name: "日志列表",
-			get: async function(params){
+			req: async function(params){
 				return await http.get(this.url, params);
 			}
 		}
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index aa98796d..5c50b401 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -314,7 +314,7 @@ export default {
         } else {
 			dataList = response.rows || [];
         }
-		  if(this.$route.path==='/sys/dept'||this.$route.path==='/sys/perm'){
+		  if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
 			  this.tableData = this.redata(dataList);
 			  debugger;
 			  console.log(this.tableData)
diff --git a/src/config/route.js b/src/config/route.js
index 9fd4354e..933c1112 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -165,26 +165,15 @@ const routes = [
         },
         "component": "am/area"
       },
-    ]
-  },
-  {
-    "name": "em",
-    "path": "/em",
-    "meta": {
-      "title": "设备",
-      "icon": "el-icon-goods",
-      "type": "menu"
-    },
-    "children": [
-      {
-        "name": "em1",
-        "path": "/em/em1",
-        "meta": {
-          "title": "门禁通道",
-          "icon": "el-icon-menu",
-        },
-        "component": "em/em1"
-      },
+		{
+			"name": "eqm",
+			"path": "/am/eqm",
+			"meta": {
+				"title": "门禁通道",
+				"icon": "el-icon-menu",
+			},
+			"component": "am/em1"
+		},
     ]
   },
   {
diff --git a/src/views/em/em1.vue b/src/views/am/em1.vue
similarity index 100%
rename from src/views/em/em1.vue
rename to src/views/am/em1.vue
diff --git a/src/views/em/index.vue b/src/views/em/index.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/ops/menu.vue b/src/views/ops/menu.vue
index e69de29b..6a0537b5 100644
--- a/src/views/ops/menu.vue
+++ b/src/views/ops/menu.vue
@@ -0,0 +1,340 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="addDept"></el-button>
+				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="部门名称" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" :params="params" row-key="id" @selection-change="selectionChange"
+					 hidePagination>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="#" type="index" width="50"></el-table-column>
+				<el-table-column label="菜单名称" prop="name" min-width="200"></el-table-column>
+				<el-table-column label="类型" prop="type" min-width="200">
+					<template #default="scope">
+						<span>{{types[scope.row.type]}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="代号" prop="codes" min-width="200"></el-table-column>
+				<el-table-column label="排序" prop="sort" min-width="200"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="center" width="200">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="editDept(scope.row, scope.$index)">编辑</el-button>
+						<el-divider direction="vertical"></el-divider>
+						<el-popconfirm title="确定删除吗？" @confirm="delDept(scope.row, scope.$index)">
+							<template #reference>
+								<el-button type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+	<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="600">
+		<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" label-position="right">
+			<el-form-item label="类型" prop="type">
+				<el-radio-group v-model="addForm.type">
+					<el-radio :label="10">目录</el-radio>
+					<el-radio :label="20">菜单</el-radio>
+					<el-radio :label="30">按钮</el-radio>
+				</el-radio-group>
+			</el-form-item>
+			<el-form-item label="名称" prop="name">
+				<el-input v-model="addForm.name" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="标识">
+				<el-input v-model="codes" clearable style="width: 90%;"></el-input>
+				<!--<el-button class="formAddButton" type="primary" icon="el-icon-plus" @click="addCodes"></el-button>
+				<div v-if="codesLimited" style="display: flex">
+					<el-input v-model="codes" clearable style="width: 50%;flex: 1"></el-input>
+					<div style="width: 50%;display: inline-block;position: relative;flex: 1">
+						<el-button class="formSaveButton" type="success" icon="el-icon-check" @click="saveCodes"></el-button>
+						<el-button class="formDelButton" type="danger" icon="el-icon-close" @click="delCodes"></el-button>
+					</div>
+
+				</div>-->
+			</el-form-item>
+			<el-form-item label="父级">
+				<el-cascader
+					v-model="addForm.parent"
+					:options="group"
+					:props="groupsProps"
+					:show-all-levels="false"
+					clearable
+					style="width: 100%"
+					@change="handleChange"
+				></el-cascader>
+				<!--<el-input v-model="addForm.parent" clearable></el-input>-->
+			</el-form-item>
+			<el-form-item label="排序">
+				<el-input-number v-model="addForm.sort" controls-position="right" :min="1"
+								 style="width: 100%;"></el-input-number>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="limitedVisible=false">取 消</el-button>
+			<el-button type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: 'dept',
+		data() {
+			return {
+				dialog: {
+					save: false,
+					permission: false
+				},
+				apiObj: this.$API.system.permission.list,
+				selection: [],
+				search: {
+					keyword: null
+				},
+				params: {
+					page: 0
+				},
+				isSaving: false,
+				codesLimited: false,
+				limitedVisible: false,
+				type: "add",
+				codes:'',
+				titleMap: {
+					add: '新增',
+					edit: '编辑',
+				},
+
+				//表单数据
+				addForm: {
+					id: "",
+					name: "",
+					codes:[],
+					type: 10,
+					sort: 1,
+					parent: null,
+				},
+				//验证规则
+				rules: {
+					name: [
+						{required: true, message: '请输入名称'}
+					],
+					type: [
+						{required: true, message: '请选择类型'}
+					],
+				},
+				types:{
+					10:'目录',
+					20:'菜单',
+					30:'按钮',
+				},
+				groupsProps: {
+					value: "id",
+					multiple: false,
+					checkStrictly: true,
+				},
+				group: [],
+				permList: [],
+				permCodes: [],
+			}
+		},
+
+		mounted() {
+			this.getGroup();
+			this.getPermCodes();
+		},
+		methods: {
+			getPermCodes(){
+				this.permCodes = this.$API.system.permission.codes.req();
+			},
+			handleChange(value) {
+				// this.menu.checked = check.checkedKeys;
+				debugger;
+				console.log(value);
+				console.log(this.addForm.parent);
+			},
+			//加载树数据
+			async getGroup() {
+				var res = await this.$API.system.permission.list.req({page: 0});
+				debugger;
+				let permList = res;
+				this.permList = res;
+				let posts = [];
+				permList.forEach(item => {
+					let obj = new Object();
+					obj.id = item.id;
+					obj.label = item.name;
+					obj.parent = item.parent;
+					posts.push(obj)
+				});
+				let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
+				let arr = [];
+				for (let item of posts) {
+					if (item.parent == null) {
+						arr.push(item);
+						continue
+					}
+					let parent = obj[item.parent];
+					parent.children = parent.children ? parent.children : [];
+					parent.children.push(item);
+				}
+				debugger;
+				this.group = arr;
+			},
+
+			//添加
+			addDept() {
+				this.type = 'add';
+				this.limitedVisible = true;
+			},
+			addCodes(){
+				this.codesLimited = true;
+			},
+			saveCodes(){
+				debugger;console.log(this.addForm.codes);
+				this.addForm.codes.push(this.codes);
+				this.codes = ''
+			},
+			delCodes(){
+				this.codesLimited = false;
+				this.codes = ''
+			},
+			//编辑
+			editDept(row) {
+				// debugger;
+				this.type = 'edit';
+				this.addForm.id = row.id;
+				this.addForm.name = row.name;
+				debugger;
+				console.log(row.codes);
+				this.codes = row.codes.join(',');
+				let parent = row.parent!==null?this.findParents(this.permList, row.parent):'';
+				this.addForm.parent = parent;
+				this.addForm.type = row.type ;
+				/*debugger;
+				console.log(row.type);
+				console.log(this.addForm.type);*/
+				this.addForm.sort = row.sort;
+				this.limitedVisible = true;
+			},
+			findParents(arr, parent) {
+				debugger;
+				let data = [];
+				arr.forEach(item => {
+					if (item.id === parent) {
+						data.unshift(item.id);
+						if (item.parent !== null) {
+							this.findParents(arr, item.parent)
+						} else {
+							return data
+						}
+					}
+				});
+				debugger;
+				return data
+			},
+			//删除
+			delDept(row) {
+				var id = row.id;
+				var res = this.$API.system.permDel.delete(id);
+				if (res.code == 200) {
+					this.$refs.table.refresh();
+					this.$message.success("删除成功")
+				} else {
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			submitHandle() {
+				let that = this;
+				debugger;
+				console.log(this.addForm.parent);
+				debugger;
+				if (this.addForm.parent !== null) {
+					this.addForm.parent = this.addForm.parent[this.addForm.parent.length - 1];
+				} else {
+					this.addForm.parent = ""
+				}
+				debugger;
+				console.log(this.codes);
+
+				if(this.codes.indexOf(','>-1)){
+					this.addForm.codes = this.codes.split(',');
+				}else{
+					this.addForm.codes.push(this.codes)
+				}
+				debugger;
+				console.log(this.addForm.codes);
+				this.$refs.addForm.validate((valid) => {
+					debugger;
+					if (valid) {
+						this.isSaveing = true;
+						var res;
+						if (this.type === 'add') {
+							res = this.$API.system.permission.create.req(that.addForm);
+						} else {
+							res = this.$API.system.permission.update.req(that.addForm.id, that.addForm);
+						}
+						this.isSaveing = false;
+						this.limitedVisible = false;
+						this.$refs.table.refresh();
+						console.log(res);
+						debugger;
+					}
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection) {
+				this.selection = selection;
+			},
+			//搜索
+			upsearch() {
+
+			},
+			//本地更新数据
+			handleSaveSuccess(data, mode) {
+				if (mode == 'add') {
+					this.$refs.table.refresh()
+				} else if (mode == 'edit') {
+					this.$refs.table.refresh()
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.formAddButton{
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		text-align: center;
+		line-height: 32px;
+		border-radius: 16px;
+		position: absolute;
+		right: 0;
+		top : 0
+	}
+	.formSaveButton,.formDelButton{
+		padding: 0;
+		width: 30px;
+		height: 30px;
+		text-align: center;
+		line-height: 30px;
+		border-radius: 15px;
+		position: absolute;
+		left: 20px;
+		top : 0
+	}
+	.formDelButton{
+		left:  60px;
+	}
+</style>
diff --git a/src/views/sys/dept.vue b/src/views/sys/dept.vue
index cc2c35cd..66c073b4 100644
--- a/src/views/sys/dept.vue
+++ b/src/views/sys/dept.vue
@@ -52,8 +52,8 @@
 			</el-form-item>
 			<el-form-item label="类型">
 				<el-select v-model="addForm.type" placeholder="Select" style="width: 100%;">
-					<el-option label="公司" value="10"></el-option>
-					<el-option label="部门" value="20"></el-option>
+					<el-option label="公司" value="company"></el-option>
+					<el-option label="部门" value="dept"></el-option>
 				</el-select>
 			</el-form-item>
 			<el-form-item label="排序">
@@ -96,7 +96,7 @@
 				addForm: {
 					id:"",
 					name: "",
-					type: "10",
+					type: "dept",
 					sort: 1,
 					parent: "",
 				},
@@ -193,7 +193,7 @@
 			//删除
 			delDept(row){
 				var id = row.id;
-				var res = this.$API.system.deptDel.delete(id);
+				var res = this.$API.system.dept.delete.req(id);
 				if(res.code == 200){
 					this.$refs.table.refresh();
 					this.$message.success("删除成功")
@@ -213,9 +213,9 @@
 						this.isSaveing = true;
 						var res;
 						if(this.type==='add'){
-							res = this.$API.system.deptAdd.post(that.addForm);
+							res = this.$API.system.dept.create.req(that.addForm);
 						}else{
-							res = this.$API.system.deptEdit.put(that.addForm.id,that.addForm);
+							res = this.$API.system.dept.update.req(that.addForm.id,that.addForm);
 						}
 						this.isSaveing = false;
 						this.limitedVisible = false;
diff --git a/src/views/sys/role.vue b/src/views/sys/role.vue
index e69de29b..07e97659 100644
--- a/src/views/sys/role.vue
+++ b/src/views/sys/role.vue
@@ -0,0 +1,254 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="roleAdd"></el-button>
+				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length!==1" @click="batch_del"></el-button>
+				<!--<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>-->
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="#" type="index" width="50"></el-table-column>
+				<el-table-column label="角色名称" prop="name" width="250"></el-table-column>
+				<el-table-column label="角色标识" prop="code" width="150"></el-table-column>
+				<el-table-column label="角色描述" prop="description" width="150"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="center" width="140">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="roleEdit(scope.row, scope.$index)">编辑</el-button>
+						<el-divider direction="vertical"></el-divider>
+						<el-popconfirm title="确定删除吗？" @confirm="roleDel(scope.row, scope.$index)">
+							<template #reference>
+								<el-button type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+	<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="600">
+		<el-form :model="addForm" :rules="rules" ref="addForm" autocomplete =‘off’ label-width="100px" label-position="left">
+			<el-form-item label="角色" prop="name" auto>
+				<el-input v-model="addForm.name" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="角色标识">
+				<el-input v-model="addForm.code" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="描述">
+				<el-input v-model="addForm.description" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="权限功能">
+				<div class="treeMain">
+					<el-tree
+						ref="menu"
+						node-key="id"
+						show-checkbox
+						:data="menu.list"
+						:props="menu.props"
+						:default-checked-keys="menu.checked"
+						@check="handleChange"
+					></el-tree>
+				</div>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="limitedVisible=false" >取 消</el-button>
+			<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+<script>
+	const defaultForm = {
+		id:"",
+		name: "",
+		code: "",
+		description: "",
+		perms:[],
+	};
+	export default {
+		name: 'dept',
+		data() {
+			return {
+				apiObj: this.$API.system.role.list,
+				selection: [],
+				checkList: [],
+				search: {
+					keyword: null
+				},
+				isSaving: false,
+				limitedVisible : false,
+				type: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑',
+					show: '查看'
+				},
+
+				//表单数据
+				addForm: defaultForm,
+				//验证规则
+				rules: {
+					name: [
+						{required: true, message: '请输入角色名称'}
+					],
+				},
+				menu: {
+					list: [],
+					checked: [],
+					props: {
+						children: 'children',
+						label: 'name',
+						/*label: (data)=>{
+							return data.meta.title
+						}*/
+					}
+				},
+			}
+		},
+		mounted() {
+			this.getList();
+			this.getGroup();
+		},
+		methods: {
+			handleChange(item, check) {
+				this.menu.checked = check.checkedKeys;
+				debugger;
+				console.log(check);
+				console.log(this.checkList);
+			},
+			//加载树数据
+			async getGroup() {
+				var res = await this.$API.system.dept.list.req({page: 0});
+				let postList = res;
+				let posts = [];
+				postList.forEach(item => {
+					let obj = new Object();
+					obj.id = item.id;
+					obj.name = item.name;
+					obj.parentId = item.parent;
+					obj.label=item.name;
+					posts.push(obj)
+				});
+				let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
+				let arr = [];
+				// debugger;
+				console.log(obj);
+				for (let item of posts) {
+					debugger;
+					if (item.parentId == null) {
+						arr.push(item);
+						continue
+					}
+					let parent = obj[item.parentId];
+					parent.children = parent.children ? parent.children : [];
+					parent.children.push(item);
+				}
+				this.menu.list = arr;
+			},
+			//获取角色列表
+			getList(){
+				var res = this.$API.system.role.list.req();
+				this.tableData = res.results;
+			},
+			//添加角色
+			roleAdd(){
+				this.limitedVisible = true;
+				this.addForm = defaultForm;
+			},
+			/*handleChange(value){
+				debugger;
+				console.log(value);
+				console.log(this.menu.list);
+			},*/
+			submitHandle(){
+				debugger;
+				let that = this;
+				debugger;
+				this.addForm.perms = this.menu.checked;
+				this.$refs.addForm.validate( (valid) => {
+					debugger;
+					if (valid) {
+						this.isSaveing = true;
+						var res;
+						if(this.type==='add'){
+							res = this.$API.system.role.create.req(that.addForm);
+						}else{
+							res = this.$API.system.role.update.req(that.addForm.id,that.addForm);
+						}
+						this.isSaveing = false;
+						this.limitedVisible = false;
+						this.$refs.table.refresh();
+						console.log(res);
+						debugger;
+					}
+				})
+			},
+
+			//编辑角色
+			roleEdit(row){
+				this.type='edit';
+				this.limitedVisible = true;
+				this.addForm.id=row.id;
+				this.addForm.name=row.name;
+				this.addForm.code=row.code;
+				this.addForm.description=row.description;
+			},
+
+			//删除角色
+			async roleDel(row){
+				var id = row.id;
+				var res = await this.$API.system.roleDel.delete(id);
+				if(res.err_msg){
+					this.$message.error(res.err_msg)
+				}else{
+					this.$refs.table.refresh();
+					this.$message.success("删除成功")
+					// this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//搜索
+			upsearch(){
+
+			},
+			//根据ID获取树结构
+			filterTree(id){
+				var target = null;
+				function filter(tree){
+					tree.forEach(item => {
+						if(item.id == id){
+							target = item
+						}
+						if(item.children){
+							filter(item.children)
+						}
+					})
+				}
+				filter(this.$refs.table.tableData)
+				return target
+			},
+			//本地更新数据
+			handleSaveSuccess(data, type){
+				if(type=='add'){
+					this.$refs.table.refresh()
+				}else if(type=='edit'){
+					this.$refs.table.refresh()
+				}
+			}
+		}
+	}
+</script>
+<style scoped>
+	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
+</style>
diff --git a/src/views/sys/user.vue b/src/views/sys/user.vue
index e69de29b..e7eedd54 100644
--- a/src/views/sys/user.vue
+++ b/src/views/sys/user.vue
@@ -0,0 +1,507 @@
+<template>
+	<el-container>
+		<el-aside width="200px" v-loading="showGrouploading">
+			<el-container>
+				<el-header style="border-bottom: none">
+					<el-input
+						placeholder="输入关键字进行过滤"
+						v-model="groupFilterText"
+						clearable
+					></el-input>
+				</el-header>
+				<el-main class="nopadding">
+					<el-tree
+						ref="group"
+						class="menu"
+						node-key="id"
+						:data="group"
+						:current-node-key="''"
+						:highlight-current="true"
+						:expand-on-click-node="false"
+						:filter-node-method="groupFilterNode"
+						@node-click="groupClick"
+					></el-tree>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-container>
+			<el-header>
+				<div class="left-panel">
+					<el-button
+						type="primary"
+						icon="el-icon-plus"
+						@click="add"
+					></el-button>
+					<el-button
+						type="danger"
+						plain
+						icon="el-icon-delete"
+						:disabled="selection.length == 0"
+						@click="batch_del"
+					></el-button>
+					<!--<el-button
+						type="primary"
+						plain
+						:disabled="selection.length == 0"
+					>分配角色
+					</el-button>-->
+					<el-button
+						type="primary"
+						plain
+						:disabled="selection.length == 0"
+					>密码重置
+					</el-button>
+				</div>
+				<div class="right-panel">
+					<div class="right-panel-search">
+						<el-input
+							v-model="search.name"
+							placeholder="登录账号 / 姓名"
+							clearable
+						></el-input>
+						<el-button
+							type="primary"
+							icon="el-icon-search"
+							@click="upsearch"
+						></el-button>
+					</div>
+				</div>
+			</el-header>
+			<el-main class="nopadding">
+				<!--:data="userList"
+				:params="tableParams"-->
+				<scTable
+					ref="table"
+					:apiObj="apiObj"
+					stripe
+					remoteSort
+					remoteFilter
+					@selection-change="selectionChange"
+				>
+					<el-table-column
+						type="selection"
+						width="50"
+					></el-table-column>
+					<el-table-column
+						label="ID"
+						prop="id"
+					></el-table-column>
+					<el-table-column
+						label="头像"
+						width="80"
+						column-key="filterAvatar"
+						:filters="[
+							{ text: '已上传', value: '1' },
+							{ text: '未上传', value: '0' },
+						]"
+					>
+						<template #default="scope">
+							<el-avatar
+								:src="getImgUrl(scope.row.avatar)"
+								size="small"
+							></el-avatar>
+						</template>
+					</el-table-column>
+					<el-table-column
+						label="登录账号"
+						prop="username"
+						min-width="150"
+						sortable="custom"
+					></el-table-column>
+					<!--<el-table-column
+						label="姓名"
+						prop="name"
+						min-width="150"
+					></el-table-column>-->
+					<!--<el-table-column
+						min-width="150"
+						label="部门">
+						<template #default="scope">{{ scope.row.dept_.name }}</template>
+					</el-table-column>-->
+					<!--<el-table-column
+						label="所属角色"
+						prop="groupName"
+						min-width="120"
+						sortable="custom"
+					>
+						<template #default="scope">
+							<span v-for="item in scope.row.roles_" :key="item.id">{{item.name}}</span>
+							<span v-if="scope.row.roles===[]">系统管理员</span>
+						</template>
+
+					</el-table-column>-->
+					<el-table-column
+						label="加入时间"
+						prop="create_time"
+						min-width="150"
+						sortable="custom"
+					></el-table-column>
+					<el-table-column
+						label="操作"
+						fixed="right"
+						align="center"
+						width="140"
+					>
+						<template #default="scope">
+							<el-button
+								type="text"
+								size="small"
+								@click="formEdit(scope.row,'1')"
+							>查看
+							</el-button>
+							<el-button
+								type="text"
+								size="small"
+								@click="formEdit(scope.row, '2')"
+							>编辑
+							</el-button>
+							<el-popconfirm
+								title="确定删除吗？"
+								@confirm="table_del(scope.row, scope.$index)"
+							>
+								<template #reference>
+									<el-button type="text" size="small">
+										删除
+									</el-button>
+								</template>
+							</el-popconfirm>
+						</template>
+					</el-table-column>
+				</scTable>
+			</el-main>
+		</el-container>
+	</el-container>
+	<el-dialog
+		:title="titleMap[type]"
+		v-model="limitedVisible"
+		:width="600"
+	>
+		<el-form
+			:model="addForm"
+			:rules="rules"
+			ref="addForm"
+			label-width="100px"
+			label-position="left"
+		>
+			<el-form-item label="登录账号" prop="username">
+				<el-input
+					v-model="addForm.username"
+					placeholder="用于登录系统"
+					clearable
+				></el-input>
+			</el-form-item>
+			<el-form-item label="姓名">
+				<el-input
+					v-model="addForm.name"
+					placeholder="请输入完整的真实姓名"
+					clearable
+				></el-input>
+			</el-form-item>
+			<el-form-item label="手机">
+				<el-input
+					v-model="addForm.phone"
+					placeholder="请输入完整的真实姓名"
+					clearable
+				></el-input>
+			</el-form-item>
+			<el-form-item label="邮箱">
+				<el-input
+					v-model="addForm.email"
+					placeholder="请输入完整的真实姓名"
+					clearable
+				></el-input>
+			</el-form-item>
+			<el-form-item label="所属部门">
+				<el-cascader
+					v-model="addForm.belong_dept"
+					:options="group"
+					:props="groupsProps"
+					:show-all-levels="false"
+					clearable
+					style="width: 100%"
+				></el-cascader>
+			</el-form-item>
+			<el-form-item label="是否在用">
+				<el-switch v-model="addForm.is_active" />
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="limitedVisible = false">取 消</el-button>
+			<el-button
+				v-if="type !== 'show'"
+				type="primary"
+				:loading="isSaveing"
+				@click="submit()"
+			>保 存
+			</el-button
+			>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	import baseUrl from "@/config";
+	export default {
+		name: "user",
+		data() {
+			return {
+				baseUrl : baseUrl.API_URL,
+				type: "add",
+				titleMap: {
+					add: "新增用户",
+					edit: "编辑用户",
+					show: "查看",
+				},
+				//表单数据
+				addForm: {
+					id: "",
+					username: "",
+					name: "",
+					email: "",
+					phone: "",
+					belong_dept: [],
+					is_active:true
+				},
+				//验证规则
+				rules: {
+					username: [{required: true, message: "请输入登录账号"}],
+					name: [{required: true, message: "请输入真实姓名"}],
+					password: [
+						{required: true, message: "请输入登录密码"},
+						{
+							validator: (rule, value, callback) => {
+								if (this.form.password2 !== "") {
+									this.$refs.addForm.validateField(
+										"password2"
+									);
+								}
+								callback();
+							},
+						},
+					],
+					password2: [
+						{required: true, message: "请再次输入密码"},
+						{
+							validator: (rule, value, callback) => {
+								if (value !== this.form.password) {
+									callback(new Error("两次输入密码不一致!"));
+								} else {
+									callback();
+								}
+							},
+						},
+					],
+					group: [{required: true, message: "请选择所属角色"}],
+				},
+				//所需数据选项
+				groups: [],
+				groupsProps: {
+					value: "id",
+					multiple: false,
+					checkStrictly: true,
+				},
+				isSaveing: false,
+				limitedVisible: false,
+				showGrouploading: false,
+				groupFilterText: "",
+				group: [],
+				userList: [],
+				selection: [],
+				search: {
+					name: null,
+				},
+				imageUrl: "",
+				filterParams: {},
+				tableParams: {},
+				apiObj: this.$API.system.user.list,
+				temp:[],
+				postList:[],
+			};
+		},
+		watch: {
+			groupFilterText(val) {
+				this.$refs.group.filter(val);
+			},
+		},
+		mounted() {
+			this.getList();
+			this.getGroup();
+		},
+		methods: {
+			getImgUrl (img) {
+				return 'http://49.232.14.174:2226'+ img;
+			},
+			//添加
+			add() {
+				this.type = "add";
+				this.limitedVisible = true;
+			},
+			//编辑
+			formEdit(row,index) {
+				debugger;
+				console.log(row);
+				this.limitedVisible = true;
+				if(index==='1'){
+					this.type = "show";
+				}else{
+					this.type = "edit";
+				}
+				this.addForm.id = row.id;
+				this.addForm.name = row.name;
+				this.addForm.username = row.username;
+				this.addForm.phone = row.phone;
+				this.addForm.email = row.email;
+				debugger;
+				console.log();
+				let belong_dept = this.findParents(this.postList,row.belong_dept);
+				this.addForm.belong_dept=belong_dept.reverse();
+				this.addForm.is_active = row.is_active;
+			},
+			findParents(arr,belong_dept){
+				let that = this;
+				arr.forEach(item=>{
+					if(item.id===belong_dept){
+						that.temp.push(item.id);
+						if(item.parent!==null){
+							this.findParents(arr,item.parent)
+						}else{
+							return that.temp
+						}
+					}
+				});
+				return that.temp
+			},
+			//查看
+			table_show(row) {
+				this.limitedVisible = true;
+				this.type = "show";
+				this.addForm.id = row.id;
+			},
+			//删除
+			async table_del(row, index) {
+				var reqData = {id: row.id};
+				var res = await this.$API.system.user.delete.req(reqData);
+				if (res.code == 200) {
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功");
+				} else {
+					this.$alert(res.message, "提示", {type: "error"});
+				}
+			},
+			//表格选择后回调事件
+			selectionChange(selection) {
+				this.selection = selection;
+			},
+			//加载树数据
+			async getGroup() {
+				this.showGrouploading = true;
+				var res = await this.$API.system.dept.list.req({page: 0});
+				this.showGrouploading = false;
+				// var allNode = { id: "", label: "所有" };
+				// res.data.unshift(allNode);
+				let postList = res;
+				this.postList = res;
+				let posts = [];
+				postList.forEach(item => {
+					let obj = new Object();
+					obj.id = item.id;
+					obj.label = item.name;
+					obj.parentId = item.parent;
+					posts.push(obj)
+				});
+				let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
+				let arr = [];
+				for (let item of posts) {
+					// debugger;
+					if (item.parentId == null) {
+						arr.push(item);
+						continue
+					}
+					let parent = obj[item.parentId];
+					parent.children = parent.children ? parent.children : [];
+					parent.children.push(item);
+				}
+				this.group = arr;
+			},
+			//树过滤
+			groupFilterNode(value, data) {
+				if (!value) return true;
+				return data.label.indexOf(value) !== -1;
+			},
+			//树点击事件
+			groupClick(data) {
+				// var params = {dept: data.id};
+				debugger;
+				console.log(data);
+				debugger;
+				this.tableParams = {dept: data.id};
+				this.$refs.table.reload(this.tableParams);
+			},
+			//搜索
+			upsearch() {
+				this.$refs.table.upData(this.search);
+			},
+			//本地更新数据
+			handleSuccess(data, mode) {
+				if (mode == "add") {
+					data.id = new Date().getTime();
+					this.$refs.table.tableData.unshift(data);
+				} else if (mode == "edit") {
+					this.$refs.table.tableData
+						.filter((item) => item.id === data.id)
+						.forEach((item) => {
+							Object.assign(item, data);
+						});
+				}
+			},
+			getList() {
+				let that = this;
+				this.$API.system.user.list.req({page:1,page_size:20}).then((res) => {
+					debugger;
+					console.log(res);
+					that.userList = res.results;
+				});
+			},
+			//表单提交方法
+			submit(){
+				debugger;
+				this.$refs.addForm.validate(async (valid) => {
+					if (valid) {
+						debugger;
+						this.isSaveing = true;
+						this.addForm.belong_dept = this.addForm.belong_dept[this.addForm.belong_dept.length - 1];
+						let res;
+						if(this.type==='add'){
+							res = await this.$API.system.user.create.req(this.addForm);
+						}else if(this.type==='edit'){
+							res = await this.$API.system.user.update.req(this.addForm.id,this.addForm);
+						}
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.visible = false;
+							this.$alert(res.message, "提示", {type: 'error'});
+						}
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.addForm.id = data.id;
+				this.addForm.username = data.username;
+				this.addForm.avatar = data.avatar;
+				this.addForm.name = data.name;
+				this.addForm.group = data.group;
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		},
+	};
+</script>
+
+<style></style>