vue移动端封装选择人员组件SelectUserPopup（将请求函数和请求数据传入子组件中） 吴小明

效果：

　　

使用到的技术：

　　1、支持分页（下拉加载更多），这里是接口支持的分页。推荐：vue基于vant封装上拉加载/下拉刷新组件ListScroller

　　2、支持搜索，这个也是接口支持的。搜索支持防抖

　　3、多选（可扩展成支持单选）

　　4、通过sync修饰符绑定父子组件传参

　　5、请求函数和请求数据传入子组件中

components/SelectUserPopup.vue

<template>
  <div class="select-user-popup">
    <van-popup v-model="isShow" position="bottom" :style="{ height: '100%' }">
      <div class="wrapper">
        <div class="search">
          <van-icon name="cross" @click="handleClose" />
          <van-search v-model="searchValue" :placeholder="params.placeholder||'输入姓名'" @input='handleInput' />
        </div>
        <list-scroller ref="listScrollerRef" @on-pulldown-loading="refrash" @on-pullup-loading="loadMore">
          <van-checkbox-group v-model="result">
            <van-checkbox :name="item.id" v-for="item in userOptions" :key="item.id">
              {{item.name}}{{item.empNo?`（${item.empNo}）`:''}}
              <template #icon="props">
                <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div>
              </template>
            </van-checkbox>
          </van-checkbox-group>
        </list-scroller>
      </div>
      <div class="btns">
        <van-button @click="handleClose" native-type="button">取消</van-button>
        <van-button @click="handleConfirm" native-type="button">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
/*
  使用：
    <SelectUserPopup :selected.sync="page1Data.visitStaffList" :show.sync='isShowVisitStaffPopup' :params='visitStaffPopupParams'></SelectUserPopup>

      isShowVisitStaffPopup: false, // 弹层显隐
      visitStaffPopupParams: {
        queryParams: { page: 1, pageSize: 20, keyWord: '' },
        requestFn: getVisitStaffOptionsApi, // 接口函数
        placeholder: '输入姓名或工号'
      }

*/
import ListScroller from '@/components/ListScroller'
import debounce from 'lodash.debounce'
export default {
  watch: {
    selected: {
      handler(selected) {
        this.result = selected // 场景：当进入到弹层中时，将值回显
      },
      immediate: true
    }
  },
  computed: {
    isShow: {
      get() {
        this.show && this.handleInit()
        return this.show
      },
      set(flag) {
        this.$emit('update:show', flag)
      }
    }
  },
  props: {
    selected: { type: Array, require: true }, // script
    show: { type: Boolean, require: true }, // css
    params: { type: Object, require: true } // template
  },
  data() {
    return {
      searchValue: '', // 搜索框内容
      queryParams: this.params.queryParams, // 接口参数
      userOptions: [], // 用户列表
      totalRecords: 0, // 总条数
      result: [] // 回显选中的值
    }
  },
  methods: {
    // 初始化（打开弹层时执行）
    handleInit() {
      this.result = this.selected // 回显选中的值   场景：当选中一项后点击取消，再次进入正常回显
      this.searchValue = '' // 清空输入框
      this.handleInput('') // 刷新
    },
    // 【取消】按钮
    handleClose() {
      this.isShow = false
    },
    // 【确认】按钮
    handleConfirm() {
      this.$emit('update:selected', this.result)
      this.handleClose()
    },
    // 搜索框input事件
    handleInput(val) {
      this.$refs.listScrollerRef.$el.scrollTop = 0
      this.queryParams.page = 1
      this.queryParams.keyWord = val
      this.getUserOptions()
    },
    // 拜访人（员工）列表
    async getUserOptions() {
      const {
        queryParams,
        params: { requestFn }
      } = this
      const { success, data, totalRecords } = await requestFn(queryParams)
      if (success) {
        this.totalRecords = totalRecords
        if (this.queryParams.page === 1) {
          this.userOptions = data
        } else {
          this.userOptions.push(...data)
        }
      }
    },
    // 刷新
    refrash(cb) {
      this.queryParams.page = 1
      this.getUserOptions().then(() => cb && cb())
    },
    // 加载更多
    loadMore(cb) {
      const { userOptions, totalRecords } = this
      if (totalRecords > userOptions.length) {
        this.queryParams.page++
        this.getUserOptions().then(() => {
          cb && cb()
        })
      } else {
        cb && cb()
      }
    }
  },
  created() {
    this.getUserOptions()
    this.handleInput = debounce(this.handleInput, 200) // 搜索框防抖
  },
  components: { ListScroller }
}
</script>
<style lang="less" scoped>
.select-user-popup {
  /deep/ .van-popup {
    box-sizing: border-box;
    .wrapper {
      height: calc(100% - 144px);
      padding-top: 44px;
      .search {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 4px 15px;
        box-sizing: border-box;
        > .van-icon {
          width: 30px;
          color: #333333;
          font-size: 20px;
        }
        .van-search {
          flex: 1;
          padding: 0;
          height: 36px;
          border-radius: 18px;
          overflow: hidden;
          background-color: #f3f6f9;
          .van-search__content {
            .van-icon {
              color: #8e8e93;
            }
            .van-field__control {
              font-size: 17px;
              color: #b5b5b5;
            }
          }
        }
      }
      .van-checkbox-group {
        .van-checkbox {
          margin-top: 20px;
          padding: 0 15px;
          .van-checkbox__label {
            margin-left: 20px;
            font-size: 16px;
            word-break: break-all;
          }
          // 选中和未选中样式-start
          .activeIcon {
            width: 18px;
            height: 18px;
            border: 2px solid #198cff;
            border-radius: 50%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            > span {
              display: block;
              width: 10px;
              height: 10px;
              background: #198cff;
              border-radius: 50%;
            }
          }
          .inactiveIcon {
            width: 18px;
            height: 18px;
            border: 2px solid #e0e5f5;
            border-radius: 50%;
            box-sizing: border-box;
          }
          // 选中和未选中样式-end
        }
      }
    }
    > .btns {
      margin-top: 15px;
      padding: 0 15px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      > .van-button {
        width: calc(50% - 8px);
        height: 38px;
        line-height: 38px;
        border-radius: 19px;
        font-size: 14px;
        text-align: center;
      }
      > .van-button:first-child {
        background-color: #e0e5f5;
        color: #374e64;
      }
      > .van-button:last-child {
        background-color: #1288fe;
        color: #fff;
      }
    }
  }
}
</style>

