<!-- 页面内容区(HTML片段，不能放置HTML 及 BODY 标签 )-->
<div class="u-mdlayout" id="demo-mdlayout">
<div class="u-mdlayout-master" style="display:none"></div>
<div class="u-mdlayout-detail">
<div class="u-mdlayout-page u-navlayout-fixed-header current" id="list">
<div class="u-mdlayout-page-section">
<div class="u-container-fluid u-widget-bg">
<div class="u-row">
<div class="u-col-12">
<div class="u-widget" style="background-color:transparent">
<button class="u-button raised primary m-r-sm" data-bind="click: events.beforeAdd">
新增
</button>
<button class="u-button raised" data-bind="click: events.delRow">
删除
</button>
<div class="u-input-group u-has-feedback u-right m-r-sm">
<!-- 如果多条件查询，定义多个输入框或者修改后端查询方式 -->
<input type="text" class="u-form-control sm" placeholder="商品名称" data-bind="value:searchText,event:{keyup: events.searchKeyUp}"/>
<span class="u-form-control-feedback sm fa fa-search" data-bind="click:events.search"></span>
</div>
</div>
</div>
</div>
<div class="u-row">
<div class="u-col-12">
<div class="u-widget">
<div class="u-widget-heading">
<h3 class="u-widget-title">产品列表</h3>
</div>
<div class="u-widget-body">
<table class="u-table" style="width:100%;">
<thead>
<tr>
<th><label class="u-checkbox only-style" data-bind="click: mainDataTable.toggleAllSelect.bind(mainDataTable), css:{'is-checked': mainDataTable.allSelected()}">
<input id="checkInput" type="checkbox" class="u-checkbox-input">
<span class="u-checkbox-label"></span> </label></th>
<th>名称</th>
<th>数量</th>
<th>单价</th>
<th>供应商</th>
<th>生成日期</th>
<th>原产地</th>
<th>操作</th>
</tr>
</thead>
<tbody data-bind="foreach:{data:mainDataTable.rows(),as:'row', afterAdd: events.afterAdd}" >
<tr data-bind="css: { 'is-selected' : row.selected() } ,attr:{'id': $index()}">
<td class="checkbox1"><label class="u-checkbox only-style u-checkbox-floatl" data-bind="click: row.multiSelect, css:{'is-checked': row.selected()}">
<input type="checkbox" class="u-checkbox-input">
<span class="u-checkbox-label"></span> </label></td>
<td data-bind="text: row.ref('productname')"></td>
<td data-bind="text: row.ref('productnum')"></td>
<td data-bind="text: row.ref('price')"></td>
<td data-bind="text: row.ref('supplier')"></td>
<td data-bind="text: u.dateRender(row.ref('prodate'))"></td>
<td data-bind="text: row.ref('orgin')"></td>
<td><a href="javascript:;" class="m-r-sm" data-bind="click:$parent.events.beforeEdit.bind($data, $index())">修改</a><a href="javascript:;" data-bind="click:$parent.events.viewRow.bind($data, $index())">查看</a></td>
</tr>
</tbody>
</table>
<div id='pagination' class='u-pagination pagination' u-meta='{"type":"pagination","data":"mainDataTable","pageChange":"events.pageChangeFunc","sizeChange":"events.sizeChangeFunc"}'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--编辑/新增-->
<div class="u-mdlayout-page u-navlayout-fixed-header" id="addPage">
<div class="u-mdlayout-page-section">
<div class="u-container-fluid u-widget-bg">
<div class="u-row">
<div class="u-col-12">
<div class="u-widget" style="background-color:transparent">
<button class="u-button raised m-r-sm" data-bind="click: events.goBack">
返回
</button>
<button class="u-button raised primary" data-bind='click:events.addOrEditRow'>
保存
</button>
</div>
</div>
</div>
<div class="u-row">
<div class="u-col-12">
<div class="u-widget">
<div class="u-widget-heading">
<h3 class="u-widget-title">商品信息</h3>
</div>
<div class="u-widget-body form-container">
<div class="u-container-fluid">
<div class="u-row">
<div class="u-col-1 u-col-sm-4">
<label class="u-input-label right">商品名称:</label>
</div>
<div class="u-col-3 u-col-sm-8 m-b-md">
<input type="text" class="u-form-control" placeholder="商品名称" u-meta='{"id":"productname","type":"string","data":"infodata","field":"productname"}'>
</div>
<div class="u-col-1 u-col-sm-4">
<label class="u-input-label right">单价:</label>
</div>
<div class="u-col-3 u-col-sm-8 m-b-md">
<input type="text" class="u-form-control" placeholder="单价" u-meta='{"id":"price","type":"float","data":"infodata","field":"price"}'>
</div>
<div class="u-col-1 u-col-sm-4">
<label class="u-input-label right">供应商:</label>
</div>
<div class="u-col-3 u-col-sm-8 m-b-md">
<input type="text" class="u-form-control" placeholder="供应商" u-meta='{"id":"supplier","type":"string","data":"infodata","field":"supplier"}'>
</div>
</div>
<div class="u-row">
<div class="u-col-1 u-col-sm-4">
<label class="u-input-label right">数量:</label>
</div>
<div class="u-col-3 u-col-sm-8 m-b-md">
<input type="text" class="u-form-control" placeholder="数量" u-meta='{"id":"productnum","type":"integer","data":"infodata","field":"productnum"}'>
</div>
<div class="u-col-1 u-col-sm-4">
<label class="u-input-label right">生成日期:</label>
</div>
<div class="u-col-3 u-col-sm-8 m-b-md">
<div class="u-input-group u-has-feedback" u-meta='{"id":"prodate","type":"u-date","data":"infodata","field":"prodate"}'>
<input type="text" class="u-form-control"/>
<span class="u-form-control-feedback fa fa-calendar" data-role="date-button"></span>
</div>
</div>
<div class="u-col-1 u-col-sm-4">
<label class="u-input-label right">原产地:</label>
</div>
<div class="u-col-3 u-col-sm-8 m-b-md">
<input type="text" class="u-form-control" placeholder="原产地" u-meta='{"id":"orgin","type":"string","data":"infodata","field":"orgin"}'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="u-mdlayout-page u-navlayout-fixed-header" id="showPage">
<div class="u-mdlayout-page-section">
<div class="u-container-fluid u-widget-bg">
<div class="u-row">
<div class="u-col-12">
<div class="u-widget" style="background-color:transparent">
<button class="u-button raised primary m-r-sm" data-bind="click: events.goBack">
返回
</button>
</div>
</div>
</div>
<div class="u-row">
<div class="u-col-12">
<div class="u-widget">
<div class="u-widget-heading">
<h3 class="u-widget-title">商品信息</h3>
</div>
<div class="u-widget-body form-container">
<ul class="u-form-browse">
<li class="m-v">
<label class="u-control-label w-sm">商品名称:</label>
<span data-bind="text:mainDataTable.ref('productname')"></span>
</li>
<li class="m-v">
<label class="u-control-label w-sm">单价:</label>
<span data-bind="text: mainDataTable.ref('price')"></span>
</li>
<li class="m-v">
<label class="u-control-label w-sm">供应商:</label>
<span data-bind="text:mainDataTable.ref('supplier')"></span>
</li>
<li class="m-v">
<label class="u-control-label w-sm">数量:</label>
<span data-bind="text: mainDataTable.ref('productnum')"></span>
</li>
<li class="m-v">
<label class="u-control-label w-sm">生产日期:</label>
<span data-bind="text:u.dateRender(mainDataTable.ref('prodate'))"></span>
</li>
<li class="m-v">
<label class="u-control-label w-sm">原产地:</label>
<span data-bind="text:mainDataTable.ref('orgin')"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>