基于Foxtable+LayUI开发的订单管理系统开售，一套代码，适应全部终端！ - 专家坐堂 - Foxtable(狐表) - 新一代数据库软件，完美融合Access、Foxpro、Excel、vb.net之优势，人人都能掌握的快速软件开发工具!

这是为本人已经上市的一本新书《Foxtable+LayUI+Excel网页开发效率手册》所开发的一个完整的实战项目系统。由于本系统适当参考了layui官方的收费模板layuiAdmin，受该模板授权限制，其中的诸多代码不能写在公开发行的书籍中，只能另外以源码方式向有需求的用户提供。

本实战项目购买地址：https://item.taobao.com/item.htm?id=625142494379，同时赠送近300页的使用开发说明手册。

本项目公开发售的有两种版本：一种是面向狐表用户的全源码（前后端都是源码），另一种是面向layui用户的半源码（前端源码，后端编译）。layui用户一般更关注前端代码的实现，给他们配个编译后的foxtable服务器端，让项目可以顺畅运行即可。当然，更关键的是希望他们也能体验一下国产服务器的魅力。

以下是本项目的在线演示地址，选择其中任意一个登录即可。由于这2个服务器的带宽都很有限，当访问其中某一个存在困难时，请换一个再访问。如果打开网页都很慢，请换个时间再尝试登录(登录名admin,密码000000)：

http://49.233.131.128/

http://www.wx-gl.xyz:8866/

或者，这里还有个7分钟的高清短视频演示，可下载到本地观看：

http://www.diyofficecode.com/download/layuidemo.rar

*******写在前面的话*******

对于接触、使用过layui的用户而言，他们只要看了本帖所发的这些功能界面就会知道，其中的很多功能并不是layui本身自带的，而是使用的第三方插件。本项目前后经过了多次改动，至于为什么要用第三方插件取代layui本身的组件，我在本项目所配套的开发文档中还将详细解释缘由，同时加上所使用插件的完整说明。

当然，这些都不是重点。需要关注的是：有了LayUI，是不是可以不用再学EasyUI了？

首先表明我个人的态度：两者绝对是一种共生、共融再到共荣的关系，千万不要理解成非此即彼。在个人精力有限且只能专注于某一种时，我更建议你学习EasyUI！不论是Layui还是EasyUI，它们都是基于jQuery的，零基础攻略中的基础知识都是必须要学的！

Layui界面确实华丽了一些，但要知道，这些都是靠CSS样式拼出来的，因而在真正接触Layui之后，你会用到非常多的样式及页面代码，因而对html和CSS的要求都远比EasyUI高！尤其是，LayUI是一款优秀的开放式框架，很多它自身并不具备或者不太完美的功能，都需要用第三方插件或者自行编码解决。而这种开放性，某种程度上又会在无形中提高新手的学习门槛。。

就个人感受而言，由于近几个月一直在使用LayUI以及其他类似界面的element等框架，说实话，已经完全审美疲劳了，搞来搞去都是差不多界面的东西，功能上也并没有特别突出的亮点。反观EasyUI，它的窗口式传统操作界面真的很有商务范，也非常经典。最主要的，EasyUI是侧重于js方面的功能性框架，它对用户的html和CSS知识要求非常低，更加适合狐表用户使用。也正因为EasyUI相对封闭以及全面性的功能封装，才让大部分用户只要使用页面中的div再加上不错的js功底即可行走天下。

所以，强烈建议大家先扎实的把基础打好，并尽可能的先学EasyUI。把EasyUI学好了，再来用LayUI，即可达到真正的“双剑合璧、力道更强”之效果！一个侧重功能，一个侧重界面，两者融合到一起，绝对无敌，这也才是狐表用户最现实的Web项目开发终极解决方案！

况且，我都把全套渐进式的知识体系帮你准备好了（从页面基础到jquery、到easyui、再到layui），也提供了全套实战源码的开发文档，剩下的，只需付出自己的耐心和专心，多么好的学习条件啊！大家也可以找找看，国内还有哪款软件能有如此的热心用户愿意花费几年时间给出多达二三百万字的学习配套？

也许有用户会问：既然不太想让我们先学layui，还帖这个展示干吗？三个目的：

1、看看符合现阶段所谓主流审美的web项目样式是什么样子，激发大家的学习积极性；

2、Foxtable的服务器功能不差，本项目功能全部用的异步，包括Excel报表；

3、很多用户都知道Foxtable高开版“让登录更安全”的帮助说明，但不知道在前后端分离的情况下如何实现。这在本示例项目中已经用上了：超过半小时没有数据请求会自动退出、同一个用户不能多地同时登录、使用服务器随机生成的token登录验证。

