1. 首页
  2. 全部文档
  3. 开发框架模块手册
  4. 增删改查成熟模块(3个)

增删改查成熟模块(3个)

增删改查可复用成熟模块

  • 模块项目下载地址:https://pan.baidu.com/s/1gKN6ZuZxvHIh7ItjwP45Fg
  • 增删改查页是系统页面中最为复杂的功能页面,如果页面可以复用,只需在页面中进行成熟功能模块页面的修改即可快捷速开发
  • 下载的项目导入后,电脑端显示块中有一个“zengshangaicha”显示块,这个显示块即为增删改查页
  • 实际页面显示的效果如下:

带批量上传、批量下载的增删改查页

功能说明

页面头部菜单栏

  • 用户可见可操和的功能:
    • 上传记录按钮,按钮中点击行为元件中放一个弹窗
    • 查询条件输入框和条件名称
    • 查询按钮,按钮中点击行为元件中是查询转换显示记录信息的逻辑
    • 放置删除和下载记录的序号输入框
    • 删除按钮,按钮中点击行为元件中是按序号删除记录的逻辑
    • 下载按钮,按钮中点击行为元件中是按需号查询下载到csv文件的逻辑

页面主体信息显示区

  • 是一个记录显示表格,表格中行可以选中高这显示
  • 表格中某些列宽定已定义(样式类span1~span12方式定义)

开发说明

页面结构及显示对象开发:

  • 所有内容都可以在一个空白的页面中通过点选选项板中元件来开发完成,可以打开下载文件查看开发结果
  • 空白的电脑端显示块中点选放入一个显示块作为增删改查页面
  • 页面中放一个菜单栏,作为用户操作添加记录查询记录删除记录的按钮及条件处理区,拖放连线方式设计完成
  • 页面中菜单栏下放一个显示块,作为查询的记录显示的区域,其中放入一个表格元件


以上内容拖放放大显示,默认较小,需要时请在文件中点击各部分细看

样式定义说明

页面样式

  • 页面的样式我们为“zengshangaicha”显示块定义了样式属性:
    • 样式名称:html.style 样式值:margin:0 auto;width:80%;height:100%;
    • 样式中margin定义了页面在父元件中(此项目文件中也就是全屏)是居中显示的
    • 样式中margin定义了页面的宽度是父元件的80%,高度和父元件一样
    • 显示效果为本文开头第一个图的显示样式
  • 导入复用到新的项目中时,一般应将样式值改为“width:100%;height:100%;”,这是因为我们新项目一般都会用一套框架来处理,而框架中页面已设计好,也就是页面已定义了,我们只需将此增删改查页面设定与框架页面重合(100%占满)即可
  • 注意在一个空白的新建项目中,我们为了设定“Desktop View”显示块是满屏的,需要为其设定一个同样的属性,或在项目样式文件中(web\styles文件夹中general.less或desktop-view.less文件中)添加一个样式类,此模块项目就是用这个来定义的,可以查看
    .body{
      width:100%;
      height:100%;
    }
    

顶部菜单栏样式

  • 头部的显示对象样式都在样式文件中定义的
    • 我们为头部菜单栏添加了样式类属性,样式类名称为“caidanlan”
    • 此项目的样式文件中(..\web\styles文件夹中general.less)定义此样式类的样式内容:
    .headrow{
    padding:15px;
    border-bottom:1px solid #aaa;
    height:65px;
    background-color:#7B95AB;
    >input{
     margin-bottom:0px;
     width:100px;	
     }
    >select{
     margin-bottom:0px;
     width:120px;	
     }
    >div{
       margin-top:0px;
       padding:0px;
       text-align:right;
       float:right;
       >input{
           margin-bottom:0px;
           width:100px;	
           }
      }
    }
    
  • 这是一个典型的less框架的样式定义方式—用一个名称定义当前对象及下属全部想定义的对象的样式:
    • 其中定义了类值添加后所属对象的样式如菜单栏中所有元件与菜单栏间隔15像素、菜单栏有1像素的实线下边框、菜单栏高度65像素、菜单栏背景深灰色号
    • 下属输入框样式:距下部为0,宽度100像素
    • 下属下拉框样式:距下部为0,宽度120像素
    • 下属HTML div块对象样式:距下部为0,宽度100像素
      • 下下属输入框样式:距下部为0,宽度100像素
  • 注意,如果正式使用时添加到顶部菜单中的元件多于一行,有两行条件项或按钮,则需定义一个新的样式类,可以用名称为“caidanlan2”,复制所有“caidanlan”下样式定义内容,将其下的height标签值改为120px或类似值测试看是否达到需求

