基于后台提供数据数据根据数据打印
Git 地址：点击打开链接
前言：mock可以让我们自己伪造自己想要的数据 后台数据地址（服务器如果关了就访问不了）：
点击打开链接
具体需求
将订单数据分页头, 表格, 页脚打印.
可分页打印
可分联打印（是否重复打印）
单据头部每行展示数据列数可变（图中每一行显示３个数据）
每一页需要展示在表格中数据的行数可变（比如图中一页展示６行）
完善的错误处理
类的设计
包含六个属性
Ispage是否分页默认是true
Body_size如果要分页那么分页的页面尺寸默认是6行数据
Head_size头部一行分成多少列默认是3
Is_repeat是否分联打印默认是false
Repet_time如果要分联打印那么改字段代表重复打印的次数默认是2
Head_name头部名称
一个提供给外部的调用的接口
Print(JSON_parsed,mockl)
* 两个参数分别是通过ajax获取到的解析成javascript形式的后台数* 据和伪造的mock数据
七个内部函数
Head(head)
* 参数是合并过后的头部对象
*首先计算出头部分成多少列然后遍历头部顺序数组拼接代码
Body(JSON_parsed,merged_data)
* 两个参数 分别是解析过后的单页后台数据 和合并过后的数据
* 根据是否分页来确定页面的大小 page_size
* 遍历body中的顺序数组 生成相应代码
*for循环中只有最后一张不加页脚
*在外部加上最后的页脚
Foot(JSON_parsed,mock)
* 三个参数 分别是被解析过的单个页面数据整合过的页脚数据当 * 前的页面结束时所遍历到的数据索引
* 首先计算当前页面所 在页数 再计算出页面总数
* 将备注单独拿出来拼接 再遍历页脚的顺序数组 来拼接代码
* 最后再单独讲页码拼接上去
Title(body)
* 参数是合并过后的body部分 遍历顺序数组将标题栏拼接出来
Data_merge(JSON_parsed,mock)
* 参数是单条后台数据 和mock上面传过来的诗句
* arr是顺序数组
* 分别生成头部 中间和尾部的数据
Data_merge_find(JSON_parsed,mock_part,merge_part)
* 三个参数 分别是:单条数据mock数据head body foot的其中一 * 个所要合并到的分支
* 将mock上面的单个数据拿到后台数据上面去早
* 只有在后台数据上早到了value才有相应的值 否者为空字符串
打印类的实现流程图
打印类的数据结构
JSON_parsed（单据数据）
[
{
CUSTOMER_NAME: '绵阳市游仙区刘家镇初级中学',
PROPERTY: '0',
CUSTOMER_TYPE: '游仙',
ORDER_NO: 'XS201712220221',
ID: 5668,
LUMP_SUM: 120.19999999999999,
DISTRIBUTION_DATE: '2017/12/25',
TYPE: '其它类',
MEMO: '',
rows: [
{
INTERNAL_NAME: '魔芋凉粉',
AMOUNT: 50,
UNIT_NAME: '斤',
UNIT_PRICE: 1.02,
SUM: 51,
ID: 75617,
INTERNAL_TYPE: '豆制品'
},
{
INTERNAL_NAME: '米凉粉',
AMOUNT: 1,
UNIT_NAME: '盆',
UNIT_PRICE: 10.4,
SUM: 10.4,
ID: 75616,
INTERNAL_TYPE: '豆制品'
},
{
INTERNAL_NAME: '豆腐干(大厚)',
AMOUNT: 20,
UNIT_NAME: '斤',
UNIT_PRICE: 2.94,
SUM: 58.8,
ID: 75609,
INTERNAL_TYPE: '豆制品'
}
]
},
{
CUSTOMER_NAME: '绵阳市游仙区梓棉乡五粮春小学',
PROPERTY: '0',
CUSTOMER_TYPE: '游仙',
ORDER_NO: 'XS201712220222',
ID: 5669,
LUMP_SUM: 102,
DISTRIBUTION_DATE: '2017/12/25',
TYPE: '3类',
MEMO: '',
rows: [
{
INTERNAL_NAME: '红豆',
AMOUNT: 15,
UNIT_NAME: '斤',
UNIT_PRICE: 6.8,
SUM: 102,
ID: 75624,
INTERNAL_TYPE: '干杂类'
}
]
}
]
Mock（伪造数据）
{
"head": {
"DISTRIBUTION_DATE": "配送时间",
"ORDER_NO": "订单编号",
"CUSTOMER_NAME": "客户名称",
},
"body": {
"serial_numbe": "序号",
"INTERNAL_NAME": "品名",
"UNIT_NAME": "单位",
"AMOUNT": "数量",
"UNIT_PRICE": "单价",
"SUM": "金额"
},
"foot": {
"MEMO": "备注",
"delivery": "送货人",
"take_delivery": "收货人"
}
}
data_merged （合并数据对象）
{
head: {
arr: []
},
body: {
arr: []
},
foot: {
arr: []
},
};难点
1.实现数据和控制的分离 即大部分数据由外部控制 类内部不能直接使用最终字段 这样达不到控制的效果
2.将mock数据和前台传过来的数据合并 需要用到for in遍历对象时迭代索引代表对象中键值对中的键的知识，以及访问对象可以通过数组的形式来访访问
3.实现类的内部的模块化提高复用性 即一个函数实现一个功能