【H5】avalon前端数据双向绑定

news2024/11/27 2:50:21

系列文章

C#底层库–记录日志帮助类
本文链接:https://blog.csdn.net/youcheng_ge/article/details/124187709

文章目录

  • 系列文章
  • 前言
  • 一、技术介绍
  • 二、项目源码
    • 2.1 绑定text输入框
    • 2.2 绑定select下拉框
    • 2.3 绑定radio单选按钮
    • 2.4 不使用双向绑定处理方式
  • 三、效果展示
  • 四、资源链接


前言

本专栏为【底层库】,主要介绍编程过程中 通用函数。我们将这些通用固化的源码,进行重写、封装、拓展,再进行单元测试、集成测试、beta测试,最终形成通用化模板,这里我们称为“底层库”。

作为研发人员的你,并不需要花大量时间,研究“底层库”的含义,及“底层库”的实现方法。你只需要几行调用代码,就可以解决项目上碰到的难题。而底层库使用方法,本专栏均有详细介绍,也有项目应用场景。

底层库已实现功能:MySQL脚本构建器、MySQL数据库访问操作、参数配置文件读写、加解密算法、日志记录、HTTP通信、Socket通信、API前后端交互、邮件发送、文件操作、配置参数存储、Excel导入导出、CSV和DataTable转换、压缩解压、自动编号、Session操作等。

本专栏会持续更新,不断优化【底层库】,大家有任何问题,可以私信我。本专栏之间关联性较强(我会使用到某些底层库,某些文章可能忽略介绍),如果您对本专栏感兴趣,欢迎关注,我将带你用最简洁的代码,实现最复杂的功能。

一、技术介绍

avalon.mobile.js 移动端双向绑定。根据input控件的value,来动态更新vm中的对象值。
注意:ms-duplex:在向vm传递数据的同时,是泛型 object类型; ms-duplex-checked,ms-duplex-string,ms-duplex-boolean以及ms-duplex-number:在向vm传递数据的同时,指定传递该数据的类型。

二、项目源码

2.1 绑定text输入框

ms-duplex

 <input type="text" class="aui-input aui-text-primary" ms-duplex="riqi" ms-click="CallRiQiSelector"/>

2.2 绑定select下拉框

ms-duplex-string

<select id="txt_banzu" ms-duplex-string="banzu">
	<option value="" selected></option>
	<option value=""></option>
	<option value=""></option>
	<option value=""></option>
</select>

2.3 绑定radio单选按钮

ms-duplex-checked

<label><input class="aui-radio" type="radio" name="banci" ms-duplex-checked="banci" value="" checked="checked">&nbsp;&nbsp;&nbsp;</label>
<label><input class="aui-radio" type="radio" name="banci" value="">&nbsp;&nbsp;&nbsp;</label>

2.4 不使用双向绑定处理方式

//下拉框只改变事件
function CallComboBoxChange() {
	model2.banzu = $api.byId('txt_banzu').value;
	model2.ABCzhiliangdengji = $api.byId('txt_ABCzhiliangdengji').value;
	model2.kaijisudu = $api.byId('txt_kaijisudu').value;
	model2.biaomianzhiliang = $api.byId('txt_biaomianzhiliang').value;
	model2.dijipan = $api.byId('txt_dijipan').value;
	model2.shiyandaima = $api.byId('txt_shiyandaima').value;
}
//单选按钮事件
$('input:radio[name="banci"]').click(function(){
     var checkValue = $('input:radio[name="banci"]:checked').val();
     model2.banci = checkValue;
 });

三、效果展示

在这里插入图片描述
在这里插入图片描述

四、资源链接

完整的网页代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>母线质量登记记录</title>
    <link rel="stylesheet" type="text/css" href="../css/aui2.1.css" />
    <style type="text/css">
.aui-bar {
	margin: 0;
	padding-top:25px;
 }
.aui-list-item-input input[type="text"],
.aui-list-item-input input[type="number"] {
	padding: 5px 10px;
	text-align: left;
	border:1px solid;
	height: 100%;
	
}
.aui-list .aui-list-item-label,
.aui-list .aui-list-item-label-icon {
	/* font-size: 14px; */
	font-weight: 400;
	line-height: 1;
	text-align: left;
	display: table-cell;
	white-space: nowrap; 
	vertical-align: middle;
	padding: 5px;
	width: 100%;
	
	overflow:auto;
	display: -webkit-box;
	color: #212121;
    margin: 0;
    padding: 0;
    padding-right: 0.25rem;
    line-height: 2.2rem;
    position: relative;
    -webkit-box-sizing: border-box;
    		box-sizing: border-box;
    display: -webkit-box;
    -webkit-align-items: center;
            align-items: center;
}

.aui-footer {
	padding: 15px;
}
    </style>
	
