uniapp-dp/dp-workshop-manage/pages/plan/edit.vue

<template>
	<view class="bg-white">
		<view style="padding: 20rpx;height: 100%;background-color: white;">
			<view style="padding: 30rpx;background-color: white;border-radius:50rpx"
				class="padding-xl shadow-warp radius bg-blue">
				<u--form labelPosition="left" :model="planInfo" ref="uForm" style="background-color:white"
					labelWidth="calc(3em + 15px)">
					<u-form-item label="订单号:" prop="orderNo" borderBottom ref="uItem" :required="true">
						<u--input v-model="planInfo.orderNo" border="none" disabledColor="#ffffff" disabled></u--input>
						<u-icon slot="right" name="search" size="25px" color="blue" @click="showOrder = true"></u-icon>
					</u-form-item>
					<u-form-item label="数量:" prop="qty" borderBottom ref="uItem">
						<u--input v-model="planInfo.qty" border="none" disabled></u--input>
					</u-form-item>
					<u-form-item label="班制:" prop="workShift" borderBottom ref="uItem"
						@click="showWorkShift = true" :required="true">
						<u--input v-model="planInfo.workShift" border="none"></u--input>
						<u-icon slot="right" name="arrow-right" size="25px"></u-icon>
					</u-form-item>
					<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
					<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset" disabled></u-button>
				</u--form>
				<u-action-sheet :show="showWorkShift" :actions="actions" title="请选择班制" @close="showWorkShift = false"
					@select="workShiftSelect" />

			</view>
			<u-popup :show="showOrder" mode="bottom" :overlay="true" :safeAreaInsetBottom="true"
				:safeAreaInsetTop="true" @close="showOrder = false">
				<u-toolbar @cancel="cancel" @confirm="confirm"></u-toolbar>
				<u-line></u-line>
				<scroll-view :scroll-y="true" class="u-popup-slot" style="height:750rpx">
					<radio-group @change="radioChange" style="width: 100%;">
						<view class="cu-list menu">
							<view class="cu-item" v-for="(item,index) in orderList" @click="itemClick(item)">
								<view class="content">
									<view class="cu-form-group">
										<view style="min-width: 10%">
											<radio :value="item.orderNo" :checked="index === current" />
										</view>
										<view class="title" style="min-width: 80%;text-align: center;">{{item.orderNo}}({{item.workshop.zyProductWorkshop}}-{{item.team.zyTeam}})
										</view>
										<view class="text-grey" style="flex: 1;">{{item.qty}}</view>
									</view>
								</view>
							</view>
						</view>
					</radio-group>

				</scroll-view>
				</u-picker>
			</u-popup>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		// getPlanOrderData
		list
	} from '@/api/biz/filing.js'
	import {
		add,
		edit
	} from '@/api/biz/plan.js'
	export default {
		data() {
			return {
				orderList: [],
				planInfo: {
					id:'',
					orderNo: '',
					qty: '',
					workShift: ''
				},
				current: -1,
				showOrder: false,
				showWorkShift: false,
				actions: [{
						name: '早',
					},
					{
						name: '中',
					},
					{
						name: '晚',
					},{
						name: '管理线',
					},
				],
				rules: {
					'orderNo': {
						type: 'string',
						required: true,						
						message: '请填写订单号',
						trigger: ['blur', 'change']
					},
					'workShift':{
						type: 'string',
						required: true,
						message: '请填写班制',
						trigger: ['blur', 'change']
					}
				},

			}
		},
		methods: {
			workShiftSelect(e) {
				this.planInfo.workShift = e.name
			},
			itemClick(item) {

			},
			cancel() {
				this.showOrder = false
			},
			confirm() {
				console.log(this.current)
				const focusObj = this.orderList[this.current]
				console.log(focusObj)
				this.planInfo.orderNo = focusObj.orderNo
				this.planInfo.qty = focusObj.qty
				this.showOrder = false
			},
			radioChange(evt) {
				for (let i = 0; i < this.orderList.length; i++) {
					if (this.orderList[i].orderNo === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			loadOrderInfo() {
				list(0).then(res => {
					if (res.success) {
						this.orderList = res.data
					}
				})
			},
			submit() {
				this.$refs.uForm.validate().then(val => {
					edit(this.planInfo).then(res => {
						if (res.success) {
							this.$refs.uToast.show({
								type: 'success',
								message: "修改成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
							uni.$emit('loadData');
							uni.navigateBack(1);
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
						}
					})
				})
			},
			reset() {
				this.$refs.uForm.resetFields()
				// this.planInfo.orderNo = ''
				// this.planInfo.qty = ''
				// this.planInfo.workShift = ''
			}
		},
		onReady() {
			this.loadOrderInfo()
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(option) {
			const planInfo = JSON.parse(decodeURIComponent(option.planInfo))
			this.planInfo = planInfo
		}
	}
</script>

<style>
</style>