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
1 year ago
|
<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>
|