基于后台提供数据数据根据数据打印

 

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.实现类的内部的模块化提高复用性 即一个函数实现一个功能