flying-monkey/pages/workOrder/workorderTwo.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';
	import {handleWorkOrderGet,handleWorkOrderSubmit,uploadImg} from '../../jsFile/public-api.js';
    export default {
        components: {
            footTabOne,
            statusNav,
            containerSubgroupTwo,
			yyMmDdHhSs
        },
        data() {
            return {
                // isrideo: true,
                accessoriesData: [],
				targetObj:'',
				temporaryImg:[]//暂存图片id
            }
        },
		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(op) {
			this.targetObj = uni.getStorageSync('targetObj');
			if(op.id!=undefined) {
				this.orderId = op.id;
				// 调用查询填写维保单信息
				this.handleWorkOrderGet(this.orderId);
			}
		},
        methods: {
			// 查询填写维保单信息
			handleWorkOrderGet(id){
				let params = {
					order_id:this.orderId,
					steps:2
				}
				handleWorkOrderGet(params).then(res=>{
					if(res.code) {
						let dataObj = res.data;
						this.targetObj.startTime = dataObj.start_times;
					}
				})
			},
			// 维保图片选择
			chooseImg(){
				uni.chooseImage({
					count:9,
					sourceType:['album','camera'],
					success: (res) => {
						let imgsrc = res.tempFilePaths;
						imgsrc.forEach(item=>{
							uploadImg({path:item}).then(res=>{
								if(res.code) {
									this.temporaryImg.push(res.data.id);
									this.targetObj.maintenanceImgList.push(item);
								} else {
									this.$toolAll.tools.showToast(res.msg);
								}
							})
						})
					}
				})
			},
			// 删除维保图片
			delImg(index) {
				this.targetObj.maintenanceImgList.splice(index,1);
				this.temporaryImg.splice(index,1);
			},
			// 更换配件切换事件
            //isrideoFun(is) {
            //    this.isrideo = is;
			//	this.targetObj.ifParts = this.isrideo;
            //},
            goWorkorderTwo(){
				if(this.checkEmpty()) {
					let accessoryArr = [];
					if(this.accessoriesData.length) {
						this.accessoriesData.forEach(item=>{
							let obj = {
								id:item.id,
								quantity:item.num
							}
							accessoryArr.push(obj);
						})
					}
					let params = {
						order_id:this.orderId,
						steps:2,
						completion_time:this.targetObj.endTime,//结束时间
						work_explanation:this.targetObj.workDescribe,//工作描述
						failure_reason:this.targetObj.faultReason,//维保原因
						maintenance_pictures:this.temporaryImg.join(','),//维保图片
						maintenance_more:this.targetObj.maintenancePersonnel,//维保人员
						accessory:accessoryArr,//配件列表
						completion_address:'完工地址'
					}
					handleWorkOrderSubmit(params).then(res=>{
						if(res.code) {
							uni.navigateTo({
								url: `/pages/workOrder/workOrderThree?id=${this.orderId}`
							}) 
						}
					})
				}
				
            },
			// 判空事件
			checkEmpty(){
				let result = false;
				if(!this.targetObj.endTime) {
					this.$toolAll.tools.showToast('请选择结束时间');
				} else if(!this.targetObj.workDescribe) {
					this.$toolAll.tools.showToast('请填写工作描述');
				} else if(this.targetObj.maintenanceImgList.length==0) {
					this.$toolAll.tools.showToast('请上传维保图片');
				} else if(!this.targetObj.faultReason) {
					this.$toolAll.tools.showToast('请填写维保原因');
				} else if(!this.targetObj.maintenancePersonnel) {
					this.$toolAll.tools.showToast('请填写维保人员');
				} else {
					result = true;
				}
				return result;
			},
            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>