<template>
<transition name="slide">
<div class="index-container">
<mt-header class="header" title="工单查询" fixed>
<div slot="left">
<mt-button icon="back" @click="$router.back(-1)"></mt-button>
</div>
</mt-header>
<div class="joblist" ref="wrapper">
<Loading v-show="isLoading"></Loading>
<mt-loadmore
:top-method="loadTop"
:topPullText="loadConf.loadTopConf.topPullText"
:topDropText="loadConf.loadTopConf.topDropText"
:topLoadingText="loadConf.loadTopConf.topLoadingText"
:bottom-method="loadBottom"
:bottomAllLoaded="loadConf.loadBottomConf.isFinish"
:bottomPullText="loadConf.loadBottomConf.bottomPullText"
:bottomDropText="loadConf.loadBottomConf.bottomDropText"
:bottomLoadingText="loadConf.loadBottomConf.bottomLoadingText"
ref="loadmore"
class="loadmore-content"
>
<ul class="list-ul">
<li class="list-li" v-for="item in list" @click="goJobDetail(item.id)">
<div v-if="item.jobStatus!='0'" class="job-card">
<div class="card-brief">
<div class="card-left">
<div>
<span class="card-alarm">{{item.alarmContentName}}</span>
<span class="card-createtime">{{item.createTime}}</span>
</div>
<div class="card-wellcode">
<span>{{item.wellCode}}</span>
</div>
<div class="card-position">
<span>{{item.position}}</span>
</div>
</div>
<div class="clear-float"></div>
</div>
<div class="time-line">
<timeline>
<timeline-title v-if="item.jobStatus=='2'" bg-color="#26a2ff">{{item.jobBelongTo}}正在处理...
</timeline-title>
<timeline-title v-if="item.jobStatus=='1'" bg-color="#26a2ff">{{item.jobBelongTo}}正在确认...
</timeline-title>
<timeline-title v-if="item.jobStatus=='3'" bg-color="#26a2ff">{{item.jobBelongTo}}已完成
</timeline-title>
<timeline-title v-if="item.jobStatus=='4'" bg-color="#26a2ff">{{item.jobBelongTo}}已取消
</timeline-title>
<div v-if="item.showTimeline">
<timeline-item>
<span class="timeline-left">{{item.createTime}}</span> <span class="timeline-right">发起工单</span>
</timeline-item>
<timeline-item v-if="item.getJobTime!=''">
<span class="timeline-left">{{item.getJobTime}}</span> <span class="timeline-right">{{item.getJobPerson}}接单</span>
</timeline-item>
<timeline-item v-if="item.confirmJobTime!=''">
<span class="timeline-left">{{item.confirmJobTime}}</span> <span class="timeline-right">{{item.confirmJobPerson}}确认工单</span>
</timeline-item>
<timeline-item v-if="item.jobStatus=='3' && item.handleJobTime!=''">
<span class="timeline-left">{{item.handleJobTime}}</span> <span class="timeline-right">{{item.handleJobPerson}}完成工单</span>
</timeline-item>
<timeline-item v-if="item.jobStatus=='4' && item.handleJobTime!=''">
<span class="timeline-left">{{item.handleJobTime}}</span> <span class="timeline-right">{{item.handleJobPerson}}取消工单</span>
</timeline-item>
<div class="detail-btn" @click.stop="item.showTimeline=!item.showTimeline">
<i class="iconfont icon-fanhui3"></i>
</div>
</div>
<div class="detail-btn" v-else @click.stop="item.showTimeline=!item.showTimeline">
<i class="iconfont icon-31xiala"></i>
</div>
</timeline>
</div>
</div>
<div v-else class="wait-job-card">
<div class="card-left">
<div>
<span class="card-alarm">{{item.alarmContentName}}</span>
<span class="card-createtime">{{item.createTime}}</span>
</div>
<div class="card-wellcode">
<span>{{item.wellCode}}</span>
</div>
<div class="card-info">
<div class="card-position">
<span>{{item.position}}</span>
</div>
<div class="card-right">
<mt-button type="primary" size="small" @click.stop="getJob(item.id)">接单</mt-button>
</div>
<div class="clear-float"></div>
</div>
</div>
<div class="clear-float"></div>
</div>
</li>
</ul>
<div class="no-content" v-show="list.length<1">无符合条件的工单</div>
<div class="no-content" v-show="list.length>10 && loadConf.loadBottomConf.isFinish">已经到底了</div>
</mt-loadmore>
</div>
</div>
</transition>
</template>
<script>
import {Timeline, TimelineItem, TimelineTitle} from 'vue-cute-timeline'
import {MessageBox, Indicator, Toast} from 'mint-ui'
import Loading from '@/components/Loading'
import {getJobSearchList, getJob} from '@/api/job'
let isFromDetail = false
export default {
name: "SearchList",
components: {
Timeline,
TimelineItem,
TimelineTitle,
Loading
},
data() {
return {
list: [],
isLoading: true,
total: 50,
listQuery: {},
loadConf: {
loadTopConf: {
isFinish: false, // 是否完成下拉
topPullText: '下拉刷新',
topDropText: '松开刷新',
topLoadingText: '刷新中'
},
loadBottomConf: {
isFinish: false, // 是否完成上拉
bottomPullText: '',
bottomDropText: '释放获取内容',
bottomLoadingText: '加载中',
count: 1, // 模拟次数
}
}
}
},
mounted() {
this.listQuery = this.$route.query.listQuery
this.list = []
this.isLoading = true
this.loadTop()
},
beforeRouteEnter(to, from, next) {
if (from.name) {
if (from.name.indexOf('jobDetail') === -1) {
isFromDetail = false
} else {
isFromDetail = true
}
} else {
isFromDetail = false
}
next()
},
activated() {
if (isFromDetail) { // 来自详情页面
this.$refs.wrapper.scrollTop = this.$store.getters.pageYOffset;
} else { // 滚动到最顶，数据初始化
this.list = []
this.listQuery = this.$route.query.listQuery
this.isLoading = true
this.loadTop()
this.$refs.wrapper.scrollTop = 0
}
},
methods: {
loadTop() {
this.list = []
console.log('inHandleJobList:loadTop')
this.isLoading = true
this.flag = 0
this.$refs.loadmore.onTopLoaded()
this.listQuery.offset = 1
this.loadConf.loadBottomConf.isFinish = false
getJobSearchList(this.listQuery).then(response => {
this.listQuery.offset += 1
this.list = []
this.isLoading = false
for (let item of response.data.rows) {
item.showTimeline = false
this.list.push(item)
}
if (this.list.length >= this.total) {
this.loadConf.loadBottomConf.isFinish = true
this.$refs.loadmore.onBottomLoaded();
}
})
},
loadBottom() {
console.log('loadbottom')
if (this.list.length >= this.total) {
this.loadConf.loadBottomConf.isFinish = true
this.$refs.loadmore.onBottomLoaded();
} else {
getJobSearchList(this.listQuery).then(response => {
console.log('getJobSearchList')
this.listQuery.offset += 1
for (let item of response.data.rows) {
item.showTimeline = false
this.list.push(item)
console.log(this.list.length)
}
this.total = parseInt(response.data.total)
this.$refs.loadmore.onBottomLoaded();
this.isLoading = false
})
}
},
goJobDetail(id) {
this.$router.push({
path: `/jobDetail/${id}`
})
},
getJob(id){
MessageBox.confirm('确定要接单吗?').then(action => {
if(action=='confirm'){
getJob(id).then(response => {
if(response.code==200){
Toast({
message: '接单成功',
position: 'bottom',
})
this.loadTop()
}
})
}
})
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.joblist {
margin-top 50px
padding 0px 2vw
overflow: scroll;
//height: calc(100vh - 135px)
height: calc(100vh - 40px);
}
.list-li {
margin-top 1vw;
border 1px solid #f0f0f0
background-color #ffffff
min-height 80px
}
.job-card {
.card-left {
width 90%
float left
padding 15px 15px
.card-alarm {
margin-top 5px
font-size: 1rem
font-weight 500
color #f7615a
}
.card-wellcode {
margin-top 12px
font-size: 0.8rem
}
.card-welltype {
margin-left 10px
font-size 0.8rem
color #13ad00
}
.card-createtime {
margin-top 5px
float right
font-size 0.8rem
color #bbbbbb
}
.card-position {
margin-top 18px
font-size 0.8rem
line-height 0.9rem
color #646464
}
}
.timeline-right {
float right
}
.detail-btn {
height 1rem
text-align center
i {
font-size: 1rem
}
}
}
.wait-job-card {
.card-left {
width 90%
float left
padding 15px 15px
.card-alarm {
margin-top 5px
font-size: 1rem
font-weight 500
color #f7615a
}
.card-wellcode {
margin-top 12px
font-size: 0.8rem
}
.card-createtime {
margin-top 5px
float right
font-size 0.8rem
color #bbbbbb
}
.card-welltype {
margin-left 10px
font-size 0.8rem
color #13ad00
}
.card-info {
.card-position {
margin-top 18px
font-size 0.8rem
line-height 0.9rem
color #646464
width 70%
float: left;
}
.card-right {
height: 100%
width 70px;
padding-top: 1px
float: right
text-align: right
.mint-button {
/*margin-top:7px*/
/*margin-top 20px*/
margin-left 10px
}
}
}
}
}
</style>
