列表卡片视图中显示动态下拉列表

关键词：列表、卡片视图、动态下拉列表

一、需求

       表单上的“折扣力度”字段的下拉值是根据“是否折扣”的值动态变化。当“是否折扣”字段值是小折扣时，折扣力度下拉值选项为8折和9折；当“是否折扣”字段值是大折扣时，折扣力度是5折和6折。同时要在列表的卡片视图中显示“是否折扣”和“折扣力度”这两个字段。

二、思路与方案

• 表单动态设置下拉列表选项在表单加载事件beforeBindData和值更新事件propertyChanged两个时机中，通过kd.bos.form.field.ComboEdit#setComboItems设置要显示的下拉项即可

• 列表卡片视图中要显示动态下拉列表的数据，直接卡片视图中添加字段，预览会显示动态下拉列表字段值为空（实际数据库有值）。这是因为后台返回卡片视图的元数据信息中，下拉项为空。

        对于列表卡片视图显示动态下拉列表无法显示问题，有两个解决方案：如下蓝色部分

（1）二开插件直接发送action指令给前端返回卡片视图的数据。（如卡片视图中涉及的元数据变更，则需要重新编码，维护成本高）

（2）表单中添加动态下拉列表的选项的并集（如下拉列表选项数据无法预知，该方案则不适应）

三、实现过程

       首先，动态设置表单中下拉列表选项的代码如下：

public class ReqEditPlugin extends AbstractBillPlugIn implements Plugin {
    @Override
    public void beforeBindData(EventObject e) {
        String kdecStaticcombofield = (String) this.getModel().getValue("kdec_staticcombofield");
        if (kdecStaticcombofield!=null&&!kdecStaticcombofield.equals("c")) {
            setDiscount(kdecStaticcombofield);
        } else {
            this.getView().setVisible(false, "kdec_trendscombofield");
        }
        super.beforeBindData(e);

    }

    @Override
    public void propertyChanged(PropertyChangedArgs e) {
        if (e.getProperty().getName().equals("kdec_staticcombofield")) {
            String newValue = (String) e.getChangeSet()[0].getNewValue();
            if (!newValue.equals("c")) {
                setDiscount(newValue);
            } else {
                this.getView().setVisible(false, "kdec_trendscombofield");
            }
        }
        super.propertyChanged(e);
    }

    public void setDiscount(String kdecStaticcombofield) {
        this.getView().setVisible(true, "kdec_trendscombofield");
        List<ComboItem> comboItems = new ArrayList<>();
        if (kdecStaticcombofield.equals("a")) {//小折扣
            // 构造下拉项，输入标题和值
            ComboItem comboItem = new ComboItem();
            comboItem.setCaption(new LocaleString("8折"));
            comboItem.setValue("8");
            comboItems.add(comboItem);

            ComboItem comboItem2 = new ComboItem();
            comboItem2.setCaption(new LocaleString("9折"));
            comboItem2.setValue("9");
            comboItems.add(comboItem2);
        }else if (kdecStaticcombofield.equals("b")) {//大折扣
            // 构造下拉项，输入标题和值
            ComboItem comboItem = new ComboItem();
            comboItem.setCaption(new LocaleString("5折"));
            comboItem.setValue("5");
            comboItems.add(comboItem);

            ComboItem comboItem2 = new ComboItem();
            comboItem2.setCaption(new LocaleString("6折"));
            comboItem2.setValue("6");
            comboItems.add(comboItem2);
        }
        //给下拉列表字段赋值下拉项
        ComboEdit comboEdit = this.getControl("kdec_trendscombofield");
        comboEdit.setComboItems(comboItems);
    }
}

      对于列表卡片视图无法显示动态下拉列表问题，根据实际情况选择如下两种方案的一种。

1、方案一

     单据列表插件中发送invokeControlMethod指令更新卡片视图控件元数据。其中代码中的json字符串可以直接F12打开浏览器复制值，并根据下拉选项的值动态拼接选项值。

