<template>
|
<div class="out-div">
|
<el-input placeholder="底库名称/姓名" v-model="searchName" clearable>
|
<el-button slot="append" icon="el-icon-search" @click.native="handleSearch"></el-button>
|
</el-input>
|
<!-- 布控列表 start -->
|
<div class="px-4 py-4 person-list">
|
<div class="row">
|
<div
|
class="col-lg-6 col-md-6 col-sm-12 pb-2"
|
v-for="(item,index) in personList"
|
:key="index"
|
>
|
<div class="person-list-item px-2 py-3 border">
|
<!-- <div class="person-list-item-close" @click="delOne(item)">
|
<i class="ion d-block ion-md-close"></i>
|
</div> -->
|
<div class="d-flex">
|
<div class="person-list-item-check pr-2">
|
<el-checkbox v-model="item.isCheck" @change="handleChange(item)"/>
|
</div>
|
<div class="person-list-item-img flex-center">
|
<httpImg :src="item.imgUrl" width="100px" height="100px" alt/>
|
</div>
|
<div class="person-list-item-info px-2">
|
<p class="mb-1" :title="item.createTime">{{item.createTime}}</p>
|
<p class="mb-1" :title="item.address">{{item.address}}</p>
|
<h6 class="mb-1 text-danger" :title="item.taskName">{{item.taskName}}</h6>
|
<p class="mb-1" :title="item.userInfo">{{item.userInfo}}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 布控列表 end -->
|
</div>
|
</template>
|
<script>
|
import { Table, TableColumn, Row, Col, Button, Input, Checkbox } from 'element-ui'
|
export default {
|
props: {
|
personList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
components: {
|
elCheckbox: Checkbox,
|
elTable: Table,
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
elInput: Input,
|
elTableColumn: TableColumn
|
},
|
data() {
|
return {
|
/** 输入的库名或者姓名 */
|
searchName: '',
|
isCheck: false
|
}
|
},
|
computed: {
|
|
},
|
methods: {
|
handleSearch() {
|
this.$emit('handleSearch', {searchName: this.searchName})
|
},
|
resetList() {
|
this.$emit('resetList')
|
},
|
handleChange(item) {
|
console.log(item, '从平台人员库中选择')
|
this.$emit('handleChange', item)
|
}
|
},
|
mountes: {
|
|
},
|
watch: {
|
searchName: function(newVal, oldVal) {
|
if (newVal !== oldVal && newVal === '') {
|
this.resetList()
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.out-div{
|
width: 100%;
|
height: 100%;
|
}
|
.person-list {
|
.person-list-item {
|
overflow: auto;
|
.person-list-item-check {
|
display: flex;
|
align-items: center;
|
}
|
.person-list-item-img {
|
flex: 1 1 auto;
|
text-align: center;
|
}
|
.person-list-item-info {
|
flex: 1 1 auto;
|
h6 {
|
font-size: 16px;
|
font-weight: 900;
|
}
|
h6,
|
p {
|
max-width: 100px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 0 auto;
|
}
|
p.visibility {
|
visibility: hidden;
|
}
|
p.none {
|
display: none;
|
}
|
.btns {
|
max-width: 100px;
|
margin: 0 auto;
|
}
|
.btns span {
|
padding: 0 2px;
|
font-size: 15px;
|
cursor: pointer;
|
color: #35bde7;
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
}
|
.person-list-item-close{
|
float: right;
|
}
|
}
|
}
|
</style>
|
