本文开发以及代码属于是根据公司OA系统无法满足用户实际需求做的开发
1.需求场景说明
1.在OA系统没有购买ESB模块，以及无法直接连接其他系统数据库需要接口实现但是要实时查询不在OA做保存。
2.用户需要从SAP中查询汇总数据，保存至OA表单进行流程审批，同时每一条汇总数据可以点击查询对应的明细数据，但是明细不允许保存在OA系统表中，只需要查看且必须是实时数据。
3.故需要做一个弹出层得到数据查看，然后关闭清空即可
2.开发
2.1.流程表单创建两个按钮
1.主表按钮
jQuery("#customBtn").append("<Button class='ant-btn ant-btn-primary' οnclick='queryApi()'>供应商月度材料付款数据查询</Button>");
2.明细表按钮
注意：该按钮必须先创建一个文本框字段才可以
/** ------------以下内容无需更改----------- **/
var buttonFieldId = WfForm.convertFieldNameToId("mxcx", "detail_1",true);
initializeButtonAction();
WfForm.registerAction(WfForm.ACTION_ADDROW + "1", initializeButtonAction);
function initializeButtonAction() {
WfForm.getDetailAllRowIndexStr("detail_1").split(",").forEach(function(rowIndex) {
if (rowIndex) {
// WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button class='ant-btn ant-btn-primary' οnclick='queryApi("+rowIndex+")'>明细查询</Button>", "1,2,3");
WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button id = 'popupButton' class='ant-btn ant-btn-primary' οnclick='popDiv("+rowIndex+")'>明细查询</Button>", "1,2,3");
// WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button id = 'popupButton' class='ant-btn ant-btn-primary' οnclick='tabletc()'>明细查询</Button>", "1,2,3");
}
});
}
/** ------------以上内容无需更改----------- **/
2.2.通过接口查询获取数据
该部分只是接口获取数据的案例代码，实际根据自己公司情况开发
这里需要后端通过Java封装一个接口工具类提供调用，否则无法使用
function queryApi(rowIndex) {
debugger
var sapParams = getParams(rowIndex);
console.log(sapParams);
let params = {
returnType: "jsonObject",
url: "url",
method: "POST",
sapParams: sapParams
}
$.ajax({
url: "url",
dataType: "JSON",
type: "POST",
async: false,
data: {
params: JSON.stringify(params)
},
success: function(result) {
if (result.code == 1000) {
console.log(result);
//这里判断是为了确定获取的是汇总数据还是明细数据
if (sapParams.LIFNR != "") {
tabletc(result.data)
}else{
let rt = updateTable(result.data);
}
} else {
WfForm.showMessage("数据查询执行失败[" + result.data + "]请联系管理员!", 2, 5); //错误信息，10s后消失
}
}
})
}
2.3.拼接获取请求参数
//拼接请求参数
function getParams(rowIndex) {
var requestid = WfForm.getBaseInfo().requestid
var bbh = WfForm.getFieldValue(WfForm.convertFieldNameToId("bbh", "main", true)).replace(/[^0-9]/ig, "");
var gsdm = WfForm.getFieldValue(WfForm.convertFieldNameToId("gsdm", "main", true));
var gysbh = WfForm.getFieldValue(WfForm.convertFieldNameToId("gysbh", "detail_1", true) + "_" + rowIndex);
var gysydclfksj = {
"ZOAID":requestid,
"BBH":bbh,
"BUKRS":gsdm,
"LIFNR":gysbh
};
return gysydclfksj;
}
3.获取汇总数据插入OA流程表单
2.4.数据插入表单中
注意：具体根据业务需求决定，本次只对明细表数据做插入
function updateTable(result){
var type = result.TYPE
if (type == "S") {
var ydclfksj = result.SUM
if (ydclfksj != "" && ydclfksj != null) {
for (let i = 0; i < ydclfksj.length; i++) {
var element_i = ydclfksj[i];
var bbh = WfForm.convertFieldNameToId("bbh", "detail_1", true);
var gsdm = WfForm.convertFieldNameToId("gsdm", "detail_1", true);
var gysbh = WfForm.convertFieldNameToId("gysbh", "detail_1", true);
var gysmc = WfForm.convertFieldNameToId("gysmc", "detail_1", true);
var jyje = WfForm.convertFieldNameToId("jyje", "detail_1", true);
var addObj = {};
addObj[bbh] = {value:element_i.BBH};
addObj[gsdm] = {value:element_i.BUKRS};
addObj[gysbh] = {value:element_i.LIFNR};
addObj[gysmc] = {value:element_i.NAME1};
addObj[jyje] = {value:element_i.WRBTR};
WfForm.addDetailRow("detail_1", addObj);
}
}
}
}
3.获取明细数据做弹窗
2.5.通过点击子表中的按钮获取对应的明细数据
function tabletc(result) {
debugger
var tbody = ''
var type = result.TYPE
if (type == "S") {
var ydclfksjmx = result.ITETM
if (ydclfksjmx != "" && ydclfksjmx != null) {
for (let i = 0; i < ydclfksjmx.length; i++) {
var element_i = ydclfksjmx[i];
tbody = '<tbody>' +
'<td>'+ element_i.BBH +'</td>' +
'<td>'+ element_i.BUKRS +'</td>' +
'<td>'+ element_i.LIFNR +'</td>' +
'<td>'+ element_i.GJAHR +'</td>' +
'<td>'+ element_i.BELNR +'</td>' +
'<td>'+ element_i.BUZEI +'</td>' +
'<td>'+ element_i.NAME1 +'</td>' +
'<td>'+ element_i.AWREF +'</td>' +
'<td>'+ element_i.BUDAT +'</td>' +
'<td>'+ element_i.BLDAT +'</td>' +
'<td>'+ element_i.CPUDT +'</td>' +
'<td>'+ element_i.ZTERM +'</td>' +
'<td>'+ element_i.TEXT1 +'</td>' +
'<td>'+ element_i.NETDT +'</td>' +
'<td>'+ element_i.WRBTR +'</td>' +
'</tbody>'
}
}
}
var popup = // 底层div
'<div id="popLayer">' +
'</div>' +
'<div id = "bigDiv" style="padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9;">' +
'<div class="headline">' +
'供应商月度材料付款明细数据查询：<br>' +
'<div class="close">' +
'<div class="close">' +
// 关闭按钮超链接
// '<a href="javascript:void(0)" οnclick="closePop()">关闭</a>' +
'<Button id = "closeT" class="ant-btn ant-btn-primary" οnclick="closePop()">关闭</Button>' +
'</div>' +
'<div id = "popDiv" class="myDiv" title="基本的对话框">' +
// '<table>' +
'<table class="myTable" border="1" cellspacing="0" cellpadding="0" style="border-color: #95badf;text-align: center; white-space: nowrap;">' +
'<thead>' +
'<tr>' +
'<th>版本号</th>' +
'<th>公司代码</th>' +
'<th>供应商编号</th>' +
'<th>会计年度</th>' +
'<th>会计凭证的凭证编号</th>' +
'<th>会计凭证中的行项目编号</th>' +
'<th>供应商名称</th>' +
'<th>发票凭证号</th>' +
'<th>过账日期</th>' +
'<th>凭证日期</th>' +
'<th>输入日期</th>' +
'<th>付款条款</th>' +
'<th>付款条款文本</th>' +
'<th>到期日期</th>' +
'<th>交易金额</th>' +
'</tr>' +
'</thead>' +
tbody +
'</table>' +
'</div>' +
'</div>';
// WfForm.showConfirm(promptHTML,function(){
// });
var promptHTML = '<div id = "bigbigDiv" style="padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9;">';
promptHTML += popup; // 将表格HTML嵌入提示信息中
promptHTML += '</div>';
jQuery('body').append(promptHTML);
}
2.6.打开和关闭弹出层
function popDiv(rowIndex){
queryApi(rowIndex)
debugger
// 通过唯一id值获取div元素
var popBox = document.getElementById("bigDiv");
var popLayer = document.getElementById("popLayer");
// 控制两个div的显示与隐藏
popBox.style.display = "block";
popLayer.style.display = "block";
}
//这里注意管理弹窗后要直接将对应的div删除，不要隐藏
function closePop(){
// 通过唯一id值获取弹出窗口元素
let popDiv = document.getElementById("bigDiv");
var popLayer = document.getElementById("popLayer");
// popDiv.style.display = "none";
popDiv.parentNode.removeChild(popDiv);
// popLayer.style.display = "none";
popLayer.parentNode.removeChild(popLayer);
}
2.7.style样式
样式到对id或class自己编辑定义，本样式只做参考，不是特别好看
<style type="text/css">
/* body{
padding: 0px;
margin: 0px;
} */
#popLayer {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index: 1060;
min-width: 100%;
min-height: 100%;
position: absolute;
background-color:#000;
width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面 */
height: 100%;
filter:alpha(opacity=40); /*设置透明度为60% */
opacity:0.4; /*非IE浏览器下设置透明度为60% */
display:none;
}
#bigDiv{
border-radius: 25px;
display: none;
background-color: white;
z-index: 1060;
width: 900px;
height: 600px;
/* filter:alpha(opacity=60); 设置透明度为60% */
/* opacity:0.6; 非IE浏览器下设置透明度为60% */
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
padding: 10px;
border: 1px solid #ccc;
}
#popDiv{
overflow:auto;
}
#popDiv table {
/* width: 1470px; */
}
#popDiv table tr {
height:35px;
background-color:#e7f3fc!important
}
/* 关闭按钮样式 */
/* #bigDiv .close a {
text-decoration: none;
color: #2D2C3B;
} */
/* 弹出界面的关闭按钮 */
#bigDiv .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
</style>
4.整体代码
<script>
jQuery(document).ready(function () {//
// WfForm.doRightBtnEvent("BTN_WFSAVE");
jQuery("#customBtn").append("<Button class='ant-btn ant-btn-primary' οnclick='queryApi()'>供应商月度材料付款数据查询</Button>");
// jQuery(".mxcx").append("<Button class='ant-btn ant-btn-primary' οnclick='queryApi()'>明细查询</Button>");
// jQuery("#customBtn").append("<Button class='ant-btn ant-btn-primary' οnclick='openNew()'>测试</Button>");
debugger
/** ------------以下内容无需更改----------- **/
var buttonFieldId = WfForm.convertFieldNameToId("mxcx", "detail_1",true);
initializeButtonAction();
WfForm.registerAction(WfForm.ACTION_ADDROW + "1", initializeButtonAction);
function initializeButtonAction() {
WfForm.getDetailAllRowIndexStr("detail_1").split(",").forEach(function(rowIndex) {
if (rowIndex) {
// WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button class='ant-btn ant-btn-primary' οnclick='queryApi("+rowIndex+")'>明细查询</Button>", "1,2,3");
WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button id = 'popupButton' class='ant-btn ant-btn-primary' οnclick='popDiv("+rowIndex+")'>明细查询</Button>", "1,2,3");
// WfForm.proxyFieldComp(buttonFieldId + "_" + rowIndex, "<Button id = 'popupButton' class='ant-btn ant-btn-primary' οnclick='tabletc()'>明细查询</Button>", "1,2,3");
}
});
}
/** ------------以上内容无需更改----------- **/
})
function queryApi(rowIndex) {
debugger
var sapParams = getParams(rowIndex);
console.log(sapParams);
let params = {
returnType: "jsonObject",
url: "url",
method: "POST",
sapParams: sapParams
}
$.ajax({
url: "url",
dataType: "JSON",
type: "POST",
async: false,
data: {
params: JSON.stringify(params)
},
success: function(result) {
if (result.code == 1000) {
console.log(result);
if (sapParams.LIFNR != "") {
tabletc(result.data)
}else{
let rt = updateTable(result.data);
}
} else {
WfForm.showMessage("数据查询执行失败[" + result.data + "]请联系管理员!", 2, 5); //错误信息，10s后消失
}
}
})
}
//拼接请求参数
function getParams(rowIndex) {
var requestid = WfForm.getBaseInfo().requestid
var bbh = WfForm.getFieldValue(WfForm.convertFieldNameToId("bbh", "main", true)).replace(/[^0-9]/ig, "");
var gsdm = WfForm.getFieldValue(WfForm.convertFieldNameToId("gsdm", "main", true));
var gysbh = WfForm.getFieldValue(WfForm.convertFieldNameToId("gysbh", "detail_1", true) + "_" + rowIndex);
var gysydclfksj = {
"ZOAID":requestid,
"BBH":bbh,
"BUKRS":gsdm,
"LIFNR":gysbh
};
return gysydclfksj;
}
function updateTable(result){
var type = result.TYPE
if (type == "S") {
var ydclfksj = result.SUM
if (ydclfksj != "" && ydclfksj != null) {
for (let i = 0; i < ydclfksj.length; i++) {
var element_i = ydclfksj[i];
var bbh = WfForm.convertFieldNameToId("bbh", "detail_1", true);
var gsdm = WfForm.convertFieldNameToId("gsdm", "detail_1", true);
var gysbh = WfForm.convertFieldNameToId("gysbh", "detail_1", true);
var gysmc = WfForm.convertFieldNameToId("gysmc", "detail_1", true);
var jyje = WfForm.convertFieldNameToId("jyje", "detail_1", true);
var addObj = {};
addObj[bbh] = {value:element_i.BBH};
addObj[gsdm] = {value:element_i.BUKRS};
addObj[gysbh] = {value:element_i.LIFNR};
addObj[gysmc] = {value:element_i.NAME1};
addObj[jyje] = {value:element_i.WRBTR};
WfForm.addDetailRow("detail_1", addObj);
}
}
}
}
function tabletc(result) {
debugger
var tbody = ''
var type = result.TYPE
if (type == "S") {
var ydclfksjmx = result.ITETM
if (ydclfksjmx != "" && ydclfksjmx != null) {
for (let i = 0; i < ydclfksjmx.length; i++) {
var element_i = ydclfksjmx[i];
tbody = '<tbody>' +
'<td>'+ element_i.BBH +'</td>' +
'<td>'+ element_i.BUKRS +'</td>' +
'<td>'+ element_i.LIFNR +'</td>' +
'<td>'+ element_i.GJAHR +'</td>' +
'<td>'+ element_i.BELNR +'</td>' +
'<td>'+ element_i.BUZEI +'</td>' +
'<td>'+ element_i.NAME1 +'</td>' +
'<td>'+ element_i.AWREF +'</td>' +
'<td>'+ element_i.BUDAT +'</td>' +
'<td>'+ element_i.BLDAT +'</td>' +
'<td>'+ element_i.CPUDT +'</td>' +
'<td>'+ element_i.ZTERM +'</td>' +
'<td>'+ element_i.TEXT1 +'</td>' +
'<td>'+ element_i.NETDT +'</td>' +
'<td>'+ element_i.WRBTR +'</td>' +
'</tbody>'
}
}
}
var popup = // 底层div
'<div id="popLayer">' +
'</div>' +
'<div id = "bigDiv" style="padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9;">' +
'<div class="headline">' +
'供应商月度材料付款明细数据查询：<br>' +
'<div class="close">' +
'<div class="close">' +
// 关闭按钮超链接
// '<a href="javascript:void(0)" οnclick="closePop()">关闭</a>' +
'<Button id = "closeT" class="ant-btn ant-btn-primary" οnclick="closePop()">关闭</Button>' +
'</div>' +
'<div id = "popDiv" class="myDiv" title="基本的对话框">' +
// '<table>' +
'<table class="myTable" border="1" cellspacing="0" cellpadding="0" style="border-color: #95badf;text-align: center; white-space: nowrap;">' +
'<thead>' +
'<tr>' +
'<th>版本号</th>' +
'<th>公司代码</th>' +
'<th>供应商编号</th>' +
'<th>会计年度</th>' +
'<th>会计凭证的凭证编号</th>' +
'<th>会计凭证中的行项目编号</th>' +
'<th>供应商名称</th>' +
'<th>发票凭证号</th>' +
'<th>过账日期</th>' +
'<th>凭证日期</th>' +
'<th>输入日期</th>' +
'<th>付款条款</th>' +
'<th>付款条款文本</th>' +
'<th>到期日期</th>' +
'<th>交易金额</th>' +
'</tr>' +
'</thead>' +
tbody +
'</table>' +
'</div>' +
'</div>';
// WfForm.showConfirm(promptHTML,function(){
// });
var promptHTML = '<div id = "bigbigDiv" style="padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9;">';
promptHTML += popup; // 将表格HTML嵌入提示信息中
promptHTML += '</div>';
jQuery('body').append(promptHTML);
}
function popDiv(rowIndex){
queryApi(rowIndex)
debugger
// 通过唯一id值获取div元素
var popBox = document.getElementById("bigDiv");
var popLayer = document.getElementById("popLayer");
// 控制两个div的显示与隐藏
popBox.style.display = "block";
popLayer.style.display = "block";
}
function closePop(){
// 通过唯一id值获取弹出窗口元素
let popDiv = document.getElementById("bigDiv");
var popLayer = document.getElementById("popLayer");
// popDiv.style.display = "none";
popDiv.parentNode.removeChild(popDiv);
// popLayer.style.display = "none";
popLayer.parentNode.removeChild(popLayer);
}
</script>
<style type="text/css">
/* body{
padding: 0px;
margin: 0px;
} */
#popLayer {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index: 1060;
min-width: 100%;
min-height: 100%;
position: absolute;
background-color:#000;
width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面 */
height: 100%;
filter:alpha(opacity=40); /*设置透明度为60% */
opacity:0.4; /*非IE浏览器下设置透明度为60% */
display:none;
}
#bigDiv{
border-radius: 25px;
display: none;
background-color: white;
z-index: 1060;
width: 900px;
height: 600px;
/* filter:alpha(opacity=60); 设置透明度为60% */
/* opacity:0.6; 非IE浏览器下设置透明度为60% */
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
padding: 10px;
border: 1px solid #ccc;
}
#popDiv{
overflow:auto;
}
#popDiv table {
/* width: 1470px; */
}
#popDiv table tr {
height:35px;
background-color:#e7f3fc!important
}
/* 关闭按钮样式 */
/* #bigDiv .close a {
text-decoration: none;
color: #2D2C3B;
} */
/* 弹出界面的关闭按钮 */
#bigDiv .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
</style>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