public class ReqListPlugin extends AbstractListPlugin implements Plugin {
    @Override
    public void beforeBindData(EventObject e) {
        IClientViewProxy proxy = this.getView().getService(IClientViewProxy.class);
        Object[] objects = new Object[1];
        String cardViewMeta = "{\n" +
                "    \"ac\": \"flex-start\",\n" +
                "    \"pt\": \"\",\n" +
                "    \"ls\": 2,\n" +
                "    \"ai\": \"flex-start\",\n" +
                "    \"phide\": false,\n" +
                "    \"gr\": 1,\n" +
                "    \"type\": \"cardview\",\n" +
                "    \"dr\": \"row\",\n" +
                "    \"vi\": 9,\n" +
                "    \"jc\": \"flex-start\",\n" +
                "    \"rk\": \"rk\",\n" +
                "    \"id\": \"cardview\",\n" +
                "    \"cardtype\": \"listcard\",\n" +
                "    \"wr\": true,\n" +
                "    \"longPressInvokeAction\": [\n" +
                "        \n" +
                "    ],\n" +
                "    \"items\": [\n" +
                "        {\n" +
                "            \"bc\": \"#ffffff\",\n" +
                "            \"s\": {\n" +
                "                \"p\": {\n" +
                "                    \"r\": \"5px\",\n" +
                "                    \"b\": \"8px\",\n" +
                "                    \"t\": \"\",\n" +
                "                    \"l\": \"16px\"\n" +
                "                },\n" +
                "                \"b\": {\n" +
                "                    \"r\": \"1px_solid_#e5e5e5\",\n" +
                "                    \"b\": \"1px_solid_#e5e5e5\",\n" +
                "                    \"t\": \"1px_solid_#e5e5e5\",\n" +
                "                    \"l\": \"1px_solid_#e5e5e5\"\n" +
                "                },\n" +
                "                \"m\": {\n" +
                "                    \"r\": \"12px\",\n" +
                "                    \"b\": \"12px\",\n" +
                "                    \"t\": \"\",\n" +
                "                    \"l\": \"\"\n" +
                "                }\n" +
                "            },\n" +
                "            \"w\": {\n" +
                "                \"zh_CN\": \"315px\"\n" +
                "            },\n" +
                "            \"h\": {\n" +
                "                \"zh_CN\": \"148px\"\n" +
                "            },\n" +
                "            \"sk\": 0,\n" +
                "            \"ai\": \"stretch\",\n" +
                "            \"id\": \"kdec_cardviewrow\",\n" +
                "            \"wr\": false,\n" +
                "            \"type\": \"cardrowpanel\",\n" +
                "            \"items\": [\n" +
                "                {\n" +
                "                    \"sk\": 0,\n" +
                "                    \"ai\": \"center\",\n" +
                "                    \"jc\": \"flex-start\",\n" +
                "                    \"id\": \"kdec_cardflexpanelap\",\n" +
                "                    \"wr\": false,\n" +
                "                    \"text\": {\n" +
                "                        \"zh_CN\": \"卡片布局容器\"\n" +
                "                    },\n" +
                "                    \"type\": \"cardflexpanel\",\n" +
                "                    \"items\": [\n" +
                "                        {\n" +
                "                            \"editor\": {\n" +
                "                                \"showStyle\": 0,\n" +
                "                                \"st\": [\n" +
                "                                    [\n" +
                "                                        \"a\",\n" +
                "                                        {\n" +
                "                                            \"zh_CN\": \"小折扣\"\n" +
                "                                        },\n" +
                "                                        null\n" +
                "                                    ],\n" +
                "                                    [\n" +
                "                                        \"b\",\n" +
                "                                        {\n" +
                "                                            \"zh_CN\": \"大折扣\"\n" +
                "                                        },\n" +
                "                                        null\n" +
                "                                    ],\n" +
                "                                    [\n" +
                "                                        \"c\",\n" +
                "                                        {\n" +
                "                                            \"zh_CN\": \"非折扣\"\n" +
                "                                        },\n" +
                "                                        null\n" +
                "                                    ],\n" +
                "                                    [\n" +
                "                                        \"******\",\n" +
                "                                        {\n" +
                "                                            \"zh_CN\": \"******\"\n" +
                "                                        },\n" +
                "                                        null\n" +
                "                                    ]\n" +
                "                                ],\n" +
                "                                \"s\": \"staticcombofield\",\n" +
                "