yos_web/src/HManagement/addressList/mycontact/modules/contacts.vue

<template>
  <div class="normal-panel scroll-panel" style="width: calc((100vh - 400px) / 2)">
    <div class="container" style="border-bottom:1px solid #f1f2f3;padding: 16px 16px 6px 16px">
<!--      <el-form class="myform" size="small" inline label-position="right" :label-width="tool.onlyZh('50px')">
        <el-form-item :label="$t(`搜索`)">-->
<!--          <el-input v-model="condition" prefix-icon="el-icon-search" :placeholder="$t(`联系人,手机号(全称)`)" @keyup.native.enter="search" @clear="clearSearch"  clearable></el-input>-->
      <div class="inline-16 mt-10" >
        <span style="font-size: 14px;color: #606266;" class="inline-16">{{$t('搜索')}}</span>
        <el-input style="width:200px;" :placeholder="$t(`联系人,手机号`)" :suffix-icon="condition?condition.length > 0?'':'':'el-icon-search'" v-model="condition" @keyup.native.enter="search" @clear="clearSearch" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
        </el-input>
      </div>
      <div class="inline-16 mt-10" >
        <span style="font-size: 14px;color: #606266;" class="inline-16" >{{$t('标签')}}</span>
        <el-select  v-model="tag" :placeholder="$t('请选择标签')" size="small" @change="search" clearable @clear="clearSearch" filterable class="inline-16" multiple>
          <el-option
              v-for="item in tags"
              :key="item.index"
              :label="$t(item)"
              :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="inline-16 mt-10">
        <el-button type="primary" size="small" @click="onReset" >{{$t('重置')}}</el-button>
      </div>

<!--        </el-form-item>
      </el-form>-->
    </div>
    <div style="overflow: auto;height: calc(100vh - 260px);" v-if="data.length > 0" >
      <ul >
        <li @click="clickContacts(item)" :class="active === item.index?'act':''" class="container" v-for="item in data" :key="item.index">
          <div class="flex-align-stretch">
            <div class="avatar">
              {{item.name.substr(0, 1)}}
            </div>
            <div class="r-panel">
              <p>{{item.name}} <el-tag v-for="tag in item.tag1" :key="tag.index" :type="tag==='支持者'?'warning':tag==='反对者'?'danger':''" size="mini" style="margin:0 5px">{{$t(tag)}}</el-tag></p>
              <small class="color-grey"><i class="el-icon-mobile"></i>&nbsp;{{item.phonenumber}}&emsp;<i class="el-icon-collection-tag"></i>&nbsp;{{$t(item.groupname)}}</small>
            </div>
          </div>
        </li>
      </ul>
    </div>

<!--    <div class="flex-align-center" v-if="data.phonebook && data.phonebook.length === 0">
      <el-empty :image-size="200" :description="$t(`暂无联系人`)"></el-empty>
    </div>-->
    <div class="flex-align-center" v-else>
      <el-empty :image-size="200" :description="$t(`暂无联系人`)"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  props:['data','tags','editIndex','activeContactsData'],
  data () {
    return {
      active:0,
      condition:'',
      tag:[]
    }
  },
  watch: {
    data (val) {
      if (this.data.length > 0) {
        if (this.editIndex !== ''){
          this.active = this.editIndex
          let indexN = ''
          this.data.forEach((item,index)=>{
            if (item.index === this.editIndex){
              indexN = index
              return
            }
          })
          this.$emit('clickContacts',this.data[indexN])
        }else {
          this.active = this.data[0].index
          this.$emit('clickContacts',this.data[0])
        }

      }else {
        this.$emit('clickContacts','')
      }
    }
  },
  methods:{
    clickContacts (item) {
      this.active = item.index
      this.$emit('clickContacts',item)
    },
    search () {
      if (!this.tag){
        this.tag = []
      }
      var reg=/^\d{1,}$/
      var pattern = new RegExp(reg);
      if (this.condition){
        if (pattern.test(this.condition)) {
          this.$emit('filtetContacts','phonenumber',this.condition,this.tag)
        } else {
          this.$emit('filtetContacts','name',this.condition,this.tag)
        }
      }else {
        this.$emit('filtetContacts','close',this.condition,this.tag)
      }

    },
    clearSearch () {
      var reg=/^\d{1,}$/
      var pattern = new RegExp(reg);
      if (this.condition){
        if (pattern.test(this.condition)) {
          this.$emit('filtetContacts','phonenumber',this.condition,this.tag)
        } else {
          this.$emit('filtetContacts','name',this.condition,this.tag)
        }
      }else {
        this.$emit('filtetContacts','close',this.condition,this.tag)
      }
     /* this.$emit('filtetContacts','close',this.condition,this.tag)*/
    },
    onChange() {
      if (this.condition === '')
        return this.$emit('filtetContacts','close',this.condition,this.tag)
    },
    onReset(){
      this.condition = ''
      this.tag = []
      this.$emit('filtetContacts','reset',this.condition,this.tag)
    }
  },
  mounted () {
  }
}

</script>
<style>
.myform .el-form-item{
  margin-bottom: 0 !important;
}
</style>
<style scoped>
.scroll-panel{
  height: calc(100vh - 182px);
  overflow-y: scroll;
}
.scroll-panel::-webkit-scrollbar{
  display:none !important;
}
.normal-panel {
  border-right:1px solid #f1f2f3
}
.r-panel{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
  margin-left: 10px;
}
.color-grey{
  color:#999
}
li{
  transition: .2s linear all;
  cursor: pointer;
}
.act{
  background: #f1f2f3;
}
li:hover{
  background: #f1f2f3;
}
.flex-align-center{
  height: 100%;
  justify-content: space-around;
}
.avatar{
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 1.5rem;
  color:#fff;
  border-radius: 100%;
  background: #3874F6;
}
</style>