联想控件

1.基本功能 1.基本功能

1.1.联想控件 1.1.联想控件

联想控件的效果可根据用户输入的内容进行模糊查询.
联想控件
联想控件输入

1.2.联想控件动态赋值 1.2.联想控件动态赋值

选择联想控件下拉中的某一笔记录时会把这笔记录中的数据赋值给界面上的其他字段。

1.3.联想控件多级过滤 1.3.联想控件多级过滤

联想控件显示结果根据页面上另外一个字段(或虚拟字段)的值进行动态过滤显示。

1.4.联想控件公共代码合并 1.4.联想控件公共代码合并

抽取公共代码,支持每个搜索帮助生成一份文件或者同个页面的联想控件统一生成到一个js里面,在页面的js中引入新的shlpsetting。

1.5.多选下拉联想控件分隔符 1.5.多选下拉联想控件分隔符

多选下拉联想控件分隔符

1.5.搜索帮助全文搜索配置 1.6.搜索帮助全文搜索配置

全文搜索服务器搭建及数据导入功能说明

2.配置方法 2.配置方法

2.1.联想控件 2.1.联想控件

  • 联想控件有单选和多选、以及可输入联想控件之分。
  • 配置

    1. 对象建模–基础数据–搜索帮助:新增一笔搜索帮助,名称(自定义)、数据源类型(业务对象)、数据源(业务对象名)、值字段、文本字段为必填项。
      联想控件1

    2. 点击【搜索帮助明细】tab页的【新增】按钮,配置搜索帮助明细,搜索帮助明细就是在联想控件下拉的时候显示列数及输入的内容要过滤哪些列。
      联想控件2

    3. 点击【同步到目标数据库】或者【导出配置数据】按钮,配置好的搜索帮助刷到业务系统。
      联想控件3

    4. 对象建模–业务对象–业务对象管理:编辑业务对象,点击【可视化布局】按钮,选中对应的控件,在右侧属性列表处填写搜索帮助名搜索帮助关联属性,并把控件类型改为联想控件若要配置多选或者可输入联想控件,只需更改其控件类型
      联想控件4

    2.2.联想控件动态赋值 2.2.联想控件动态赋值

  • 联想控件动态赋值默认是焦点移出的时候进行渲染表格,若要配置选中的时候就渲染表格参考【3.1】。
  • 配置

    1.对象建模–业务对象–业务对象管理:编辑业务对象,点击【属性定义】tab页,找到配置了搜索帮助的属性,并进行编辑,点击编辑属性定义界面的【动态过滤配置】tab页。
    动态赋值1

    2.新增一笔数据,【目标属性名称】填写的属性是搜索帮助明细中的属性名称,选择【操作符】,【级联属性名称】填写页面上用来赋值的属性名称,【类型】选择赋值
    动态赋值2

    2.3.联想控件多级过滤 2.3.联想控件多级过滤

  • 联想控件多级过滤默认是焦点移出的时候进行渲染表格,若要配置选中的时候就渲染表格参考【3.1】。
  • 配置

    1.对象建模–业务对象–业务对象管理:编辑业务对象,点击【属性定义】tab页,找到配置了搜索帮助的属性,并进行编辑,点击编辑属性定义界面的【动态过滤配置】tab页。
    动态赋值1

    2.新增一笔数据,【目标属性名称】填写的属性是搜索帮助明细中的属性名称,选择【操作符】,【级联属性名称】填写页面上用来过滤的属性名称,【类型】选择过滤
    动态过滤1

    2.4.联想控件功能代码合并 2.4.联想控件公共代码合并

    配置

    1. 项目管理–项目初始化–视图级配置:增加配置项为【联想控件公共代码】,配置内容为【1】则每一个搜索帮助单独生成一份文件。如果配置内容为【2】则一个业面上的所有搜索帮助生成一份单独的文件。若不配置,则不调用联想控件公共代码。
      h082001
    2. 配置了【联想控件公共代码】视图级配置后,在业务对象生成代码的时候就会抽取联想控件的公共代码。此配置也可以单独生成搜索帮助代码,点击搜索帮助界面的【联想控件代码生成】按钮。
      h082002
    3. 配置内容为【1】时,配置后会在/static/app下新增shlpSetting的文件夹用来存放搜索帮助的公共代码,文件名称为【搜索帮助名称+ShlpSetting】。如果搜索帮助是其他视图引用来的,需要到源视图进行生成。

    4.配置内容为【2】时,在业务对象上生成。生成的文件名为【页面名称+ShlpSetting】,文件中将此界面用到的所有搜索帮助都生成。生成路径为【/static/app/shlpSetting】。

    代码

    视图级配置内容为1

    每个搜索帮助生成一份文件

    if (window.ASSOCIATE_CONSTANT === undefined) window.ASSOCIATE_CONSTANT = {};
    angular.extend(window.ASSOCIATE_CONSTANT, {
        "SYS_OFFICE_COMPANYShlpSetting": {
            "columns": [{
                "width": "100px",
                "displayExpress": "officeCode",
                "text": "{{receiver.SYS_OFFICE_COMPANY_OFFICE_CODE_VARCHAR||'组织编码'}}"
            }, {
                "width": "100px",
                "displayExpress": "officeName",
                "text": "{{receiver.SYS_OFFICE_COMPANY_OFFICE_NAME_VARCHAR||'组织机构名称'}}"
            }, {
                "width": "100px",
                "displayExpress": "officeType",
                "text": "{{receiver.SYS_OFFICE_COMPANY_OFFICE_TYPE_VARCHAR||'组织类型'}}"
            }],
            "conditions": [{
                "junction": "or",
                "propertyName": "officeCode",
                "dataType": "S",
                "express": "$$keyword",
                "operation": "LIKEIC",
                "columnName": "OFFICE_CODE",
                "express_type": "datasource"
            }, {
                "junction": "or",
                "propertyName": "officeName",
                "dataType": "S",
                "express": "$$keyword",
                "operation": "LIKEIC",
                "columnName": "OFFICE_NAME",
                "express_type": "datasource"
            }, {
                "junction": "or",
                "propertyName": "officeType",
                "dataType": "S",
                "express": "$$keyword",
                "operation": "LIKEIC",
                "columnName": "OFFICE_TYPE",
                "express_type": "datasource"
            }, {
                "propertyName": "officeType",
                "dataType": "S",
                "value": "2",
                "operation": "LIKEIC",
                "columnName": "OFFICE_TYPE"
            }],
            "sorts": []
        }
    });
    

    然后XXBsCtrl.js再进行引用。

               /**
                * GLPaaS生成
                * 查询参数拼装方法
                * shlpName:SYS_OFFICE_COMPANY SysOffice
                */
                $scope.queryManageUnitNameCdmVesselParams = function() {
                    var query = AssociateSettingService.getQuery("SYS_OFFICE_COMPANYShlpSetting", "manageUnitNameCdmVesselSource", false);
                    return query;
                };
    

    视图级配置内容为2

    同个页面的搜索帮助统一生成到一个js里面

    if (window.ASSOCIATE_CONSTANT === undefined) window.ASSOCIATE_CONSTANT = {};
    angular.extend(window.ASSOCIATE_CONSTANT, {
            "CDM_PORT_ZHShlpSetting": {
                "columns": [{
                    "width": "100px",
                    "displayExpress": "portCode",
                    "text": "港口代码测试1"
                }, {"width": "100px", "displayExpress": "portName", "text": "港口名称"}, {
                    "width": "100px",
                    "displayExpress": "portLevel",
                    "text": "港口码头标识测试1"
                }],
                "conditions": [{
                    "junction": "or",
                    "propertyName": "portCode",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_CODE",
                    "express_type": "datasource"
                }, {
                    "junction": "or",
                    "propertyName": "portName",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_NAME",
                    "express_type": "datasource"
                }, {
                    "junction": "or",
                    "propertyName": "portLevel",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_LEVEL",
                    "express_type": "datasource"
                }]
            },
            "CDM_PORTShlpSetting": {
                "columns": [{
                    "width": "100px",
                    "displayExpress": "portCode",
                    "text": "港口代码测试1"
                }, {"width": "100px", "displayExpress": "portName", "text": "港口名称"}, {
                    "width": "100px",
                    "displayExpress": "portType",
                    "text": "港口分类"
                }],
                "conditions": [{
                    "junction": "or",
                    "propertyName": "portCode",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_CODE",
                    "express_type": "datasource"
                }, {
                    "junction": "or",
                    "propertyName": "portName",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_NAME",
                    "express_type": "datasource"
                }, {
                    "junction": "or",
                    "propertyName": "portType",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_TYPE",
                    "express_type": "datasource"
                }]
            },
            "CDM_PORT_QYShlpSetting": {
                "columns": [{
                    "width": "100px",
                    "displayExpress": "portCode",
                    "text": "港口代码测试1"
                }, {"width": "100px", "displayExpress": "portName", "text": "港口名称"}, {
                    "width": "100px",
                    "displayExpress": "active",
                    "text": "是否停用"
                }],
                "conditions": [{
                    "junction": "or",
                    "propertyName": "portCode",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_CODE",
                    "express_type": "datasource"
                }, {
                    "junction": "or",
                    "propertyName": "portName",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "PORT_NAME",
                    "express_type": "datasource"
                }, {
                    "junction": "or",
                    "propertyName": "active",
                    "dataType": "S",
                    "express": "$$keyword",
                    "operation": "LIKEIC",
                    "columnName": "ACTIVE",
                    "express_type": "datasource"
                }]
            }
        }
    );
    

    然后XXBsCtrl.js再进行引用。

               /**
                * GLPaaS生成
                * 查询参数拼装方法
                * shlpName:CDM_PORT_ZH CdmPort
                */
                $scope.queryUnloadPortNameCdmAssociateNewQParams = function() {
                    var query = AssociateSettingService.getQuery("CDM_PORT_ZHShlpSetting", "unloadPortNameCdmAssociateNewQSource", true);
                    return query;
                };
    

    2.5.多选下拉联想控件分隔符 2.5.多选下拉联想控件分隔符

    配置

    1.项目管理–项目初始化–视图级配置:点击【新增】按钮。配置项类型 :【多选分隔符】具体内容填写;
    联想控件公共代码2
    联想控件公共代码2
    对象建模–业务对象–业务对象管理:编辑业务对象,点击【可视化布局】按钮,进入到可视化界面。选中联想控件 控件类型:【多选联想控件】
    联想控件公共代码2

    2.6.搜索帮助全文搜索配置 2.6.搜索帮助全文搜索配置

    配置

    2.6.1.部署

    1.如果项目组需要搭建全文搜索服务器,需要向云平台申请,获取对应的全文搜索服务器的war包。
    2. 取的war包后需要修改war包中的jdbc.properties中的配置库。如果是开发库需要则修改为开发库的数据库配置信息。
    路径\src\resources\config\jdbc.properties

    dataSource.driverClassName=com.mysql.jdbc.Driver
    dataSource.url=jdbc:mysql://xxx.xx.x.xxx:3306/my_project_01?useUnicode=true&characterEncoding=utf-8
    dataSource.username=xxx
    dataSource.password=xxx
    

    3.接着需要修改配置文件application.properties文件,修改全文搜索索引保存目录,修改redis缓存服务器的信息。例如:
    \src\resources\config\application.properties

    #全文搜索服务器,索引数据保存的目录地址
    lucene.store.directory.path=E:\\XXX\\XXX\\indexs
    redis config
    redis.hostName = xxx.xx.xx.xxx
    redis.port = xxxx
    redis.timeout = 200000
    
    1. 接着需要为全文搜索服务器配置ngnix。

    server { listen 84; server_name localhost; charset utf-8; access_log logs/access.log; root "F:/system/sysman/sysman/WebContent"; set $uid "-"; if ( $http_cookie ~* "at_uvid=(\S+)(;.*|$)"){ set $uid $1; } # log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for" "$uid"'; location ^~ /search { proxy_pass http://localhost:8083/search; break; } }
    1. 部署好后启动服务。
      全文搜索引擎-部署5

    配置

    2.6.2.搜索帮助配置

    1.对象建模–基础数据–搜索帮助:编辑搜索帮助,需要使用全文搜服务器的搜索帮助,在基本的搜索帮助配置基础上还需要勾选【全文搜索查询】字段。
    全文搜索引擎-配置1
    2. 需要将业务对象的配置数据、对应的搜索帮助的配置数据、对应的搜索帮助的数据源业务对象的配置数据也需要同步到目标数据库。
    QQ截图20200422092004

    2.6.3.全文搜索数据导入

    1.在前面的步骤完成后,回到搜索引擎界面,批量勾选表格记录,点击【创建索引】按钮,可批量将选中的行的业务对象对应表的配置数据导入到全文搜索服务器。也可以点击操作列中的按钮,单笔将选中的行的业务对象对应表的配置数据导入到全文搜索服务器。
    全文搜索引擎-数据导入1

    配置

    2.6.4.项目组ngnix配置

    1.项目组如果使用了全文搜索引擎后,需要在ngnix中加入如下配置。

           location ^~ /search {
    
                proxy_pass http://localhost:84/search;
    
                break;
            }
    

    3.常用扩展 3.常用扩展

    3.1.联想控件选中时渲染表格 3.1.联想控件选中时渲染表格

    在config.properties.js中添加如下代码:

    associateDynamicAssign: {  // 联想控件动态赋值配置
            renderOnSelect: true,  // 是否在联想控件选中的时候渲染表格(更动态赋值字段的显示),默认是移出焦点的时候才渲染 
            clearAssign: true,  // 是否在联想控件清除的时候联动清除关联字段,默认不清除 
    }
    

    4.版本更新 4.版本更新

    预发布.业务对象重名

    新功能

  • 1. 【导出数据字典】按钮,如果勾选的是引用数据,提示【请回原视图同步配置数据!】。
  • 2. 【同步到目标数据库】按钮,如果勾选的是引用数据,提示【请回原视图同步配置数据!】。
  • 3. 【联想控件生成代码】搜索帮助的取数逻辑全部需要调整,取值按照【搜索帮助名+视图】取值。
  • 4. 【批量刷新缓存】搜索帮助的取数逻辑全部需要调整,取值按照【搜索帮助名+视图】取值。
  • 5. 【同步数据服务】搜索帮助的取数逻辑全部需要调整,取值按照【搜索帮助名+视图】取值。
  • 6. 查询界面上增加字段【归属视图】用来区分引用数据所属视图。
  • 7. 维护界面增加【数据源视图】和【搜索帮助视图】元素。