aiot-app/pages/pda/components/bottomOperate.vue

<template>
	<view class="bottom_box">
		<!-- 按钮组 -->
		<view class="nav_box rx-cc" @click="open">
			<image class="open_icon" :class="{ open_icon_reversal: isOperate }" src="~@/static/pda/open.svg"></image>
		</view>


		<!-- // 弹出框 -->
		<view class="operate_list" v-show="isOperate">

			<view v-if="clientEnvironmentId == 2">
				<view v-for="(item, index) in btnList[btnState]" :key="index" class="list rx-bc"
					@click="operate(item.type, item)">

					<view class="round">{{ index + 1 }}</view>
					<view class="name">{{ item.name }}</view>
					<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
				</view>
			</view>
			<view v-else>
				<view v-for="(item, index) in btnListOne[btnState]" :key="index" class="list rx-bc"
					@click="operate(item.type, item)">

					<view class="round">{{ index + 1 }}</view>
					<view class="name">{{ item.name }}</view>
					<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
				</view>
			</view>

			<!-- 


			<view v-if='btnControlReportMethod == 2' class="list rx-bc">
				<view class="round">{{btnList[btnState].length + 1}}</view>
				<view class="name" @click="operate('skip', {})" >跳过(不报工)</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view>
		 -->

			<view v-if="newTaskObj.existOutsource == 1" class="list rx-bc" @click="operate('outPicking', {})">
				<view class="round">{{ btnList[btnState].length + 1 }}</view>
				<view class="name">委外领料</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view>

			<view v-if="newTaskObj.existOutsource == 1" class="list rx-bc"
				@click="operate('jobBooking', { isOutsource: 1 })">
				<view class="round">{{ btnList[btnState].length + 2 }}</view>
				<view class="name">委外报工</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view>






		</view>


		<view class="btn_box">
			<view class="btn" @click="handPause()">{{ GDStatus == 9 ? '取消暂停' : '暂停' }}</view>
			<view class="btn" @click="handTerminate()">终止</view>
			<view class="btn">转派</view>
			<view class="btn" :style="newTaskObj.existOutsource == 1 ? 'background: #FFA929' : ''"
				@click="handOutsource()">委外</view>
			<view class="btn" @click="handHandover">交接</view>
		</view>

		<!-- //委外弹窗 -->
		<SearchPopup mode="center" v-if="outsourceShow">
			<template v-slot:list>
				<view class="popup_list">
					<view class="title">【{{ taskObj.currentTaskName }}】是否委外</view>




					<u-form labelPosition="left" :model="outsourceForm" labelWidth="180" labelAlign="left" class="">

						<u-form-item label="委外名称:" borderBottom prop="name">
							<input class="uni-input" v-model="outsourceForm.name" placeholder="请输入委外名称"></input>
						</u-form-item>


						<u-form-item label="委外类型:" borderBottom prop="">
							<zxz-uni-data-select :localdata="typeList" v-model="outsourceForm.type" dataValue='id'
								dataKey="name" filterable format='{name}'></zxz-uni-data-select>
						</u-form-item>

						<u-form-item label="委外数量:" borderBottom prop="formedNumLast">
							<input class="uni-input content_num" v-model="outsourceForm.formedNumLast"
								type='number'></input>
						</u-form-item>


						<u-form-item label="委外到:" borderBottom prop="taskIds">
							<zxz-uni-data-select :localdata="newStepsList" style="font-size: 15px;"
								v-model="outsourceForm.taskIds" dataValue='taskId' format='{taskTypeName}'
								dataKey="taskId" filterable :clear='true' @change="changeTaskId"></zxz-uni-data-select>
						</u-form-item>

						<u-form-item label="委外场景:" borderBottom prop="taskIds">
							{{ sceneText }}
						</u-form-item>




						<u-form-item label="直接入库:" borderBottom prop="isInWarehouse"
							v-if="outsourceForm.isFirstTask != 1">
							<u-checkbox-group v-model="isInWarehouse" size="15px" v-if="clientEnvironmentId != 2">
								<u-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
									label="是"></u-checkbox>
							</u-checkbox-group>
							<view style="font-size: 15px;" v-if="clientEnvironmentId == 2">是</view>


							<zxz-uni-data-select style="margin-left: 10px; font-size: 15px;"
								v-if="clientEnvironmentId == 2 || isInWarehouse.length" :localdata="warehouseList"
								v-model="outsourceForm.warehouseId" dataValue='id' dataKey="name" filterable
								format='{name}'></zxz-uni-data-select>

						</u-form-item>

						<u-form-item label="工艺路线:" borderBottom style="font-size: 15px;" prop="produceRoutingId"
							v-if="clientEnvironmentId != 2 && outsourceForm.isFirstTask != 1 && isInWarehouse && isInWarehouse.length == 0">
							<zxz-uni-data-select :localdata="produceList" v-model="outsourceForm.produceRoutingId"
								dataValue='id' dataKey="name" filterable format='{name}'></zxz-uni-data-select>
						</u-form-item>

						<u-form-item label="计划交期:" borderBottom prop="requireDeliveryTime">
							<uni-datetime-picker type="datetime" v-model="outsourceForm.requireDeliveryTime" />
						</u-form-item>


					</u-form>

				</view>
			</template>

			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button" @click="outCancel">
						取消
					</u-button>


					<u-button type="success" size="small" class="u-reset-button" @click="outsourceOk()">
						确定
					</u-button>


					<!-- 		<u-button type="success" size="small" class="u-reset-button" @click="outsourceOk(1)">
						提交并发布
					</u-button> -->

				</view>
			</template>
		</SearchPopup>

		<outsourceList ref="outsourceListRef" @close="outCancel()"></outsourceList>
		<handover ref="handoverRef"></handover>

	</view>
