fmui-base 2.1.84 → 2.1.85

package/lib/select-fileno/pageHome.jsx

@@ -0,0 +1,569 @@
+import React from 'react';
+
+import Boxs from 'saltui/lib/Boxs';
+import Popup from 'saltui/lib/Popup';
+import SelectField from 'saltui/lib/SelectField';
+import Group from 'saltui/lib/Group';
+import TextField from 'saltui/lib/TextField';
+import TextareaField from 'saltui/lib/TextareaField';
+import Button from 'saltui/lib/Button';
+import Toast from 'saltui/lib/Toast';
+import Switch from 'saltui/lib/Switch';
+
+import utils from './utils';
+
+const { HBox, Box, VBox } = Boxs;
+const {Count} = TextareaField;
+const {
+  ButtonGroup,
+} = Button;
+
+import './PageHome.less';
+
+export default class Page extends React.Component {
+
+	constructor(props) {
+    //关闭加载页的遮罩效果
+    $(".loading-containter").hide();
+    var baseContext = document.getElementById("baseContext").value;
+    var token = document.getElementById("token").value;
+		super(props);
+		this.state = {
+      baseContext:baseContext,
+      token:token,
+      useSonFileNo: false,
+      required:false,
+      visible:false,
+
+      showValue:"",
+      showValue1:"",
+      filenoList:"",
+      filenoValue:null,
+      fileNo:'',
+      sonFileNo:'',
+      createdDateY:'',
+
+      readOnly:false,
+      label:"",
+      placeholder:"",
+
+      doubleClick:'0',
+		};
+
+    this.listener = this.handleHidePopup.bind(this);
+	}
+
+  //去除监听并关闭弹出页
+  handleHidePopup(e) {
+    const { state } = e;
+    if (!state || !state.selectFileno || state.selectFileno !== this.state.historyStamp) {
+      const t = this;
+      window.removeEventListener('popstate', t.listener, false);
+      t.setState({
+        visible: false,
+      }, () => {
+        document.getElementById("App").style.overflow = "auto";
+        document.getElementById("App").style.height = "";
+        var top = t.state.top;
+        Popup.hide();
+        setTimeout(function(){
+          window.scrollTo(0,top);
+        });
+      });
+    }
+  }
+
+  // 触发弹出选择
+  popupFileNoFuc(){
+    let t = this;
+    // 只读状态
+    let readOnly = this.props.readOnly;
+    if (readOnly) {
+      return false;
+    }
+
+    // 回显值
+    let value = t.props.value;
+
+    // 请求后台获取数据
+    // 调用弹出选择Api接口
+    var url = this.state.baseContext + "/client/office/document/getFileNoList?token="+this.state.token;
+    fetch(url,{
+      method: "GET",
+      mode: "cors",
+      headers: {
+        'Accept': 'application/json, text/plain, */*',
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    }).then((response) => response.json()).then((result) => {
+      // 选中数据处理
+      if (result != null) {
+        var content = result.content;
+        if (content != null) {
+          // 文号集合
+          var filenoList = content.filenos;
+          var filenoValue = null;
+          // 文号
+          var fileNo = '';
+          // 子号
+          var sonFileNo = '';
+          // 日期
+          var createdDateY = '';
+
+          var text = "";
+          if (filenoList != null && filenoList.length > 0) {
+            if (value == null || value == undefined || value == '') {
+              filenoValue = filenoList[0];
+              text = filenoValue.text;
+              // 文号
+              fileNo = content.filenoNum;
+              // 子号
+              sonFileNo = content.filenoSonNum;
+              // 日期
+              createdDateY = content.createdDateY;
+
+            } else {
+
+              var str1 = value.split('〔');
+
+              if (str1 != null && str1.length > 1) {
+                text = str1[0];
+
+                var temp2 = str1[1];
+                if (temp2 != undefined && temp2 != '') {
+                  var str2 = temp2.split('〕');
+                  if (str2 != null && str2.length > 1) {
+                    createdDateY = str2[0];
+
+                    var temp3 = str2[1];
+                    if (temp3 != undefined && temp3 != '') {
+                      var str3 = temp3.split('号');
+                      if (str3 != null && str3.length > 0) {
+                        var temp4 = str3[0];
+                        if (temp4 != undefined && temp4 != '') {
+                          var str4 = temp4.split('');
+                          if (str4 != null && str4.length > 0) {
+                            var num = '';
+                            var sonNum = '';
+                            var checkNum = '0123456789';
+                            var flag = '0';
+                            for (var i = 0; i < str4.length; i++) {
+                              var obj = str4[i];
+                              if (flag == '0' && checkNum.indexOf(obj) > -1) {
+                                num += obj;
+                              } else {
+                                sonNum += obj;
+                                flag = '1';
+                              }
+                            }
+                            fileNo = num;
+                            sonFileNo = sonNum;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+
+              for (var jj = 0; jj < filenoList.length; jj++) {
+                var obj = filenoList[jj];
+                var tempText = obj.text;
+                if (text != '' && text == tempText) {
+                  filenoValue = obj;
+                }
+              }
+            }
+
+          }
+
+          var showValue = "";
+          var useSonFileNo = false;
+          if (text != '') {
+            if (sonFileNo == null || sonFileNo == '' || sonFileNo == 'null') {
+              sonFileNo = '';
+            } else {
+              useSonFileNo = true;
+            }
+            showValue = text + '〔' + createdDateY + '〕' + fileNo + sonFileNo + '号';
+          }
+
+          this.setState({
+            visible:true,
+            filenoList:filenoList,
+            filenoValue:filenoValue,
+            useSonFileNo:useSonFileNo,
+            fileNo:fileNo,
+            sonFileNo:sonFileNo,
+            createdDateY:createdDateY,
+            showValue:showValue,
+          }, () => {
+            if(t.instance){t.instance.update(t.getFileNoContent());}
+
+            var memberDivs = document.getElementsByClassName("select-fileno-div-class");
+            if(memberDivs && memberDivs.length>0){
+              for(var i=0; i<memberDivs.length; i++){
+                var parent = this.getParents(memberDivs[i], "t-popup");
+                if(parent){
+                  parent.style.left = "0";
+                  parent.style.background = "#f7f7f7";
+                }
+              }
+            }
+
+
+            var top = 0;
+            if(document.documentElement&&document.documentElement.scrollTop){
+              top = document.documentElement.scrollTop;
+            }else if(document.body){
+              top = document.body.scrollTop;
+            }
+            this.setState({
+              top: top,
+              historyStamp: `selectFileno.index_${Date.now()}`
+            }, () => {
+              window.history.pushState({
+                selectFileno: t.state.historyStamp,
+              }, '', utils.addUrlParam('selectFileno', Date.now()));
+              window.addEventListener('popstate', t.listener, false);
+            });
+            document.getElementById("App").style.overflow = "hidden";
+            document.getElementById("App").style.height = "0";
+
+          });
+        }
+      }
+    }).catch((error) => {
+      alert("错误："+error);
+    });
+  }
+
+  getParents(element, className) {
+    var returnParentElement = null;
+    if(element && element.classList.contains(className) && element.tagName.toLowerCase() != "body") {
+      returnParentElement = element;
+    } else {
+      returnParentElement = this.getParents(element.parentElement, className);
+    }
+    return returnParentElement;
+  }
+
+  // 文号名称改变
+  filenoListChange(value){
+	  let t = this;
+    var text = "";
+    var id = '';
+    if (value != null) {
+      text = value.text;
+      id = value.value;
+    }
+    if (id != '') {
+        var url = this.state.baseContext + "/client/office/document/getFileNoNum?token="+this.state.token+"&fileNoStr=" + text;
+        fetch(url,{
+          method: "GET",
+          mode: "cors",
+          headers: {
+            'Accept': 'application/json, text/plain, */*',
+            'Content-Type': 'application/x-www-form-urlencoded'
+          }
+        }).then((response) => response.json()).then((result) => {
+
+          var showValue = "";
+
+          var filenoNum = t.state.fileNo;
+          var filenoSonNum = t.state.sonFileNo;
+          var useSonFileNo = t.state.useSonFileNo;
+          var createdDateY = t.state.createdDateY;
+          // 选中数据处理
+          if (result != null) {
+            var content = result.content;
+            if (content != null) {
+              filenoNum = content.filenoNum;
+              filenoSonNum = content.filenoSonNum;
+              createdDateY = content.filenoYear;
+              if (filenoSonNum == '' || filenoSonNum == null || filenoSonNum == 'null') {
+                filenoSonNum = '';
+                useSonFileNo = false;
+              } else {
+                useSonFileNo = true;
+              }
+            }
+          }
+          showValue = text + '〔' + createdDateY + '〕' + filenoNum + filenoSonNum + '号';
+          this.setState({
+            filenoValue:value,
+            fileNo:filenoNum,
+            sonFileNo:filenoSonNum,
+            showValue:showValue,
+            useSonFileNo:useSonFileNo,
+            createdDateY:createdDateY,
+          }, () => {
+            if(t.instance){t.instance.update(t.getFileNoContent());}
+          });
+        }).catch((error) => {
+          alert("错误："+error);
+        });
+    }
+  }
+
+  handleTextAreaChange(field, size, newValue) {
+    if(isEmojiCharacter(newValue)){
+      Toast.show({
+        type: 'error',
+        content:'不能输入表情'
+      });
+      return false;
+    }
+    if (newValue.length <= size) {
+      this.setState({
+        [field]: newValue,
+      });
+    }
+  }
+
+  handleChange(field, value) {
+    this.setState({
+      [field]: value,
+    });
+  }
+
+  // 弹出页的列表
+  getFileNoContent() {
+    let t = this;
+    // 返回结构
+    let content = "";
+    content = (
+      <div className="dd-selection select-fileno-div-class">
+        <Group.List >
+          <SelectField
+            label="文号名称"
+            options={t.state.filenoList}
+            onSelect={t.filenoListChange.bind(t)}
+            value={t.state.filenoValue}
+            placeholder="请选择文号名称"
+          />
+        </Group.List>
+        <Group.List>
+          <TextField
+            label="文号"
+            placeholder="6位以内正整数"
+            value={t.state.fileNo}
+            onChange={t.handleTextAreaChange.bind(t, 'fileNo', 6)}
+          >
+            <Count total={6} length={t.state.fileNo.length}/>
+          </TextField>
+        </Group.List>
+
+        <Group.List>
+          <div className="dd-item">
+            <label className="label-txt t-FC7">启用子号</label>
+            <Switch on={t.state.useSonFileNo} onChange={t.handleChange.bind(t, 'useSonFileNo')}/>
+          </div>
+        </Group.List>
+        <Group.List className={this.state.useSonFileNo ? '' : 't-DN'}>
+          <TextField
+            label="子号"
+            placeholder="6个以内字符，非数字开头"
+            value={t.state.sonFileNo}
+            onChange={t.handleTextAreaChange.bind(t, 'sonFileNo', 6)}
+          >
+            <Count total={6} length={t.state.sonFileNo.length}/>
+          </TextField>
+        </Group.List>
+        <p className={t.state.filenoList == null || t.state.filenoList.length < 1 ? 't-DN' : 't-FS16 t-FCddfontblue-60 t-ML16 t-MT10'}>{'文号预览效果:'+ t.state.showValue}</p>
+        <p className={t.state.filenoList == null || t.state.filenoList.length < 1 ? 't-FS16 t-FCddfontblue-60 t-ML16 t-MT10' : 't-DN'}>请联系管理员在公文设置中设置文号代字</p>
+        <div  className="t-P0 t-bottom-fixed">
+          <Button.Group>
+            <Button type="primary" display="banner" onClick={this.confirmBtn.bind(this)}>确认</Button>
+            <Button type="secondary" display="banner" onClick={this.cancelBtn.bind(this)}>取消</Button>
+          </Button.Group>
+        </div>
+      </div>
+    );
+    return content;
+  }
+
+  confirmBtn(){
+	  let t = this;
+
+	  let doubleClick = t.state.doubleClick;
+	  if (doubleClick != '0') {
+	    return false;
+    } else {
+	    t.setState({
+        doubleClick:'1'
+      })
+    }
+
+    var text = "";
+    if (t.state.filenoValue != null) {
+      text = t.state.filenoValue.text;
+    } else {
+      Toast.show({
+        type: 'error',
+        content: '请选择文号代字',
+      });
+      t.setState({
+        doubleClick:'0'
+      })
+      return false;
+    }
+
+    var myreg = /^[1-9]\d*$/;
+    if(!myreg.test(this.state.fileNo)){
+      Toast.show({
+        type: 'error',
+        content: '文号应为正整数',
+      });
+      t.setState({
+        doubleClick:'0'
+      })
+      return false;
+    }
+
+    var showValue = "";
+    var sonFileNo = this.state.sonFileNo;
+    if (text != '') {
+      if (!this.state.useSonFileNo) {
+        sonFileNo = '';
+      }
+
+      if (sonFileNo != '') {
+        var pattern = new RegExp("[0-9]+");
+        var obj = sonFileNo.match(pattern);
+        if (obj != null && obj.index == 0) {
+          Toast.show({
+            type: 'error',
+            content: '子号首个字符不能是数字',
+          });
+          t.setState({
+            doubleClick:'0'
+          })
+          return false;
+        }
+      }
+
+      showValue = text + '〔' + this.state.createdDateY + '〕' + this.state.fileNo + sonFileNo + '号';
+    }
+
+    if (showValue != '') {
+      var url = this.state.baseContext + "/client/office/document/compareFileno?token="+this.state.token+"&fileno=" + showValue;
+      fetch(url,{
+        method: "GET",
+        mode: "cors",
+        headers: {
+          'Accept': 'application/json, text/plain, */*',
+          'Content-Type': 'application/x-www-form-urlencoded'
+        }
+      }).then((response) => response.json()).then((result) => {
+          if (result != null && result.success) {
+            t.setState({
+              visible: false,
+              showValue:showValue,
+              showValue1:showValue,
+              doubleClick:'0'
+            }, () => {
+              this.props.onChange(showValue);
+              history.back();
+            });
+          } else {
+            Toast.show({
+              type: 'error',
+              content: '文号重复',
+            });
+            t.setState({
+              doubleClick:'0'
+            })
+          }
+      }).catch((error) => {
+        alert("错误："+error);
+        t.setState({
+          doubleClick:'0'
+        })
+      });
+    }
+  }
+
+  cancelBtn(){
+	  let  t = this;
+    let doubleClick = t.state.doubleClick;
+    if (doubleClick != '0') {
+      return false;
+    } else {
+      t.setState({
+        doubleClick:'1'
+      })
+    }
+    t.setState({
+      visible: false,
+      doubleClick:'0'
+    }, () => {
+      history.back();
+    });
+
+  }
+
+  // 点击蒙层关闭
+  closMask(){
+   /* $("#App").removeAttr("style");
+    $(document).scrollTop(this.props.top);*/
+  }
+
+
+	handleChange(from, on) {
+		this.setState({
+			[from]: on,
+		});
+	}
+
+	render() {
+    let t = this;
+    // 必选标识
+    let required = this.props.required;
+    // 显示值
+    let selectText = '';
+    let label = t.props.label;
+
+    let readOnly = t.props.readOnly;
+
+    let placeholder = t.props.placeholder;
+
+    let value = t.props.value;
+    if (value == null || value == undefined) {
+      value = '';
+    }
+
+		return (
+		  <div>
+        <div>
+          <HBox vAlign="center" className="t-FS16 t-PL16 t-PR16" onClick={() => {this.popupFileNoFuc(); }}>
+            <Box className={required ? 't-field-layout-h-label required' : 't-field-layout-h-label'}>{label}</Box>
+            <HBox flex={1} >
+              <Box flex={1} className={value == '' ? "t-FCtips t-FS16 t-PR10" : "t-DN"}>
+                <div className="t-omit t-poppage-placeholder">{placeholder}</div>
+              </Box>
+              <Box flex={1} className={value == '' ? "t-DN" : "t-FAL t-LH1_4 t-omit"}>{value}</Box>
+              <Box className={readOnly ? "t-DN" : "t-PR4"}>
+                <b className="iconfont icon-back t-rotate-180 t-FCc t-FS16 t-FS14"></b>
+              </Box>
+            </HBox>
+          </HBox>
+        </div>
+
+        <div className="fileno-div">
+          <Popup
+            content={this.getFileNoContent()}
+            animationType="slide-left"
+            onMaskClick={() => { this.setState({ visible: false });this.closMask(); }}
+            visible={this.state.visible}
+          >
+            {null}
+          </Popup>
+        </div>
+      </div>
+		);
+	}
+}
+
+
+