yos_web/src/template/menber/index.vue

<template>
<div>
	<!-- <el-input class="normal-margin" type="text" v-model="search" @keyup.native.enter="listData" suffix-icon="el-icon-search" size="small" placeholder="输入成员名称">
    <div slot="prepend">
      <el-tag type="info" size="mini" closable v-for="item in selected" :key="item.index">{{item.name}}</el-tag>
    </div>
  </el-input> -->
  <div class="search_input normal-margin">
    <div class="tag flex-align-center" type="primary" size="mini" closable v-for="item in selected" :key="item.index">
      <div class="avatar-mini">
        <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
        <p v-else>{{item.name.substr(0, 1)}}</p>
      </div>
      <p class="inline-16">{{item.name}}</p>
      <b><i class="el-icon-close" @click="closeTag(item)"></i></b>
    </div>
    <input class="input_panel" type="text" v-model="search" @keyup.enter="listData" placeholder="输入搜索内容">
  </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>
					<p>{{ item.name }} &nbsp;<small style="color:#999999ad">{{item.username}}</small></p>
					<small style="color:#999999ad;margin-top:10px">部门：{{ item.depname?item.depname:"未知部门" }}&emsp;职位：{{ item.position?item.position:"未知部门" }}</small>
				</div>
			</div>
			<i class="el-icon-check iconCheck" v-if="showSelelctIcon(item)"></i>
		</div>
	</div>
  <el-empty v-if="tableData.length === 0" description="暂无数据" :image-size="40"></el-empty>
	<el-button size="mini" type="primary" style="margin-top:16px;float:right" @click="onSelect">确 定</el-button>
 	<div style="margin-top:16px;text-align:left">
    <el-pagination
    background
    small
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="param.content.pageSize"
    layout="total, prev, pager, next"
    :total="total">
    </el-pagination>
</div>
</div>
</template>

<script>
export default {
	props:['param','radio','checked'],
  data () {
    return {
      search:'',
      tableData: [],
      total:0,
      currentPage:0,
			selected:[]
    }
  },
  components:{
  },
  methods:{
    async listData () {
			this.param.content.where.condition = this.search
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
		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
		},
		onSelect () {
			this.$emit('onSelect',this.selected)
		},
    closeTag (item) {
      this.selected = this.selected.filter(e=>{
        return e.userid !== item.userid
      })
    }
  },
  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>