</template>

<script>
import {
	getTwoTreeByPid,
	checkOutsource,
	applyoutsourceSave,
	producerouting,
	getWarehouseList,
	updateStatusPause,
	updateStatusPauseRecover,
	updateStatusTerminate
} from '@/api/pda/workOrder.js'

import SearchPopup from './searchPopup.vue'

import outsourceList from './outsourceList.vue'
import handover from './handover.vue'

import {
	EventBus
} from '@/utils/eventBus.js'


export default {
	components: {
		SearchPopup,
		outsourceList,
		handover
	},

	props: {
		state: String | Number,
		gdStatus: String | Number,
		taskObj: Object,

		controlReportMethod: String | Number,

		stepsList: {
			type: Array,
			default: () => []
		},

	},

	watch: {
		btns: {
			immediate: true,
			deep: true,
			handler(newVal) {
				this.btnsList = []
				this.btnsList = newVal
			}
		},

		state: {
			immediate: true,
			deep: true,
			handler(newVal) {
				this.btnState = newVal
			}
		},


		gdStatus: {
			immediate: true,
			deep: true,
			handler(newVal) {
				this.GDStatus = newVal
			}
		},




		controlReportMethod: {
			immediate: true,
			deep: true,
			handler(newVal) {

				this.btnControlReportMethod = newVal
			}
		},

		taskObj: {
			immediate: true,
			deep: true,
			handler(newVal) {
				console.log(newVal)
				this.newTaskObj = newVal

			}
		},

		
		stepsList: {
			immediate: true,
			deep: true,
			handler(newVal) {


			}
		}
	},

	data() {
		return {
			isOperate: false,
			sceneText: '',
			outsourceScene: null,
			btnsList: [],
			btnState: 1,
			GDStatus: null,
			btnControlReportMethod: null,
			btnList: {
				1: [{
					name: '领料',
					type: 'picking'
				},
				{
					name: '投料',
					type: 'feeding'
				},

				{
					name: '更换周转车',
					type: 'turnover'
				},
				{
					name: '报工',
					type: 'jobBooking',
					isOutsource: 0
				},
					// {
					// 	name: '多工单报工',
					// 	type: ''
					// }



				],
				2: [{
					name: '取样',
					type: 'sample'
				},
				{
					name: '报工',
					type: 'sampleJob'
				},
				],

				3: [{
					name: '更换周转车',
					type: 'qualityTurnover'
				},

				{
					name: '质检',
					type: 'inspection'
				},

				{
					name: '报工',
					type: 'inspectionJob'
				}



				],

				4: [{
					name: '领料',
					type: 'picking'
				},
				{
					name: '投料',
					type: 'feeding'
				},
				{
					name: '报工',
					type: 'jobBooking'
				},


				],

				5: [{
					name: '入库',
					type: 'warehousing'
				},

				],

				6: [{
					name: '报工',
					type: 'jobBooking'
				},



				],


			},
			btnListOne: {
				1: [{
					name: '领料',
					type: 'picking'
				},
				{
					name: '投料',
					type: 'feeding'
				},

				{
					name: '报工',
					type: 'jobBooking',
					isOutsource: 0
				},
					// {
					// 	name: '多工单报工',
					// 	type: ''
					// }



				],
				2: [{
					name: '取样',
					type: 'sample'
				},
				{
					name: '报工',
					type: 'sampleJob'
				},
				],

				3: [


					{
						name: '质检',
						type: 'inspection'
					},

					{
						name: '报工',
						type: 'inspectionJob'
					}



				],

				4: [{
					name: '领料',
					type: 'picking'
				},
				{
					name: '投料',
					type: 'feeding'
				},
				{
					name: '报工',
					type: 'jobBooking'
				},


				],

				5: [{
					name: '入库',
					type: 'warehousing'
				},

				],

				6: [{
					name: '报工',
					type: 'jobBooking'
				},



				],


			},
			sceneText: '',
			outsourceScene: null,
			newTaskObj: {},
			outsourceShow: false,

			outsourceForm: {

			},

			produceList: [],
			warehouseList: [],

			typeList: [{
				id: 4,
				name: '带料生产委外'
			},
			{
				id: 5,
				name: '不带料生产委外'
			},

			],

			newStepsList: [],



			clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

			isInWarehouse: []



		}
	},


	created() {

	},

	methods: {

		// 委外时间选择

		//委外到 类型选择
		changeTaskId(e) {
			console.log(this.outsourceForm, e);
			if (this.newStepsList.length) {
				const id = this.newStepsList[0].sourceTaskId;
				//isFirstTask 1是首工序 0不是
				if (this.outsourceForm.isFirstTask) {
					this.sceneText = "首工序";
					this.outsourceForm.outsourceScene = 1;
					if (e.sourceTaskId !== id) {
						this.sceneText = "首工序及多工序";
						this.outsourceForm.outsourceScene = 4;
					}
				} else {
					if (e.sourceTaskId === id) {
						// 单工序
						this.sceneText = "单工序"
						this.outsourceForm.outsourceScene = 2;
					} else {
						//多工序
						this.sceneText = "多工序"
						this.outsourceForm.outsourceScene = 3;
					}
				}

			} else {
				uni.showToast({
					title: '委外到工序为空',
					icon: 'none'
				})
			}
		},

		open() {
			this.isOperate = !this.isOperate
		},

		operate(type, item) {

			this.$emit('operate', type, item)
		},


		handOutsource() {


			let param = {
				taskId: this.newTaskObj.currentTaskId,
				workOrderId: this.newTaskObj.workOrderId,

			}
			checkOutsource(param).then(res => {

				this.outsourceForm = {
					...res,


				}
				this.outsourceForm.name = this.taskObj.currentTaskName + '委外'



				if (res.outsource) {
					this.getNewSteps()
					this.outsourceShow = true
					this.produceFn()
					this.getWarehouseFn()
				} else {
					uni.showToast({
						title: '此工序不能委外',
						icon: 'none'
					})
				}
			})

		},


		handPause() {
			if (this.GDStatus == 9) {
				uni.showModal({
					title: '提示',
					content: '确定该工单取消暂停?',
					success: async res => {
						if (res.confirm) {
							updateStatusPauseRecover([this.newTaskObj.workOrderId]).then(res => {
								this.$emit('refresh')
							})
						}
					}
				})

			} else {
				uni.showModal({
					title: '提示',
					content: '确定该工单暂停?',
					success: async res => {
						if (res.confirm) {
							updateStatusPause([this.newTaskObj.workOrderId]).then(res => {
								this.$emit('refresh')
							})
						}
					}
				})
			}

		},

		handHandover() {
			this.$refs.handoverRef.open()
		},

		handTerminate() {

			uni.showModal({
				title: '提示',
				content: '确定该工单终止?',
				success: async res => {
					if (res.confirm) {
						updateStatusTerminate([this.newTaskObj.workOrderId]).then(res => {
							this.$emit('refresh')
						})
					}
				}
			})
		},
		outCancel() {
			this.sceneText = "";//委外场景
			this.outsourceForm.outsourceScene = null;
			this.outsourceShow = false
			EventBus.$off('outEvent');
		},

		getNewSteps() {
			this.activeIndex = this.getIndexOfElementInArray(this.stepsList, this.newTaskObj.currentTaskId)

			this.newStepsList = []
			this.stepsList.forEach((f, i) => {
				if (f.taskId != '-1' && f.taskId != '-2' && i > this.activeIndex && (f.type == 1 || f.type ==
					4)) {
					this.newStepsList.push(f)
				}
			})



		},

		getIndexOfElementInArray(array, target) {
			for (let i = 0; i < array.length; i++) {
				if (array[i].taskId === target) {
					return i; // 返回第一次出现target的索引位置
				}
			}
			return -1; // 未找到目标值时返回-1
		},






		// 工艺路线
		produceFn() {
			let param = {
				pageNum: 1,
				size: -1,
				routeType: 2
			}
			producerouting(param).then(res => {
				this.produceList = res.list

			})
		},

		// 仓库 
		getWarehouseFn() {
			getWarehouseList().then(res => {
				this.warehouseList = res
			})
		},


		outsourceOk() {
			if (!this.outsourceForm.name) {
				uni.showToast({
					title: '请输入委外名称',
					icon: 'none'
				})
				return false
			}


			if (!this.outsourceForm.type) {
				uni.showToast({
					title: '请选择委外类型',
					icon: 'none'
				})
				return false
			}





			if (!this.outsourceForm.requireDeliveryTime) {
				uni.showToast({
					title: '请选择委外完成时间',
					icon: 'none'
				})
				return false
			}
			if (this.clientEnvironmentId == 2) {
				this.outsourceForm.isInWarehouse = 1
			} else {
				this.isInWarehouse.length > 0 ? this.outsourceForm.isInWarehouse = 1 : this.outsourceForm
					.isInWarehouse = 0
			}
			if (this.outsourceForm.requireDeliveryTime.indexOf('00:00:00') === -1) {
				this.outsourceForm.requireDeliveryTime = this.outsourceForm.requireDeliveryTime + '00:00:00';
			}

			let param = {
				...this.outsourceForm,
				taskId: this.newTaskObj.currentTaskId,
				workOrderId: this.newTaskObj.workOrderId,

			}

			console.log(param)
			this.sceneText = "";//委外场景
			this.outsourceForm.outsourceScene = null;
			this.$refs.outsourceListRef.open(param)



			// let param = {
			// 	...this.outsourceForm,
			// 	taskId: this.newTaskObj.currentTaskId,
			// 	workOrderId: this.newTaskObj.workOrderId,
			// 	isRelease: isRelease
			// }

			// applyoutsourceSave(param).then(res => {
			// 	console.log(res)
			// 	this.outCancel()
			// })
		},


	}
}
</script>

