<template>
|
<div>
|
<div class="flex-center">
|
<upload-drag
|
limitTypes=".jpg,.png"
|
limitSize=""
|
uploadBtntext="上传图片"
|
uploadBtnIcon
|
:isDrag="true"
|
@addFilesBaBackFN="addFiles"
|
@successFN="getPersonList"
|
/>
|
<!-- <upload-common
|
limitTypes=".jpg,.png"
|
uploadBtntext="上传图片"
|
></upload-common> -->
|
</div>
|
<div class="list mt20" v-if="uploadSuList.length !== 0">
|
<!-- 布控列表 start -->
|
<div class="px-4 py-4 person-list">
|
<div class="row">
|
<div
|
class="col-lg-3 col-md-4 col-sm-6 pb-2"
|
v-for="(item,index) in uploadSuList"
|
:key="index"
|
>
|
<div class="person-list-item px-2 py-3 border">
|
<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>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 布控列表 end -->
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Table, TableColumn, Row, Col, Button, Input, Checkbox } from 'element-ui'
|
import uploadDrag from './uploadDrag'
|
import uploadCommon from './uploadCommon'
|
export default {
|
props: {
|
|
},
|
components: {
|
elCheckbox: Checkbox,
|
elTable: Table,
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
elInput: Input,
|
elTableColumn: TableColumn,
|
uploadDrag,
|
uploadCommon
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
data() {
|
return {
|
/** 上传成功的list */
|
uploadSuList: []
|
}
|
},
|
methods: {
|
/** 上传图片的回调 */
|
addFiles(data) {
|
console.log(data, 'data 上传图片')
|
if (data) {
|
if (data && data.fileList.length !== 0) {
|
data.fileList.forEach(item => {
|
this.$set(item, 'isCheck', false)
|
this.$set(item, 'dataType', 'uploadSuList')
|
this.$set(item, 'imgUrl', item.path)
|
})
|
this.uploadSuList = data.fileList
|
console.log(this.uploadSuList, 'this.uploadSuList')
|
}
|
}
|
},
|
/** 上传成功后加载图片列表 */
|
getPersonList(data) {
|
console.log(data, 'data getPersonList')
|
},
|
handleChange(data) {
|
console.log(data, '从上传图片中选择')
|
this.$emit('handleChange', data)
|
}
|
},
|
mounted() {
|
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.list{
|
}
|
.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>
|
