如何实现点击切换单据列表，类似标品的页签控件

接到用户需求，需要实现下图效果

其实可以直接用标品的页签控件实现，就像这样：

无奈客户还是想要上面的样式......

切换单据列表用代码好做，主要困难点在前端，这篇文章权作记录，方便以后有类似需求可以参考参考。

代码实现

主要是监听导航栏的点击事件，打开不同的单据列表，然后updateControlMetadata方法更新被点击控件和未被点击控件的自定义样式。

/**
 * $ > div:first-child {
 *   background:#0285ff;
 *   color:#fff;
 * }
 * $ > div:last-child {
 *   border-left-color:#0285ff !important;
 * }
 */
public static final String CUSTOM_CLICK_TYPE="eyJ0eXBlIjowLCJjb250ZW50IjoiwqAvKiogXG4qIOagt+S+i1xuKiDmlK/mjIHljp/nlJ9jc3PmoLflvI/lhpnms5Vcbiog5b2T5YmN5YWD57Sg55qEY2xhc3NOYW1l5L2/55SoIFwiJFwiIOS7o+abv++8jOS4jeaUr+aMgeiHquWumuS5ieWFg+e0oGNsYXNzTmFtZVxuKiDnm67liY3mj5DkvpvkuInkuKrmoLfmnb/vvIzmiZPlvIDms6jph4rljbPlj6/kvb/nlKhcbiog5rOo6YeK5YaF5a655Lya6KKr6L+H5ruk5LiN5bGV56S6XG4qIOWmgumcgOS9v+eUqOW5s+WPsOS4u+mimOiJsu+8jOWPr+S7peS9v+eUqCd0aGVtZUNvbG9yJ+adpeS7o+aMh1xuICovXG4vKipcbiog5b2T5YmN5YWD57Sg6IOM5pmv6aKc6Imy6Lef6ZqP5Li76aKY6ImyXG4qL1xuLyoqXG4kIHtcbsKgwqBiYWNrZ3JvdW5kOid0aGVtZUNvbG9yJztcbsKgfVxuKi9cbsKgLyoqXG4qIOS/ruaUueW9k+WJjeWFg+e0oOiDjOaZr+minOiJslxuKi9cbi8qKlxuJCB7XG7CoMKgYmFja2dyb3VuZDpyZWQ7XG7CoH1cbiovXG7CoC8qKlxuKiDkv67mlLnlvZPliY3lhYPntKBob3ZlcuaViOaenFxuwqAgKi9cbi8qKlxuJDpob3ZlciB7XG7CoMKgYmFja2dyb3VuZDpyZWQ7XG7CoH1cbiovXG4vKipcbiAqIOS/ruaUueW9k+WJjeWFg+e0oOS4umRpduagh+etvuWtkOWFg+e0oFxuKi9cbi8qKlxuJCA+IGRpdiB7XG7CoGJhY2tncm91bmQ6cmVkO1xuwqB9XG4gKi9cbiQgPiBkaXY6Zmlyc3QtY2hpbGQge1xuwqAgYmFja2dyb3VuZDojMDI4NWZmO1xuICBjb2xvcjojZmZmO1xufVxuJCA+IGRpdjpsYXN0LWNoaWxkIHtcbsKgIGJvcmRlci1sZWZ0LWNvbG9yOiMwMjg1ZmYgIWltcG9ydGFudDtcbn0ifQ==";
/**
 * $ > div:first-child {
 *   background:#e6f6ff;
 * }
 * $ > div:last-child {
 *   border-left-color:#ffffff !important;
 * }
 */
