flying-monkey/pagesA/workOrder/workOrderAudit.vue

<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="审核工单"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: 0 -30rpx;" class="bacf">
				<view class="work-order-audit">
					<view class="item disac">
						<view class="title">工单编号：</view>
						<input type="text" disabled class="input" :value="auditData.order_number" />
					</view>
					<view class="item disac">
						<view class="title">项目名称：</view>
						<input type="text" disabled class="input input-black" :value="auditData.project_name" />
					</view>
					<view class="item disac">
						<view class="title">客户名称：</view>
						<input type="text" disabled class="input input-black" :value="auditData.member_name" />
					</view>
					<view class="item">
						<view class="son disac">
							<view class="title">结算方式：</view>
							<input type="text" disabled class="input" :value="auditData.settlement_type" />
						</view>
						<view class="son disac">
							<view class="title">支付方式：</view>
							<input type="text" disabled class="input" :value="auditData.pay_type" />
						</view>
					</view>
				</view>
				<view class="work-order-cost">
					<view class="list">
						<view class="item disac">
							<view class="title">上门费</view>
							<input type="text" disabled class="input" :value="auditData.artificial_price" />
						</view>
						<view class="item disac">
							<view class="title">税金</view>
							<input type="text" disabled class="input" :value="auditData.tax_price" />
						</view>
						<view class="item disac">
							<view class="title">材料费</view>
							<input type="text" disabled class="input" :value="auditData.material_price" />
						</view>
						<view class="item disac">
							<view class="title">其他费用</view>
							<input type="text" disabled class="input" :value="auditData.other_price" />
						</view>
					</view>
					<view class="item item-center">实际付款：<view class="title-price">￥{{auditData.pay_price}}</view></view>
					<view class="item">
						<view class="title">是否开票</view>
						<view class="btns btns-invoicing">
							<view class="input-radio">
								<view :class="auditData.invoice_type==1?'checked btn':'btn'">
									<image class="img" src="../../static/iocn/icon-yes.png" mode="aspectFill" ></image>
								</view>
								是
							</view>
							<view class="input-radio">
								<view :class="auditData.invoice_type==0?'checked btn':'btn'">
									<image class="img" src="../../static/iocn/icon-yes.png" mode="aspectFill"></image>
								</view>
								否
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title">是否收款</view>
						<view class="btns btns-collection">
							<view class="input-radio">
								<view :class="auditData.is_collection==1?'checked btn':'btn'">
									<image class="img" src="../../static/iocn/icon-yes.png" mode="aspectFill" ></image>
								</view>
								是
							</view>
							<view class="input-radio">
								<view :class="auditData.is_collection==0?'checked btn':'btn'">
									<image class="img" src="../../static/iocn/icon-yes.png" mode="aspectFill"></image>
								</view>
								否
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title disac">提交时间：</view>
						<input type="text" disabled class="input" :value="setTime" />
					</view>
					<view class="item item-textarea">
						<view class="title">备注内容：</view>
						<textarea name="msg" v-model="remarksMsg" cols="30" rows="10" placeholder="请输入备注内容"></textarea>
					</view>
				</view>
				<view class="form-btns">
					<view class="btn" @tap="setFormEv(1)">审核通过</view>
					<view class="btn" @tap="setFormEv(0)">审核不通过</view>
				</view>
			</view>
		</container-subgroup-two>
		<!-- 底部tab -->
		<foot-tab></foot-tab>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import statusNav from '../../components/status-nav.vue';
	import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
	import {
		handleWorkOrderGet
	} from '../../jsFile/public-api.js';
	export default {
		components: {
			'foot-tab' :footTabOne,
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
				remarksMsg:'', //备注信息
				auditData:[], //工单展示数据
				setTime:'', //提交时间
				type: 0, //接口状态
			}
		},
		mounted() {
			
		},
		onLoad(op) {
			if (op.orderId != undefined) {
				this.orderId = op.orderId;
				// 调取获取工单详情事件
				this.getDetail();
			}
		},
		methods: {
			// 获取当前时间
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour  = date.getHours();
				let minute = date.getMinutes();
				
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.setTime = `${year}-${month}-${day} ${hour}:${minute}`
			},
			// 获取工单详情
			getDetail() {
				let params = {
					order_id: this.orderId,
				}
				this.$requst.get('/universal/api.order/audit', params).then(res => {
					console.log('查询接口')
					if (res.code) {
						this.auditData = res.data;
						this.getDate();
					}
				})
			},
			// 提交审核结果
			setFormEv(audit) {
				if(this.checkEmpty()){
					// 提交审核结果
					let params = {
						order_id: this.orderId,
						is_audit: audit,
						settlement_remark: this.remarksMsg
					}
					this.$requst.post('/universal/api.order/audit', params).then(res => {
						if (res.code == 0) {
							this.$toolAll.tools.showToast('提交成功');
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
								// uni.navigateTo({
								// 	url:`/pagesA/workOrder/workOrderLlsit?status='待审批'&statusId=6`
								// })
							},500)
						}
					})
				}
			},
			// 判空事件
			checkEmpty(){
				let result = false;
				if(this.remarksMsg == '') {
					this.$toolAll.tools.showToast('请填写备注信息');
				} else {
					result = true;
				}
				return result;
			},
		}
	}
