企业官网建设流程全解析

韶关做网站的公司,南京三大软件外包公司,微信小程序联盟网站,经济新闻最新消息财经1、基于代码生成工具的BS端主从表的快速开发如报销申请单主表和明细从表#xff0c;数据库设计关系如下所示。或者根据业务编码关联的报价单主从表设计#xff1a;image为了针对主从表的快速显示和录入#xff0c;一般主从表同时录入的#xff0c;我们设计了主从表界面的代…1、基于代码生成工具的BS端主从表的快速开发如报销申请单主表和明细从表数据库设计关系如下所示。或者根据业务编码关联的报价单主从表设计image为了针对主从表的快速显示和录入一般主从表同时录入的我们设计了主从表界面的代码生成处理。对于报价单和报价单明细表来说同样也是主从表关系我们为了方便快速开发专门设计了代码生成工具界面用来定制主从表显示和编辑界面的生成开发如下是代码生成工具用于生成BS端的Vue3ElementPlus的界面代码。image通过列出数据库的相关字段我们可以从中选择用于显示列表编辑录入、条件处理等条件的字段信息还可以根据某些字段为指定字典类型的数据绑定操作。上面界面的选择也是生成类似Winform的主从表界面的方式来生成BS端的界面内容生成的界面符合BS端框架的要求生成相关独立模块的页面代码和相关处理Vue代码等如下所示。image生成的代码经过一些简单调整处理后就可以很方便的显示出来了。生成的主从表列表界面如下所示。image可以看到的内容有树形列表、主表列表、从表展示以及常规的增删改查的入口。对于主从表的数据展示也是同样通过定制的界面元素进行快速生成。image而对于我们关注的主从表直接录入也是通过整合自定义控件的方式进行快速生成界面效果展示如下所示。image对应从表的记录我们同通过表格录入的方式可以输入或者选择内容进行填入。image2、Vue3ElementPlus的BS端主从表实现的具体代码首先我们来了解下几个视图文件的关系image我们先来了解下常规页面的内容的整体界面布局它包含常规的列表界面新增、编辑、查看、导入等界面除了列表页面其他内容以弹出层对话框的方式进行处理如下界面示意图所示。我们分别创建index.vue代表主列表页面内容 search代表查询及列表view代表查看页面、edit代表新增或者编辑页面两个页面类似因此整合一起更精简import代表导入页面然后再index页面组合即可。image不同的页面模块的区分有助于代码的管理维护。image列表页面的主要逻辑封装在search.vue页面中包括左侧树形列表区域查询条件区域、主表记录显示、分页展示区域、从表记录区域等。image其中主列表通过获取查询区域控件的条件通过API进行数据获取绑定到表格列表即可。image但主表记录呈现后我们单击任何一行主表记录会出发行单击事件的处理从而加载从表记录的获取并显示。image主从表可以直接录入它是通过整合自定义控件的方式进行快速生成界面效果展示如下所示。image在编辑界面中主表和常规单表一样的处理方式从表记录通过 vxe-table 进行录入的处理。对于产品记录的列表选取我们通过自定义组件 TableSelector 快速绑定即可即可。关于自定义组件 TableSelector 我在随笔《在Vue3ElementPlus前端中增加表格记录选择的自定义组件通过结合Popover 弹出框和Input输入框或者按钮选择实现 》中有相关介绍。image其实现产品表数据的绑定显示供表格选择代码如下所示。image对于字典记录的下拉列表我们绑定字典类型即可显示列表供选择了。imageimage这些我们可以通过字段的属性进行选择不同的录入方式生成对应的代码即可。image我们通过自定义控件的方式让vxTable的表格编辑界面可定制化从而可以快速调整表格单元格的输入方式。通过结合代码生成工具的字段定制的界面生成可以提高我们对界面元素的快速生成效率和应用效率极大提高我们的生成率。对于精益求精的代码生成虽然我们在工具的开发上花费的时间多一些但是可以极大的提高项目的开发效率也是值得的。专注于代码生成工具、.Net/Python 框架架构及软件开发以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。