芋道--如何自定义业务表单，配置对应的工作流程(详细步骤)

最新推荐文章于 2024-10-13 22:23:44 发布

阿土不土

最新推荐文章于 2024-10-13 22:23:44 发布

阅读量2.9k

点赞数 22

分类专栏：芋道文章标签： java 数据库前端

本文链接：https://blog.csdn.net/weixin_45889291/article/details/135540467

版权

芋道专栏收录该内容

7 篇文章 5 订阅

订阅专栏

本文详细描述了如何设计用于车辆申请的工作流表单，包括创建业务表结构，使用process_instance_id关联流程实例，以及在Vue应用中实现create和detail页面的开发。同时涉及代码生成、监听流程结果和权限管理等内容。

摘要由CSDN通过智能技术生成

需求描述:

芋道的动态表单就不再介绍了，相对来讲比较简单,跟着官网文档就可以实现，本文将详细的介绍如何新建独立的业务表记录申请的信息，并设计对应的工作流。

这里表中的每一条记录，都将通过流程实例编号(process_instance_id )和对应的流程实例进行关联。

而每一个流程实例也都会通过业务键（BUSINESS_KEY_）指向对应的业务记录

这里假设创建一个车辆申请工作流，来举例：

1.设计业务表：

CREATE TABLE `bpm_oa_apply` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '车辆申请表单主键',
  `user_id` bigint NOT NULL COMMENT '申请人的用户编号',
  `type` tinyint NOT NULL COMMENT '车辆类型',
  `reason` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '申请原因',
  `start_time` datetime NOT NULL COMMENT '开始时间',
  `end_time` datetime NOT NULL COMMENT '结束时间',
  `result` tinyint NOT NULL COMMENT '申请结果',
  `process_instance_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '流程实例的编号',
  `creator` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updater` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',
  `tenant_id` bigint NOT NULL DEFAULT '0' COMMENT '租户编号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='OA 车辆申请表';

process_instance_id 字段，关联流程引擎的流程实例对应的 ACT_HI_PROCINST 表的 PROC_INST_ID_ 字段
result 字段，申请结果，需要通过 Listener 监听回调结果

2.代码生成

利用系统中的代码生成，可以快速的生成对应的结构，将生成的代码粘贴到对应的模块，具体可以看芋道官网的开发文档中代码生成(单表)说明文档。代码生成【单表】（新增功能） | ruoyi-vue-pro 开发指南 (iocoder.cn)https://doc.iocoder.cn/new-feature/#_2-1-%E5%AF%BC%E5%85%A5%E8%A1%A8

生成的代码都导入完成后，我们创建审批流要用到的create和detail页面，这里我们仿照给的请假申请示例：

3.创建create和detail界面，具体如下：

create.vue：该页面用于填写业务表的信息，提交流程

<template>
  <div class="app-container">
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">

                    <el-form-item label="车辆类型" prop="type">
                      <el-select v-model="formData.type" placeholder="请选择车辆类型">
                            <el-option v-for="dict in typeDictData" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="申请原因" prop="reason">
                      <el-input v-model="formData.reason" placeholder="请输入申请原因" />
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime">
                      <el-date-picker clearable v-model="formData.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                      <el-date-picker clearable v-model="formData.endTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm">提 交</el-button>
                    </el-form-item>
      </el-form>
  </div>
</template>

<script>
  import { getDictDatas, DICT_TYPE } from '@/utils/dict'
  import * as OaApplyApi from '@/api/bpm/oaapply';
      export default {
    name: "OaApplyForm",
    components: {
    },
    data() {
      return {
        formData: {
            type: undefined,
            reason: undefined,
            startTime: undefined,
            endTime: undefined,
        },
        typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
                        };
    },
    methods: {
      /** 提交按钮 */
       submitForm() {
        this.$refs["formRef"].validate(valid => {
        if (!valid) {
          return;
        }
        const data = this.formData;
         OaApplyApi.createOaApply(data);
          this.$modal.msgSuccess("新增成功");
          this.dialogVisible = false;
          this.$emit('success');

      });
      },
    }
  };
</script>

detai.vue: 该页面用于查看业务表的信息

<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" label-width="100px">

      <el-form-item label="车辆类型" prop="type">
        <dict-tag :type="DICT_TYPE.BPM_OA_CAR_TYPE" :value="formData.type"/>
      </el-form-item>
      <el-form-item label="申请原因" prop="reason">
        {{ formData.reason}}
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        {{parseTime(formData.startTime, '{y}-{m}-{d}')}}
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        {{parseTime(formData.endTime, '{y}-{m}-{d}')}}
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getOaApply} from '@/api/bpm/apply';
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
export default {
  name: "BpmOALeaveDetail",
  components: {
  },
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
  },
  data() {
    return {
      carId: undefined, // 申请编号
      // 表单参数
      form: {
        startTime: undefined,
        endTime: undefined,
        type: undefined,
        reason: undefined,
      },

      typeDictData: getDictDatas(DICT_TYPE.BPM_OA_CAR_TYPE),
    };
  },
  created() {
    this.carId = this.id || this.$route.query.id;
    if (!this.carId) {
      this.$message.error('未传递 id 参数，无法查看 OA 信息');
      return;
    }
    this.getDetail();
  },
  methods: {
    /** 获得请假信息 */
    getDetail() {
      getOaApply(this.carId).then(response => {
        this.formData = response.data;
      });
    },
  }
};
</script>

3.配置路由

在 router/index.js 中定义 create.vue 和 detail.vue 的路由，配置如下：

 {
    path: '/bpm',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [{
        path: 'oa/leave/create',
        component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
        name: 'BpmOALeaveCreate',
        meta: {title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave'}
      }, {
        path: 'oa/leave/detail',
        component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
        name: 'BpmOALeaveDetail',
        meta: {title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave'}
      },
      {
        path: 'oa/oaapply/create',
        component: (resolve) => require(['@/views/bpm/oa/oaapply/create'], resolve),
        name: 'BpmOAApplyCreate',
        meta: {title: '发起 OA 申请', icon: 'form', activeMenu: '/bpm/oa/oaapply'}
      }, {
        path: 'oa/oaapply/detail',
        component: (resolve) => require(['@/views/bpm/oa/oaapply/detail'], resolve),
        name: 'BpmOAApplyDetail',
        meta: {title: '查看 OA 申请', icon: 'view', activeMenu: '/bpm/oa/oaapply'}
      }
    ]
  },