1.common_model_list    通用列表界面

参考链接（培训测试 (hcmcloud.com)）

参数说明:

参数类型说明
modelstring模型名
meta_statestring模型场景，建议不为空。否则在该页面的所有权限配置、字段属性、关联配置会生效到最底层的json


2.common_model_tree_list    左树右列表页面

参考链接：https://mingcloud.hcmcloud.com/#/common_model_tree_list?model=JobInformation&page_index=1&page_size=20&meta_state=cus&tree_id=14438925&advance_filter_dict=%7B%7D&show_fields_key=%5B%22action_id%22,%22action_reason_id%22,%22begin_date%22%5D

配置左树右列表的页面只需在元数据配置中按照如下定义即可。

参数类型说明
modelstring模型名
meta_statestring模型场景，建议不为空。否则在该页面的所有权限配置、字段属性、关联配置会生效到最底层的json


之后需要在该list场景中配置tree属性，否则选中左侧组织树的时候过滤不生效

tree属性配置详见：common_model_tree_list 中 tree 配置说明

配置左树右列表主要是配置tree属性中的tree_key的配置

key可以是模型的字段，或者是关联出来的字段.

比如模型上有组织id,那么直接用组织id的key即可，例如depart_id

如果模型上没有组织id,只有人员id,那么就配置relations,用人员id关联出岗位部门，tree_key的配置用关联出来的字段,例如position.parent_id。

3.common_model_category_list    左过滤项右列表页面


参考链接人员基础信息 (hcmcloud.com)

现在支持设置过滤条件的位置  详情请看 HCM CLOUD 前端框架规范和使用说明

参数说明:该参数是在url上的参数




modelstring功能模型名称
category_fieldstring

过滤字段key值

详细说明：
可将list数据中的某一字段作为左侧的过滤条件。

支持如下三种形式，即下拉选项（需在.json中能获取到）：

  • object
  • refer
  • mask


2.页面内的元数据配置




category_type

string

nav:左侧纵向

tabs:上侧横向

category_close_all

boolean是否关闭全部




4.common_model_view       

从list界面点击单条数据时跳转到该界面

common_model_view_base

