Skip to content

Commit

Permalink
add:最佳实践.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kvkens
kvkens committed Sep 26, 2016
1 parent 0557d1d commit 96256c5
Show file tree
Hide file tree
Showing 14 changed files with 7,345 additions and 30 deletions.
31 changes: 30 additions & 1 deletion boilerplate/mock/api/page1/page1.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
{"success":true,"msg":"来自page1的后台模拟数据"}
{
"success": true,
"hh":"xx",
"msg": [{
"vyear": "2016",
"contractUnionId": "20160101",
"vstatus": "开立"
}, {
"vyear": "2016",
"contractUnionId": "20160102",
"vstatus": "关闭"
}, {
"vyear": "2017",
"contractUnionId": "20160102",
"vstatus": "关闭"
}],
"msg1":[{
"unionContractPeople": "张三",
"idNumber": "20160101",
"vnote": "开立"
}, {
"unionContractPeople": "李四",
"idNumber": "20160101",
"vnote": "开立"
}, {
"unionContractPeople": "王五",
"idNumber": "20160101",
"vnote": "开立"
}]
}
1 change: 1 addition & 0 deletions boilerplate/src/components/home/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,7 @@ li.last>h5 {
}

.page-container {
padding-top: 70px;
margin-left: 200px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
Expand Down
3 changes: 0 additions & 3 deletions boilerplate/src/containers/page1/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
.page1 {
border: 1px dashed #c53526;
}
153 changes: 150 additions & 3 deletions boilerplate/src/containers/page1/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,150 @@
<div class="page1">
<h2>页面一</h2>
</div>
<div class="u-mdlayout" id="u_md">
<div class="u-mdlayout-master" id="u_master">
<div class="form-group" style="margin: 5px; text-align: center;">快速查询</div>
<div class="u-widget form-group">
<label>年份</label>
<div class="u-year">
<input class="u-form-control" />
</div>
</div>

<div class="u-widget form-group">
<label>姓名</label>
<div class="u-input">
<input class="u-form-control" />
</div>
</div>

<div class="u-widget form-group">
<button class="u-button u-button-success" data-bind="click:searchClick">搜索</button>
<button class="u-button u-button-success" data-bind="click:resetClick">重置</button>
</div>

</div>
<!--
左侧界面布局结束
-->
<div class="u-mdlayout-detail">
<div class="u-mdlayout-page current" id="list_show">
<div class="u-container-fluid u-widget">

<div class="u-row">
<div class="u-col-12">
<div class="u-widget" style="margin-bottom: 5px;">
<button class="u-button u-button-success" data-bind="click:addClick">增加</button>
<button class="u-button u-button-success" data-bind="click:delClick">删除</button>
<button class="u-button u-button-success" data-bind="click:updClick">修改</button>
</div>
</div>
</div>

<div class="u-row">
<div class="u-col-12">
<div class="u-widget">
<div u-meta='{"id":"list_1","type":"grid","data":"listTable_1","editType":"form","showNumCol":true,"editable":true,"onRowSelected":"rowClick"}'>
<div options='{"field":"vyear","dataType":"date","title":"年份"}'></div>
<div options='{"field":"contractUnionId","dataType":"string","title":"联保合同号"}'></div>
<div options='{"field":"vstatus","dataType":"string","title":"表单状态"}'></div>
</div>
<div id='pagination' class='u-pagination pagination' u-meta='{"type":"pagination","data":"listTable_1","pageChange":"pageChangeFunc1","sizeChange":"sizeChangeFunc1"}'></div>
</div>

</div>
</div>
<div class="u-row">
<div class="u-col-12">
<div class="u-widget">
<div u-meta='{"id":"list_2","type":"grid","data":"listTable_2","editType":"form","showNumCol":true,"editable":true}'>
<div options='{"field":"unionContractPeople","dataType":"String","title":"联保方","editType":"string"}'></div>
<div options='{"field":"idNumber","dataType":"String","title":"身份证/统一社会信用代码","editType":"string"}'></div>
<div options='{"field":"vnote","dataType":"String","title":"备注","editType":"string"}'></div>
</div>
<div id='pagination' class='u-pagination pagination' u-meta='{"type":"pagination","data":"listTable_2","pageChange":"pageChangeFunc2","sizeChange":"sizeChangeFunc2"}'></div>
</div>
</div>
</div>
</div>
</div><!--
列表页面结束
-->

<div class="u-mdlayout-page" id="card_show">
<div class="u-container-fluid u-widget">
<div class="u-widget-heading">
<h3 class="u-widget-title">基本卡片</h3>
</div>

<div class="u-widget-body">
<div class="u-row">
<div class="u-col-12" style="margin-bottom:10px;">
<button type="button" class="u-button u-button-success" data-bind="click:saveClick">保存</button>
<button type="button" class="u-button u-button-success" data-bind="click:backClick">返回</button>
</div>
</div>

<div class="u-row">

<div class="u-col-md-4">
<div class="u-form-group" u-meta='{"type":"u-year","data":"cardTable","field":"vyear"}'>
<div class="u-input-group u-has-feedback" style="width:100%">
<label>年份</label>
<input type="text" class="u-form-control" id="exampleInput3">
</div>
</div>
</div>

<div class="u-col-md-4">
<div class="u-form-group" u-meta='{"type":"u-text","data":"cardTable","field":"contractUnionId"}'>
<div class="u-input-group u-has-feedback" style="width:100%">
<label>担保合同号</label>
<input type="text" class="u-form-control" id="exampleInput3">
</div>
</div>
</div>

<div class="u-col-md-4">
<div class="u-form-group" u-meta='{"type":"u-combobox","datasource":"formState","data":"cardTable","field":"vstatus","onlySelect":true}'>
<div class="u-input-group u-has-feedback" style="width:100%">
<label>表单状态</label>
<input type="text" class="u-form-control" id="exampleInput3">
</div>
</div>
</div>

</div><!--
卡片页面主表信息填写完毕
-->
<div class="u-row">
<div class="u-col-12" style="text-align: right;">
<button class="u-button u-button-success" data-bind="click:addItemClick">增加</button>
<button class="u-button u-button-success" data-bind="click:delItemClick">删除</button>
<button class="u-button u-button-success" data-bind="">修改</button>

</div>
</div>
<div class="u-row">
<div class="u-col-12">
<div class="u-widget">
<div u-meta='{"id":"card_item","type":"grid","data":"itemTable","multiSelect":true,"showNumCol":true,"editable":true}'>
<div options='{"field":"unionContractPeople","dataType":"String","title":"联保方","editType":"string"}'></div>
<div options='{"field":"idNumber","dataType":"String","title":"身份证/统一社会信用代码","editType":"string"}'></div>
<div options='{"field":"vnote","dataType":"String","title":"备注","editType":"string"}'></div>
</div>
<div id='pagination' class='u-pagination pagination' u-meta='{"type":"pagination","data":"itemTable","pageChange":"pageChangeFunc3","sizeChange":"sizeChangeFunc3"}'></div>
</div>
</div>
</div>
<!--
卡片页面子表列表结束
-->
</div>
</div>

</div><!--
卡片页面结束
-->
</div><!--
u-mdLayout-detail结束
-->

</div>
170 changes: 167 additions & 3 deletions boilerplate/src/containers/page1/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,172 @@
require('./index.css');
var pageHtml = require('./index.html');

module.exports = function() {
require(['./index.html', 'jquery'], function(html, K) {
console.log(K.fn.jquery);
document.querySelector('.content').innerHTML = html;

document.querySelector('.page-container').innerHTML = pageHtml;
var meta = {
meta: {
vyear: {
type: 'string',
default: new Date().getFullYear()
},
contractUnionId: {
type: "string"
},
vstatus: {
type: "string",
default: '开立'
},
}
};
var meta_2 = {
meta: {
'unionContractPeople': { //联保方
type: "string",
},
'idNumber': { //身份证号/统一社会编码
type: "string"
},
'vnote': {
type: "string"
}
}
};
var data = {
listTable_1: new u.DataTable(meta),
listTable_2: new u.DataTable(meta_2),
cardTable: new u.DataTable(meta),
itemTable: new u.DataTable(meta_2),
formState: [{
name: '开立',
value: '开立'
}, {
name: '关闭',
value: '关闭'
}],
};

var events = {
addClick: function() {
var row = viewModel.cardTable.createEmptyRow();
viewModel.cardTable.setRowFocus(row);

var a = document.getElementById('u_master');
a.style.display = "none";
var md = document.querySelector('#u_md')['u.MDLayout'];
md.dGo('card_show');
},
delClick: function() {
var row = viewModel.listTable_1.getSelectedRows();
if (row.length > 0) {
viewModel.listTable_1.removeRows(row);
viewModel.listTable_2.removeAllRows();
} else {
u.showMessage({
msg: "未选中行",
position: "center"
});
}
},
updClick: function() {
var row = viewModel.listTable_1.getSelectedRows();
if (row.length > 0) {
var data = row[0].getData().data;
viewModel.cardTable.setSimpleData(data);
viewModel.itemTable.setSimpleData(viewModel.listTable_2.getSimpleData());
var md = document.querySelector('#u_md')['u.MDLayout'];
md.dGo('card_show');
} else {
u.showMessage({
msg: "未选中行",
position: "center"
});
}
},
searchClick: function() {

},
resetClick: function() {
$(document).find('#u_master').find('input').val('');
},
saveClick: function() {
var status = viewModel.cardTable.getSelectedRows()[0].status;
var data = viewModel.cardTable.getCurrentRow().getData().data;
if (data) {
if (status != "new") {
var meta = viewModel.cardTable.meta;
for (var field in meta) {
viewModel.listTable_1.setValue(field, data[field].value);
}
} else {
viewModel.listTable_1.addSimpleData(data);
var length = viewModel.listTable_1.getSimpleData().length; //获取当前主表数据条数
viewModel.listTable_1.setRowSelect(length - 1); //设置新增行的选中
viewModel.listTable_2.setSimpleData(viewModel.itemTable.getSimpleData());
}
}

u.showMessage({
msg: "保存成功",
position: "center"
});
viewModel.cardTable.clear();
viewModel.backClick();

},
backClick: function() {
var md = document.querySelector('#u_md')['u.MDLayout'];
document.querySelector('.u-mdlayout-master').style.display = "block";
viewModel.cardTable.clear();
viewModel.itemTable.clear();
md.dBack();
},
rowClick: function() {
viewModel.listTable_2.clear();
viewModel.listTable_2.setSimpleData([{
"unionContractPeople": '张三',
"idNumber": '20160101',
"vnote": '开立'
}, ]);
},
addItemClick: function() {
var row = viewModel.itemTable.createEmptyRow();
viewModel.itemTable.setRowFocus(row);
},
delItemClick: function() {
var row = viewModel.itemTable.getSelectedRows();
if (row.length > 0) {
viewModel.itemTable.removeRows(row);
} else {
u.showMessage({
msg: "未选中行",
position: "center"
});
}
}
};

var varinit = function() {
$.ajax({
type: "get",
url: "./api/page1/page1.json",
dataType: "json",
async: true,
success: function(data) {
if (data.success) {
viewModel.listTable_1.setSimpleData(data.msg);
viewModel.listTable_2.setSimpleData(data.msg1);
}
}
});
};

var viewModel = u.extend({}, data, events);
$(function() {
var app = u.createApp({
el: "#u_md",
model: viewModel
});
varinit();
});
}
Loading

0 comments on commit 96256c5

Please sign in to comment.