Brc 5-14

src/axios/services.js

@@ -426,7 +426,33 @@ const requests = {
 			method: 'post',
 			data: data
 		})
-	}
+	},
+  postAllAddress(data) { // 获取通讯录数据
+    return axios(ip + '/manage/user/findAddressBook', {
+      method: 'post',
+      data: data
+    })
+  },
+  postExportAddress(data) { // 导出通讯录数据
+    return axios(ip + '/pas/excel/export', {
+      method: 'post',
+      data: data,
+      responseType: 'blob'
+    })
+  },
+  postImportAddress(data) { // 导入通讯录数据
+    return axios(ip + '/pas/excel/import', {
+      method: 'post',
+      data: data,
+    })
+  },
+  postDownloadAddress(data) { // 下载通讯录模板
+    return axios(ip + '/pas/excel/download', {
+      method: 'post',
+      data: data,
+      responseType: 'blob'
+    })
+  },
 };
 
 export default requests;

src/components/mainBreadcrumb.vue

@@ -71,6 +71,15 @@
 						<el-menu-item index="overtimeApproval"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'overtimeApproval'}"></i>加班审批</el-menu-item>
 					</el-menu-item-group>
 				</el-submenu>
+				<el-submenu v-if="authority.username !== 'root' && authority.username !== 'HR'" index="4">
+					<template slot="title">
+						<img class="attImg" src="../assets/images/attMenuImg.png"/>
+						<span>通讯录</span>
+					</template>
+					<el-menu-item-group>
+						<el-menu-item index="addressBook"><i class="iBlockBg" :class="{'iBlockBgActive': menuActive === 'addressBook'}"></i>查看通讯录</el-menu-item>
+					</el-menu-item-group>
+				</el-submenu>
 				<div class="rootDivs">
 					<el-menu-item class="rootMenuItem" v-if="authority.username === 'root' || authority.username === 'HR'" index="consumerManage">
 						<img class="consumerImg" src="../assets/images/consumerIconManage.png"/>

src/router/index.js

@@ -97,6 +97,12 @@ const routes = [
 				meta: ['user'],
 				component: () => import(/* webpackChunkName: "attendance" */ '../views/attendance/AttendanceStatistics.vue')
 			},
+			{
+				path: '/addressBook',
+				name: 'addressBook',
+				meta: ['user'],
+				component: () => import(/* webpackChunkName: "attendance" */ '../views/addressBook/AddressBook.vue')
+			},
 			// {
 			// 	path: '/approval',
 			// 	name: 'approval',

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 style="padding: 20px 0 24px;clear: both;">
+			<el-table
+				v-show="showLi === false"
+				:data="addressList"
+				style="width: 100%">
+				<el-table-column
+					prop="workerNum"
+					align="center"
+					label="工号">
+				</el-table-column>
+				<el-table-column
+					prop="name"
+					align="center"
+					label="姓名">
+				</el-table-column>
+				<el-table-column
+					prop="duty"
+					align="center"
+					label="职务">
+				</el-table-column>
+				<el-table-column
+					prop="telphone"
+					align="center"
+					label="电话">
+				</el-table-column>
+				<el-table-column
+					prop="email"
+					align="center"
+					label="邮箱">
+				</el-table-column>
+			</el-table>
+		</div>
+		<div class="pageClass">
+			<el-pagination
+				hide-on-single-page
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				:current-page.sync="currentPage"
+				:page-size="pageSize"
+				layout="prev, pager, next, jumper"
+				:total="total">
+			</el-pagination>
+		</div>
+	</div>
+</template>
+
+<script>
+	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+	//例如：import 《组件名称》 from '《组件路径》';
+
+	export default {
+		name: "Consumer",
+		//import引入的组件需要注入到对象中才能使用
+		components: {},
+		data () {
+			//这里存放数据
+			return {
+				addressList: [],
+				showLi: false,
+				currentPage: 1,
+				pageSize: 10,
+				total: 0
+			};
+		},
+		//监听属性 类似于data概念
+		computed: {},
+		//监控data中的数据变化
+		watch: {},
+		//方法集合
+		methods: {
+			postAllAddress() {
+				let obj = {
+					"currentPage": this.currentPage,
+					"pageSize": this.pageSize
+				}
+				this.$axios.postAllAddress(obj).then((res) => {
+					console.log('postAllAddress-----', res)
+					this.addressList = res.data.rows;
+					this.total = res.data.totalCount;
+				})
+			},
+			handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+			},
+			handleCurrentChange(val) {
+				this.currentPage = val;
+				this.postAllAddress();
+				// console.log(`当前页: ${val}`);
+			},
+			consumerDetail(item) {
+				console.log(item)
+				console.log(this.$Base64.encode(JSON.stringify(item)));
+				localStorage.setItem('adminUser', this.$Base64.encode(JSON.stringify(item)));
+				this.$router.push({name: 'consumerDetails'});
+			},
+			addUser() {
+				// this.$router.push({name: 'createConsumer'})
+			},
+		},
+		//生命周期 - 创建完成（可以访问当前this实例）
+		created () {
+
+		},
+		//生命周期 - 挂载完成（可以访问DOM元素）
+		mounted () {
+			this.postAllAddress();
+		},
+		beforeCreate () {
+		}, //生命周期 - 创建之前
+		beforeMount () {
+		}, //生命周期 - 挂载之前
+		beforeUpdate () {
+		}, //生命周期 - 更新之前
+		updated () {
+		}, //生命周期 - 更新之后
+		beforeDestroy () {
+		}, //生命周期 - 销毁之前
+		destroyed () {
+		}, //生命周期 - 销毁完成
+		activated () {
+		}, //如果页面有keep-alive缓存功能，这个函数会触发
+	}
+</script>
+<style scoped>
+	.consumerManage{
+		position: relative;
+		padding: 24px;
+	}
+
+	.searchAdd{
+		clear: both;
+		height: 50px;
+		border-bottom: 2px solid #7c87e8;
+	}
+
+	.div-search{
+		position: relative;
+	}
+	.in-search{
+		width: 250px; /*no*/
+		height: 36px; /*no*/
+		background: #ffffff;
+		border-radius: 20px; /*no*/
+		font-size: 16px; /*no*/
+		padding-left: 14px; /*no*/
+		border: 1px solid #409EFF;
+	}
+
+	.search-icon{
+		position: absolute;
+		background-image: url("../../assets/images/search.png");
+		background-repeat: no-repeat;
+		width: 26px; /*no*/
+		height: 26px; /*no*/
+		cursor: pointer; /*no*/
+		right: 3px; /*no*/
+		top: 5px; /*no*/
+	}
+
+	.personLi{
+		width: 320px;
+		height: 130px;
+		float: left;
+		margin-right: 70px;
+		margin-left: 55px;
+		margin-bottom: 30px;
+		border: 1px solid rgba(102, 102, 102, 0.5);
+		cursor: pointer;
+		border-radius: 6px;
+	}
+
+	.personLi:hover{
+		box-shadow: 3px 5px 10px #666666;
+	}
+
+	.personLi img{
+		float: left;
+		width: 60px;
+		height: 60px;
+	}
+
+	.personDetail{
+		float: left;
+		margin-left: 20px;
+	}
+
+	.personDetail div{
+		height: 24px;
+	}
+
+	.pageClass {
+		text-align: center;
+		position: fixed;
+		bottom:25px;
+		left:0;
+		right:0;
+		width: 500px;
+		margin-left: 44%;
+	}
+</style>

