<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="50px"
|
align="center"
|
/>
|
<el-table-column label="人员图片" prop="imgUrl">
|
<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="createTime">
|
<template
|
slot-scope="scope"
|
>{{$moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</template>
|
</el-table-column>
|
|
<!-- 自定义title select start -->
|
<el-table-column
|
label="布控状态"
|
:render-header="renderCtrlState"
|
sortable="custom"
|
prop="isControl"
|
>
|
<template slot-scope="scope">{{scope.row.isControl | getStateText}}</template>
|
</el-table-column>
|
<!-- 自定义title select end -->
|
<el-table-column label="布控任务" sortable="custom" prop="taskName"/>
|
<!-- -->
|
<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
|
v-if="scope.row.isControl==='布控中'"
|
type="link"
|
style="padding:2px;"
|
@click.native="$emit('stop',scope.row)"
|
authority="ctrl:person:stop"
|
>停止布控</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'
|
let selectList = []
|
export default {
|
name: 'tableAlready',
|
metaInfo: {
|
title: '已布控人员'
|
},
|
props: [
|
'total',
|
'activePage',
|
'pageSize',
|
'tableList',
|
'selectOpts',
|
'selectVal',
|
'multipleSelection'
|
],
|
inheritAttrs: false,
|
data() {
|
return {}
|
},
|
computed: {
|
/* newTableList(){
|
let list = this.tableList.map(item => {
|
// 处理布控状态 语义化
|
for (let s of this.selectOpts) {
|
if (item.isControl === s.value) {
|
item.isControl = s.name
|
}
|
}
|
// userInfo 拼接用户信息
|
if (item.sex > -1) {
|
item.sexName = item.sex ? '男' : '女'
|
}
|
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
|
} */
|
},
|
filters: {
|
getStateText(val) {
|
if (!val) {
|
return val
|
}
|
// 处理布控状态 语义化
|
for (let s of selectList) {
|
if (val === s.value) {
|
return s.name
|
}
|
}
|
return val
|
},
|
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
|
}
|
},
|
methods: {
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
/* 表格表头渲染 start */
|
/* eslint-disable */
|
renderCtrlState(h, { column, $index }) {
|
return (
|
<div
|
class="vertical-middle"
|
onClick={e => {
|
e.stopPropagation()
|
return false
|
}}
|
>
|
<select
|
value={this.selectVal}
|
onChange={ev => {
|
this.$emit('selectChange', ev.target.value)
|
}}
|
>
|
{this.selectOpts &&
|
this.selectOpts.map(item => {
|
return <option value={item.value}>{item.name}</option>
|
})}
|
</select>
|
</div>
|
)
|
},
|
/* 表格表头渲染 end */
|
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() {
|
selectList = this.selectOpts
|
},
|
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>
|