(参考链接：https://mingcloud.hcmcloud.com/#/common_model_view/base?key=Employee&model=Employee&id=2253739)

参数说明:




idint具体数据id
modelstring功能模型名称
base_object_strstring

功能模型名称（业务重定义，service层模型名称，例人员信息界面，通过employee.list方式获取数据，则传employee）

base_object_str，model只用填写一个

meta_state
string场景名称





common_model_view_single 

(参考链接：https://mingcloud.hcmcloud.com/#/common_model_view/single?id=2253739&model=Employee&c_model=ContactInformation&parent_field=employee_id&caption=%E8%81%94%E7%B3%BB%E4%BF%A1%E6%81%AF)

参数说明:




idint具体数据id
modelstring功能模型名称
base_object_strstring

功能模型名称（业务重定义，service层模型名称，例人员信息界面，通过employee.list方式获取数据，则传employee）

base_object_str，model只用填写一个

meta_state
string场景名称
c_modelstring子集模型名称
parent_field
string跟主集id关联的字段
caption
string功能名称，配置base.json，会自动带出





common_model_view_multi

参数说明:跟common_model_view_single一致

(参考链接：https://mingcloud.hcmcloud.com/#/common_model_view/multi?c_model=JobInformationMaster&advance_filter_dict=%7B%7D&model=Employee&id=2253739)




5.common_model_nav    通用切换页面

参考链接：https://mingcloud.hcmcloud.com/#/common_model_nav/multi?c_model=test&caption=%E5%9F%B9%E8%AE%AD%E6%B5%8B%E8%AF%95&advance_filter_dict=%7B%7D&key=test&model=test


参数说明（tip：链接参数根据base.json文件配置后自动带出【配置说明】）




modelString模型
keyStringkey值
labelString名称
jump_stateString

要跳转页面的state
常用state配置：

common_model_list

common_model_tree_list

common_model_category_list


common_model_view

tip:配置时需配置子界面state

{

common_model_view_base

common_model_view_single

common_model_view_multi

}


访问链接common_model_nav


jump_optionsJSON{"location":true} 该属性常用于跳转至新页面 即新页面无左侧菜单的情况 配置后在新页面使用浏览器的返回会返回至common_model_nav页面 
paramsJSON传递的参数
viewString模式 （目前只支持multi）
iconString图标
listArray二级页面的配置信息
no_modelBool父页面是否需要跳转


6.common_model_waterfall_view瀑布流主子集页面

瀑布流页面继承自主子页面，使用Base元数据进行配置，子集的配置方法类似，其中特殊的属性如下：

瀑布流页面专用属性
序号名称类型说明 扩展
1childsjson子集相关配置
序号名称类型说明
1tipstring

配置tip文本，这个tip会以图标的形式显示在自己标题旁边（仅pc）

2default_foldboolean子集是否默认折叠：首次加载页面时配置为true的子集会默认折叠起来
3no_data_foldboolean

对于multi类型的子集，在列表没有数据的情况下折叠起来，节省空间

4hide_titleboolean如果某个子集不需要显示标题可以配置这个参数为true
2base_configjsonbase主集配置项
序号名称类型说明
1top_titlestring

页面头部区域可配置的标题

2top_descriptionstring

显示在头部区域按钮左侧的额外信息

3nav_positionstring

导航栏摆放位置left/right，默认左侧

4lazyLoadboolean

是否开启页面懒加载，开启后子集默认加载4个(可以通过配置修改)，之后随着页面

滚动逐步加载子集，在子集过多的情况下可以优化首次加载速度

5show_componentsnumber

与lazyLoad参数配合使用，配置首次加载组件个数，默认值是4

6nav_default_foldboolean

当导航栏存在多级时，控制是否默认折叠

配置为false或者未配置：                                                 配置为true:

                     

7
attachment
object

配置导航栏后方显示内容

接口取数定义：

名称类型说明
api_name
string/function调用的接口名
api_params
object/function

接口所需要的参数，如果配置function,第一个形参传递的是$scope.getEnvironmentParams()，如图:

最终需要接口返回的格式是：

返回值格式
[
    {
        "key": "child1",  // 与base元数据中childs子集的key一一对应，前端代码会根据这个key找到对应子集，并将attachment的内容附在相应子集后面
        "attachment": {
            "label": "已完成",  // attachment显示的内容
            "class": "validate-complete"   // 样式类名，支持三个值"validate-confirm","validate-not-complete","validate-complete"
        }
    },{
        "key": "child2",
        "attachment": {
            "label": "12233"
        }
    },{
        "key": "child3",
        "attachment": {
            "label": "11"
        }
    }
]

显示数字效果(使用validate-complete类的样式):

显示数字的效果(未使用任何class):

显示文字的效果(使用validate-not-complete类的样式):

7.基于base元数据的导航步骤条

通过配置base元数据可以将多个页面组合到一起，形成步骤条导航，提供以下两种样式：

navigate样式

steps样式（默认）

使用这个步骤条需要在发布应用或者配置super_go跳转页面时在路由参数上增加nav_model和nav_meta_state

例：

发布应用的情况

比如导航的第一步是list页面，那么场景配置common_model_list，参数除了正常list页面需要的model、meta_state外，

还要额外配置nav_model和nav_meta_state以渲染导航栏

所以最终应用的url应该是/common_model_list?model=U_Employee&meta_state=all&nav_model=U_Salary_Guide&nav_meta_state=guide

以上是创建应用时的方法，之后我们需要就需要去U_Salary_Guide的base元数据中完成对每一个步骤的定义。

U_Salary_Guide.meta.base.guide.json
 {
    "actions": [],
    "base": {
        "key": "base",
        "hide": true
    },
    "childs": [
        {
            "key": "child1"
            "label":  "子集1"
            "jump_state":  "common_model_list" // 子集跳转时必须使用jump_state模式，不能通过"view": "multi"定义子集
             "params": {
                "model": "U_Employee",
                "meta_state": "all", 
                "nav_model": "U_Salary_Guide",   // 子集跳转时必须带上nav_model&nav_meta_state
                "nav_meta_state": "guide"
            }
            "status":  "finish/process" //  处理节点状态
        },
        {
            "key": "child2"
            "label":  "子集2"
            "jump_state":  "common_model_view_multi"
            "params": {
                "model": "U_Employee",
                "c_model": "U_Employee_education"
                "meta_state": "all", 
                "nav_model": "U_Salary_Guide", 
                "nav_meta_state": "guide"
            }
            "status":  "finish/process",
            "nav_name": "common_model_view",   // 步骤页面是common_model_view时的特殊处理参数
            "params_key": ["model", "nav_state"]
        } 
    ],
    "base_config": {
        "navigation": {  // 必须配置项，开启导航
            "type": "steps",   // 导航栏样式，navigate/steps，样式如上图
            "stepsLength": 4  // 一页显示的步骤数量，默认5
        }
    },
    "model": "U_Salary_Guide",
    "state": "guide"
}

特别注意

1. 配置childs中的子集跳转时要使用jump_state参数，不能使用view

√                                              X

2.如果步骤中有页面是主子集页面common_model_view/common_model_nav，需要额外配置nav_name和params_key两个参数，否则可能导致页面刷新后导航栏消失

名称类型说明
nav_namestring主子页面路由名，根据配置的主子页面类型，值可能为common_model_view或common_model_nav
params_keyarray可以作为标识的属性名列表，一般配置['model', 'nav_state']即可

2.1 进阶使用

1. 节点状态维护

如果是steps样式则不需要特殊维护，在切换到下一个页面时，之前的页面自动变成完成状态，如图:

如果需要手动维护节点状态：

1.首先可以通过base元数据中的status属性赋予节点初始状态

 "childs": [
        {
            "key": "child1"
            "label":  "子集1"
            "jump_state":  "common_model_list" // 子集跳转时必须使用jump_state模式，不能通过"view": "multi"定义子集
             "params": {
                "model": "U_Employee",
                "meta_state": "all", 
                "nav_model": "U_Salary_Guide",   // 子集跳转时必须带上nav_model&nav_meta_state
                "nav_meta_state": "guide"
            }
            "status":  "finish/process" //  处理节点状态
        } 
    ]

如图所示，首次进入时前两个页面是已完成状态，第三个步骤是进行中状态，后面的是未完成状态

2. 步骤进行中可以在子集中配置一个类似下图的按钮，先改变节点状态，然后super_go跳转下一个步骤：

通过改变SCOPE.hcm_navigation_items中对应子集的status值来改变节点状态，可改变状态有两种process/finish

在function的最后要调用setTimeout(()=>{SCOPE.setNavigationCurrent()}, 1000)})刷新导航栏状态

{
    "key": "next",
    "label": "下一步",
    "confirm": true,
    "confirm_tip": "确认本步骤已完成？",
    "func": "=function(){SCOPE.hcm_navigation_items.[key].status='process'; SCOPE.super_go('Next',{..params}); setTimeout(()=>{SCOPE.setNavigationCurrent()}, 1000)});}"
}

3.如果需要在标题右侧显示数字，可参考上一节瀑布流主子页面中attachment的配置方法


8.common_model_search_list页面

链接参考：https://hcm-release.hcmcloud.com/#/common_model_search_list?model=U_MainDimension_test&meta_state=test

参数说明:

参数类型说明
modelstring模型名
meta_statestring模型场景，建议不为空。否则在该页面的所有权限配置、字段属性、关联配置会生效到最底层的json

  • 无标签