</script>

<style>
	.work-order-audit {
		margin-top: -10rpx;
		background-color: #FFFFFF;
	}

	.work-order-audit .item {
		display: flex;
		padding: 20rpx 40rpx;
		border-bottom: 2rpx solid #ececec;
	}

	.work-order-audit .item .title {
		width: 150rpx;
		font-size: 28rpx;
		white-space: nowrap;
		/* flex: 1; */
	}

	.work-order-audit .item .input {
		width: calc(100% - 150rpx);
		font-size: 27rpx;
		color: #8b8b8b;
		padding-left: 0;
	}
	
	.work-order-audit .item .son{
		display: flex;
		width: 50%;
	}
	.work-order-audit .item:last-child{
		border-bottom: 0;
	}
	
	.work-order-cost{
		width: 96%;
		padding: 0 2%;
		background-color: #f7f7f7;
	}
	
	.work-order-cost .item{
		display: flex;
		padding: 20rpx;
		margin-top: 10rpx;
		background-color: #FFFFFF;
	}
	
	.work-order-cost .item .title {
		width: 150rpx;
		font-size: 28rpx;
		white-space: nowrap;
		/* flex: 1; */
	}
	
	.work-order-cost .item .input {
		width: calc(100% - 150rpx);
		font-size: 27rpx;
		color: #8b8b8b;
		padding-left: 0;
	}
	
	.work-order-cost .list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.work-order-cost .list .item{
		box-sizing: border-box;
		width: calc(50% - 5rpx);
	}
	.work-order-cost .list .item .title{
		color: #999999;
	}
	.work-order-cost .list .item .input{
		color: #333333;
		text-align: right;
	}
	.work-order-cost .item.item-center{
		justify-content: center;
		font-size: 32rpx;
		white-space: nowrap;
		text-align: center;
	}
	.work-order-cost .item.item-center .title-price{
		color: #e52e2e;
	}
	
	.work-order-cost .item .btns{
		display: flex;
	}
	
	.btns .input-radio{
		display: flex;
		align-items: center;
		font-size: 27rpx;
	}
	.btns .input-radio:nth-of-type(1){
		margin-right: 40rpx;
	}
	.btns .input-radio .btn{
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 28rpx;
		height: 28rpx;
		border-radius: 100%;
		background-color: #f7f7f7;
		border: 2rpx solid #eee;
		margin-right: 14rpx;
	}
	.btns .input-radio .btn image{
		width: 0;
		height: 0;
	}
	.btns .input-radio .btn.checked{
		background-color: #00a2e9;
		border: 2rpx solid #00a2e9;
	}
	.btns .input-radio .btn.checked image{
		width: 100%;
		height: 100%;
	}
	.work-order-cost .item.item-textarea{
		flex-wrap: wrap;
	}
	.work-order-cost .item.item-textarea textarea{
		width: 100%;
		height: 160rpx;
		font-size: 27rpx;
		background-color: #f5f5f5;
		padding: 16rpx;
		margin-top: 20rpx;
	}
	.item-textarea textarea::-webkit-input-placeholder { 
		color: #ccc; 
	} 
	.item-textarea textarea:-moz-placeholder {
		color: #ccc; 
	} 
	.item-textarea textarea::-moz-placeholder { 
		color: #ccc; 
	} 
	.item-textarea textarea:-ms-input-placeholder { 
		color: #ccc; 
	}
	.form-btns{
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: #f7f7f7;
		padding: 50rpx 0;
	}
	.form-btns .btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40%;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #d50606;
	}
	.form-btns .btn:nth-of-type(1){
		background-color: #009944;
	}
</style>