From f6ea543b3de9a770c1bf5db2baf3e8a5dc2c867a Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期一, 30 十二月 2024 18:18:44 +0800
Subject: [PATCH] 10.88.4.131
---
src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue | 280 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 280 insertions(+), 0 deletions(-)
diff --git a/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue b/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue
new file mode 100644
index 0000000..6d8268b
--- /dev/null
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue
@@ -0,0 +1,280 @@
+<template>
+ <div>
+ <el-form label-width="100px">
+ <el-form-item label="实例名称" prop="processInstanceName">
+ <el-input
+ v-model="formData.processInstanceName"
+ clearable
+ placeholder="请输入实例名称"
+ @change="updateCallActivityAttr('processInstanceName')"
+ />
+ </el-form-item>
+
+ <!-- TODO 需要可选择已存在的流程 -->
+ <el-form-item label="被调用流程" prop="calledElement">
+ <el-input
+ v-model="formData.calledElement"
+ clearable
+ placeholder="请输入被调用流程"
+ @change="updateCallActivityAttr('calledElement')"
+ />
+ </el-form-item>
+
+ <el-form-item label="继承变量" prop="inheritVariables">
+ <el-switch
+ v-model="formData.inheritVariables"
+ @change="updateCallActivityAttr('inheritVariables')"
+ />
+ </el-form-item>
+
+ <el-form-item label="继承业务键" prop="inheritBusinessKey">
+ <el-switch
+ v-model="formData.inheritBusinessKey"
+ @change="updateCallActivityAttr('inheritBusinessKey')"
+ />
+ </el-form-item>
+
+ <el-form-item v-if="!formData.inheritBusinessKey" label="业务键表达式" prop="businessKey">
+ <el-input
+ v-model="formData.businessKey"
+ clearable
+ placeholder="请输入业务键表达式"
+ @change="updateCallActivityAttr('businessKey')"
+ />
+ </el-form-item>
+
+ <el-divider />
+ <div>
+ <div class="flex mb-10px">
+ <el-text>输入参数</el-text>
+ <XButton
+ class="ml-auto"
+ type="primary"
+ preIcon="ep:plus"
+ title="添加参数"
+ size="small"
+ @click="openVariableForm('in', null, -1)"
+ />
+ </div>
+ <el-table :data="inVariableList" max-height="240" fit border>
+ <el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip />
+ <el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip />
+ <el-table-column label="操作" width="110px">
+ <template #default="scope">
+ <el-button link @click="openVariableForm('in', scope.row, scope.$index)" size="small">
+ 编辑
+ </el-button>
+ <el-divider direction="vertical" />
+ <el-button
+ link
+ size="small"
+ style="color: #ff4d4f"
+ @click="removeVariable('in', scope.$index)"
+ >
+ 移除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <el-divider />
+ <div>
+ <div class="flex mb-10px">
+ <el-text>输出参数</el-text>
+ <XButton
+ class="ml-auto"
+ type="primary"
+ preIcon="ep:plus"
+ title="添加参数"
+ size="small"
+ @click="openVariableForm('out', null, -1)"
+ />
+ </div>
+ <el-table :data="outVariableList" max-height="240" fit border>
+ <el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip />
+ <el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip />
+ <el-table-column label="操作" width="110px">
+ <template #default="scope">
+ <el-button
+ link
+ @click="openVariableForm('out', scope.row, scope.$index)"
+ size="small"
+ >
+ 编辑
+ </el-button>
+ <el-divider direction="vertical" />
+ <el-button
+ link
+ size="small"
+ style="color: #ff4d4f"
+ @click="removeVariable('out', scope.$index)"
+ >
+ 移除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-form>
+
+ <!-- 添加或修改参数 -->
+ <el-dialog
+ v-model="variableDialogVisible"
+ title="参数配置"
+ width="600px"
+ append-to-body
+ destroy-on-close
+ >
+ <el-form :model="varialbeFormData" label-width="80px" ref="varialbeFormRef">
+ <el-form-item label="源：" prop="source">
+ <el-input v-model="varialbeFormData.source" clearable />
+ </el-form-item>
+ <el-form-item label="目标：" prop="target">
+ <el-input v-model="varialbeFormData.target" clearable />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="variableDialogVisible = false">取 消</el-button>
+ <el-button type="primary" @click="saveVariable">确 定</el-button>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'CallActivity' })
+const props = defineProps({
+ id: String,
+ type: String
+})
+const prefix = inject('prefix')
+const message = useMessage()
+
+const formData = ref({
+ processInstanceName: '',
+ calledElement: '',
+ inheritVariables: false,
+ businessKey: '',
+ inheritBusinessKey: false,
+ calledElementType: 'key'
+})
+const inVariableList = ref()
+const outVariableList = ref()
+const variableType = ref() // 参数类型
+const editingVariableIndex = ref(-1) // 编辑参数下标
+const variableDialogVisible = ref(false)
+const varialbeFormRef = ref()
+const varialbeFormData = ref({
+ source: '',
+ target: ''
+})
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const bpmnElement = ref()
+const otherExtensionList = ref()
+
+const initCallActivity = () => {
+ bpmnElement.value = bpmnInstances().bpmnElement
+ console.log(bpmnElement.value.businessObject, 'callActivity')
+
+ // 初始化所有配置项
+ Object.keys(formData.value).forEach((key) => {
+ formData.value[key] = bpmnElement.value.businessObject[key] ?? formData.value[key]
+ })
+
+ otherExtensionList.value = [] // 其他扩展配置
+ inVariableList.value = []
+ outVariableList.value = []
+ // 初始化输入参数
+ bpmnElement.value.businessObject?.extensionElements?.values?.forEach((ex) => {
+ if (ex.$type === `${prefix}:In`) {
+ inVariableList.value.push(ex)
+ } else if (ex.$type === `${prefix}:Out`) {
+ outVariableList.value.push(ex)
+ } else {
+ otherExtensionList.value.push(ex)
+ }
+ })
+
+ // 默认添加
+ // bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+ // calledElementType: 'key'
+ // })
+}
+
+const updateCallActivityAttr = (attr) => {
+ bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+ [attr]: formData.value[attr]
+ })
+}
+
+const openVariableForm = (type, data, index) => {
+ editingVariableIndex.value = index
+ variableType.value = type
+ varialbeFormData.value = index === -1 ? {} : { ...data }
+ variableDialogVisible.value = true
+}
+
+const removeVariable = async (type, index) => {
+ try {
+ await message.delConfirm()
+ if (type === 'in') {
+ inVariableList.value.splice(index, 1)
+ }
+ if (type === 'out') {
+ outVariableList.value.splice(index, 1)
+ }
+ updateElementExtensions()
+ } catch {}
+}
+
+const saveVariable = () => {
+ if (editingVariableIndex.value === -1) {
+ if (variableType.value === 'in') {
+ inVariableList.value.push(
+ bpmnInstances().moddle.create(`${prefix}:In`, { ...varialbeFormData.value })
+ )
+ }
+ if (variableType.value === 'out') {
+ outVariableList.value.push(
+ bpmnInstances().moddle.create(`${prefix}:Out`, { ...varialbeFormData.value })
+ )
+ }
+ updateElementExtensions()
+ } else {
+ if (variableType.value === 'in') {
+ inVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source
+ inVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target
+ }
+ if (variableType.value === 'out') {
+ outVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source
+ outVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target
+ }
+ }
+ variableDialogVisible.value = false
+}
+
+const updateElementExtensions = () => {
+ const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+ values: [...inVariableList.value, ...outVariableList.value, ...otherExtensionList.value]
+ })
+ bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+ extensionElements: extensions
+ })
+}
+
+watch(
+ () => props.id,
+ (val) => {
+ val &&
+ val.length &&
+ nextTick(() => {
+ initCallActivity()
+ })
+ },
+ { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped></style>
--
Gitblit v1.9.3