修改

src/assets/css/vue-tree.css

@@ -95,6 +95,7 @@
     table-layout: fixed;
     width: 100%;
     height: 36px;
+    font-size: 18px;
     border: 1px solid #ddd;
     border-radius: 5px;
     background: #fff;

src/components/approvalDetailDialog.vue

@@ -15,7 +15,7 @@
 									<span>{{approvalDetail.approvalType}}</span>
 								</el-form-item>
 								<el-form-item label="姓名">
-									<div>{{approvalDetail.name}}</div>
+									<div>{{approvalDetail.userName}}</div>
 								</el-form-item>
 								<el-form-item label="请假开始时间">
 									<div>{{approvalDetail.leaveStartTime}}</div>

src/views/addressBook/AddressBook.vue

 <!-- 用户管理 -->
 <template>
 	<div class='consumerManage'>
-		<!-- <div class="searchAdd">
-			<el-button @click="addUser" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">导入通讯录</el-button>
-			<el-button @click="postExportAddress" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">导出通讯录</el-button>
-			<el-button @click="postDownloadAddress" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">下载模板</el-button>
-		</div> -->
+		<div class="searchAdd">
+			<span style="margin-right: 10px;">部门</span>
+			<Treeselect
+							style="display: inline-block;width: 30%;vertical-align: middle;"
+							name="demo"
+							:clearable="false"
+							:searchable="false"
+							:open-on-click="true"
+							:open-on-focus="true"
+							:alwaysOpen="false"
+							:options="departmentOptions"
+							:default-expand-level="1"
+							:max-height="400"
+							placeholder="请选择部门"
+							v-model="department"
+							@select="selectChangeTree"
+			/>
+			<!--<span style="margin-left: 50px;margin-right: 10px;">姓名</span>-->
+			<!--<el-input v-model="userName" style="width: 20%;" placeholder="请输入要查找的姓名"></el-input>-->
+			<!--<el-button type="primary" style="float: right;" @click="findUser">查询</el-button>-->
+		</div>
 		<div style="padding: 20px 0 24px;clear: both;">
 			<el-table
 				v-show="showLi === false"
 				:data="addressList"
 				style="width: 100%">
 				<el-table-column
-					prop="workerNum"
+					type="index"
+					:index="indexMethod"
 					align="center"
-					label="工号">
+					width="100"
+					label="序号">
 				</el-table-column>
 				<el-table-column
 					prop="name"
@@ -56,11 +74,12 @@
 <script>
 	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 	//例如：import 《组件名称》 from '《组件路径》';
-
+	import Treeselect from '@riophae/vue-treeselect';
+	import '../../assets/css/vue-tree.css';
 	export default {
 		name: "Consumer",
 		//import引入的组件需要注入到对象中才能使用
-		components: {},
+		components: {Treeselect},
 		data () {
 			//这里存放数据
 			return {
@@ -68,7 +87,11 @@
 				showLi: false,
 				currentPage: 1,
 				pageSize: 10,
-				total: 0
+				total: 0,
+				department: null,
+				departmentOptions: [],
+				userName: '',
+				loginData: '',
 			};
 		},
 		//监听属性 类似于data概念
@@ -77,8 +100,66 @@
 		watch: {},
 		//方法集合
 		methods: {
+			getDepartment() {
+				this.$axios.postDepartmentList().then((res) => {
+					// console.log(res)
+					if (res.request.status === 200) {
+						let jsonData = JSON.stringify(res.data);
+						jsonData = jsonData.replace(/departments/g, 'children');
+						jsonData = jsonData.replace(/name/g, 'label');
+						// console.log(JSON.parse(jsonData))
+						let parseData = JSON.parse(jsonData);
+						// this.departmentOptions = JSON.parse(jsonData);
+						this.doSearch(parseData)
+					}
+				})
+			},
+			setName(datas){ //遍历树  获取id数组
+				for(let i in datas){
+					if (datas[i].children.length === 0) {
+						delete datas[i].children;
+					}
+					if(datas[i].children){
+						this.setName(datas[i].children);
+					}
+				}
+				this.departmentOptions = datas;
+				return datas;
+				// this.department = datas[0].id;
+				// this.doSearch(datas[0].id);
+			},
+			async doSearch(val) {
+				let result = await this.setName(val);
+				// console.log(result)
+				this.department = result[0].id;
+				this.getPersonList(result[0].id)
+			},
+			getPersonList(val){
+				let obj = {
+					"deId": val,
+					"currentPage": this.currentPage,
+					"pageSize": this.pageSize
+				}
+				this.$axios.postAllAddress(obj).then((res) => {
+					this.addressList = res.data.rows;
+					this.total = res.data.totalCount;
+				})
+			},
+			selectChangeTree(val) {
+				console.log(val)
+				console.log(this.department)
+				this.department = val.id;
+				this.treeSearch(val.id);
+			},
+			treeSearch(val) { // 部门选择
+				console.log(val)
+				this.department = val;
+				this.currentPage = 1;
+				this.postAllAddress();
+			},
 			postAllAddress() { // 获取列表数据
 				let obj = {
+					"deId": this.department,
 					"currentPage": this.currentPage,
 					"pageSize": this.pageSize
 				}
@@ -105,6 +186,12 @@
 			addUser() {
 				// this.$router.push({name: 'createConsumer'})
 			},
+			indexMethod(index) {
+				return (this.currentPage - 1) * this.pageSize + index + 1;
+			},
+			findUser() {
+
+			}
 		},
 		//生命周期 - 创建完成（可以访问当前this实例）
 		created () {
@@ -112,7 +199,9 @@
 		},
 		//生命周期 - 挂载完成（可以访问DOM元素）
 		mounted () {
-			this.postAllAddress();
+			this.loginData = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
+			this.getDepartment();
+			// this.postAllAddress();
 		},
 		beforeCreate () {
 		}, //生命周期 - 创建之前