业务系统前端流程逻辑开发文档

初始化

该步骤将为你添加流程按钮，并初始化按钮的事件，无个性化需求的情况下，仅这一步即可。

方法1 （默认）：

  1. 在$(function() { ... }) 中引入jsp：
$(function(){
  <%@include file="/webpage/commonModule/pc/approval_script.jsp"%>
});
  1. 根据约定规则，配置元素ID
解释：
  • 页面最外层元素id设置为：page_${random} （作为添加流程按钮、流转后关闭弹框的参照元素）
  • t:formvalid标签的formid设置为：form_${random}（要提交的表单元素）
  • 存放业务申请ID的表单id设置为：idInput_${random}（第一步保存后，若接口返回有申请ID，将自动赋值到该元素，下次保存将与表单一同提交，避免重复新增）
  • ${random}为随机数，避免冲突

方法2 （自定义）：

  1. 初始化流程对象与按钮组对象（无需引上述的Jsp）
/* 初始化操作函数 */
var workflow= new Workflow({
    datagridId: /* 上级列表id（保存、流程等操作将自动刷新） 例：'#listID' */,
    pageId: /* 页面最外层元素id，作为添加流程按钮、流转后关闭弹框的参照元素  例：'#pageID' */,
    formId: /* 将要提交的表单id  例：'#formID' */
    taskId:  "${taskId}", /* 任务id，用于获取下一步执行人的提示 */
    taskOpinionId:  '${taskOpinion.id}', /* 意见id，用于保存意见 */
    idInput:  /* 表单保存接口返回的申请ID所存放的元素id   例：'#idInput' */
});
/* 初始化按钮 */
var approveButton= new ApproveButton({
    pageId:  /* 页面最外层元素id，作为添加流程按钮、流转后关闭弹框的参照元素  例：'#pageID' */,
    optFlag: '${param.optFlag}', // 页面只读/可编辑的标识
    isWorkFlow: '${isWorkFlow}', // 是否是流程任务
    isCanBack: '${isCanBack}', // 是否可驳回
    workflow: workflow
});

注意：页面的元素id必须与所自定义配置的pageId、formId、idInput等相匹配

初始化步骤的默认流程逻辑：
  • 保存：提交表单（提交id为配置项 “ formId ” 的标签，提交前不做任何校验）
  • 提交：必填校验 -> 保存表单 -> 发起流程 -> 刷新上级列表 -> 关闭弹窗 -> 刷新待办 -> 提示下一步执行人
  • 流转：判断结论（未填则提示填写，反对则转入终止事件） -> 流转 -> 刷新上级列表 -> 关闭弹窗 -> 刷新待办 -> 提示下一步执行人
  • 驳回：驳回 -> 刷新上级列表 -> 关闭弹窗 -> 刷新待办 -> 提示下一步执行人
    终止：终止 -> 刷新上级列表 -> 关闭弹窗 -> 刷新待办 -> 提示下一步执行人
提示：若默认流程逻辑无法满足个性化的需求，需要使用下面的方法，重置流程逻辑。

重置保存逻辑：

approveButton.setEvents({
  save: function() {
  /* 保存逻辑 */
  }
});

保存前校验：

approveButton.setEvents({
  save: function() {
    workflow.save({
      condition: function(resolve, reject) {
        if () {
          resolve(false); // 校验不通过
        }  else {
          resolve(true); // 校验通过
        }
      }
    });
  }
});

保存成功回调：

approveButton.setEvents({
  save: function() {
    workflow.save({
      success: function(d) { // d为保存接口返回的数据
        /* 保存成功后的逻辑 */
      }
    });
  }
});

仅保存意见：

approveButton.setEvents({
  save: function() {
    workflow.saveOpinion();
  }
});

保存意见且不弹出提示框：

approveButton.setEvents({
  save: function() {
    workflow.saveOpinion({
      noTips: true
    });
  }
});

保存表单且保存意见：

approveButton.setEvents({
  save: function() {
    workflow.save({ // 保存表单
      success: function(d) {
        workflow.saveOpinion(); // 保存意见
      }
    });
  }
});

保存前校验必填：

approveButton.setEvents({
  save: function() {
    workflow.save({}, false);
  }
});

保存后关闭弹窗：

approveButton.setEvents({
  save: function() {
    workflow.save({
      isClose: true
    });
  }
});

保存后不弹出提示框：

