<template>
|
<div class="DB-list">
|
<div class="hander d-flex pb-2">
|
<el-input placeholder="布控任务" class="searchName" v-model="searchName">
|
<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
</el-input>
|
<span class="fa fa-chevron-left f30 cursor-pointer pl-2 pt-1" @click="$emit('toggleSidebar')"></span>
|
</div>
|
<div class="search d-flex">
|
<div class="row">
|
<div class="col">
|
<el-select v-model="state" placeholder="请选择状态" @change="handleSearch">
|
<el-option
|
v-for="item in stateList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
:disabled="item.disabled"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="col">
|
<el-select v-model="source" placeholder="请选择来源" @change="handleSearch">
|
<el-option
|
v-for="item in sourceList"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
:disabled="item.disabled"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="pr-2">
|
<span
|
v-if="sortType==='asc'"
|
class="fa fa-sort-amount-down f20 cursor-pointer pt-2 text-primary"
|
title="降序"
|
@click="sortType='desc';handleSearch()"
|
></span>
|
<span
|
v-else
|
class="fa fa-sort-amount-up f20 cursor-pointer pt-2 text-primary"
|
title="升序"
|
@click="sortType='asc';handleSearch()"
|
></span>
|
</div>
|
</div>
|
</div>
|
<div class="list">
|
<div
|
class="list-item px-2 py-2 mt-2 mr-4"
|
:class="activedkey === ''?'active':''"
|
@click="handleCheck('')"
|
>
|
<h5 class="mb-0 font-weight-bold text-center f14">全部</h5>
|
</div>
|
<ul class="pb-2 mt-1 list-box">
|
<li
|
class="list-item px-2 py-2 mb-2 mr-2"
|
:class="activedkey === item.id?'active':''"
|
v-for="(item,index) in tableList"
|
:key="index"
|
@click="handleCheck(item)"
|
>
|
<h5 class="mb-2 f18 font-weight-bold" :title="item.source">{{item.name}}</h5>
|
<P class="m-0">{{item.startTime}} - {{item.endTime}}</P>
|
</li>
|
</ul>
|
<div class="pt15 pb20">
|
<b-pagination
|
class="justify-content-sm-end m-0"
|
v-if="total"
|
v-model="activePage"
|
:total-rows="total"
|
:per-page="pageSize"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Input, Button, Select, Option } from 'element-ui'
|
import { findTaskList, findSourceList } from '@/server/task.js'
|
export default {
|
name: 'leftList',
|
data() {
|
return {
|
searchName: '',
|
/** 排序字段 */
|
sortName: 'startTime',
|
sortType: 'desc', // 'asc'升序
|
state: null,
|
stateList: [
|
{
|
label: '全部状态',
|
value: null
|
},
|
{
|
label: '未开始',
|
value: 0
|
},
|
{
|
label: '布控中',
|
value: 1
|
},
|
{
|
label: '已失效',
|
value: -1
|
}
|
],
|
source: '',
|
sourceList: [
|
{
|
name: '全部来源',
|
value: ''
|
}
|
],
|
activedkey: '',
|
total: 10,
|
pageSize: 10,
|
activePage: 1,
|
tableList: []
|
}
|
},
|
computed: {},
|
methods: {
|
/** 查询布控来源 */
|
async findSourceList() {
|
let res = await findSourceList()
|
if (res && res.success) {
|
this.sourceList = [...this.sourceList, ...res.data.selectOpts2]
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询布控来源失败！'
|
})
|
}
|
},
|
async getList() {
|
let json = {
|
startTime: '',
|
endTime: '',
|
likeName: this.searchName,
|
status: this.state, // 状态
|
source: this.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.sourceList) {
|
if (item.status === s.value) {
|
this.$set(item, 'statusName', s.name)
|
break
|
}
|
}
|
})
|
}
|
}
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询布控任务列表失败！'
|
})
|
}
|
},
|
/* 检索事件 */
|
handleSearch() {
|
console.log('这里是侧边栏检索---')
|
this.getList()
|
},
|
handleCheck(val) {
|
this.activedkey = val && val.id ? val.id : ''
|
this.$emit('check-item', this.activedkey)
|
}
|
},
|
created() {
|
this.findSourceList()
|
this.handleSearch()
|
},
|
watch: {},
|
components: {
|
elInput: Input,
|
elButton: Button,
|
elSelect: Select,
|
elOption: Option
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.DB-list {
|
.hander {
|
.el-button--default {
|
height: 36px;
|
background-color: #fff;
|
border-left: 0;
|
font-size: 20px !important;
|
padding: 6px 10px;
|
margin-top: -6px;
|
color: #35bde7;
|
font-weight: 900 !important;
|
}
|
}
|
.list {
|
ul,
|
li {
|
padding: 0;
|
margin: 0;
|
list-style: none;
|
}
|
ul.list-box {
|
margin-top: 20px;
|
height: 53vh;
|
overflow: auto;
|
}
|
.list-item {
|
background: #fdfeff;
|
border-radius: 5px;
|
cursor: pointer;
|
transition: 0.4s all;
|
&:hover {
|
background: #f8f8f8;
|
}
|
&.active {
|
background: #35bde7;
|
color: #fff;
|
}
|
}
|
}
|
}
|
</style>
|
<style>
|
.searchName .el-input-group--append.el-input__inner {
|
border-right: 0 !important;
|
}
|
</style>
|
