网站搭建配置,个人网页设计要素,企业门户网站建设行情,深圳网站建设软件定制公司更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码#xff1a…更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码 https://gitee.com/nbacheng/ruoyi-nbcio
演示地址RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码 https://gitee.com/nbacheng/nbcio-boot
前端代码https://gitee.com/nbacheng/nbcio-vue.git
在线演示包括H5 http://122.227.135.243:9888
1、原先的ActApplyBtn.vue组件vue2代码如下
style langless
/style
templatespana-button :typebtnType clickapplySubmit() :loadingsubmitLoading{{text}}/a-buttona-modal :z-index100 :titlefirstInitiatorTitle cancelfirstInitiatorOpen false :visible.syncfirstInitiatorOpen:width50% append-to-bodya-descriptions bordered layoutverticala-descriptions-item :span3a-badge statusprocessing text选择提醒 //a-descriptions-itema-descriptions-item label重新发起新流程按钮 labelStyle{ color: #fff, fontWeight: bold, fontSize18px}重新发起新流程会删除之前发起的任务,重新开始./a-descriptions-itema-descriptions-item label继续发起老流程按钮继续发起流程就在原来流程基础上继续流转./a-descriptions-item/a-descriptionsspan slotfooter classdialog-footerel-button typeprimary clickReStartByDataId(true)重新发起新流程/el-buttonel-button typeprimary clickReStartByDataId(false)继续发起老流程/el-buttonel-button clickfirstInitiatorOpen false取 消/el-button/span/a-modal!--挂载关联多个流程--a-modal cancelflowOpen false :titleflowTitle :visible.syncflowOpen width70% append-to-bodyel-row :gutter64el-col :span20 :xs64 stylewidth: 100%el-table refsingleTable :dataprocessList border highlight-current-row stylewidth: 100%el-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-button sizemini typetext clickselectProcess(scope.row)确定/el-button/template/el-table-column/el-table/el-col/el-row/a-modal/span
/templatescriptimport {startByDataId,isFirstInitiator,deleteActivityAndJoin,getProcesss} from /api/workflow/process;export default {name: ActApplyBtn,components: {},props: {btnType: {type: String,default: link,required: false},/**/dataId: {type: String,default: ,required: true},serviceName: {type: String,default: ,required: true},variables: {type: Object,default: {},},text: {type: String,default: 提交申请,required: false}},data() {return {modalVisible: false,submitLoading: false,form: {},firstInitiatorOpen: false,firstInitiatorTitle: ,// 关联流程数据processList: [],flowOpen: false,flowTitle: ,selectFlowId: , //选择或使用的流程ID};},created() {},watch: {},methods: {selectProcess(row) {this.selectFlowId row.id;this.flowOpen false;var params Object.assign({dataId: this.dataId}, this.variables);startByDataId(this.dataId, this.selectFlowId, this.serviceName, params).then(res {//console.log(startByDataId res,res);if (res.code 200 ) {this.$message.success(res.msg);this.$emit(success);} else {this.$message.error(res.msg);}}).finally(() (this.submitLoading false));},ReStartByDataId(isNewFlow) {if(isNewFlow) {this.submitLoading true;deleteActivityAndJoin(this.dataId,this.variables).then(res {if (res.success res.result) { //若删除成功var params Object.assign({dataId: this.dataId}, this.variables);startByDataId(this.dataId, this.selectFlowId, this.serviceName, params).then(res {if (res.success) {this.firstInitiatorOpen false;this.$message.success(res.message);this.$emit(success);} else {this.$message.error(res.message);}})}}).finally(() (this.submitLoading false));}else {//继续原有流程流转跳到流程处理界面上//console.log(this.variables,this.variables);this.$router.push({ path: /flowable/task/record/index,query: {procInsId: this.variables.processInstanceId,deployId: this.variables.deployId,taskId: this.variables.taskId,businessKey: this.dataId,nodeType: ,category: zdyyw,finished: true}})}},applySubmit() {if (this.dataId this.dataId.length 1) {this.error 必须传入参数dataId;this.$message.error(this.error);return;}if (this.serviceName this.serviceName.length 1) {this.error 必须传入参数serviceName;this.$message.error(this.error);return;} else {this.error ;}//对于自定义业务,判断是否是驳回或退回的第一个发起人节点this.submitLoading true;isFirstInitiator(this.dataId, this.variables).then(res {if (res.code 200 res.data) { //若是弹出窗口选择重新发起新流程还是继续老流程this.firstInitiatorTitle 根据自己需要进行选择this.firstInitiatorOpen true;}else {this.submitLoading true;const processParams {serviceName: this.serviceName}getProcesss(processParams).then(res {/**查询关联流程信息 */this.processList res.data;this.submitLoading false;if (this.processList this.processList.length 1) {this.flowOpen true;}else if (this.processList this.processList.length 1) {this.selectFlowId res.data[0].id;var params Object.assign({dataId: this.dataId}, this.variables);startByDataId(this.dataId, this.selectFlowId, this.serviceName, params).then(res {console.log(startByDataId res,res);if (res.code 200 ) {this.$message.success(res.msg);this.$emit(success);} else {this.$message.error(res.msg);}}).finally(() (this.submitLoading false));} else {this.$message.error(检查该业务是否已经关联流程);}}).finally(() (this.submitLoading false));}}).finally(() (this.submitLoading false));}}};
/script2、修改成vue3版本的代码如下
templatespana-button :typebtnType clickapplySubmit() :loadingsubmitLoading{{text}}/a-buttona-modal :z-index100 :titlefirstInitiatorTitle cancelfirstInitiatorOpen false v-model:visiblefirstInitiatorOpen:width50% append-to-bodya-descriptions bordered layoutverticala-descriptions-item :span3a-badge statusprocessing text选择提醒 //a-descriptions-itema-descriptions-item label重新发起新流程按钮 labelStyle{ color: #fff, fontWeight: bold, fontSize18px}重新发起新流程会删除之前发起的任务,重新开始./a-descriptions-itema-descriptions-item label继续发起老流程按钮继续发起流程就在原来流程基础上继续流转./a-descriptions-item/a-descriptionsspan slotfooter classdialog-footerel-button typeprimary clickReStartByDataId(true)重新发起新流程/el-buttonel-button typeprimary clickReStartByDataId(false)继续发起老流程/el-buttonel-button clickfirstInitiatorOpen false取 消/el-button/span/a-modal!--挂载关联多个流程--a-modal cancelflowOpen false :titleflowTitle v-model:visibleflowOpen width70% append-to-bodyel-row :gutter64el-col :span20 :xs64 stylewidth: 100%el-table refsingleTable :dataprocessList border highlight-current-row stylewidth: 100%el-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 #defaultscopeel-button sizesmall typeprimary clickselectProcess(scope.row)确定/el-button/template/el-table-column/el-table/el-col/el-row/a-modal/span
/templatescript langts setupimport {startByDataId,isFirstInitiator,deleteActivityAndJoin,getProcesss} from /api/workflow/process;defineOptions({ name: ActApplyBtn })const props defineProps({btnType: {type: String,default: link,required: false},dataId: {type: String,default: ,required: true},serviceName: {type: String,default: ,required: true},variables: {type: Object,default: {},},text: {type: String,default: 提交申请,required: false}})const emit defineEmits([success])const router useRouter()const { proxy } getCurrentInstance() as ComponentInternalInstanceconst modalVisible ref(false)const submitLoading ref(false)const form refany({})const firstInitiatorOpen ref(false)const firstInitiatorTitle ref()// 关联流程数据const processList refany([])const flowOpen ref(false)const flowTitle ref()const selectFlowId ref() //选择或使用的流程IDconst error ref()const selectProcess (row) {selectFlowId.value row.id;flowOpen.value false;var params Object.assign({dataId: props.dataId}, props.variables);startByDataId(props.dataId, selectFlowId.value, props.serviceName, params).then(res {//console.log(startByDataId res,res);if (res.code 200 ) {proxy?.$modal.msgSuccess(res.msg);emit(success);} else {proxy?.$modal.msgError(res.msg);}}).finally(() (submitLoading.value false));}const ReStartByDataId (isNewFlow: boolean) {if(isNewFlow) {submitLoading.value true;deleteActivityAndJoin(props.dataId,props.variables).then(res {if (res.code 200 res.result) { //若删除成功var params Object.assign({dataId: props.dataId}, props.variables);startByDataId(props.dataId, selectFlowId.value, props.serviceName, params).then(res {if (res.code 200) {firstInitiatorOpen.value false;proxy?.$modal.msgSuccess(res.message);emit(success);} else {proxy?.$modal.msgError(res.message);}})}}).finally(() (submitLoading.value false));}else {//继续原有流程流转跳到流程处理界面上//console.log(props.variables,props.variables);router.push({path: /flowable/task/record/index,query: {procInsId: props.variables.processInstanceId,deployId: props.variables.deployId,taskId: props.variables.taskId,businessKey: props.dataId,nodeType: ,category: zdyyw,finished: true},})}}const applySubmit () {if (props.dataId props.dataId.length 1) {error.value 必须传入参数dataId;proxy?.$modal.msgError(error.value);return;}if (props.serviceName props.serviceName.length 1) {error.value 必须传入参数serviceName;proxy?.$modal.msgError(error.value);return;} else {error.value ;}//对于自定义业务,判断是否是驳回或退回的第一个发起人节点submitLoading.value true;isFirstInitiator(props.dataId, props.variables).then(res {if (res.code 200 res.data) { //若是弹出窗口选择重新发起新流程还是继续老流程firstInitiatorTitle.value 根据自己需要进行选择firstInitiatorOpen.value true;}else {submitLoading.value true;const processParams {serviceName: props.serviceName}getProcesss(processParams).then(res {/**查询关联流程信息 */processList.value res.data;submitLoading.value false;if (processList.value processList.value.length 1) {flowOpen.value true;}else if (processList.value processList.value.length 1) {selectFlowId.value res.data[0].id;var params Object.assign({dataId: props.dataId}, props.variables);startByDataId(props.dataId, selectFlowId.value, props.serviceName, params).then(res {console.log(startByDataId res,res);if (res.code 200 ) {proxy?.$modal.msgSuccess(res.msg);emit(success);} else {proxy?.$modal.msgError(res.msg);}}).finally(() (submitLoading.value false));} else {proxy?.$modal.msgError(检查该业务是否已经关联流程);}}).finally(() (submitLoading.value false));}}).finally(() (submitLoading.value false));}
/script3、效果图
就是下面提交申请这个组件