</head>
<body ms-controller="model2">
    <!-- 标题栏 -->
   <header class="aui-bar aui-bar-nav" id="aui-header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">
            母线质量登记记录
        </div>
    </header>
    <!-- 内容区域 -->
    <div class="aui-card-list-content-padded">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label" style="width:140px;">
                        日期:
                    </div>
                    <input type="text" class="aui-input aui-text-primary" ms-duplex="riqi" ms-click="CallRiQiSelector"/>                
                </div>
            </li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					原料编号:
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="yuanliaobianhao"/>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;" >
					原料规格:
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="yuanliaoguige" />
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					原料强度:
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="yuanliaoqiangdu" />
			</li>
<!-- 			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					黄丝厂家:
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="huangsichangjia" />
			</li> -->
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					黄丝代码:
				</div>
				<!-- <input type="text" ms-duplex="huangsidaima" ms-click="CallHSCodeSelector"/> -->
				<input type="text" class="aui-input aui-text-primary" ms-duplex="huangsidaima" />
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					doff:
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="doff" readonly/>
			</li>
        </ul> 
    </div>
	
	<!-- 母线信息 -->
	<div class="aui-content aui-margin-10">
	    <ul class="aui-list aui-list-in">
	        <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
	            母线信息
	        </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label" style="width: 190px;">
                        班组:
                    </div>
                    <div class="aui-list-item-input">
						<select id="txt_banzu" ms-duplex-string="banzu">
							<option value="" selected></option>
							<option value=""></option>
							<option value=""></option>
							<option value=""></option>
						</select>
                    </div>
                </div>
            </li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width: 190px;">
						班次:
					</div>
					<div class="aui-list-item-input">
						<label><input class="aui-radio" type="radio" name="banci" ms-duplex-checked="banci" value="" checked="checked">&nbsp;&nbsp;&nbsp;</label>
						<label><input class="aui-radio" type="radio" name="banci" value="">&nbsp;&nbsp;&nbsp;</label>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 190px;">
			            母线盘编号:
			        </div>
					<div class="aui-list-item-input">
						<input type="text" id="txt_muxianpanbianhao" class="aui-input" 
							ms-duplex="muxianpanbianhao" ms-keydown="Btn_KeyDown(event)"/> 
					</div>
					<div class="aui-list-item-right">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-camera" onclick="openScanner()"></i>
						</div>
					</div>	
			    </div>
			</li>
			<li class="aui-list-item">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 190px;">
			            车台号:
			        </div>
			        <input type="text" class="aui-input aui-text-primary" ms-duplex="chetaihao" ms-click="CallCheTaiHaoSelector"/>
			    </div>
			</li>
			<li class="aui-list-item">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 190px;">
			            规格(um):
			        </div>
					<input type="text" class="aui-input aui-text-primary" ms-duplex="guige" />
			    </div>
			</li>	
		</ul>		
	</div>
	
	<!-- ABC质量 -->
	<div class="aui-content aui-margin-10">
	    <ul class="aui-list aui-list-in">
	        <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
	            ABC质量
	        </li>
	        <li class="aui-list-item ">
				 <div class="aui-list-item-inner">
				     <div class="aui-list-item-label" style="width: 140px;">
				         质量等级:
				     </div>
				     <div class="aui-list-item-input">
				         <select id="txt_ABCzhiliangdengji" ms-duplex-string="action">
							<option value="A" selected>A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
				         </select>
				     </div>
				 </div>
	        </li>
			<li class="aui-list-item ">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 140px;">
			            质量描述:
			        </div>
			        <div class="aui-list-item-input">
						<input type="text" ms-duplex="ABCzhiliangmiaoshu" ms-click="CallScrapQualityDescSelector"/>
			        </div>
			    </div>
			</li>
			<li class="aui-list-item ">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 140px;">
			            质量类型:
			        </div>
			        <div class="aui-list-item-input">
						<input type="text" ms-duplex="ABCzhiliangleixing" ms-click="CallScrapQualityTypeSelector"/>
			        </div>
			    </div>
			</li>
	    </ul>
	</div>
	
	<!-- 下盘 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        下盘
		    </li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" >
						直径:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanzhijing"/>
					</div>
					<div class="aui-list-item-label">
						椭圆度:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapantuoyuandu"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						圈径:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanquanjing" />
					</div>
					<div class="aui-list-item-label">
						翘头:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanqiaotou"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						操作工:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="xiapancaozuogong" ms-click="CallXiaWorkerSelector"/>
					</div>
					<div class="aui-list-item-label">
						成品模编码:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="chengpinmobianma" ms-click="CallCPMPrompt"/>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<!-- 长度 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        长度
		    </li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						长度(M):
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="changdu"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						实际定长(KM):
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="shijidingchang"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						下盘累积换模长度(KM):
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanleijihuanmochangdu"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						第几盘:
					</div>
					<div class="aui-list-item-input">
						<select id="txt_dijipan" ms-duplex-string="dijipan">
							<option value="0">0</option>
							<option value="1" selected>1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select>
					</div>
					<div class="aui-list-item-label">
						开机速度:
					</div>
					<div class="aui-list-item-input">
						<select id="txt_kaijisudu" ms-duplex-string="kaijisudu">
							<option value="4">4</option>
							<option value="4.5">4.5</option>
							<option value="8">8</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12" selected>12</option>
							<option value="15">15</option>
						</select>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<!-- 开机 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        开机
		    </li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						上盘操作工:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="shangpancaozuogong" ms-click="CallShangWorkerSelector"/>
					</div>
					<div class="aui-list-item-label">
						开机直径:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijizhijing"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						开机椭圆度:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijituoyuandu" />
					</div>
					<div class="aui-list-item-label">
						开机圈径:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijiquanjing"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						开机翘头:
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijiqiaotou" />
					</div>
					<div class="aui-list-item-label">
						开机领班:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="kaijilingban" ms-click="CallLingBanWorkerSelector" />
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:145px;">
						开机班次:
					</div>
                    <div class="aui-list-item-input">
						<label><input class="aui-radio" type="radio" name="kaijibanci" value="" checked="checked">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> 
						<label><input class="aui-radio" type="radio" name="kaijibanci" value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>     
                    </div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:145px;">
						工艺代码:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="gongyidaima" ms-click="CallGYDMSelector"/>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<!-- 试验代码 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        试验代码
		    </li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						试验代码:
					</div>
					<div class="aui-list-item-input" >
						<select id="txt_shiyandaima" ms-duplex-string="shiyandaima">
							<option value="(空白)" selected>(空白)</option>
							<option value="A0204">A0204</option>
							<option value="A0205">A0205</option>
							<option value="A0206">A0206</option>
							<option value="A0207">A0207</option>
							<option value="A0208">A0208</option>
							<option value="A0209">A0209</option>
							<option value="A0210">A0210</option>
						</select>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						钻石模具代码:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="zuanshimojudaima" ms-click="CallZSMJSelector"/>
					</div>
				</div>
			</li>	
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						钨钢模具代码:
					</div>
					<div class="aui-list-item-input">
						<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="HZ" checked="checked"> HZ&nbsp;&nbsp;&nbsp;</label> 
						<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="LK"> LK&nbsp;&nbsp;&nbsp;</label>
						<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="KL"> KL&nbsp;&nbsp;&nbsp;</label> 
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						定长:
					</div>
					<div class="aui-list-item-input">
						<input type="number"  ms-duplex="dingchang"/>
					</div>
					<div class="aui-list-item-label">
						表面质量:
					</div>
					<div class="aui-list-item-input">
						<select style="height: 100%;" id="txt_biaomianzhiliang" ms-duplex-string="biaomianzhiliang">
							<option value="(空白)" selected>(空白)</option>
							<option value="A">A</option>
							<option value="B">B</option>
							<option value="C">C</option>
							<option value="D">D</option>
							<option value="E">E</option>
						</select>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						BC原因分析:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="BCyuanyinfenxi" ms-click="CallYYFXSelector" />
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						物理退回原因:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="wulituihuiyuanyin" ms-click="CallWLTHCausesSelector" />
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						设备:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="shebei"/>
					</div>
					<div class="aui-list-item-right">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-more" ms-click="CallSBSelector"></i>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						工字轮类型:
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="gongzilunleixing" />
					</div>
					<div class="aui-list-item-right">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-more" ms-click="CallGZLLXSelector"></i>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width: 80px;">
					    备注:
					</div>
					<div class="aui-list-item-input">
						<textarea placeholder="备注" style="	text-align: left;" ms-duplex="beizhu"></textarea>
					</div>
				</div>
			</li>
		</ul>
	</div>

    <!--底部状态栏-->
    <div class="aui-footer">
        <div class="aui-btn aui-btn-info" style="width: 100%" ms-click="Btn_OK">
            确认
        </div>
    </div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/avalon.mobile.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="../script/yuanshiApi.js" ></script>
