mes_mobile/pages/deviceRepair/deviceDetail.vue

117 lines
3.3 KiB
Vue

<template>
<view class="page_padding">
<view class="padd_bot12 font14 flex_layout">
<text>{{type==1?'硬件设备报修详情':'硬件设备维修详情'}}</text>
</view>
<view class="detail_list padd_top12 contentboxsty page_content font13">
<template v-if="type==2">
<view class="row flex_layout">
<view class="name font_bold">维修工程师</view>
<view class="text">{{info.repair_name}}</view>
</view>
<view class="row flex_layout">
<view class="name font_bold">故障解除时间</view>
<view class="text">{{info.repair_at_label}}</view>
</view>
<view class="row">
<view class="name font_bold">维修描述</view>
<view class="text remarkText padd_top12">{{info.repair_remark}}</view>
</view>
<view class="row">
<view class="name font_bold">维修照片</view>
<view class="text imgList">
<view class="imgView" v-for="(em,ind) in info.repair_photo" :key="ind">
<image class="img" :src="em" mode="aspectFill" @click="imgPreview(info.repair_photo,em)"></image>
</view>
</view>
</view>
</template>
<template v-if="type ==1">
<view class="row flex_layout">
<view class="name font_bold">值班工程师</view>
<view class="text">{{info.operator_name}}</view>
</view>
<view class="row flex_layout">
<view class="name font_bold">故障时间</view>
<view class="text">{{info.failure_at}}</view>
</view>
<view class="row flex_layout">
<view class="name font_bold">报修时间</view>
<view class="text">{{info.report_at}}</view>
</view>
<view class="row flex_layout">
<view class="name font_bold">报修人</view>
<view class="text">{{info.repair_name}}</view>
</view>
<view class="row flex_layout">
<view class="name font_bold">报修设备</view>
<view class="text">{{info.eq_name}}</view>
</view>
<view class="row">
<view class="name font_bold">故障描述</view>
<view class="text remarkText padd_top12">{{info.remark}}</view>
</view>
<view class="row">
<view class="name font_bold">故障照片</view>
<view class="text imgList">
<view class="imgView" v-for="(em,ind) in info.failure_photo" :key="ind">
<image class="img" :src="em" mode="aspectFill" @click="imgPreview(info.failure_photo,em)"></image>
</view>
</view>
</view>
</template>
</view>
</view>
</template>
<script>
export default{
data(){
return{
type:1,
id:0,
info:{}
}
},
onLoad(option) {
this.type = option.type;
this.id = option.id;
},
mounted() {
this.getData();
},
methods:{
getData(){
this.$api.postFuncLoading('/equipment.repair.info',{id:this.id}).then(res=>{
this.info = res.data;
}).catch(err=>{})
},
imgPreview(list,url){
uni.previewImage({
urls: list,
current:url,
});
}
}
}
</script>
<style scoped lang="scss">
.row{
padding-bottom: 12px;
.name{flex-basis: 90px;}
.text{flex: 1;}
}
.row:last-child{
padding-bottom: 0;
}
.imgList{
display: flex;flex-direction: row;flex-wrap: wrap;padding: 6px 0;
.imgView{width: 32%;height: 100px;margin-right: 2%;box-sizing: border-box;padding: 6px 0 0 0;}
.imgView:nth-child(3n){
margin-right: 0;
}
.img{width: 100%;height: 100%;border-radius:4px;}
}
</style>