泛微流程表单通用功能代码块整理

        本文旨在记录使用泛微OA开发过程中用到的一些模块，会随着深入使用继续补充，分享出来。如有问题欢迎讨论~

1、泛微流程表单新增模态窗

<div>
  <div id="myModal" class="modal">
  	<!-- 弹窗内容 -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>弹窗中的文本...</p>
    </div>
  </div>
</div>

<script>

var htmlDom=document.getElementById('testBtn') //根据设置的id改写
var btn=document.createElement('button'); // 创建button元素
btn.innerText="弹窗按钮";   // 设置button的显示文本
  btn.onclick=function() {
    modal.style.display = "block";
}
htmlDom.appendChild(btn); // 在元素中添加一个子元素button
  // 获取弹窗
var modal = document.getElementById('myModal');

// 获取 <span> 元素，用于关闭弹窗
var span = document.querySelector('.close');

// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
    modal.style.display = "none";
}
 
// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<style>
  /* 弹窗 (background) */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

/* 弹窗内容 */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

/* 关闭按钮 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
</style>

2、根据字符串创建Dom结构

//使用字符串创建dom
//params:
//type：外层创建dom的类型
//arg：要创建dom结构的字符串
//返回值：字符串创建的Dom node
function parseDom(type, arg) {
　　var objE = document.createElement(type);
　　objE.innerHTML = arg;
　　return objE.childNodes;
};

3、根据属性值（attributes）查找Dom结点

//根据属性值查找Dom结点
//params:
//tag：欲查找的Html标签名
//dataAttr：欲查找的属性值名称
//reg：正则表达式匹配规则
//返回值：目标属性值结点列表
function getElementByAttr(tag, dataAttr, reg) {
  var aElements = document.getElementsByTagName(tag);
  var aEle = [];
  for(var i = 0; i < aElements.length; i++) {
    var ele = aElements[i].getAttribute(dataAttr);
    if(reg.test(ele)) {
        aEle.push(aElements[i]);
    }
  }
  return aEle;
}

4、表单操作追加按钮

效果图：

 

function getElementByAttr(tag, dataAttr, reg) {
  var aElements = document.getElementsByTagName(tag);
  var aEle = [];
  for(var i = 0; i < aElements.length; i++) {
    var ele = aElements[i].getAttribute(dataAttr);
    if(reg.test(ele)) {
        aEle.push(aElements[i]);
    }
  }
  return aEle;
}

var divs = getElementByAttr('div', 'ecid', /@qjebvs/);
var submitBtnGroup = divs[divs.length - 1].childNodes[0]
var dropdownBtnSpanDom = submitBtnGroup.childNodes[submitBtnGroup.childNodes.length - 2]

//使用字符串创建dom
function parseDom(type, arg) {
　　var objE = document.createElement(type);

　　objE.innerHTML = arg;
　　return objE.childNodes;

};

var newBtnText = '测试按钮' //按钮名称
var newBtnSpan = '<span style="display: inline-block; line-height: 28px; vertical-align: middle; margin-left: 10px;"><button ecid="_Route@vmt0lk_Comp@upn4fo_Button@2oxqe7@0_button@xq1ea3" title="' + newBtnText + '" type="button" class="ant-btn ant-btn-primary" onclick="testClick()"><div class="wf-req-top-button">' + newBtnText + '</div></button></span>'
var newBtnSpanDom = parseDom('span', newBtnSpan);

var testClick = function() {
  //此处书写代码逻辑
  console.log('测试按钮')
}
submitBtnGroup.insertBefore(newBtnSpanDom[0],dropdownBtnSpanDom);

 （未完待续）