<style lang="scss" scoped>
.bottom_box {
	background: #fff;
}

.nav_box {
	width: 750rpx;
	height: 40rpx;
	background: $theme-color;

	.open_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.open_icon_reversal {
		transform: scaleY(-1);
		/* 垂直翻转 */

	}
}

.operate_list {
	margin: 0 32rpx;

	.list {
		border-radius: 8rpx;
		border: 1rpx solid $theme-color;
		background: #F0F8F2;
		height: 64rpx;
		padding: 0rpx 16rpx;
		margin-top: 16rpx;

	}

	.round {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		border-radius: 50%;
		background: $theme-color;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		color: #fff;
	}

	.name {
		font-family: PingFang HK;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 600;
		color: $theme-color;
	}

	.arrow_right {
		width: 32rpx;
		height: 32rpx;
	}
}

.btn_box {
	display: flex;
	padding: 16rpx 32rpx;
	align-items: flex-start;
	gap: 16rpx;
	align-self: stretch;

	.btn {
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: $theme-color;
		text-align: center;
		border-radius: 8rpx;
		color: #fff;
		font-family: PingFang HK;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 600;

	}
}


.operate_box {
	padding: 10rpx 20rpx;

	/deep/ .u-button {
		width: 180rpx;
	}
}

.popup_list {
	width: 78vw;
	min-height: 360rpx;
	padding: 0 32rpx;

	.title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		padding: 30rpx;


	}
}


.list_item_btn {
	width: 160rpx;
	height: 54rpx;
	line-height: 54rpx;
	background: $theme-color;
	text-align: center;
	border-radius: 8rpx;
	color: #fff;
	font-family: PingFang HK;
	font-size: 22rpx;
	font-style: normal;
	font-weight: 600;
}


.content_num {
	display: flex;
	align-items: center;
	padding: 0 4rpx;

	/deep/ .uni-input-input {
		border: 2rpx solid #F0F8F2;
		background: #F0F8F2;
		color: $theme-color;
	}


}
</style>