js操作iframe框架

IT侠客行

于 2021-01-05 00:03:23 发布

阅读量1.9w

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_35622189/article/details/112210533

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

   var tab,
       tab1,
       titleHtml,
       bodyHtml;
   var htmlinfo="",
       htmlbody ="";
   var dataInfo = {
       tablename:"formmain_0533",
       data:{},
       Path:""
   }
function ajaxInfo(){
   $.ajax({
       type: 'POST',
       url: "/seeyon/rest/cap4/form/getCAPFormUnFlowList",
       dataType: 'JSON',
       contentType: 'application/json;charset=UTF-8',
       data:JSON.stringify(configInfo),
       async:false,
       success: function (res) {
           titleHtml = res.data.data.fields
           bodyHtml = res.data.data.datas
           //loadTeplate()
       }
   })

}
function selectAll(){

$("input[name='checkbox']").each(function(){
   if($(this).attr("checked"))
       {
       $(this).removeAttr("checked");
       }
       else
       {
       $(this).attr("checked","true");
       }
   })
}
var list = []
var listInfo = []
function selectSigle(obj,data){
   var isCheckSigle=true;
   //obj.stopPropagation();
   //arr[i].classList.add("new"); /*添加样式*/
   //arr[j].classList.remove("new");/*删除样式*/
       var Para =$(obj);//$(obj)把dom对象转换jq对象
       console.log(Para[0])
       if(isCheckSigle){

           Para[0].classList.add("v-easy-table-checkbox-checked")
           isCheckSigle = false;
           var index = list.indexOf(data);
           if (index > -1) {
               list.splice(index, 1);
           }else{
               list.push(data)
           }
       }
       else{
           //var Para =$(obj);//$(obj)把dom对象转换jq对象
           Para[0].classList.remove("v-easy-table-checkbox-checked")
           isCheckSigle = true;
       }

}
function loadTeplate(){
       titleHtml.forEach((item)=>{
           htmlinfo +="<td rrr='' kkk='normal"+item.fieldName+"undefined' class='v-easy-table-td v-easy-table-td-title' style='background-color: rgb(187, 218, 249); cursor: pointer; overflow: hidden;'><div class='v-easy-table-title-cell v-easy-table-horizontal-border-header v-easy-table-vertical-border-header' style='line-height: 40px; padding: 0px 10px; border-bottom-width: 0px; width: 243px; height: 40px;'><span class='v-easy-table-title'><span title="+item.display+">"+item.display+"</span></span><i class='v-easy-table-col-resize'></i></div></td>"
       })
       bodyHtml.forEach((item)=>{
           htmlbody +="<tr class='v-easy-table-row' style='cursor: pointer; background-color: rgb(255, 255, 255);'><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; text-align: center; padding: 0px 10px; position: relative; width: 63px; height: 40px;display: flex;justify-content: center;align-items: center;'><label class='v-easy-table-checkbox-wrapper'><span class='v-easy-table-checkbox' id='openFu' οnchange='parent.selectSigle(this,"+item.id+")'><input name='checkbox' type='checkbox' class='v-easy-table-checkbox-input' value="+item.id+"><span class='v-easy-table-checkbox-inner' style='border-radius: 2px;'></span></span><span style='vertical-align: middle;'></span></label><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; text-align: center; padding: 0px 10px; position: relative; width: 63px; height: 40px;'><span class='v-td-content'></span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 243px; height: 40px;'><span title="+item.field0008.value+" class='v-td-content'>"+item.field0008.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;'><span title="+item.field0007.value+" class='v-td-content'>"+item.field0007.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;'><span title="+item.field0006.value+" class='v-td-content'>"+item.field0006.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;'><span title="+item.field0001.value+" class='v-td-content'>"+item.field0001.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 274px; height: 40px;'><span title="+item.field0002.value+" class='v-td-content'>"+item.field0002.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 274px; height: 40px;'><span title="+item.field0022.value+" class='v-td-content'>"+item.field0022.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td></tr>"
       })
       tab1 = $("#cap4UnflowDiv").context.getElementById("cap4UnflowList").contentWindow.document.body.getElementsByClassName("v-easy-table-rightview")
       //tab[0].style="display:none"
       //if(url[4]=="formId=-8045341143611782302"){
           tab1[0].innerHTML=
           `<div class="v-easy-table-rightview cc" id="test" style="width: 1417px; height: 100%;"><div class="v-easy-table-header v-easy-table-title-class" style="width: 1417px; background-color: rgb(187, 218, 249);"><div class="v-easy-table-header-inner">
           <table border="0" cellspacing="0" cellpadding="0" class="v-easy-table-htable">
           <tbody>
           <tr>
               <td rrr="" kkk="normalpreset_selectionundefined" class="v-easy-table-td v-easy-table-td-title" style="background-color: rgb(187, 218, 249); overflow: hidden;"><div class="v-easy-table-title-cell v-easy-table-horizontal-border-header v-easy-table-vertical-border-header" style="line-height: 40px; text-align: center; padding: 0px 10px; border-bottom-width: 0px; width: 63px; height: 40px;"><span class="v-easy-table-title"><span><label class="v-easy-table-checkbox-wrapper"><span class="v-easy-table-checkbox"><input type="checkbox" class="v-easy-table-checkbox-input" value="check-all"><span class="v-easy-table-checkbox-inner" style="border-radius: 2px;"></span></span><span style="vertical-align: middle;"></span></label></span></span></div></td>
               <td rrr="" kkk="normalpreset_lockundefined" class="v-easy-table-td v-easy-table-td-title" style="background-color: rgb(187, 218, 249); overflow: hidden;"><div class="v-easy-table-title-cell v-easy-table-horizontal-border-header v-easy-table-vertical-border-header" style="line-height: 40px; text-align: center; padding: 0px 10px; border-bottom-width: 0px; width: 63px; height: 40px;"><span class="v-easy-table-title"><span><i class="cap-icon cap-icon-suoding" style="font-size: 16px; color: rgb(119, 134, 150);"></i></span></span></div></td>
               ${htmlinfo}
               </tr>
           </tbody>
           </table>
           </div>
           </div>
           <div class="ps-container v-easy-table-body v-easy-table-body-class v-easy-table-rightview-special-border v-easy-table-rightview-content-div v-scrollbar-wrap ps ps--active-y" style="width: 1417px; height: calc(100% - 40px); position: static;"><div style="width: 1417px; height: 800px; position: static;"><div class="v-easy-table-checkbox-group" style="position: static;"><div currentindex="0" totalnofrozencolumnswidth="1417" style="position: relative;">
           <table cellspacing="0" cellpadding="0" border="0" class="v-easy-table-btable" style="top: 0px; left: 0px; position: absolute;">
           <tbody>
           ${htmlbody}
           </tbody></table></div></div></div><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px; height: 566px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 400px;"></div></div></div></div>`

           $("#cap4UnflowDiv").after('<a οnclick="batchPrint()" style="width: 80px;position: absolute;top: 100px;right: 38px;font-size: 14px;line-height: 28px;padding: 0 14px;border-radius: 15px;height: 30px;background-color: #fff;text-align: center;color: #000;">批量套打</a>')

       //}
   }

   var Modal,contentModal;
window.onload = function(){

   ajaxInfo()



   //tab[0].style="display:none"

   if(url[4]=="formId=-8045341143611782302"){

$("#cap4UnflowDiv").after('<a οnclick="batchPrint()" style="width: 80px;position: absolute;top: 100px;right: 38px;font-size: 14px;line-height: 28px;padding: 0 14px;border-radius: 15px;height: 30px;background-color: #fff;text-align: center;color: #000;">批量套打</a>')

   }
   //console.log($("#cap4UnflowDiv").context.getElementById("cap4UnflowList").contentWindow.document.getElementById('openFu'))
   //$("#cap4UnflowDiv").context.getElementById("cap4UnflowList").contentWindow.document.getElementById('openFu').click(function(){

//console.log("asdfas")

   //})

   Modal = (function() {
   let modal = null
   return function() {
if(!modal) {
   modal = document.createElement('div')
modal.innerHTML = `
                               <div style="display: flex;width: 100%">
                               <div class="layui-layer-title" winid="" style="cursor: move;width: 100%;text-align: left;">提示</div>
                               <div class="close" style="
width: 10%;
min-height: 30px;
position: absolute;
right:10px;">
<div class="btnclose" style="
                               width: 100%;
                               height: 55px;
                               /* position: absolute; */
                               /* right: 10px; */
                               display: flex;
                               justify-content: center;
                               align-items: center;" οnclick="closeFu()">
                               <span class="layui-layer-setwin" style="right:40px;">
                               <a class="layui-layer-ico layui-layer-close layui-layer-close1">
                               </a></span></div></div></div>
                               <div id="bodyHtml1"><div id="contentHtml" class="content" style="
width: 100%;
min-height: 40px;
height: 58%;"></div></div>
<div class="confirm" style="
width: 100%;
min-height: 30px;
height: 10%;
position: relative;
                               border-top-color: #e3e3e3;
                               background: #4d4d4d;
display: flex;
align-items: center;">
<div class="btnconfirm" style="
width: 60px;
height: 30px;
                               line-height: 30px;
position:absolute;
                               background: #009def;
                               color: #fff;
                               border: 1px solid #009def;
                               border-radius: 14px;
right: 90px;" οnclick="closeSave()">确定</div>
                               <div class="btnconfirm" style="
width: 60px;
height: 30px;
                               line-height: 30px;
position:absolute;
                               background: #666;
                               color: #fff;
                               border: solid 1px #999;
                               border-radius: 14px;
right: 20px;" οnclick="closeFu()">取消</div>
                               </div>`
modal.id = 'modalHtml'
modal.style =`width:30%;
                           z-index: 1000;
                           height:130px;
                           background-color: #fff;
                           -webkit-background-clip: content;
                           box-shadow: 1px 1px 50px rgba(0,0,0,0.3);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: flex;
flex-direction: column;`
   modal.style.display = 'none'
   document.body.appendChild(modal)
}
return modal
   }
})()
   //
   contentModal = (function() {
   let modal = null
   return function() {
if(!modal) {
   modal = document.createElement('div')
modal.innerHTML = `
                               <div style="display: flex;width: 100%">
                               <div class="layui-layer-title" winid="" style="cursor: move;width: 100%;text-align: left;">提示</div>
                               <div class="close" style="
width: 10%;
min-height: 30px;
position: absolute;
right:10px;">
<div class="btnclose" style="
                               width: 100%;
                               height: 55px;
                               /* position: absolute; */
                               /* right: 10px; */
                               display: flex;
                               justify-content: center;
                               align-items: center;" οnclick="closeBtnFu()">
                               <span class="layui-layer-setwin" style="right:40px;">
                               <a class="layui-layer-ico layui-layer-close layui-layer-close1">
                               </a></span></div></div></div>
                               <div id="contentHtml1" class="content" style="
width: 100%;
min-height: 40px;
height: 90%;"></div>
<div class="confirm" style="
                               position: fixed;
                               bottom: 0px;
width: 100%;
min-height: 30px;
height: 10%;
                               border-top-color: #e3e3e3;
                               background: #4d4d4d;
display: flex;
align-items: center;">
<div class="btnconfirm" style="
width: 60px;
height: 30px;
                               line-height: 30px;
position:absolute;
                               background: #009def;
                               color: #fff;
                               border: 1px solid #009def;
                               border-radius: 14px;
right: 90px;" οnclick="btnSave()">确定</div>
                               <div class="btnconfirm" style="
width: 60px;
height: 30px;
                               line-height: 30px;
position:absolute;
                               background: #666;
                               color: #fff;
                               border: solid 1px #999;
                               border-radius: 14px;
right: 20px;" οnclick="closeBtnFu()">取消</div>
                               </div>`
modal.id = 'modalHtml1'
modal.style =`width:100%;
                           z-index: 1000;
                           height:90%;
                           background-color: #fff;
                           -webkit-background-clip: content;
                           box-shadow: 1px 1px 50px rgba(0,0,0,0.3);
position: fixed;
left: 0;
top: 10%;
text-align: center;
display: flex;
flex-direction: column;
                           overflow-y: scroll;`
   modal.style.display = 'none'
   document.body.appendChild(modal)
}
return modal
   }
})()
}

