[H5] avalon front-end data two-way binding (MVVM)

series of articles

C# underlying library – record log helper
link to this article: https://blog.csdn.net/youcheng_ge/article/details/124187709


foreword

This column is [H5], which mainly introduces HTML5, CSS, and JavaScript technologies. Nowadays, html

This column will continue to be updated and enrich [H5]. If you are interested in this column, welcome to pay attention. I will guide you to use the most concise code to realize the most complex functions.

1. Technical introduction

avalon.mobile.js mobile two-way binding. According to the value of the input control, the object value in the vm is dynamically updated.

to bind

Avalon's binding (or instruction) has the following three types:
{ {}} Interpolation expression, which is between the opening tag and the closing tag, in other words, it is also located in the text node, innerText. Various filters (identified by |) can be added inside { {}}. It is worth noting that { {}} is actually a form of text binding (ms-text).
ms-* binding attributes, which are located inside the opening tag, and 95% of bindings exist in this form. Their format is roughly divided like this "ms" + type + "-" + param1 + "-" + param1 + "-" + param2 + ... + number = value ms-skip //This binding attribute has no
value
ms- controller="expr" //This binding attribute has no parameter
ms-if="expr" //This binding attribute has no parameter
ms-if-loop="expr" //This binding attribute has a parameter
ms-repeat- el="array" //This binding attribute has a parameter
ms-attr-href="xxxx" //This binding attribute has a parameter
ms-attr-src="xxx/{ {a}}/yyy/{ {b}}” //The value of this binding property contains an interpolation expression, note that only a small number of properties that represent string types can use interpolation expressions
ms-click-1="fn" //The name of this binding property There are numbers at the end, which is convenient for us to bind more click events ms-click-2="fn" ms-click-3="fn"
ms-on-click="fn" // Only numbers can be added to indicate the binding attribute of the event and the class name, such as this can also be written as ms-on-click-0="fn" ms-class-1="
xxx " ms-class-2="yyy" ms-class-3="xxx" //The number also indicates the order of binding
ms-css-background-color="xxx" //This binding property has two parameters, But in css binding, it is equivalent to one, which will be internally converted to backgroundColor
ms-duplex-aaa-bbb-string="xxx"//This binding property has three parameters, indicating three different interception operations

Event binding (ms-on)

Avalon performs event binding through ms-on-click or ms-click, and repairs the event object in IE. Specifically,
avalon does not design an event system with nearly 900 lines like jQuery, and even the execution order of event callbacks Both are repaired (IE6-8, the callbacks added by attachEvent are not executed in the order of first-in-first-out), it is only a thin layer of encapsulation, so the performance is very strong.
ms-click
ms-dblclick
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mousedown
ms-keypress ms
-keyup
ms-keydown ms
-focus
ms-blur
ms-change
ms-scroll
ms- animation
ms-on-*

注意:ms-duplex:在向vm传递数据的同时,是泛型 object类型; ms-duplex-checked,ms-duplex-string,ms-duplex-boolean以及ms-duplex-number:在向vm传递数据的同时,指定传递该数据的类型。

2. Project source code

2.1 Bind the text input box

ms-duplex

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

2.2 Bind the select drop-down box

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>

Values ​​can also be optionadded, using ms-repeattraversal.

<select ms-duplex-string="data.jieguo1">
	<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
