EEPlat订单管理系统开发(三)之__深入面板配置

上篇文章中EEPlat订单管理系统开发(二)之__初识面板配置菜单与面板的简单搭配已经完成，基本上对平台只是细微的改动，这次我们就要模仿着示例程序做一些大的改动了，面板的新增复制，服务、js、编码的使用等等都能在本文看到。

创建面板

首先我们去配置上次剩下的“新增订单”，与上文讲的不同，这次需要创建一个新的面板与菜单匹配，如下图：

深度复制面板

创建完成的这个面板相当于主面板，我们还得去创建一个含有表格的子面板，至于主子面板怎么关联一会再说，创建子面板可以利用比较简单的方法，查找平台默认生成的面板，看哪个和我们的需求相似，直接点击深度复制，然后修改即可，如下图：

JS管理配置

对面板完成深度复制后，我们发现示例中的面板是加载js的，所以我们先不急着修改这个子面板的相关信息，先去平台“首页”下面的“浏览器端JavaScript管理”界面，创建新的js，点击编辑即可写入js代码，如下图：

注：由于相关js代码在示例中都有，所以我在这就不贴出了。

保存完成后就可以修改刚才深度复制的面板了，修改相关信息，把刚创建的js添加到“加载前script”。如下图：

表格元素配置

保存成功，需要根据示例对表格元素新增排序删除等操作（上篇文章已有介绍），我们注意到这次新增的表格元素含有我们没用到的配置，首先先来说一下“保存”按钮：

• “保存”含有连接的服务，意思是再点击时执行的服务；
• 含有连接的面板，意思是要被刷新或展示的面板，含有目标面板，意思是被展示的面板；
• 在我们新增的时候需要在“确认JS”增加“confirmsave()”js方法，才能达到验证产品添加的功能保存的关联管理和提交范围，而这个js方法正是面板中加载前js中含有的（注：在以后配置PM_tb_product_orders_link_InsertChild面板时也需要一个加载前script，在表格元素“价格”和“订货数量”中需要在“失去焦点时JS”增加“xiaoji(this)”js方法，才能达到动态计算单项小计的目的）；
• “保存”按钮需要同时为两个面板提交数据，所以在提交范围中选择被提交数据的两个面板；
• “保存”设置关联管理，关联管理用于用于隐藏按钮的提交，即点击按钮时关联的按钮也触发同样的事件，由于一个按钮只能匹配一个服务，所以在此处隐藏按钮作用是匹配两个服务；

根据上面的介绍，由于操作简单，只抓取设置关联管理的设置截图，如下图：

创建服务

在配置关联管理时，隐藏按钮“保存tb_product_orders_link”的服务并不是系统默认生成的，我们需要自己去创建服务，同面板创建一样，我们可以复制一个类似的服务，稍加修改即可，如下图：

注：隐藏的按钮需要把位置设为内联。

复制完成修改相应信息即可，如下图：

按钮与服务关联

保存后，为隐藏按钮“保存tb_product_orders_link”配置上服务就行，如下图：

编码定义配置

至此一个相对复杂的面板就算添加完成了，大家可以参考示例程序添加新增订单这个功能的其他面板（可以从”保存“的连接和目标面板看起），我在这里就不截图讲解了。

通过仔细观察我们会看到订单编码是有一定规律的，既然想完成新增订单功能，当然得去定义订单的编码规则，仿照示例，首先去新增编码，步骤：点击首页，打开”编码定义“界面，就可以增加编码定义了，如下图：

编码项目定义

全部增加完成后，可以为编码定义相关项目，如下图：

增加编码类型参数

CODE规则配置完毕，下面开始增加CODE类型的参数，在“tb_orders_info”的参数列表中新增订单编码CODE类型的参数，以便应用到服务中，如下图：

有了CODE类型的参数，接下来就修改服务“tb_orders_info_insert”即可（此服务被“保存”用到），如下图：

组合面板配置

到此基本配置都已完成，下面应该为主面板（new order）配置子面板了，如下图：

效果展示

主面板配置完毕，把这个面板挂在新增订单菜单中即可，这样这个相对复杂的功能到这里也算是开发完毕了，我们来看看最终效果，如下图：（注：其中还有些面板，如“保存”连接的面板在本文中并未提及，不过通过这几篇文章的学习和订单管理示例系统，可以很轻松的找到缺少哪些面板，并配置完成），怎么样，很简单吧。