*******正文开始*******

本系统拥有完善的权限功能设置，不同用户使用的菜单权限不同，可以操作的订单产品类别也不同。所以，都必须登录后才能进入系统。

以下是登录页面，点击验证码图片可重新生成验证码：

admin作为管理员，拥有最高权限。登录成功后进入主页：

该主页左边为侧边栏，它会根据不同设备自动隐藏或显示。在PC端使用时，也可点击上方工具栏最左边的伸缩按钮对它进行控制。如下图就是侧边栏隐藏后的效果，将鼠标放到任何一个菜单图标上，会以浮动方式显示其下级菜单：

页面上方为工具栏。左侧两个按钮的作用，分别是用于侧边栏伸缩及当前页面刷新；右侧则有多个按钮。其中，最右边的“...”按钮用于显示文档说明信息，该功能在实际使用时可以替换成别的：

像这种右侧弹出的页面层在本系统中得到了广泛使用，因为它可以在任何设备上完整显示。在弹层外的任何位置点击，就能自动隐藏。

点击工具栏右侧的“主题”按钮，可以选择你喜欢的页面主题，也可以设置页面其他风格，包括是否在底部显示页脚、在点击不同功能菜单时是否显示tab页签，及其侧边栏的导航箭头样式：

点击工具栏中的“便签”按钮，可以实现备忘录功能。在这里，点击加号可以创建新的备忘，将鼠标放到任何一个备忘标签上，还可以将其删除：

点击工具栏中的“新消息”按钮，将弹出当前用户所收到的所有新消息。有新消息时，该按钮上会有一个明显的红色圆点徽标；没有新消息时，就不会显示徽标；新消息全部阅读完时，也不会显示徽标：

如果要查看所有历史消息，可点击侧边栏中的“系统管理--消息通知”。

顶部右侧工具栏中还有最左边的2个按钮，一个用于全屏显示（这是真正的全屏，能将window任务栏及浏览器菜单等等全部覆盖，整个屏幕只显示这个系统页面），另一个用于锁屏。锁屏时必须输入正确的预设密码才能打开当前页面（非当前用户使用时，也可点击右下角按钮重新登录进入系统）：

当把鼠标移动到顶部工具栏的用户名称上时，会弹出下拉菜单。点击“个人中心”可以察看当前用户相关资料，也可修改密码或直接退出系统：

本系统的所有子页面内容都显示在body区域。如上图的“个人中心”，其上方是面包屑导航路径（左侧为当前页面名称，右侧为导航路径，点击可快速返回），下方就是具体的子页面内容。在“个人中心”页面，点击图片可以重新选择文件上传，也可对选择的图片进行裁剪、旋转等操作：

以上就是本系统侧边栏及顶部工具栏的功能介绍。现再简单看一下该系统在不同设备上的运行效果。

以下是iPhone手机（6/7/8）竖屏显示效果：

iPhone手机（6/7/8）横屏显示效果：

由于该手机宽度不够，所以侧边栏都是自动隐藏的。当需要显示侧边栏时，点击一下顶部工具栏的“伸缩按钮”即可。如果你使用的是平板，也会自动适应。如下图就是在ipad横屏上的显示效果。由于宽度足够，所以侧边栏就能直接显示：

对于手机等小型移动设备而言，全屏和锁屏功能是不需要的，所以，在此类设备上运行本系统时，顶部工具栏中的“全屏”及“锁屏”按钮就会自动隐藏。

[此贴子已经被作者于2020/12/31 14:46:35编辑过]

本系统的数据录入、审核、查询、统计都以table数据表格为中心，所能操作的数据范围由admin管理员授权。

数据录入

包括“新增订单”和“修改订单”。新增订单可以任意增加记录，编辑完成后一次性提交到服务器。编辑记录时，可以在表格中手工输入，其中的“金额”是表达式列，它会根据单价、折扣和数量自动生成。也可点击序号，以窗口方式对当前记录进行编辑修改：

这个录入窗口也是自适应的。如上图，当在PC端使用时，由于屏幕宽度足够大，所以显示为2列。当在移动端使用，或者将浏览器窗口缩小时，会自动显示为1列，并出现滚动条：

而修改订单只能对现有数据进行修改或删除，可以设置数据加载条件。这里的条件使用的是动态方式。当条件非常多时，可以在页面上默认只显示部分最重要、最常用的条件，点击“展开”时再将全部条件显示出来。在这里，点击序号依然可以调出输入窗口，也可以点击单元格直接输入数据。只要数据发生改变，都会实时同步保存到后台数据库中：

数据审核