src/views/root/ConsumerManage.vue

@@ -11,6 +11,9 @@
 			<!--<img title="列表模式" v-show="showLi === true" @click="showLi = false" src="../assets/images/listChange.png" width="40" style="cursor: pointer;float: right;"/>-->
 			<!--<img title="网格模式" v-show="showLi === false" @click="showLi = true" src="../assets/images/liChange.png" width="40" style="cursor: pointer;float: right;"/>-->
 			<el-button @click="addUser" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">新增</el-button>
+			<el-button @click="clickBtn" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">导入通讯录<input style="display: none;" ref="fileTrain" multiple type="file" class="upload-file" accept=".xls,.xlsx" @change="getFileType"></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="consumerTable" style="padding-top: 20px;clear: both;">
 			<!--<ul v-show="showLi === true">-->
@@ -112,6 +115,49 @@
 					this.personList = res.data;
 				})
 			},
+			postExportAddress() {
+				this.$axios.postExportAddress().then((res) => {
+					let url = window.URL.createObjectURL(new Blob([res.data])); // 表示一个指定Blob对象
+					let link = document.createElement('a');
+					link.style.display = 'none';
+					link.href = url;
+					link.setAttribute('download', 'addressBook.xls');
+					document.body.appendChild(link);
+					link.click();
+					document.body.removeChild(link);
+					window.URL.revokeObjectURL(url); // 下载完成进行释放
+				})
+				
+			},
+			postDownloadAddress() {
+				this.$axios.postDownloadAddress().then((res) => {
+					let url = window.URL.createObjectURL(new Blob([res.data])); // 表示一个指定Blob对象
+					let link = document.createElement('a');
+					link.style.display = 'none';
+					link.href = url;
+					link.setAttribute('download', 'model.xls');
+					document.body.appendChild(link);
+					link.click();
+					document.body.removeChild(link);
+					window.URL.revokeObjectURL(url); // 下载完成进行释放
+				})
+			},
+			postImportAddress(formData) {
+				this.$axios.postImportAddress(formData).then((res) => {
+					console.log('上传文件', res)
+				})
+			},
+			clickBtn(){
+				this.$refs.fileTrain.dispatchEvent(new MouseEvent('click'))
+			},
+			getFileType() {
+				// const inputFile = this.$refs.fileTrain.files;
+				console.log('file11231231231----------', this.$refs.fileTrain.files[0])
+				let formData = new FormData();
+				formData.append('file', this.$refs.fileTrain.files[0]);
+				console.log('asd12312312312312----', formData.get("file"))
+				this.postImportAddress(formData)
+			},
 			openSearch() {
 				console.log(this.searchHuman)
 			},