<template>
|
<el-table
|
ref="multipleTable"
|
:data="$attrs.tableList"
|
:border="true"
|
fit
|
height="59vh"
|
@sort-change="sortChange"
|
@selection-change="handleSelectionChange"
|
>
|
<el-tableColumn
|
type="index"
|
prop="index"
|
label="序号"
|
:index="snMethod"
|
:fit="true"
|
width="80px"
|
align="center"
|
/>
|
<el-tableColumn label="布控任务" sortable="custom" prop="name" align="center"/>
|
<el-tableColumn label="开始时间" sortable="custom" prop="startTime" align="center"/>
|
<el-tableColumn label="截至时间" sortable="custom" prop="endTime" align="center"/>
|
<!-- 自定义title select start -->
|
<el-table-column label="布控状态" :render-header="renderCtrlState" sortable="custom" prop="statusName">
|
</el-table-column>
|
<el-tableColumn label="布控人数" sortable="custom" prop="personCount" align="center"/>
|
<!-- 自定义title select end -->
|
<el-table-column label="布控来源" :render-header="renderCtrlData" sortable="custom" prop="source"/>
|
|
<el-tableColumn label="布控范围" sortable="custom" prop="scope" align="center">
|
<template slot-scope="scope">
|
<div class="media flex-center">
|
<div class="d-block fas fa-map-marker-alt" style="color:#35bde7" @click="toMap(scope.row)"></div>
|
<div class="line-height-condenced ml-3" @click="showlayer(scope.row)">{{scope.row.scope}}</div>
|
</div>
|
</template>
|
</el-tableColumn>
|
<el-table-column label="操作人" sortable="custom" prop="updateBy" align="center"/>
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<div @click.stop>
|
<fButton
|
type="link"
|
title="编辑布控"
|
style="padding:2px;"
|
@click.native="$router.push({path:'/drogPerson',query:{isEdit:true,rowData:scope.row}})"
|
authority="sys:attendce:catchImg"
|
>编辑</fButton>
|
<fButton
|
type="link"
|
title="编辑人员"
|
style="padding:2px;"
|
@click.native="$router.push({path:'/person',query:{rowData:scope.row}})"
|
authority="sys:attendce:catchImg"
|
>人员</fButton>
|
<fButton
|
type="link"
|
title="查看详情"
|
style="padding:2px;"
|
@click.native="$router.push({path:'/cdetail',query:{rowData:scope.row}})"
|
authority="sys:attendce:catchImg"
|
>详情</fButton>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
<script>
|
import { Table, TableColumn } from 'element-ui'
|
import rangeTree from './rangeTree'
|
import {
|
findScopeDetailByTaskId
|
} from '@/server/task.js'
|
export default {
|
name: 'taskTable',
|
metaInfo: {
|
title: '布控任务'
|
},
|
props: ['total', 'activePage', 'pageSize'],
|
inheritAttrs: false,
|
data() {
|
return {}
|
},
|
computed: {},
|
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.$attrs.selectVal}
|
onChange={ev => {
|
this.$emit('selectChange', ev.target.value,'ctrolStatus')
|
console.log(ev.target.value, 'select---data')
|
}}
|
>
|
{this.$attrs.selectOpts &&
|
this.$attrs.selectOpts.map(item => {
|
return <option value={item.value}>{item.name}</option>
|
})}
|
</select>
|
</div>
|
)
|
},
|
renderCtrlData(h, { column, $index }) {
|
return (
|
<div
|
class="vertical-middle"
|
onClick={e => {
|
e.stopPropagation()
|
return false
|
}}
|
>
|
<select
|
value={this.$attrs.sourceVal}
|
onChange={ev => {
|
this.$emit('selectChange', ev.target.value,'ctrolSource')
|
console.log(ev.target.value, 'select---data')
|
}}
|
>
|
{this.$attrs.selectOpts2 &&
|
this.$attrs.selectOpts2.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
|
},
|
/** 布控详情的地图 */
|
toMap(data){
|
console.log(this.$router,'toMap')
|
this.$router.push({
|
path:'/cdetail',
|
query:{
|
rowData:data,
|
isMap:true
|
}
|
|
})
|
},
|
/** layer弹框 */
|
async showlayer(data){
|
console.log(data,'data')
|
let res = await findScopeDetailByTaskId({taskId:data.id})
|
let treelist = []
|
if(res && res.success){
|
if(res.data && res.data.length !== 0){
|
treelist = res.data
|
}
|
}else{
|
this.$toast({
|
type:'error',
|
message:'查询布控范围失败！'
|
})
|
return false
|
}
|
this.$layer.iframe({
|
content: {
|
content: rangeTree, //传递的组件对象
|
parent: this,//当前的vue对象
|
data:{
|
data:JSON.stringify(treelist),
|
}//props
|
},
|
shade:false,
|
area:['400px','490px'],
|
title:'布控范围'
|
})
|
}
|
},
|
components: {
|
elTable: Table,
|
elTableColumn: TableColumn,
|
rangeTree: rangeTree
|
}
|
}
|
</script>
|
