rd_mes_uniapp/pages/bom/recordQuerys.vue

<template>
	<view>
		<div>
			<uni-forms ref="form" :modelValue="form" label-width="25%" label-align="right" :rules="rules">
				<uni-forms-item label="工单编号:" name="pwoCode" >
					<uni-easyinput type="text" prefixIcon="scan"
						placeholder="请扫描工单编码!" 
						v-model="form.pwoCode"
						@iconClick="iconClick('pwoCode')"
					/>
				</uni-forms-item>
				<uni-forms-item label='物料编码:' name='materialCode'>
					<uni-easyinput v-model="form.materialCode" placeholder="请输入物料编码" />
				</uni-forms-item>
				<uni-forms-item label="物料名称:" >
					<uni-easyinput v-model="form.materialName" disabled placeholder="工单扫完/物料编码输入带出" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="clickSubmit(form)" :disabled="formComputed">查询</button>
		</div>
		<uni-table ref="table" border stripe emptyText="暂无更多数据" v-show="open">
			<uni-tr>
				<uni-th align="center">类型</uni-th>
				<uni-th align="center">参数1</uni-th>
				<uni-th align="center">参数2</uni-th>
				<uni-th align="center">参数3</uni-th>
				<uni-th align="center">日期</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td align="center">{{ item.opType }}</uni-td>
				<uni-td align="center">{{ item.parameter1 }}</uni-td>
				<uni-td align="center">{{ item.parameter2 }}</uni-td>
				<uni-td align="center">{{ item.parameter3 }}</uni-td>
				<uni-td align="center">{{ item.updateTime }}</uni-td>
			</uni-tr>
		</uni-table>
		
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.msgType" :message="message.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup" type="center" background-color="#fff" :is-mask-click="false">
			<!-- 加载动画 -->
			<loding-vue/>
		</uni-popup>
	</view>
</template>

<script>
	//引入加载动画
	import lodingVue from "@/utils/loding/loding.vue";
	import {
		hasValue
	} from "@/utils/judge"
	import {
		listMesFurnaceOperationRecordDetail,
	} from '@/api/mes/bom.js'
	export default {
		components:{
			lodingVue
		},
		data() {
			return {
				/**表单数据 */
				form:{
					/** 工单编号 */
					pwoCode : null,
					/** 物料编码 */
					materialCode : null,
					/** 物料名称 */
					materialName : null,
				},
				/** 校验规则 */
				rules:{
					pwoCode:{
						rules:[
							{
								required : true,
							},
						]
					},
					materialCode:{
						rules:[
							{
								required : true,
							},
						]
					},
				},
				message:{
					msgType:'',
					messageText:''
				},
				tableData:[],
				open:false,
			}
		},
		
		/**
		 * 计算属性
		 */
		computed:{
			/**
			 * 判断form值是否符合要求
			 * 如果符合则可以点击按钮，没有不能点击
			 */
			formComputed(){
				const {pwoCode,materialCode} = this.form
				//物料编码或工单编码有值则按钮可以点击
				if(hasValue(pwoCode) || hasValue(materialCode)){
					//工单编码有值则取消物料编码的必填
					if(hasValue(pwoCode))  this.rules.materialCode.rules[0].required = false
					//物料编码有值则取消工单编码的必填
					if(hasValue(materialCode))  this.rules.pwoCode.rules[0].required = false
					return false
				}
				 this.rules.materialCode.rules[0].required = this.rules.pwoCode.rules[0].required = true
				return true
			}
		},
		methods: {
			/**
			 * 扫码方法
			 * @param {Object} value {'equipment' ||  }
			 */
			iconClick(value){
				const _this = this;
				uni.scanCode({
					// 是否只能从相机扫码，不允许从相册选择图片
					onlyFromCamera:true,
					// 扫码类型
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						value === 'pwoCode' ? _self.body.pwoCode = res.result :value;
					}
				})
			},
			
			/**
			 * 接口访问方法
			 * @param {Object} api 接口名称
			 * @param {Object} value 带入参数
			 */
			async fnApi(api,value){
				const _self = this;
				const objApi = {
					listMesFurnaceOperationRecordDetail,
				}
				try{
					//打开蒙层
					_self.$refs.popup.open()
					//查询接口
					const data = (await objApi[api](value)).rows
					return data
				}catch(e){
					_self.messageType({
						msgType:'error',
						messageText:'接口请求出错'
					})
				}finally{
					//关闭蒙层
					_self.$refs.popup.close()
				}
			},
			/**
			 * 查询按钮点击方法
			 * @param {Object} value
			 */
			async clickSubmit(form){
				const _self= this
				const data = await _self.fnApi('listMesFurnaceOperationRecordDetail',form)
				_self.form.materialName = data[0].materialName
				_self.tableData = data
				_self.open = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ffffff;
		$fontSize:5vw; //设置变量，以字体为基础大小
		font-size: $fontSize;
		color: #6a6663;
		padding-top: 1vw;
		view{
			width: 96vw;
			margin: 0 auto;
		}
	}
</style>
<style>
	page{
		background-color: #ffffff ;
	}
</style>