多页签插件及列表插件配置

配置效果：

配置效果（多页签插件+列表插件+配置角标）

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

配置方法：

1.添加多页签插件

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

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

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

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

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

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

列表模型：根据数据需要填写（待办已办的模型为Message）

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

过滤条件：对场景中需要展示的数据进行过滤，无需要可不配置（待办已办的过滤条件为Message模型中的 "is_task_done"字段，待办对应的状态是1，已办对应的状态是2）

高级查询：快速过滤模型中的数据，根据需要选择

操作定义：点击多页签插件当前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样式

homepage样式，配置参考如下(配置在列表插件对应的模型list场景元数据中)，注意middle_left_area和middle_right_area对应的字段key根据需要进行替换

样式：

  "list_config": {
       "hideComponents": [
            "hcm-foot",
            "hcm-content-indicator"
         ],
     "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)如果点击待办已办列表的流程类数据没有反应，或出现空白弹窗，需要在场景list元数据配置点击打开流程单据弹窗按钮

{
        "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=' '

};

附：多页签插件支持3种切换选择样式，分别为：

1、仅配置子标题，不配置多页签插件大标题样式（无特殊配置）

2、同时配置多页签插件标题+子标题样式1（无特殊配置）

3、同时配置多页签插件标题+子标题样式2（需特殊配置，options中配置config: {radio_style: true}）

页面树结构