rd_mes_uniapp/pages/mes/jobCv/transfer/index.vue

<template>
	<view>
		<uni-forms ref="form" :modelValue="form" label-width="25%" label-align="right" :rules="rules">
			<uni-forms-item label="工单编号:" name="pwoCode" >
				<uni-easyinput v-model="form.pwoCode" placeholder="请输入不小于5位的工单编号" />
			</uni-forms-item>
			<uni-forms-item label='批号:' name='batchNo'>
				<uni-easyinput v-model="form.batchNo" placeholder="请输入不小于5位的批号" />
			</uni-forms-item>
			<uni-forms-item label="物料编码:" >
				<uni-easyinput v-model="form.ptNoTar" placeholder="请输入物料编码" />
			</uni-forms-item>
			<uni-forms-item label="物料名称:" >
				<uni-easyinput v-model="form.ptTitleTar" placeholder="请输入物料名称" />
			</uni-forms-item>
			<uni-forms-item label="物料规格:" >
				<uni-easyinput v-model="form.specification1" placeholder="请输入物料规格" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="clickSubmit(form)" :disabled="formComputed">查询</button>
		<uni-popup ref="popup" type="center" background-color="#fff" :is-mask-click="false">
			<!-- 加载动画 -->
			<loding-vue/>
		</uni-popup>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.type" :message="message.messageText" :duration="message.duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listPwoLike
	} from "@/api/mes/pwoIn.js";
	import {listDepartment} from"@/api/basic/department.js"
	import {
		hasValue
	} from "@/utils/judge"
	import {listWarehouse} from "@/api/wms/pdcIn.js"
	//引入加载动画
	import lodingVue from "@/utils/loding/loding.vue";
	export default {
		components:{
			lodingVue
		},
		data() {
			return {
				/**表单数据 */
				form:{
					/** 工单编号 */
					pwoCode : null,
					/** 批号 */
					batchNo : null,
					/** 物料编码 */
					ptNoTar : null,
					/** 物料名称 */
					ptTitleTar : null,
					/** 物料规格 */
					specification1 : null
				},
				/** 校验规则 */
				rules:{
					pwoCode:{
						rules:[
							{
								required : true,
							},
						]
					},
					batchNo:{
						rules:[
							{
								required : true,
							},
						]
					},
				},
				/** 提示信息 */
				message:{
					//类型  succes成功，warn警告error失败inf消息
					type:'error',
					//提示信息
					messageText:'没有符合条件的数据',
					//显示时间
					duration:1500
				}
			}
		},
		async mounted(){
			//在页面挂载的时候获取部门数据
			const data = await Promise.all([ listDepartment(), listWarehouse()])
			this.$store.commit('updateDepartment',data[0].rows)
			this.$store.commit('updateWarehouse',data[1].rows)
		},
		/**
		 * 计算属性
		 */
		computed:{
			/**
			 * 判断form值是否符合要求
			 * 如果符合则可以点击按钮，没有不能点击
			 */
			formComputed(){
				const {pwoCode,batchNo} = this.form
				//判断工单编号和批号是否有值
				//如果有值且长度大于5位则必填标志消失，并且提交按钮可以点击
				if((hasValue(pwoCode) && pwoCode.length >= 5) || (hasValue(batchNo) && batchNo.length >= 5)){
					if(hasValue(pwoCode) && pwoCode.length >= 5)  this.rules.batchNo.rules[0].required = false
					if(hasValue(batchNo) && batchNo.length >= 5)  this.rules.pwoCode.rules[0].required = false
					return false
				}
				this.rules.batchNo.rules[0].required = this.rules.pwoCode.rules[0].required = true
				return true
			}
		},
		methods: {
			/**
			 * 提交按钮点击事件
			 */
			async clickSubmit(){
				const _self = this
				try{
					//打开蒙层
					this.$refs.popup.open()
					//查询接口
					const res = await listPwoLike(this.form)
					//关闭蒙层
					//当没有查到数据给一个提示
					if(res.total === 0 || res.rows.length === 0) {
						this.$refs.message.open()
						return
					}
					//通过vuex把获取到的数据保存下来 this.$store.state.pwo
					this.$store.commit('updatData',res.rows)
					uni.navigateTo({
						url:'/pages/mes/jobCv/transfer/table'
					})
				}catch{
					this.message.messageText="请求超时"
					this.$refs.message.open()
				}finally{
					this.$refs.popup.close()
				}
			}
		},
		/**
		 * 页面卸载的时候清空数据
		 */
		onUnload(){
			this.$store.commit('updateDepartment',[])
			this.$store.commit('updateWarehouse',[])
		}
	}
</script>

<style scoped>
	//设置页面背景颜色
	page {
		background-color: #ffffff;
		padding-top: 1vw;
	}
	view {
		width: 98%;
		margin: 2% auto;
		color: black;
	}
</style>