<template>
|
<el-table
|
ref="multipleTable"
|
:data="newTableList"
|
:border="true"
|
fit
|
height="59vh"
|
@sort-change="sortChange"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
type="selection"
|
align="center"
|
width="55">
|
</el-table-column>
|
<el-tableColumn
|
type="index"
|
prop="index"
|
label="序号"
|
:index="snMethod"
|
:fit="true"
|
width="80px"
|
align="center"
|
/>
|
<el-table-column
|
type="poto"
|
prop="imgUrl"
|
label="人员图片"
|
align="center"
|
width="80"
|
>
|
<template slot-scope="scope">
|
<div class="flex-center">
|
<httpImg
|
:src="scope.row.imgUrl"
|
width="50px"
|
height="50px"
|
alt
|
/>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
title="username"
|
prop="userInfo"
|
label="人员信息"
|
align="center"
|
width="180"
|
>
|
<template slot-scope="scope">
|
<div class="media d-flex align-items-center">
|
<div class="media-body line-height-condenced ml-3">
|
<div class="text-dark">{{scope.row.userInfo}}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="taskName"
|
label="所属底库"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<div class="media d-flex align-items-center">
|
<div class="media-body line-height-condenced ml-3">
|
<div class="text-dark"
|
:title="scope.row.baseInfoName">
|
{{scope.row.taskName}}
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
label="加入布控时间"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<div class="media d-flex align-items-center">
|
<div class="media-body line-height-condenced ml-3">
|
<div class="text-dark">{{$moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="source"
|
label="添加方式"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<div class="media d-flex align-items-center">
|
<div class="media-body line-height-condenced ml-3">
|
<div class="text-dark">{{scope.row.sourceName}}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- 自定义title select -->
|
<el-tableColumn
|
label="布控状态"
|
align="center"
|
:render-header="renderCtrlState"
|
sortable="custom"
|
prop="isControl"
|
/>
|
<el-table-column
|
prop="createBy"
|
label="操作人"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<div class="media d-flex align-items-center">
|
<div class="media-body line-height-condenced ml-3">
|
<div class="text-dark">{{scope.row.createBy}}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-tableColumn label="操作" align="center">
|
<template slot-scope="scope">
|
<div @click.stop>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="$emit('stop',scope.row)"
|
authority="sys:attendce:catchImg"
|
>停止布控</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="$emit('del',scope.row)"
|
authority="sys:attendce:catchImg"
|
>删除人员</fButton>
|
</div>
|
</template>
|
</el-tableColumn>
|
</el-table>
|
</template>
|
<script>
|
import { Table, TableColumn } from 'element-ui'
|
export default {
|
name: 'taskTable',
|
metaInfo: {
|
title: '布控任务'
|
},
|
props: {
|
total: {
|
type: Number,
|
default: 0
|
},
|
activePage: {
|
type: Number,
|
default: 1
|
},
|
pageSize: {
|
type: Number,
|
default: 10
|
},
|
tableList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
selectOpts: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
selectVal: {
|
type: String,
|
default: ''
|
}
|
},
|
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
|
}
|
}
|
if (item.source === 0) {
|
item.sourceName = '从待布控选择'
|
}
|
if (item.source === 1) {
|
item.sourceName = '从平台选择'
|
}
|
if (item.source === 2) {
|
item.sourceName = '从底库选择'
|
}
|
// userInfo 拼接用户信息
|
if (item.sex > -1) {
|
item.sex = item.sex ? '男' : '女'
|
}
|
const arr = ['username', 'sex', '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: {
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
/* 表格表头渲染 start */
|
/* eslint-disable */
|
renderCtrlState(h, { column, $index }) {
|
// console.log(this, ' this')
|
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()
|
}
|
},
|
handleSelectionChange(val) {
|
this.$emit('handleSelectionChange', val)
|
this.multipleSelection = val
|
},
|
/** 停止布控 */
|
stopCtrl(){
|
|
},
|
/** 删除此人 */
|
delPer(){
|
|
}
|
},
|
watch:{
|
tableList:{
|
handler:function(newVal,oldVal){
|
if(newVal !== oldVal && newVal.length !== 0){
|
console.log(newVal,'newVal')
|
}
|
},
|
deep:true
|
}
|
},
|
components: {
|
elTable: Table,
|
elTableColumn: TableColumn
|
}
|
}
|
</script>
|
