|
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <el-form label-width="100px"> |
| 4 | + <el-form-item label="实例名称" prop="processInstanceName"> |
| 5 | + <el-input |
| 6 | + v-model="formData.processInstanceName" |
| 7 | + clearable |
| 8 | + placeholder="请输入实例名称" |
| 9 | + @change="updateCallActivityAttr('processInstanceName')" |
| 10 | + /> |
| 11 | + </el-form-item> |
| 12 | + |
| 13 | + <!-- TODO 需要可选择已存在的流程 --> |
| 14 | + <el-form-item label="被调用流程" prop="calledElement"> |
| 15 | + <el-input |
| 16 | + v-model="formData.calledElement" |
| 17 | + clearable |
| 18 | + placeholder="请输入被调用流程" |
| 19 | + @change="updateCallActivityAttr('calledElement')" |
| 20 | + /> |
| 21 | + </el-form-item> |
| 22 | + |
| 23 | + <el-form-item label="继承变量" prop="inheritVariables"> |
| 24 | + <el-switch |
| 25 | + v-model="formData.inheritVariables" |
| 26 | + @change="updateCallActivityAttr('inheritVariables')" |
| 27 | + /> |
| 28 | + </el-form-item> |
| 29 | + |
| 30 | + <el-form-item label="继承业务键" prop="inheritBusinessKey"> |
| 31 | + <el-switch |
| 32 | + v-model="formData.inheritBusinessKey" |
| 33 | + @change="updateCallActivityAttr('inheritBusinessKey')" |
| 34 | + /> |
| 35 | + </el-form-item> |
| 36 | + |
| 37 | + <el-form-item v-if="!formData.inheritBusinessKey" label="业务键表达式" prop="businessKey"> |
| 38 | + <el-input |
| 39 | + v-model="formData.businessKey" |
| 40 | + clearable |
| 41 | + placeholder="请输入业务键表达式" |
| 42 | + @change="updateCallActivityAttr('businessKey')" |
| 43 | + /> |
| 44 | + </el-form-item> |
| 45 | + |
| 46 | + <el-divider /> |
| 47 | + <div> |
| 48 | + <div class="flex mb-10px"> |
| 49 | + <el-text>输入参数</el-text> |
| 50 | + <XButton |
| 51 | + class="ml-auto" |
| 52 | + type="primary" |
| 53 | + preIcon="ep:plus" |
| 54 | + title="添加参数" |
| 55 | + size="small" |
| 56 | + @click="openVariableForm('in', null, -1)" |
| 57 | + /> |
| 58 | + </div> |
| 59 | + <el-table :data="inVariableList" max-height="240" fit border> |
| 60 | + <el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip /> |
| 61 | + <el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip /> |
| 62 | + <el-table-column label="操作" width="110px"> |
| 63 | + <template #default="scope"> |
| 64 | + <el-button link @click="openVariableForm('in', scope.row, scope.$index)" size="small"> |
| 65 | + 编辑 |
| 66 | + </el-button> |
| 67 | + <el-divider direction="vertical" /> |
| 68 | + <el-button |
| 69 | + link |
| 70 | + size="small" |
| 71 | + style="color: #ff4d4f" |
| 72 | + @click="removeVariable('in', scope.$index)" |
| 73 | + > |
| 74 | + 移除 |
| 75 | + </el-button> |
| 76 | + </template> |
| 77 | + </el-table-column> |
| 78 | + </el-table> |
| 79 | + </div> |
| 80 | + |
| 81 | + <el-divider /> |
| 82 | + <div> |
| 83 | + <div class="flex mb-10px"> |
| 84 | + <el-text>输出参数</el-text> |
| 85 | + <XButton |
| 86 | + class="ml-auto" |
| 87 | + type="primary" |
| 88 | + preIcon="ep:plus" |
| 89 | + title="添加参数" |
| 90 | + size="small" |
| 91 | + @click="openVariableForm('out', null, -1)" |
| 92 | + /> |
| 93 | + </div> |
| 94 | + <el-table :data="outVariableList" max-height="240" fit border> |
| 95 | + <el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip /> |
| 96 | + <el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip /> |
| 97 | + <el-table-column label="操作" width="110px"> |
| 98 | + <template #default="scope"> |
| 99 | + <el-button |
| 100 | + link |
| 101 | + @click="openVariableForm('out', scope.row, scope.$index)" |
| 102 | + size="small" |
| 103 | + > |
| 104 | + 编辑 |
| 105 | + </el-button> |
| 106 | + <el-divider direction="vertical" /> |
| 107 | + <el-button |
| 108 | + link |
| 109 | + size="small" |
| 110 | + style="color: #ff4d4f" |
| 111 | + @click="removeVariable('out', scope.$index)" |
| 112 | + > |
| 113 | + 移除 |
| 114 | + </el-button> |
| 115 | + </template> |
| 116 | + </el-table-column> |
| 117 | + </el-table> |
| 118 | + </div> |
| 119 | + </el-form> |
| 120 | + |
| 121 | + <!-- 添加或修改参数 --> |
| 122 | + <el-dialog |
| 123 | + v-model="variableDialogVisible" |
| 124 | + title="参数配置" |
| 125 | + width="600px" |
| 126 | + append-to-body |
| 127 | + destroy-on-close |
| 128 | + > |
| 129 | + <el-form :model="varialbeFormData" label-width="80px" ref="varialbeFormRef"> |
| 130 | + <el-form-item label="源：" prop="source"> |
| 131 | + <el-input v-model="varialbeFormData.source" clearable /> |
| 132 | + </el-form-item> |
| 133 | + <el-form-item label="目标：" prop="target"> |
| 134 | + <el-input v-model="varialbeFormData.target" clearable /> |
| 135 | + </el-form-item> |
| 136 | + </el-form> |
| 137 | + <template #footer> |
| 138 | + <el-button @click="variableDialogVisible = false">取 消</el-button> |
| 139 | + <el-button type="primary" @click="saveVariable">确 定</el-button> |
| 140 | + </template> |
| 141 | + </el-dialog> |
| 142 | + </div> |
| 143 | +</template> |
| 144 | + |
| 145 | +<script lang="ts" setup> |
| 146 | +defineOptions({ name: 'CallActivity' }) |
| 147 | +const props = defineProps({ |
| 148 | + id: String, |
| 149 | + type: String |
| 150 | +}) |
| 151 | +const prefix = inject('prefix') |
| 152 | +const message = useMessage() |
| 153 | +
|
| 154 | +const formData = ref({ |
| 155 | + processInstanceName: '', |
| 156 | + calledElement: '', |
| 157 | + inheritVariables: false, |
| 158 | + businessKey: '', |
| 159 | + inheritBusinessKey: false, |
| 160 | + calledElementType: 'key' |
| 161 | +}) |
| 162 | +const inVariableList = ref() |
| 163 | +const outVariableList = ref() |
| 164 | +const variableType = ref() // 参数类型 |
| 165 | +const editingVariableIndex = ref(-1) // 编辑参数下标 |
| 166 | +const variableDialogVisible = ref(false) |
| 167 | +const varialbeFormRef = ref() |
| 168 | +const varialbeFormData = ref({ |
| 169 | + source: '', |
| 170 | + target: '' |
| 171 | +}) |
| 172 | +
|
| 173 | +const bpmnInstances = () => (window as any)?.bpmnInstances |
| 174 | +const bpmnElement = ref() |
| 175 | +const otherExtensionList = ref() |
| 176 | +
|
| 177 | +const initCallActivity = () => { |
| 178 | + bpmnElement.value = bpmnInstances().bpmnElement |
| 179 | + console.log(bpmnElement.value.businessObject, 'callActivity') |
| 180 | +
|
| 181 | + // 初始化所有配置项 |
| 182 | + Object.keys(formData.value).forEach((key) => { |
| 183 | + formData.value[key] = bpmnElement.value.businessObject[key] ?? formData.value[key] |
| 184 | + }) |
| 185 | +
|
| 186 | + otherExtensionList.value = [] // 其他扩展配置 |
| 187 | + inVariableList.value = [] |
| 188 | + outVariableList.value = [] |
| 189 | + // 初始化输入参数 |
| 190 | + bpmnElement.value.businessObject?.extensionElements?.values?.forEach((ex) => { |
| 191 | + if (ex.$type === `${prefix}:In`) { |
| 192 | + inVariableList.value.push(ex) |
| 193 | + } else if (ex.$type === `${prefix}:Out`) { |
| 194 | + outVariableList.value.push(ex) |
| 195 | + } else { |
| 196 | + otherExtensionList.value.push(ex) |
| 197 | + } |
| 198 | + }) |
| 199 | +
|
| 200 | + // 默认添加 |
| 201 | + // bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { |
| 202 | + // calledElementType: 'key' |
| 203 | + // }) |
| 204 | +} |
| 205 | +
|
| 206 | +const updateCallActivityAttr = (attr) => { |
| 207 | + bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { |
| 208 | + [attr]: formData.value[attr] |
| 209 | + }) |
| 210 | +} |
| 211 | +
|
| 212 | +const openVariableForm = (type, data, index) => { |
| 213 | + editingVariableIndex.value = index |
| 214 | + variableType.value = type |
| 215 | + varialbeFormData.value = index === -1 ? {} : { ...data } |
| 216 | + variableDialogVisible.value = true |
| 217 | +} |
| 218 | +
|
| 219 | +const removeVariable = async (type, index) => { |
| 220 | + try { |
| 221 | + await message.delConfirm() |
| 222 | + if (type === 'in') { |
| 223 | + inVariableList.value.splice(index, 1) |
| 224 | + } |
| 225 | + if (type === 'out') { |
| 226 | + outVariableList.value.splice(index, 1) |
| 227 | + } |
| 228 | + updateElementExtensions() |
| 229 | + } catch {} |
| 230 | +} |
| 231 | +
|
| 232 | +const saveVariable = () => { |
| 233 | + if (editingVariableIndex.value === -1) { |
| 234 | + if (variableType.value === 'in') { |
| 235 | + inVariableList.value.push( |
| 236 | + bpmnInstances().moddle.create(`${prefix}:In`, { ...varialbeFormData.value }) |
| 237 | + ) |
| 238 | + } |
| 239 | + if (variableType.value === 'out') { |
| 240 | + outVariableList.value.push( |
| 241 | + bpmnInstances().moddle.create(`${prefix}:Out`, { ...varialbeFormData.value }) |
| 242 | + ) |
| 243 | + } |
| 244 | + updateElementExtensions() |
| 245 | + } else { |
| 246 | + if (variableType.value === 'in') { |
| 247 | + inVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source |
| 248 | + inVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target |
| 249 | + } |
| 250 | + if (variableType.value === 'out') { |
| 251 | + outVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source |
| 252 | + outVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target |
| 253 | + } |
| 254 | + } |
| 255 | + variableDialogVisible.value = false |
| 256 | +} |
| 257 | +
|
| 258 | +const updateElementExtensions = () => { |
| 259 | + const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', { |
| 260 | + values: [...inVariableList.value, ...outVariableList.value, ...otherExtensionList.value] |
| 261 | + }) |
| 262 | + bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { |
| 263 | + extensionElements: extensions |
| 264 | + }) |
| 265 | +} |
| 266 | +
|
| 267 | +watch( |
| 268 | + () => props.id, |
| 269 | + (val) => { |
| 270 | + val && |
| 271 | + val.length && |
| 272 | + nextTick(() => { |
| 273 | + initCallActivity() |
| 274 | + }) |
| 275 | + }, |
| 276 | + { immediate: true } |
| 277 | +) |
| 278 | +</script> |
| 279 | + |
| 280 | +<style lang="scss" scoped></style> |
0 commit comments