hz-zhhq-app/pages/malfunc-check/repair-details-wb.vue

1002 lines
25 KiB
Vue
Raw Normal View History

2025-01-22 10:53:47 +08:00
<template>
<view class="hzIndex">
<hzHeader title="详情"></hzHeader>
<view class="container hzContent">
<view class="details">
<view class="detail_msg">
<view class="info-item status">
<text v-if="item.is_inspection!=0" class="label">服务状态 </text>
<text v-if="item.reply_flag =='0'" class="infoSpan"
style="color: #FB8107;">未审核</text><!-- statusred -->
<text v-if="item.reply_flag =='1'" class="infoSpan">未通过</text>
<text v-if="item.reply_flag =='2'" class="infoSpan">已通过</text>
</view>
</view>
</view>
<view class="details">
<view class="detail_msg">
<view class="dateTit" style="padding: 24upx 0;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">维保信息</text>
</view>
<view class="info-item">
<text class="label" v-if="item.is_inspection==2">维保项目 </text>
<text class="label" v-if="item.is_inspection==3">服务项目 </text>
<text class="infoSpan">{{ item.repair_option_name }}</text>
</view>
<view class="info-item">
<text class="label" v-if="item.is_inspection==2">维保区域 </text>
<text class="label" v-if="item.is_inspection==3">服务区域 </text>
<text class="infoSpan">{{ item.repair_place }}</text>
</view>
<view v-if="item.repair_option_sub_name" class="info-item">
<text class="label" v-if="item.is_inspection==2">维保小项 </text>
<text class="label" v-if="item.is_inspection==3">服务小项 </text>
<text class="infoSpan">{{ item.repair_option_sub_name }}</text>
</view>
<view v-if="item.elevator_no" class="info-item">
<text class="label">设备编号 </text>
<text class="infoSpan">{{ item.elevator_no }}</text>
</view>
<view v-if="item.repair_floor" class="info-item">
<text class="label">设备位置 </text>
<text class="infoSpan">{{ item.repair_floor }}</text>
</view>
<view class="info-item">
<text class="label" v-if="item.is_inspection==2">维保类型 </text>
<text class="label" v-if="item.is_inspection==3">服务类型 </text>
<text class="infoSpan">{{ item.wb_types }}</text>
</view>
<view class="info-item" v-if="item.wb_types=='维修'">
<text class="label">到场时间 </text>
<text class="infoSpan">{{ item.arrival_time }}</text>
</view>
<!-- <view class="info-item">
<text class="label">维保位置 </text>
<text class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+""+(item.repair_room_no?"-"+item.repair_room_no+'':'')}}</text>
</view> -->
<view v-if="item.fault_detail" class="info-item">
<text class="label" v-if="item.is_inspection==2">维保内容 </text>
<text class="label" v-if="item.is_inspection==3">服务内容 </text>
<text class="infoSpan">{{item.fault_detail}}</text>
</view>
<view v-if="item.fault_proposal" class="info-item">
<text class="label">更换配件 </text>
<text class="infoSpan">{{ item.fault_proposal }}</text>
</view>
<view class="info-item">
<text class="label" v-if="item.is_inspection==2">维保时间 </text>
<text class="label" v-if="item.is_inspection==3">服务时间 </text>
<text class="infoSpan">{{item.repair_time}}</text>
</view>
<view class="info-item box box-between" v-if="item.ufList">
<view class="label box">  :</view>
<view class="infoSpan box">
<view class="box box-column" style="color: #aaaaaa;font-size: 26upx;">
<view @tap="onOpenDoc(item)" v-for="(item, i) in item.ufList" :key="i"
style="margin: 8upx 0upx;font-size: 28upx;color: #00C277;padding-right: 20upx;">
<view>{{item.file_name+"."+item.file_type}}</view>
</view>
</view>
</view>
</view>
<view class="img-box">
<image v-for="(itemImg,imgIndex) in item.pictures" :key="imgIndex" :src="formatImgUrl(itemImg)"
mode="" @click="vbPicture(new Array(formatImgUrl(itemImg)))"></image>
</view>
</view>
</view>
<view class="details">
<view class="detail_msg">
<view class="dateTit" style="padding: 24upx 0;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">维保信息人信息</text>
</view>
<view class="info-item">
<text class="label" v-if="item.is_inspection==2">维保人员 </text>
<text class="label" v-if="item.is_inspection==3">服务人员 </text>
<text class="infoSpan">{{item.repair_person_name}}</text>
</view>
<view class="info-item" @click="callPhone(item.repair_person_phone)">
<text class="label">联系方式 </text>
<text class="infoSpan" style="color: #00C277;">{{item.repair_person_phone}}</text>
</view>
</view>
</view>
<!-- <view class="details" v-if="item.reply_flag=='1'">
<view class="detail_msg">
<view class="info-item">
<text class="label">回复内容 </text>
<text class="infoSpan">{{item.reply_content}}</text>
</view>
<view class="info-item" >
<text class="label">回复时间 </text>
<text class="infoSpan">{{ formatDate(item.reply_date,'dateTime')}}</text>
</view>
<view class="img-box" >
<image v-for="(itemImg,imgIndex) in item.replyPictures" :key="imgIndex" :src="itemImg" mode=""></image>
</view>
</view>
</view> -->
<view class="details" style="padding: 24upx;">
<view class="dateTit" style="padding: 24upx 0;">
<view class="leftIcon">
</view>
<text style="font-size:32upx;color:#333;font-weight: 600;">审核反馈</text>
</view>
<view class="details" style="background-color: #F2F6FA;margin: unset;margin-top: 24upx;"
v-if="item.reply_flag!='0'" v-for="(reply,replyIndex) in item.replyList" :key="replyIndex">
<view class="detail_msg">
<view class="info-item">
<text class="label">审核人员</text>
<text class="infoSpan">{{reply.real_name}}</text>
</view>
<view class="info-item">
<text class="label">审核时间</text>
<text class="infoSpan">{{ formatDate(reply.reply_date,'dateTime')}}</text>
</view>
<view class="info-item" v-if="item.reply_flag==1">
<text class="label">拒绝理由</text>
<text class="infoSpan">{{reply.reply_content}}</text>
</view>
<view class="img-box">
<image v-for="(itemImg,imgIndex) in reply.replyPictures" :key="imgIndex"
:src="formatImgUrl(itemImg)" mode=""
@click="vbPicture(new Array(formatImgUrl(itemImg)))">
</image>
</view>
</view>
</view>
</view>
<view style="clear: both;"></view>
<view v-if="item.reply_flag=='0'" style="margin-bottom: 60upx;" class="occupied"></view>
<!-- ||item.reply_flag=='1' -->
<!-- <view v-if="item.reply_flag=='0'||item.reply_flag=='1'" class="footer-btn" @click="circulation()"><view class="btn">回复</view></view> -->
<view v-if="item.reply_flag=='0'"
style="position: fixed;bottom:0upx;height: 50upx;width: 100%;z-index: 88;">
<!-- uni-popup ref="butPopup" type="bottom" -->
<view>
<view class="footer-btn footer-btn-two batchBtn">
<view class="no-btn" @click="circulation()">拒绝</view>
<view class="s-btn" @click="submit()">通过</view>
</view>
</view>
</view>
<uni-popup ref="popup" type="bottom" style="z-index: 999;">
<view class="popup-ward">
<view class="popup-title">
<text>请填写回复内容</text>
</view>
<view class="ipt-box">
<textarea v-model="replyContent" placeholder-style="color:#BDC4D2" placeholder="请输入回复内容" />
</view>
<view class="up-text">
<text>上传图片</text>
</view>
<view class="pic">
<view class="img-box">
<view class="img-item" v-for="(item, index) in imgs" :key="index">
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png"
mode=""></image>
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
</view>
<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 2">
<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
</view>
</view>
</view>
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储传输处理涉及国家秘密企业秘密以及敏感信息违者将严肃问责追责!</view>
<view class="footer-btn footer-btn-two" style="position: absolute;margin-bottom: 20upx;">
<view class="no-btn" @click="closeCirculation()">取消</view>
<view class="s-btn" @click="replyFaultRepairInfo()">确定</view>
</view>
</view>
</uni-popup>
<l-file ref="lFile" @up-success="onSuccess"></l-file>
<!-- <view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
<view style="background: white;height: 160upx;width: 100%;border-radius: 10upx 10upx 0upx 0upx;position: absolute;bottom: 0upx;">
<view @click="photo" style="border-bottom: 1px solid #000000; border-radius: 10upx 10upx 0upx 0upx; height: 80upx;line-height: 80upx;text-align: center;">
拍摄
</view>
<view @click="getImage" style="height: 80upx;line-height: 80upx;text-align: center;">
从相册选择
</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import {
getFaultRepairInfoById,
replyFaultRepairInfo,
finishFault
} from '@/common/api.js';
import {
callbackRequest,
getStorage,
alertTip,
formatDate,
sureAlterTip,
convertImgToBase64,
vbPicture,
callPhone,
wxSdk,
formatImgUrl,
uploadImg,
} from '@/common/util.js';
import UniPopup from '@/components/uni-popup/uni-popup2.vue';
import lFile from '@/components/l-file/l-file.vue';
import {
pathToBase64
} from '@/js_sdk/mmmm-image-tools/index.js';
export default {
components: {
UniPopup,
lFile
},
data() {
return {
callPhone: callPhone,
vbPicture: vbPicture,
formatImgUrl: formatImgUrl,
userInfo: '',
formatDate: formatDate,
item: {},
persons: [{
name: '',
id: ''
}],
index: 0,
pageTitle: ['报修', '报事'],
id: 0,
userId: getStorage('userInfo').id,
imgs: [],
imgsId: [],
replyContent: "",
showAlert: false,
}
},
onLoad(option) {
this.userInfo = getStorage('userInfo');
this.id = option.id || 0;
this.getFaultRepairInfoById();
},
methods: {
onOpenDoc(item) {
let url = this.getIcon(item);
console.log(url);
/* 下载返回临时路径(退出应用失效) */
this.$refs.lFile.download(url)
.then(path => {
/* 预览 */
this.$refs.lFile.open(path);
});
},
getIcon(item) {
return "http://hz.witrear.logplat.top:27003/appImageDir/zhhq_sj/" + item.id + "." + item.file_type;
},
circulation() {
this.$refs.popup.open();
//this.closeButPopup();
},
closeCirculation() {
this.$refs.popup.close()
},
submit() {
var _that = this;
// if(_that.item.reply_flag=='0'){
// alertTip("您还没有进行回复,请先回复");
// return;
// }
let params = {
method: finishFault,
data: {
userId: _that.userId,
id: _that.id
}
};
uni.showModal({
title: '提示',
content: '是否确认通过',
success: function(res) {
if (res.confirm) {
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
// _that.$set(_that.item,'reply_flag',"2");
// alertTip(res.returnMsg);
const url = '/pages/malfunc-check/repair-record-wb?faultType=' +
_that.item.fault_type;
alertTip('已通过');
setTimeout(function() {
uni.redirectTo({
url
});
}, 1000);
} else {
alertTip(res.returnMsg);
}
});
}
}
});
},
getFaultRepairInfoById() {
let params = {
method: getFaultRepairInfoById,
data: {
userId: this.userId,
id: this.id
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
this.item = res.returnData;
} else {
alertTip(res.returnMsg);
}
});
},
replyFaultRepairInfo() {
if (this.replyContent == "") {
alertTip("请输入拒绝理由");
return;
}
let params = {
method: replyFaultRepairInfo,
data: {
userId: this.userId,
id: this.id,
replyContent: this.replyContent,
replyPic1: this.imgsId[0],
replyPic2: this.imgsId[1],
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
alertTip('已拒绝');
this.closeCirculation();
this.getFaultRepairInfoById();
} else {
alertTip(res.returnMsg);
}
});
},
cancel: function() {
this.$refs.popup.close();
},
// chooseImg() {
// let _this = this;
// uni.chooseImage({
// count: 3,
// success: res => {
// let param = '';
// let imgArr = res.tempFilePaths;
// for (var i = 0; i < imgArr.length; i++) {
// param = imgArr[i];
// convertImgToBase64(param, function(base64) {
// _this.imgs.push(base64);
// });
// }
// }
// });
// },
async chooseImg() {
let chec = 0;
let sty = [];
let _this = this;
uni.showActionSheet({
itemList: ['拍照', '相册'],
success: function(resp) {
chec = resp.tapIndex;
if (chec == 0) {
sty = ['camera']; //从相册相机选择
} else {
sty = ['album']; //从相册相机选择
}
uni.chooseImage({
count: 2,
sizeType: ['compressed'],
sourceType: sty,
quality: 1,
success: async function(res) {
let resData = res.tempFilePaths;
for (let i = 0; i < resData.length; i++) {
if (_this.imgs.length > 2) {
break;
}
uni.getImageInfo({
src: resData[i],
success: async (path) => {
convertImgToBase64(path.path,
async function(base64) {
if (_this.imgs.length <
2) {
// _this.imgs.push(base64);
uni.showLoading({
title: '图片上传中'
})
let blength =
base64.length;
let glength = 7500;
if (blength <=
glength) {
let uploadParam = {
base64: base64,
userId: getStorage(
'userInfo'
)
.userId +
i,
groupEnd: '1'
}
await uploadImg
(
uploadParam
)
.then(
resu => {
resu =
resu
.data;
uni
.hideLoading();
if (resu
.returnCode !=
1
) {
alertTip
(resu
.returnMsg
);
} else {
_this
.imgs
.push(
base64
);
_this
.imgsId
.push(
resu
.returnData +
".jpg"
);
}
});
} else {
let fnum =
parseInt(
blength /
glength
);
for (let j =
1; j <
fnum +
1; j++) {
if (j ==
fnum) {
let groupBase =
base64
.slice(
(j -
1
) *
glength
);
console
.log(
groupBase
.length,
"groupBaselength"
);
let uploadParam = {
base64: groupBase,
userId: getStorage(
'userInfo'
)
.userId +
i,
groupEnd: '1'
}
await uploadImg
(
uploadParam
)
.then(
resu => {
resu =
resu
.data;
if (resu
.returnCode ==
1
) {
_this
.imgs
.push(
base64
);
_this
.imgsId
.push(
resu
.returnData +
".jpg"
);
} else {
uni
.hideLoading();
alertTip
(resu
.returnMsg
);
return;
}
}
);
} else {
let groupBase =
base64
.slice(
(j -
1
) *
glength,
glength *
j
);
let uploadParam = {
base64: groupBase,
userId: getStorage(
'userInfo'
)
.userId +
i,
groupEnd: '0'
}
await uploadImg
(
uploadParam
)
.then(
resu => {
resu =
resu
.data;
if (resu
.returnCode ==
1
) {} else {
uni
.hideLoading();
alertTip
(resu
.returnMsg
);
return;
}
}
);
}
}
uni
.hideLoading();
}
}
});
},
});
}
}
});
},
fail: function(resp) {
console.log(resp.errMsg);
}
});
},
//删除图片
removeImg(index) {
this.imgs.splice(index, 1);
this.imgsId.splice(index, 1);
},
}
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.batchBtn {
position: absolute;
height: 140upx;
background: white;
padding-top: 30upx;
.btn1 {
width: 40%;
margin-left: 7%;
margin-right: 6%;
border-radius: 10upx;
}
.btn2 {
width: 40%;
border-radius: 10upx;
}
.btn3 {
width: 28%;
margin-left: 4%;
border-radius: 10upx;
}
.btn4 {
width: 28%;
margin-left: 4%;
border-radius: 10upx;
}
.btn5 {
width: 28%;
margin-left: 4%;
border-radius: 10upx;
background: #348CF2;
}
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: 70upx auto 0;
}
}
}
.container {
.details {
font-size: 28upx;
color: #555555;
// height: 550upx;
background: white;
margin: 15upx;
border-radius: 15upx;
.detail_msg {
margin-left: 24upx;
border-radius: 10upx;
.info-item {
border-bottom: 1px solid #f8f8f8;
line-height: 96upx;
.label {
display: inline-block;
width: 188upx;
font-size: 28upx;
color: #333;
font-weight: 400;
}
}
.status {
.infoSpan {
color: #00c277;
}
.infoSpan2 {
color: #FB8107;
}
}
.img-box {
// background: #fff;
image {
width: 200upx;
height: 200upx;
margin: 20upx 20upx 0 0;
}
}
}
}
.interviewee {
background: #FFFFFF;
width: 625rpx;
height: 270rpx;
border-radius: 10rpx;
.p-title {
background: #DCDFE6;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
}
.center {
padding: 26upx;
display: flex;
align-items: center;
position: relative;
border-bottom: 1px solid #eee;
.input_left {
font-size: 30rpx;
font-weight: bold;
}
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
margin-right: 40upx;
margin-left: 10upx;
font-size: 28upx;
line-height: 50upx;
color: #666;
width: 72%;
}
}
.bu {
margin: 10rpx;
.cancel {
width: 45%;
height: 80rpx;
margin-left: 10rpx;
background: #cc;
}
.confirm {
width: 45%;
height: 80rpx;
margin-right: 10rpx;
margin-top: -80rpx;
background: #00c277;
}
}
}
}
.dateTit {
width: 100%;
display: flex;
align-items: center;
// margin-left: 16upx;
image {
width: 35upx;
height: 35upx;
margin-right: 10upx;
}
.leftIcon {
width: 8upx;
height: 30upx;
background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
border-radius: 5px;
margin-right: 10upx;
}
}
.common-shade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
.box {
display: flex;
display: -webkit-flex;
}
.box-row-reverse {
flex-direction: row;
}
/*上下排列*/
.box-column {
flex-direction: column;
}
/*上下排列*/
.box-left {
justify-content: flex-start;
}
/*居右*/
.box-right {
justify-content: flex-end;
}
/*居左*/
.box-center {
justify-content: center;
}
/*居中*/
.box-between {
justify-content: space-between;
}
/*两端对齐*/
.box-align-center {
align-items: center;
}
.box-wrap {
flex-wrap: wrap;
}
.footer-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding-top: unset;
}
.no-btn {
width: 160*2upx;
height: 44*2upx;
background: #E0F6F5;
border-radius: 22*2upx;
font-size: 16*2upx;
color: #00ADA6;
line-height: 44*2upx;
text-align: center;
}
.s-btn {
width: 160*2upx;
height: 44*2upx;
background: linear-gradient(94deg, #5BCE9D 0%, #00ADA6 100%);
border-radius: 22*2upx;
font-size: 16*2upx;
color: #FFFFFF;
line-height: 44*2upx;
text-align: center;
}
.popup-ward {
background: white;
width: 100%;
height: 365*2upx;
position: relative;
border-radius: 40upx 40upx 0 0;
padding: 0upx 48upx;
overflow: hidden;
.popup-title {
font-weight: bold;
font-size: 18*2upx;
color: #333333;
margin-top: 40upx;
}
.ipt-box {
margin-top: 24upx;
textarea {
height: 99*2upx;
background: #F2F6FA;
border-radius: 6px 6px 6px 6px;
padding-top: 24upx;
padding-left: 24upx;
font-size: 14*2upx;
}
}
.up-text {
margin-top: 24upx;
font-weight: bold;
font-size: 18*2upx;
color: #0E1A24;
}
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 67*2upx;
height: 67*2upx;
background: #E6E8EE;
border-radius: 5*2upx;
// margin: 0 20upx 20upx 0upx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: unset;
}
}
}
</style>