agricultural-products-traceability-app/sunPages/traceability-product/loss/lossEdit.vue

<template>
	<view class="v-pages">
		<!-- 页面 产品 -->
		<view class="v-pages-product">
			<view class="v-product-name">{{formData.productName}}</view>
			<view class="v-product-code m-t-small"><text
					class="iconfont icon-code m-r-small"></text>{{formData.traceabilityProduct}}</view>
		</view>

		<!-- 页面 表单 -->
		<view class="v-form v-container" style="margin-top:-40px; padding-bottom:50px;">
			<uni-forms :modelValue="formData" ref="formRef" :label-width="120" :rules="formRules">
				<view class="v-form-item">
					<uni-forms-item label="报损类型" name="lossType" required>
						<picker @change="LossTypeChange" :value="CurrenLossType" :range="LossTypePickerList">
							<view class="uni-input" v-if="LossTypePickerList[CurrenLossType]">
								{{LossTypePickerList[CurrenLossType]}}
							</view>
							<view v-else class="placeholder">请选择销售类型</view>
							<uni-icons type="down" size="14" class="v-icon"></uni-icons>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="报损数量(公斤)" name="productLoss" required>
						<input v-model="formData.productLoss" placeholder="请输入报损数量" type="digit"
							@blur="handlerInput($event,index)" />
					</uni-forms-item>
					<uni-forms-item label="报损原因" name="lossReason">
						<input v-model="formData.lossReason" placeholder="请输入报损原因" type="textarea" />
					</uni-forms-item>
				</view>
			</uni-forms>

			<!-- 页面 提交 -->
			<view class="sticky fixedBottom"><button class="v-primary-btn large" @click="submitForm()">保存</button>
			</view>
		</view>

	</view>
</template>

<script>
	import * as ProductApi from "@/api/traceability/product"
	import * as LossApi from "@/api/traceability/loss"
	import {
		getDictDatas,
		DICT_TYPE
	} from '@/utils/dict';
	export default {
		data() {
			return {
				ProductID: null,

				CurrenLossType: 0,
				LossTypeList: [], //报损类型列表
				LossTypePickerList: [], //报损类型选择列表

				formData: {
					productId: undefined,
					productName: undefined,
					traceabilityProduct: undefined,
					lossType: 2,
					productLoss: undefined,
					lossReason: undefined
				},
				// 表单校验
				formRules: {
					lossType: {
						rules: [{
							required: true,
							errorMessage: '报损类型不能为空'
						}]
					},
					productLoss: {
						rules: [{
							required: true,
							errorMessage: '报损数量不能为空'
						}]
					}
				},
			}
		},
		onLoad(options) {
			// 获取当前ID号
			this.ProductID = JSON.parse(JSON.stringify(options.id))
			// 获取页面
			this.initialize(this.ProductID)
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.formRef.setRules(this.formRules)
		},
		methods: {
			// 页面初始化
			async initialize(id) {
				try {
					this.getLossType()
					/** 获取溯源产品 信息 */
					const res = await ProductApi.getAllTraceableProducts(id)
					this.formData.productId = id
					this.formData.productName = res.data[0].processingName
					this.formData.traceabilityProduct = res.data[0].traceabilityProduct
				} finally {}
			},

			/** 提交按钮 */
			async submitForm() {
				// 校验主表
				try {

					this.formData.lossType = this.LossTypeList[this.CurrenLossType].value
					await this.$refs['formRef'].validate()
					const data = this.formData
					await LossApi.createLoss(data)
					uni.showToast({
						title: `保存成功`,
						icon: 'success',
						duration: 2000,
						complete: function() {
							uni.setStorageSync('canRefresh', 'true');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000);
						}
					})
				} catch (err) {
					console.log("验证未通过")
				} finally {}
			},

			//获取报损类型列表
			getLossType() {
				//报损类型 数据字典查询
				let newData = this.getDictDatas(DICT_TYPE.LOSS_TYPE);
				this.LossTypeList = newData
				this.LossTypePickerList = newData.map((item) => {
					return item.label
				})
			},

			// 选择报损类型
			LossTypeChange(e) {
				this.CurrenLossType = e.detail.value
			},

			// 格式化小数两位
			handlerInput(event, index) {
				this.$nextTick(() => {
					const num = parseFloat(event.target.value).toFixed(2)
					if (isNaN(num)) {
						this.formData.productLoss = undefined
					} else {
						this.formData.productLoss = num
					}
					this.$forceUpdate()
				})
			},
		}
	};
</script>

<style>
</style>