fmui-base 2.2.10 → 2.2.12

package/lib/poppage/table/table.jsx

@@ -1,641 +0,0 @@
-import React from 'react';
-
-import CheckboxField from 'saltui/lib/CheckboxField';
-import SearchBar from 'saltui/lib/SearchBar';
-import Boxs from 'saltui/lib/Boxs';
-import Button from 'saltui/lib/Button';
-import Group from 'saltui/lib/Group';
-import Popup from 'saltui/lib/Popup';
-import RadioField from 'saltui/lib/RadioField';
-const { HBox, Box,VBox} = Boxs;
-import './table.less';
-import Variables from '../../db/variables';
-export default class PageHome extends React.Component {
-
-  constructor(props) {
-    super(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.innerHeight) {
-            // height = '550px';
-            height = window.innerHeight-70-44-45+"px";
-        }
-    }
-
-    this.state = {
-        search:'',
-        change:true,
-
-        data: [],
-        selectedData:[],
-        selectNum:0,
-        checked:'checkbox',
-        placeholder:'搜索',
-        showName:'text',
-        searchField:'text',
-        isSearch:1,
-        hasShowData:false,
-        height:height,
-
-        visible:false,
-    }
-  }
-
-  componentDidMount(){
-   
-  } 
-
-  // 子组件初始化
-  initState() {
-    const t = this;
-    // 是否显示 
-    let visible = t.props.visible;
-    // 搜索提示
-    let placeholder = t.props.placeholder;
-    // 待选择的数据
-    let data = t.props.data;
-    // 选中的数据
-    let value = t.props.value;
-    // 单选多选标识
-    let checked = t.props.checked;
-    // 回显字段名称
-    let showName = t.props.showName;
-    // 搜索的值
-    let searchField = t.props.searchField;
-
-    // 选中的个数
-    let selectNum = 0;
-
-    // 单选
-    if (checked == 'radio') {
-        if (data != null && data.length > 0) {
-            let 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
-    });
-  }
-   
-  // 多选勾选触发
-  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 {
-        // 确认页面选择
-        // 选中的数据
-        let selectedData = this.state.selectedData;
-        let checkedId = '';
-        if (selectedData != null && selectedData.length > 0) {
-            for (var i = selectedData.length - 1; i >= 0; i--) {
-              let obj = selectedData[i];
-              if (value != null && value.length > 0) {
-                  for (var k = 0; k < value.length; k++) {
-                      let 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,
-        });
-      }
-  } 
-
-  // 点击已选触发
-  selectedBoxs(){
-    let 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,
-    });
-  }
-
-  // 查看已选页，点击完成触发
-  selectedOk(){
-    // 搜索值
-    let search = this.state.search;
-
-    // 已选页列表数据（包括已选和在已选页取消选择的数据）
-    let selectedData = this.state.selectedData;
-    let 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);
-        }
-    }
-
-    let 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,
-    }, () => {
-    });
-  }
-
-  //搜索
-  onSearch(keyword) {
-    // 查询字段
-    keyword = keyword.trim();
-    this.setState({
-      search:keyword
-    });
-    let hasShowData = false;
-    // 搜索的字段
-    let searchField = this.state.searchField;
-    let 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;
-                  }
-              }
-          }
-      }
-    }
-
-    let t = this;
-    t.setState({
-      data:dataAll,
-      isSearch:3,
-      hasShowData:hasShowData
-    }, () => {
-    });
-  }
-
-  //退出
-  onExit(keyword){
-    if (keyword == null || keyword == 'null' || keyword == '' || keyword == undefined || keyword == 'undefined') {
-        keyword = '';
-    }
-    // 查询字段
-    this.setState({
-      search:keyword
-    });
-let hasShowData=false;
-    // 搜索的字段
-    let searchField = this.state.searchField;
-    let 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
-    }, () => {
-        /*this.instance.update(this.getContent());*/
-    });
-  }
-
-  // 确定按钮触发
-  submitCofirm() {
-    let t = this;
-    var dataAll=this.state.selectedData;
-    var result = [];
-    var selectText='';
-    // 回显属性名
-    let showName = this.state.showName;
-
-    for(var j=0;j<dataAll.length;j++){
-      var obj = dataAll[j];
-      let text = obj[showName];
-      if (text != '') {
-          if (selectText == '') {
-              selectText = text;
-          } else {
-              selectText = selectText + ',' + text;
-          }
-      }
-      result.push(obj);
-    }
-
-    t.setState({
-      visible: false
-    }, () => {
-      this.props.onChange(result);
-    });
-  }
-
-  //单选方法 changeSelectBox2()  
-  changeSelectBox2(value, index, data){
-    let t = this;
-    var selectText=[];
-    var checkedData = '';
-    let 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
-    }, () => {
-       this.props.onChange(checkedData);
-       $("#App").removeAttr("style");
-       $(document).scrollTop(t.props.top);
-       Popup.hide();
-    });
-  } 
-
-
-  // 弹出页的列表
-  getContent() {
-	  let t=this;
-      // 单选多选标识
-      let checked = this.state.checked;
-
-      // 选择列表数据
-      let data = this.state.data;
-      // 被选中的个数
-      let selectNum = this.state.selectNum;
-      // 选中的数据
-      let selectedData = this.state.selectedData;
-
-      // 搜索提示语
-      let placeholder = this.state.placeholder;
-
-      let height = this.state.height;
-      let winHeight=(parseInt(getScrollHigh(0, 0, 0))-100)+"px";
-      // 返回结构
-      let content = "";
-      if (checked == 'radio') {
-          // 单选
-          content = (   
-        		  <div>
-        		  {/* <div className={t.state.hasShowData == false ?"nodata-wrapper":"t-DN"}>
-        	      <VBox vAlign="center" hAlign="center" className="nodata">
-        	        <Box>
-        	          <div>
-        	            <img src={nodataIcon} alt="" style={{width: 68 + 'px'}} />
-        	          </div>
-        	        </Box>
-        	        <Box className="t-FCc">
-        	        {t.state.isSearch == 3?'无搜索结果':'暂无数据'} 
-        	        </Box>
-        	      </VBox>
-        	    </div> */}
-              <div id="com-popup-div" className="dd-popup-container" style={{width:300}}>
-                <SearchBar 
-                      hasHistory={false} 
-                      instantSearch={false} 
-                      onSearch={this.onSearch.bind(this)}  
-                      placeholder={placeholder}
-                      onExit={this.onExit.bind(this)}>
-                </SearchBar>
-                <div className={t.state.hasShowData == false ?"nodata-wrapper":"t-DN"}>
-        	      <VBox vAlign="center" hAlign="center" className="nodata">
-        	        <Box>
-        	          <div>
-        	            <img src={Variables.nodataIcon} alt="" style={{width: 68 + 'px'}} />
-        	          </div>
-        	        </Box>
-        	        <Box className="t-FCc">
-        	        {t.state.isSearch == 3?'无搜索结果':'暂无数据'} 
-        	        </Box>
-        	      </VBox>
-        	    </div>
-
-                <div className="dd-checkbox-wrap" style={{overflow:"auto"  }}>
-                    <RadioField 
-                      data={data} 
-                      mode='list'
-                      iconPosition="left"
-                      className="poppage-list-search" 
-                      onChange={this.changeSelectBox2.bind(this)}  
-                    />
-                </div>
-              </div>
-              </div>
-          );
-      } else {
-          // 多选
-          content = ( 
-        		  <div>
-        		  <div className={t.state.hasShowData == false ?"nodata-wrapper":"t-DN"}>
-        	      <VBox vAlign="center" hAlign="center" className="nodata">
-        	        <Box>
-        	          <div>
-        	            <img src={Variables.nodataIcon} alt="" style={{width: 68 + 'px'}} />
-        	          </div>
-        	        </Box>
-        	        <Box className="t-FCc">
-        	        {t.state.isSearch == 3?'无搜索结果':'暂无数据'} 
-        	        </Box>
-        	      </VBox>
-        	    </div>
-            <div id="com-popup-div" className="dd-popup-container t-PR" style={{width:300}}>
-                <div className={this.state.change?"":"t-DN"}>
-                  <SearchBar 
-                      hasHistory={false} 
-                      instantSearch={false} 
-                      onSearch={this.onSearch.bind(this)}  
-                      placeholder={placeholder}
-                      onExit={this.onExit.bind(this)}>
-                  </SearchBar>
-                </div>
-                <div className={this.state.change?"t-DN":""} >
-                    <HBox vAlign="center">
-                      <Box flex={1} className="t-FS16 t-P16 t-FCc">已选{selectNum}个</Box>
-                      <Box className="t-PR16 t-FCblue" onClick={this.selectedOk.bind(this)}>完成</Box>
-                    </HBox>
-                </div>
-                <div className={this.state.change?"dd-checkbox-wrap":"t-DN"} style={{overflow:"auto" , height: `${height}`,}}>
-                <Group.List className="t-PB68">
-                    <CheckboxField 
-                      data={data} 
-                      value={selectNum} 
-                      mode='list' 
-                      iconPosition="left"  
-                      onChange={this.changeSelectBox.bind(this,'1')}
-                    />
-                </Group.List>
-                </div>
-                <Group.List className={this.state.change?"t-DN":"dd-checkbox-wrap"} >
-                    <CheckboxField 
-                      data={selectedData} 
-                      value={selectNum} 
-                      mode='list' 
-                      iconPosition="left"  
-                      onChange={this.changeSelectBox.bind(this,'2')}
-                    />
-                </Group.List>
-                <HBox vAlign="center" className={this.state.change?"t-bottom-fixed":"t-DN"} style={{width:300}}>
-                  <Box flex={2} className="t-FS16 t-PL16 t-FCblue" onClick={this.selectedBoxs.bind(this)} >已选{selectNum}个</Box>
-                  <Box flex={1}   onClick={this.submitCofirm.bind(this)}>
-                    <Button type="primary" display="banner" >确定</Button>
-                  </Box>
-                </HBox>
-              </div>
-              </div>
-          );
-      }
-      return content;
-    }
-
-   // 点击蒙层关闭
-   closMask(){
-      this.props.closMask(this);
-   }
-
-  render() {
-    
-
-    return (
-      <div >
-        <Popup
-          content={this.getContent()}
-          animationType="slide-left"
-          onMaskClick={() => { this.setState({ visible: false });this.closMask(); }}
-          visible={this.state.visible}
-        >
-          {null}
-        </Popup>
-     </div>   
-    )
-  }
-}
-
-