门户网站建设依据,做公司网站哪家好重庆九龙坡区,erp软件有哪些品牌,梵客家装全包套餐更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统
之前讲了自定义业务表单#xff0c;现在讲如何与流程进行关联
1、后端部分
WfCustomFormMapper.xml https://gitee.com/nbacheng/ruoyi-nbcio
演示地址RuoYi-Nbcio后台管理系统
之前讲了自定义业务表单现在讲如何与流程进行关联
1、后端部分
WfCustomFormMapper.xml
update idupdateCustom parameterTypeObjectupdate wf_custom_form set deploy_id #{customFormVo.deployId}, flow_name#{customFormVo.flowName} where id #{customFormVo.id}/updateWfCustomFormMapper.java
import com.ruoyi.workflow.domain.WfCustomForm;
import com.ruoyi.workflow.domain.vo.CustomFormVo;
import com.ruoyi.workflow.domain.vo.WfCustomFormVo;import org.apache.ibatis.annotations.Param;import com.ruoyi.common.core.mapper.BaseMapperPlus;/*** 流程业务单Mapper接口** author nbacheng* date 2023-10-09*/
public interface WfCustomFormMapper extends BaseMapperPlusWfCustomFormMapper, WfCustomForm, WfCustomFormVo {void updateCustom(Param(customFormVo) CustomFormVo customFormVo);
}control接口
/*** 关联流程业务单*/SaCheckPermission(workflow:customForm:edit)Log(title 流程业务单, businessType BusinessType.UPDATE)RepeatSubmit()PostMapping(/updateCustom)public RVoid updateCustom( RequestBody CustomFormVo customFormVo) {iWfCustomFormService.updateCustom(customFormVo);return R.ok(关联流程成功!);}
CustomFormVo.java
package com.ruoyi.workflow.domain.vo;import lombok.Data;/*** Author nbacheng* Date 2022/5/3* Description:* Version 1.0*/
Data
public class CustomFormVo {private String id;private String deployId; private String flowName;
}2、前端部分
customForm的index.vue代码如下
templatediv classapp-containerel-form :modelqueryParams refqueryForm sizesmall :inlinetrue v-showshowSearch label-width68pxel-form-item label业务表单名称 propbusinessNameel-inputv-modelqueryParams.businessNameplaceholder请输入业务表单名称clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label业务服务名称 propbusinessServiceel-inputv-modelqueryParams.businessServiceplaceholder请输入业务服务名称clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label流程名称 propflowNameel-inputv-modelqueryParams.flowNameplaceholder请输入流程名称clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label关联流程发布主键 propdeployIdel-inputv-modelqueryParams.deployIdplaceholder请输入关联流程发布主键clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label前端路由地址 proprouteNameel-inputv-modelqueryParams.routeNameplaceholder请输入前端路由地址clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label组件注入方法 propcomponentel-inputv-modelqueryParams.componentplaceholder请输入组件注入方法clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-itemel-button typeprimary iconel-icon-search sizemini clickhandleQuery搜索/el-buttonel-button iconel-icon-refresh sizemini clickresetQuery重置/el-button/el-form-item/el-formel-row :gutter10 classmb8el-col :span1.5el-buttontypeprimaryplainiconel-icon-plussizeminiclickhandleAddv-hasPermi[workflow:customForm:add]新增/el-button/el-colel-col :span1.5el-buttontypesuccessplainiconel-icon-editsizemini:disabledsingleclickhandleUpdatev-hasPermi[workflow:customForm:edit]修改/el-button/el-colel-col :span1.5el-buttontypedangerplainiconel-icon-deletesizemini:disabledmultipleclickhandleDeletev-hasPermi[workflow:customForm:remove]删除/el-button/el-colel-col :span1.5el-buttontypewarningplainiconel-icon-downloadsizeminiclickhandleExportv-hasPermi[workflow:customForm:export]导出/el-button/el-colright-toolbar :showSearch.syncshowSearch queryTablegetList/right-toolbar/el-rowel-table v-loadingloading :datacustomFormList selection-changehandleSelectionChangeel-table-column typeselection width55 aligncenter /el-table-column label主键 aligncenter propid v-iftrue/el-table-column label业务表单名称 aligncenter propbusinessName /el-table-column label业务服务名称 aligncenter propbusinessService /el-table-column label流程名称 aligncenter propflowName /el-table-column label关联流程发布主键 aligncenter propdeployId /el-table-column label前端路由地址 aligncenter proprouteName /el-table-column label组件注入方法 aligncenter propcomponent /el-table-column label操作 aligncenter class-namesmall-padding fixed-widthtemplate slot-scopescopeel-buttonsizeminitypetexticonel-icon-editclickrelationProcess(scope.row)v-hasPermi[workflow:customForm:edit]关联流程/el-buttonel-buttonel-buttonsizeminitypetexticonel-icon-editclickhandleUpdate(scope.row)v-hasPermi[workflow:customForm:edit]修改/el-buttonel-buttonsizeminitypetexticonel-icon-deleteclickhandleDelete(scope.row)v-hasPermi[workflow:customForm:remove]删除/el-button/template/el-table-column/el-tablepaginationv-showtotal0:totaltotal:page.syncqueryParams.pageNum:limit.syncqueryParams.pageSizepaginationgetList/!-- 添加或修改流程业务单对话框 --el-dialog :titletitle :visible.syncopen width680px append-to-bodyel-form refform :modelform :rulesrules label-width160pxel-form-item label业务表单名称 propbusinessNameel-input v-modelform.businessName placeholder请输入业务表单名称 //el-form-itemel-form-item label业务服务名称 propbusinessServiceel-input v-modelform.businessService placeholder请输入业务服务名称 //el-form-itemel-form-item label流程名称 propflowNameel-input v-modelform.flowName placeholder请输入流程名称 //el-form-itemel-form-item label关联流程发布主键 propdeployIdel-input v-modelform.deployId placeholder请输入关联流程发布主键 //el-form-itemel-form-item label前端路由地址 proprouteNameel-input v-modelform.routeName typetextarea placeholder请输入内容 //el-form-itemel-form-item label组件注入方法 propcomponentel-input v-modelform.component typetextarea placeholder请输入内容 //el-form-item/el-formdiv slotfooter classdialog-footerel-button :loadingbuttonLoading typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialog!--挂载布置流程--a-modal cancelflowOpen false :titleflowTitle :visible.syncflowOpen width70% append-to-bodyel-row :gutter64el-form :modelqueryFlowParams refqueryFlowForm :inlinetrue label-width100pxel-form-item label流程名称 propprocessNameel-input v-modelqueryFlowParams.processName placeholder请输入名称 clearable sizesmallkeyup.enter.nativehandleFlowQuery //el-form-itemel-form-item label流程应用类型 propappTypeel-select changehandleFlowQuery v-modelqueryFlowParams.appType placeholder请选择应用类型 clearablepropappTypeel-optionv-fordict in dict.type.wf_app_type:keydict.value:labeldict.label:valuedict.value/el-option/el-select/el-form-itemel-form-item label激活 propactiveel-switch v-modelqueryFlowParams.active active-color#13ce66 inactive-color#ff4949 changehandleQuery/el-switch/el-form-itemel-form-itemel-button typeprimary iconel-icon-search sizemini clickhandleFlowQuery搜索/el-buttonel-button iconel-icon-refresh sizemini clickresetFlowQuery重置/el-button/el-form-item/el-form/el-rowel-row :gutter64el-col :span20 :xs64 stylewidth: 100%el-table refsingleTable :datadeployList border highlight-current-rowcurrent-changehandleCurrentChange stylewidth: 100%el-table-column typeselection width55 aligncenter /el-table-column label流程标识 aligncenter propprocessKey :show-overflow-tooltiptrue /el-table-column label流程名称 aligncenter :show-overflow-tooltiptruetemplate slot-scopescopeel-button typetext clickhandleProcessView(scope.row)span{{ scope.row.processName }}/span/el-button/template/el-table-columnel-table-column label流程分类 aligncenter propcategoryName :formattercategoryFormat /el-table-column label应用类型 aligncenter propappType width100template slot-scopescopedict-tag :optionsdict.type.wf_app_type :valuescope.row.appType//template/el-table-columnel-table-column label流程版本 aligncentertemplate slot-scopescopeel-tag sizemedium v{{ scope.row.version }}/el-tag/template/el-table-columnel-table-column label状态 aligncentertemplate slot-scopescopeel-tag typesuccess v-if!scope.row.suspended激活/el-tagel-tag typewarning v-ifscope.row.suspended挂起/el-tag/template/el-table-columnel-table-column label部署时间 aligncenter propdeploymentTime width180/el-table-column label操作 aligncenter class-namesmall-padding fixed-widthtemplate slot-scopescopeel-button sizemini typetext clicksubmitCustom(scope.row)确定/el-button/template/el-table-column/el-tableel-pagination v-showdeployTotal0 :totaldeployTotal :current-page.syncqueryParams.pageNum:page-size.syncqueryParams.pageSize size-changegetDeployList current-changegetDeployList //el-col/el-row/a-modal!-- 流程图 --el-dialog :titleprocessView.title :visible.syncprocessView.open width70% append-to-bodyprocess-viewer :keydesigner-${processView.index} :xmlprocessView.xmlData :style{height: 400px} //el-dialog/div
/templatescript
import { listCustomForm, getCustomForm, delCustomForm, addCustomForm, updateCustomForm, updateCustom } from /api/workflow/customForm;
import { listAllCategory } from /api/workflow/category
import { listDeploy, listPublish, getBpmnXml, changeState, delDeploy } from /api/workflow/deploy
import ProcessViewer from /components/ProcessViewerexport default {name: CustomForm,dicts: [wf_app_type],components: {ProcessViewer},data() {return {// 按钮loadingbuttonLoading: false,// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 流程业务单表格数据customFormList: [],// 弹出层标题title: ,// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,businessName: undefined,businessService: undefined,flowName: undefined,deployId: undefined,routeName: undefined,component: undefined,},//查询布置流程相关参数flowOpen: false,deployTotal: 0,flowTitle: ,deployList: [],categoryOptions: [],// 查询参数queryFlowParams: {pageNum: 1,pageSize: 10,flowName: undefined,appType: ZDYYW,},// 挂载自定义表单到流程实例customParam: {id: null,deployId: null},processView: {title: ,open: false,index: undefined,xmlData:,},// 表单参数form: {},// 表单校验rules: {id: [{ required: true, message: 主键不能为空, trigger: blur }],businessName: [{ required: true, message: 业务表单名称不能为空, trigger: blur }],businessService: [{ required: true, message: 业务服务名称不能为空, trigger: blur }],flowName: [{ required: false, message: 流程名称不能为空, trigger: blur }],deployId: [{ required: false, message: 关联流程发布主键不能为空, trigger: blur }],routeName: [{ required: true, message: 前端路由地址不能为空, trigger: blur }],component: [{ required: true, message: 组件注入方法不能为空, trigger: blur }],}};},created() {this.getList();},methods: {relationProcess(row) {this.flowOpen true;this.customParam.id row.id;this.getCategoryList();this.getDeployList();},/** 选择流程更新自定义表单信息 */submitCustom(row) {if(row.appType ! ZDYYW) {this.$message.warning(不是自定义业务应用类型不能绑定);return;}this.customParam.deployId row.deploymentId;const params {id: this.customParam.id,deployId: row.deploymentId,flowName: row.processName,}updateCustom(params).then(res {this.$message.success(res.msg);this.flowOpen false;this.getList();})},categoryFormat(row, column) {return this.categoryOptions.find(k k.code row.category)?.categoryName ?? ;},/** 查看流程图 */handleProcessView(row) {let definitionId row.definitionId;this.processView.title 流程图;this.processView.index definitionId;// 发送请求获取xmlgetBpmnXml(definitionId).then(response {this.processView.xmlData response.data;})this.processView.open true;},/** 查询流程业务单列表 */getList() {this.loading true;listCustomForm(this.queryParams).then(response {this.customFormList response.rows;this.total response.total;this.loading false;});},/** 查询流程分类列表 */getCategoryList() {listAllCategory().then(response this.categoryOptions response.data);},/** 查询流程部署列表 */getDeployList() {this.loading true;listDeploy(this.queryFlowParams).then(response {this.deployList response.rows;this.deployTotal response.total;this.loading false;});},/** 搜索按钮操作 */handleFlowQuery() {this.queryFlowParams.pageNum 1;this.getDeployList();},/** 重置按钮操作 */resetFlowQuery() {this.resetForm(queryFlowForm);this.handleQuery();},handleCurrentChange(data) {/*console.log(handleCurrentChange data,data);if (data) {this.currentRow JSON.parse(data.formContent);}*/},// 取消按钮cancel() {this.open false;this.reset();},// 表单重置reset() {this.form {id: undefined,businessName: undefined,businessService: undefined,flowName: undefined,deployId: undefined,routeName: undefined,component: undefined,createBy: undefined,createTime: undefined,updateBy: undefined,updateTime: undefined};this.resetForm(form);},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm(queryForm);this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids selection.map(item item.id)this.single selection.length!1this.multiple !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open true;this.title 添加流程业务单;},/** 修改按钮操作 */handleUpdate(row) {this.loading true;this.reset();const id row.id || this.idsgetCustomForm(id).then(response {this.loading false;this.form response.data;this.open true;this.title 修改流程业务单;});},/** 提交按钮 */submitForm() {this.$refs[form].validate(valid {if (valid) {this.buttonLoading true;if (this.form.id ! null) {updateCustomForm(this.form).then(response {this.$modal.msgSuccess(修改成功);this.open false;this.getList();}).finally(() {this.buttonLoading false;});} else {addCustomForm(this.form).then(response {this.$modal.msgSuccess(新增成功);this.open false;this.getList();}).finally(() {this.buttonLoading false;});}}});},/** 删除按钮操作 */handleDelete(row) {const ids row.id || this.ids;this.$modal.confirm(是否确认删除流程业务单编号为 ids 的数据项).then(() {this.loading true;return delCustomForm(ids);}).then(() {this.loading false;this.getList();this.$modal.msgSuccess(删除成功);}).catch(() {}).finally(() {this.loading false;});},/** 导出按钮操作 */handleExport() {this.download(workflow/customForm/export, {...this.queryParams}, customForm_${new Date().getTime()}.xlsx)}}
};
/script3、效果图
当然不是自定义业务应用类型不让绑定
