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', {})" skip>跳过(不报工)</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" @click="handOutsource()">委外</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="num">
							<input class="uni-input" v-model="outsourceForm.name" placeholder="请输入委外名称"></input>
						</u-form-item>

						<u-form-item label="委外数量:" borderBottom prop="num">
							<input class="uni-input" v-model="outsourceForm.formedNumLast" type='number'></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="" v-if="outsourceForm.type == 2">
							<zxz-uni-data-select :localdata="materialList" v-model="outsourceForm.material"
								dataValue='id' dataKey="name" filterable format='{name}'></zxz-uni-data-select>
						</u-form-item>



						<u-form-item label="发货仓库:" borderBottom prop="" v-if="outsourceForm.type == 2">
							<zxz-uni-data-select :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 prop="">
							<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="">
							<zxz-uni-data-select :localdata="newStepsList" v-model="endTaskId" @change="changeOut"
								dataValue='taskId' format='{taskTypeName}' dataKey="taskId" filterable
								:clear='true'></zxz-uni-data-select>
						</u-form-item>




						<u-form-item label="完成时间:" borderBottom prop="requireDeliveryTime">
							<picker mode="date" :value="outsourceForm.requireDeliveryTime" @change="onDateChange">
								<view class="uni-input">{{ outsourceForm.requireDeliveryTime ||  '选择日期'    }}</view>
							</picker>

						</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(0)">
						提交
					</u-button>


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

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

	</view>
</template>

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

	import SearchPopup from './searchPopup.vue'



	export default {
		components: {
			SearchPopup
		},

		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,

				btnsList: [],
				btnState: 1,
				GDStatus: null,
				btnControlReportMethod: null,
				btnList: {
					1: [{
							name: '领料',
							type: 'picking'
						},
						{
							name: '投料',
							type: 'feeding'
						},
						{
							name: '报工',
							type: 'jobBooking'
						},
						{
							name: '更换周转车',
							type: 'turnover'
						},


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

					3: [{
						name: '报工',
						type: 'inspection'
					}, ],

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


					],

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

					],

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



					],


				},

				newTaskObj: {},
				outsourceShow: false,

				outsourceForm: {

				},

				produceList: [],
				warehouseList: [],

				typeList: [{
						id: 1,
						name: '采购委外'
					},
					{
						id: 2,
						name: '直接发货委外'
					},
					{
						id: 3,
						name: '无采购委外'
					},

				],

				materialList: [{
						id: 1,
						name: '产品'
					},
					{
						id: 2,
						name: '半成品'
					},
				],

				newStepsList: [],
				endTaskId: null,

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



			}
		},


		created() {
			this.getTwoTree()
		},

		methods: {
			getTwoTree() {
				getTwoTreeByPid(12).then(res => {
					let _arr = res.map(m => {
						m.type = 'inspection'
						return m
					})
					this.btnList[3] = []


					this.btnList[3] = [{
							name: '更换周转车',
							type: 'qualityTurnover'
						},
						..._arr,
						{
							name: '报工',
							type: 'inspectionJob'
						}
					]


				})
			},



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

			},

			handTerminate() {

				uni.showModal({
					title: '提示',
					content: '确定该工单终止?',
					success: async res => {
						if (res.confirm) {
							updateStatusTerminate([this.newTaskObj.workOrderId]).then(res => {
								this.$emit('refresh')
							})
						}
					}
				})
			},
			outCancel() {
				this.outsourceShow = false
			},

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

				this.newStepsList = []
				this.stepsList.forEach((f, i) => {
					if (f.taskId != '-1' && f.taskId != '-2' && f.taskTypeName != '包装' && i > this.activeIndex && f
						.type == 1) {
						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
			},

			changeOut() {
				if (this.endTaskId) {
					const index = this.newStepsList.findIndex(item => item.taskId === this.endTaskId) + 1;
					if (index !== -1) {
					    // 使用slice截取目标元素之前的部分，并通过map提取id
					    const previousIds = this.newStepsList.slice(0, index).map(item => item.taskId);
					this.outsourceForm.taskIds = previousIds.join(',')
					
					
					} else {
					  this.outsourceForm.taskIds = ''
					}
					
				} else {
					this.outsourceForm.taskIds = ''
				}
				console.log(this.endTaskId)
			},



			onDateChange(e) {
				this.$set(this.outsourceForm, 'requireDeliveryTime', e.detail.value)
				this.$forceUpdate()
			},

			// 工艺路线
			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(isRelease) {
				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.type == 2 && !this.outsourceForm.material) {
					uni.showToast({
						title: '请选择委外物料',
						icon: 'none'
					})
					return false
				}



				if (this.clientEnvironmentId != 2 && !this.outsourceForm.produceRoutingId) {
					uni.showToast({
						title: '请选择工艺路线',
						icon: 'none'
					})
					return false
				}
				// this.outsourceForm.requireDeliveryTime = '2025-03-18'
				if (!this.outsourceForm.requireDeliveryTime) {
					uni.showToast({
						title: '请选择委外完成时间',
						icon: 'none'
					})
					return false
				}



				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: 28rpx;
			text-align: center;
			padding: 30rpx;


		}
	}
</style>