公司每月预算表格

[{"insert":"一.每月预算摘要\n摘要中的三个图表仅有展示功能，所以只需设置好对应的数据然后通过循环创建和数据绑定展示即可。\n\n二.收入表，人事费用表，运营费用表\n因为这三个表格非常相似，都只包含项目名称，估算金额，实际金额和差额这几个字段，所以我们使用小模块制作以减少重复操作和案例的复杂度。\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/cc507b59e2b55f17c23ab01cd6fb5df9_20706_932_310.png"}},{"insert":"\n\n1.小模块的公共数据\n(1).为了区分三张表格，我们给小模块添加一个“标签”，这样我们就能知道案例中哪个小模块展示的是哪个表格。\n(2).因为收入表中差额等于估算金额减去实际金额，而费用表中正好相反，所以我们添加一个变量“0收入1费用”加以标识。\n(3).为了实现搜索功能，这里我们先添加一个“搜索词”，具体实现方法稍后说明。\n(4).最后是展示的数据内容，我们存放在“数据表”中。由于估算金额，实际金额和差额三个字段涉及排序，所以我们需要同时存储他们的金额样式(字符串类型)以及具体数值(数值类型)。\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/3d77fe73276218b92e83d42371e206f5_16004_436_305.png"}},{"insert":"\n\n2.小模块的界面\n\n小模块中大致可以分为三部分，表头，数据内容和汇总。\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/7c0efa607b90b29fdab59456443654b6_65609_1439_467.png"}},{"insert":"\n\n3.排序\n排序功能是通过对象数组自身的排序动作来实现的。\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/6848980744ea7ebc5593516841d0f435_25404_1251_291.png"}},{"insert":"\n\n4.添加数据\n这里首先是触发小模块的自定义事件“添加”，使外部的添加弹窗显示。在弹窗中输入添加项目名称后，我们先在外部数据表中添加一行数据，再找到对应的小模块执行公共方法添加，对小模块公共数据中的数据表执行相同操作。\n\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/763122911de7cd282bd99bfb8c546a4c_34137_874_507.png"}},{"insert":"\n\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/0c50e39cd15578cb41f2f04f25eea198_78983_1375_501.png"}},{"insert":"\n\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/e4d82d110b5f5dca650b138b30108cbd_97029_1398_639.png"}},{"insert":"\n\n5.搜索\n\ndemo中实现的是简易搜索，通过if容器来完成的，当搜索词为空是代表不执行搜索，而当搜索词非空时，仅显示项目名称包含搜索词的数据。\n\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/e605ff157264731c4965cf6dd9b86bbb_11994_314_290.png"}},{"insert":"\n\n6.数据修改\n\n在表格中我们可以修改估算金额和实际金额，所以一个单元格中的内容可以分为显示和编辑两种状态，显示状态下的文本组件我们绑定数据表中的金额样式，编辑状态下的输入框组件绑定数据表中的具体数值。每当修改完成后，要记得对其他字段以及小模块外部数据进行同步。\n\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/c06bff2576843fa22bcb960530682574_21947_429_433.png"}},{"insert":"\n\n"}]