164 lines
3.5 KiB
Vue
164 lines
3.5 KiB
Vue
<template>
|
|
<section class="AiUserPicker">
|
|
<div v-if="$slots.default " @click="handleSelect">
|
|
<slot/>
|
|
</div>
|
|
<div class="AiWechatSelecter-userlist" v-else>
|
|
<div class="user-item" v-for="(item, index) in value" :key="index">
|
|
<img :src="getAvatar(item)">
|
|
<div class="itemLabel" v-text="item.name"/>
|
|
<i class="iconfont iconwarning" @click="removeUser(index)"/>
|
|
</div>
|
|
<div class="user-add" @click="handleSelect">
|
|
<div class="userlist-add__icon">
|
|
<i class="el-icon-plus"/>
|
|
</div>
|
|
<span>选择</span>
|
|
</div>
|
|
</div>
|
|
<ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @close="selected=[]">
|
|
<ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1" valueObj extra="mobile"/>
|
|
</ai-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "AiUserPicker",
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change',
|
|
},
|
|
props: {
|
|
value: {default: () => []},
|
|
instance: Function,
|
|
multiple: {default: true},
|
|
props: {
|
|
default: () => ({
|
|
label: 'name',
|
|
id: 'id'
|
|
})
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
dialog: false,
|
|
selected: [],
|
|
}
|
|
},
|
|
methods: {
|
|
removeUser(i) {
|
|
let list = this.$copy(this.value)
|
|
list.splice(i, 1)
|
|
this.$emit("change", list)
|
|
},
|
|
submit() {
|
|
this.$emit("change", this.selected)
|
|
this.dialog = false
|
|
},
|
|
handleSelect() {
|
|
this.selected = this.$copy(this.value)
|
|
this.dialog = true
|
|
},
|
|
getAvatar(row){
|
|
return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiUserPicker {
|
|
.AiWechatSelecter-userlist {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.user-add {
|
|
margin-bottom: 6px;
|
|
|
|
.userlist-add__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 4px;
|
|
border-radius: 2px;
|
|
border: 1px solid #CCCCCC;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
i {
|
|
color: #CCCCCC;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
color: #888888;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.user-item {
|
|
position: relative;
|
|
margin-bottom: 6px;
|
|
margin-right: 16px;
|
|
width: 40px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
img {
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 4px;
|
|
border-radius: 2px;
|
|
border: 1px solid #CCCCCC;
|
|
}
|
|
|
|
i {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 2px;
|
|
font-size: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transform: translate(40%, -100%);
|
|
height: 16px;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.itemLabel {
|
|
display: block;
|
|
width: 60px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
color: #888888;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|