|
|
@@ -0,0 +1,213 @@
|
|
|
+<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}}</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}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <small style="color:#999999ad;margin-top:10px">活动类型:{{ item.type?item.type:"暂无" }} 地址:{{ item.address?item.address:"暂无" }}</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="text" style="margin-top:16px;float:right" @click="onCancel">取 消</el-button>
|
|
|
+ <el-button size="mini" type="primary" style="margin-top:16px;float:right;margin-right:10px" @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="params.content.pageSize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props:['radio','checked'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ search:'',
|
|
|
+ tableData: [],
|
|
|
+ total:0,
|
|
|
+ currentPage:0,
|
|
|
+ selected:[],
|
|
|
+ params: {
|
|
|
+ "id":20221101095102,
|
|
|
+ "content": {
|
|
|
+ 'isAll':0,
|
|
|
+ "pageNumber":1,
|
|
|
+ "pageSize":20,
|
|
|
+ "where": {
|
|
|
+ 'condition':''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async listData () {
|
|
|
+ this.params.content.where.condition = this.search
|
|
|
+ const res = await this.$api.requested(this.params)
|
|
|
+ this.tableData = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.pageNumber
|
|
|
+ console.log(this.tableData);
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.params.content.pageSize = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.params.content.pageNumber = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ clickMenber (item) {
|
|
|
+ if (this.radio) {
|
|
|
+ this.selected = []
|
|
|
+ }
|
|
|
+ let _isSame = this.selected.some(m=>item.sat_campaignid === m.sat_campaignid)
|
|
|
+ if (!_isSame) {
|
|
|
+ this.selected.push(item)
|
|
|
+ } else {
|
|
|
+ this.selected = this.selected.filter(e=>{
|
|
|
+ return e.sat_campaignid !== item.sat_campaignid
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showSelelctIcon (item) {
|
|
|
+ let _isSame = this.selected.some(m=>item.sat_campaignid === m.sat_campaignid)
|
|
|
+ return _isSame
|
|
|
+ },
|
|
|
+ onSelect () {
|
|
|
+ this.$emit('onSelect',this.selected)
|
|
|
+ },
|
|
|
+ closeTag (item) {
|
|
|
+ this.selected = this.selected.filter(e=>{
|
|
|
+ return e.sat_campaignid !== item.sat_campaignid
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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>
|