approveButton.setEvents({
  save: function() {
    workflow.save({}, undefined, {
      noTips: true
    });
  }
});

保存后不赋值申请ID：

approveButton.setEvents({
  save: function() {
    workflow.save({
      setKey: false
    });
  }
});

重置提交逻辑：

approveButton.setEvents({
  submit: function() {
  /* 提交逻辑 */
  }
});

提交前校验：

approveButton.setEvents({
  submit: function() {
    workflow.submit({
      condition: function(resolve, reject) {
        if () {
          resolve(false); // 校验不通过，无法提交
        }  else {
          resolve(true); // 校验通过，继续提交
        }
      }
    });
  }
});

提交前的保存表单前事件：

approveButton.setEvents({
  submit: function() {
    workflow.submit({
      beforeSave: function() {
        /* 保存前逻辑 */
      }
    });
  }
});

提交前的保存成功后回调逻辑：

approveButton.setEvents({
  submit: function() {
    workflow.submit({
      saveSuccess: function(d, resolve, reject) { // d为保存后接口返回的数据
        if () {
          resolve(false); // 不再提交
        }  else {
          resolve(true); // 继续提交
        }
      }
    });
  }
});

提交成功回调：

approveButton.setEvents({
  submit: function() {
    workflow.submit({
      success: function(d) { // d为保存接口返回的数据
        /* 保存成功后的逻辑 */
      }
    });
  }
});

添加提交参数：

approveButton.setEvents({
  submit: function() {
    workflow.submit({
      params: {
        flowKey: '',
        v_I_needDsz: '',
        parentBusinessKey: '',
        businessName: '',
        voteContent: ''
      }
    });
  }
});

重置流转逻辑：

approveButton.setEvents({
  nextFlow: function() {
  /* 提交逻辑 */
  }
});

流转前校验：

approveButton.setEvents({
  nextFlow: function() {
    workflow.nextFlow({
      condition: function(resolve, reject) {
        if () {
          resolve(false); // 校验不通过，无法流转
        }  else {
          resolve(true); // 校验通过，往下流转
        }
      }
    });
  }
});

流转成功回调：

approveButton.setEvents({
  nextFlow: function() {
    workflow.nextFlow({
      success: function(d) { // d为保存接口返回的数据
        /* 保存成功后的逻辑 */
      }
    });
  }
});

添加流转参数：

approveButton.setEvents({
  nextFlow: function() {
    workflow.nextFlow({
      params: {
        v_I_needScr: '',
        parentBusinessKey: '',
        businessName: '',
        voteContent: ''
      }
    });
  }
});

结论是反对但不终止流程：

approveButton.setEvents({
  nextFlow: function() {
    workflow.nextFlow({
      isEndProcess: 'N'
    });
  }
});

流转前先保存表单：

approveButton.setEvents({
  nextFlow: function() {
    workflow.save({ // 保存
      success: function(d) {
        workflow.nextFlow(); // 流转
      }
    }, false, { // false: 校验必填
      noTips: true // 不提示保存成功
    });
  }
});

重置驳回逻辑：

approveButton.setEvents({
  reject: function() {
  /* 提交逻辑 */
  }
});
驳回前校验：
approveButton.setEvents({
  reject: function() {
    workflow.reject({
      condition: function(resolve, reject) {
        if () {
          resolve(false); // 校验不通过
        }  else {
          resolve(true); // 校验通过
        }
      }
    });
  }
});

驳回前回调：

approveButton.setEvents({
  reject: function() {
    workflow.reject({
      beforeSend: function() {
        /* 驳回前的逻辑 */
      }
    });
  }
});

驳回成功回调：

approveButton.setEvents({
  reject: function() {
    workflow.reject({
      success: function(d) { // d为驳回接口返回的数据
        /* 驳回成功后的逻辑 */
      }
    });
  }
});

重置终止逻辑：

approveButton.setEvents({
  endFlow: function() {
  /* 提交逻辑 */
  }
});
终止前校验：
approveButton.setEvents({
  endFlow: function() {
    workflow.endFlow({
      condition: function(resolve, reject) {
        if () {
          resolve(false); // 校验不通过
        }  else {
          resolve(true); // 校验通过
        }
      }
    });
  }
});

终止前回调：

approveButton.setEvents({
  endFlow: function() {
    workflow.endFlow({
      beforeSend: function() {
        /* 驳回前的逻辑 */
      }
    });
  }
});

终止成功回调：

