client_LemonBeans/subPackages/work/executableworkorder.vue

<template>
	<view class="executableworkorder-page">
		<navigation title="可执行工单"></navigation>
		<view class="list-box" v-if="dataList.length>0">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<view class="item-text flex-box">
					<view class="item-text-left">工单名称：</view>
					<view class="item-text-right">{{ item.taskName || '-' }}</view>
				</view>
				<view class="item-text flex-box">
					<view class="item-text-left">工单编号：</view>
					<view class="item-text-right">{{ item.orderNum || '-' }}</view>
				</view>
				<view class="item-text flex-box">
					<view class="item-text-left">计划数量：</view>
					<view class="item-text-right">{{ item.orderAmounts || 0 }}</view>
				</view>
				<view class="item-text flex-box">
					<view class="item-text-left">待生产数量：</view>
					<view class="item-text-right">{{ item.orderAmounts - (item.orderFinishNum || 0)}}</view>
				</view>
				<view class="item-text flex-box">
					<view class="item-text-left">已完成数量：</view>
					<view class="item-text-right">{{ item.orderFinishNum || 0 }}</view>
				</view>
				<view class="positioning-box">
					<view style="color: #3d6df0;" v-if="item.processStatus == 0">未执行</view>
					<view style="color: lawngreen;" v-if="item.processStatus == 1 && item.stopTime == null">执行中</view>
					<view style="color: red;" v-if="item.processStatus == 1 && item.stopTime != null">已送检</view>
				</view>
				<view class="btn-box">
					<view class="btn-item" 
						:style="item.processStatus == 0 || (item.processStatus == 1 && item.stopTime != null)?'':'opacity:.5'"
						 @click="carryout(item)">
						<view>执行</view>
					</view>
					<view class="btn-item btn-item-red"
						:style="item.processStatus == 1 && item.stopTime == null?'':'opacity:.5'" @click="suspend(item)">
						<view>送检</view>
					</view>
					
				</view>
			</view>
		</view>
		<empty v-else text="暂无数据"></empty>
		<!-- 执行确认框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确认执行该工单吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 暂停确认框 -->
		<uni-popup ref="suspendRef" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确认暂停该工单吗？"
				@confirm="suspendConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				equipmentId: '',
				 // 执行事件需要的参数
				carryoutForm:{},
				// 暂停事件需要的参数
				suspendForm:{}
			}
		},
		onLoad(option) {
			this.equipmentId = option.id
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '正在加载...'
				})
				this.$api.listExecuteOrder(this.equipmentId).then(res => {
					this.dataList = res.data
					uni.hideLoading()
				}).catch(err => {})
			},
			// 执行
			carryout(e) {
				// 判断是否可以点击执行按钮
				if (e.processStatus == 0 || (e.processStatus == 1 && e.stopTime != null)) {
				}else {
					return 
				}
				this.carryoutForm = {
					orderId:e.id,
					processId:e.processId,
					taskId:e.taskId,
					tenant:'fb4a88d6f6f24d67953f68c4fe829f63'
				}
				this.$refs.alertDialog.open()
			},
			// 暂停
			suspend(e){
				// 判断如果不是执行中不能点
				if (e.processStatus == 1 && e.stopTime == null) {
				}else {
					return
				}
				this.suspendForm = {
					equipmentId:e.equipmentId,
					taskId:e.taskId,
					tenant:'fb4a88d6f6f24d67953f68c4fe829f63'
				}
				this.$refs.suspendRef.open()
			},
			// 执行事件
			dialogConfirm() {
				let params = {
					equipmentId: this.equipmentId,
					...this.carryoutForm
				}
				let that = this
				this.$api.productOrderDetail(params).then(res => {
					uni.showToast({
						title: '操作成功！',
						duration: 2000
					});
					setTimeout(function() {
						that.getList()
					}, 2000);
				}).catch(err => {})
			},
			// 暂停事件
			suspendConfirm(){
				this.$api.productOrderDetailStop(this.suspendForm).then(res => {
					uni.showToast({
						title: '操作成功！',
						duration: 2000
					});
					setTimeout(()=> {
						this.getList()
					}, 2000);
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.executableworkorder-page {

		.list-box {
			padding: 0 20rpx;
			color: $uni-text-color-list;

			.list-item {
				background-color: $uni-bg-color;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-top: 28rpx;
				position: relative;

				.item-text {
					margin-top: 10rpx;
					font-size: 28rpx;
					.item-text-left {
						width: 170rpx;
						text-align: right;
					}
					.item-text-right {
						font-size: 30rpx;
					}
				}
				.flex-box {
					display: flex;
					align-items: center;
				}
				.positioning-box {
					font-size: 28rpx;
					position: absolute;
					right: 5%;
					top: 10%;
				}
			}

			.btn-box {
				display: flex;
				justify-content: flex-end;
				margin-top: 10rpx;

				.btn-item {
					width: 175rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 24rpx;
					margin-left: 20rpx;
					border: 1px solid #3d6df0;
					color: #fff;
					background: #3d6df0;
				}
				.btn-item-red {
					background: red;
					border: 1px solid red;
					color: #fff;
				}

				.btn-text {
					width: 175rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #aaa;
				}
			}
		}
	}
</style>