rd_mes_uniapp/pages/bom/chiefRecords.vue

<template>
	<view>
		<div id="body">
			<div class="head">
				<table>
					<tr>
						<td>设&emsp;&emsp;备:</td>
						<td>
							<uni-easyinput type="text" prefixIcon="scan"
							placeholder="请扫描设备!" 
							v-model="machineCode"
							@iconClick="iconClick('machineCode')"
							/>
							<div class="button" @click="clickButton('getSelect')">查询</div>
						</td>
					</tr>
					<tr>
						<td>当前状态：</td><td>{{head.statusChina}}</td>
					</tr>
					<tr>
						<td>开炉时间：</td><td>{{head.openTime}}</td>
					</tr>
					<tr>
						<td>关炉时间：</td><td>{{head.closeTime}}</td>
					</tr>
				</table>
				<div>
					<div class="button"  @click="clickButton('openTrue')">开炉</div>
					<div class="button"  @click="clickButton('openClose')">关炉</div>
					<div class="button"  @click="clickButton('openUpdate')" :class="{ 'bgColor-Click': open }">记录</div>
				</div>
			</div>
			<div class="body">
				<div class="button" @click="clickButton('getHistory')">查看历史</div>
				<table v-show="open">
					<tr>
						<td>工单编码:</td>
						<td>
							<uni-easyinput type="text" prefixIcon="scan"
							placeholder="请扫描工单编码!" 
							v-model="body.pwoCode"
							@iconClick="iconClick('pwoCode')"
							@change="getPwoCode"
							/>
						</td>
					</tr>
					<tr>
						<td>物料编码:</td><td><uni-easyinput disabled v-model="body.ptNoTar" placeholder="工单扫完带出" /></td>
					</tr>
					<tr>
						<td>物料名称:</td><td><uni-easyinput disabled v-model="body.ptTitleTar" placeholder="工单扫完带出"/></td>
					</tr>
					<tr>
						<td>参&nbsp;&nbsp;数&nbsp;&nbsp;1&nbsp;:</td><td><uni-easyinput v-model="body.parameter1" placeholder="输入"/></td>
					</tr>
					<tr>
						<td>参&nbsp;&nbsp;数&nbsp;&nbsp;2&nbsp;:</td><td><uni-easyinput v-model="body.parameter2" placeholder="输入"/></td>
					</tr>
					<tr>
						<td>参&nbsp;&nbsp;数&nbsp;&nbsp;3&nbsp;:</td><td><uni-easyinput v-model="body.parameter3" placeholder="输入"/></td>
					</tr>
				</table>
				<button v-show="open" type="primary" style="width: 100%;" @click="clickButton('submit')">提交记录</button>
			</div>
		</div>
		<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 { 
		listMesFurnaceOperationRecord,
		addMesFurnaceOperationRecord,
		closeFurnace,
		addMesFurnaceOperationRecordDetail
	} from '@/api/mes/bom.js'
	import {listPwoLike} from "@/api/mes/pwoIn.js"
	//引入加载动画
	import lodingVue from "@/utils/loding/loding.vue";
	export default {
		components:{
			lodingVue
		},
		data() {
			return {
				machineCode:'',
				head:{
					updateTime:'',
					openTime:'',
					statusChina:'',
				},
				body:{},
				open:false,
				message:{
					msgType:'warn',
					messageText:'请先查询设备信息'
				},
			}
		},
		methods: {
				/**
				 * 扫码方法
				 * @param {Object} value {'equipment' ||  }
				 */
				iconClick(value){
					const _this = this;
					uni.scanCode({
						// 是否只能从相机扫码，不允许从相册选择图片
						onlyFromCamera:true,
						// 扫码类型
						scanType: ['barCode', 'qrCode'],
						success: function(res) {
							value === 'machineCode' ?  _self.machineCode = res.result : value;
							value === 'pwoCode' ? _self.body.pwoCode = res.result :value;
						}
					})
				},
				/**
				 * 按钮点击事件
				 * @param {Object} value
				 */
				clickButton(value){
					const _self= this
					if(_self.machineCode == '') {
						return _self.messageType({
							msgType:'warn',
							messageText:'请输入设备代码'
						})
					}
					if(_self.head.statusChina === undefined && value !== 'getSelect'){
						return _self.messageType({
							msgType:'warn',
							messageText:'请先查询设备信息'
						})
					}
					_self[value]()
				},
				/**
				 * 查询设备最近的记录
				 */
				async getSelect(){
					const _self = this
					const query = {
						pageNum: 1,
						pageSize: 1,
						machineCode: _self.machineCode,
						orderByColumn: "id",
						isAsc: "desc",
					}
					let rows = (await _self.fnApi('listMesFurnaceOperationRecord',query))[0];
					if(rows === undefined) return
						_self.open = false;
					rows = Object.assign(rows,{statusChina:await getStatus(rows)})
					_self.head = rows
					/**
					 * 判断当期是清炉|关|开
					 * @param {Object} arr
					 */
					function getStatus (arr){
						const obj = {
							0:'开炉',
							1:'关炉',
							2:'清炉'
						}
						return obj[arr.status]
					}
				},
				/**
				 * 开炉事件
				 */
				async openTrue(){
					const _self = this;
					
					const {clearBy,clearTime,closeBy,closeTime,createBy,createTime,machineCode, machineId} =  _self.head
				
					// 获取当前北京时间的时间戳（单位为毫秒）
					var stamp= new Date().getTime() + 8 * 60 * 60 * 1000;
					var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
					
					const openBy = uni.getStorageSync('HBusername')
					const obj = Object.assign(_self.head,{
						openBy,
						openTime:beijingTime,
						updateTime:beijingTime,
						id:null,
						status:0
					})
					await _self.fnApi('addMesFurnaceOperationRecord',obj)
					_self.getSelect()
				},
				/**
				 * 关炉事件
				 */
				async openClose(){
					const _self = this;
					await _self.fnApi('closeFurnace',_self.head.id)
					_self.getSelect()
				},
				/**
				 * 工单查询事件
				 * @param {Object} value
				 */
				async getPwoCode(value){
					const _self = this;
					const row = (await _self.fnApi('listPwoLike',{pwoCode:_self.body.pwoCode}))[0]
					_self.body = Object.assign({},row)
				},
				/**
				 * 记录事件
				 */
				openUpdate(){
					const _self = this;
					_self.open = !_self.open
				},
				/**
				 * 提示信息
				 * @param {Object|undefined} value
				 * {msgType,messageText} 参数里面需要包含这两个键
				 */
				messageType(obj){
					const _self = this;
					let message ={}
					if(obj === undefined){
						message = {
							msgType:'error',
							messageText:'请填写设备代码'
						}	
					}else{
						message = {
							msgType:obj.msgType,
							messageText:obj.messageText
						}
					}
					_self.message = Object.assign({},message)
					return _self.$refs.message.open()
				},
				/**
				 * 接口访问方法
				 * @param {Object} api 接口名称
				 * @param {Object} value 带入参数
				 */
				async fnApi(api,value){
					const _self = this;
					const objApi = {
						addMesFurnaceOperationRecord,
						closeFurnace:closeFurnace,
						listMesFurnaceOperationRecord,
						listPwoLike:listPwoLike,
						addMesFurnaceOperationRecordDetail
					}
					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()
					}
				},
				/**
				 * 提交方法
				 */
				async submit(){
					const _self = this;
					
					const {id} =_self.head
					const {pwoCode,materialCode,ptTitleTar,parameter1,parameter2,parameter3} = _self.body
					
					const obj = {
						createBy: null,
						createTime: null,
						delStatus: "0",
						finalProductCode: null,
						finalProductName: null,
						furnaceOpRecCode: null,
						furnaceOpRecId: id,
						id:null,
						materialCode,
						materialName:ptTitleTar,
						opType: null,
						parameter1,
						parameter2,
						parameter3,
						parameter4: null,
						parameter5: null,
						parameter6: null,
						parameter7: null,
						parameter8: null,
						pwoCode,
						remark: null,
						updateBy: null,
						updateTime: null,
					}
					await _self.fnApi('addMesFurnaceOperationRecordDetail',obj)
					_self.messageType({
						msgType:'success',
						messageText:'提交成功'
					})
				},
				/**
				 * 查看历史
				 */
				getHistory(){
					const _self = this;
					
					const obj = {
						type : 'chiefRecords',
						value : {id:_self.head.id}
					}
					 //在起始页面跳转到test.vue页面并传递参数
					uni.navigateTo({
						url: '/pages/bom/history',
						success: function(res) {
						    // 通过eventChannel向被打开页面传送数据
						    res.eventChannel.emit('data', obj)
						  }
					});
				}
				
		}
	}