approveButton.setEvents({
  endFlow: function() {
    workflow.endFlow({
      success: function(d) { // d为终止接口返回的数据
        /* 终止成功后的逻辑 */
      }
    });
  }
});
注意：流转、驳回、终止等操作逻辑中，默认的 “结论” 表单和 “意见” 表单分别如下：

结论表单：

$(".approval_opinion [name='conclusionInput']")

意见表单：

$(".approval_opinion [name='opinionInput']")
若需要重置，则调用一下方法：
// 重置结论表单
workflow.setConclusionInput("#...");
// 重置意见表单
workflow.setOpinionInput("#...");

修改流程按钮：

初始化时，会根据optFlag、isWorkFlow、isCanBack等配置，添加相应的流程按钮，若需求与默认的不符，可重置流程按钮。

添加按钮：

approveButton.addButton({
  name: 'export',
  text: '导出',
  func: function() {
    // 按钮点击事件
  }
}, 2) // 2：按钮位置（从0开始）

删除按钮：

approveButton.removeButton('export'); // 传按钮的name值

删除多个按钮：

approveButton.removeButton(['save', 'submit', 'close']);

默认按钮name:

  • 保存：save
  • 提交：submit
  • 流转：nextFlow
  • 驳回：reject
  • 关闭：close

常用辅助方法：

填充表单数据：

$.initModule({
  moduleId: '#moduleId', // 填充表单所在的模块
  url: 'XXXXXXX', // 获取数据的url
  params: { // 请求参数
  },
  optFlag: '${myOptFlag}', // 只读标识， detail为只读
  formatter: function(data) { // 格式化数据
   // 格式化逻辑
    return data;
  },
  callback: function(d) { // 获取成功后回调，d为接口返回数据
  }
});

验证表单：

$('#formId').formValid(<Boolean>);

参数：

  • {Boolean} 是否不弹出验证气泡，默认flase

返回：

  • {Boolean} 表单填写是否正确

修改tab页签的url：

常见于保存申请表单后，开放附件页签并修改其url的参数

$.resetTabUrl('applyTabs', 1, ['businessKey', 'projectId'], [id1, id2]);

参数：

  • {String}param1: tabs标签ID
  • {Number}param2: 要修改的tab索引
  • {Array}param3: url的参数列表
  • {Array}param4: 参数列表对应的值

修改datagrid的url：

常见于保存申请表单后，刷新可编辑表格

$.resetDataGridUrl('datagridId', ['projectId', 'isRegulation'], [projectId, 'true'])

参数：

  • {String}param1: datagrid标签ID
  • {Array}param2: url的参数列表
  • {Array}param3: 参数列表对应的值

校验可编辑表格：

常见于保存、流转前的校验

if (validateDatagrid('datagridId')) { ... }

参数：

  • {String}param1: datagrid标签ID

返回：

  • {Boolean}校验结果

判断可编辑表格是否有数据：

常见于保存、流转前的必填校验

if ( !$('#datagrid').datagrid('getRows').length ) {
  tip('请编辑用章信息');
  return false;
}

获取可编辑表格的编辑数据：

常见于保存前设置可编辑表格的编辑数据

var sealInfo = getEditData("datagrid", true);
$('#pageId').find('[name="sealInput"]').val(sealInfo.insertedRows || []);
$('#pageId').find('[name="sealUpdate"]').val(sealInfo.updatedRows || []);
$('#pageId').find('[name="sealDelete"]').val(sealInfo.deletedRows || []);

禁用可编辑表格的某些列：

常见于某些流程环节的可编辑表格要禁用某些列

banColumn = ['name', 'portions', 'isStamp', 'remark'];
$.each(banColumn, function(index, item) {
  var e = $('#datagrid').datagrid('getColumnOption', item);
  e.editor = {};
});

根据projectId动态获取下拉框选项：

$.ajax({
  url: 'XXXXXXXXXXXXX&projectId=' + projectId,
  type: 'POST',
  dataType: 'json',
  success: function(data) {
    if (Array.isArray(data))
      $(combobox).combobox('loadData', data);
  }
 })

清空tab内容

常用于两个页签调用相同模块时产生冲突的情况

$('#tabId').clearTabOnSelect('项目框架资料');

$('#tabId').clearTabOnSelect(['项目框架资料', '项目明细资料']);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,056评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,842评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,938评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,296评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,292评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,413评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,824评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,493评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,686评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,281评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,820评论 3赞 305
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2赞 341