顶部菜单栏按钮中弹窗的样式

  • 弹窗在我们项目文件夹下“web\styles\bootstrap文件夹中024-modals.less文件”中定义的,默认的定义中弹窗标题居左,下部按钮靠右,弹窗出现时的背景色为黑色,可以修改定义值处理进行调整为标题居中、按钮居中、背景色灰色
    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindexModalBackdrop;
      background-color: @gray;  -------------------------------修改项:调整为gray
    ...
    .modal-header {
      padding: 9px 15px;
      text-align:center; --------------------------------------新加项:添加一行文字居中的标签定义
    ...
    .modal-footer {
      padding: 14px 15px 15px;
      margin-bottom: 0;
      text-align: center; // center align buttons -------------修改项:这一行中原文备注是靠右,改为居中
    
  • 修改样式后的显示效果:

表格显示区中的样式

  • 表格显示区样式,我们是在项目的样式文件中(web\styles文件夹中general.less)定义一个样式类统一定义表格和父级显示块的关系,这个样式类名称为“biaogeyemian”,因为这个类在整个项目中会多次用到,所以我们单独定义:
    .biaogeyemian{
      background-color:#F6F6F6;
      overflow-x:auto;
      overflow-y:hidden;
    }
    
  • 这个定义意思是此显示元件背景色为淡灰色、如果内容中左右超过一屏宽度时,自动出现左右滚动条,但是高度超过一屏不出现上下滚动条
  • 表格区显示块的高效是父元件全部元件高度100%减去其他固定高度像素的方式定义的,此例中样式值设定为“height:calc(100% – 65px);”
    • 其中65px是样式类中菜单栏的定义高度
    • 书写时注意减号隔开,否则失效
    • 如果菜单下此显示块的下部还有一个底部框占据定义为“height:25%;”高度,则此处显示块高度应定义为“height:calc(75% – 65px);”
    • 注意,如果修改顶部的高度,表格区显示块的高度属性值需对应修改为“height:calc(100% – 120px);” 否则页面会超过屏幕可显示区

表格中的样式

  • 表格显示元件因为表格内容多少列一次会显示多少条所以不能用样式类统一定义,但是表格内容每行斑马条状显示、表格选中一行高亮绿色等都是默认的样式类中定义的,需要时修改样式类,在“web\styles\bootstrap文件夹中010-tables.less文件中”修改对应值即可
  • 一般我们会在表格样式属性中为每一个表单独定义表格的宽度值,如果不定义,默认是父元件宽度,可能是全页面宽度;而有些表格一屏显示不完,有必要定义一个较大宽度,用户左右拖放滚动条即可查看显示内容,此例中定义了超过一屏的宽度,所以本文第一个图片下部有滚动条
  • 表格中可以单独定义高度超过一屏时表格头部固定,表格内容上下可滚动显示的样式类我们是按默认的表格样式修改如下的 (实际处理中需注意不是超过一屏的内容不用,开发者也可以在此基础上进一步调整得到想要的结果)
    .table1 {
      width: 100%;
      margin-bottom: @baseLineHeight;
      // Cells
      th,
      td {
        padding: 8px;
        line-height: @baseLineHeight;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid @tableBorder;
      }
      th {
        font-weight: bold;
      }
      // Bottom align for column headings
      thead th {
        vertical-align: bottom;
      }
      // Remove top border from thead by default
      caption + thead tr:first-child th,
      caption + thead tr:first-child td,
      colgroup + thead tr:first-child th,
      colgroup + thead tr:first-child td,
      thead:first-child tr:first-child th,
      thead:first-child tr:first-child td {
        border-top: 0;
      }
      // Account for multiple tbody instances
      tbody + tbody {
        border-top: 2px solid @tableBorder;
      }
    }
    

表格行元件中每列的样式

  • 行元件中的显示元件可以定义宽度、此例中我们用span类名称定义,相关处理请参考“元件手册”中的表格元件的说明

逻辑功能开发

  • 数据库增添记录:“上传更新”按钮中按上传表单记录批量添加,这个功能可以参考可视化元件手册中的集成功能元件中的Load Excel Table导入Excel数据元件的说明,同时请参考“上传文件的成熟模块”用弹窗来上传文件,有单独的说明文档
  • 数据库修改记录:本例修改记录处理比较简单,逻辑是上传的清单中,如果有主键值一致的记录,则直接用上传的内容更新已有的记录值
  • 数据库删除记录:是通过用户输入ID序号,用此来找到对应的记录,连接至删除元件处理的
  • 数据库记录查询:查询处理中,按输入的条件,默认进行了对应输入值的相似值查询处理,其中有一个相似条件字符串生成处理逻辑,这个逻辑应独立开发并在每个项目中导入,因为相似查询很常用,而多次使用生成查询条件时,可以复用:

  • 数据库记录下载:下载设计可以参考可视化元件手册中的显示行为元件中“Show File下载”的使用说明,以及“无代码开发手册”中“从需求出发的开发”一章“Office相关文档处理”一节详细介绍

快速复用指导

  • 1、下载成熟模块项目,开发工具中导入项目
  • 2、打开导入的项目,先删除不需要内容、再添加新内容
    • 建议选删除不需要的字段,删除后,对应已删除字段的传值逻辑就会有断开传值连线的报错,此时保存项目,验证区中出现所有对应的传值处理相关项,进入每个报错位置,删除不需要的对应开发项目
    • 注意删除时不熟时选删除一个字段,再一次删除多个处理,同时查看增删改查各处的传值处理逻辑,便于添加字段时在同样位置进行操作
  • 3、各位置修改处理说明:
    页面中数据库\显示表格\菜单栏修改及检查内容

    • (页面—“ShengChan_JiTaiChanPin”数据库表)字段中添加或删除字段,同时修改数据库表名称,注意修改数据库表名称需同时修改库表元件的“tableName”值,这个对应数据库中的操作的表名称
    • (页面—Pane显示块—Table表格—“Body”—“Body Row”中)改名为想要的列名称或删除或添加新的表格列元件,注意这里的显示元件如果从元件选项板添加而不是复用当前元件,则需修改html.tag属性为td、同时定义各列“html.styleClass”属性值span4或类似值或用样式属性及宽度标签定义列的显示宽度
    • (页面—“Toolbar”菜单栏中)删除当前已有的查询条件名称及输入框元件或新加更多同类元件,查询条件名称在“Action”元件中用常量传值,可修改当前名称及添加新名称,进入“Selection Field”下拉选框元件中修改删除或添加选项值,其他显示元件中的提示信息进入元件后重命名方式修改字符常量值
      页面“查看”按钮中修改及检查内容
    • (页面—“Toolbar”菜单栏—“查看”按钮—“On Click”—“Service”)如果修改了查询条件,则需要对应修改此处的条件传值及用模板生成查询条件的字符串内容

    页面“上传更新”按钮中修改及检查内容

    • (页面—“Toolbar”菜单栏—“上传更新”按钮—“上传基本信息”弹窗弹窗—Footer—“模板”按钮—直到“Show File”下载文件中)上传信息的Excel模板中添加或删除列:“序号、工作单位…”字符常量中添加或删除上传模板的列名称;修改“产品设备基本信息模板.csv”为想要的下载文件名称,格式为.csv不变;*“工作单位必须是”铝压”这个字符常量用重命名方式修改填表提示信息;注意下载的模板是csv格式,可以用Excel打开,添写完后可另存为Excel表
    • (页面—“Toolbar”菜单栏—“上传更新”按钮—“上传基本信息”弹窗弹窗—Footer—“上传”按钮—“On Click”—逻辑设计的“Service”—“Action”中)设计Excel表中取得的数据的数据结构对象—添加列名称或删除列名
    • (同上)与“ShengChan_JiTaiChanPin”表中字段的传值连线的添加或删除
    • (同上)添加或删除自动添加的系统信息,如上传人员用户账号、当前日期、当前日间、自动添加的ID序号元件等
    • (页面—“Toolbar”菜单栏—“上传更新”按钮—“上传基本信息”弹窗—“Body”—Action元件中)用重命名方式修改弹窗区中间显示的提示信息“注意,上传数据中如果…”为想要显示任意内容

    页面“序号删除”按钮中当前逻辑基本不需处理

    • 当前删除逻辑如果不修改为选中行并以表格行中新的主键传值来删除记录,则不需任何修改即可用

    页面“序号下载”按钮中当前逻辑基本不需处理

    • (页面—“Toolbar”菜单栏—“Pane”—“Button Group”—“序号下载”按钮—“On Click”—“Show File”—“Action”—“Action 2”中)需要按新的记录字段来传值,需注意模板生成字符串中模板和输入元件名称对应关系和位置,输入元件如果记录中可能是空值,则模板中输入元件状态修改为非必须传值的黄色三角形,如果记录值中可能含有逗号需进行去掉逗号的处理
    • 此部分处理可以参考我们元件说明手册中下载文件、生成字符串模板的使用说明
    • 同前面模板中说明的一样,“Show File”中修改下载文件名称
    • 如果是商业数据库版本,则下载功能可改用下载为Excel文件元件,参考元件手册中最后一组中此元件的使用说明
  • 4、保存后可以试运行一下,可以测试下载模板添加数据上传查询下载删除全操作一次
  • 5、开发区中点选“zengshangaicha”显示块,右键单击选复制,在新的项目的某个页面中粘贴复用,选“导入粘贴”(paste import)的方式
  • 6、导入至新项目后,可以调整此页的样式属性“margin:0 auto;width:80%;height:100%;”为“width:100%;height:100%;”,即为新项目中某个页面全部显示此页面;不建议直接作为一个页面,因为新项目的框架或分页面元件中已有页面,且页面与父元件一般已有定义,调整比较麻烦,而且后续如果需要调整位置,可以自由调整,也就是框架的页面,和功能页面是独立的
  • 7、调整导入的模块在新项目中的文件目录中文件位置,将模块的内容全部拖放到框架页面下或一个特定目录中

注意

  • 可用以上方式,多次添加来为新项目定义多个增删改查页面或新模块,实际上如果操作修改表名称和每次导入后进行第7步的目录位置修改,则就会在新项目中生成完全独立的两个或多个增删改查页面或模块
  • 此成熟模块中删除和下载功能是按输入的序号来处理的,按选中列进行修改、删除记录,以及下载全部查询结果或全部数据库记录的功能,可以自行修改相关按钮中的逻辑处理

复用案例

请参考我们 开发案例手册中ERP中MRP开发的复用说明