　　css：

<style lang="less" scoped>
.select-user-popup {
  /deep/ .van-popup {
    box-sizing: border-box;
    .search {
      display: flex;
      align-items: center;
      padding: 4px 15px;
      box-sizing: border-box;
      > .van-icon {
        width: 30px;
        color: #333333;
        font-size: 20px;
      }
      .van-search {
        flex: 1;
        padding: 0;
        height: 36px;
        border-radius: 18px;
        overflow: hidden;
        background-color: #f3f6f9;
        .van-search__content {
          .van-icon {
            color: #8e8e93;
          }
          .van-field__control {
            font-size: 17px;
            color: #b5b5b5;
          }
        }
      }
    }
    .van-checkbox-group {
      .van-checkbox {
        margin-top: 20px;
        padding: 0 15px;
        .van-checkbox__label {
          margin-left: 20px;
          font-size: 16px;
          word-break: break-all;
        }
        // 选中和未选中样式-start
        .activeIcon {
          width: 18px;
          height: 18px;
          border: 2px solid #198cff;
          border-radius: 50%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          > span {
            display: block;
            width: 10px;
            height: 10px;
            background: #198cff;
            border-radius: 50%;
          }
        }
        .inactiveIcon {
          width: 18px;
          height: 18px;
          border: 2px solid #e0e5f5;
          border-radius: 50%;
          box-sizing: border-box;
        }
        // 选中和未选中样式-end
      }
    }
    .btns {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      position: fixed;
      width: 100%;
      box-sizing: border-box;
      bottom: 47px;
      padding: 0 15px;
      > .van-button {
        width: calc(50% - 20px);
        height: 38px;
        line-height: 38px;
        border-radius: 19px;
        font-size: 14px;
        text-align: center;
      }
      > .van-button:first-child {
        background-color: #e0e5f5;
        color: #374e64;
      }
      > .van-button:last-child {
        background-color: #1288fe;
        color: #fff;
      }
    }
  }
}
</style>