public static final String CUSTOM_NOTCLICK_TYPE="eyJ0eXBlIjowLCJjb250ZW50IjoiwqAvKiogXG4qIOagt+S+i1xuKiDmlK/mjIHljp/nlJ9jc3PmoLflvI/lhpnms5Vcbiog5b2T5YmN5YWD57Sg55qEY2xhc3NOYW1l5L2/55SoIFwiJFwiIOS7o+abv++8jOS4jeaUr+aMgeiHquWumuS5ieWFg+e0oGNsYXNzTmFtZVxuKiDnm67liY3mj5DkvpvkuInkuKrmoLfmnb/vvIzmiZPlvIDms6jph4rljbPlj6/kvb/nlKhcbiog5rOo6YeK5YaF5a655Lya6KKr6L+H5ruk5LiN5bGV56S6XG4qIOWmgumcgOS9v+eUqOW5s+WPsOS4u+mimOiJsu+8jOWPr+S7peS9v+eUqCd0aGVtZUNvbG9yJ+adpeS7o+aMh1xuICovXG4vKipcbiog5b2T5YmN5YWD57Sg6IOM5pmv6aKc6Imy6Lef6ZqP5Li76aKY6ImyXG4qL1xuLyoqXG4kIHtcbsKgwqBiYWNrZ3JvdW5kOid0aGVtZUNvbG9yJztcbsKgfVxuKi9cbsKgLyoqXG4qIOS/ruaUueW9k+WJjeWFg+e0oOiDjOaZr+minOiJslxuKi9cbi8qKlxuJCB7XG7CoMKgYmFja2dyb3VuZDpyZWQ7XG7CoH1cbiovXG7CoC8qKlxuKiDkv67mlLnlvZPliY3lhYPntKBob3ZlcuaViOaenFxuwqAgKi9cbi8qKlxuJDpob3ZlciB7XG7CoMKgYmFja2dyb3VuZDpyZWQ7XG7CoH1cbiovXG4vKipcbiAqIOS/ruaUueW9k+WJjeWFg+e0oOS4umRpduagh+etvuWtkOWFg+e0oFxuKi9cbi8qKlxuJCA+IGRpdiB7XG7CoGJhY2tncm91bmQ6cmVkO1xuwqB9XG4gKi9cbiQgPiBkaXY6Zmlyc3QtY2hpbGQge1xuwqAgYmFja2dyb3VuZDojZmZmZmZmO1xufVxuJCA+IGRpdjpsYXN0LWNoaWxkIHtcbsKgIGJvcmRlci1sZWZ0LWNvbG9yOiNmZmZmZmYgIWltcG9ydGFudDtcbn0ifQ==";

/**
* flex面板和单据列表表单标识的映射
*/
private static final Map<String,String> PANEL_BILL_MAP = new HashMap<String,String>(){{
    put("a2h6_flexpanel1","hom_onbrdbreakupreason");
    put("a2h6_flexpanel2","hom_onbrdbreakuptype");
    put("a2h6_flexpanel3","hom_placeentry");
    put("a2h6_flexpanel4","hom_standardfield");
    put("a2h6_flexpanel5","hom_testfield");
}};

@Override
public void registerListener(EventObject e) {
    super.registerListener(e);
    this.addClickListeners(PANEL_BILL_MAP.keySet().toArray(new String[]{}));
}

@Override
public void click(EventObject evt) {
    super.click(evt);
    Control ctl = (Control) evt.getSource();
    String key = ctl.getKey();
    changeNodeStyle(key);
    showBillListPage(key);
}

@Override
public void afterBindData(EventObject e) {
    super.afterBindData(e);
    String defaultKey = "a2h6_flexpanel1";
    changeNodeStyle(defaultKey);
    showBillListPage(defaultKey);
}

private void showBillListPage(String key) {
    ListShowParameter listShowParameter = new ListShowParameter();
    listShowParameter.setBillFormId(PANEL_BILL_MAP.get(key));
    listShowParameter.setFormId("bos_list");
    listShowParameter.getOpenStyle().setShowType(ShowType.InContainer);
    listShowParameter.getOpenStyle().setTargetKey("a2h6_flexpanelbill");
    this.getView().showForm(listShowParameter);
}


private void changeNodeStyle(String key) {
    Map<String, Object> clickMap = new HashMap<>();
    clickMap.put(ClientProperties.Custome_Styles, CUSTOM_CLICK_TYPE);
    this.getView().updateControlMetadata(key, clickMap);

    Map<String, Object> notClickMap = new HashMap<>();
    notClickMap.put(ClientProperties.Custome_Styles, CUSTOM_NOTCLICK_TYPE);
    for (Map.Entry<String, String> entry : PANEL_BILL_MAP.entrySet()) {
        if (!entry.getKey().equals(key)){
            this.getView().updateControlMetadata(entry.getKey(), notClickMap);
        }
    }
}

这里CUSTOM_CLICK_TYPE和CUSTOM_NOTCLICK_TYPE字符串就是自定义样式设置好之后展示的那串

实现效果如图：