yos_web/src/template/searchInput/index.vue

<template>
  <div>
    <div class="flex-align-stretch menber__panel">
      <div class="flex-align-center menber__item flex-between" :class="showSelelctIcon(item)?'active_menber__item':''" style="flex:1 0 auto" v-for="item in tableData" :key="item.index" @click="clickMenber(item)">
        <div  class="flex-align-center">
          <div class="avatar inline-16">
            <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
            <p v-else>{{item.name.substr(0, 1)}}</p>
          </div>
          <div @click="onSelect(item)">
            <p>{{ item.name }}</p>
            <small style="color:#999999ad;margin-top:10px">{{$t(`账号`)}}：{{ item.accountno?item.accountno:$t("未知账户") }}&emsp;{{$t(`手机号`)}}：{{ item.phonenumber?item.phonenumber:$t("未知") }}</small>
          </div>
        </div>
        <i class="el-icon-check iconCheck" v-if="showSelelctIcon(item)"></i>
      </div>
    </div>
    <el-empty v-if="tableData.length === 0" :description="$t('暂无数据')" :image-size="40"></el-empty>
  </div>
  </template>

  <script>
  export default {
    props:['param','radio','checked','implement'],
    data () {
      return {
        tableData: [],
        total:0,
        currentPage:0,
        selected:[]
      }
    },
    components:{
    },
    methods:{
      async listData (callback) {
        const res = await this.$api.requested(this.param)
        if (!this.radio) {
          res.data = res.data.filter(e=>{
            if (e.isteamleader !== 1 && e.userid !== this.implement)
              return e
          })
        }
        this.tableData = res.data
        console.log(this.implement)
        if (this.implement !== undefined && this.implement !== ''){
          this.total = res.total -1
        }else {
          this.total = res.total
        }
        callback && this.tableData.length && callback()
        this.currentPage = res.pageNumber
      },
      onSelect (data) {
        console.log(data,'111');
        this.$emit('onSelect',data)
      },
      clickMenber (item) {
        if (this.radio) {
          this.selected = []
        }
        let _isSame = this.selected.some(m=>item.userid === m.userid)
        if (!_isSame) {
          this.selected.push(item)
        } else {
          this.selected = this.selected.filter(e=>{
            return e.userid !== item.userid
          })
        }
      },
      showSelelctIcon (item) {
        let _isSame = this.selected.some(m=>item.userid === m.userid)
        return _isSame
      },
      closeTag (item) {
        this.selected = this.selected.filter(e=>{
          return e.userid !== item.userid
        })
      },
      onCancel () {
        this.$emit('onCancel')
      }
    },
    mounted () {
      this.listData()
    }
  }

  </script>
  <style>
  </style>
  <style scoped>
  .search_input{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 8px 0 8px;
    border: 1px solid #f1f2f3;
    border-radius: 5px;
  }
  .input_panel{
    flex: 1;
    min-width: 100px;
    border:none;
    outline: none;
    margin-bottom: 8px;
    color:#666
  }
  .menber__item{
    width: calc(100% - 20px);
    padding:5px 10px;
    border-radius: 5px;
    cursor: pointer;
    color:#666;
    margin-bottom: 5px;
    transition: .2s linear;
  }
  .menber__item:hover{
    background: #b5e4ff6e;
  }
  .active_menber__item{
    background: #b5e4ff6e;
  }
  .menber__panel {
    max-height: 300px;
    overflow-y:scroll ;
  }
  .avatar{
    position: relative;
    height:30px;
    width: 30px;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
    color:#fff;
    font-weight: 500;
    background: #3874F6;
    cursor: pointer;
    overflow: hidden;
  }
  .avatar__image{
    height: 100%;
    width: 100%;
  }
  .avatar-mini{
    position: relative;
    height:20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: 5px;
    color:#fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 100%;
    background: #3874F6;
  }
  .iconCheck{
    font-weight: bold;
    color:#3874F6
  }
  .tag{
    font-size: 12px;
    color:#666;
    padding: 5px;
    border-radius: 3px;
    margin:0 5px 8px 0;
    background: #b5e4ff6e;
    cursor: pointer;
  }
  </style>