更多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、flowableDescriptor.json上要增加下面内容bpmn:ServiceTask
{
"name": "Field",
"superClass": ["Element"],
"meta": {
"allowedIn": [
"flowable:ServiceTaskLike",
"flowable:ExecutionListener",
"flowable:TaskListener",
"bpmn:ServiceTask"
]
},
2、服务任务原先代码
<template>
<div>
<el-form-item label="执行类型" key="executeType">
<el-select v-model="serviceTaskForm.executeType">
<el-option label="Java类" value="class" />
<el-option label="表达式" value="expression" />
<el-option label="代理表达式" value="delegateExpression" />
</el-select>
</el-form-item>
<el-form-item
v-if="serviceTaskForm.executeType === 'class'"
label="Java类"
prop="class"
key="execute-class"
>
<el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
</el-form-item>
<el-form-item
v-if="serviceTaskForm.executeType === 'expression'"
label="表达式"
prop="expression"
key="execute-expression"
>
<el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
</el-form-item>
<el-form-item v-if="serviceTaskForm.executeType === 'expression'" label="结果变量">
<el-input v-model="serviceTaskForm.resultVariable" clearable @change="updateInfo('resultVariable')" />
</el-form-item>
<el-form-item
v-if="serviceTaskForm.executeType === 'delegateExpression'"
label="代理表达式"
prop="delegateExpression"
key="execute-delegate"
>
<el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
</el-form-item>
</div>
</template>
<script>
export default {
name: "ServiceTask",
props: {
id: String,
type: String
},
data() {
return {
defaultTaskForm: {
executeType: "",
class: "",
expression: "",
resultVariable: "",
delegateExpression: ""
},
serviceTaskForm: {}
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.$nextTick(() => this.resetTaskForm());
}
}
},
methods: {
resetTaskForm() {
for (let key in this.defaultTaskForm) {
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
if (value) this.$set(this.serviceTaskForm, "executeType", key);
this.$set(this.serviceTaskForm, key, value);
}
},
updateElementTask() {
let taskAttr = Object.create(null);
const type = this.serviceTaskForm.executeType;
for (let key in this.serviceTaskForm) {
if (key !== 'executeType' && key !== type) taskAttr[key] = null;
}
taskAttr[type] = this.serviceTaskForm[type] || "";
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
}
},
beforeDestroy() {
this.bpmnElement = null;
}
};
</script>
3、修改成vue3版本如下:
<<template>
<div>
<el-form-item label="执行类型" key="executeType">
<el-select v-model="serviceTaskForm.executeType">
<el-option label="Java类" value="class" />
<el-option label="表达式" value="expression" />
<el-option label="代理表达式" value="delegateExpression" />
</el-select>
</el-form-item>
<el-form-item
v-if="serviceTaskForm.executeType === 'class'"
label="Java类"
prop="class"
key="execute-class"
>
<el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
</el-form-item>
<el-form-item
v-if="serviceTaskForm.executeType === 'expression'"
label="表达式"
prop="expression"
key="execute-expression"
>
<el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
</el-form-item>
<el-form-item v-if="serviceTaskForm.executeType === 'expression'" label="结果变量">
<el-input v-model="serviceTaskForm.resultVariable" clearable @change="updateInfo('resultVariable')" />
</el-form-item>
<el-form-item
v-if="serviceTaskForm.executeType === 'delegateExpression'"
label="代理表达式"
prop="delegateExpression"
key="execute-delegate"
>
<el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
</el-form-item>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ServiceTask' })
const props = defineProps({
id: String,
type: String
})
const defaultTaskForm = ref({
executeType: "",
class: "",
expression: "",
resultVariable: "",
delegateExpression: ""
})
const serviceTaskForm = ref<any>({})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
const resetTaskForm = () => {
for (let key in defaultTaskForm.value) {
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
if (value) serviceTaskForm.value["executeType"] = key
serviceTaskForm.value[key] = value;
}
}
const updateElementTask = () => {
let taskAttr = Object.create(null)
const type = serviceTaskForm.value["executeType"];
for (let key in serviceTaskForm.value) {
if (key !== 'executeType' && key !== type) taskAttr[key] = null;
}
taskAttr[type] = serviceTaskForm.value[type] || "";
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
}
onBeforeUnmount(() => {
bpmnElement.value = null
})
</script>
4、效果图如下: