• 基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(一)


           

    更多ruoyi-nbcio功能请看演示系统

    gitee源代码地址

    前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

    演示地址:RuoYi-Nbcio后台管理系统

            原先不支持自定义业务表单的流程流转,因为这样对很多用户就更加方便,流程还是用现有的流程,但表单可以自己单独设计,满足各种不同的业务需求。 

         1、增加一个接口传入当前设计的流程应用类型

         

    1. /**
    2. * 获取流程分类详细信息
    3. * @param code 分类编码
    4. */
    5. @GetMapping("/appType/{code}")
    6. public R> getInfoByCode(@NotNull(message = "主键不能为空") @PathVariable("code") String code) {
    7. return R.ok(categoryService.queryInfoByCode(code));
    8. }

    2、相应的mapper.xml文件如下:

    3、前端传入相应的流程应用类型

    主要的ElementBaseInfo.vue修改如下:

    1. <script>
    2. import { commonParse } from '../parseElement'
    3. export default {
    4. name: "ElementBaseInfo",
    5. props: {
    6. businessObject: Object,
    7. appType: {
    8. type: Array,
    9. default: () => []
    10. },
    11. type: String,
    12. idEditDisabled: {
    13. type: Boolean,
    14. default: true
    15. }
    16. },
    17. data() {
    18. return {
    19. elementBaseInfo: {},
    20. };
    21. },
    22. watch: {
    23. businessObject: {
    24. immediate: false,
    25. handler: function(val) {
    26. if (val) {
    27. this.$nextTick(() => this.resetBaseInfo());
    28. }
    29. }
    30. }
    31. },
    32. methods: {
    33. resetBaseInfo() {
    34. this.bpmnElement = window?.bpmnInstances?.bpmnElement || {};
    35. const tempelement =commonParse(this.bpmnElement);//获取流程分类信息
    36. this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
    37. this.elementBaseInfo.processAppType = this.appType[0];//显示流程应用类型
    38. },
    39. updateBaseInfo(key) {
    40. const attrObj = Object.create(null);
    41. attrObj[key] = this.elementBaseInfo[key];
    42. if (key === "id") {
    43. window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
    44. id: this.elementBaseInfo[key],
    45. di: { id: `${this.elementBaseInfo[key]}_di` }
    46. });
    47. } else {
    48. window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
    49. }
    50. }
    51. },
    52. beforeDestroy() {
    53. this.bpmnElement = null;
    54. }
    55. };
    56. script>

    4、效果如下:

  • 相关阅读:
    单元测试我们需要知道哪些?
    请各位编写一下单片机c51代码
    Win2016服务器DNS服务搭建
    CTFHub | Refer注入
    代码随想录二刷:数组
    如何使用做一个弹幕效果
    有效需求分析培训梳理(二)
    居民健康监测小程序|基于微信小程序的居民健康监测小程序设计与实现(源码+数据库+文档)
    基于单片机的红外遥控解码程序设计与实现
    RequestMapping注解
  • 原文地址:https://blog.csdn.net/qq_40032778/article/details/133813740