mes_mobile/pages/deviceRepair/deviceRepair.vue

192 lines
5.0 KiB
Vue

<template>
<!-- 设备报修 -->
<view class="page_padding bot_padding">
<view v-for="(item,index) in list" :key="index">
<view class="page_list contentboxsty font13" @click="toDetail(item)">
<view class="list_top flex_layout">
<view class="top_left flex_layout">
<view class="icon iconfont icon-daiju"></view>
<view class="font_bold">{{item.eq_name}}</view>
</view>
<view class="card_right top_right">
<text class="status error">故障中</text>
</view>
</view>
<view class="list_centre padd_bot12">
<view class="row_data">
<view class="name font_bold">值班工程师</view>
<view class="text">{{item.operator_name}}</view>
</view>
<view class="row_data">
<view class="name font_bold">故障时间</view>
<view class="text">{{item.failure_at}}</view>
</view>
<view class="row_data">
<view class="name font_bold">报修人</view>
<view class="text">{{item.repair_name}}</view>
</view>
<view class="row_data">
<view class="name font_bold">报修时间</view>
<view class="text">{{item.report_at}}</view>
</view>
<view class="row_data">
<view class="name font_bold">处理状态</view>
<view class="text">{{item.status_label}}</view>
</view>
<view class="row_data">
<view class="name font_bold">故障解除时间</view>
<view class="text">{{item.repair_at_label}}</view>
</view>
</view>
<view class="list_below flex_layout">
<view class="below_left btn" @click.stop="toRepairOrder(item)">
<text class="icon iconfont icon-bianji font16"></text>
维修单
</view>
<view class="below_right btn" @click.stop="editRepairOrder(item)">
<text class="icon iconfont icon-bianji font16"></text>
修改
</view>
</view>
</view>
</view>
</view>
<view class="page_bottom_button">
<view class="page_add" @click="toAddRepairReport()">
<view class="icon iconfont icon-tianjia font20"></view>
<text class="font14">添加</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
params:{
page:1,
pageSize:10,
},
loadParams:{
noData:false,
loading:false,
loadEnd:false
},
list:[],
}
},
mounted() {
this.getList();
},
// 上拉刷新
onPullDownRefresh(){
this.params.page = 1;
this.loadParams = {
noData:false,
loading:false,
loadEnd:false
};
this.getList(2);
},
// 加载下一页
onReachBottom(){
if(!(this.loadParams.loadEnd || this.loadParams.noData)){
this.loadParams.loading = true;
this.params.page ++;
this.getList();
}
},
methods: {
getList(type=1){
if(this.params.page == 1){
uni.showLoading({
title: '加载中',
mask: true
})
}
this.$api.request('/equipment.repair.list',this.params).then(res=>{
if(type ==2){
uni.stopPullDownRefresh();
}
setTimeout( ()=> {
uni.hideLoading();
}, 200);
this.loadParams.loading = false;
if(res.data.rows.length ==0 && this.params.page == 1){
this.loadParams.noData = true;
}
if(res.data.rows.length>0 && res.data.rows.length < this.params.pageSize){
this.loadParams.loadEnd = true;
}
if(this.params.page == 1){
this.list = res.data.rows;
}else{
this.list = this.list.concat(res.data.rows);
}
}).catch(err=>{
setTimeout(()=> {
uni.hideLoading();
}, 200);
})
},
//新增报修页面
toAddRepairReport(){
uni.navigateTo({
url:'/pages/deviceRepair/repairReport'
})
},
//维修页面
toRepairOrder(item){
// if(item.repair_id && item.repair_id>0){
// uni.navigateTo({
// url:'./deviceDetail?id='+item.id+'&type='+2
// })
// }else{
// uni.navigateTo({
// url:'/pages/deviceRepair/repairOrder?id='+item.id
// })
// }
uni.navigateTo({
url:'/pages/deviceRepair/repairOrder?id='+item.id
})
},
editRepairOrder(item){
uni.navigateTo({
url:'/pages/deviceRepair/repairReport?id='+item.id
})
},
toDetail(item){
uni.navigateTo({
url:'./deviceDetail?id='+item.id+'&type='+1
})
}
}
}
</script>
<style scoped lang="scss">
.page_list{
.list_top{height: 44px;align-items: center;border-bottom: 1px solid $uni-border-color-primary;
.top_left{flex: 1;display: flex;align-items: center;
.icon{margin-right: 5px;color: $uni-text-color-primary;}
}
}
.list_centre{
.row_data{
display: flex;align-items: center;padding-top: 12px;
.name{flex-basis: 95px;}
.text{display: flex;display: flex;}
}
}
.list_below{height: 49px;align-items: center;border-top: 1px solid $uni-border-color-primary;
.btn{width: 50%;display: flex;align-items: center;justify-content: center;height: 100%;
.icon{margin-right: 5px;}
}
.below_left{border-right: 1px solid $uni-border-color-primary;}
}
}
</style>