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.
538 lines
18 KiB
538 lines
18 KiB
<template> |
|
<view class="page-css" |
|
:style="{ 'padding-bottom': (detailForm.status == 5 && dataTypes == 1) ? '180rpx' : '20rpx' }" |
|
ref="contentToExport"> |
|
<view class=""> |
|
<view class="repair_detail"> |
|
<view class="repair_title">{{ dataTypes == 1 ? '故障信息' : '故障详情' }}</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">故障描述：</text> |
|
<text class="item_right_txt reason">{{ detailForm.faultDescribe }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">故障位置：</text> |
|
<text class="item_right_txt">{{ detailForm.faultLocation }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">设备名称：</text> |
|
<text class="item_right_txt">{{ detailForm.deviceName }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">故障类别：</text> |
|
<text class="item_right_txt">{{ detailForm.faultType }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">故障视频：</text> |
|
<view class="item_right_txt video"> |
|
<video v-show="videoUrl != ''" :src="videoUrl" style="width: 450rpx; height: 320rpx" |
|
controls></video> |
|
<video v-if="detailForm.videoAttaches && detailForm.videoAttaches.length > 0" |
|
:src="detailForm.videoAttaches[0].link" style="width: 148px; height: 148px" |
|
controls></video> |
|
</view> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">故障图片：</text> |
|
<view class="item_right_txt video"> |
|
<image style="width: 130rpx;height: 140rpx;margin-bottom: 10rpx;" |
|
v-for="item in detailForm.picAttaches" :key="item.id" :src="item.link" alt="" /> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 维修详情 --> |
|
<view class="repair_detail" |
|
v-if="(dataTypes == 1 || dataTypes == 2) && (detailForm.status == 5 || detailForm.status == 6 || detailForm.status == 7 || detailForm.status == 8 || detailForm.status == 9) || (dataTypes == 4 && !(detailForm.status == 0 || detailForm.status == 1 || detailForm.status == 2)) || (dataTypes == 3) && (detailForm.closeReason == '')"> |
|
<view class="repair_title">维修详情</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">维修人：</text> |
|
<text class="item_right_txt">{{ detailForm.repairPersonName }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">设备名称：</text> |
|
<text class="item_right_txt">{{ detailForm.deviceName }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">故障原因：</text> |
|
<text class="item_right_txt reason">{{ detailForm.faultCause }}</text> |
|
</view> |
|
<view class="detail_item" style="margin-top: 10rpx;"> |
|
<text class="item_left_txt">处理方法：</text> |
|
<text class="item_right_txt reason">{{ detailForm.processMethod }}</text> |
|
</view> |
|
<view class="detail_item" v-show="detailForm.materials && detailForm.materials.length != 0"> |
|
<text class="item_left_txt">维修材料：</text> |
|
<view class="item_right_table"> |
|
<view class="table_box"> |
|
<view class="table_txt left">物料名称</view> |
|
<view class="table_txt right">金额</view> |
|
</view> |
|
<view class="table_box table_item" v-for="item in detailForm.materials" :key="item.id"> |
|
<view class="table_txt left">{{ item.materialName }}</view> |
|
<view class="table_txt right">{{ item.materialPrice }}</view> |
|
</view> |
|
<view class="table_box table_sub"> |
|
<view class="table_txt left">合计</view> |
|
<view class="table_txt right">{{ totalPrice }}</view> |
|
</view> |
|
<view class="table_box table_sub"> |
|
<view class="table_txt left">折扣</view> |
|
<view class="table_txt right">{{ discount }}<text v-show="discount != ''">折</text></view> |
|
</view> |
|
<view class="table_box table_sub"> |
|
<view class="table_txt left">折后价格</view> |
|
<view class="table_txt right">{{ discountPrice }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 客服查看派单详情 --> |
|
<view class="repair_detail" |
|
v-if="((detailForm.status != 0) && dataTypes == 2) || (dataTypes == 1 && !(detailForm.status == 0 || detailForm.status == -1)) || dataTypes == 4"> |
|
<view class="repair_title">处理情况</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">接单时间：</text> |
|
<text class="item_right_txt reason">{{ detailForm.dispatchTime }}</text> |
|
</view> |
|
<view class="detail_item" v-if="dataTypes != 1"> |
|
<text class="item_left_txt">计划完成时间：</text> |
|
<text class="item_right_txt reason">{{ detailForm.planCompleteTime }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">客服意见：</text> |
|
<text class="item_right_txt reason">{{ detailForm.customerOpinion }}</text> |
|
</view> |
|
</view> |
|
<!-- 关闭详情 --> |
|
<view class="repair_detail" v-if="detailForm.closeReason != ''"> |
|
<view class="repair_title">关闭详情</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">关闭原因：</text> |
|
<text class="item_right_txt">{{ detailForm.closeReason }}</text> |
|
</view> |
|
</view> |
|
<!-- 驳回 --> |
|
<view class="repair_detail" v-if="detailForm.repaiRejectReason != ''"> |
|
<view class="repair_title">驳回详情</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">驳回原因：</text> |
|
<text class="item_right_txt">{{ detailForm.repaiRejectReason }}</text> |
|
</view> |
|
</view> |
|
|
|
<view class="repair_detail" v-if="detailForm.status != -1"> |
|
<view class="repair_title">其他信息</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">提报人：</text> |
|
<text class="item_right_txt">{{ detailForm.informantName }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">提报人电话：</text> |
|
<text class="item_right_txt">{{ detailForm.informantPhone }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">提报单号：</text> |
|
<text class="item_right_txt">{{ detailForm.requirementCode }}</text> |
|
</view> |
|
<view class="detail_item"> |
|
<text class="item_left_txt">提报时间：</text> |
|
<text class="item_right_txt">{{ detailForm.createTime }}</text> |
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
props:{ |
|
data:{ |
|
type:Object, |
|
default:{} |
|
}, |
|
detailId:{ |
|
type:String, |
|
default:'' |
|
} |
|
}, |
|
computed: { |
|
dataTypes() { |
|
return this.$store.state.dataType |
|
}, |
|
}, |
|
data() { |
|
return { |
|
totalPrice: '1084.00', |
|
discount: '9', |
|
discountPrice: '975.60', |
|
detailForm: {}, |
|
videoUrl: '', |
|
userInfo: {}, |
|
repairDetails: { |
|
reportPeople: '',//填报人 |
|
deviceName: '',//设备名称 |
|
faultReason: '',//故障原因 |
|
dealMethods: '',//处理方法 |
|
isMaterial: null,//是否申领物料 |
|
materialTable: [],//物料数据 |
|
}, |
|
imageSrc: '',//图片路径 |
|
} |
|
}, |
|
|
|
mounted() { |
|
// 获取用户信息 |
|
this.userInfo = uni.getStorageSync("userinfo"); |
|
this.getDetail() |
|
// 动态详情查看 |
|
}, |
|
methods: { |
|
getDetail() { |
|
let query_ = { |
|
id: this.detailId |
|
} |
|
this.$u.api.getBreakdownInfo(query_).then(res => { |
|
if (res.code == 200) { |
|
this.detailForm = res.data |
|
this.videoUrl = res.data.videoAttaches && res.data.videoAttaches.length > 0 ? res.data.videoAttaches[0].link : '' |
|
this.totalPrice = res.data.totalPrice == -1 ? res.data.materials.reduce((sum, item) => sum + item.materialPrice, 0) : res.data.totalPrice |
|
this.discount = res.data.discount == -1 ? '' : res.data.discount |
|
this.discountPrice = res.data.discountPrice == -1 ? '' : res.data.discountPrice |
|
|
|
this.repairDetails.reportPeople = this.detailForm.repairPersonName //填报人 |
|
this.repairDetails.deviceName = this.detailForm.deviceName //填报人 |
|
} |
|
}) |
|
} |
|
|
|
} |
|
} |
|
|
|
</script> |
|
<style lang="scss" scoped> |
|
.page-css { |
|
|
|
width: 100%; |
|
padding: 0; |
|
padding-top: 26rpx; |
|
padding-bottom: 180rpx; |
|
|
|
.status_box { |
|
margin: 0 24rpx 20rpx; |
|
height: 180rpx; |
|
border-radius: 20rpx; |
|
background-color: rgba(255, 255, 255, 1); |
|
color: rgba(16, 16, 16, 1); |
|
font-size: 36rpx; |
|
text-align: left; |
|
font-family: -bold; |
|
|
|
.status_top { |
|
width: 100%; |
|
padding: 40rpx 20rpx 30rpx 30rpx; |
|
// background-color: red; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.status_txt { |
|
color: rgba(0, 0, 0, 1); |
|
font-size: 36rpx; |
|
text-align: left; |
|
font-family: SourceHanSansSC-bold; |
|
font-weight: bold; |
|
} |
|
|
|
.load_more { |
|
color: rgba(108, 108, 108, 1); |
|
font-size: 28rpx; |
|
text-align: left; |
|
font-family: SourceHanSansSC-regular; |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
|
|
.status_bottom { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
color: rgba(190, 190, 190, 1); |
|
font-size: 28rpx; |
|
text-align: left; |
|
font-family: SourceHanSansSC-regular; |
|
|
|
.status_date { |
|
margin-right: 22rpx; |
|
} |
|
} |
|
} |
|
|
|
.fault_detail { |
|
margin: 0 24rpx 20rpx; |
|
height: 180rpx; |
|
border-radius: 20rpx; |
|
background-color: rgba(255, 255, 255, 1); |
|
} |
|
|
|
.repair_detail { |
|
margin: 0 24rpx 20rpx; |
|
border-radius: 20rpx; |
|
background-color: rgba(255, 255, 255, 1); |
|
padding: 6rpx 0 34rpx; |
|
|
|
.repair_title { |
|
line-height: 60rpx; |
|
color: rgba(0, 0, 0, 1); |
|
font-size: 32rpx; |
|
text-align: left; |
|
font-family: SourceHanSansSC-bold; |
|
margin: 18rpx 0 0rpx 20rpx; |
|
font-weight: bold; |
|
} |
|
|
|
.detail_item { |
|
padding: 4rpx 20rpx 0; |
|
|
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.item_left_txt { |
|
color: rgba(108, 108, 108, 1); |
|
font-size: 28rpx; |
|
text-align: left; |
|
font-family: SourceHanSansSC-regular; |
|
width: 210rpx; |
|
margin-right: 20rpx; |
|
line-height: 60rpx; |
|
} |
|
|
|
.item_right_txt { |
|
max-width: calc(100% - 220rpx); |
|
color: rgba(0, 0, 0, 1); |
|
font-size: 28rpx; |
|
// text-align: left; |
|
text-align: justify; |
|
font-family: SourceHanSansSC-regular; |
|
} |
|
|
|
.item_right_table { |
|
width: calc(100% - 220rpx); |
|
margin-top: 10rpx; |
|
|
|
.table_box { |
|
width: 100%; |
|
height: 60rpx; |
|
background-color: #e8e8e8; |
|
border: 1px solid #bbbbbb; |
|
font-size: 14px; |
|
color: #101010; |
|
line-height: 60rpx; |
|
display: flex; |
|
|
|
.left { |
|
width: 72%; |
|
height: 100%; |
|
text-align: center; |
|
border-right: 2rpx solid #bbbbbb; |
|
} |
|
|
|
.right { |
|
width: 28%; |
|
height: 100%; |
|
text-align: center; |
|
} |
|
} |
|
|
|
.table_item { |
|
background-color: #fff; |
|
border-top: none; |
|
} |
|
|
|
.table_sub { |
|
border-top: none; |
|
background-color: #fff; |
|
} |
|
} |
|
|
|
.reason { |
|
word-wrap: warp; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 3; |
|
/* 定义显示的行数 */ |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.video { |
|
margin-top: 10rpx; |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
} |
|
} |
|
|
|
.evaluate_box { |
|
width: 100%; |
|
height: 154rpx; |
|
bottom: 0; |
|
position: fixed; |
|
background: #fff; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
|
|
.evaluate_btn { |
|
width: 160rpx; |
|
height: 60rpx; |
|
border-radius: 8rpx; |
|
background-color: rgba(255, 255, 255, 1); |
|
color: rgba(58, 98, 215, 1); |
|
font-size: 24rpx; |
|
text-align: center; |
|
font-family: PingFangSC-regular; |
|
border: 2rpx solid rgba(58, 98, 215, 1); |
|
margin-right: 26rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
|
|
.repair_form { |
|
padding: 0 32rpx; |
|
} |
|
|
|
.repair-btn { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-around; |
|
/* 水平均匀分布 */ |
|
margin-top: 32rpx; |
|
padding: 0 32rpx; |
|
|
|
/deep/.u-btn { |
|
width: 100%; |
|
} |
|
} |
|
|
|
/deep/.popup-content { |
|
display: flex; |
|
flex-direction: column; |
|
overflow: hidden; |
|
} |
|
|
|
.select-box { |
|
width: 100%; |
|
|
|
.select-box-item { |
|
width: 100%; |
|
border-radius: 20rpx; |
|
background-color: rgba(249, 249, 249, 1); |
|
margin-bottom: 32rpx; |
|
line-height: 60rpx; |
|
color: rgba(108, 108, 108, 1); |
|
font-size: 28rpx; |
|
padding: 24rpx; |
|
} |
|
} |
|
|
|
.material-box { |
|
flex: 1; |
|
background: #fff; |
|
margin: 0; |
|
overflow: auto; |
|
// padding-bottom: 32rpx; |
|
|
|
.material-item { |
|
height: 300rpx; |
|
border-radius: 20rpx; |
|
background-color: rgba(249, 249, 249, 1); |
|
margin: 32rpx 0 0; |
|
padding: 32rpx; |
|
display: flex; |
|
flex-direction: row; |
|
|
|
.title-wrapper {} |
|
|
|
.item-right { |
|
flex: 1; |
|
|
|
.material-title { |
|
display: flex; |
|
flex-direction: row; |
|
color: rgba(108, 108, 108, 1); |
|
font-size: 28rpx; |
|
line-height: 60rpx; |
|
|
|
.material-title-name { |
|
color: rgba(51, 51, 51, 1); |
|
font-size: 36rpx; |
|
font-weight: 550; |
|
padding-right: 16rpx; |
|
} |
|
|
|
.material-title-code { |
|
flex: 1; |
|
} |
|
} |
|
|
|
.material-text { |
|
line-height: 60rpx; |
|
color: rgba(108, 108, 108, 1); |
|
font-size: 28rpx; |
|
} |
|
|
|
.material-num { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
} |
|
} |
|
|
|
} |
|
|
|
|
|
} |
|
|
|
.material-btn { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
/* 水平均匀分布 */ |
|
margin-top: 32rpx; |
|
padding: 0 32rpx; |
|
|
|
/deep/.u-btn { |
|
width: 48%; |
|
} |
|
} |
|
|
|
.selectForm { |
|
width: 100%; |
|
padding: 26rpx; |
|
|
|
.form-item { |
|
float: left; |
|
width: calc(100% - 26rpx - 26rpx - 140rpx); |
|
|
|
.material-text { |
|
width: 50%; |
|
float: left; |
|
} |
|
} |
|
|
|
.form-label { |
|
width: 140rpx; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
</style> |