包括“订单审核”和“取消审核”。两个功能实际上用到的都是一样的界面，无非“订单审核”默认加载的是未经审核通过的记录，“取消审核”默认加载已经通过审核的记录。如下图，当没有输入任何条件时，直接点击“搜索”，在“订单审核”页面中生成的就是全部未经审核通过的记录：

当需要对其中的某条记录进行审核时，只要在数据行上点击即可弹出审核窗口：

在这个窗口中，不仅可以补充审核意见，也可查看它对应的历史审核记录：

数据查询

包括两类数据的查询：订单数据及审核数据。

其中，订单数据查询非常简单，就是在左侧有个目录树，点击不同节点即可得到相应的数据。当然，在实际项目开发中，你也可以根据需要给它加上各种自定义条件：

审核数据看起来更简单，表格上面就一个单选框：选中它时，自动列出所有通过审核的记录；未选中时得到的是未通过审核的记录：

就像截图中所提示的那样：千万别小看这张表，它所实现的查询功能可能比之前的各种条件式查询都强大。例如，点击其中的“日期”列，就会出现下拉菜单：

将鼠标放到“筛选数据“上，它就会将当前列中的所有可选项列出来，点击一个或多个都会自动执行筛选。当可选项太多时，右侧还会有滚动条，也可输入关键字搜索。是不是有点类似于Excel列筛选的感觉？当然，在这个下拉菜单中，还可以动态设置隐藏列，也可以将数据导出到Excel。

数据统计

包括“分组统计”、“交叉统计”和“子表统计”。这里的统计功能就是由Foxtable服务器根据客户端浏览器提交的统计设置条件，使用Foxtable本身自带的统计模块完成后发送到前端显示。以下是分组统计效果：

分组统计完成后将在统计表下方自动生成图表，点击统计表中的任意一个数据行，还将同时显示该行所对应的关联数据：

交叉统计如下图所示，这里的多层表头都是根据用户选择的垂直分组列自动生成的：

子表统计就是在统计表中再嵌入子表。其实，这里的统计子表完全可以使用右弹层实现，且更加友好。但为了让这个demo的功能更丰富一些，所以选择内嵌子表的方式实现。如下图，当选择的分组列只有1列时，点击其中的任何一项，就能得到该分组的子表统计数据：

当分组列有2列时，则在子表中显示其对应的明细数据：

统计模块中的条件设置，这里使用的都是穿梭框。穿梭框中选择条件的顺序，决定了所生成统计表的列顺序。如下图，已选择统计列的顺序是“金额、数量”，所以得到的统计表就是金额在前、数量在后：

[此贴子已经被作者于2020/6/27 9:28:30编辑过]

报表中心

本模块功能看起来很简单，但非常有特色。对于Foxtable用户来说，本功能更加具有特别的意义，因为它并没有在页面中使用很复杂的设计，全部数据在服务器端都是由事先定义好的Excel报表自动完成。

如果你仅仅只是需要在网页项目中展示或输出各种格式化的数据，那么只要在服务器端定义各种Excel报表模板就可以了。最多在页面中添加几个表单用于提交数据请求条件。

如下图，这里的数据就是使用订单明细数据的Excel模板得到的：

下图使用的则是预先设定好的Excel统计模板：

VBA报表则没有使用任何模板，它完全是通过服务器端的VBA代码生成的。使用VBA代码的好处是，可以在报表中加入图表，且数据提取更加灵活：

我们知道，Foxtable服务器端在处理生成Excel报表页面时，会耗时较长（因为有一堆的附加文件需要处理）。为解决服务器端处理数据时的等待问题，本项目专门在生成报表时添加了加载层，这样使用起来就会感觉友好的多、融洽的多。动图效果如下：

[此贴子已经被作者于2020/6/27 9:25:57编辑过]

现在来看很多用户尤其关心的系统管理模块。系统管理包括四大项：权限管理、消息通知、员工资料和文档管理。其中，最核心的就是前面两项，后面两项虽然可有可无，但是却提供了很多有意思且很常用的功能。

权限管理如下图所示，在这里不仅可以增加用户，也可以删除用户：

如上图所示，只有2个用户被授予了功能操作权限和产品数据使用权限，其他没有被授权的用户，当在登录系统时会被提示“未被授权”而无法进入系统；已被授权的用户，在进入系统后也只能在权限范围内操作数据。当需要对某一用户授权时，只要在该用户所在行点击即可：

如上图，张颖的功能权限中没有被授权“权限管理”模块，产品操作权限为“P01”和“P02”，那么该用户登录后，侧边栏及首页快速导航中都不会出现“权限管理”菜单，对订单数据的处理也仅限“P01”和“P02”。

消息通知模块，包含收件箱和发件箱。

