组合插件、带角标的待办/已办插件配置

配置效果：

组合插件配置效果

这个效果是用首页设置中-组合插件添加列表进行配置的，除了待办已办之外，系统中所有列表数据都可以用组合插件添加列表插件在首页进行展示，配置方法如下

配置方法：

1.添加组合插件

进入系统设置→首页设置→勾选方案设置插件→添加组合插件→添加后点击设置组合插件

在组合插件中添加列表插件（PS.目前组合插件中支持展示三类内容，仪表板图形分析/计数组件/列表）

2.列表插件展示内容配置

通过首页直接添加和组合插件添加的列表插件，配置方式都相同

列表插件展示的内容，由咱们选择的模型场景决定，所以需要配置的重中之重就是插件的名称、模型、场景

名称：列表插件的展示名称（在组合插件中为tab的文字内容）

列表模型：根据数据需要填写

列表场景：根据数据需要填写（注意，在首页展示列表数据时，通常对列表的样式有一些特殊要求，比如不展示过滤条件等，建议继承数据场景新增一个首页专用场景，便于配置首页专用样式，常用样式配置在下方附文中有参考）

过滤条件：对场景中需要展示的数据进行过滤，无需要可不配置

操作定义：点击组合插件当前tab右上角按钮的定义，包括按钮展示名称\跳转链接，无需要可不配置

操作定义配置示例：”common_model_category_list“是页面场景，"model"、"meta_state"是数据对应的模型场景

{
    "key": "index_0",
    "func": "=function() {rootScope.super_go('common_model_category_list', {meta_state: 'todoMessage', model: 'Message'})}",
    "label": "更多"
}

整体示例配置及效果：

附：

1)常用首页的列表插件list_config样式参考(配置在列表插件对应的模型场景中)，注意middle_left_area和middle_right_area对应的字段key根据需要进行替换

样式：

  "list_config": {
        "view": {
            "pc": "homepage"
        },
        "customCellClass": "=function(_row,_col){return 'flex-h-space'}",
        "homepage_meta": {
            "hide_label": true,
            "border_bottom_hide": true,
            "content": {
                "showPoint": [
                    "middle_left_area"
                ],
                "middle_left_area": [{
                    "class": "font-12 one-ellipsis flex-1-1-auto ellipsis-text",
                    "key": "content"
                }],
                "middle_right_area": [{
                    "class": "font-12 gray-600 margin-12",
                    "key": "send_date",
                    "type": "timeFormatTwo"
                }]
            },
            "class": {
                "middle_left_area": "flex-1-1-auto ellipsis-text flex-nowrap",
                "middle_right_area": "ellipsis-text flex-0-0-auto"
            },
            "dynamic_template": true
        },
        "paging": {
            "page_size": 10
        }
    },

2)调整homepage模板行高的个性化样式

/*调整homepage模板列表行高*/
.hc-list-homepage .row-container .row.border-bottom-hide{
        min-height: 44px;
    padding: 0 16px;
}

3)将WarnMessage模型的列表数据配置在首页时，需要在场景中补充跳转按钮配置

"actions": [{
        "key": "go_warn",
        "action": [{
                "key": "warnEdit",
                "action": "CALL_API",
                "options": {
                    "api": "warn.message.edit",
                    "params": {
                        "id_": "expression[GET(SELECT_ITEM(),['id'])]",
                        "info": {
                            "status": 2
                        }
                    }
                }
            },
            {
                "key": "super_go",
                "action": "GO_STATE",
                "options": {
                    "state": "expression[STR_SLICE(GET(SELECT_ITEM(),['state','url']), 1)]",
                    "params": "expression[GET(SELECT_ITEM(),['state','param'])]"
                }
            }
        ],
        "default": true,
        "hide": true
    }]

4)点击打开流程单据弹窗按钮

{
        "key": "workflow_bill_v3",
        "action": "CUSTOM_DIALOG",
        "hide": true,
        "default": true,
        "options": {
            "dialog_func_param": "=function(_item, _env) {return {'business_id': _item.business_id}}",
            "direct_params": true,
            "ctrl": "WorkflowDetailNewInfoDialogCtrl",
            "data": "=function(_item, _env) {return {'mode':'view', 'business_id': _item.business_id, 'wf_inst_id': _item.id}}"
        }
    }

3.配置分页的角标（不需要角标可以不配置）

tab角标数量是需要才进行展示，所以需要进行一下特殊配置

到待办对应的Message模型下，homepage场景中，将如下内容粘贴到list元数据的hooks里：

 "hooks": {
        "getExtraFilterDict": "=function(){return {to: SCOPE.auth.employee.id, status: 2} }",
        "afterFetchDataAsync": "=function(){let undone, done;let state;let filter = SCOPE.getAllFilterDict();if (filter?.status === 1) {filter.status = 2;state = 'homepagedone'} else if (filter?.status === 2) {filter.status = 1;state = 'homepageundone'};dataService.callHcmOpenApi('hcm.model.list', {model: 'WarnMessage',filter_dict: filter,page_index: 1,page_size: 200,extra_property: {state: state,only_list: false},biz_type: 'list',}, null, null, true).then((data) => {if (filter?.status === 1) {undone = data.count;done = SCOPE.paging.total_count;} else if (filter?.status === 2) {done = data.count;undone = SCOPE.paging.total_count;};done = done > 99 ? '99+' : done;undone = undone > 99 ? '99+' : undone;let element1 = document.createElement('div');element1.innerHTML=`<div class='unread'>${done}</div>`;if(!ELEMENT.closest('home-widget-common-container').find('.postscript')[0].hasChildNodes()) {ELEMENT.closest('home-widget-common-container').find('.postscript')[0].append(element1);} else {ELEMENT.closest('home-widget-common-container').find('.unread')[0].innerHTML = done;}});}"
    },

还不清楚配置在哪里的看图~

细心的同学可能发现了，上面的代码中只有undone返回了，没有返回done，那这是什么原因呢？

因为从实用性普适性等方面来讲，大多数情况下只需要知道待办的角标。如果老板有需要看看自己的已办成就角标，就可以返回加上done，

即将 WINDOW.postMessage({undone: undone，done: done});

同时加上

if(done === 0) {

done=' '

};

页面树结构