人员登记添加搜索功能

src/views/menu/securityCheckRegister/addCheck.vue

@@ -72,10 +72,6 @@ export default {
         value:'id'
       },
       pullup:false,
-      go:{
-        type:'replace',
-        path:'/securityDetail',
-      }
     }
   },
   mounted(){

src/views/menu/visitRecord/add.vue

@@ -8,25 +8,18 @@
           <template #header>
             <span></span>
           </template>
-<!--          <template #header>-->
-<!--            <van-cell title="状态">-->
-<!--              <template #extra>-->
-<!--                  <span :style="{color:getState(getDictLabel(visitInfo.status,'out_in_approve_status'))}">-->
-<!--                    {{getDictLabel(visitInfo.status,'out_in_approve_status') }}-->
-<!--                  </span>-->
-<!--              </template>-->
-<!--            </van-cell>-->
-<!--          </template>-->
           <div class="panel-box">
-            <select-cell
-              title="来访人员"
-              :prop="prop"
-              is-row
-              @itemInfo="getItemInfo"
-              v-model="selectedUser.id"
-              :data-list="userList"
-              required>
-            </select-cell>
+
+<!--            <select-cell-->
+<!--              title="来访人员"-->
+<!--              :prop="prop"-->
+<!--              is-row-->
+<!--              @itemInfo="getItemInfo"-->
+<!--              v-model="selectedUser.id"-->
+<!--              :data-list="userList"-->
+<!--              required>-->
+<!--            </select-cell>-->
+            <van-cell title="来访人员" :value="selectedUser.userName" required is-link  @click="onClick"/>
             <van-cell title="证件类型" :value="getDictLabel(selectedUser.idType,'letter_id_type')"></van-cell>
             <van-cell title="证件号码" :value="selectedUser.idCard"></van-cell>
             <van-cell title="介绍信类型" :value="getDictLabel(selectedUser.type,'out_in_type')"></van-cell>
@@ -77,13 +70,49 @@
           </div>
         </van-panel>
       </div>
-
     </div>
+
+    <!--  人员选择弹窗  -->
+    <van-popup
+      class="search-data-popup"
+      round
+      lazy-render
+      v-model="showPicker"
+      position="bottom"
+      @click-overlay="clickOverlay"
+      :close-on-click-overlay="true">
+      <div class="header-line">
+        <div class="cancel" @click="onSearchCancel">取消</div>
+        <div class="title">选择人员</div>
+        <div class="sure" @click="onSearchConfirm">确定</div>
+      </div>
+
+      <form action="/">
+        <van-search  placeholder="输入搜索内容" v-model="searchValue" @input="inputSearchValue" />
+      </form>
+
+      <div  v-if="userList.length >0"  class="lists">
+        <div class="list-item">
+          <van-cell
+            :class="{active:item.checked}"
+            v-for="(item, index) in userList"
+            clickable
+            :key="item.id"
+            :title="item.userName"
+            :value="item.companyName"
+            @click="handleClick(item,index)">
+          </van-cell>
+        </div>
+      </div>
+      <div v-else class="lists">
+        <empty description="无数据" />
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
-
+import SearchSelectCell from "@/components/SearchSelectCell/index.vue";
 import DateCell from "@/components/dateCell/index.vue";
 import Uploader from "@/components/upload/gxuploader.vue";
 import {formatDate} from "@/filters/filter";
@@ -92,7 +121,7 @@ import {imgUrl} from "@/utils";
 import { ImagePreview } from 'vant'
 import {userList, userRegister} from './api'
 export default {
-  components: {Uploader, DateCell},
+  components: {SearchSelectCell,Uploader, DateCell},
   data(){
     return {
       minDate:null,
@@ -102,7 +131,7 @@ export default {
       selectedUser:{},
       prop:{
         label:'userName',
-        value:'id'
+        value:'id',
       },
       formData:{
         letterUserId:null,
@@ -111,7 +140,12 @@ export default {
         accompanyingPerson:null,
         checkImage:null,
       },
-      dicts:['out_in_approve_status','letter_id_type','out_in_type']
+      dicts:['out_in_approve_status','letter_id_type','out_in_type'],
+      /*以下为弹窗中的变量*/
+      searchValue:'',
+      showPicker:false,
+      onSelected:null,
+      pList:[],
     }
   },
   computed:{
@@ -122,6 +156,41 @@ export default {
   },
   methods:{
     imgUrl,formatDate,
+    onClick(){
+      this.showPicker = true;
+    },
+    clickOverlay(){
+      this.selected = this.value;
+      this.showPicker = false;
+    },
+    handleClick(v,i){
+      this.userList.forEach(v=>v.checked = false);
+      // this.$nextTick(()=>{
+      //   this.$set(this.userList[i],'checked',!this.userList[i].checked);
+      // })
+      v.checked = !v.checked;
+      this.userList.splice(i,1,v)
+      this.onSelected = v;
+    },
+    onSearchCancel() {
+      this.selected = this.value;
+      this.$emit("cancel");
+      this.showPicker = false;
+    },
+    onSearchConfirm() {
+      this.selectedUser = this.onSelected;
+      this.showPicker = false;
+    },
+    inputSearchValue(query) {
+      //搜索框值发生改变
+      setTimeout(() => {
+        this.userList= this.pList.filter(item => {
+          return item.userName.indexOf(query) > -1;
+        });
+      }, 200);
+    },
+
+
     onSubmit(){
       if(!this.selectedUser.id){
         this.$toast('请选择来访人员');
@@ -179,6 +248,7 @@ export default {
           }
           return v
         })
+        this.pList = res.data;
       })
     },
     preView(val) {
@@ -339,4 +409,61 @@ export default {
     height: 30px;
   }
 }
+.search-data-popup{
+  .header-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 90px;
+  }
+  .header-line .cancel {
+    padding: 0 30px;
+    font-size: 28px;
+    color: #969799;
+  }
+  .header-line .title {
+    font-weight: 500;
+    font-size: 30px;
+    color: #343434;
+  }
+  .header-line .sure {
+    padding: 0 30px;
+    font-size: 28px;
+    color: #1989fa;
+  }
+  .lists {
+    display: flex;
+    flex-direction: column;
+    -padding: 10px 12px 20px 12px;
+    min-height: 300px;
+    max-height: 700px;
+    overflow: auto;
+  }
+  .lists .line {
+    line-height: 40px;
+    font-size: 16px;
+    color: #000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .lists .line img {
+    width: 20px;
+    height: 20px;
+  }
+  .tip {
+    color: #666;
+    padding-bottom: 5px;
+  }
+  .van-empty{
+    padding: 0;
+  }
+  .list-item{
+    padding:20px;
+  }
+  .active{
+    color:#1989fa;
+    border-left: 5px solid #1989fa;
+  }
+}
 </style>