<script>
apiready = function(){
    api.parseTapmode();
    SetAPIHost();
	
    //上页传值
	var l_data = api.pageParam;
	model2.yuanliaobianhao = l_data.codeno;
	model2.yuanliaoguige = l_data.huangsiguige;
	model2.yuanliaoqiangdu = l_data.qiangdudaihao;
	model2.huangsidaima = l_data.huangsidaima;	
	model2.huangsichangjia = l_data.huangsichangjia;	
	model2.huangsikezhong = l_data.kezhong;	
	model2.doff = l_data.doff;	
	
	model2.ABCzhiliangmiaoshu = "";
	model2.ABCzhiliangleixing = "";
	model2.changdu = 0;
	model2.shijidingchang = 0;
	model2.xiapanleijihuanmochangdu = 0;
	model2.dingchang = 0;
		
    //获取当前日期
    var date = new Date(); 
    var year = date.getFullYear(); 
    var month = date.getMonth() + 1;
    var day = date.getDate();
    month = (month > 9) ? month : ("0" + month);
    day = (day < 10) ? ("0" + day) : day;
    var today = year + "-" + month + "-" + day;
    model2.riqi = today;
}


var model2 = avalon.define({
    $id: "model2",
    riqi: '',//日期
    banzu: '',//班组
    banci: '早',//班次
    chetaihao: '',//车台号
    guige:'',//规格
	
    muxianpanbianhao: '',//母线盘编号
    ABCzhiliangdengji: 'A',//ABC质量等级
    ABCzhiliangmiaoshu: '',//ABC质量描述
    ABCzhiliangleixing: '',//ABC质量类型

    xiapanzhijing: '',//下盘直径
    xiapantuoyuandu: '',//下盘椭圆度
    xiapanquanjing: '',//下盘圈径
    xiapanqiaotou: '',//下盘翘头
    xiapancaozuogong: '',//下盘操作工
    chengpinmobianma: '',//成品模编码

    changdu: '',//长度
    shijidingchang: '',//实际定长
    xiapanleijihuanmochangdu: '',//下盘累积换模长度
    dijipan: 1,//第几盘
    kaijisudu: 12,//开机速度
    yuanliaoguige: '',//原料规格
	yuanliaoqiangdu: '',//原料强度
    yuanliaobianhao: '',//原料编号
    huangsidaima: '',//黄丝代码
	huangsichangjia: '',//黄丝厂家
	huangsikezhong: '',//黄丝克重
	doff: '',//doff

    shangpancaozuogong: '',//上盘操作工
    kaijizhijing: '',//开机直径
    kaijituoyuandu: '',//开机椭圆度
    kaijiquanjing: '',//开机圈径
    kaijiqiaotou: '',//开机翘头
    kaijilingban: '',//开机领班
    kaijibanci: '早',//开机班次
    gongyidaima: '',//工艺代码

    shiyandaima: '',//试验代码
    zuanshimojudaima: '',//钻石模具代码
    wugangmojudaima: 'HZ',//钨钢模具代码
    dingchang: '',//定长
    BCyuanyinfenxi: '',//BC原因分析
    wulituihuiyuanyin: '',//物理退回原因
    shebei: '',//设备
    gongzilunleixing: '',//工字轮类型
    biaomianzhiliang:'',//表面质量
    beizhu: '',//备注
	dr:'0',//删除标识
	
	//回车事件
	Btn_KeyDown : function(event) {
		if (event.keyCode == 13) {
			model2.GetLabelData();
		}
	},
	GetLabelData : function() {
		model2.muxianpanbianhao = model2.muxianpanbianhao.trim();
		if (model2.muxianpanbianhao.length == 0) {
			ShowToast("请扫描二维码!");
			$api.byId("txt_muxianpanbianhao").focus();
			return;
		}
	
		api.ajax({
			url : OpenAPI.ScanMXPBHLabel,
			method : 'post',
			headers: {
				'Content-Type': 'application/json;charset=utf-8'//必须,否则后端无法识别
			},
			returnAll : false,
			timeout : 60,
			data : {
				body : JSON.stringify({
							"No" : model2.muxianpanbianhao
						}) 
			}
		}, function(ret, err) {
				if (ret) {
				if (ret.RetInfo.IsSUCD) {
					var l_tbResult = ret.Data.Obj;
					model2.muxianpanbianhao = l_tbResult.母线盘编号;
					model2.chetaihao = l_tbResult.车台号;
					model2.guige = l_tbResult.母线规格;
				} else {// 取数失败
					ShowToast(ret.RetInfo.ErrorCode+":"+ret.RetInfo.ErrorMsg);
				}
			} else {
				ShowToast(err.msg);
			}
		});
	},
	
    Btn_OK: function () {
		// CallComboBoxChange();//下选值改变事件
		if (model2.ABCzhiliangdengji != "A") {
			if (model2.ABCzhiliangmiaoshu.trim().length==0) {
				ShowToast("质量等级不为A,质量描述必须填写!");
				return;
			}
			if (model2.ABCzhiliangleixing.trim().length==0) {
				ShowToast("质量等级不为A,质量类型必须填写!");
				return;
			}
		}else{
			model2.ABCzhiliangmiaoshu = "";
			model2.ABCzhiliangleixing = "";
		}
		
        var l_detail = [];
        l_detail.push({
            日期: model2.riqi,
			原料编号: model2.yuanliaobianhao,
			原料规格: model2.yuanliaoguige,
			原料强度: model2.yuanliaoqiangdu,
			黄丝厂家: model2.huangsichangjia,
			黄丝代码: model2.huangsidaima,
			黄丝克重: model2.huangsikezhong,
			doff: model2.doff,
			
            班组: model2.banzu,
            班次: model2.banci,
			母线盘编号: model2.muxianpanbianhao,
            车台号: model2.chetaihao,
            规格:model2.guige,

            ABC质量等级: model2.ABCzhiliangdengji,
            ABC质量描述: model2.ABCzhiliangmiaoshu,
            ABC质量类型: model2.ABCzhiliangleixing,

            下盘直径: model2.xiapanzhijing,
            下盘椭圆度: model2.xiapantuoyuandu,
            下盘圈径: model2.xiapanquanjing,
            下盘翘头: model2.xiapanqiaotou,
            下盘操作工: model2.xiapancaozuogong,
            成品模编码: model2.chengpinmobianma,

            长度: model2.changdu,
            实际定长: model2.shijidingchang,
            下盘累积换模长度: model2.xiapanleijihuanmochangdu,
            第几盘: model2.dijipan,
            开机速度: model2.kaijisudu,

            上盘操作工: model2.shangpancaozuogong,
            开机直径: model2.kaijizhijing,
            开机椭圆度: model2.kaijituoyuandu,
            开机圈径: model2.kaijiquanjing,
            开机翘头: model2.kaijiqiaotou,
            开机领班: model2.kaijilingban,
            开机班次: model2.kaijibanci,
            工艺代码: model2.gongyidaima,

            试验代码: model2.shiyandaima,
            钻石模具代码: model2.zuanshimojudaima,
            钨钢模具代码: model2.wugangmojudaima,
            定长: model2.dingchang,
            BC原因分析: model2.BCyuanyinfenxi,
            物理退回原因: model2.wulituihuiyuanyin,
            设备: model2.shebei,
            工字轮类型: model2.gongzilunleixing,
            表面质量: model2.biaomianzhiliang,
            备注: model2.beizhu,
			删除:model2.dr
        });
        model2.SaveData(l_detail);
    },

    SaveData: function (a_strDetail) {
        api.showProgress({
                style : 'default',
                animationType : 'fade',
                title : '数据保存中,请稍候...',
                text : '',
                modal : true
            });      

        //保存数据
        api.ajax({
            url : OpenAPI.SaveDataMX,
            method : 'post',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'//必须,否则后端无法识别
                },
            timeout : 180,
            returnAll : false,
            data : {
                body : JSON.stringify(a_strDetail)
            }
        }, function(ret, err) {
            api.hideProgress();
            if (ret) {
                if (ret.RetInfo.IsSUCD) {// 保存成功
                    api.alert({
                        title : '提示',
                        msg : '保存成功!',
                    }, function(ret, err) {
                        backToHome();
                    });
                } else {// 保存失败
                    ShowToast(ret.RetInfo.ErrorCode+":"+ret.RetInfo.ErrorMsg);
                }
            } 
            else {
                ShowToast(err.msg);
            }
        });
    },
    
    //选择日期
    CallRiQiSelector : function() {
            api.openPicker({
            type: 'date',
            date: model2.riqi,
            title: '选择日期'
        }, function(ret, err) {
            if (ret) {
                model2.riqi = ret.year+"-"+ret.month+"-"+ret.day;
            } else {
                api.alert({
                    msg:JSON.stringify(err)
                });
            }
        });
	},
	
	//成品模编码
	CallCPMPrompt : function() {
		api.prompt({
			title: '成品模编码',
			text: model2.chengpinmobianma,
			buttons: ['确定', '取消']
		}, function(ret, err) {
			model2.chengpinmobianma = ret.text;
		});
	},


    /*通用选择区,标准代码模板*/
	//黄丝规格
	CallHSGGSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmHSGG",
	        url : "MXZLDJ_frmHSGG.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//原料强度通用选择
	CallYLQDSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmHSQD",
	        url : "MXZLDJ_frmHSQD.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//黄丝代码通用选择
	CallHSCodeSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmHSCode",
	        url : "MXZLDJ_frmHSCode.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
    //车台号通用选择
    CallCheTaiHaoSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmCTH",
            url : "MXZLDJ_frmCTH.html",
            pageParam : {
                data : ""
            },
            bounces : false,
            delay : delay
        });
	},
    
    //质量描述
    CallScrapQualityDescSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmZLMS",
            url : "MXZLDJ_frmZLMS.html",
            pageParam : {
                data : ""
            },
            bounces : false,
            delay : delay
        });
	},

    //质量类型通用选择
    CallScrapQualityTypeSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmZLLX",
            url : "MXZLDJ_frmZLLX.html",
            pageParam : {
                data : ""
            },
            bounces : false,
            delay : delay
        });
	},

    //下盘操作工通用选择
    CallXiaWorkerSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmUserInfo",
            url : "MXZLDJ_frmUserInfo.html",
            pageParam : {
                data : "下盘"
            },
            bounces : false,
            delay : delay
        });
    },
    //上盘操作工通用选择
    CallShangWorkerSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmUserInfo",
            url : "MXZLDJ_frmUserInfo.html",
            pageParam : {
                data : "上盘"
            },
            bounces : false,
            delay : delay
        });
    },
    //开机领班通用选择
    CallLingBanWorkerSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmUserInfo",
            url : "MXZLDJ_frmUserInfo.html",
            pageParam : {
                data : "领班"
            },
            bounces : false,
            delay : delay
        });
    },

    //工艺代码
    CallGYDMSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmGYDM",
            url : "MXZLDJ_frmGYDM.html",
            pageParam : {
                data : ""
            },
            bounces : false,
            delay : delay
        });
    },
	//钻石模具代码
	CallZSMJSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmZSMJDM",
	        url : "MXZLDJ_frmZSMJDM.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//BC原因分析
    CallYYFXSelector : function() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name : "MXZLDJ_frmYYFX",
            url : "MXZLDJ_frmYYFX.html",
            pageParam : {
                data : ""
            },
            bounces : false,
            delay : delay
        });
    },
	//物理退回原因
	CallWLTHCausesSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmWLTHCauses",
	        url : "MXZLDJ_frmWLTHCauses.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//设备
	CallSBSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmSB",
	        url : "MXZLDJ_frmSB.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//工字轮类型
	CallGZLLXSelector : function() {
	    var delay = 0;
	    if (api.systemType != 'ios') {
	        delay = 300;
	    }
	    api.openWin({
	        name : "MXZLDJ_frmGZLLX",
	        url : "MXZLDJ_frmGZLLX.html",
	        pageParam : {
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	}
});

	//下拉框只改变事件
	// function CallComboBoxChange() {
	// 	model2.banzu = $api.byId('txt_banzu').value;
	// 	model2.ABCzhiliangdengji = $api.byId('txt_ABCzhiliangdengji').value;
	// 	model2.kaijisudu = $api.byId('txt_kaijisudu').value;
	// 	model2.biaomianzhiliang = $api.byId('txt_biaomianzhiliang').value;
	// 	model2.dijipan = $api.byId('txt_dijipan').value;
	// 	model2.shiyandaima = $api.byId('txt_shiyandaima').value;
	// }

	//单选按钮事件
	$('input:radio[name="banci"]').click(function(){
	     var checkValue = $('input:radio[name="banci"]:checked').val();
	     model2.banci = checkValue;
	 });
	 
	$('input:radio[name="kaijibanci"]').click(function(){
	     var checkValue = $('input:radio[name="kaijibanci"]:checked').val();
	     model2.kaijibanci = checkValue;
	 });
	 
	$('input:radio[name="wugangmojudaima"]').click(function(){
	     var checkValue = $('input:radio[name="wugangmojudaima"]:checked').val();
	     model2.wugangmojudaima = checkValue;
	 });		

    //黄丝规格回调函数
    function SelectHSGGCallBack(data) {
        model2.yuanliaoguige = data.simple_name;
    }
	//黄丝强度回调函数
	function SelectHSQDCallBack(data) {
	    model2.yuanliaoqiangdu = data.simple_name;
	}
    //黄丝代码回调函数
    function SelectHSCodeCallBack(data) {
        model2.huangsidaima = data.simple_no;
    }
	
    //车台号
    function SelectCTHCallBack(data) {
        model2.chetaihao = data.equipment_name;
    }

    //质量描述回调函数
    function SelectQualityDescCallBack(data) {
        model2.ABCzhiliangmiaoshu = data.word_name_cn;
    }

    //质量类型回调函数
    function SelectQualityTypeCallBack(data) {
        model2.ABCzhiliangleixing = data.word_name_cn;
    }

    //下盘操作工回调函数
    function SelectXiaWorkerCallBack(data) {
        model2.xiapancaozuogong = data.user_name;
     }
    //上盘操作工回调函数
    function SelectShangWorkerCallBack(data) {
        model2.shangpancaozuogong = data.user_name;
    }
    //领班回调函数
    function SelectLingBanWorkerCallBack(data) {
        model2.kaijilingban = data.user_name;
    }

    //工艺代码回调函数
    function SelectGYDMCallBack(data) {
        model2.gongyidaima = data.gydm;
    }
	
    //钻石模具代码回调函数
    function SelectZSMJCallBack(data) {
        model2.zuanshimojudaima = data.mj_code;
    } 
	
    //BC原因分析回调函数
    function SelectAnalysisCallBack(data) {
        model2.BCyuanyinfenxi = data.word_name_cn;
    } 
	
    //物理退回原因
    function SelectTuihuiCallBack(data) {
        model2.wulituihuiyuanyin = data.causes_back;
    } 
	//设备
    function SelectSBCallBack(data) {
        model2.shebei = data.word_name_cn;
    } 
	
	//工字轮类型
    function SelectGZLLXCallBack(data) {
        model2.gongzilunleixing = data.word_name_cn;
    } 
	
	//扫码
	function openScanner() {
		var scanner = api.require('scanner');
			scanner.open(function(ret, err) {
			if (ret.eventType == "success") {
				model2.muxianpanbianhao = ret.msg;
				model2.GetLabelData();
			} else {
				$api.byId('txt_muxianpanbianhao').innerHTML = JSON.stringify(err);
			}
		});
	}

    //关闭页面
    function closeWin() {
        api.closeWin();
    }

    //关闭返回上一页面
    function backToHome() {
        api.closeToWin({
            name : 'MXZLDJ_frm1'
        });
    }

    //提示消息
    function ShowToast(a_strMsg) {
        api.toast({
            msg : a_strMsg,
            duration : 5000,
            location : 'middle'
        });
    }       
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/615801.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分布式锁工具Redisson

一、Redisson概述 二、分布式锁 三、Redisson分布式锁 四、RLock 五、公平锁 六、总结 一、Redisson概述 什么是Redisson&#xff1f; Redisson是一个在Redis的基础上实现的Java驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;。它不仅提供了一系列的分布式…

笔记本安装centos操作系统

一、下载centos镜像 centos官方历史版本&#xff1a;Index of / 常用的镜像文件类型介绍&#xff1a; DVD ISO&#xff1a;普通光盘完整安装版镜像&#xff0c;可离线安装到计算机硬盘上&#xff0c;包含大量的常用软件&#xff08;一般选择这种jing&#xff09;。 Everythi…

运维小白必学篇之基础篇第十九集:rsync+inotfy实时同步

rsyncinotfy实时同步 目录 rsyncinotfy实时同步 一、服务器端 二、客户端 一、服务器端 1、安装网站服务&#xff0c;启动&#xff0c;但是不写首页文件 yum -y install httpd 2、安装raync服务 yum -y install rsync 3、修改主配置文件 &#xff08;/etc/rsyncd.conf&am…

Python代码部署的三种加密方案

本文主要介绍了Python代码部署的三种加密方案&#xff0c;主要介绍了代码混淆、代码编译、代码打包这三种&#xff0c;具有一定的参考价值&#xff0c;感兴趣的可以了解一下 前言 最近需要源码部署一个项目&#xff0c;因此探索一下保护源码的方式&#xff0c;由简单到复杂主要…

好网角怎么发帖?文章发不出去怎么解决?

好网角怎么发帖&#xff1f;文章发不出去怎么解决&#xff1f;如何在网上发帖子&#xff1f;在网上发帖子#科技#电脑#网络#方法 N 如何在网上发帖子&#xff1f; 试用系统 windows 7 首先打开电脑中的任意浏览器&#xff0c;进入之后打开百度网站&#xff0c;点击右上角的登录…

信噪比对重构算法的影响

前面分析了MP算法、OPM算法和SP算法的原理以及采样率对三种算法的影响。在实际的应用中&#xff0c;会混入噪声&#xff0c;没有噪声那是理想的情况&#xff0c;这里就研究一下信噪比对重构信号产生的MSE的影响。 1、 信噪比对MP算法的影响 首先研究信噪比对MP算法产生的影响…

数字化的未来,VR全景房产解决方案,引领房地产行业变革!

导语&#xff1a; 随着科技的迅猛发展&#xff0c;数字化正逐渐改变着各行各业的面貌。在房地产领域&#xff0c;一种创新的数字化工具正逐渐崭露头角——VR电子楼书。 它融合了虚拟现实技术&#xff0c;为购房者提供了一种前所未有的全新体验&#xff0c;也为房地产行业带来了…

【Linux网络编程】传输层udp协议篇

udp协议篇 一、本篇是在应用篇的后面的二、传输层2.1、再谈端口号2.2.1、两个问题2.2.2、两个常用命令 2.2、UDP协议2.2.1、udp协议端格式&&理解报头2.2.2、udp的特点2.2.3、udp的缓冲区2.2.4、基于udp的应用层协议 一、本篇是在应用篇的后面的 讲解过程是自顶向下的&…

常用模拟低通滤波器的设计——巴特沃斯滤波器

常用模拟低通滤波器的设计——巴特沃斯(Butterworth)滤波器 滤波器是一种具有频率选择作用的电路或运算处理系统&#xff0c;它具有区分区分输入信号的各种不同频率成分的功能&#xff0c;具有滤除噪声和分离各种不同信号的功能。综合一个滤波器的基本步骤分为逼近和实现。逼近…

如何在电脑上图片裁剪?裁剪图片大小的方法介绍

图片裁剪大小的优点 在数字化时代&#xff0c;图片已成为人们日常生活中使用最频繁的媒介之一。然而&#xff0c;由于不同尺寸和比例的图片在不同的平台上展示效果有所不同&#xff0c;因此需要对其进行裁剪。 图片裁剪大小的主要优点包括&#xff1a; 1. 优化页面显示&…

OJ #207. 评奖2

题目描述 ​ 山治同学所在的班级共有 N名同学&#xff0c;期末考试时进行了数学、语文、英语、地理四门功课的 测试。现要将班里总分最高的同学评为“学习小状元”。​ 如 3 名学生&#xff0c;4 门课程的成绩如下&#xff1a; 数学 语文 英语 地理 hong 98 90 87 74 Ming 96…

Hive学习---5、分区表和分桶表

1、分区表和分桶表 1.1 分区表 Hive中的分区就是把一张大表的数据按照业务需求分散的存储到多个目录&#xff0c;每个目录就称为该表的一个分区。在查询时通过where子句中的表达式选择查询所需要的分区&#xff0c;这样的查询效率会提高很多。 1.1.1 分区表基本语法 1、创建…

树莓派VNC控制报错:The connection was refused by the computer 已解决

在进行VNC远程操控树莓派的时候&#xff0c;出现了这个错误&#xff1a;The connection was refused by the computer。 大概原因有两个&#xff1a;一个是树莓派的IP地址更改了&#xff0c;另一个就是树莓派的VNC服务没有开启。 我的这块板子是个新板子&#xff0c;原因很显…

软件测试理论

测试理论 一 测试定义及原则 1 软件定义 一些列按着特定顺序组织的计算机数据和指令的集合&#xff1a; 软件 数据 指令 文档 2 软件分类 工具类软件游戏类软件电商类软件社交类软件教育类软件等 3. 软件架构分类 单机软件&#xff1a; office、红警等分布式软件 C/…

煤矿井下定位设备,实现特殊环境下人员安全管理

煤矿、金属矿山等地下作业场所的安全管理工作要求高、难度大&#xff0c;矿用人员定位系统通过实时定位等功能&#xff0c;可以帮助企业随时掌握作业人员的位置安全&#xff0c;提高生产和安全管理效率&#xff0c;并可在紧急情况时迅速采取措施&#xff0c;减少事故损失&#…

云原生容器安全检测有多难?安全狗云原生安全新版六招“泰酷辣”

想借助大规模部署和使用容器应用来提升业务系统开发速度&#xff1f;那你一定会发现&#xff0c;大量的数据对象、多种安全风险都需要检测&#xff0c;容器的安全检测难度增加了&#xff01; 安全狗发现众多企业用户对安全的要求不再停留在“能用就好”的程度&#xff0c;于是新…

5种超超超实用的TikTok选品方法

是不是有很多人在做TikTok Shop时不知道该如何选品&#xff0c;面对琳琅满目的产品纠结该上哪款产品呢&#xff1f;今天就给大家介绍5种超实用的TikTok选品方法。 一、选品方法 1.从用户需求方面入手 做TikTok面向的是国外&#xff0c;所以选品时不能以国内的市场需求做参考&…

深入剖析SQL JOIN原理,助你掌握数据连接的奥秘!

大家好&#xff0c;我是小米&#xff0c;在技术的海洋中畅游的小编。今天&#xff0c;我要带你探索SQL JOIN的神奇原理&#xff0c;为你解锁高效数据查询的技巧&#xff01;无论你是初学者还是资深开发者&#xff0c;相信这篇文章都能给你带来新的启发。废话不多说&#xff0c;…

算法技巧-双指针

欢迎关 Android茶话会 回 pdf 取阿里&字节经典面试题、Android、算法、Java等系列武功秘籍 在技术学习、个人成长的道路上&#xff0c;让我们一起前进&#xff01; 前言 双指针技巧在算法题中算是常用技巧了&#xff0c;让我们省去for循环&#xff0c;降低复杂度&#xff…

第二十章_Redis分布式锁Redlock算法和底层源码分析

当前代码为8.0版接上一步 自研一把分布式锁&#xff0c;面试中回答的主要考点 按照JUC里面java.util.concurrent.locks.Lock接口规范编写 lock()加锁关键逻辑 加锁的Lua脚本&#xff0c;通过redis里面的hash数据模型&#xff0c;加锁和可重入性都要保证 加锁不成&#xff0c;…