<template>
|
<!-- 布控列表 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 newTableList"
|
:key="index"
|
>
|
<div class="person-list-item d-flex px-2 py-3 border">
|
<div class="person-list-item-check pr-2">
|
<el-checkbox v-model="item.checked" @change="checkboxChange"/>
|
</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.isControl" v-if="tableType==='already'">{{item.isControl}}</p>
|
<h6 class="mb-1 text-danger" :title="item.taskName">{{item.taskName}}</h6>
|
<p class="mb-1" :title="item.userInfo">{{item.userInfo}}</p>
|
<p class="mb-1" :class="tableType!=='already'?'visibility':'none'">已布控占位</p>
|
<div class="btns">
|
<fTemplate authority="ctrl:person:addCtrl">
|
<i class="ion ion-ios-add-circle-outline" @click="$emit('add',item)"></i>
|
</fTemplate>
|
<fTemplate authority="ctrl:person:stop">
|
<i
|
v-if="item.isControl==='布控中'"
|
class="far fa-stop-circle"
|
@click="$emit('stop',item)"
|
></i>
|
</fTemplate>
|
<fTemplate authority="ctrl:person:del">
|
<i class="ion ion-md-close" @click="$emit('del',item)"></i>
|
</fTemplate>
|
<fTemplate authority="ctrl:person:editPerson">
|
<i class="far fa-edit" @click="$emit('edit',item)"></i>
|
</fTemplate>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pt15 pb20">
|
<b-pagination
|
class="justify-content-center justify-content-sm-end m-0"
|
v-if="total"
|
v-model="activePage"
|
:total-rows="total"
|
:per-page="pageSize"
|
/>
|
</div>
|
</div>
|
<!-- 布控列表 end -->
|
</template>
|
<script>
|
import { Checkbox } from 'element-ui'
|
export default {
|
name: 'CtrlTask',
|
metaInfo: {
|
title: '布控人员'
|
},
|
props: [
|
'total',
|
'activePage',
|
'pageSize',
|
'tableList',
|
'selectOpts',
|
'tableType',
|
'multipleSelection'
|
],
|
data() {
|
return {}
|
},
|
computed: {
|
newTableList() {
|
let list = this.tableList.map(item => {
|
item.checked = this.multipleSelection.includes(item.id)
|
// 处理布控状态 语义化
|
for (let s of this.selectOpts) {
|
if (item.isControl === s.value) {
|
item.isControl = s.name
|
}
|
}
|
// userInfo 拼接用户信息
|
if (item.sex > -1) {
|
item.sexName = item.sex > 0 ? '男' : item.sex === 0 ? '女' : ''
|
}
|
const arr = ['username', 'sexName', 'idCard', 'mobile']
|
let userInfo = ''
|
for (let [index, name] of arr.entries()) {
|
if (item[name]) {
|
userInfo += item[name] + `${index !== arr.length - 1 ? '/' : ''}`
|
}
|
}
|
item.userInfo = userInfo
|
return item
|
})
|
return list
|
}
|
},
|
methods: {
|
checkboxChange(data) {
|
const ids = this.newTableList
|
.filter(item => item.checked)
|
.map(item => item.id)
|
this.$emit('handleTableCheck', ids)
|
console.log(data, 'check', ids)
|
}
|
},
|
watch: {
|
activePage(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.handleSearch()
|
}
|
}
|
},
|
components: {
|
elCheckbox: Checkbox
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.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;
|
}
|
}
|
}
|
}
|
</style>
|