</script>

<style lang="scss" scoped>
	#body{
		margin: 0 auto; 
		width: 90vw;
		$fontSize:5vw; //设置变量，以字体为基础大小
		font-size: $fontSize;
		color: #6a6663;
		.head{
			table{
				&>tr:first-child>td:last-child{ //设置table里面的第一个tr的第二个td的宽
					width: 71%; 
					// float: left;
					& > * {
						float: left;
						font-size: $fontSize * 0.75;
					}
					& >*:first-child{
						width: 70%;
					}
					& >*:last-child {
						margin-left: 2%;
						width: 25%;
						min-height: 35px;
						max-height: 50px;
						border: 1px solid #a3cccc;
					}
				}
			}
			&>div{
				display: flex; //设置子元素开启flex布局
				justify-content: space-around; //设置子元素横向对齐方式
				border-bottom: $fontSize / 10 solid #cbccbf; //设置div下面的框的样式
				padding: $fontSize 0 $fontSize/2; //设置其内部子元素的所在位置
			}
		}
		.body{
			padding: $fontSize/2 0 0 0 ; //设置内边距
			display: flex; //开启flex布局
			flex-direction:row-reverse; //设置主轴对齐方向为水平，并且右对齐
			flex-wrap: wrap ; //设置换行
			&>div{
				// width: 4 * $fontSize;
				margin:0 $fontSize * 0.9 $fontSize 0;
			}
			table{
				width: 100%;
				float: left;
				&>tr:first-child>td:last-child{
					width: 70%;
				}
			}
		}
		.button{
			width: 4 * $fontSize;
			// aspect-ratio: 2; //设置元素纵横比，宽是高的两倍
			border: $fontSize / 10 solid #a3cccc;
			border-radius: 15%;
			text-align: center;
			// line-height: 2 * $fontSize;
		}
	}
	
	@media (min-width: 100px) and (max-width: 600px) {
	    .head>table>tr:first-child>td:last-child>*:last-child{
	        font-size: 15px;
	        line-height: 35px;
		}
	}
	@media (min-width: 600px) {
	    .head>table>tr:first-child>td:last-child>*:last-child{
			font-size: 30px;
			line-height: 50px;
	    }
	}
	.bgColor-Click{
		background-color: #a3cccc;
	}
</style>

<style>
	page{
		background-color: #ffffff ;
	}
</style>