xytSk-App/pages/addressBook/addressBook.vue

<template>
	<view :style="{backgroundColor:'#f7f7f7'}">
		<u-status-bar></u-status-bar>
		<div class="titleBar">通讯录</div>
		<div class="searchBar">
			<u-search 
				placeholder="请输入姓名或手机号" 
				shape="square"
				:showAction="false"
				v-model="keyword"
				@change="getSearch"
			></u-search>
			<div class="iconRow">
				<div class="iconBox" @click="toMyDept">
					<u--image :src="'../../static/images/dept.png'" width="22px" height="22px"></u--image>
					<text class="icon_text">我的部门</text>
				</div>
				<div class="iconBox" @click="toFollow">
					<u--image :src="'../../static/images/follow.png'" width="22px" height="22px"></u--image>
					<text class="icon_text">关注人员</text>
				</div>
			</div>
		</div>
		<div class="mybody">
			<div class="breadcrumb">
				<text 
					v-for="(item,index) in treePath" 
					class="breadcrumb_item" 
					:style="{color:(treePath.length-1)===index?'#000000':'#3595F9'}"
					@click="breadcrumbClick(item,index)"
				>
					{{item.name}}
					<text v-if="(treePath.length-1)!==index" :style="{marginLeft:'8px',color:'#000000'}">></text>
				</text>
			</div>
			<div :style="{height:'calc( 100vh - 280px)',overflow:'scroll'}">
				<div v-if="!keyword">
					<div v-for="(item,index) in treeData">
						<div class="deptItem" @click="itemClick(item,index)">
							<u--image :src="'../../static/images/deptItem.png'" width="22px" height="22px"></u--image>
							<div class="deptItem_border">
								<text class="deptItem_name">{{item.departmentName}}</text>
								<text class="deptItem_num">{{item.count}}</text>
							</div>
						</div>
					</div>
				</div>
				<div v-if="treeData==null || keyword">
					<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in personList">
						<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
						<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
						<div class="personItemRow_right">
							<div class="personItemRow_right_top">
								<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
								<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
							</div>
							<div class="personItemRow_right_bottom">
								<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
							</div>
						</div>
						<div class="personItemRow_right2">
							<u-icon v-if="item.isMyAttendee" name="star-fill" color="#f5dc4d" size="24" @click="follow(false,item.userId)"></u-icon>
							<u-icon v-if="!item.isMyAttendee" name="star" color="#f5dc4d" size="24" @click="follow(true,item.userId)"></u-icon>
							<u-icon name="phone" size="24" :style="{margin:'3px 10px 0 10px'}" @click="callNum(item.phone)"></u-icon>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				show:'',
				treeData:[],
				treePath:[],
				personList:[],
			}
		},
		computed: {
			getItem() {
			},
		},
		created() {
			this.getData()
		},
		watch: {
			treePath(newData,oldData){
				const last = this.treePath[this.treePath.length-1]
				if(this.keyword){
					this.getPerson({code:last.code, name:this.keyword})
				}else{
					if(last.data.children === null){
						this.getPerson({code:last.code})
					}else{
						this.personList = []
					}
				}
			}
		},
		onShow() {
			this.getSearch(this.keyword)
		},
		methods: {
			getHighlight(val) {
				const keyword = this.keyword
				if (keyword && val.indexOf(keyword) !== -1) {
					const text = val.replace(keyword, `<text :style="{color:'#42cccc'}">${keyword}</text>`)
					console.log(text)
					return text
				} else {
					return val
				}
			},
			highlightKeyword(text, keyword) {
			      const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
			        return `<span style="color: red;">${match}</span>`;
			      });
			      return highlightedText;
			},
			getSearch(e) {
				if(e){
					const last = this.treePath[this.treePath.length-1]
					this.getPerson({name:e, code:last.code})
				}else{
					const last = this.treePath[this.treePath.length-1]
					if(last.data.children === null){
						this.getPerson({code:last.code})
					}else{
						// this.getPerson({code:last.code,name:'不可能查到的值'})
						this.personList = []
					}
				}
			}
			,
			async getPerson({code,name}) {
				try{
					let url = '/gunshiApp/xfflood/addressbook/list/query'
					if(name){
						//搜索名字
						url = '/gunshiApp/xfflood/addressbook/list/query?args='+name+'&departmentCode='+code
					}else{
						//搜索code
						url = '/gunshiApp/xfflood/addressbook/list/query?departmentCode='+code
					}
					console.log('查询的url',url)
					const res = await uni.$http.get(url)
					this.personList = res.data.data
					console.log('查询的人员',res)
				}catch(e){
					this.personList = []
					//TODO handle the exception
				}
			},
			async getData() {
				try {
				  const res = await uni.$http.get('/gunshiApp/xfflood/department/app/tree')
				  this.treeData = res.data.data[0].children
				  this.treePath = [...this.treePath,{
					  name:res.data.data[0].departmentName,
					  code:res.data.data[0].departmentCode,
					  data:res.data.data[0],
				  }]
				} catch (e) {
				  uni.$showMsg()
				}
			},
			async follow (flag,id) {
				let url = flag?'/gunshiApp/xfflood/addressbook/attendee/add':'/gunshiApp/xfflood/addressbook/attendee/cancel'
				const params = {
					addUserId:id
				}
				try {
				  const res = await uni.$http.post(url,params)
				  if(res.data.code === 200){
					  //关注成功
					  this.getSearch(this.keyword)
				  }
				} catch (e) {
				  uni.$showMsg()
				}
				
			}
			,
			itemClick(item,index) { 
				this.treeData = item.children,
				this.treePath = [...this.treePath,{
									  name:item.departmentName,
									  code:item.departmentCode,
									  data:item,
									},
								]
			},
			breadcrumbClick(item,index) {
				this.treeData = item.data.children,
				this.treePath = [...this.treePath].filter((item,index2)=>index2<=index)
			},
			callNum(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			toFollow() {
				uni.navigateTo({
				  url: '/pages/addressBook/follow'
				});
			},
			toMyDept() {
				uni.navigateTo({
				  url: '/pages/addressBook/myDept'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.titleBar{
	width: 100%;
	height: 40px;
	background-color: #007afd;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	color: #ffffff;
}
.searchBar{
	background-color: #ffffff;
	padding: 10px 10px 0 10px;
	border-bottom: 1px solid rgba(233, 233, 233, 1);
}
.iconRow{
	margin: 15px 0;
	display: flex;
	justify-content: space-evenly;
}
.iconBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.icon_text{
	margin-top: 10px;
	font-size: 14px;
	color: #666666;
}
.mybody{
	background-color: #ffffff;
	margin-top: 10px;
	border-top: 1px solid rgba(233, 233, 233, 1);
	height: calc( 100vh - 233px);
	overflow: hidden;
}
.breadcrumb{
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.breadcrumb_item{
	padding: 8px;
	padding-right: 0px;
	font-size: 14px;
}
.deptItem{
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.deptItem_border{
	width: 80%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	border-bottom: 1px solid #eee;
}
.deptItem_num{
	margin-right: 20px;
}
.personItemIcon{
	width: 40px;
	height:40px;
	background-color: rgb(53, 133, 249);;
	border-radius: 20px;
	margin: 0 20px;
	text-align: center;
	line-height: 40px;
	color: #ffffff;
}
.personItemRow_right{
	height: 100%;
	flex: 1;
	border-bottom: 1px solid #eee;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.personItemRow_right2{
	width: 100px;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	border-bottom: 1px solid #eee;
}
.personItemRow_right_top{
	margin-top: 5px;
	display: flex;
	justify-content: flex-start
}
</style>