关于流程管理开发中条件判断的前后端配合的问题,求指点

Question

问题描述

一个流程审批单的开发,前端使用vue,后端使用phalapi.

流程表单是根据后端传回数据动态生成的,包括主表(表单,具有修改编辑功能),子表(具有增删改功能,暂时没做,因为没想好是使用表单还是表格去实现),审批人选择.

主要就是以上三个部分需要去判断.

例:

问题出现的环境背景及自己尝试过哪些方法

目前的问题是,几乎所有的东西都是后端传回来的,从我前端本身的角度上来看我是觉得直接在提交的时候把数据传到后端,然后后端再返回判断的结果(包括错误提示:哪一项不符合的原因).

但是目前做的是把条件判断的js代码直接写到数据库,然后后端直接返回,前端在对应位置用eval()方法直接运行后端返回的判断条件的语句来获取判断结果.

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

// 使用后端返回的判断转出条件
// eslint-disable-next-line no-unused-vars
var judgeData = this.judgeData
// eslint-disable-next-line no-unused-vars
var stepData = this.stepData
// eslint-disable-next-line no-eval
if (eval(this.logiceout)) {
  // 转出条件满足,判断转入条件是否能转入某一步
  const stopList = []
  this.stepFormList
    .map(item => {
      // eslint-disable-next-line no-eval
      if (eval(item.logicein)) {
        return true
      } else {
        // 该步骤转出条件不满足,取消它的勾选状态
        item.checked = false
        return item.step
      }
    })
    .map(item => {
      if (!(item === true)) {
        stopList.push(item)
      }
    })
  if (stopList.length > 0) {
    // 含有不满足转入条件的步骤,提示转出条件不满足
    this.$message.warn('转入条件不满足!')
  } else {
    this.approvalData =
      parseInt(this.approvalData.approval_type) === 1 && sign === 2
        ? Object.assign(this.approvalData, { next, approval_sign: sign })
        : Object.assign(this.approvalData, { approval_sign: sign })
    // 处理审核
    handleApproval(this.approvalData).then(res => {
      this.$message.success(res.data.msg)
      this.visible = false
    })
  }
} else {
  this.$message.warn('转出条件不满足!')
}

你期待的结果是什么？实际看到的错误信息又是什么？

无论是ESLint检查来看还是从我接触前端开始都知道是不建议使用eval()函数的,这样会带来一些无法预测和监控的错误.

从实际看到的的确也是这样,虽然有很方便解决需求的时候,但是一个不小心后端返回的是有一点点不符合前端预期的,都会产生无法预测和判断的错误.

所以现在需要指点一下有没有更好的前后端配合的处理方案