fmui-base 1.0.0

package/lib/poppage/tree/tree.js

@@ -0,0 +1,705 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Boxs = require('saltui/lib/Boxs');
+
+var _Boxs2 = _interopRequireDefault(_Boxs);
+
+var _SearchBar = require('saltui/lib/SearchBar');
+
+var _SearchBar2 = _interopRequireDefault(_SearchBar);
+
+var _Button = require('saltui/lib/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Popup = require('saltui/lib/Popup');
+
+var _Popup2 = _interopRequireDefault(_Popup);
+
+var _variables = require('../../db/variables');
+
+var _variables2 = _interopRequireDefault(_variables);
+
+require('./tree.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var HBox = _Boxs2.default.HBox,
+    Box = _Boxs2.default.Box,
+    VBox = _Boxs2.default.VBox;
+
+var Item = function (_React$Component) {
+  _inherits(Item, _React$Component);
+
+  function Item() {
+    _classCallCheck(this, Item);
+
+    return _possibleConstructorReturn(this, (Item.__proto__ || Object.getPrototypeOf(Item)).apply(this, arguments));
+  }
+
+  _createClass(Item, [{
+    key: 'checked',
+    value: function checked(id) {
+      this.props.checked(id);
+    }
+  }, {
+    key: 'showSubList',
+    value: function showSubList(id) {
+      this.props.showSubList(id);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var t = this;
+      return _react2.default.createElement(
+        'div',
+        null,
+        this.props.todoList.map(function (item, key) {
+          return _react2.default.createElement(
+            'div',
+            null,
+            _react2.default.createElement(
+              HBox,
+              { vAlign: 'center', className: 'dd-bottom-border ' },
+              _react2.default.createElement(
+                Box,
+                { className: 't-PL16', onClick: _this2.checked.bind(t, item.id) },
+                _react2.default.createElement(
+                  'div',
+                  {
+                    className: item.checked ? 't-checkbox-field-icon-list' : 't-checkbox-field-icon-list un-checked' },
+                  _react2.default.createElement('i', { className: 'iconfont icon-checked t-FCf t-FS14' })
+                )
+              ),
+              _react2.default.createElement(
+                Box,
+                { className: 't-PT12 t-PB12 t-PL10 t-PR6' },
+                _react2.default.createElement('i', { className: 'iconfont icon-personnelregister t-FCd t-FS20' })
+              ),
+              _react2.default.createElement(
+                HBox,
+                { flex: 1, onClick: _this2.showSubList.bind(t, item.id) },
+                _react2.default.createElement(
+                  Box,
+                  { flex: 1, className: 't-FS16 t-PL4 t-PR10 t-omit t-WB' },
+                  item.name
+                ),
+                _react2.default.createElement(
+                  Box,
+                  {
+                    className: item.todo == null || item.todo == undefined || item.todo.length == 0 ? "t-DN" : "t-PR16" },
+                  _react2.default.createElement('i', {
+                    className: item.showSubList ? "iconfont icon-arrow-up t-rotate-180 t-FCc" : "iconfont icon-arrow-up t-rotate-90 t-FCc" })
+                )
+              )
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: item.showSubList ? "" : "t-DN" },
+              item.showSubList ? _react2.default.createElement(Item, { todoList: item.todo, showSubList: function showSubList(id) {
+                  _this2.showSubList(id);
+                }, checked: function checked(id) {
+                  _this2.checked(id);
+                } }) : ""
+            )
+          );
+        })
+      );
+    }
+  }]);
+
+  return Item;
+}(_react2.default.Component);
+
+;
+
+var Page = function (_React$Component2) {
+  _inherits(Page, _React$Component2);
+
+  function Page(props) {
+    _classCallCheck(this, Page);
+
+    var _this3 = _possibleConstructorReturn(this, (Page.__proto__ || Object.getPrototypeOf(Page)).call(this, props));
+
+    var u = navigator.userAgent;
+    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+    var height = '';
+    if (isAndroid == true) {
+      height = window.screen.height - 70 - 44 - 58 + "px";
+    } else if (isiOS == true) {
+      height = window.screen.availHeight - 70 - 44 - 27 + "px";
+    } else {
+      if (window.screen.availHeight) {
+        height = '550px';
+      }
+    }
+    _this3.state = {
+      //全选按钮
+      checkedAll: false,
+
+      //单选状态   radio checkbox
+      checkbox: "checkbox",
+
+      //已选择数据   只保存最高级
+      selectData: [],
+      //数据
+      data: [],
+      //处理后的数据
+      todoList: [],
+
+      //搜索 值
+      search: "",
+      //搜索出来的数组
+      searchArr: [],
+      isSearch: 1,
+      visible: false,
+
+      placeholder: "",
+
+      height: height
+    };
+    return _this3;
+  }
+
+  _createClass(Page, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {}
+    //this.initData();
+
+
+    /*// 子组件初始化
+    initState() {
+     }*/
+
+    //初始化数据
+
+  }, {
+    key: 'initState',
+    value: function initState() {
+      var t = this;
+      //数据
+      var datas = t.props.data;
+      var selectData = t.props.value;
+      // 是否显示
+      var visible = t.props.visible;
+
+      // 搜索提示语
+      var placeholder = t.props.placeholder;
+      if (placeholder == '' || placeholder == null) {
+        placeholder = "搜索";
+      }
+
+      if (selectData == null) {
+        selectData = [];
+      } else {
+        if (t.props.checked == 'radio') {
+          selectData = [];
+          selectData.push(t.props.value);
+        }
+      }
+      if (datas == null) {
+        datas = [];
+      }
+
+      var dataArray = [];
+
+      datas.forEach(function (data) {
+        var checked = false;
+        selectData.forEach(function (select) {
+          if (select.id == data.id) {
+            checked = true;
+          }
+        });
+        var pid = data.pId;
+        var id = data.id;
+        var name = data.name;
+        var objTemp = {
+          "checked": checked,
+          "showSubList": false,
+          "show": true,
+          "pid": pid,
+          "id": id,
+          "name": name
+        };
+        dataArray.push(objTemp);
+      });
+      t.setState({
+        data: dataArray,
+        selectData: selectData,
+        visible: visible,
+        checkbox: t.props.checked,
+        placeholder: placeholder
+      }, function () {
+        if (t.state.checkbox != 'radio') {
+          selectData.forEach(function (select) {
+            t.bindCheckAll(select.id, true);
+          });
+          t.bindCheck();
+        }
+        t.getTreeFa();
+      });
+    }
+
+    //获取父级节点  传入子节点查询
+
+  }, {
+    key: 'getTreeFa',
+    value: function getTreeFa() {
+      var t = this;
+      var dataArray = [];
+      t.state.data.forEach(function (data) {
+        var pid = data.pid;
+        if (pid == '' || pid == null) {
+          dataArray.push(data);
+        }
+      });
+      var data = t.data2treeDG(t.state.data, dataArray);
+      var checkedAll = true;
+      for (var i = 0; i < t.state.data.length; i++) {
+        if (!t.state.data[i].checked) {
+          checkedAll = false;
+        }
+      }
+
+      t.setState({
+        todoList: data,
+        checkedAll: checkedAll
+      }, function () {
+        var ttt = t.deepTraversal(t.state.todoList);
+        var select = [];
+        for (var _i = 0; _i < ttt.length; _i++) {
+          select.push({ "id": ttt[_i].id, "pid": ttt[_i].pid, "name": ttt[_i].name, "value": ttt[_i].id, "text": ttt[_i].name });
+        }
+        t.setState({ selectData: select });
+      });
+    }
+
+    //子节点拼接
+
+  }, {
+    key: 'data2treeDG',
+    value: function data2treeDG(datas, dataArray) {
+      var t = this;
+      //已经选中的
+      var selectData = t.state.selectData;
+      for (var j = 0; j < dataArray.length; j++) {
+        var dataArrayIndex = dataArray[j];
+        var childrenArray = [];
+        var id1 = dataArrayIndex.id;
+
+        for (var i = 0; i < datas.length; i++) {
+          var data = datas[i];
+          var pid = data.pid;
+          if (pid == id1) {
+            //判断是否为儿子节点
+            childrenArray.push(data);
+          }
+        }
+        dataArrayIndex.todo = childrenArray;
+        if (childrenArray.length > 0) {
+          //有儿子节点则递归
+          t.data2treeDG(datas, childrenArray);
+        }
+      }
+      return dataArray;
+    }
+
+    //深度优先遍历 ，非递归方法
+
+  }, {
+    key: 'deepTraversal',
+    value: function deepTraversal(node) {
+      var nodes = [];
+      for (var i = 0; i < node.length; i++) {
+        var stack = []; //同来存放将来要访问的节点
+        stack.push(node[i]);
+        while (stack.length != 0) {
+          var item = stack.pop(); //正在访问的节点
+          if (item.checked) {
+            nodes.push(item);
+          }
+          var childrens = item.todo;
+          //将现在访问点的节点的子节点存入stack，供将来访问
+          if (!item.checked) {
+            for (var _i2 = childrens.length - 1; _i2 >= 0; _i2--) {
+              stack.push(childrens[_i2]);
+            }
+          }
+        }
+      }
+      return nodes;
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {}
+
+    //检查父节点节点需要选中
+
+  }, {
+    key: 'bindCheck',
+    value: function bindCheck() {
+      var t = this;
+      var data = t.state.data;
+      for (var i = 0; i < data.length; i++) {
+        var ch = false;
+        var end = true;
+        for (var j = 0; j < data.length; j++) {
+          if (data[i].id == data[j].pid) {
+            end = false;
+            ch = data[j].checked;
+            if (!data[j].checked) {
+              break;
+            }
+          }
+        }
+        if (end) {
+          continue;
+        }
+        if (data[i].checked != ch) {
+          data[i].checked = ch;
+          i = -1;
+        }
+      }
+    }
+
+    //遍历子节点   选中或取消选中
+
+  }, {
+    key: 'bindCheckAll',
+    value: function bindCheckAll(id, checked) {
+      var t = this;
+      var data = t.state.data;
+      for (var i = 0; i < data.length; i++) {
+        if (id == data[i].pid) {
+          data[i].checked = checked;
+          t.bindCheckAll(data[i].id, checked);
+        }
+      }
+    }
+
+    //选中
+
+  }, {
+    key: 'checked',
+    value: function checked(id) {
+      var t = this;
+      var json = t.state.data;
+      if (t.state.checkbox == 'radio') {
+        for (var i = 0; i < json.length; i++) {
+          json[i].checked = false;
+        }
+      }
+      // debugger;
+      for (var _i3 = 0; _i3 < json.length; _i3++) {
+        if (id == json[_i3].id) {
+          if (t.state.checkbox == 'radio') {
+            json[_i3].checked = true;
+          } else {
+            json[_i3].checked = !json[_i3].checked;
+            t.bindCheckAll(id, json[_i3].checked);
+          }
+        }
+      }
+      // debugger;
+      if (t.state.checkbox != 'radio') {
+        t.bindCheck();
+      }
+      t.setState({
+        data: json
+      }, function () {
+        if (t.state.search != '') {
+          t.onSearch(t.state.search);
+        }
+        t.getTreeFa();
+      });
+    }
+
+    //叶子展开
+
+  }, {
+    key: 'showSubList',
+    value: function showSubList(id) {
+      var t = this;
+      var json = t.state.data;
+      for (var i = 0; i < json.length; i++) {
+        if (id == json[i].id) {
+          json[i].showSubList = !json[i].showSubList;
+          break;
+        }
+      }
+      t.setState({
+        data: json
+      }, function () {
+        t.getTreeFa();
+      });
+    }
+
+    //确定
+
+  }, {
+    key: 'makesure',
+    value: function makesure() {
+      var _this4 = this;
+
+      var t = this;
+      t.setState({
+        visible: false
+      }, function () {
+        var returnData = t.state.selectData;
+        if (t.state.checkbox == 'radio') {
+          if (returnData.length > 0) {
+            returnData = returnData[0];
+          } else {
+            returnData = {};
+          }
+        }
+        _this4.props.onChange(returnData);
+      });
+    }
+
+    //取消
+
+  }, {
+    key: 'cancel',
+    value: function cancel() {
+      // $("#App").removeAttr("style");
+      // $(document).scrollTop(this.props.top);
+
+      // this.setState({
+      //   visible: false
+      // });
+      history.back();
+    }
+
+    //全选按钮
+
+  }, {
+    key: 'selectAll',
+    value: function selectAll() {
+      var t = this;
+      var isCheck = t.state.checkedAll;
+      var data = t.state.data;
+      t.setState({ checkedAll: !t.state.checkedAll });
+      for (var i = 0; i < data.length; i++) {
+        data[i].checked = !isCheck;
+      }
+      t.getTreeFa();
+    }
+
+    //搜索
+
+  }, {
+    key: 'onSearch',
+    value: function onSearch(value) {
+      var t = this;
+      var data = t.state.data;
+      var searchArr = [];
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].name.indexOf(value) != -1) {
+          console.log(data[i].name);
+          console.log(value);
+          searchArr.push({ "id": data[i].id, "name": data[i].name, "checked": data[i].checked });
+        }
+      }
+      t.setState({ searchArr: searchArr, isSearch: 3 });
+    }
+
+    // 点击蒙层关闭
+
+  }, {
+    key: 'closMask',
+    value: function closMask() {
+      this.props.closMask(this);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this5 = this;
+
+      var t = this;
+      var props = {
+        locale: 'zh_CN',
+        placeholder: t.state.placeholder,
+        instantSearch: false,
+        hasHistory: true,
+        searchDelay: 450,
+        onEnter: function onEnter() {},
+        onExit: function onExit() {
+          t.setState({ search: "", searchArr: [], isSearch: 2 });
+        },
+        onChange: function onChange(value) {},
+        onSearch: function onSearch(value) {
+          t.setState({ search: value, isSearch: 3 });
+          t.onSearch(value);
+        }
+      };
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          _Popup2.default,
+          {
+            content: _react2.default.createElement(
+              'div',
+              { className: 't-BCf', style: { width: 300 } },
+              _react2.default.createElement(_SearchBar2.default, props),
+              _react2.default.createElement(
+                'div',
+                { className: 'dd-popup-container', style: { overflow: "auto", width: "100%", height: t.state.height } },
+                _react2.default.createElement(
+                  'div',
+                  { className: t.state.searchArr.length == 0 && t.state.isSearch == 3 || t.state.searchArr.length == 0 && t.state.isSearch == 2 && t.state.data.length == 0 || t.state.data.length == 0 ? "nodata-wrapper" : "t-DN" },
+                  _react2.default.createElement(
+                    VBox,
+                    { vAlign: 'center', hAlign: 'center', className: 'nodata' },
+                    _react2.default.createElement(
+                      Box,
+                      null,
+                      _react2.default.createElement(
+                        'div',
+                        null,
+                        _react2.default.createElement('img', { src: _variables2.default.nodataIcon, alt: '', style: { width: 68 + 'px' } })
+                      )
+                    ),
+                    _react2.default.createElement(
+                      Box,
+                      { className: 't-FCc' },
+                      t.state.isSearch == 3 ? '无搜索结果' : '暂无数据'
+                    )
+                  )
+                ),
+                _react2.default.createElement(
+                  'div',
+                  {
+                    className: this.state.checkbox == 'radio' || t.state.searchArr.length != 0 || t.state.search != "" ? "t-DN" : "t-PL16 t-PR16 t-PT10 t-PB10 dd-top-border dd-bottom-border" },
+                  _react2.default.createElement(
+                    HBox,
+                    { vAlign: 'center' },
+                    _react2.default.createElement(
+                      HBox,
+                      { onClick: t.selectAll.bind(t) },
+                      _react2.default.createElement(
+                        'div',
+                        {
+                          className: this.state.checkedAll ? 't-checkbox-field-icon-list' : "t-checkbox-field-icon-list un-checked" },
+                        _react2.default.createElement('i', { className: 'iconfont icon-checked t-FCf t-FS14' })
+                      )
+                    ),
+                    _react2.default.createElement(
+                      Box,
+                      { flex: 1, className: 't-ML10' },
+                      '\u5168\u9009'
+                    )
+                  )
+                ),
+                _react2.default.createElement('div', {
+                  className: this.state.checkbox == 'radio' || t.state.searchArr.length != 0 || t.state.search != "" ? "t-DN" : "dd-bottom-border",
+                  style: { height: 5, width: "100%", backgroundColor: "#eee" } }),
+                t.state.searchArr.length == 0 && t.state.search == '' ? _react2.default.createElement(
+                  'div',
+                  { style: { marginBottom: 70 } },
+                  _react2.default.createElement(Item, { todoList: t.state.todoList, showSubList: function showSubList(id) {
+                      t.showSubList(id);
+                    }, checked: function checked(id) {
+                      _this5.checked(id);
+                    } }),
+                  ' '
+                ) : _react2.default.createElement(
+                  'div',
+                  { style: { marginBottom: 70 } },
+                  t.state.searchArr.map(function (item, key) {
+                    return _react2.default.createElement(
+                      'div',
+                      null,
+                      _react2.default.createElement(
+                        HBox,
+                        { vAlign: 'center', className: 'dd-bottom-border ' },
+                        _react2.default.createElement(
+                          Box,
+                          { className: 't-PL16', onClick: _this5.checked.bind(_this5, item.id) },
+                          _react2.default.createElement(
+                            'div',
+                            { className: item.checked ? 't-checkbox-field-icon-list' : 't-checkbox-field-icon-list un-checked' },
+                            _react2.default.createElement('i', { className: 'iconfont icon-checked t-FCf t-FS14' })
+                          )
+                        ),
+                        _react2.default.createElement(
+                          Box,
+                          { className: 't-PT12 t-PB12 t-PL10 t-PR6' },
+                          _react2.default.createElement('i', { className: 'iconfont icon-personnelregister t-FCd t-FS20' })
+                        ),
+                        _react2.default.createElement(
+                          HBox,
+                          { flex: 1 },
+                          _react2.default.createElement(
+                            Box,
+                            { flex: 1, className: 't-FS16 t-PL4 t-PR10 t-omit t-WB' },
+                            item.name
+                          )
+                        )
+                      )
+                    );
+                  })
+                )
+              ),
+              _react2.default.createElement(
+                HBox,
+                { vAlign: 'center', className: 't-bottom-fixed t-P16 t-PT10 t-PB10' },
+                _react2.default.createElement(Box, { flex: 1 }),
+                _react2.default.createElement(
+                  Box,
+                  { className: 't-MR4' },
+                  _react2.default.createElement(
+                    _Button2.default,
+                    { type: 'secondary', size: 'small', display: 'inline', onClick: t.cancel.bind(t) },
+                    '\u53D6\u6D88'
+                  )
+                ),
+                _react2.default.createElement(
+                  Box,
+                  null,
+                  _react2.default.createElement(
+                    _Button2.default,
+                    { type: 'primary', size: 'small', display: 'inline', onClick: t.makesure.bind(t) },
+                    '\u786E\u5B9A'
+                  )
+                )
+              )
+            ),
+            animationType: 'slide-left',
+            onMaskClick: function onMaskClick() {
+              _this5.setState({ visible: false });_this5.closMask();
+            },
+            visible: this.state.visible
+          },
+          null
+        )
+      );
+    }
+  }]);
+
+  return Page;
+}(_react2.default.Component);
+
+exports.default = Page;

package/lib/poppage/tree/tree.less

@@ -0,0 +1,9 @@
+.t-crumb-scroll{
+	width:100% !important;
+	   
+}
+.t-crumb{
+	 height: 34px;
+	    padding:5px 16px;
+}
+