uniapp-clothscan-packing/pages/index/scan-set.vue

<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="set-menu">
			<view class="big_font">参数配置</view>
			<view class="form">
				<view class="box-form-area">
					<view class="box-area-text"> 生产组织：*</view>
					<view class="input-item flex align-center">
						<uni-data-select v-model="boxForm.PrdOrgId" :localdata="orgs" :clear="false"
							@change="changeOrg"></uni-data-select>

					</view>
				</view>
				<view class="box-form-area">
					<view class="box-area-text"> 生产车间：*</view>
					<view class="input-item flex align-center">
						<uni-data-select v-model="boxForm.WorkShopId" :localdata="filteredWorkshops" :style=""
							:clear="false"></uni-data-select>
					</view>
				</view>
				<view class="box-form-area">
					<view class="box-area-text"> 装箱方式：*</view>
					<view class="input-item flex align-center">
						<uni-data-select v-model="boxForm.EnchaseType" :localdata="packTypes"
							:clear="false"></uni-data-select>
					</view>

				</view>
				<view class="box-form-area">
					<view class="box-area-text"> 装箱单单据类型：*</view>
					<view class="input-item"> 装箱_手工检查（不可修改）</view>
					<!-- <view class="input-item flex align-center">
						<uni-data-select disabled value="ZXRGJC" :localdata="invTypes" :clear="false"
							:style="'background-color: #b9c4de;'"></uni-data-select>
					</view> -->
				</view>


			</view>
			<view class="set-btn">
				<button type="primary" plain="true" @click="goScanBox" :disabled="isDisabled">下一步</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getOrg,
		getDept,
		getenchasetype

	} from "../../api/enchase.js";

	export default {
		data() {
			return {
				isDisabled: true,
				boxForm: {
					PrdOrgId: '',
					PrdOrg: '',
					WorkShopId: '',
					WorkShop: '',
					EnchaseTypeId: '',
					EnchaseType: '',
					BillType: 'ZXRGJC',
				},
				invTypes: [{
					value: 'ZXRGJC',
					text: "装箱_手工检查"
				}, ],
				filteredOrgs: [],
				filterOrg: '',
				PrdOrgId: '',
				PrdOrg: '',
				orgs: [],
				WorkShopId: '',
				WorkShopCode: '',
				WorkShop: '',
				workshops: [],
				filteredWorkshops: [],
				packTypes: [],
				EnchaseTypes: []

			}
		},
		mounted() {},
		onLoad() {
			uni.showLoading({
				title: '正在加载参数...',
				mask: true,
			});
			this.fetchData()

		},
		onReady() {

			// this.$nextTick(() => {
			// 	// uni.hideLoading();
				
			// })


		},
		methods: {
			async fetchData() {
				
				try {
					//从缓存中获取上次数据
					this.boxForm.PrdOrgId = uni.getStorageSync('box_org');
					this.boxForm.WorkShopId = uni.getStorageSync('box_workshop');
					this.WorkShopCode = uni.getStorageSync('box_workshopCode');
					this.WorkShop = uni.getStorageSync('box_workshopName');
					this.boxForm.EnchaseType = uni.getStorageSync('box_packType');
					this.boxForm.EnchaseTypeId = uni.getStorageSync('box_packTypeId');
					//获取三个下拉菜单
					await getOrg().then(res => {
						this.orgs = res.map(item => ({
							value: item.Id,
							text: item.Name
						}));

					}).catch(err => {
						console.error('获取组织失败:', err);
						this.showToastError('获取组织失败！');
					})
					await getDept().then(res => {
						this.workshops = res
						this.filteredWorkshops = res
							.filter(item => item.fuseorgid === uni.getStorageSync('box_org'))
							.map(item => ({
								value: item.Id,
								text: item.Name,
								Number: item.Number
							}));
					}).catch(err => {
						console.error('获取车间失败:', err);
						this.showToastError('获取车间失败！');
					})
					await getenchasetype().then(res => {
						this.EnchaseTypes = res
						this.packTypes = res.map(item => ({
							value: item.Name,
							text: item.Name
						}));
					}).catch(err => {
						console.error('获取装箱失败:', err);
						this.showToastError('获取装箱失败！');
					})
					
				} catch (error) {
					console.error('Failed to fetch data:', error);
				} finally {
					let vm = this
					setTimeout(function() {uni.hideLoading()
					vm.showToastSuccess('加载完成');
					vm.isDisabled = false;
					}, 2000);
				}
			},

			changeOrg() {
				this.boxForm.WorkShopId = ''
				this.filteredWorkshops = this.workshops
					.filter(item => item.fuseorgid === this.boxForm.PrdOrgId)
					.map(item => ({
						value: item.Id,
						text: item.Name,
						Number: item.Number
					}));

			},
			showToastSuccess(message) {
				// this.$refs.uToast.show({
				// 	message: message,
				// 	type: 'success',
				// 	icon: true,
				// 	position: 'top'
				// });
				uni.showToast({
				  title: message,
				  icon: 'success'
				})
			},
			showToastError(message) {
				// this.$refs.uToast.show({
				// 	message: message,
				// 	type: 'error',
				// 	icon: true,
				// 	position: 'top'
				// });
				uni.showToast({
				  title: message,
				  icon: 'error'
				})
			},
			goScanBox() {
				
				let wk = this.filteredWorkshops.find(obj => obj.value == this.boxForm.WorkShopId)
				let type = this.EnchaseTypes.find(obj => obj.Name == this.boxForm.EnchaseType)
				if(this.boxForm.PrdOrgId && wk && type){
					uni.setStorageSync('box_invType', 'ZXRGJC')
					uni.setStorageSync('box_org', this.boxForm.PrdOrgId)
					uni.setStorageSync('box_workshop', this.boxForm.WorkShopId);
					uni.setStorageSync('box_workshopCode', wk.Number);
					uni.setStorageSync('box_workshopName', wk.text);
					uni.setStorageSync('box_packType', this.boxForm.EnchaseType);
					
					uni.setStorageSync('box_packTypeId', type.Id);
					uni.navigateTo({
						url: "/pages/index/scan-box"
					})
				}else{
					this.showToastError('请选择必选项！')
				}
				
				
			},

		}
	}
</script>


<style lang="scss" scoped>
	page {
		// background-image: linear-gradient(to bottom, #b9c4de, #ffffff);
	}

	.set-menu {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;



		.big_font {
			font-size: 100rpx;
			margin: 5%
		}

		.form {

			align-items: center;
			justify-content: space-between;

			.box-form-area {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #cdd9f5;
				width: 100%;

				.box-area-text {
					width: 200rpx;
					font-size: 15px;
					height: 100rpx;
					border: 1px solid white;

				}

				.input-item {
					// margin: 10px auto;
					height: 100rpx;
					border: 1px solid white;
					font-size: 15px;

					::v-deep.uni-select__input-text {
						width: 270rpx !important;
					}

					::v-deep .uni-select__selector-item text {
						white-space: nowrap !important;
						text-overflow: ellipsis !important;
						overflow: hidden !important;
						-o-text-overflow: ellipsis !important;
						width: 350rpx !important;
					}

					width: 350rpx;


				}



			}

		}

		.set-btn {
			margin: 5%;
			width: 50%;
		}
	}
</style>