fmui-base 1.0.0

package/lib/poppage/table/table.js

@@ -0,0 +1,776 @@
+'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 _CheckboxField = require('saltui/lib/CheckboxField');
+
+var _CheckboxField2 = _interopRequireDefault(_CheckboxField);
+
+var _SearchBar = require('saltui/lib/SearchBar');
+
+var _SearchBar2 = _interopRequireDefault(_SearchBar);
+
+var _Boxs = require('saltui/lib/Boxs');
+
+var _Boxs2 = _interopRequireDefault(_Boxs);
+
+var _Button = require('saltui/lib/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Group = require('saltui/lib/Group');
+
+var _Group2 = _interopRequireDefault(_Group);
+
+var _Popup = require('saltui/lib/Popup');
+
+var _Popup2 = _interopRequireDefault(_Popup);
+
+var _RadioField = require('saltui/lib/RadioField');
+
+var _RadioField2 = _interopRequireDefault(_RadioField);
+
+require('./table.less');
+
+var _variables = require('../../db/variables');
+
+var _variables2 = _interopRequireDefault(_variables);
+
+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 PageHome = function (_React$Component) {
+  _inherits(PageHome, _React$Component);
+
+  function PageHome(props) {
+    _classCallCheck(this, PageHome);
+
+    var _this = _possibleConstructorReturn(this, (PageHome.__proto__ || Object.getPrototypeOf(PageHome)).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 - 45 + "px";
+    } else if (isiOS == true) {
+      height = window.screen.availHeight - 70 - 44 - 45 + "px";
+    } else {
+      if (window.screen.availHeight) {
+        height = '550px';
+      }
+    }
+
+    _this.state = {
+      search: '',
+      change: true,
+
+      data: [],
+      selectedData: [],
+      selectNum: 0,
+      checked: 'checkbox',
+      placeholder: '搜索',
+      showName: 'text',
+      searchField: 'text',
+      isSearch: 1,
+      hasShowData: false,
+      height: height,
+
+      visible: false
+    };
+    return _this;
+  }
+
+  _createClass(PageHome, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {}
+
+    // 子组件初始化
+
+  }, {
+    key: 'initState',
+    value: function initState() {
+      var t = this;
+      // 是否显示 
+      var visible = t.props.visible;
+      // 搜索提示
+      var placeholder = t.props.placeholder;
+      // 待选择的数据
+      var data = t.props.data;
+      // 选中的数据
+      var value = t.props.value;
+      // 单选多选标识
+      var checked = t.props.checked;
+      // 回显字段名称
+      var showName = t.props.showName;
+      // 搜索的值
+      var searchField = t.props.searchField;
+
+      // 选中的个数
+      var selectNum = 0;
+
+      // 单选
+      if (checked == 'radio') {
+        if (data != null && data.length > 0) {
+          var tempNum = '0';
+          for (var j = 0; j < data.length; j++) {
+            if (data[j].text != null && data[j].text != '' && data[j].text != 'undefined' && data[j].text != 'null' && data[j].text != undefined) {
+              data[j].text = data[j].text.replace(/null/g, '');
+              data[j].text = data[j].text.replace(/,/g, '    ');
+            }
+
+            // 重复来回选择某两个，改掉没选的checked属性为false 
+            if (value != null && value != '' && value != undefined && value != 'undefined') {
+              if (data[j].value == value.value && tempNum == '0') {
+                data[j].checked = true;
+                tempNum = '1';
+              } else {
+                data[j].checked = false;
+              }
+            } else {
+              // 都没选时，设置checked属性为false 
+              data[j].checked = false;
+            }
+          }
+        }
+      } else {
+        // 多选
+        if (value == null || value == 'null' || value == '' || value == undefined || value == 'undefined') {
+          value = [];
+        } else {
+          selectNum = value.length;
+        }
+
+        // 循环处理选中的状态
+        if (data != null && data.length > 0) {
+          for (var j = 0; j < data.length; j++) {
+            if (data[j].text != null && data[j].text != '' && data[j].text != 'undefined' && data[j].text != 'null' && data[j].text != undefined) {
+              data[j].text = data[j].text.replace(/null/g, '');
+              data[j].text = data[j].text.replace(/,/g, '    ');
+            }
+
+            data[j].disable = false;
+            if (value != null && value.length > 0) {
+              var checkStr = '';
+              for (var ii = 0; ii < value.length; ii++) {
+                var obj = value[ii];
+                obj.checked = true;
+
+                if (obj.value == data[j].value) {
+                  if (data[j].noShow) {
+                    data[j].disable = true;
+                  }
+                  data[j].checked = true;
+
+                  checkStr += data[j].value + ';';
+                  continue;
+                } else {
+                  if (checkStr == '' || checkStr.indexOf(data[j].value) == -1) {
+                    data[j].checked = false;
+                  }
+                }
+              }
+            } else {
+              data[j].checked = false;
+            }
+          }
+        }
+      }
+      var hasShowData = false;
+      if (data != null && data.length > 0) {
+        hasShowData = true;
+      }
+
+      t.setState({
+        change: true,
+        placeholder: placeholder,
+        data: data,
+        selectedData: value,
+        checked: checked,
+        showName: showName,
+        visible: visible,
+        selectNum: selectNum,
+        searchField: searchField,
+        hasShowData: hasShowData
+      });
+    }
+
+    // 多选勾选触发
+
+  }, {
+    key: 'changeSelectBox',
+    value: function changeSelectBox(type, value) {
+
+      if (type == '1') {
+        // 选择页面选择
+        for (var j = 0; j < value.length; j++) {
+          value.checked = true;
+        };
+
+        this.setState({
+          selectNum: value.length,
+          selectedData: value
+        });
+      } else {
+        // 确认页面选择
+        // 选中的数据
+        var selectedData = this.state.selectedData;
+        var checkedId = '';
+        if (selectedData != null && selectedData.length > 0) {
+          for (var i = selectedData.length - 1; i >= 0; i--) {
+            var obj = selectedData[i];
+            if (value != null && value.length > 0) {
+              for (var k = 0; k < value.length; k++) {
+                var vObj = value[k];
+                if (vObj.value == obj.value) {
+                  if (checkedId.indexOf(obj.value) == -1) {
+                    // 选中状态
+                    obj.checked = true;
+                    checkedId += ';' + obj.value;
+                  }
+                } else {
+                  // 未选中状态
+                  if (checkedId.indexOf(obj.value) == -1) {
+                    obj.checked = false;
+                  }
+                }
+              }
+            } else {
+              // 选中为空
+              obj.checked = false;
+            }
+          }
+        }
+
+        this.setState({
+          selectNum: value.length,
+          selectedData: selectedData
+        });
+      }
+    }
+
+    // 点击已选触发
+
+  }, {
+    key: 'selectedBoxs',
+    value: function selectedBoxs() {
+      var selectedData = this.state.selectedData;
+      if (selectedData != null && selectedData.length > 0) {
+        for (var i = selectedData.length - 1; i >= 0; i--) {
+          var obj = selectedData[i];
+          obj.disable = false;
+        }
+      }
+      this.setState({
+        change: !this.state.change,
+        selectedData: selectedData
+      });
+    }
+
+    // 查看已选页，点击完成触发
+
+  }, {
+    key: 'selectedOk',
+    value: function selectedOk() {
+      // 搜索值
+      var search = this.state.search;
+
+      // 已选页列表数据（包括已选和在已选页取消选择的数据）
+      var selectedData = this.state.selectedData;
+      var tempData = [];
+      var dataAll = this.state.data;
+      for (var i = 0; i < selectedData.length; i++) {
+        var selectedObj = selectedData[i];
+        if (selectedObj.checked == true) {
+          tempData.push(selectedObj);
+        }
+      }
+
+      var checkId = '';
+      // 对可选列表的显示和隐藏进行控制
+      for (var ii = 0; ii < dataAll.length; ii++) {
+        var tempObj = dataAll[ii];
+        // 处理选择列表是否隐藏
+        if (tempObj.noShow) {
+          tempObj.disable = true;
+        } else {
+          tempObj.disable = false;
+        }
+
+        // 处理选择列表是否选中
+        if (tempData != null && tempData.length > 0) {
+          for (var j = 0; j < tempData.length; j++) {
+            var obj = tempData[j];
+            if (obj.value == tempObj.value) {
+              if (checkId.indexOf(obj.value) == -1) {
+                tempObj.checked = true;
+                checkId += ';' + tempObj.value;
+              }
+            } else {
+              if (checkId.indexOf(tempObj.value) == -1) {
+                tempObj.checked = false;
+              }
+            }
+          }
+        } else {
+          tempObj.checked = false;
+        }
+      }
+
+      this.setState({
+        change: !this.state.change,
+        data: dataAll,
+        selectedData: tempData
+      }, function () {});
+    }
+
+    //搜索
+
+  }, {
+    key: 'onSearch',
+    value: function onSearch(keyword) {
+      // 查询字段
+      keyword = keyword.trim();
+      this.setState({
+        search: keyword
+      });
+      var hasShowData = false;
+      // 搜索的字段
+      var searchField = this.state.searchField;
+      var searchArr = null;
+      if (searchField != null) {
+        searchArr = searchField.split(',');
+      }
+
+      // 列表集合
+      var dataAll = this.state.data;
+      if (keyword != '') {
+        if (dataAll != null && dataAll.length > 0) {
+          for (var j = 0; j < dataAll.length; j++) {
+            var obj = dataAll[j];
+            if (obj != null) {
+              obj.disable = true;
+              // 循环判断是否在查询字段中
+              if (searchArr != null && searchArr.length > 0) {
+                for (var hh = searchArr.length - 1; hh >= 0; hh--) {
+                  var searchObj = searchArr[hh];
+                  var text = obj[searchObj];
+                  text = text + '';
+                  if (text === null || text === 'null' || text === '') {
+                    text = '';
+                  }
+
+                  if (text != '' && text.indexOf(keyword) != -1) {
+                    obj.disable = false;
+                    hasShowData = true;
+                  }
+                }
+              }
+
+              if (obj.noShow) {
+                obj.disable = true;
+              }
+            }
+          }
+        }
+      } else {
+        if (dataAll != null && dataAll.length > 0) {
+          for (var j = 0; j < dataAll.length; j++) {
+            var obj = dataAll[j];
+            if (obj != null) {
+              // 是否可显示，不能显示的disable设置为true，反之为false
+              if (obj.noShow) {
+                obj.disable = true;
+              } else {
+                obj.disable = false;
+                hasShowData = true;
+              }
+            }
+          }
+        }
+      }
+
+      var t = this;
+      t.setState({
+        data: dataAll,
+        isSearch: 3,
+        hasShowData: hasShowData
+      }, function () {});
+    }
+
+    //退出
+
+  }, {
+    key: 'onExit',
+    value: function onExit(keyword) {
+      if (keyword == null || keyword == 'null' || keyword == '' || keyword == undefined || keyword == 'undefined') {
+        keyword = '';
+      }
+      // 查询字段
+      this.setState({
+        search: keyword
+      });
+      var hasShowData = false;
+      // 搜索的字段
+      var searchField = this.state.searchField;
+      var searchArr = null;
+      if (searchField != null) {
+        searchArr = searchField.split(',');
+      }
+
+      // 列表集合
+      var dataAll = this.state.data;
+      if (keyword != '') {
+        if (dataAll != null && dataAll.length > 0) {
+          for (var j = 0; j < dataAll.length; j++) {
+            var obj = dataAll[j];
+            if (obj != null) {
+              obj.disable = true;
+
+              // 循环判断是否在查询字段中
+              if (searchArr != null && searchArr.length > 0) {
+                for (var hh = searchArr.length - 1; hh >= 0; hh--) {
+                  var searchObj = searchArr[hh];
+                  var text = obj[searchObj];
+                  text = text + '';
+                  if (text === null || text === 'null' || text === '') {
+                    text = '';
+                  }
+
+                  if (text != '' && text.indexOf(keyword) != -1) {
+                    obj.disable = false;
+                    hasShowData = true;
+                  }
+                }
+              }
+
+              if (obj.noShow) {
+                obj.disable = true;
+              }
+            }
+          }
+        }
+      } else {
+        if (dataAll != null && dataAll.length > 0) {
+          for (var j = 0; j < dataAll.length; j++) {
+            var obj = dataAll[j];
+            if (obj != null) {
+              // 是否可显示，不能显示的disable设置为true，反之为false
+              if (obj.noShow) {
+                obj.disable = true;
+              } else {
+                obj.disable = false;
+                hasShowData = true;
+              }
+            }
+          }
+        }
+      }
+      this.setState({
+        data: dataAll,
+        isSearch: 2,
+        hasShowData: hasShowData
+      }, function () {
+        /*this.instance.update(this.getContent());*/
+      });
+    }
+
+    // 确定按钮触发
+
+  }, {
+    key: 'submitCofirm',
+    value: function submitCofirm() {
+      var _this2 = this;
+
+      var t = this;
+      var dataAll = this.state.selectedData;
+      var result = [];
+      var selectText = '';
+      // 回显属性名
+      var showName = this.state.showName;
+
+      for (var j = 0; j < dataAll.length; j++) {
+        var obj = dataAll[j];
+        var text = obj[showName];
+        if (text != '') {
+          if (selectText == '') {
+            selectText = text;
+          } else {
+            selectText = selectText + ',' + text;
+          }
+        }
+        result.push(obj);
+      }
+
+      t.setState({
+        visible: false
+      }, function () {
+        _this2.props.onChange(result);
+      });
+    }
+
+    //单选方法 changeSelectBox2()  
+
+  }, {
+    key: 'changeSelectBox2',
+    value: function changeSelectBox2(value, index, data) {
+      var _this3 = this;
+
+      var t = this;
+      var selectText = [];
+      var checkedData = '';
+      var showName = this.state.showName;
+      for (var j = 0; j < data.length; j++) {
+        if (data[j].checked == true) {
+          selectText = data[j][showName];
+          checkedData = data[j];
+        }
+      };
+
+      t.setState({
+        selectText: selectText,
+        visible: false
+      }, function () {
+        _this3.props.onChange(checkedData);
+        $("#App").removeAttr("style");
+        $(document).scrollTop(t.props.top);
+        _Popup2.default.hide();
+      });
+    }
+
+    // 弹出页的列表
+
+  }, {
+    key: 'getContent',
+    value: function getContent() {
+      var t = this;
+      // 单选多选标识
+      var checked = this.state.checked;
+
+      // 选择列表数据
+      var data = this.state.data;
+      // 被选中的个数
+      var selectNum = this.state.selectNum;
+      // 选中的数据
+      var selectedData = this.state.selectedData;
+
+      // 搜索提示语
+      var placeholder = this.state.placeholder;
+
+      var height = this.state.height;
+      var winHeight = parseInt(getScrollHigh(0, 0, 0)) - 100 + "px";
+      // 返回结构
+      var content = "";
+      if (checked == 'radio') {
+        // 单选
+        content = _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'div',
+            { id: 'com-popup-div', className: 'dd-popup-container', style: { width: 300 } },
+            _react2.default.createElement(_SearchBar2.default, {
+              hasHistory: false,
+              instantSearch: false,
+              onSearch: this.onSearch.bind(this),
+              placeholder: placeholder,
+              onExit: this.onExit.bind(this) }),
+            _react2.default.createElement(
+              'div',
+              { className: t.state.hasShowData == false ? "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: 'dd-checkbox-wrap', style: { overflow: "auto", height: '' + winHeight } },
+              _react2.default.createElement(_RadioField2.default, {
+                data: data,
+                mode: 'list',
+                iconPosition: 'left',
+                onChange: this.changeSelectBox2.bind(this)
+              })
+            )
+          )
+        );
+      } else {
+        // 多选
+        content = _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'div',
+            { className: t.state.hasShowData == false ? "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',
+            { id: 'com-popup-div', className: 'dd-popup-container t-PR', style: { width: 300 } },
+            _react2.default.createElement(
+              'div',
+              { className: this.state.change ? "" : "t-DN" },
+              _react2.default.createElement(_SearchBar2.default, {
+                hasHistory: false,
+                instantSearch: false,
+                onSearch: this.onSearch.bind(this),
+                placeholder: placeholder,
+                onExit: this.onExit.bind(this) })
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: this.state.change ? "t-DN" : "" },
+              _react2.default.createElement(
+                HBox,
+                { vAlign: 'center' },
+                _react2.default.createElement(
+                  Box,
+                  { flex: 1, className: 't-FS16 t-P16 t-FCc' },
+                  '\u5DF2\u9009',
+                  selectNum,
+                  '\u4E2A'
+                ),
+                _react2.default.createElement(
+                  Box,
+                  { className: 't-PR16 t-FCddblue', onClick: this.selectedOk.bind(this) },
+                  '\u5B8C\u6210'
+                )
+              )
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: this.state.change ? "dd-checkbox-wrap" : "t-DN", style: { overflow: "auto", height: '' + height } },
+              _react2.default.createElement(
+                _Group2.default.List,
+                { className: 't-PB68' },
+                _react2.default.createElement(_CheckboxField2.default, {
+                  data: data,
+                  value: selectNum,
+                  mode: 'list',
+                  iconPosition: 'left',
+                  onChange: this.changeSelectBox.bind(this, '1')
+                })
+              )
+            ),
+            _react2.default.createElement(
+              _Group2.default.List,
+              { className: this.state.change ? "t-DN" : "dd-checkbox-wrap" },
+              _react2.default.createElement(_CheckboxField2.default, {
+                data: selectedData,
+                value: selectNum,
+                mode: 'list',
+                iconPosition: 'left',
+                onChange: this.changeSelectBox.bind(this, '2')
+              })
+            ),
+            _react2.default.createElement(
+              HBox,
+              { vAlign: 'center', className: this.state.change ? "t-bottom-fixed" : "t-DN", style: { width: 300 } },
+              _react2.default.createElement(
+                Box,
+                { flex: 2, className: 't-FS16 t-PL16 t-FCddblue', onClick: this.selectedBoxs.bind(this) },
+                '\u5DF2\u9009',
+                selectNum,
+                '\u4E2A'
+              ),
+              _react2.default.createElement(
+                Box,
+                { flex: 1, onClick: this.submitCofirm.bind(this) },
+                _react2.default.createElement(
+                  _Button2.default,
+                  { type: 'primary', display: 'banner' },
+                  '\u786E\u5B9A'
+                )
+              )
+            )
+          )
+        );
+      }
+      return content;
+    }
+
+    // 点击蒙层关闭
+
+  }, {
+    key: 'closMask',
+    value: function closMask() {
+      this.props.closMask(this);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this4 = this;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          _Popup2.default,
+          {
+            content: this.getContent(),
+            animationType: 'slide-left',
+            onMaskClick: function onMaskClick() {
+              _this4.setState({ visible: false });_this4.closMask();
+            },
+            visible: this.state.visible
+          },
+          null
+        )
+      );
+    }
+  }]);
+
+  return PageHome;
+}(_react2.default.Component);
+
+exports.default = PageHome;