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-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 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'
						},



					],


				},
				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.newStepsList);
				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'
					})
				}
			},

			// 委外时间选择
			
			//委外到 类型选择
			changeTaskId(e){
				console.log(this.newStepsList);
				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
				}
				this.outsourceForm.requireDeliveryTime = this.outsourceForm.requireDeliveryTime+'00:00:00';
				console.log(this.outsourceForm,'this.outsourceForm.');
				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>