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>


		<view class="btn_box">
			<view class="btn">暂停</view>
			<view class="btn">终止</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.formedNumLast" type='number'
								disabled></input>
						</u-form-item>

						<u-form-item label="完成时间:" borderBottom prop="time">


							<picker mode="date" :value="outsourceForm.date" @change="onDateChange">
								<view class="uni-input">{{ outsourceForm.date ||  '选择日期'    }}</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">
						确定
					</u-button>

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

	</view>
</template>

<script>
	import {
		getTwoTreeByPid,
		checkOutsource
	} from '@/api/pda/workOrder.js'

	import SearchPopup from './searchPopup.vue'



	export default {
		components: {
			SearchPopup
		},

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

		},

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

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

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

		data() {
			return {
				isOperate: false,

				btnsList: [],
				btnState: 1,
				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'
						},

					],

				},

				newTaskObj: {},
				outsourceShow: false,

				outsourceForm: {}
			}
		},


		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] = [
						..._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.formedNumLast = res.formedNumLast
				
					if (res.outsource) {
						this.outsourceShow = true
					} else {
						uni.showToast({
							title: '此工序不能委外',
							icon: 'none'
						})
					}
				})

			},

			outCancel() {
				this.outsourceShow = false
			},

			onDateChange: function(e) {

				this.outsourceForm.date = e.detail.value;
				this.$forceUpdate()
			},


			outsourceOk() {},


		}
	}
</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 60rpx;

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

	.popup_list {
		width: 65vw;
		min-height: 300rpx;
		padding: 0 32rpx;

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


		}
	}
</style>