ks-app-employment-service/packageRc/pages/service/components/choosePerson.vue

<template>
  <uni-popup ref="showPersonChooser" type="bottom"  round background-color="#fff">
    <view style="width: 100%;position: relative;z-index: 100;box-sizing: border-box;background: #fff;padding-top: 10px;">
      <input class="search" @change="searchChange" placeholder="搜索选择人员" v-model="searchPerson"/>
      <scroll-view style="height: 500rpx;padding: 0 32rpx;box-sizing: border-box;" :scroll-y="true">
        <view v-for="(item, index) in personList" :key="index" @click="bindPerson(item)"
          class="person-list" :class="{active: activePerson.id == item.id}">
          <template v-if="choiceType==3">
            <view>{{ item.personName }}</view>
            <view style="color: #8492a6;margin-top: 7rpx;">期望工种：{{item.jobWorkTypeName}}</view>
          </template>
          <template v-else-if="choiceType==4">
            <view>{{ item.personName }}</view>
            <view style="color: #8492a6;margin-top: 7rpx;">意愿培训工种：{{item.trainingIntentionWorkTypeName}}</view>
          </template>
          <template v-else>
            <view style="display: flex;justify-content: space-between;font-size: 32rpx;font-weight: bold;">{{ item.name }}
              <view style="color: #8492a6; font-size: 13px;width: 50%;text-align: right;">{{ item.phone }}</view>
            </view>
            <view style="color: #8492a6;margin-top: 7rpx;">现居住地：{{item.currentResidentialAddress}}</view>
          </template>
        </view>
      </scroll-view>
      <view class="button-area" style="position: relative;">
        <view class="btn" @click="closeshowPersonChooser">取消</view>
        <view class="btn reset" @click="resetData">重置</view>
        <view class="btn save" @click="saveInfo">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import {getPersonList} from '@/packageRc/apiRc/needs/person'
import { listJobService } from "@/packageRc/apiRc/needs/jobService";
import { listTrainService } from "@/packageRc/apiRc/needs/trainService";
export default {
  props: {
    choiceType: {
      default: 1
    }
  },
  mounted() {
  	this.doSearch()
  },
  data() {
    return {
      showPersonChooser: false,
      activePerson: {},
      searchPerson: '',
      personList: [],
      searcher: '',
    }
  },
  methods: {
    open() {
      this.$refs.showPersonChooser.open();
      this.activePerson = {}
    },
    closeshowPersonChooser() {
      this.$refs.showPersonChooser.close()
    },
    saveInfo() {
      this.$emit('confirm', this.activePerson)
      this.$refs.showPersonChooser.close()
    },
    searchChange(){
      console.log('搜索内容：' + this.searchPerson);
      if(this.searcher){
        clearTimeout(this.searcher)
        this.doSearch()
      }else{
        this.doSearch()
      }
    },
    doSearch() {
      this.searcher = setTimeout(() => {
        uni.showLoading('加载中...');
        // alert("选择的choiceType：" + this.choiceType );
        if(this.choiceType == 3) {
          listJobService({personName: this.searchPerson, pageSize: 100, pageNum: 1}).then(res => {
            uni.hideLoading();
            this.personList = res.rows
            clearTimeout(this.searcher)
          })
        }else if(this.choiceType == 4) {
          listTrainService({personName: this.searchPerson, pageSize: 100, pageNum: 1}).then(res => {
            uni.hideLoading();
            this.personList = res.rows
            clearTimeout(this.searcher)
          })
        }else{
          getPersonList({name: this.searchPerson, pageSize: 100, pageNum: 1}).then(res => {
            uni.hideLoading();
            this.personList = res.rows
            clearTimeout(this.searcher)
          })
        }
      }, 200)
    },

	resetData(){
		this.searchPerson = '';
		this.personList = [];
		this.activePerson = {}
	},

    bindPerson(item) {
      this.activePerson = item;
      this.$forceUpdate();
    },
  }
}
</script>

<style lang="scss" scoped>
.person-list{
  padding: 24rpx 32rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  margin-top: 32rpx;
  &.active{
    border: 1px solid #1890ff;
  }
}
.search{
  margin: 0 32rpx;
  border: 1px solid #e4e4e4;
  border-radius: 50rpx;
  height: 64rpx;
  padding: 0 20rpx;
}
</style>