271 lines
7.6 KiB
Vue
271 lines
7.6 KiB
Vue
<template>
|
|
<div class="main-container">
|
|
<div class="right_side">
|
|
<div class="content_wrap">
|
|
<div class="title_wrap">
|
|
<h2>任务管理</h2>
|
|
</div>
|
|
<div class="page_container">
|
|
<div class="grid_wrapper">
|
|
<table>
|
|
<tr>
|
|
<th>选中</th>
|
|
<th>序号</th>
|
|
<th>任务号</th>
|
|
<th>目标站点</th>
|
|
<th>任务状态</th>
|
|
<th>生成时间</th>
|
|
</tr>
|
|
<tr v-for="(e, i) in dataList" :key="i" @click="toRadio(e, i)">
|
|
<!-- <td>
|
|
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
|
|
</td> -->
|
|
<td><div class="selbox radio_uncheck" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
|
|
<td>{{i+1}}</td>
|
|
<td>{{e.task_code}}</td>
|
|
<td>{{e.next_point_code}}</td>
|
|
<td><span class="icon" :class="{bgred: e.task_status_name ==='生成未执行', bgyellow: (e.task_status_name ==='执行中' || e.task_status_name ==='完成')}"></span>{{e.task_status_name}}</td>
|
|
<td>{{e.create_time}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="buttons_wrapper">
|
|
<button class="button_control button_control_disabled" @click="toUp(dataList, selectIndex)"><p>任务上移</p></button>
|
|
<button class="button_control button_control_disabled" @click="toDown(dataList, selectIndex)"><p>任务下移</p></button>
|
|
<button class="button_control button_control_disabled" @click="toDel(selectIndex)"><p>任务取消</p></button>
|
|
<button class="button_control" @click="updateTask"><p>任务提交</p></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="content_wrap">
|
|
<div class="title_wrap">
|
|
<h2>任务管理</h2>
|
|
</div>
|
|
<div class="con1 grid_wrapper">
|
|
<table>
|
|
<tr class="t-head">
|
|
<th><div class="selbox"></div></th>
|
|
<th>序号</th>
|
|
<th>任务号</th>
|
|
<th>目标站点</th>
|
|
<th>任务状态</th>
|
|
<th>生成时间</th>
|
|
</tr>
|
|
<tr v-for="(e,index) in dataList" :key="e.task_uuid" @click="toRadio(e, index)">
|
|
<td><div class="selbox radio_uncheck" :class="{'radio_checked': pkId === e.task_uuid}"></div></td>
|
|
<td>{{index+1}}</td>
|
|
<td>{{e.task_code}}</td>
|
|
<td>{{e.next_point_code}}</td>
|
|
<td><span class="icon" :class="{bgred: e.task_status_name ==='生成未执行', bgyellow: (e.task_status_name ==='执行中' || e.task_status_name ==='完成')}"></span>{{e.task_status_name}}</td>
|
|
<td>{{e.create_time}}</td>
|
|
</tr>
|
|
</table>
|
|
<div class="subbar">
|
|
<button class="btn btn01" @click="toUp(dataList, selectIndex)">任务上移</button>
|
|
<button class="btn btn02" @click="toDown(dataList, selectIndex)">任务下移</button>
|
|
<button class="btn btn1" @click="toDel(selectIndex)">任务取消</button>
|
|
<button class="btn btn2" @click="updateTask">任务提交</button>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {queryTaskList, updateTask} from '@/config/getData.js'
|
|
export default {
|
|
name: 'TaskLists',
|
|
data () {
|
|
return {
|
|
selectObj: {},
|
|
selectIndex: '',
|
|
pkId: '',
|
|
pwd: '',
|
|
up: false,
|
|
down: false,
|
|
del: false,
|
|
dataList: []
|
|
// dataList: [
|
|
// {
|
|
// task_uuid: '01'
|
|
// },
|
|
// {
|
|
// task_uuid: '02'
|
|
// },
|
|
// {
|
|
// task_uuid: '03'
|
|
// },
|
|
// {
|
|
// task_uuid: '04'
|
|
// },
|
|
// {
|
|
// task_uuid: '05'
|
|
// },
|
|
// {
|
|
// task_uuid: '06'
|
|
// },
|
|
// {
|
|
// task_uuid: '07'
|
|
// },
|
|
// {
|
|
// task_uuid: '08'
|
|
// },
|
|
// {
|
|
// task_uuid: '09'
|
|
// },
|
|
// {
|
|
// task_uuid: '10'
|
|
// },
|
|
// {
|
|
// task_uuid: '11'
|
|
// },
|
|
// {
|
|
// task_uuid: '12'
|
|
// },
|
|
// {
|
|
// task_uuid: '13'
|
|
// }
|
|
// ]
|
|
}
|
|
},
|
|
created () {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
async initData () {
|
|
let res = await queryTaskList()
|
|
if (res.code === '1') {
|
|
this.dataList = res.result
|
|
} else {
|
|
this.toast(res.desc)
|
|
}
|
|
},
|
|
async updateTask () {
|
|
let res = await updateTask(this.dataList)
|
|
if (res.code === '1') {
|
|
this.toast(res.desc)
|
|
this.pkId = ''
|
|
this.selectObj = {}
|
|
this.initData()
|
|
} else {
|
|
this.toast(res.desc)
|
|
}
|
|
},
|
|
toRadio (e, index) {
|
|
this.selectObj = this.selectObj === e ? {} : e
|
|
this.selectIndex = index
|
|
this.pkId = this.pkId === e.task_uuid ? '' : e.task_uuid
|
|
if (this.pkId) {
|
|
this.up = true
|
|
this.down = true
|
|
this.del = true
|
|
} else {
|
|
this.up = false
|
|
this.down = false
|
|
this.del = false
|
|
}
|
|
this.checkUpDown()
|
|
},
|
|
checkUpDown () {
|
|
// 最后一条不能下移
|
|
if (this.selectIndex === this.dataList.length - 1) {
|
|
this.down = false
|
|
}
|
|
if (this.dataList[0].task_status === '00') {
|
|
if (this.selectIndex === 0) {
|
|
this.up = false
|
|
}
|
|
} else {
|
|
if (this.selectIndex === 0) {
|
|
this.up = false
|
|
this.down = false
|
|
}
|
|
if (this.selectIndex === 1) {
|
|
this.up = false
|
|
}
|
|
}
|
|
},
|
|
swapItems (arr, index1, index2) {
|
|
arr[index1] = arr.splice(index2, 1, arr[index1])[0]
|
|
return arr
|
|
},
|
|
toUp (arr) {
|
|
if (!this.up) {
|
|
return
|
|
}
|
|
if (this.pkId) {
|
|
if (arr.length > 1 && this.selectIndex !== 0) {
|
|
this.dataList = this.swapItems(arr, this.selectIndex, this.selectIndex - 1)
|
|
// this.pkId = ''
|
|
this.selectIndex = this.selectIndex - 1
|
|
if (this.selectIndex === 0) {
|
|
this.up = false
|
|
this.down = true
|
|
} else {
|
|
this.up = true
|
|
this.down = true
|
|
this.checkUpDown()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
toDown (arr) {
|
|
if (!this.down) {
|
|
return
|
|
}
|
|
if (this.pkId) {
|
|
if (arr.length > 1 && this.selectIndex !== (arr.length - 1)) {
|
|
this.dataList = this.swapItems(arr, this.selectIndex, this.selectIndex + 1)
|
|
// this.pkId = ''
|
|
this.selectIndex = this.selectIndex + 1
|
|
if (this.selectIndex === this.dataList.length - 1) {
|
|
this.up = true
|
|
this.down = false
|
|
} else {
|
|
this.up = true
|
|
this.down = true
|
|
this.checkUpDown()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
toDel (index) {
|
|
if (this.pkId) {
|
|
this.dataList.splice(index, 1)
|
|
this.pkId = ''
|
|
this.up = false
|
|
this.down = false
|
|
this.del = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.page_container
|
|
padding 31px 31px 31px 45px
|
|
.grid_wrapper
|
|
height calc(100% - 122px)
|
|
overflow-y auto
|
|
.selbox
|
|
width 40px
|
|
height 40px
|
|
position relative
|
|
.radio_uncheck
|
|
background center / 100% 100% url(../../../images/new/icon-check1.png) no-repeat
|
|
.radio_checked
|
|
background center / 100% 100% url(../../../images/new/icon-check2.png) no-repeat
|
|
.icon
|
|
display inline-block
|
|
width 43px
|
|
height 43px
|
|
position relative
|
|
top 10px
|
|
.bgyellow
|
|
background center / 100% 100% url(../../../images/new/icon-error1.png) no-repeat
|
|
.bgred
|
|
background center / 100% 100% url(../../../images/new/icon-error2.png) no-repeat
|
|
</style>
|