<apex:page controller="SampleInventoryController" showHeader="false" sidebar="false" id="Page" action="{!init}" title="样本盘点">
|
<apex:stylesheet value="{!URLFOR($Resource.blockUIcss)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.jquery183minjs)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.PleaseWaitDialog)}"/>
|
<apex:stylesheet value="{!URLFOR($Resource.jquerysuggestcss)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.jquerysuggestjs)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.connection20)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.apex20)}"/>
|
<style type="text/css">
|
.pure-table {
|
/* border-collapse: collapse; */
|
/* border-spacing: 0; */
|
empty-cells: show;
|
border: 1px solid #cbcbcb;
|
width: 100%;
|
}
|
|
.pure-table caption {
|
color: #000;
|
font: italic 85%/1 arial,sans-serif;
|
/* padding: 1em 0;*/
|
text-align: center;
|
}
|
|
.pure-table td,.pure-table th {
|
border-left: 1px solid #cbcbcb;
|
border-width: 0 0 0 1px;
|
font-size: inherit;
|
margin: 0;
|
overflow: visible;
|
padding: .5em 1em;
|
}
|
|
.pure-table thead {
|
background-color: #c3bfbf;
|
color: #000;
|
text-align: center;
|
vertical-align: bottom;
|
}
|
|
.pure-table td {
|
background-color: transparent;
|
}
|
|
.pure-table-horizontal th,.pure-table-horizontal td {
|
border-width: 0 0 1px 0;
|
border-bottom: 1px solid #cbcbcb;
|
}
|
|
.pure-table-horizontal tbody>tr:last-child>td {
|
border-bottom-width: 0;
|
}
|
|
.waves{
|
position:relative;
|
cursor:pointer;
|
display:inline-block;
|
overflow:hidden;
|
text-align: center;
|
-webkit-tap-highlight-color:transparent;
|
z-index:1;
|
}
|
.waves .waves-animation{
|
position:absolute;
|
border-radius:50%;
|
width:25px;
|
height:25px;
|
opacity:0;
|
background:rgba(255,255,255,0.3);
|
transition:all 0.7s ease-out;
|
transition-property:transform, opacity, -webkit-transform;
|
-webkit-transform:scale(0);
|
transform:scale(0);
|
pointer-events:none
|
}
|
.ts-btn{
|
width: 150px;
|
padding: 8px;
|
height: 20px;
|
line-height: 20px;
|
background: #909b8a;
|
color: #fff;
|
border-radius: 5px;
|
float: right;
|
margin-right: 10px;
|
margin-top: 5px;
|
}
|
</style>
|
<script type="text/javascript">
|
//文本框输入值,复选框自动打勾
|
function ComputePrice(j) {
|
var size = {!SISize};
|
for(var i = 0; i < size; i++){
|
var InventoryCheck = document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value;
|
var checklist = j$("input[name='Page:allForm:records:"+ i +":checklist']");
|
if(InventoryCheck != null && InventoryCheck != 0 && InventoryCheck != ''){
|
checklist[0].checked = true;
|
}else{
|
checklist[0].checked = false;
|
}
|
}
|
}
|
//全选功能
|
function selectAll() {
|
var size = {!SISize};
|
var all = j$(escapeVfId("Page:allForm:checkAll"));
|
if (all[0].checked) {
|
for(var i = 0; i < size; i++){
|
var checklist = j$("input[name='Page:allForm:records:"+ i +":checklist']");
|
checklist[0].checked = true;
|
}
|
} else {
|
for(var i = 0; i < size; i++){
|
var checklist = j$("input[name='Page:allForm:records:"+ i +":checklist']");
|
checklist[0].checked = false;
|
}
|
}
|
}
|
//报错之后盘点数量为0的置为空
|
function InventoryToNull() {
|
var size = {!SISize};
|
for(var i = 0; i < size; i++){
|
if(document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value / 1 == 0){
|
j$(escapeVfId('Page:allForm:records:' + i + ':Inventory_Check')).attr('value',"");
|
}
|
}
|
}
|
//盘点确认
|
function InventoryConfirmJS() {
|
var size = {!SISize};
|
var Inventoryflag = false;
|
var Inflag = false;
|
var lastflag = true;
|
for(var i = 0; i < size; i++){
|
//盘点库存大于发货数量的时候进行拦截
|
var EffectiveInventory = (document.getElementById("Page:allForm:records:"+ i +":EffectiveInventory").innerText / 1);
|
var Inventory = document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value / 1 ;
|
if(Inventory > EffectiveInventory){
|
alert('输入的数量只可以小于等于有效库存!');
|
document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
|
Inventoryflag = false;
|
lastflag = false;
|
break;
|
}
|
//文本框输入非数字进行拦截
|
if(isNaN(Inventory)){
|
alert('请输入数字!');
|
document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
|
Inventoryflag = false;
|
lastflag = false;
|
break;
|
}
|
}
|
if(lastflag){
|
for(var i = 0; i < size; i++){
|
//如果没有勾选盘点,并且盘点库存没有值
|
if(document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value == ''
|
&& document.getElementById("Page:allForm:records:"+ i +":checklist").checked == false){
|
Inventoryflag = false;
|
Inflag = true;
|
} else{
|
Inflag = false;
|
for(var i = 0; i < size; i++){
|
if(document.getElementById("Page:allForm:records:"+ i +":checklist").checked == true
|
&& document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value == ''){
|
alert('盘点库存不能为空!');
|
document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
|
Inventoryflag = false;
|
break;
|
} else if (document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value != ''
|
&& document.getElementById("Page:allForm:records:"+ i +":checklist").checked == false){
|
alert('请选择要盘点的样本!');
|
document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
|
Inventoryflag = false;
|
break;
|
} else if(document.getElementById("Page:allForm:records:"+ i +":checklist").checked == true
|
&& document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value - 0 < 0){
|
alert('盘点库存不能为负数!');
|
document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
|
Inventoryflag = false;
|
break;
|
} else{
|
Inventoryflag = true;
|
}
|
}
|
if(!Inventoryflag){
|
break;
|
}
|
}
|
}
|
}
|
//蒙层+后台保存方法
|
if(Inventoryflag){
|
blockme();
|
InventoryConfirm();
|
}
|
if(Inflag){
|
alert('至少选择一个样本才能进行盘点确认!');
|
}
|
}
|
//按钮水波纹效果
|
document.addEventListener('DOMContentLoaded',function(){
|
var duration = 750;
|
// 样式string拼凑
|
var forStyle = function(position){
|
var cssStr = '';
|
for( var key in position){
|
if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
|
};
|
return cssStr;
|
}
|
// 获取鼠标点击位置
|
var forRect = function(target){
|
var position = {
|
top:0,
|
left:0
|
}, ele = document.documentElement;
|
'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
|
return {
|
top: position.top + window.pageYOffset - ele.clientTop,
|
left: position.left + window.pageXOffset - ele.clientLeft
|
}
|
}
|
var show = function(event){
|
var pDiv = event.target,
|
cDiv = document.createElement('div');
|
pDiv.appendChild(cDiv);
|
var rectObj = forRect(pDiv),
|
_height = event.pageY - rectObj.top,
|
_left = event.pageX - rectObj.left,
|
_scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
|
var position = {
|
top: _height+'px',
|
left: _left+'px'
|
};
|
cDiv.className = cDiv.className + " waves-animation",
|
cDiv.setAttribute("style", forStyle(position)),
|
position["-webkit-transform"] = _scale,
|
position["-moz-transform"] = _scale,
|
position["-ms-transform"] = _scale,
|
position["-o-transform"] = _scale,
|
position.transform = _scale,
|
position.opacity = "1",
|
position["-webkit-transition-duration"] = duration + "ms",
|
position["-moz-transition-duration"] = duration + "ms",
|
position["-o-transition-duration"] = duration + "ms",
|
position["transition-duration"] = duration + "ms",
|
position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
|
position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
|
position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
|
position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
|
cDiv.setAttribute("style", forStyle(position));
|
var finishStyle = {
|
opacity: 0,
|
"-webkit-transition-duration": duration + "ms",
|
"-moz-transition-duration": duration + "ms",
|
"-o-transition-duration": duration + "ms",
|
"transition-duration": duration + "ms",
|
"-webkit-transform" : _scale,
|
"-moz-transform" : _scale,
|
"-ms-transform" : _scale,
|
"-o-transform" : _scale,
|
top: _height + "px",
|
left: _left + "px",
|
};
|
setTimeout(function(){
|
cDiv.setAttribute("style", forStyle(finishStyle));
|
setTimeout(function(){
|
pDiv.removeChild(cDiv);
|
},duration);
|
},100)
|
}
|
document.querySelector('.waves').addEventListener('click',function(e){
|
show(e);
|
},!1);
|
},!1);
|
</script>
|
|
<apex:form id="allForm">
|
<!-- 后台报错信息显示 -->
|
<apex:outputPanel id="message">
|
<apex:pageMessages ></apex:pageMessages>
|
</apex:outputPanel>
|
<h1 style ="font-size: 30px; margin-left: 45%;">样本盘点</h1>
|
<!-- 后台盘点确认方法之后执行 -->
|
<apex:actionFunction name="InventoryConfirm" action="{!InventoryConfirm}" rerender="allForm,allPanel,records" oncomplete="InventoryToNull();unblockUI();">
|
</apex:actionFunction>
|
<apex:outputPanel id="allPanel">
|
<div style="width:1000px; height:100%; margin:auto; overflow:auto;">
|
<input type="hidden" id="hasError" value="{!hasError}"/>
|
<table class="pure-table pure-table-horizontal" id="theTable_header" styleclass="list">
|
<!-- 统一设置列宽度 -->
|
<colgroup>
|
<col width="100px"/>
|
<col width="150px"/>
|
<col width="300px"/>
|
<col width="50px"/>
|
<col width="100px"/>
|
<col width="100px"/>
|
<col width="200px"/>
|
</colgroup>
|
<tr style="background-color:#f2f3f3;">
|
<th style="align:left">
|
<apex:inputCheckbox id="checkAll" onclick="selectAll()" style="text-align:left;"/>是否盘点
|
</th>
|
<th style="text-align:left">
|
资料编码
|
</th>
|
<th style="text-align:left">
|
资料名称
|
</th>
|
<th style="text-align:left">
|
规格
|
</th>
|
<th style="text-align:left">
|
有效期内库存
|
</th>
|
<th style="text-align:left">
|
过期库存
|
</th>
|
<th style="text-align:left">
|
有效盘点库存(最小单位)
|
</th>
|
</tr>
|
</table>
|
|
<table class="pure-table pure-table-horizontal" id="theTable_header" styleclass="list" style="width: 100%">
|
<colgroup>
|
<col width="100px"/>
|
<col width="150px"/>
|
<col width="300px"/>
|
<col width="50px"/>
|
<col width="100px"/>
|
<col width="100px"/>
|
<col width="200px"/>
|
</colgroup>
|
<apex:repeat value="{!SIInfo}" var="SIfo" id="records">
|
<tr>
|
<td align="left">
|
<apex:inputCheckbox style="text-align:left;" id="checklist" value="{!SIfo.IFCount}" />
|
</td>
|
<td align="left">
|
<apex:outputText id="OTCode" value="{!SIfo.OTCode}"/>
|
</td>
|
<td align="left">
|
<apex:outputText id="Samplename" value="{!SIfo.ProductName}"/>
|
</td>
|
<td align="left">
|
<apex:outputText id="Specs" value="{!SIfo.ProductSpecs}"/>
|
</td>
|
<td align="center">
|
<apex:outputText id="EffectiveInventory" value="{!SIfo.EffectiveInventory}"/>
|
</td>
|
<td align="center">
|
<apex:outputText id="ExpiredInventory" value="{!SIfo.ExpiredInventory}"/>
|
</td>
|
<td align="center">
|
<apex:inputText onblur="ComputePrice(this)" style="text-align:left;" id="Inventory_Check" value="{!SIfo.Check}" />
|
</td>
|
</tr>
|
</apex:repeat>
|
</table>
|
<a class="waves ts-btn" onclick="InventoryConfirmJS()">盘点确认</a>
|
</div>
|
</apex:outputPanel>
|
</apex:form>
|
</apex:page>
|
