<template>
|
<div>
|
<b-card no-body class="mx-4 mt-4">
|
<div class="px-4 py-4">
|
<h4 class="font-weight-bold mb-4">
|
<!-- <span class="text-muted font-weight-light">模版设置 /</span> -->
|
布控任务
|
</h4>
|
<div class="row">
|
<div class="col-lg-3 col-md-4">
|
<el-date-picker
|
style="width:100%"
|
v-model="dateTime"
|
format="yyyy/MM/dd HH:mm:ss"
|
value-format="yyyy/MM/dd HH:mm:ss"
|
type="datetimerange"
|
align="right"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:clearable="false"
|
@change="setDataTimeVal"
|
/>
|
</div>
|
<!-- 检索框-->
|
<div class="col-lg-2 col-md-3">
|
<el-input
|
placeholder="布控任务/布控范围"
|
autocomplete="off"
|
width="100%"
|
v-model="searchName"
|
@keyup.enter.native="handleSearch"
|
/>
|
</div>
|
<div class="col-lg-1 col-md-2">
|
<b-btn variant="primary" class="mr10" @click="handleSearch">搜索</b-btn>
|
</div>
|
<div class="col-lg-6 col-md-3 text-right">
|
<fButton
|
type="primary"
|
@click.native="$router.push({path:'/drogPerson',query:{isEdit:false}})"
|
authority="sys:attendance:export"
|
class="pl30 pr30"
|
>新增布控</fButton>
|
</div>
|
</div>
|
</div>
|
<!-- 布控列表 start -->
|
<div class="pl20 pr20 pb30 overflow-auto">
|
<task-table
|
:selectOpts="selectOpts"
|
:selectVal="ctrolStatus"
|
:selectOpts2="selectOpts2"
|
:sourceVal="ctrolSource"
|
:tableList="newTableList"
|
:total="total"
|
:activePage="activePage"
|
:pageSize="pageSize"
|
@sortChange="handleSortChange"
|
@selectChange="selectChange"
|
@handleSelectionChange="handleSelectionChange"
|
></task-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>
|
</b-card>
|
</div>
|
</template>
|
<script>
|
import {
|
Table,
|
TableColumn,
|
DatePicker,
|
Select,
|
Option,
|
Row,
|
Col,
|
Button,
|
Input
|
} from 'element-ui'
|
import taskTable from './components/taskTable'
|
import {
|
findTaskList, findSourceList
|
} from '@/server/task.js'
|
let allMinDate = ''
|
export default {
|
name: 'CtrlTask',
|
metaInfo: {
|
title: '布控任务'
|
},
|
data() {
|
return {
|
pickerOptions: {
|
disabledDate(time) {
|
if (allMinDate) {
|
return (
|
time.getTime() < Date.now() ||
|
time < new Date(allMinDate.getTime() - 3600 * 1000 * 24 * 90) ||
|
time > new Date(allMinDate.getTime() + 3600 * 1000 * 24 * 90)
|
)
|
}
|
return time.getTime() < Date.now()
|
},
|
onPick({ maxDate, minDate }) {
|
allMinDate = maxDate
|
}
|
|
},
|
/* 条件 */
|
searchName: '',
|
// 日期
|
dateTime: [],
|
/** 布控状态 */
|
ctrolStatus: null,
|
/** 布控来源 */
|
ctrolSource: '',
|
/* 表格数据 */
|
tableList: [{}, {}],
|
total: 10,
|
pageSize: 10,
|
activePage: 1,
|
/** 排序字段 */
|
sortName: '',
|
sortType: 'desc',
|
/** 表头的选择器 */
|
/** 布控状态数据源 */
|
selectOpts: [
|
{
|
name: '布控状态',
|
value: null
|
},
|
{
|
name: '未开始',
|
value: 0
|
},
|
{
|
name: '布控中',
|
value: 1
|
},
|
{
|
name: '已失效',
|
value: -1
|
}
|
],
|
/** 布控来源数据源 */
|
selectOpts2: [
|
{
|
name: '布控来源',
|
value: ''
|
}
|
]
|
}
|
},
|
computed: {
|
newTableList() {
|
return this.tableList
|
}
|
},
|
methods: {
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
return [
|
this.$moment(start).format('YYYY/MM/DD HH:mm:ss'),
|
this.$moment(end).format('YYYY/MM/DD HH:mm:ss')
|
]
|
},
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
/* 表格表头渲染 end */
|
setDataTimeVal(val) {
|
if (val === null) {
|
this.$toast({
|
type: 'error',
|
message: '抱歉，检索必须选择时间，已经为您重置近一个月的时间'
|
})
|
// 日期插件赋值
|
this.dateTime = this.getDateInit()
|
}
|
},
|
// 排序
|
handleSortChange(data) {
|
console.log(data, 'handleSortChange data')
|
if (data && data.column) {
|
this.sortName = data.prop
|
if (data.order === 'ascending') {
|
this.sortType = 'desc'
|
}
|
if (data.order === 'descending') {
|
this.sortType = 'asc'
|
}
|
console.log(this.sortName, 'this.sortName')
|
this.handleSearch()
|
}
|
},
|
// 布控select 选择
|
handleSelectionChange(val) {
|
console.log(val, 'val')
|
if (val) {
|
this.ctrolStatus = val
|
this.handleSearch()
|
}
|
},
|
/* 检索事件 */
|
async handleSearch() {
|
let json = {
|
startTime: this.dateTime[0],
|
endTime: this.dateTime[1],
|
likeName: this.searchName,
|
status: this.ctrolStatus,
|
source: '',
|
page: this.activePage,
|
size: this.pageSize,
|
sortName: this.sortName,
|
sortType: this.sortType
|
}
|
let res = await findTaskList(json)
|
if (res && res.success) {
|
if (res.data && res.data.taskList) {
|
this.tableList = res.data.taskList
|
if (this.tableList.length !== 0) {
|
this.tableList.forEach(item => {
|
for (let s of this.selectOpts) {
|
if (item.status === s.value) {
|
this.$set(item, 'statusName', s.name)
|
break
|
}
|
}
|
})
|
}
|
}
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询布控任务列表失败！'
|
})
|
}
|
},
|
/** 选择表头的选择事件 */
|
selectChange(value, type) {
|
console.log(value, 'selectChange', type)
|
if (type === 'ctrolStatus') {
|
this.ctrolStatus = Number(value)
|
}
|
if (type === 'ctrolSource') {
|
this.ctrolSource = value
|
}
|
this.handleSearch()
|
},
|
/** 查询布控来源 */
|
async findSourceList() {
|
let res = await findSourceList()
|
if (res && res.success) {
|
this.selectOpts2 = [...this.selectOpts2, ...res.data.selectOpts2]
|
console.log(this.selectOpts2, 'res.data.selectOpts2')
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询布控来源失败！'
|
})
|
}
|
}
|
},
|
created() {
|
// 日期插件赋值
|
this.dateTime = this.getDateInit()
|
this.findSourceList()
|
this.handleSearch()
|
},
|
watch: {
|
activePage(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.handleSearch()
|
}
|
}
|
},
|
components: {
|
elTable: Table,
|
elTableColumn: TableColumn,
|
elSelect: Select,
|
elOption: Option,
|
elInput: Input,
|
elRow: Row,
|
elCol: Col,
|
elDatePicker: DatePicker,
|
elButton: Button,
|
taskTable: taskTable
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
</style>
|
