测试多层级单选下拉树，增加无效值边框标红

.gitignore

@@ -49,3 +49,6 @@ crashlytics-build.properties
 /node_modules/
 package-lock.json
 yarn.lock
+
+.DS_Store
+/dist

dist/bundle.css

@@ -34,3 +34,42 @@
 .my-todolist-background {
   background-color: #f7f8fa;
 }
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
+.my-todolist-header {
+  background-color: #3d4d66;
+}
+.my-todolist-header .my-todolist-title {
+  font-size: 22px;
+  color: #FFF;
+}
+.my-todolist-header .my-todolist-header-editor {
+  background-color: #FFF;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
+ */
+.my-todolist-list .my-todolist-list-text {
+  font-size: 16px;
+  font-weight: bold;
+}
+.my-todolist-list .my-todolist-list-count-container {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: #3d4d66;
+  color: #FFFFFF;
+}
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
+.my-todolist-background {
+  background-color: #f7f8fa;
+}
+.bi-multilayer-single-tree-combo.bi-combo.combo-error {
+  border-color: red;
+}

dist/bundle.js

@@ -277,10 +277,191 @@
     });
     BI.shortcut("my.todolist", ToDoList);
 })();
-!(function () {
+!(function(){
+
+  // 给多层级单选树增加设置错误值时标红状态
+  BI.config("bi.multilayer_single_tree_combo", function (config) {
+    var ERROR_CLASS = 'combo-error';
+
+    /**
+     * 判断是否是有效值
+     * @param {Object} config 
+     * @param {Array} value setValue传入的值
+     * @returns {Boolean}
+     */
+    function isValueValid(options, value) {
+        value = value || options.value || '';
+        if (Array.isArray(value)) {
+            value = value[0];
+        } 
+        var items = options.items || [];
+        var itemIds = [];
+    
+        if (BI.isNull(value)) {
+            return true;
+        }
+  
+        // 获取id列表
+        BI.each(items, function(i, item){
+            item && item.value && itemIds.push(item.value);
+        });
+    
+        if (BI.contains(itemIds, value)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+  
+    /**
+     * 增加/去除标红className
+     * @param {Object} widget
+     * @param {Array} value setValue传入的值
+     */
+    function changeInvalidClassName(widget, value) {
+        var combo = widget.combo || {};
+        var options = widget.options || {};
+        if (isValueValid(options, value)) {
+            combo && combo.element.removeClass(ERROR_CLASS);
+        } else {
+            combo && combo.element.addClass(ERROR_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) {
+                changeInvalidClassName(this, value);
+                _setValue.call(this, value);
+            };
+
+            // 立即触发一次样式变更，不需要传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: "默认值",
+            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);  
+
+})();!(function () {
     // 将todolist组件挂载到#wrapper上.
+    // BI.createWidget({
+    //     type: "my.todolist",
+    //     element: "#wrapper"
+    // });
+
+    // 挂载下拉树测试组件
     BI.createWidget({
-        type: "my.todolist",
+        type: "dec.amiba.test.tree",
         element: "#wrapper"
     });
 })();

src/css/todolist/header/header.css

@@ -0,0 +1,16 @@
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
+.my-todolist-header {
+  background-color: #3d4d66;
+}
+.my-todolist-header .my-todolist-title {
+  font-size: 22px;
+  color: #FFF;
+}
+.my-todolist-header .my-todolist-header-editor {
+  background-color: #FFF;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}

src/css/todolist/list/list.css

@@ -0,0 +1,14 @@
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
+ */
+.my-todolist-list .my-todolist-list-text {
+  font-size: 16px;
+  font-weight: bold;
+}
+.my-todolist-list .my-todolist-list-count-container {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color: #3d4d66;
+  color: #FFFFFF;
+}

src/css/todolist/main.css

@@ -0,0 +1,6 @@
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
+.my-todolist-background {
+  background-color: #f7f8fa;
+}

src/css/tree/main.css

@@ -0,0 +1,3 @@
+.bi-multilayer-single-tree-combo.bi-combo.combo-error {
+  border-color: red;
+}

src/index.js

@@ -1,7 +1,13 @@
 !(function () {
     // 将todolist组件挂载到#wrapper上.
+    // BI.createWidget({
+    //     type: "my.todolist",
+    //     element: "#wrapper"
+    // });
+
+    // 挂载下拉树测试组件
     BI.createWidget({
-        type: "my.todolist",
+        type: "dec.amiba.test.tree",
         element: "#wrapper"
     });
 })();

src/modules/todolist/header/header.less

@@ -1,4 +1,4 @@
-@import "../../index.less";
+@import "../../../index.less";
 /**
   列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
  */

src/modules/todolist/list/list.less

@@ -1,4 +1,4 @@
-@import "../../index.less";
+@import "../../../index.less";
 /**
   列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
  */

src/modules/tree/main.js

@@ -0,0 +1,176 @@
+!(function(){
+
+  // 给多层级单选树增加设置错误值时标红状态
+  BI.config("bi.multilayer_single_tree_combo", function (config) {
+    var ERROR_CLASS = 'combo-error';
+
+    /**
+     * 判断是否是有效值
+     * @param {Object} config 
+     * @param {Array} value setValue传入的值
+     * @returns {Boolean}
+     */
+    function isValueValid(options, value) {
+        value = value || options.value || '';
+        if (Array.isArray(value)) {
+            value = value[0];
+        } 
+        var items = options.items || [];
+        var itemIds = [];
+    
+        if (BI.isNull(value)) {
+            return true;
+        }
+  
+        // 获取id列表
+        BI.each(items, function(i, item){
+            item && item.value && itemIds.push(item.value);
+        });
+    
+        if (BI.contains(itemIds, value)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+  
+    /**
+     * 增加/去除标红className
+     * @param {Object} widget
+     * @param {Array} value setValue传入的值
+     */
+    function changeInvalidClassName(widget, value) {
+        var combo = widget.combo || {};
+        var options = widget.options || {};
+        if (isValueValid(options, value)) {
+            combo && combo.element.removeClass(ERROR_CLASS);
+        } else {
+            combo && combo.element.addClass(ERROR_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) {
+                changeInvalidClassName(this, value);
+                _setValue.call(this, value);
+            };
+
+            // 立即触发一次样式变更，不需要传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: "默认值",
+            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);  
+
+})();

src/modules/tree/main.less

@@ -0,0 +1,3 @@
+.bi-multilayer-single-tree-combo&.bi-combo&.combo-error{
+  border-color: red;
+}