You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
8.6 KiB
388 lines
8.6 KiB
1 year ago
|
<template>
|
||
|
|
<view class="details">
|
||
|
|
<navbar title="工单详情" :isCenter="true" :back="true"></navbar>
|
||
|
|
<view class="content">
|
||
|
|
<view class="order">
|
||
|
|
<view class="orderItem">
|
||
|
|
<view class="orderTitle">
|
||
|
|
<view class="titleName">{{detaildInfo.product_pattern}}</view>
|
||
|
|
<view :class="detaildInfo.status==1?'titleStatus progress'
|
||
|
|
:detaildInfo.status==4?'titleStatus already'
|
||
|
|
:detaildInfo.status==5?'titleStatus failed':'titleStatus'">
|
||
|
|
{{detaildInfo.status==1?'调试中'
|
||
|
|
:detaildInfo.status==2?'待审核人员验收'
|
||
|
|
:detaildInfo.status==3?'待用户验收'
|
||
|
|
:detaildInfo.status==4?'已验收'
|
||
|
|
:detaildInfo.status==5?'验收失败':''
|
||
|
|
}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="itemContent">
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">条形码编号</view>
|
||
|
|
<view class="right">{{detaildInfo.barcode}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">产品类型</view>
|
||
|
|
<view class="right">{{detaildInfo.product_type}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">产品型号</view>
|
||
|
|
<view class="right">{{detaildInfo.product_pattern}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">产品数量</view>
|
||
|
|
<view class="right">{{detaildInfo.product_num}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">循环承压类型</view>
|
||
|
|
<view class="right">{{detaildInfo.pressure_type}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">条形码编号2</view>
|
||
|
|
<view class="right">{{detaildInfo.barcode2}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">条形码编号3</view>
|
||
|
|
<view class="right">{{detaildInfo.barcode3}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="order">
|
||
|
|
<view class="orderItem">
|
||
|
|
<view class="itemContent">
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">代理商</view>
|
||
|
|
<view class="right">{{detaildInfo.agent_company_name}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">城市</view>
|
||
|
|
<view class="right">{{detaildInfo.city}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">姓名</view>
|
||
|
|
<view class="right">{{detaildInfo.agent_name}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="contentItem">
|
||
|
|
<view class="left">电话</view>
|
||
|
|
<view class="right">{{detaildInfo.agent_mobile}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="install">
|
||
|
|
<view class="title">
|
||
|
|
安装调试记录
|
||
|
|
</view>
|
||
|
|
<view class="empty" v-if="recordList.length==0">
|
||
|
|
<image src="../../static/detailEmpty.png" mode="widthFix"></image>
|
||
|
|
<view class="text">暂无进展</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="recordList.length!=0" class="recordList">
|
||
|
|
<view class="recordItem" v-for="(item,index) in recordList" :key="index">
|
||
|
|
<view class="title">
|
||
|
|
<image src="../../static/shij.png" mode=""></image>
|
||
|
|
<text>验收项：{{item.acceptance}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="time">
|
||
|
|
<view class="timeText">
|
||
|
|
{{item.createtime}}
|
||
|
|
</view>
|
||
|
|
<view class="people">
|
||
|
|
<image src="../../static/r.png" mode=""></image>
|
||
|
|
<text>{{item.user_name}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="textContent">
|
||
|
|
{{item.record}}
|
||
|
|
</view>
|
||
|
|
<view class="picGroup">
|
||
|
|
<image :src="i" v-for="(i,p) in item.image" :key="p" @click="goPreview(i)" mode="aspectFill"></image>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottomBtn">
|
||
|
|
<view class="btn" @click="installRule">安装规范</view>
|
||
|
|
<view class="btn" @click="goRecordDetails">验收记录</view>
|
||
|
|
<view class="btn add" @click="addLogHandle">添加记录</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import navbar from '@/components/navbar.vue'
|
||
|
|
import {getDetails,getInstallLog} from '@/common/api.js'
|
||
|
|
export default {
|
||
|
|
components:{navbar},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
recordList:[],
|
||
|
|
id:null,
|
||
|
|
detaildInfo:{
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.id=option.id
|
||
|
|
this.getDetails()
|
||
|
|
this.getInstallLog()
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getInstallLog()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDetails(){
|
||
|
|
getDetails({id:this.id,custom: { auth: true }}).then(res=>{
|
||
|
|
let obj = JSON.parse(JSON.stringify(res.data))
|
||
|
|
|
||
|
|
for(let i in obj){
|
||
|
|
this.$set(this.detaildInfo,i,obj[i])
|
||
|
|
}
|
||
|
|
uni.setStorageSync('acceptance',this.detaildInfo.acceptance)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getInstallLog(){
|
||
|
|
getInstallLog({wordorder_id:this.id,custom: { auth: true }}).then(res=>{
|
||
|
|
this.recordList = res.data;
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
goRecordDetails(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/index/acceptRecord?id='+this.id
|
||
|
|
})
|
||
|
|
},
|
||
|
|
installRule(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/index/file?id='+this.id
|
||
|
|
})
|
||
|
|
},
|
||
|
|
addLogHandle(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/index/addRecord?id='+this.id
|
||
|
|
})
|
||
|
|
},
|
||
|
|
goPreview(url){
|
||
|
|
let imgs =[]
|
||
|
|
imgs.push(url)
|
||
|
|
uni.previewImage({
|
||
|
|
urls:imgs,
|
||
|
|
current:0
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.details{
|
||
|
|
min-height: calc(100vh);
|
||
|
|
background-color: #F4F5F7;
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
.order{
|
||
|
|
.orderItem{
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin:20rpx 24rpx;
|
||
|
|
.orderTitle{
|
||
|
|
display:flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding:36rpx 30rpx;
|
||
|
|
border-bottom:1px solid #EAEAEA;
|
||
|
|
.titleName{
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #222222;
|
||
|
|
}
|
||
|
|
.titleStatus{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #8EC31F;
|
||
|
|
}
|
||
|
|
.progress{
|
||
|
|
color: #8EC31F;
|
||
|
|
}
|
||
|
|
.already{
|
||
|
|
color:#999999;
|
||
|
|
}
|
||
|
|
.failed{
|
||
|
|
color:#E72525;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.itemContent{
|
||
|
|
padding:27rpx 30rpx;
|
||
|
|
:first-child{
|
||
|
|
margin-top:0rpx !important;
|
||
|
|
}
|
||
|
|
.contentItem{
|
||
|
|
display: flex;
|
||
|
|
margin-top:36rpx;
|
||
|
|
|
||
|
|
.left{
|
||
|
|
width: 170rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #999999;
|
||
|
|
margin-right:52rpx;
|
||
|
|
text-align-last: justify;
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #222222;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.install{
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
padding:31rpx;
|
||
|
|
margin:0 24rpx;
|
||
|
|
margin-bottom: 120rpx;
|
||
|
|
.title{
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.empty{
|
||
|
|
margin:97rpx 0;
|
||
|
|
text-align: center;
|
||
|
|
&>image{
|
||
|
|
width:323rpx;
|
||
|
|
height:auto;
|
||
|
|
}
|
||
|
|
.text{
|
||
|
|
margin-top:24rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #222222;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottomBtn{
|
||
|
|
height: 110rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border: 1px solid #EAEAEA;
|
||
|
|
box-shadow: 0px 2px 8px 0px rgba(1,6,14,0.05);
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
// padding:0 24rpx 0 0;
|
||
|
|
.btn{
|
||
|
|
background: #FFFFFF;
|
||
|
|
border: 1px solid #8EC31F;
|
||
|
|
border-radius: 39px;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #8EC31F;
|
||
|
|
padding:27rpx 40rpx;
|
||
|
|
height: auto;
|
||
|
|
margin-left:30rpx;
|
||
|
|
}
|
||
|
|
.add{
|
||
|
|
background: #8EC31F;
|
||
|
|
color:#ffffff;
|
||
|
|
margin-right:24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.recordList{
|
||
|
|
.recordItem{
|
||
|
|
margin-top:30rpx;
|
||
|
|
border-bottom:1px solid #EAEAEA;
|
||
|
|
padding-bottom:20rpx;
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
image{
|
||
|
|
width:44rpx;
|
||
|
|
height:44rpx;
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.time{
|
||
|
|
padding-left:44rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.timeText{
|
||
|
|
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
.people{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
image{
|
||
|
|
width:44rpx;
|
||
|
|
height:44rpx;
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.textContent{
|
||
|
|
margin: 20rpx 12rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: Alibaba PuHuiTi;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 36rpx;
|
||
|
|
}
|
||
|
|
.picGroup{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
image{
|
||
|
|
// width:30%;
|
||
|
|
width: 200rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
background: #E5E6E8;
|
||
|
|
border: 1px solid #EAEAEA;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-bottom:16rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.picGroup :last-child {
|
||
|
|
/* 让最后一个元素的右边距自动适应，从而实现左对齐的效果。*/
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left:10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|