（父组件）使用：

<template>
  <van-form class="add" @submit="onSubmit">
    <van-field v-model='params.projectName' placeholder="选择项目" readonly is-link @click="$refs.projectRadioRef.handleOpen(params.projectId)" />
    <van-field v-model="contactDesc" placeholder="选择联系人" readonly is-link @click="handleOpenContactPopup" />
    <van-field v-model="workDesc" placeholder="添加协作人" readonly is-link @click="isShowWorkPopup=true" />

    <div style="margin: 16px;">
      <van-button native-type="submit" :loading='loading'>提交</van-button>
    </div>
    <!-- 项目单选弹框 -->
    <ProjectRadio @projectRadio='handleProjectRadio' ref='projectRadioRef'></ProjectRadio>
    <!-- 联系人弹层 -->
    <SelectUserPopup v-if="contactParams.queryParams.projectId>0" :selected.sync="params.contactIdList" :show.sync='isShowContactPopup' :params='contactParams'>
    </SelectUserPopup>
    <!-- 协作人弹层 -->
    <SelectUserPopup :selected.sync="params.workPerson" :show.sync='isShowWorkPopup' :params='workParams'></SelectUserPopup>
  </van-form>
</template>
<script>
import { ddNavSetTitle, ddNavSetRight, isDingTalk } from '@/utils/dd'
import ProjectRadio from '@/components/ProjectRadio'
import SelectUserPopup from '@/components/SelectUserPopup'
import { getVisitPersonOptionsApi, getVisitStaffOptionsApi } from '@/api/visitManage'
export default {
  data() {
    return {
      isShowContactPopup: false, // 联系人弹层显隐
      // 联系人请求参数
      contactParams: {
        queryParams: { page: 1, pageSize: 30, keyWord: '', projectId: -1 },
        requestFn: getVisitPersonOptionsApi
      },
      isShowWorkPopup: false, // 协作人弹层显隐
      // 协作人请求参数
      workParams: {
        queryParams: { page: 1, pageSize: 30, keyWord: '' },
        requestFn: getVisitStaffOptionsApi, // 接口函数
        placeholder: '输入姓名或工号'
      },
      params: {
        projectId: -1, // 项目Id 52883
        projectName: '', // 项目名称----仅做回显使用
        contactIdList: [], // 联系人
        workPerson: [] // 协作人
      },
      loading: false // 提交loading
    }
  },
  computed: {
    // 联系人选中情况
    contactDesc() {
      const { contactIdList } = this.params
      return contactIdList.length ? `已选${contactIdList.length}个` : ''
    },
    // 协作人选中情况
    workDesc() {
      const { workPerson } = this.params
      return workPerson.length ? `已选${workPerson.length}个` : ''
    }
  },
  methods: {
    // 项目单选弹层【确定】按钮
    handleProjectRadio(val) {
      if (val.length) {
        const { projectId, projectName } = val[0]
        if (projectId !== this.params.projectId) this.params.contactIdList = [] // 清空联系人列表
        this.params.projectId = projectId
        this.params.projectName = projectName
      } else {
        this.params.contactIdList = [] // 清空联系人列表
        this.params.projectId = -1
        this.params.projectName = ''
      }
    },
    // 打开联系人弹层
    handleOpenContactPopup() {
      const { projectId } = this.params
      if (projectId <= 0) {
        this.$toast('请先选择项目')
      } else {
        this.contactParams.queryParams.projectId = projectId
        this.isShowContactPopup = true
      }
    },
    // 提交
    onSubmit(values) {
      console.log('submit', values, this.params)
    }
  },
  created() {
    ddNavSetTitle('新建日程')
  },
  components: { ProjectRadio, SelectUserPopup }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>

注意：

　　1、联系人基于项目id，初始化时SelectUserPopup组件内直接在created中请求数据，但此时projectId的值还没有，所以用v-if做了判断，可以在子组件内做这一块的优化

　　2、选择项目（单选）组件见此篇：vue移动端封装项目单选组件ProjectRadio（前端懒加载）

页面结构：