<template>
|
<div>
|
<el-table
|
ref="multipleTable"
|
:data="tableList"
|
:border="true"
|
fit
|
height="65vh"
|
@sort-change="sortChange"
|
@select-all="handleTableCheck"
|
@select="handleTableCheck"
|
>
|
<el-table-column type="selection" width="35"></el-table-column>
|
<el-table-column
|
type="index"
|
prop="index"
|
label="序号"
|
:index="snMethod"
|
:fit="true"
|
width="80px"
|
align="center"
|
/>
|
<el-table-column label="人员图片" prop="pname">
|
<template slot-scope="scope">
|
<div class="flex-center">
|
<httpImg :src="scope.row.imgUrl" width="100px" height="100px" alt/>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="人员信息" prop="userInfo">
|
<template slot-scope="scope">
|
<div>
|
<span :id="scope.row.id">{{scope.row | getUserInfo}}</span>
|
<b-tooltip
|
:target="scope.row.id"
|
placement="bottom"
|
delay="100"
|
class="text-left"
|
>{{scope.row | getUserInfo}}</b-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="所属底库" sortable="custom" prop="dbInfos">
|
<template slot-scope="scope">
|
<div>
|
<div v-for="(item,index) in scope.row.dbInfo" :key="index">{{item.cluId}}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="加入时间" sortable="custom" prop="createTime">
|
<template
|
slot-scope="scope"
|
>{{$moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</template>
|
</el-table-column>
|
<el-table-column label="操作人" sortable="custom" prop="createBy"/>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div @click.stop>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="$emit('add',scope.row)"
|
authority="ctrl:person:addCtrl"
|
>加入布控</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="$emit('del',scope.row)"
|
authority="ctrl:person:del"
|
>删除此人</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="$emit('edit',scope.row)"
|
authority="ctrl:person:editPerson"
|
>编辑信息</fButton>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<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>
|
</template>
|
<script>
|
import { Table, TableColumn } from 'element-ui'
|
export default {
|
name: 'tableTodo',
|
metaInfo: {
|
title: '待控人员'
|
},
|
props: ['total', 'activePage', 'pageSize', 'tableList', 'multipleSelection'],
|
inheritAttrs: false,
|
data() {
|
return {}
|
},
|
computed: {},
|
filters: {
|
getUserInfo(item) {
|
if (!item) {
|
return item
|
}
|
// 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 ? '/' : ''}`
|
}
|
}
|
return userInfo
|
},
|
getdbInfos(item) {
|
if (!item) {
|
return item
|
}
|
const json = JSON.parse(item)
|
return json
|
}
|
},
|
methods: {
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
sortChange(data) {
|
this.$emit('sortChange', data)
|
},
|
/* 多选 */
|
toggleSelection(rows) {
|
if (rows) {
|
rows.forEach(row => {
|
this.$refs.multipleTable.toggleRowSelection(row)
|
})
|
} else {
|
this.$refs.multipleTable.clearSelection()
|
}
|
},
|
handleTableCheck(val) {
|
const ids = val.map(item => item.id)
|
this.$emit('handleTableCheck', ids)
|
}
|
},
|
created() {},
|
beforeUpdate() {
|
// check 初始化
|
const rows = this.tableList.filter(item =>
|
this.multipleSelection.includes(item.id)
|
)
|
this.$nextTick(() => {
|
if (rows) {
|
rows.forEach(row => {
|
this.$refs.multipleTable.toggleRowSelection(row, true)
|
})
|
}
|
})
|
},
|
components: {
|
elTable: Table,
|
elTableColumn: TableColumn
|
}
|
}
|
</script>
|
