diff --git a/页面横向滑动.html b/页面横向滑动.html
deleted file mode 100644
index 8ec93f7..0000000
--- a/页面横向滑动.html
+++ /dev/null
@@ -1,221 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/页面横向滑动.js b/页面横向滑动.js
new file mode 100644
index 0000000..c9caa22
--- /dev/null
+++ b/页面横向滑动.js
@@ -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("上一步 下一步");
+ //添加按钮功能
+ 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(``);
+ }
+ } else {
+ $(`.myprom_${SP_fieldid}_${SP_rowIndex}`).remove();
+ if ($(`.${SP_fieldid}_${SP_rowIndex}_swapDiv`).length > 0) {
+ $(`.${SP_fieldid}_${SP_rowIndex}_swapDiv`).after(``);
+ }
+ }
+}
+
+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);
+ }
+}
\ No newline at end of file