function ajaxGet(){

   $.ajax({
type:"get",
url:"http://localhost:9091/api/Eot/GetFilePathAndUpLode",
           contentType: 'application/x-www-form-urlencoded',
success:function(result){
console.log(result.results.filePath);
               dataInfo.Path = result.results.filePath
               ajaxPost()
},
error:function(result){
console.log(result);
}
});
}
function ajaxPost(){

const modal1 = new contentModal()
                   modal1.style.display = 'block'
               var fildList = []

                   titleHtml.forEach((item)=>{
                       htmlinfo +="<td rrr='' kkk='normal"+item.fieldName+"undefined' class='v-easy-table-td v-easy-table-td-title' style='background-color: rgb(187, 218, 249); cursor: pointer; overflow: hidden;'><div class='v-easy-table-title-cell v-easy-table-horizontal-border-header v-easy-table-vertical-border-header' style='line-height: 40px; padding: 0px 10px; border-bottom-width: 0px; width: 243px; height: 40px;display: flex;justify-content: center;align-items: center;'><span class='v-easy-table-title'><span title="+item.display+">"+item.display+"</span></span><i class='v-easy-table-col-resize'></i></div></td>"
                       fildList.push(item.fieldName)
                   })
                   console.log(titleHtml)
                   bodyHtml.forEach((item,index)=>{
                       var htmlInfo1 =""
                           fildList.forEach((info)=>{
                               //htmlbody +="<tr class='v-easy-table-row' style='cursor: pointer; background-color: rgb(255, 255, 255);'><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; text-align: center; padding: 0px 10px; position: relative; width: 63px; height: 40px;'><label class='v-easy-table-checkbox-wrapper'><span class='v-easy-table-checkbox' id='openFu' οnchange='parent.selectSigle(this,"+item.id+")'><input type='checkbox' class='v-easy-table-checkbox-input' value="+item.id+"><span class='v-easy-table-checkbox-inner' style='border-radius: 2px;'></span></span><span style='vertical-align: middle;'></span></label><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; text-align: center; padding: 0px 10px; position: relative; width: 63px; height: 40px;'><span class='v-td-content'></span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 243px; height: 40px;'><span title="+item.field0002.value+" class='v-td-content'>"+item.field0002.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;'><span title="+item.field0007.value+" class='v-td-content'>"+item["field0007"].value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;'><span title="+item.field0004.value+" class='v-td-content'>"+item.field0004.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;'><span title="+item.field0006.value+" class='v-td-content'>"+item.field0006.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 274px; height: 40px;'><span title="+item.field0012.value+" class='v-td-content'>"+item.field0012.value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td></tr>"
                               htmlInfo1 +="<td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; padding: 0px 10px; position: relative; width: 258px; height: 40px;overflow: hidden;'><span title="+item[info].value+" class='v-td-content'>"+item[info].value+"</span><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td>"

                           })
                           htmlbody += "<tr class='v-easy-table-row' style='cursor: pointer; background-color: rgb(255, 255, 255);'><td class='v-easy-table-td'><div class='v-easy-table-body-cell v-easy-table-horizontal-border' style='line-height: 40px; text-align: center; padding: 0px 10px; position: relative; width: 63px; height: 40px;overflow: hidden;display: flex;justify-content: center;align-items: center;'><label class='v-easy-table-checkbox-wrapper'><span class='v-easy-table-checkbox' id='openFu' οnchange='parent.selectSigle(this,"+item.id+")'><input name='checkbox' type='checkbox' class='v-easy-table-checkbox-input' value="+item.id+"><span class='v-easy-table-checkbox-inner' style='border-radius: 2px;'></span></span><span style='vertical-align: middle;'></span></label><div class='v-easy-table-content-edit-target'><div id='editTarget'></div></div></div></td>"+htmlInfo1+"</tr>"

})

                   let htmlstr = document.getElementById('contentHtml1')
                   htmlstr.innerHTML = `<div class="v-easy-table-rightview" id="test" style="width: 100%; height: 100%;"><div class="v-easy-table-header v-easy-table-title-class" style="width: 1417px; background-color: rgb(187, 218, 249);"><div class="v-easy-table-header-inner">
                   <table border="0" cellspacing="0" cellpadding="0" class="v-easy-table-htable">
                   <tbody>
                   <tr>
                       <td rrr="" kkk="normalpreset_selectionundefined" class="v-easy-table-td v-easy-table-td-title" style="background-color: rgb(187, 218, 249); overflow: hidden;"><div class="v-easy-table-title-cell v-easy-table-horizontal-border-header v-easy-table-vertical-border-header" style="line-height: 40px; text-align: center; padding: 0px 10px; border-bottom-width: 0px; width: 63px; height: 40px;display: flex;justify-content: center;align-items: center;"><span class="v-easy-table-title"><span><label class="v-easy-table-checkbox-wrapper"><span class="v-easy-table-checkbox" οnclick='selectAll()'><input type="checkbox" class="v-easy-table-checkbox-input" value="check-all"><span class="v-easy-table-checkbox-inner" style="border-radius: 2px;"></span></span><span style="vertical-align: middle;"></span></label></span></span></div></td>
                       ${htmlinfo}
                       </tr>
                   </tbody>
                   </table>
                   </div>
                   </div>
                   <div class="ps-container v-easy-table-body v-easy-table-body-class v-easy-table-rightview-special-border v-easy-table-rightview-content-div v-scrollbar-wrap ps ps--active-y" style="width: 1417px; height: calc(100% - 40px); position: static;"><div style="width: 1417px; height: 800px; position: static;"><div class="v-easy-table-checkbox-group" style="position: static;"><div currentindex="0" totalnofrozencolumnswidth="1417" style="position: relative;">
                   <table cellspacing="0" cellpadding="0" border="0" class="v-easy-table-btable" style="top: 0px; left: 0px; position: absolute;">
                   <tbody>
                   ${htmlbody}
                   </tbody></table></div></div></div><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px; height: 566px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 400px;"></div></div></div></div>`




}

       const modal = new Modal()
       modal.style.display = 'block'
       let htmlstr = "请选择一条数据"
       $("#contentHtml").append(htmlstr)
   }
}
//套打打印
function batchPrint(){

   //$("#bodyHtml1").append(htmlInfo)
   ajaxGet()
}
function downLoad(){
   window.location.href="http://localhost:9091/"+dataInfo.Path
}
function closeFu(){
   const contentDsHtml = document.getElementById('contentHtml')
       contentDsHtml.parentNode.removeChild(contentDsHtml);
   const modal = document.getElementById('modalHtml')
if(modal) {
modal.style.display = 'none'
}
}
function closeSave(){
   closeFu()
}
function closeBtnFu(){
//   const contentDsHtml = document.getElementById('contentHtml')
//       contentDsHtml.parentNode.removeChild(contentDsHtml);
   const modal = document.getElementById('modalHtml1')
if(modal) {
modal.style.display = 'none'
}
}