人员添加搜索

src/views/leader.vue

@@ -45,9 +45,17 @@
 					<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
 						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
 						<div class="i-list-con h-27">
+              <el-input
+                v-model="nickName"
+                placeholder="请输入姓名"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+                style="margin-bottom: 20px"
+              />
 							<div class="d-l-con-icon">
 								<div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
-									v-for="(item,index) in peopleList" @click="getPlanList(item.userId)">
+									v-for="(item,index) in peopleList2" @click="getPlanList(item.userId)">
 									<div class="icon icon-mid el-icon-user"></div>
 									<div class="icon-text personnel-name">
 										<h6>{{ item.nickName }}</h6>
@@ -158,12 +166,14 @@
 		},
 		data() {
 			return {
+        nickName:'',
 				iconCurrentIndex1: '1',
 				listCurrentIndex1: '',
 				listCurrentIndex2: '',
 				visuForestCloudRYBO: [], //人员类型列表
         personId: null, //人员
         peopleList: [], //人员列表
+        peopleList2: [], //人员列表
         connectList: [], //画线
         patrolTrajectory: null, //任务画线
 				xunLinListOne: [], //巡林任务
@@ -185,6 +195,19 @@
     mounted(){
       this.bottomMenuList() //获取底部公共组件消息和任务
     },
+    watch:
+      {
+        nickName(val){
+          this.peopleList2=[];
+
+          for (let i in this.peopleList) {
+            if(this.peopleList[i].nickName.indexOf(val) != -1){
+              this.peopleList2.push(this.peopleList[i]);
+            }
+          }
+          console.log(this.peopleList2)
+        }
+      },
 		methods: {
 			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
       bottomMenuList() {
@@ -280,8 +303,10 @@
 				that.listCurrentIndex2 = ''
 				that.iconCurrentIndex1 = linJob
 				that.peopleList = []
+        that.peopleList2 = []
 				getForestLeader(linJob, linType).then(res => {
 					that.peopleList = res.data
+          that.peopleList2 = res.data
 				})
 				that.connectList = []
         this.personId = null;
@@ -291,6 +316,7 @@
 			},
 			//点击左侧人员列表获取 巡林计划
 			getPlanList(personId) {
+
         if(this.personId == personId){//当前人员已经被点击一次 不再重复加载
           return;
         }
@@ -300,7 +326,7 @@
 				that.recordList = [];
         that.listCurrentIndex1 = personId
 				getPlanList(personId).then(res => {
-          console.log("点击左侧人员列表获取 巡林计划=", res.data)
+          console.log("点击左侧人员列表获取 巡林计划=", personId)
 					that.xunLinListOne = res.data;
 				})
         getlinleaderMap(personId).then(res => {