收件箱仅会列出其他用户发给本人的消息，未读消息会在标题旁加上红色徽标，顶部工具栏的消息按钮旁也会显示红色徽标。如下图，这是以“张颖”登录的页面效果，侧边栏已经不见了“权限管理”，未读的新消息显示为4条：

消息阅读有两种方式：一种是在收件箱中点击消息所在行的“查看内容”按钮，消息将以右侧弹层的方式显示：

如果是新消息，也可直接点击顶部工具栏的“新消息”按钮阅读：

当阅读新消息时，则以完整页面的方式展示。例如，点击阅读其中的第1条新消息，页面效果显示为：

点击页面中的“返回消息中心”按钮，将回到消息通知的收件箱页面。当然，你也可以继续点击顶部工具栏按钮继续阅读其他新消息。

发件箱则是以当前登录用户的名义向其他用户发消息，也可以对已经发送的消息进行修改。如下图所示：

点击标题可直接修改标题内容，点击收件人可选择接收此消息的用户：

点击编辑内容按钮，则可输入图文并茂的消息内容：

员工资料功能确实是可有可无的，之所以在本系统中加入此功能，主要是为了展示网页项目中一些常用功能的实现方法。员工资料表格看起来非常平淡无奇：

实际上，这里的每一列都隐藏着很多功能。现在就一列列的进行说明。

当点击住址列的时候，它会自动调用高德地图，并以当前访问ip所在的城市位置列出很多位置供选择，以实现地址信息的快速输入。如下图，当选择“体育彩piao”时，地图会自动将附近位置放大供你做进一步的选择，点击“确定”按钮即可向表格填入当前位置信息：

后面的4列，每点击其中的按钮，都会弹出2个菜单：一个用于查看，一个用于编辑。当然，实际项目开发时，也可以将它们改成两个操作按钮放在单元格中，这里只是提供另外一种解决问题的思路。如下图：

当点击“查看照片”时，会显示所在行用户的照片：

当点击“修改照片”时，会在右侧弹出编辑层。在这里点击原有图片即可重新上传文件或者对现有图片进行编辑后重新上传：

如上图，下面的照片就是经过编辑之后的，点击“确认更换”按钮即可上传到服务器，后台服务器中的数据也会同时更新。

员工履历同样有查看和编辑两个操作选项。尤其需要说明的是，这里的履历编辑使用了一款非常强大的富文本编辑器，它除了具备各种文字样式、表格插入等功能之外，还有异常出色的图片编辑功能：

如上图，当你选中所插入的图片时，除了旋转、翻转等，如果点击图片编辑，还会有更多专业的图片处理功能：

在这个履历编辑弹层中，你对图片的任何修改，都会自动上传并保存到服务器。

附图和附件则分别用于对多图片和多文件进行管理。当附图有多个时，点击“查看附图”，可以用鼠标左右翻转查看（移动端用手指划动）：

如果需要对附图进行编辑，可以双击删除不需要的图片，也可以继续添加多幅图片：

附件是指除了图片之外的其他文件。如下图，查看王伟所带的附件文件有5个，点击即可下载：

如要修改附件，操作方式和附图相同，既可双击删除现有的附件文件，也可补充上传新的附件文件，数量不限：

既然能向服务器上传这么多的图片和文件，肯定就会带来一些管理上的问题。所以，在本项目中又添加了“文档管理”功能。如下图所示：

在文档管理列表中，将鼠标移动到图片文件上可以预览显示小图，移动到其他文件上可以下载，点击删除按钮可以将该文件从服务器端物理删除：

当然，删除这些文档时一定要慎重，否则可能会造成系统消息、用户履历等方面的内容显示异常，比如无法显示图片、文件无法下载等。建议在用户管理中，仅将此功能授权给个别用户使用。

LayUI与EasyUI的完美兼容

尽管本项目前端是使用layUI开发的，但由于它和EasyUI处于同一个框架体系（jQuery），因而，我们还可以在本项目中完美嵌入EasyUI。

layui的优势在于开放的生态以及更加时尚的页面展示效果，尤其是支持全终端适配；而easyui在功能上又比layui强出N级，因此，当使用layui甚至插件都无法实现某些特定功能时，可以考虑把easyui加入进来。如下图中的数据表格，它就是使用EasyUI的datagrid组件加载进来的，而没有用layui的table，且服务器端的响应代码未因此做任何修改，同一个服务端数据源完美用在了两个框架中：

[此贴子已经被作者于2020/6/27 10:34:58编辑过]

几时能买到？等不及了。

超级强，等书出来！

主题：基于Foxtable+LayUI开发的订单管理系统开售，一套代码，适应全部终端！