HAP前端页面学习总结

深藏阁楼爱情的钟 2022-05-18 02:19 243阅读 0赞

用到的数据表脚本如下：

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

![70][]

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

![70 1][]

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

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

效果截图：

![70 2][]

**二、模糊查询**

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

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

@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">

效果截图：

![70 3][]

**三、必填项设置**

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

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

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

效果截图：

![70 4][]

**四、 自定义查询语句**

请查看我的另一篇文章[https://blog.csdn.net/qq\_39331713/article/details/81226319][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);
                    }
                }

效果截图：

![70 5][]

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

![70 6][]

**六、 DropDownList 控件的使用**

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

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

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

{
                    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());
                            }
                        });
                    }
                },

效果截图：

![70 7][]

**七、LOV控件的使用**

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

第一步、添加自定义的LOV

格式如下：

![70 8][]

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

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控件系统已经定义好了，直接调用就行，方法同上。

效果截图：

![70 9][]

[70]: /images/20220518/abfb9e5f78bb4deb9b9ae622644d1453.png
[70 1]: /images/20220518/6c81575048da41ccaefb35736e3791d2.png
[70 2]: /images/20220518/10af553bc7c842b28bae891eb45353ed.png
[70 3]: /images/20220518/c8456d64771f4a3fb17687db47bd6f8c.png
[70 4]: /images/20220518/02076c12b6814a98b02bc14388f97be2.png
[https_blog.csdn.net_qq_39331713_article_details_81226319]: https://blog.csdn.net/qq_39331713/article/details/81226319
[70 5]: /images/20220518/fb134e787a5f4ccf89e25f0d4260c267.png
[70 6]: /images/20220518/b770856161424fe79229c3993348a2e1.png
[70 7]: /images/20220518/6dc9127e13b745009ed090f5f815128f.png
[70 8]: /images/20220518/800364a68fb6432b81c6de1bec9cc38c.png
[70 9]: /images/20220518/fd9fdf4cae2f4c30b336f4859ffe63d5.png