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

作者: 陈yc | 来源:发表于2020-08-28 10:50 被阅读0次

初始化

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

方法1 （默认）：

在$(function() { ... }) 中引入jsp：

$(function(){
  <%@include file="/webpage/commonModule/pc/approval_script.jsp"%>
});

根据约定规则，配置元素ID

解释：

页面最外层元素id设置为：page_${random} （作为添加流程按钮、流转后关闭弹框的参照元素）
t:formvalid标签的formid设置为：form_${random}（要提交的表单元素）
存放业务申请ID的表单id设置为：idInput_${random}（第一步保存后，若接口返回有申请ID，将自动赋值到该元素，下次保存将与表单一同提交，避免重复新增）
${random}为随机数，避免冲突

方法2 （自定义）：

初始化流程对象与按钮组对象（无需引上述的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(['项目框架资料', '项目明细资料']);

网友评论

中盈盛达信息管理部技术分享

本文标题：业务系统前端流程逻辑开发文档

本文链接：https://www.haomeiwen.com/subject/ccicsktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！