</select>
var model = avalon.define({
    
    
	$id: "model",
	jieguo_list: ["合格", "不合格"],
	jianyanjieguo_list: ["空", "合格", "不合格", "报废"],
	buhegeyuanyin_list: ["空", "米数不足", "直径大", "直径小", "表面不良", "重量不足", "密度超差"], //不合格原因
	biaozhun_list: [],

	data: {
    
    
		gongsibianhao: '',
		yangpingbianhao: '',
		yangpingleixing: '',
		guige: '',
		yangpinguizebianhao: '',

		toubuzhijing: '',
		zhongbuzhijing: '',
		weibuzhijing: '',
		kongqizhongzhongliang: '',
		shuizhongzhongliang: '',
		midu: 0,
		jieguo1: '',
		jieguo2: '',
		jieguo3: '',
		jieguo4: '',
		jieguo5: '',
		jieguo6: '',
		jianyanjieguoTotal: '空', //检验结果
		buhegeyuanyinTotal: '空', //不合格原因
		beizhuTotal: '',
	},

2.3 Binding radio radio buttons

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 Binding image resources

ms-attr-src

<div class="aui-row">
	<div class="aui-col-xs-3" ms-repeat="List_menu" tapmode ms-click="openWin(el.fun_guid,el.url)">
		<div class="aui-iconfont">
			<img class="aui-col-image" ms-attr-src="{
     
     {el.img_src}}" />
		</div>
		<div class="aui-grid-label">{
   
   {el.menu_name}}</div>
	</div>
</div>

Function menu List_menuarray, you can define menu.js hardcoded, you can also use 查询数据库the form, as long as the data conforms to the following format is OK.
①Method 1: write menu.js to death

var GetMenu = [
	// {
    
    
	// 	fun_guid: "WuTiaoYang_frm1",
	// 	url: "WuTiaoYang_frm1.html",
	// 	img_src: '../image/yangpin.png',
	// 	menu_name: "钨条样"
	// },
	{
    
    
		fun_guid: "Thick_1_XDZeroOn",
		url: "Thick_1_XDZeroOn.html",
		img_src: "../image/shangji.png",
		menu_name: "零号旋锻上机"
	},
	{
    
    
		fun_guid: "Thick_2_XDZeroDown",
		url: "Thick_2_XDZeroDown.html",
		img_src: "../image/xiaji.png",
		menu_name: "零号旋锻下机"
	},
	{
    
    
		fun_guid: "Thick_3_XDFour",
		url: "Thick_3_XDFour.html",
		img_src: "../image/xuanduan.png",
		menu_name: "四号旋锻"
	},
	{
    
    
		fun_guid: "Thick_4_THOne",
		url: "Thick_4_THOne.html",
		img_src: "../image/tuihuo.png",
		menu_name: "一号退火"
	},
	{
    
    
		fun_guid: "Thick_5_XDThree",
		url: "Thick_5_XDThree.html",
		img_src: "../image/xuanduan.png",
		menu_name: "三号旋锻"
	},
	{
    
    
		fun_guid: "Thick_6_XDTwo",
		url: "Thick_6_XDTwo.html",
		img_src: "../image/xuanduan.png",
		menu_name: "二号旋锻"
	},
	{
    
    
		fun_guid: "Thick_7_THTwo",
		url: "Thick_7_THTwo.html",
		img_src: "../image/tuihuo.png",
		menu_name: "二号退火"
	},
	{
    
    
		fun_guid: "Thick_8_XDOne",
		url: "Thick_8_XDOne.html",
		img_src: "../image/xuanduan.png",
		menu_name: "一号旋锻"
	},
	{
    
    
		fun_guid: "Thick_9_BigTurn",
		url: "Thick_9_BigTurn.html",
		img_src: "../image/zhuanpan.png",
		menu_name: "大转盘"
	},
	{
    
    
		fun_guid: "Thick_10_SmallTurn",
		url: "Thick_10_SmallTurn.html",
		img_src: "../image/zhuanpan.png",
		menu_name: "小转盘"
	},
	{
    
    
		fun_guid: "Thick_11_AirSevenDown",
		url: "Thick_11_AirSevenDown.html",
		img_src: "../image/xiaji.png",
		menu_name: "气七模下盘"
	}
];

② Method 2: Database query
Read the article for details: https://blog.csdn.net/youcheng_ge/article/details/131472661

GetMenu: function() {
    
    
			api.showProgress({
    
    
				style: 'default',
				animationType: 'fade',
				title: '正在查询,请稍候...',
				text: '',
				modal: true
			});

			var sqlString = "SELECT c.fun_guid,c.url,c.img_src,c.menu_name,a.用户编号,a.用户角色,b.模组名称,b.权限使能 " +
				"FROM dl_mes.用户信息表 a " +
				"LEFT JOIN dl_mes.用户权限表 b ON a.用户编号=b.用户编号 " +
				"INNER JOIN dl_mes.app功能菜单表 c ON c.visible='是' AND (b.模块名称=c.menu_name OR a.用户角色='管理员') " +
				"WHERE (b.权限使能='是' OR a.用户角色='管理员') AND a.用户编号= " + "'" + model.user_no + "'";

			api.ajax({
    
    
				url: API_HOST,
				method: 'post',
				headers: {
    
    
					'Content-Type': 'application/json;charset=utf-8', //必须,否则后端无法识别
					'SN': 14, //消息ID
					'UserID': model.user_no //用户编号
				},
				returnAll: false,
				timeout: 60,
				data: {
    
    
					body: JSON.stringify({
    
    
						"sqlString": sqlString,
					})
				}
			}, function(ret, err) {
    
    
				api.hideProgress();
				if (ret) {
    
    
					if (ret.Success) {
    
     //成功
						model.List_menu = ret.Data.List_TableSend[0];
					} else {
    
     // 取数失败
						ShowToast(ErrorMsg);
					}
				} else {
    
    
					api.alert({
    
    
						msg: err.msg
					});
				}
			});
		},

2.5 Do not use two-way binding processing

//下拉框只改变事件
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;
 });

