修改页面横向滑动工具
This commit is contained in:
parent
a749fa6292
commit
019583dfd8
221
页面横向滑动.html
221
页面横向滑动.html
@ -1,221 +0,0 @@
|
|||||||
<script src="/myJavaScript/anime.min.js">
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
/*
|
|
||||||
每一步内容都必须存放在一个标签页，标签页横向排列，标签页前后各空出一列
|
|
||||||
每个标签都要在默认的style属性上设置为opacity:0，以默认隐藏步骤内容
|
|
||||||
每个步骤的内容默认隐藏
|
|
||||||
方法参数为对象：{curStepFieldId:"field216855",cols:4,vars:[{tab:"tab1",cnt:"cnt1",top:1},{tab:"tab2",cnt:"cnt2",top:0}],els:["title","identifier"]}
|
|
||||||
curStepFieldId为当前步骤字段id
|
|
||||||
cols为表格有效范围内的列数
|
|
||||||
vars为每个步骤对应的一组参数，vars参数组顺序与标签页DOM节点顺序一致
|
|
||||||
其中第一组参数代表意思为：tab1为标签页class，cnt1为步骤一页面的全部内容，1表示隐藏标签页顶部标签(0表示不隐藏)
|
|
||||||
els为其他需要在方法中将display属性还原的单元格class
|
|
||||||
|
|
||||||
注意：
|
|
||||||
这个方法需要结合以下CSS样式使用，以解决明细表头的问题
|
|
||||||
.excelDetailFixedHead {
|
|
||||||
position: sticky !important;
|
|
||||||
top: 0px !important;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
function pageLateralSlider(obj) {
|
|
||||||
document.getElementsByClassName("wf-req-top-button")[0].parentNode.parentNode.id = "submitBtn";
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
const steps = obj.vars.length;
|
|
||||||
//基础判断
|
|
||||||
if (obj.cols !== steps + 2) {
|
|
||||||
console.log("cols数量与vars参数组数量矛盾");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let myIntv = setInterval(() => {
|
|
||||||
//页面元素加载判断
|
|
||||||
for (let i = 0; i < steps; i++) {
|
|
||||||
if ($("." + obj.vars[i].tab).length === 0 || $("." + obj.vars[i].cnt).length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let i = 0; i < obj.els.length; i++) {
|
|
||||||
if ($("." + obj.els[i]).length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if ($(".tab_top").length !== steps) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($("#buttonCell").length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($(".excelMainTable>colgroup col").length !== obj.cols) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($(".wf-req-form").length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($(".wf-req-top-button").length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
clearInterval(myIntv);
|
|
||||||
//自适应列宽
|
|
||||||
const screen_width = $(".wf-req-form")[0].offsetWidth;
|
|
||||||
const padding_width = Math.floor(0.02 * screen_width);
|
|
||||||
const content_width = screen_width - 2 * padding_width;
|
|
||||||
$(".excelMainTable>colgroup col")[0].style.width = `${padding_width}px`;
|
|
||||||
$(".excelMainTable>colgroup col")[obj.cols - 1].style.width = `${padding_width}px`;
|
|
||||||
for (let i = 1; i <= steps; i++) {
|
|
||||||
$(".excelMainTable>colgroup col")[i].style.width = `${content_width}px`;
|
|
||||||
}
|
|
||||||
//隐藏标签页顶部标签
|
|
||||||
obj.vars.forEach((e, index) => {
|
|
||||||
if (e.top === 1) {
|
|
||||||
$(".tab_top")[index].style.display = "none";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//显示其他需要还原display属性的单元格
|
|
||||||
obj.els.forEach(e => {
|
|
||||||
$("." + e).css("display", "");
|
|
||||||
});
|
|
||||||
//显示当前步骤内容
|
|
||||||
var curStepVar = + WfForm.getFieldValue(obj.curStepFieldId);
|
|
||||||
if (curStepVar === 0) {
|
|
||||||
$("." + obj.vars[curStepVar].cnt).css("display", "");
|
|
||||||
$("." + obj.vars[curStepVar].tab).css("opacity", "1");
|
|
||||||
} else {
|
|
||||||
let distance_0 = -curStepVar * content_width;
|
|
||||||
obj.vars.forEach(e => {
|
|
||||||
anime({
|
|
||||||
targets: '.' + e.tab + '_swap',
|
|
||||||
translateX: distance_0,
|
|
||||||
duration: 0,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$("." + obj.vars[curStepVar].cnt).css("display", "");
|
|
||||||
$("." + obj.vars[curStepVar].tab).css("opacity", "1");
|
|
||||||
}
|
|
||||||
//核心功能
|
|
||||||
$("#buttonCell").append("<span class='ant-btn preStep' style='display:none;'>上一步</span><span class='step-blank' style='display:none;'>  </span><span class='ant-btn nexStep' style='display:none;'>下一步</span>");
|
|
||||||
if (curStepVar === 0) {
|
|
||||||
$(".preStep").css({ "display": "none" });
|
|
||||||
$(".step-blank").css({ "display": "none" });
|
|
||||||
$(".nexStep").css({ "display": "inline" });
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
} else if (curStepVar === steps - 1) {
|
|
||||||
$(".preStep").css({ "display": "inline" });
|
|
||||||
$(".step-blank").css({ "display": "none" });
|
|
||||||
$(".nexStep").css({ "display": "none" });
|
|
||||||
$("#submitBtn").css("cssText", "display:inline-block !important;");
|
|
||||||
} else {
|
|
||||||
$(".preStep").css({ "display": "inline" });
|
|
||||||
$(".step-blank").css({ "display": "inline" });
|
|
||||||
$(".nexStep").css({ "display": "inline" });
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
}
|
|
||||||
//点击事件
|
|
||||||
var click_judg = 0;
|
|
||||||
$(".nexStep").click(() => {
|
|
||||||
if (click_judg === 0) {
|
|
||||||
click_judg++;
|
|
||||||
curStepVar++;
|
|
||||||
obj.vars.forEach((e, index) => {
|
|
||||||
if (index !== curStepVar) {
|
|
||||||
anime({
|
|
||||||
targets: '.' + e.tab + '_swap',
|
|
||||||
translateX: - curStepVar * content_width,
|
|
||||||
opacity: 0,
|
|
||||||
duration: 500,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$("." + obj.vars[curStepVar].cnt).css("display", "");
|
|
||||||
$("." + obj.vars[curStepVar].tab).css("opacity", '1');
|
|
||||||
anime({
|
|
||||||
targets: '.' + obj.vars[curStepVar].tab + '_swap',
|
|
||||||
translateX: - curStepVar * content_width,
|
|
||||||
opacity: [0, 1],
|
|
||||||
duration: 500,
|
|
||||||
easing: 'easeInOutQuad'
|
|
||||||
});
|
|
||||||
$("." + obj.vars[curStepVar - 1].cnt).css("display", "none");
|
|
||||||
if (curStepVar === 0) {
|
|
||||||
$(".preStep").css({ "display": "none" });
|
|
||||||
$(".step-blank").css({ "display": "none" });
|
|
||||||
$(".nexStep").css({ "display": "inline" });
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
} else if (curStepVar === steps - 1) {
|
|
||||||
$(".preStep").css({ "display": "inline" });
|
|
||||||
$(".step-blank").css({ "display": "none" });
|
|
||||||
$(".nexStep").css({ "display": "none" });
|
|
||||||
$("#submitBtn").css("cssText", "display:inline-block !important;");
|
|
||||||
} else {
|
|
||||||
$(".preStep").css({ "display": "inline" });
|
|
||||||
$(".step-blank").css({ "display": "inline" });
|
|
||||||
$(".nexStep").css({ "display": "inline" });
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
}
|
|
||||||
WfForm.changeFieldValue(obj.curStepFieldId, { value: curStepVar });
|
|
||||||
click_judg--;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(".preStep").click(() => {
|
|
||||||
if (click_judg === 0) {
|
|
||||||
click_judg++;
|
|
||||||
curStepVar--;
|
|
||||||
obj.vars.forEach((e, index) => {
|
|
||||||
if (index !== curStepVar) {
|
|
||||||
anime({
|
|
||||||
targets: '.' + e.tab + '_swap',
|
|
||||||
translateX: - curStepVar * content_width,
|
|
||||||
opacity: 0,
|
|
||||||
duration: 500,
|
|
||||||
easing: 'easeInOutQuad',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$("." + obj.vars[curStepVar].cnt).css("display", "");
|
|
||||||
$("." + obj.vars[curStepVar].tab).css("opacity", '1');
|
|
||||||
anime({
|
|
||||||
targets: '.' + obj.vars[curStepVar].tab + '_swap',
|
|
||||||
translateX: - curStepVar * content_width,
|
|
||||||
opacity: [0, 1],
|
|
||||||
duration: 500,
|
|
||||||
easing: 'easeInOutQuad'
|
|
||||||
});
|
|
||||||
$("." + obj.vars[curStepVar + 1].cnt).css("display", "none");
|
|
||||||
if (curStepVar === 0) {
|
|
||||||
$(".preStep").css({ "display": "none" });
|
|
||||||
$(".step-blank").css({ "display": "none" });
|
|
||||||
$(".nexStep").css({ "display": "inline" });
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
} else if (curStepVar === steps - 1) {
|
|
||||||
$(".preStep").css({ "display": "inline" });
|
|
||||||
$(".step-blank").css({ "display": "none" });
|
|
||||||
$(".nexStep").css({ "display": "none" });
|
|
||||||
$("#submitBtn").css("cssText", "display:inline-block !important;");
|
|
||||||
} else {
|
|
||||||
$(".preStep").css({ "display": "inline" });
|
|
||||||
$(".step-blank").css({ "display": "inline" });
|
|
||||||
$(".nexStep").css({ "display": "inline" });
|
|
||||||
$("#submitBtn").css("cssText", "display:none !important;");
|
|
||||||
}
|
|
||||||
WfForm.changeFieldValue(obj.curStepFieldId, { value: curStepVar });
|
|
||||||
click_judg--;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/*隐藏提交按钮*/
|
|
||||||
.ant-col-xs-18>div>span:nth-of-type(1) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*修复明细浮动表头问题*/
|
|
||||||
.excelDetailFixedHead {
|
|
||||||
position: sticky !important;
|
|
||||||
top: 0px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
363
页面横向滑动.js
Normal file
363
页面横向滑动.js
Normal file
@ -0,0 +1,363 @@
|
|||||||
|
/*
|
||||||
|
每一步内容都必须存放在一个标签页，标签页横向排列，标签页前后各空出一列
|
||||||
|
每个标签都要在默认的style属性上设置为opacity:0，以默认隐藏步骤内容
|
||||||
|
每个步骤的内容默认隐藏
|
||||||
|
方法参数为对象：
|
||||||
|
{
|
||||||
|
curStepFieldId: curStep_FI,
|
||||||
|
cols: 5,
|
||||||
|
title_class: ".title",
|
||||||
|
title_value: ["OA开发需求", "流程开发需求", "台账开发需求"],
|
||||||
|
vars: [{
|
||||||
|
page: "tab1",
|
||||||
|
cnt: "cnt1",
|
||||||
|
top: 1,
|
||||||
|
titleIndex: 0,
|
||||||
|
mainTabCol: 1,
|
||||||
|
default_tab: 5,
|
||||||
|
tab_required_info: [
|
||||||
|
{
|
||||||
|
tabid: 5,
|
||||||
|
main_feild: [xqlx_FI, cdfj_FI, ssbk_FI, glbm_FI, syjg_FI, sybm_FI, aim_FI],
|
||||||
|
det_field: [],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}],
|
||||||
|
els: ["title"],
|
||||||
|
}
|
||||||
|
curStepFieldId为当前步骤字段id
|
||||||
|
cols为表格有效范围内的列数
|
||||||
|
title_class为流程页面标题的jQuery选择器
|
||||||
|
title_value为所有步骤相关的标题名称
|
||||||
|
vars为每个步骤对应的一组参数，vars参数组顺序与标签页DOM节点顺序一致
|
||||||
|
其中第一组参数代表意思为：tab1为标签页class，cnt1为步骤一页面全部内容的统一class，top值1表示隐藏标签页顶部标签(0表示不隐藏)，titleIndex值0为该标签对应的标题名称在title_value中的序号(从0开始)，mainTabCol为标签页在主表中的列数(从0开始),default_tab为默认子标签,tab_required_info用于处理标签页内子标签的必填字段排查、必增明细排查
|
||||||
|
els为其他需要在方法中将display属性还原的单元格class
|
||||||
|
|
||||||
|
注意：
|
||||||
|
(1)当步骤发生变化时，需修改参数对象 sld_obj ，并执行一遍 initialization(sld_obj)的列宽设置
|
||||||
|
(2)这个方法需要结合以下CSS样式使用，以解决明细表头的问题
|
||||||
|
.excelDetailFixedHead {
|
||||||
|
position: sticky !important;
|
||||||
|
top: 0px !important;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
function pageLateralSlider(sld_obj) {
|
||||||
|
document.getElementsByClassName("wf-req-top-button")[0].parentNode.parentNode.id = "submitBtn";
|
||||||
|
$("#submitBtn").css("cssText", "display:none !important;");
|
||||||
|
var steps = sld_obj.vars.length;
|
||||||
|
let myIntv1 = setInterval(() => {
|
||||||
|
//页面元素加载判断
|
||||||
|
for (let i = 0; i < steps; i++) {
|
||||||
|
if ($("." + sld_obj.vars[i].page).length === 0 || $("." + sld_obj.vars[i].cnt).length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < sld_obj.els.length; i++) {
|
||||||
|
if ($("." + sld_obj.els[i]).length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($("#buttonCell").length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($(sld_obj.title_class + " span").length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($(".excelMainTable>colgroup col").length !== sld_obj.cols) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($(".wf-req-form").length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($(".wf-req-top-button").length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
clearInterval(myIntv1);
|
||||||
|
//自适应列宽
|
||||||
|
const screen_width = $(".wf-req-form")[0].offsetWidth;
|
||||||
|
const padding_width = Math.floor(0.02 * screen_width);
|
||||||
|
const content_width = screen_width - 2 * padding_width;
|
||||||
|
Object.assign(sld_obj, {
|
||||||
|
content_width: content_width,
|
||||||
|
});
|
||||||
|
$(".excelMainTable>colgroup col")[0].style.width = `${padding_width}px`;
|
||||||
|
$(".excelMainTable>colgroup col")[sld_obj.cols - 1].style.width = `${padding_width}px`;
|
||||||
|
initialization(sld_obj);
|
||||||
|
//添加消除prompt的字段集
|
||||||
|
Object.assign(sld_obj, {
|
||||||
|
eraser_fis: [],
|
||||||
|
});
|
||||||
|
//获取当前步骤标题信息
|
||||||
|
Object.assign(sld_obj, {
|
||||||
|
curStep: 0,
|
||||||
|
});
|
||||||
|
var curStepVar = + WfForm.getFieldValue(sld_obj.curStepFieldId);
|
||||||
|
//添加功能按钮
|
||||||
|
$("#buttonCell").append("<span class='ant-btn preStep' style='display:none;'>上一步</span><span class='step-blank' style='display:none;'>  </span><span class='ant-btn nexStep' style='display:none;'>下一步</span>");
|
||||||
|
//添加按钮功能
|
||||||
|
pageLateralSliderClick(sld_obj);
|
||||||
|
//显示其他需要还原display属性的单元格
|
||||||
|
sld_obj.els.forEach(e => {
|
||||||
|
$("." + e).css("display", "");
|
||||||
|
});
|
||||||
|
//显示当前步骤内容
|
||||||
|
$("." + sld_obj.vars[0].cnt).css("display", "");
|
||||||
|
$("." + sld_obj.vars[0].page).css("opacity", "1");
|
||||||
|
$(".preStep").css({ "display": "none" });
|
||||||
|
$(".step-blank").css({ "display": "none" });
|
||||||
|
$(".nexStep").css({ "display": "inline" });
|
||||||
|
$("#submitBtn").css("cssText", "display:none !important;");
|
||||||
|
if (curStepVar > 0) {
|
||||||
|
for (let i = 0; i < curStepVar; i++) {
|
||||||
|
if (i === 0) {
|
||||||
|
$(".nexStep")[0].click();
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
$(".nexStep")[0].click();
|
||||||
|
}, i * 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initialization(init_obj) {
|
||||||
|
//设置列宽
|
||||||
|
let useful_cols = [];
|
||||||
|
init_obj.vars.forEach(e => {
|
||||||
|
useful_cols.push(e.mainTabCol);
|
||||||
|
});
|
||||||
|
for (let i = 1; i <= init_obj.cols - 2; i++) {
|
||||||
|
if (useful_cols.includes(i)) {
|
||||||
|
$(".excelMainTable>colgroup col")[i].style.width = `${init_obj.content_width}px`;
|
||||||
|
} else {
|
||||||
|
$(".excelMainTable>colgroup col")[i].style.width = `1px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//隐藏标签页顶部标签
|
||||||
|
init_obj.vars.forEach(e => {
|
||||||
|
if (e.top === 1) {
|
||||||
|
$("." + e.page + " .tab_top")[0].style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function pageLateralSliderClick(clc_obj) {
|
||||||
|
var clc_content_width = clc_obj.content_width;
|
||||||
|
$(".nexStep").off("click");
|
||||||
|
$(".preStep").off("click");
|
||||||
|
//点击事件
|
||||||
|
var click_judg = 0;
|
||||||
|
$(".nexStep").click(() => {
|
||||||
|
if (click_judg === 0) {
|
||||||
|
if (showEmptyRequiredField(clc_obj) == false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
click_judg++;
|
||||||
|
clc_obj.curStep++;
|
||||||
|
$(clc_obj.title_class + " span")[0].innerHTML = clc_obj.title_value[clc_obj.vars[clc_obj.curStep].titleIndex];
|
||||||
|
let offset = (clc_obj.vars[clc_obj.curStep].mainTabCol - 1 - clc_obj.curStep);
|
||||||
|
clc_obj.vars.forEach((e, index) => {
|
||||||
|
if (index !== clc_obj.curStep) {
|
||||||
|
anime({
|
||||||
|
targets: '.' + e.page,
|
||||||
|
translateX: - clc_obj.curStep * clc_content_width - offset,
|
||||||
|
opacity: 0,
|
||||||
|
duration: 500,
|
||||||
|
easing: 'easeInOutQuad',
|
||||||
|
complete: () => {
|
||||||
|
$("." + e.cnt).css("display", "none");
|
||||||
|
$("#tab_" + e.default_tab).click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("." + clc_obj.vars[clc_obj.curStep].cnt).css("display", "");
|
||||||
|
anime({
|
||||||
|
targets: '.' + clc_obj.vars[clc_obj.curStep].page,
|
||||||
|
translateX: - clc_obj.curStep * clc_content_width - offset,
|
||||||
|
opacity: 1,
|
||||||
|
duration: 500,
|
||||||
|
easing: 'easeInOutQuad',
|
||||||
|
complete: () => {
|
||||||
|
$('.' + clc_obj.vars[clc_obj.curStep].cnt).css("display", "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (clc_obj.curStep === 0) {
|
||||||
|
$(".preStep").css({ "display": "none" });
|
||||||
|
$(".step-blank").css({ "display": "none" });
|
||||||
|
$(".nexStep").css({ "display": "inline" });
|
||||||
|
$("#submitBtn").css("cssText", "display:none !important;");
|
||||||
|
} else if (clc_obj.curStep === clc_obj.vars.length - 1) {
|
||||||
|
$(".preStep").css({ "display": "inline" });
|
||||||
|
$(".step-blank").css({ "display": "none" });
|
||||||
|
$(".nexStep").css({ "display": "none" });
|
||||||
|
$("#submitBtn").css("cssText", "display:inline-block !important;");
|
||||||
|
} else {
|
||||||
|
$(".preStep").css({ "display": "inline" });
|
||||||
|
$(".step-blank").css({ "display": "inline" });
|
||||||
|
$(".nexStep").css({ "display": "inline" });
|
||||||
|
$("#submitBtn").css("cssText", "display:none !important;");
|
||||||
|
}
|
||||||
|
WfForm.changeFieldValue(clc_obj.curStepFieldId, { value: clc_obj.curStep });
|
||||||
|
click_judg--;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$(".preStep").click(() => {
|
||||||
|
$(`.myprom`).remove();
|
||||||
|
if (click_judg === 0) {
|
||||||
|
click_judg++;
|
||||||
|
clc_obj.curStep--;
|
||||||
|
$(clc_obj.title_class + " span")[0].innerHTML = clc_obj.title_value[clc_obj.vars[clc_obj.curStep].titleIndex];
|
||||||
|
let offset = (clc_obj.vars[clc_obj.curStep].mainTabCol - 1 - clc_obj.curStep);
|
||||||
|
clc_obj.vars.forEach((e, index) => {
|
||||||
|
if (index !== clc_obj.curStep) {
|
||||||
|
anime({
|
||||||
|
targets: '.' + e.page,
|
||||||
|
translateX: - clc_obj.curStep * clc_content_width - offset,
|
||||||
|
opacity: 0,
|
||||||
|
duration: 500,
|
||||||
|
easing: 'easeInOutQuad',
|
||||||
|
complete: () => {
|
||||||
|
$("." + e.cnt).css("display", "none");
|
||||||
|
$("#tab_" + e.default_tab).click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("." + clc_obj.vars[clc_obj.curStep].cnt).css("display", "");
|
||||||
|
anime({
|
||||||
|
targets: '.' + clc_obj.vars[clc_obj.curStep].page,
|
||||||
|
translateX: - clc_obj.curStep * clc_content_width - offset,
|
||||||
|
opacity: 1,
|
||||||
|
duration: 500,
|
||||||
|
easing: 'easeInOutQuad',
|
||||||
|
complete: () => {
|
||||||
|
$('.' + clc_obj.vars[clc_obj.curStep].cnt).css("display", "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (clc_obj.curStep === 0) {
|
||||||
|
$(".preStep").css({ "display": "none" });
|
||||||
|
$(".step-blank").css({ "display": "none" });
|
||||||
|
$(".nexStep").css({ "display": "inline" });
|
||||||
|
$("#submitBtn").css("cssText", "display:none !important;");
|
||||||
|
} else if (clc_obj.curStep === clc_obj.vars.length - 1) {
|
||||||
|
$(".preStep").css({ "display": "inline" });
|
||||||
|
$(".step-blank").css({ "display": "none" });
|
||||||
|
$(".nexStep").css({ "display": "none" });
|
||||||
|
$("#submitBtn").css("cssText", "display:inline-block !important;");
|
||||||
|
} else {
|
||||||
|
$(".preStep").css({ "display": "inline" });
|
||||||
|
$(".step-blank").css({ "display": "inline" });
|
||||||
|
$(".nexStep").css({ "display": "inline" });
|
||||||
|
$("#submitBtn").css("cssText", "display:none !important;");
|
||||||
|
}
|
||||||
|
WfForm.changeFieldValue(clc_obj.curStepFieldId, { value: clc_obj.curStep });
|
||||||
|
click_judg--;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEmptyRequiredField(serf_obj) {
|
||||||
|
let serf_arr = serf_obj.vars[serf_obj.curStep].tab_required_info;
|
||||||
|
for (let e of serf_arr) {
|
||||||
|
for (let me of e.main_feild) {
|
||||||
|
if (WfForm.getFieldValue(me) == "") {
|
||||||
|
$(`.myprom`).remove();
|
||||||
|
showPrompt(me, "必填字段不能空！", e.tabid);
|
||||||
|
checkPrompt();
|
||||||
|
if (!serf_obj.eraser_fis.includes(me)) {
|
||||||
|
serf_obj.eraser_fis.push(me);
|
||||||
|
WfForm.bindFieldChangeEvent(me, function (obj, id, value) {
|
||||||
|
if (value !== "") {
|
||||||
|
eraseFieldPrompt(me);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let de of e.det_field) {
|
||||||
|
let detRows_str = WfForm.getDetailAllRowIndexStr("detail_" + de.det_id);
|
||||||
|
if (detRows_str.length > 0) {
|
||||||
|
let detRows_arr = detRows_str.split(",");
|
||||||
|
for (let rowI of detRows_arr) {
|
||||||
|
for (let de_f of de.field_id) {
|
||||||
|
if (WfForm.getFieldValue(de_f + "_" + rowI) == "") {
|
||||||
|
$(`.myprom`).remove();
|
||||||
|
showPrompt(de_f, "必填字段不能空！", e.tabid, rowI);
|
||||||
|
checkPrompt();
|
||||||
|
if (!serf_obj.eraser_fis.includes(de_f)) {
|
||||||
|
serf_obj.eraser_fis.push(de_f);
|
||||||
|
WfForm.bindDetailFieldChangeEvent(de_f, function (id, rowIndex, value) {
|
||||||
|
if (value !== "") {
|
||||||
|
eraseFieldPrompt(de_f, rowIndex);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (de.noEmpty == true) {
|
||||||
|
WfForm.showMessage(de.det_name + "不能为空！", 2, 5);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPrompt(SP_fieldid, SP_content, SP_tabid, SP_rowIndex) {//添加提示,SP_rowIndex选填；如要填SP_rowIndex，SP_tabid必填，可填null
|
||||||
|
if (SP_rowIndex === null || SP_rowIndex === undefined) {
|
||||||
|
$(`.myprom_${SP_fieldid}`).remove();
|
||||||
|
if ($(`.${SP_fieldid}_swapDiv`).length > 0) {
|
||||||
|
$(`.${SP_fieldid}_swapDiv`).after(`<div class="prompt-box myprom myprom_${SP_fieldid}" data_tab_id=${SP_tabid}><div class="prompt-arrow" style="top: -3px;"></div><div class="prompt-content"><i class="anticon anticon-exclamation-circle"></i><span class="prompt-content-label">${SP_content}</span><span class="prompt-content-info"></span></div></div>`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$(`.myprom_${SP_fieldid}_${SP_rowIndex}`).remove();
|
||||||
|
if ($(`.${SP_fieldid}_${SP_rowIndex}_swapDiv`).length > 0) {
|
||||||
|
$(`.${SP_fieldid}_${SP_rowIndex}_swapDiv`).after(`<div class="prompt-box myprom myprom_${SP_fieldid}_${SP_rowIndex}" data_tab_id=${SP_tabid}><div class="prompt-arrow" style="top: -3px;"></div><div class="prompt-content"><i class="anticon anticon-exclamation-circle"></i><span class="prompt-content-label">${SP_content}</span><span class="prompt-content-info"></span></div></div>`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function eraseFieldPrompt(EFP_fieldid, EFP_rowIndex) {//移除提示,SP_rowIndex选填
|
||||||
|
if (EFP_rowIndex === null || EFP_rowIndex === undefined) {
|
||||||
|
$(`.myprom_${EFP_fieldid}`).remove();
|
||||||
|
} else {
|
||||||
|
$(`.myprom_${EFP_fieldid}_${EFP_rowIndex}`).remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkPrompt() {//提交前判断，先做一次if ($(".myprom").length > 0) {}判断，true则触发该方法，并禁断提交，false不执行
|
||||||
|
let tab_id = $(".myprom")[0].getAttribute("data_tab_id");
|
||||||
|
if (tab_id === "null" || tab_id === "undefined") {
|
||||||
|
let scroll_to_windowTop = $(".wf-req-form-scroll")[0].getBoundingClientRect().top;//scroll框距离window顶部的距离
|
||||||
|
let dom_to_scrollTop = $(".myprom")[0].getBoundingClientRect().top - scroll_to_windowTop;//DOM节点距离scroll框顶部的距离
|
||||||
|
let scroll_display_height = window.innerHeight - scroll_to_windowTop;//scroll框最大显示高度
|
||||||
|
if (dom_to_scrollTop < scroll_display_height / 4 || dom_to_scrollTop > scroll_display_height / 4 * 3) {
|
||||||
|
$(".wf-req-form-scroll")[0].scrollTo({
|
||||||
|
top: dom_to_scrollTop + $(".wf-req-form-scroll")[0].scrollTop - scroll_display_height / 2,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$("#tab_" + tab_id)[0].click();
|
||||||
|
let myInterval2;
|
||||||
|
myInterval2 = setInterval(() => {
|
||||||
|
if ($("#tab_" + tab_id + "_content").css("display") == "block") {
|
||||||
|
clearInterval(myInterval2);
|
||||||
|
let scroll_to_windowTop = $(".wf-req-form-scroll")[0].getBoundingClientRect().top;//scroll框距离window顶部的距离
|
||||||
|
let dom_to_scrollTop = $(".myprom")[0].getBoundingClientRect().top - scroll_to_windowTop;//DOM节点距离scroll框顶部的距离
|
||||||
|
let scroll_display_height = window.innerHeight - scroll_to_windowTop;//scroll框最大显示高度
|
||||||
|
if (dom_to_scrollTop < scroll_display_height / 4 || dom_to_scrollTop > scroll_display_height / 4 * 3) {
|
||||||
|
$(".wf-req-form-scroll")[0].scrollTo({
|
||||||
|
top: dom_to_scrollTop + $(".wf-req-form-scroll")[0].scrollTop - scroll_display_height / 2,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user