HAP前端页面学习总结

用到的数据表脚本如下：

wht_hec_20500_org_access_b数据表：

CREATE TABLE `wht_hec_20500_org_access_b` (
  `ACCESS_ID` int(11) NOT NULL AUTO_INCREMENT COMMENT '表ID，主键，供其他表做外键',
  `ACCESS_NAME` varchar(50) NOT NULL COMMENT '访问名称',
  `DESCRIPTION` varchar(255) DEFAULT NULL COMMENT '访问描述',
  `ORG_TYPE` varchar(30) NOT NULL COMMENT '组织类型',
  `ORG_ID` bigint(20) NOT NULL COMMENT '组织ID(可以是BUID和库存组织ID)',
  `FUNCTION_ID` int(11) NOT NULL COMMENT '功能ID(来源sys_function_b 表)',
  `ROLE_ID` int(11) DEFAULT NULL COMMENT '角色ID(来源sys_role_b 表)',
  `USER_ID` int(11) DEFAULT NULL COMMENT '用户ID(来源sys_user 表)',
  `START_DATE` date DEFAULT NULL,
  `END_DATE` date DEFAULT NULL,
  `OBJECT_VERSION_NUMBER` int(11) DEFAULT '1' COMMENT '版本号',
  `CREATION_DATE` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `CREATED_BY` int(11) NOT NULL DEFAULT '-1',
  `LAST_UPDATED_BY` int(11) NOT NULL DEFAULT '-1',
  `LAST_UPDATE_DATE` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `LAST_UPDATE_LOGIN` int(11) DEFAULT NULL,
  `PROGRAM_APPLICATION_ID` int(11) DEFAULT NULL,
  `PROGRAM_ID` int(11) DEFAULT NULL,
  `PROGRAM_UPDATE_DATE` date DEFAULT NULL,
  `REQUEST_ID` int(11) DEFAULT NULL,
  `ATTRIBUTE_CATEGORY` varchar(30) DEFAULT NULL,
  `ATTRIBUTE1` varchar(240) DEFAULT NULL,
  `ATTRIBUTE2` varchar(240) DEFAULT NULL,
  `ATTRIBUTE3` varchar(240) DEFAULT NULL,
  `ATTRIBUTE4` varchar(240) DEFAULT NULL,
  `ATTRIBUTE5` varchar(240) DEFAULT NULL,
  `ATTRIBUTE6` varchar(240) DEFAULT NULL,
  `ATTRIBUTE7` varchar(240) DEFAULT NULL,
  `ATTRIBUTE8` varchar(240) DEFAULT NULL,
  `ATTRIBUTE9` varchar(240) DEFAULT NULL,
  `ATTRIBUTE10` varchar(240) DEFAULT NULL,
  `ATTRIBUTE11` varchar(240) DEFAULT NULL,
  `ATTRIBUTE12` varchar(240) DEFAULT NULL,
  `ATTRIBUTE13` varchar(240) DEFAULT NULL,
  `ATTRIBUTE14` varchar(240) DEFAULT NULL,
  `ATTRIBUTE15` varchar(240) DEFAULT NULL,
  PRIMARY KEY (`ACCESS_ID`),
  UNIQUE KEY `wht_hec_20500_org_ACCESS_U1` (`ORG_TYPE`,`ORG_ID`,`FUNCTION_ID`,`ROLE_ID`),
  KEY `wht_hec_20500_org_ACCESS_N1` (`ORG_TYPE`),
  KEY `wht_hec_20500_org_ACCESS_N2` (`ROLE_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='组织访问权限表';

wht_hec_20500_org_access_t1数据表（用于支持多语言）：

CREATE TABLE `wht_hec_20500_org_access_tl` (
  `ACCESS_ID` bigint(20) NOT NULL,
  `LANG` varchar(50) NOT NULL,
  `ACCESS_NAME` varchar(100) DEFAULT NULL COMMENT '访问名称',
  `DESCRIPTION` varchar(255) DEFAULT NULL COMMENT '访问描述',
  `OBJECT_VERSION_NUMBER` bigint(20) DEFAULT '1',
  `REQUEST_ID` bigint(20) DEFAULT '-1',
  `PROGRAM_ID` bigint(20) DEFAULT '-1',
  `CREATED_BY` bigint(20) DEFAULT '-1',
  `CREATION_DATE` datetime DEFAULT CURRENT_TIMESTAMP,
  `LAST_UPDATED_BY` bigint(20) DEFAULT '-1',
  `LAST_UPDATE_DATE` datetime DEFAULT CURRENT_TIMESTAMP,
  `LAST_UPDATE_LOGIN` bigint(20) DEFAULT '-1',
  PRIMARY KEY (`ACCESS_ID`,`LANG`),
  KEY `wht_hec_20500_org_ACCESS_TL_N1` (`ACCESS_NAME`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

一、多语言输入

要求组织访问名称与描述字段支持多语言输入：

第一步、在对应表的dto层，表头上添加注解@MultiLanguage

第二步、在相应字段上添加注解 @MultiLanguageField

第三步、在相应的前端页面里的描述字段下添加如下代码

editor: function (container, options) {
                    $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoTLEdit({
                            idField: 'accessId',
                            field: 'accessName',
                            dto: "wht.hec20500.dto.Hec20500OrgAccess",
                            model: options.model
                        });
                }

效果截图：

二、模糊查询

要求：查询条件组织访问名称支持模糊查询

第一步、在相应字段实体层添加注解

@Condition(operator = "like")

第二步、在前端添加输入框，并绑定数据

<input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;"
               placeholder='<@spring.message "Hec20500OrgAccess.accessName"/>'
               data-bind="value:model.accessName" class="k-textbox">

效果截图：

三、必填项设置

要求：组织访问名称，组织类型，组织名称设置为必填项

直接在前端页面的对应字段描述下添加如下属性

accessName: {
    validation: {
        required: true
        // type:"string"
                }
           },
orgType: {
    validation: {
        required: true
                }
         },
orgId: {
    validation: {
        required: true
                }
       }

效果截图：

四、自定义查询语句

请查看我的另一篇文章https://blog.csdn.net/qq_39331713/article/details/81226319（HAP框架-自己写查询语句）

五、日期型控件的使用

要求：开始日期和结束日期以日期字段显示（结束日期必须在开始日期之后）

第一步、给相应字段添加如下属性：

startDate: {
    type: "date"
         },
endDate: {
    type: "date"
         }

第二步、在对应字段描述下添加如下代码：

{
                field: "startDate",
                title: '<@spring.message "hec20500orgaccess.startdate"/>',//开始时间
                width: 120,
                format: "{0:yyyy-MM-dd}",
                editor: function (container, options) {
                    var end = options.model.endDate;
                    var opts = {
                        format: "yyyy-MM-dd"
                    };
                    if (end) {
                        opts.max = end;
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDatePicker(opts);
                }
            },
            {
                field: "endDate",
                title: '<@spring.message "hec20500orgaccess.enddate"/>',//结束时间
                width: 120,
                format: "{0:yyyy-MM-dd}",
                editor: function(container, options){
                    var start = options.model.startDate;
                    var opts={
                        format:"yyyy-MM-dd"
                    };
                    //设置min属性 限制最⼩的可选⽇期
                    if(start){
                        opts.min=start;
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDatePicker(opts);
                }
            }

效果截图：

结束时间必须大于开始时间

六、 DropDownList 控件的使用

要求：组织类型字段以DropDownList实现

第一步、添加数据来源(Json)

<script src="${base.contextPath}/common/code?orgTypeData=SYS.UNIT_TYPE"
        type="text/javascript">
</script>
<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid", {
        orgTypeData: orgTypeData,
    });
</script>

第二步、在相应字段描述下添加如下代码

{
                field: "orgType",
                title: '<@spring.message "hec20500orgaccess.orgtype"/>',//组织类型
                width: 120,
                template: function (dataItem) {
                    var v = dataItem.orgType;
                    $.each(orgTypeData, function (i, n) {
                        if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
                            v = n.meaning;
                            return v;
                        }
                    });
                    return v;
                },
                editor: function (container, options) {
                    $('<input name = "' + options.field
                        + '"/>').appendTo(container).kendoDropDownList({
                        dataTextField: "meaning",
                        dataValueField: "value",
                        dataSource: orgTypeData,
                        change: function () {
                            // 在change事件中设置lovCode的值，并清空lov表单元素的值
                            options.model.set('orgType', this.value());
                        }
                    });
                }
            },

效果截图：

七、LOV控件的使用

要求：组织名称，角色，用户字段用LOV控件实现

第一步、添加自定义的LOV

格式如下：

第二步、在对应字段描述下添加如下代码

editor: function (container, options) {
                    $('<input name="'+ options.field +'" />').appendTo(container)
                        .kendoLov($.extend(<@lov "LOV_ORG_UNIT" />, {
                        query: function (e) {
                            e.param['enableFlag'] = 'Y';
                        },
                        select: function (e) {
                            // 将选择后的属性更新到数据模型中以保存
                            options.model.set('orgId', e.item.unitId);
                        },
                        textField: 'orgName', /* 编辑器显示的值 */
                        model: options.model
                    }));
                }

第三步、在dto中添加另一个表中的字段，并生成get,set方法

public static final String FIELD_ORG_NAME = "orgName";


@Transient
private String orgName;//访问名称，不要忘了添加注解



public String getOrgName() {
        return orgName;
    }

    public void setOrgName(String orgName) {
        this.orgName = orgName;
    }

第四步、修改配置文件中的查询语句

<result column="ORG_NAME" property="orgName" jdbcType="VARCHAR"/>




<select id="selectOrgAccessByOrder" resultMap="BaseResultMap"
            parameterType="wht.hec20500.dto.Hec20500OrgAccess">
        SELECT a.ACCESS_NAME,
        a.DESCRIPTION,
        a.ORG_TYPE,
        a.ORG_ID,
        b.name as orgName,
        a.ROLE_ID,
        c.role_name as roleName,
        a.USER_ID,
        d.user_name as userName,
        a.START_DATE,
        a.END_DATE
        FROM wht_hec_20500_org_access_b a,
              hr_org_unit_b b,
              sys_role_b c,
              sys_user d
        <where>
            a.org_id = b.unit_id
            and a.role_id = c.role_id
            and a.user_id = d.user_id
            <if test="accessName != null">
                and a.ACCESS_NAME LIKE concat(concat("%",#{accessName,jdbcType=VARCHAR}),"%")
            </if>
            <if test="orgType != null">
                and a.ORG_TYPE = #{orgType,jdbcType=VARCHAR}
            </if>
        </where>
        ORDER BY a.ACCESS_NAME
    </select>

注意：在这里只演示了如何自定义组织名称的LOV控件，角色和用户的LOV控件系统已经定义好了，直接调用就行，方法同上。

效果截图：

HAP前端页面学习总结

猜你喜欢