3. Effect display

insert image description here
insert image description here

4. Resource link

Complete web page code:

4.1 The source code of the busbar quality registration web page

<!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>

4.2 Tungsten Bar Inspection Webpage Source Code

<!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">
			select {
      
      
				padding: 5px 10px;
				text-align: left;
				border: 1px solid;
				height: 100%;
			}

			.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-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="model">
		<!-- 标题栏 -->
		<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">
							样品编号:
						</div>
						<input type="text" class="aui-input aui-text-danger aui-label-outlined"
							ms-duplex="data.yangpingbianhao" readonly />
					</div>
				</li>

				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							样品类型:
						</div>
						<input type="text" class="aui-input aui-text-primary" ms-duplex="data.yangpingleixing"
							readonly />
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							规格:
						</div>
						<input type="text" class="aui-input aui-text-primary" ms-duplex="data.guige" readonly />
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							样品规则编号:
						</div>
						<input type="text" class="aui-input aui-text-primary" ms-duplex="data.yangpinguizebianhao"
							readonly />
					</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" class="aui-input" ms-duplex="data.toubuzhijing"
								ms-on-change="Fun_change('头部直径')" />
						</div>
						<div class="aui-list-item-label">
							结果:
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo1">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</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" class="aui-input" ms-duplex="data.zhongbuzhijing"
								ms-on-change="Fun_change('中部直径')" />
						</div>
						<div class="aui-list-item-label">
							结果:
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo2">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</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" class="aui-input" ms-duplex="data.weibuzhijing"
								ms-on-change="Fun_change('尾部直径')" />
						</div>
						<div class="aui-list-item-label">
							结果:
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo3">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</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" class="aui-input" ms-duplex="data.kongqizhongzhongliang"
								ms-on-change="Fun_change('空气中重量')" />
						</div>
						<div class="aui-list-item-label">
							结果:
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo4">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</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" class="aui-input" ms-duplex="data.shuizhongzhongliang"
								ms-on-change="Fun_change('水中重量')" />
						</div>
						<div class="aui-list-item-label">
							结果:
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo5">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							密度 :
						</div>
						<input type="number" class="aui-input aui-text-primary" ms-duplex="data.midu" readonly />
						<div class="aui-list-item-label">
							结果:
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo6">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</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: #bfbfbf;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">
							<select ms-duplex-string="data.jianyanjieguoTotal" ms-on-change="Fun_jianyanjieguochange()">
								<option ms-repeat-el="jianyanjieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</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 ms-duplex-string="data.buhegeyuanyinTotal">
								<option ms-repeat-el="buhegeyuanyin_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</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">
							<textarea placeholder="填写备注" class="aui-input" style="border:1px solid;text-align: left"
								ms-duplex="data.beizhuTotal"></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/yuanshiApi.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script>
		apiready = function() {
      
      
			api.parseTapmode();
			SetAPIHost();
			//上页传值
			var l_data = api.pageParam;
			model.data.gongsibianhao = l_data.gongsibianhao;
			model.data.yangpingleixing = l_data.yangpingleixing;
			model.data.yangpingbianhao = l_data.yangpingbianhao;
			model.data.guige = l_data.guige;
			model.biaozhun_list = l_data.dt_biaozhun;
			if (model.biaozhun_list.length > 0) {
      
      
				model.data.yangpinguizebianhao = model.biaozhun_list[0].规则编号;
			}
		}

		var model = avalon.define({
      
      
			$id: "model",
			jieguo_list: ["合格", "不合格"],
			jianyanjieguo_list: ["空", "合格", "不合格", "报废"],
			buhegeyuanyin_list: ["空", "米数不足", "直径大", "直径小", "表面不良", "重量不足", "密度超差"], //不合格原因
			biaozhun_list: [],

			data: {
      
      
				gongsibianhao: '',
				yangpingbianhao: '',
				yangpingleixing: '',
				guige: '',
				yangpinguizebianhao: '',
				toubuzhijing: '',
				zhongbuzhijing: '',
				weibuzhijing: '',
				kongqizhongzhongliang: '',
				shuizhongzhongliang: '',
				midu: 0,
				jieguo1: '',
				jieguo2: '',
				jieguo3: '',
				jieguo4: '',
				jieguo5: '',
				jieguo6: '',
				jianyanjieguoTotal: '空', //检验结果
				buhegeyuanyinTotal: '空', //不合格原因
				beizhuTotal: '',
			},

			//计算密度(小数点后三位)
			CalcMiDu: function() {
      
      
				if (model.data.kongqizhongzhongliang == 0 ||
					model.data.shuizhongzhongliang == 0 ||
					model.data.kongqizhongzhongliang == model.data.shuizhongzhongliang) {
      
      
					return;
				}

				var l_dTotalNum = Number(model.data.kongqizhongzhongliang) - Number(model.data
					.shuizhongzhongliang);
				l_dTotalNum = Number(model.data.kongqizhongzhongliang) / l_dTotalNum;
				model.data.midu = Number(l_dTotalNum.toFixed(3)); //toFixed得到字符串
				Fun_change('密度');
			},

			Btn_OK: function() {
      
      
				if (model.data.toubuzhijing == 0) {
      
      
					ShowToast("头部直径,必须填写!");
					return;
				}

				if (model.data.zhongbuzhijing == 0) {
      
      
					ShowToast("中部直径,必须填写!");
					return;
				}

				if (model.data.weibuzhijing == 0) {
      
      
					ShowToast("尾部直径,必须填写!");
					return;
				}

				if (model.data.kongqizhongzhongliang == 0) {
      
      
					ShowToast("空气中重量,必须填写!");
					return;
				}

				if (model.data.shuizhongzhongliang == 0) {
      
      
					ShowToast("水中重量,必须填写!");
					return;
				}

				if (model.data.jieguo1 == "" || model.data.jieguo2 == "" ||
					model.data.jieguo3 == "" || model.data.jieguo4 == "" ||
					model.data.jieguo5 == "" || model.data.jieguo6 == "") {
      
      
					ShowToast("检验项目中,结果 存在未填写的记录!");
					return;
				}

				if (model.data.jianyanjieguoTotal == "空") {
      
      
					ShowToast("检验结果,不为【空】!");
					return;
				}

				if (model.data.jianyanjieguoTotal == "不合格" &&
					model.data.buhegeyuanyinTotal == "空") {
      
      
					ShowToast("检验结果【不合格】,需要填写 不合格原因!");
					return;
				}
				model.MakeData();
			},
			MakeData: function() {
      
      
				var Dt_Sample = [];
				var Dt_SampleDetail = [];
				Dt_Sample.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品类型: model.data.yangpingleixing,
					样品编号: model.data.yangpingbianhao,
					样品来源编号: model.data.yangpingbianhao,
					头部直径: model.data.toubuzhijing,
					中部直径: model.data.zhongbuzhijing,
					尾部直径: model.data.weibuzhijing,
					空气中重量: model.data.kongqizhongzhongliang,
					水中重量: model.data.shuizhongzhongliang,
					密度: model.data.midu,
					检验结果: model.data.jianyanjieguoTotal,
					不合格原因: model.data.buhegeyuanyinTotal,
					是否放行: "空",
					放行原因: "空",
					备注: model.data.beizhuTotal,
					检验操作人编号: $api.getStorage("user_no")
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "头部直径",
					项目数据: model.data.toubuzhijing,
					检验结果: model.data.jieguo1,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "中部直径",
					项目数据: model.data.zhongbuzhijing,
					检验结果: model.data.jieguo2,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "尾部直径",
					项目数据: model.data.weibuzhijing,
					检验结果: model.data.jieguo3,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "空气中重量",
					项目数据: model.data.kongqizhongzhongliang,
					检验结果: model.data.jieguo4,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "水中重量",
					项目数据: model.data.shuizhongzhongliang,
					检验结果: model.data.jieguo5,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "密度",
					项目数据: model.data.midu,
					检验结果: model.data.jieguo6,
					不合格原因: "空",
					备注: "空",
				});
				model.SaveData({
      
      
					T1: Dt_Sample,
					T2: Dt_SampleDetail
				});
			},

			SaveData: function(data) {
      
      
				api.showProgress({
      
      
					style: 'default',
					animationType: 'fade',
					title: '数据保存中,请稍候...',
					text: '',
					modal: true
				});
				//保存数据
				api.ajax({
      
      
					url: API_HOST,
					method: 'post',
					headers: {
      
      
						'Content-Type': 'application/json;charset=utf-8', //必须,否则后端无法识别
						'SN': 2502, //消息ID
						'UserID': $api.getStorage("user_no") //用户编号
					},
					timeout: 180,
					returnAll: false,
					data: {
      
      
						body: JSON.stringify(data)
					}
				}, function(ret, err) {
      
      
					api.hideProgress();
					if (ret) {
      
      
						if (ret.Success) {
      
       // 保存成功
							api.alert({
      
      
								title: '提示',
								msg: '保存成功!',
							}, function(ret, err) {
      
      
								backToHome();
							});
						} else {
      
       // 保存失败
							ShowToast(ret.ErrorMsg);
						}
					} else {
      
      
						ShowToast(err.msg);
					}
				});
			},
		});

		//值改变,判断是否合格
		function Fun_change(a_ItemName) {
      
      
			for (var i = 0; i < model.biaozhun_list.length; i++) {
      
      
				switch (a_ItemName) {
      
      
					case '头部直径':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.toubuzhijing >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.toubuzhijing <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo1 = "合格";
							} else {
      
      
								model.data.jieguo1 = "不合格";
							}
						}
						break;

					case '中部直径':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.zhongbuzhijing >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.zhongbuzhijing <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo2 = "合格";
							} else {
      
      
								model.data.jieguo2 = "不合格";
							}
						}
						break;

					case '尾部直径':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.weibuzhijing >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.weibuzhijing <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo3 = "合格";
							} else {
      
      
								model.data.jieguo3 = "不合格";
							}
						}
						break;

					case '空气中重量':
						model.CalcMiDu();
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.kongqizhongzhongliang >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.kongqizhongzhongliang <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo4 = "合格";
							} else {
      
      
								model.data.jieguo4 = "不合格";
							}
						}
						break;

					case '水中重量':
						model.CalcMiDu();
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.shuizhongzhongliang >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.shuizhongzhongliang <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo5 = "合格";
							} else {
      
      
								model.data.jieguo5 = "不合格";
							}
						}
						break;

					case '密度':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.midu >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.midu <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo6 = "合格";
							} else {
      
      
								model.data.jieguo6 = "不合格";
							}
						}
						break;

					default:
						break;
				}
			}
		}

		function Fun_jianyanjieguochange() {
      
      
			if (model.data.jianyanjieguoTotal == "合格") {
      
      
				model.data.buhegeyuanyinTotal = "空";
			}
		}

		//四舍五入保留2位小数(若第二位小数为0,则保留一位小数)  
		function keepTwoDecimal(num) {
      
      
			var result = parseFloat(num);
			if (isNaN(result)) {
      
      
				ShowToast("传递参数错误,请检查!");
				return false;
			}
			result = Math.round(num * 100) / 100;
			return result;
		}

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

		//关闭返回上一页面
		function backToHome() {
      
      
			api.closeToWin({
      
      
				name: 'Quality_1_TBarSample1'
			});
		}
	</script>
</html>

Guess you like

Origin blog.csdn.net/youcheng_ge/article/details/131067187