| 提交 | 用户 | 时间 | ||
| 9259c2 | 1 | <template> |
| H | 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> | |
