495 lines
17 KiB
Vue
495 lines
17 KiB
Vue
<template>
|
||
<view class="content">
|
||
<statusNav navBarTitle="处理工单" returnColor="#c2c2c2"></statusNav>
|
||
<container-subgroup-two>
|
||
<view slot="content" style="margin: -20rpx -25rpx 0rpx;">
|
||
<view class="work-order-schedule">
|
||
<view class="li">
|
||
<view class="icon icon-after">1</view>
|
||
<view class="text">签到执行</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="icon on icon-after">2</view>
|
||
<view class="text">填写维保单</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="icon">3</view>
|
||
<view class="text">结算审核</view>
|
||
</view>
|
||
</view>
|
||
<view class="work-order-from">
|
||
<view class="li">
|
||
<view class="title">工单编号：</view>
|
||
<input type="text" class="input" disabled :value="targetObj.workOrderNo" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">项目编号：</view>
|
||
<input type="text" class="input" disabled :value="targetObj.projectNo" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">项目名称：</view>
|
||
<input type="text" class="input input-black" disabled :value="targetObj.projectName" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">产品类型：</view>
|
||
<input type="text" class="input input-black" disabled :value="targetObj.productType" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">安装位置：</view>
|
||
<input type="text" class="input input-black" disabled :value="targetObj.installLocation" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">故障类型：</view>
|
||
<input type="text" class="input input-black" disabled :value="targetObj.faultType" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">服务方式：</view>
|
||
<input type="text" class="input input-black" disabled :value="targetObj.serviceMode" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">故障说明：</view>
|
||
<textarea auto-height disabled class="input input-black" :value="targetObj.faultExplain" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">故障图片：</view>
|
||
<view class="input add-display">
|
||
<view class="">
|
||
<image class="img" v-for="(item,index) in targetObj.faultImgList" :src="item" mode="aspectFill" lazy-load></image>
|
||
</view>
|
||
<!-- <view class="add-img">
|
||
<image class="icon" src="../../static/iocn/jia.png" mode="" lazy-load></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">开始时间：</view>
|
||
<input type="text" disabled class="input" :value="targetObj.startTime" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">结束时间：</view>
|
||
<input type="text" @tap="openDatetimePicker" disabled class="input input-black" :value="targetObj.endTime" placeholder="请选择结束时间" />
|
||
<yy-mm-dd-hh-ss ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2122"></yy-mm-dd-hh-ss>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保用时：</view>
|
||
<input type="text" disabled class="input" :value="targetObj.maintenanceTime" placeholder="请选择结束时间,进行结算" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保费用：</view>
|
||
<input type="text" disabled class="input input-black" placeholder="" v-model="maintenanceFee" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">等待时长：</view>
|
||
<input type="text" disabled class="input" :value="targetObj.waitingTime" placeholder="请选择结束时间,进行结算" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">主维保人：</view>
|
||
<input type="text" disabled class="input input-black" :value="targetObj.maintainer" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">更换配件：</view>
|
||
<view class="rideo" style="margin-left: 14rpx;">
|
||
<view class="isrideo" @click="isrideoFun(true)">
|
||
<view class="icon " :class="isrideo?'on':''">
|
||
<view class="icon-content"></view>
|
||
</view>
|
||
<view class="">是</view>
|
||
</view>
|
||
<view class="isrideo" @click="isrideoFun(false)">
|
||
<view class="icon" :class="isrideo?'':'on'">
|
||
<view class="icon-content"></view>
|
||
</view>
|
||
<view class="">否</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="work-order-from">
|
||
<view class="li">
|
||
<view class="title">工作描述：</view>
|
||
<textarea maxlength="-1" v-model="targetObj.workDescribe" class="input input-black line-h36" placeholder="请填写工作描述" style="height: 110rpx;" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保图片：</view>
|
||
<view class="input add-display">
|
||
<view class="posir" v-if="targetObj.maintenanceImgList.length!=0" v-for="(item,index) in targetObj.maintenanceImgList" :key="index">
|
||
<image class="img" :src="item" mode="aspectFill" lazy-load></image>
|
||
<i @tap="delImg(index)" class="icon icon-del-white posia" style="font-size: 24rpx;top: 10rpx;right: 20rpx;"></i>
|
||
</view>
|
||
<view class="add-img" @tap="chooseImg">
|
||
<image class="icon" src="../../static/iocn/jia.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">故障原因：</view>
|
||
<textarea maxlength="-1" v-model="targetObj.faultReason" class="input input-black line-h36" placeholder="请填写故障原因" style="height: 110rpx;" />
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">维保人员：</view>
|
||
<input type="text" v-model="targetObj.maintenancePersonnel" class="input input-black" placeholder="请填写维保人员" />
|
||
</view>
|
||
</view>
|
||
<view class="cost-breakdown">
|
||
<view class="cost-breakdown-title">
|
||
<view class="title">费用明细</view>
|
||
<view @click="addMountingsList()" class="btn">添加配件</view>
|
||
</view>
|
||
</view>
|
||
<view class="cost-breakdown-content">
|
||
<view class="title">
|
||
<view class="li">序号</view>
|
||
<view class="li">配件名称</view>
|
||
<view class="li">数量</view>
|
||
<view class="li">价格</view>
|
||
</view>
|
||
<view class="text" v-for="(item,index) in accessoriesData">
|
||
<view class="li">{{item.id}}</view>
|
||
<view class="li">{{item.name}}</view>
|
||
<view class="li">{{item.num}}</view>
|
||
<view class="li">{{item.sum}}元</view>
|
||
</view>
|
||
</view>
|
||
<button class="submit-button" @click="goWorkorderTwo" type="default">下一步</button>
|
||
</view>
|
||
</container-subgroup-two>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import statusNav from '../../components/status-nav.vue';
|
||
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
|
||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||
import yyMmDdHhSs from '@/components/dates/yy-mm-dd-hh-ss.vue';
|
||
export default {
|
||
components: {
|
||
footTabOne,
|
||
statusNav,
|
||
containerSubgroupTwo,
|
||
yyMmDdHhSs
|
||
},
|
||
data() {
|
||
return {
|
||
isrideo: true,
|
||
accessoriesData: [],
|
||
targetObj:''
|
||
}
|
||
},
|
||
computed:{
|
||
maintenanceFee(){
|
||
let totalPrice = '0.00';
|
||
if(this.accessoriesData.length) {
|
||
this.accessoriesData.forEach(item=>{
|
||
totalPrice = this.$toolAll.tools.operationEv(totalPrice*1, item.sum*1, "+", 2);
|
||
})
|
||
}
|
||
return `￥${totalPrice}元`;
|
||
}
|
||
},
|
||
onShow() {
|
||
// uni.removeStorageSync('partsList')
|
||
this.accessoriesData = uni.getStorageSync('partsList');
|
||
},
|
||
onLoad() {
|
||
this.targetObj = uni.getStorageSync('targetObj');
|
||
},
|
||
methods: {
|
||
// 维保图片选择
|
||
chooseImg(){
|
||
uni.chooseImage({
|
||
count:9,
|
||
sourceType:['album','camera'],
|
||
success: (res) => {
|
||
let imgsrc = res.tempFilePaths;
|
||
imgsrc.forEach(item=>{
|
||
this.targetObj.maintenanceImgList.push(item);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 删除维保图片
|
||
delImg(index) {
|
||
this.targetObj.maintenanceImgList.splice(index,1);
|
||
},
|
||
// 更换配件切换事件
|
||
isrideoFun(is) {
|
||
this.isrideo = is;
|
||
this.targetObj.ifParts = this.isrideo;
|
||
},
|
||
goWorkorderTwo(){
|
||
console.log(this.targetObj);
|
||
// uni.navigateTo({
|
||
// url: "/pages/workOrder/workOrderThree"
|
||
// })
|
||
},
|
||
addMountingsList() {
|
||
uni.navigateTo({
|
||
url: "/pages/mountingsList/mountingsList"
|
||
})
|
||
|
||
},
|
||
// 打开picker
|
||
openDatetimePicker() {
|
||
this.$refs.myPicker.show();
|
||
},
|
||
// 关闭picker
|
||
closeDatetimePicker() {
|
||
this.$refs.myPicker.hide();
|
||
},
|
||
handleSubmit(e) {
|
||
// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
|
||
this.targetObj.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
|
||
this.targetObj.maintenanceTime = this.$toolAll.tools.returnTimeFormat(this.targetObj.startTime,this.targetObj.endTime);
|
||
this.targetObj.waitingTime = this.$toolAll.tools.returnTimeFormat(this.targetObj.declarationTime,this.targetObj.endTime);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.submit-button {
|
||
width: 686rpx;
|
||
border-radius: 50rpx;
|
||
height: 90rpx;
|
||
background-color: #02A2ea;
|
||
line-height: 90rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 60rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.work-order-schedule {
|
||
display: flex;
|
||
padding: 22rpx 29rpx;
|
||
margin-top: 10rpx;
|
||
background-color: #FFFFFF;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.work-order-schedule .icon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
color: #FFFFFF;
|
||
margin: auto;
|
||
position: relative;
|
||
font-size: 24rpx;
|
||
margin-bottom: 10rpx;
|
||
text-align: center;
|
||
line-height: 38rpx;
|
||
background-color: #999999;
|
||
border-radius: 50%;
|
||
|
||
}
|
||
|
||
.work-order-schedule .on {
|
||
background-color: #5391F3
|
||
}
|
||
|
||
.work-order-schedule .text {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.work-order-schedule .icon-after::after {
|
||
content: "";
|
||
width: 265rpx;
|
||
height: 2rpx;
|
||
background-color: #999999;
|
||
position: absolute;
|
||
top: 19rpx;
|
||
left: 38rpx;
|
||
}
|
||
|
||
.work-order-from {
|
||
margin-top: 10rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.work-order-from .li {
|
||
display: flex;
|
||
padding: 20rpx 40rpx;
|
||
border-bottom: 2rpx solid #ececec;
|
||
}
|
||
|
||
.work-order-from .li .title {
|
||
font-size: 26rpx;
|
||
/* width: 133rpx; */
|
||
}
|
||
|
||
.work-order-from .li .input {
|
||
font-size: 24rpx;
|
||
color: #8b8b8b;
|
||
flex: 1;
|
||
padding-left: 15rpx;
|
||
}
|
||
|
||
.work-order-from .li .input .img {
|
||
/* width: 169rpx; */
|
||
width: 160rpx;
|
||
height: 127rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.work-order-from .li .input .add-img {
|
||
/* width: 136rpx; */
|
||
width: 160rpx;
|
||
height: 127rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
background-color: #DCDCDC;
|
||
align-items: center;
|
||
}
|
||
|
||
.work-order-from .li .input .add-img .icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.work-order-from .li .add-display {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.work-order-from .li .input-black {
|
||
color: #292929;
|
||
}
|
||
|
||
.cost-breakdown-title {
|
||
padding: 0rpx 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.cost-breakdown-title .title {
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
display: flex;
|
||
margin-bottom: 28rpx;
|
||
|
||
align-items: center;
|
||
}
|
||
|
||
.cost-breakdown-title .title::before {
|
||
content: "";
|
||
display: block;
|
||
width: 4rpx;
|
||
height: 30rpx;
|
||
margin-right: 22rpx;
|
||
|
||
background-color: #00a2e9;
|
||
}
|
||
|
||
.cost-breakdown-title .btn {
|
||
color: #00a2e9;
|
||
text-align: center;
|
||
width: 118rpx;
|
||
height: 50rpx;
|
||
border-radius: 14rpx;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
border: 2rpx solid #00a2e9;
|
||
|
||
}
|
||
|
||
.cost-breakdown-content {
|
||
padding: 0rpx 40rpx;
|
||
}
|
||
|
||
.cost-breakdown-content .title {
|
||
display: flex;
|
||
margin-bottom: 40rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cost-breakdown-content .title .li {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
.cost-breakdown-content .text {
|
||
display: flex;
|
||
margin-bottom: 40rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cost-breakdown-content .text .li {
|
||
color: #4c4c4c;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.cost-breakdown-content .text .li:nth-child(1) {
|
||
width: 80rpx;
|
||
}
|
||
|
||
.cost-breakdown-content .text .li:nth-child(2) {
|
||
flex: 1;
|
||
}
|
||
|
||
.cost-breakdown-content .text .li:nth-child(3) {
|
||
width: 80rpx;
|
||
}
|
||
|
||
.cost-breakdown-content .text .li:nth-child(4) {
|
||
width: 120rpx;
|
||
}
|
||
|
||
.cost-breakdown-content .title .li:nth-child(1) {
|
||
width: 80rpx;
|
||
}
|
||
|
||
.cost-breakdown-content .title .li:nth-child(2) {
|
||
flex: 1;
|
||
}
|
||
|
||
.cost-breakdown-content .title .li:nth-child(3) {
|
||
width: 80rpx;
|
||
}
|
||
|
||
.cost-breakdown-content .title .li:nth-child(4) {
|
||
width: 120rpx;
|
||
}
|
||
|
||
.work-order-from .rideo {
|
||
display: flex;
|
||
}
|
||
|
||
.work-order-from .isrideo {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 41rpx;
|
||
}
|
||
|
||
.work-order-from .isrideo .icon {
|
||
width: 26rpx;
|
||
border: 2rpx solid #818181;
|
||
border-radius: 50%;
|
||
height: 26rpx;
|
||
margin-right: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.work-order-from .isrideo .icon .icon-content {
|
||
width: 19rpx;
|
||
height: 19rpx;
|
||
background-color: #818181;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.work-order-from .isrideo .on {
|
||
border: 2rpx solid #D81E06;
|
||
}
|
||
|
||
.work-order-from .isrideo .on .icon-content {
|
||
background-color: #D81E06
|
||
}
|
||
</style>
|