合并qzc

pages/addressBook/addressBook.vue

@@ -22,7 +22,7 @@
 			</div>
 		</div>
 		<div class="mybody">
-			<div class="breadcrumb" v-if="!keyword">
+			<div class="breadcrumb">
 				<text 
 					v-for="(item,index) in treePath" 
 					class="breadcrumb_item" 
@@ -30,6 +30,7 @@
 					@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'}">
@@ -44,14 +45,14 @@
 						</div>
 					</div>
 				</div>
-				<div v-if="personList.length>0">
+				<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">
-								<div :style="{width:'100px'}"><text>{{item.userName}}</text></div>
+								<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
-								<div :style="{flex:'1'}"><text>{{item.phone}}</text></div>
+								<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>
@@ -90,22 +91,47 @@
 		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){
-					this.getPerson({name: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 = []
 					}
 				}
@@ -116,14 +142,15 @@
 					let url = '/gunshiApp/xfflood/addressbook/list/query'
 					if(name){
 						//搜索名字
-						url = '/gunshiApp/xfflood/addressbook/list/query?args='+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.data.data)
+					console.log('查询的人员',res)
 				}catch(e){
 					this.personList = []
 					//TODO handle the exception
@@ -235,6 +262,7 @@
 }
 .breadcrumb_item{
 	padding: 8px;
+	padding-right: 0px;
 	font-size: 14px;
 }
 .deptItem{

pages/addressBook/follow.vue

@@ -29,8 +29,8 @@
 				<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
 				<div class="personItemRow_right">
 					<div class="personItemRow_right_top">
-						<div :style="{width:'100px'}"><text>{{item.userName}}</text></div>
+						<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
-						<div :style="{flex:'1'}"><text>{{item.phone}}</text></div>
+						<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>
@@ -67,6 +67,12 @@
 			}
 		},
 		methods: {
+			highlightKeyword(text, keyword) {
+			      const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
+			        return `<span style="color: red;">${match}</span>`;
+			      });
+			      return highlightedText;
+			},
 			async getData () {
 				try {
 				  const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/attendee')

pages/addressBook/myDept.vue

@@ -22,15 +22,23 @@
 				v-model="keyword"
 			></u-search>
 		</div>
-		
+		<div class="breadcrumb" v-if="deptList.length>0">
+			<text 
+				v-for="(item,index) in deptList" 
+				class="breadcrumb_item" 
+			>
+				{{item.departmentName}}
+				<text v-if="(deptList.length-1)!==index" :style="{marginLeft:'8px',color:'#000000'}">></text>
+			</text>
+		</div>
 		<div class="mybody">
 			<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in getList">
 				<!-- <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">
-						<div :style="{width:'100px'}"><text>{{item.userName}}</text></div>
+						<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
-						<div :style="{flex:'1'}"><text>{{item.phone}}</text></div>
+						<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>
@@ -54,23 +62,40 @@
 		data() {
 			return {
 				keyword:'',
-				list:[]
+				list:[],
+				deptList:[]
 			};
 		},
 		computed: {
 			getList() {
 				if(this.keyword){
-					return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1)
+					return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1||o.phone.indexOf(this.keyword)!==-1)
 				}else{
 					return [...this.list]
 				}
 			}
 		},
 		methods: {
+			highlightKeyword(text, keyword) {
+			      const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
+			        return `<span style="color: red;">${match}</span>`;
+			      });
+			      return highlightedText;
+			},
 			async getData () {
 				try {
 				  const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/department')
-				  this.list = res.data.data
+				  console.log('人员信息',res)
+				  this.list = [...res.data.data,...res.data.data,...res.data.data,...res.data.data]
+				} catch (e) {
+				  uni.$showMsg()
+				}
+			},
+			async getDept () {
+				try {
+				  const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/department/super')
+				  console.log('部门信息',res)
+				  this.deptList = res.data.data
 				} catch (e) {
 				  uni.$showMsg()
 				}
@@ -99,6 +124,7 @@
 		},
 		created() {
 			this.getData()
+			this.getDept()
 		}
 	}
 </script>
@@ -115,7 +141,7 @@
 }
 .mybody{
 	background-color: #ffffff;
-	margin: 5px 5px;
+	// margin: 5px 5px;
 	padding: 5px 0px;
 	height: calc( 100vh - 100px );
 	overflow: scroll;
@@ -150,4 +176,14 @@
 	display: flex;
 	justify-content: flex-start
 }
+.breadcrumb{
+	padding: 10px;
+	background-color: #ffffff;
+	border-bottom: 1px solid #eee;
+}
+.breadcrumb_item{
+	padding: 8px;
+	padding-right: 0px;
+	font-size: 14px;
+}
 </style>