fineui-start/src/modules/multilayer_single_tree_combo/main.js

!(function () {

  
    /**
     * 多层级单选树增加无效值时状态，使用BI.config覆盖原组件，只能调用一次
     * 新增watermark参数，表示空默认值，不传默认值为请选择，注意不能替代text，只是为了跟text区分开，text现在包含空默认值和暂不可用值两种情况。
     * value存在且不存在于items中，为无效值，文本框标红
     * value不存在，text不为watermark时，为暂不可用值，文本框不变，去除水印
     */
    BI.config("bi.multilayer_single_tree_combo", function (config) {
        var ERROR_CLASS = "combo-error";
        var WATERMARK_CLASS = "bi-water-mark";
        var WATERMARK = "请选择";

        /**
         * 判断是否是有效值
         * @param {Object} config
         * @param {String} value setValue传入的值
         * @returns {Boolean}
         */
        function isValueValid (options, value) {
            if (!BI.isObject(options)) {
                return true;
            }
            value = value || options.value;

            // null/undefined/空字符串作为空值
            if (BI.isNull(value) || (value === "")) {
                return true;
            }

            var items = options.items || [];
            var itemIds = [];
      
            // 获取id列表
            BI.each(items, function (i, item) {
                item && item.value && itemIds.push(item.value);
            });

            return BI.contains(itemIds, value);
        }
      
        /**
         * 增加/去除标红className
         * @param {Object} widget
         * @param {String} value setValue传入的值
         */
        function changeInvalidClassName (widget, value) {
            if (!BI.isObject(widget)) {
                return;
            }
            var combo = widget.combo;
            var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element;
            var options = widget.options;
            var watermark = options.watermark || WATERMARK;
            
            if (isValueValid(options, value)) {
                combo && combo.element.removeClass(ERROR_CLASS);
            } else {
                combo && combo.element.addClass(ERROR_CLASS);
            }

            if (options.text !== watermark) {
                trigger.removeClass(WATERMARK_CLASS);
            }
        }


        config.listeners = config.listeners || [];
        // 新增mount生命周期回调
        config.listeners.push({
            eventName: BI.Events.MOUNT,
            action: function () {
                // 覆盖原setValue方法，调用原setValue前，修改样式
                var _setValue = this.setValue;
                this.setValue = function (value) {
                    _setValue.call(this, value);
                    changeInvalidClassName(this, value && value[0]);
                };

                // 立即触发一次样式变更，不需要传value
                changeInvalidClassName(this);
            }
        });
       
        return config;
    });


    var treeItems = [
        {id: -1, pId: -2, value: "根目录", text: "根目录"},
        {id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
        {id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
        {id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
        {id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
        {id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
        {id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
        {id: 12111, pId: 1211, value: "第五级文件1", text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
        {id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
        {id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
        {id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
        {id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
        {id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
        {id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
    ];

    var TestTreeModel = BI.inherit(Fix.Model, {
        state: function () {
            return {
                items: BI.deepClone(treeItems),
                value: "第三级文件1"
            };
        },
        childContext: ["items"]
    });
    BI.model("dec.amiba.test.tree.model", TestTreeModel);

    var TestTree = BI.inherit(BI.Widget, {
        _store: function () {
            return BI.Models.getModel("dec.amiba.test.tree.model");
        },
        props: {
            baseCls: "fine-test-tree"
        },
        watch: {
            items: function (items) {
                console.log("items", items);
                this.treeRef.populate(items);
            },
            value: function (v) {
                console.log("value", v);
            }
        },
        render: function () {
            var self = this, o = this.options;
            return {
                type: "bi.vertical",
                height: 150,
                lgap: 20,
                tgap: 20,
                mounted: function () {

                    // 测试增加树节点
                    var m = self.model;
                    var newItems = [
                        {id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
                        {id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
                    ];
                    m.items = m.items.concat(newItems);

                    // 测试修改value;
                    setTimeout(function () {
                        console.log("setValue");
                        self.treeRef.setValue("不存在的值");
                    }, 3000);


                },
                items: [
                    {
                        type: "bi.label",
                        textAlign: "left",
                        text: "叶子节点单选"
                    },
                    {
                        type: "bi.multilayer_single_tree_combo",
                        text: "无效值",
                        watermark: "请选择",
                        allowEdit: false,
                        items: self.model.items,
                        ref: function (ref) {
                            self.treeRef = ref;
                        },
                        width: 250,
                        value: self.model.value,
                        listeners: [{
                            eventName: "EVENT_CHANGE",
                            action: function () {
                                self.model.value = self.treeRef.getValue()[0];
                            }
                        }]
                    }
                ]
            };
        }
    });

    BI.shortcut("dec.amiba.test.tree", TestTree);

})();