soc_app/src/components/peopleList/index.vue

<template>
  <div>
    <van-field
      readonly
      clickable
      name="datetimePicker"
      v-model="peoples"
      :required="isRequired"
      :label="inpitLabel"
      placeholder="请选择人员"
      @click="show = true"
    />
    <van-action-sheet class="bigsheetbox" @closed="closedHandler" v-model="show" safe-area-inset-bottom position="bottom" title="选择人员">
      <van-row>
        <van-col span="24">
          <!-- <van-search v-model="searchVal" placeholder="请输入搜索关键词" /> -->
          <form action="/">

            <van-search v-model="searchVal" placeholder="请输入搜索关键词" clearable @input="onSearch" />
          </form>
        </van-col>
      </van-row>

      <van-row class="rowclss">
        <van-col span="24">
          <van-checkbox-group v-model="peoplesId">
            <van-cell-group>
              <van-cell v-for="item in peopleListCpoy" clickable :key="item.id" :title="`${item.name}`">
                <template #right-icon>
                  <van-checkbox :name="item.id" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </van-col>
      </van-row>
      <van-row class="bottomdiv">
        <van-col span="24">
          <van-button class="btns" size="large" type="info" @click="submitHandler">确定</van-button>
        </van-col>
      </van-row>
    </van-action-sheet>
  </div>
</template>
<script>
import { deptTreeList } from '@/api/toConsult.js'
import { getOrgPeople } from '@/api/public.js'
import OrgTree from '@/components/orgTree'
export default {
  name: 'SocAppIndex',
  components: {
    OrgTree
  },

  props: {
    organizationId: {
      //机构ID
    },
    userList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isRequired: {
      //是否必填
      type: Boolean,
      default: false
    },
    inpitLabel: {
      type: String,
      default: '参与人员'
    },
    fieldNames: {
      //树行配置映射项
      type: Object,
      default: () => {
        return {
          text: 'name',
          value: 'id',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      orgId: this.organizationId || '',
      show: false,
      value1: '',
      showcascader: false,
      cascaderValue: '',
      loading: false,
      options: [], //机构列表
      peoplesId: [], //人员ID集合
      searchVal: '', //搜索值
      peopleList: [], //人员列表
      peopleListCpoy: [], //人员列表2
      orgName: '', //机构名称
      peoples: '' //人员列表
    }
  },
  watch: {
    organizationId(val) {
      this.orgId = val + ''
      this.getpeople()
    },
    //监听弹框是否打开
    show(val) {
      if (val) {
        this.getpeople()
      }
    },
    //监听人员数组变化
    userList(val) {
      this.peoplesId = []
      this.$set(this.$data, 'peoples', val.map(item => item.userName).join(','))

      val.map(item => {
        this.peoplesId.push(item.userId)
      })
    }
  },

  created() {},
  mounted() {},

  methods: {
    // 弹框关闭动画
    closedHandler(){
        this.searchVal=''
    },
    onLoad() {},
    getpeople() {
      getOrgPeople(this.orgId).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.peopleList = data
          this.peopleList.forEach(item => {
            item.userName = item.name
            item.username = item.name
            item.userId = item.id
          })
          this.peopleListCpoy = JSON.parse(JSON.stringify(this.peopleList))

          this.peopleListCpoy.forEach(item => {
            this.peoplesId.forEach(i => {
              console.log(this.peoplesId)
              if (item.userId === i) {
                this.$set(item, 'checked', true)
              } else {
                this.$set(item, 'checked', false)
              }
            })
          })
        }
      })
    },

    onSearch(val) {
      this.peopleListCpoy = this.peopleList.filter(item => {
        if (item.name.indexOf(val) != -1) {
          return item
        }
      })
    },

    onCancel() {
      this.searchVal = ''
      this.peopleListCpoy = this.peopleList
    },
    submitHandler() {
      let list = []
      this.peopleListCpoy.filter(item => {
        this.peoplesId.forEach(r => {
          if (r == item.id) {
            list.push(item)
          }
        })
      })

      // this.peoples = list.map(item => item.name).join(',')

      this.$set(this.$data, 'peoples', list.map(item => item.name).join(','))
      // 抛出已选择人员信息
      this.$emit('userList', list)
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.van-action-sheet {
  min-height: 90%;
}
.btns {
  width: 100%;
  height: 90px;
}
.bottomdiv {
  width: 100%;
  bottom: 0%;
  position: fixed;
  z-index: 2000;

}
.rowclss{
  margin-bottom: 100px;
}
.bigsheetbox {
  height: calc(100vh - 100px);
}
.van-field__control{
  padding-right: 20px;
}
.line {
  width: 100%;
  height: 3px;
  background-color: #1989fa;
}
</style>