| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="panel-tab__content"> |
| 3 | <el-form :model="flowConditionForm" label-width="90px" size="small"> | |
| 4 | <el-form-item label="流转类型"> | |
| 5 | <el-select v-model="flowConditionForm.type" @change="updateFlowType"> | |
| 6 | <el-option label="普通流转路径" value="normal" /> | |
| 7 | <el-option label="默认流转路径" value="default" /> | |
| 8 | <el-option label="条件流转路径" value="condition" /> | |
| 9 | </el-select> | |
| 10 | </el-form-item> | |
| 11 | <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition"> | |
| 12 | <el-select v-model="flowConditionForm.conditionType"> | |
| 13 | <el-option label="表达式" value="expression" /> | |
| 14 | <el-option label="脚本" value="script" /> | |
| 15 | </el-select> | |
| 16 | </el-form-item> | |
| 17 | <el-form-item | |
| 18 | label="表达式" | |
| 19 | v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" | |
| 20 | key="express" | |
| 21 | > | |
| 22 | <el-input | |
| 23 | v-model="flowConditionForm.body" | |
| 24 | style="width: 192px" | |
| 25 | clearable | |
| 26 | @change="updateFlowCondition" | |
| 27 | /> | |
| 28 | </el-form-item> | |
| 29 | <template | |
| 30 | v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'" | |
| 31 | > | |
| 32 | <el-form-item label="脚本语言" key="language"> | |
| 33 | <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" /> | |
| 34 | </el-form-item> | |
| 35 | <el-form-item label="脚本类型" key="scriptType"> | |
| 36 | <el-select v-model="flowConditionForm.scriptType"> | |
| 37 | <el-option label="内联脚本" value="inlineScript" /> | |
| 38 | <el-option label="外部脚本" value="externalScript" /> | |
| 39 | </el-select> | |
| 40 | </el-form-item> | |
| 41 | <el-form-item | |
| 42 | label="脚本" | |
| 43 | v-if="flowConditionForm.scriptType === 'inlineScript'" | |
| 44 | key="body" | |
| 45 | > | |
| 46 | <el-input | |
| 47 | v-model="flowConditionForm.body" | |
| 48 | type="textarea" | |
| 49 | clearable | |
| 50 | @change="updateFlowCondition" | |
| 51 | /> | |
| 52 | </el-form-item> | |
| 53 | <el-form-item | |
| 54 | label="资源地址" | |
| 55 | v-if="flowConditionForm.scriptType === 'externalScript'" | |
| 56 | key="resource" | |
| 57 | > | |
| 58 | <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" /> | |
| 59 | </el-form-item> | |
| 60 | </template> | |
| 61 | </el-form> | |
| 62 | </div> | |
| 63 | </template> | |
| 64 | ||
| 65 | <script lang="ts" setup> | |
| 66 | defineOptions({ name: 'FlowCondition' }) | |
| 67 | ||
| 68 | const props = defineProps({ | |
| 69 | businessObject: Object, | |
| 70 | type: String | |
| 71 | }) | |
| 72 | const flowConditionForm = ref<any>({}) | |
| 73 | const bpmnElement = ref() | |
| 74 | const bpmnElementSource = ref() | |
| 75 | const bpmnElementSourceRef = ref() | |
| 76 | const flowConditionRef = ref() | |
| 77 | const bpmnInstances = () => (window as any)?.bpmnInstances | |
| 78 | const resetFlowCondition = () => { | |
| 79 | bpmnElement.value = bpmnInstances().bpmnElement | |
| 80 | bpmnElementSource.value = bpmnElement.value.source | |
| 81 | bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef | |
| 82 | // 初始化默认type为default | |
| 83 | flowConditionForm.value = { type: 'default' } | |
| 84 | if ( | |
| 85 | bpmnElementSourceRef.value && | |
| 86 | bpmnElementSourceRef.value.default && | |
| 87 | bpmnElementSourceRef.value.default.id === bpmnElement.value.id | |
| 88 | ) { | |
| 89 | flowConditionForm.value = { type: 'default' } | |
| 90 | } else if (!bpmnElement.value.businessObject.conditionExpression) { | |
| 91 | // 普通 | |
| 92 | flowConditionForm.value = { type: 'normal' } | |
| 93 | } else { | |
| 94 | // 带条件 | |
| 95 | const conditionExpression = bpmnElement.value.businessObject.conditionExpression | |
| 96 | flowConditionForm.value = { ...conditionExpression, type: 'condition' } | |
| 97 | // resource 可直接标识 是否是外部资源脚本 | |
| 98 | if (flowConditionForm.value.resource) { | |
| 99 | // this.$set(this.flowConditionForm, "conditionType", "script"); | |
| 100 | // this.$set(this.flowConditionForm, "scriptType", "externalScript"); | |
| 101 | flowConditionForm.value['conditionType'] = 'script' | |
| 102 | flowConditionForm.value['scriptType'] = 'externalScript' | |
| 103 | return | |
| 104 | } | |
| 105 | if (conditionExpression.language) { | |
| 106 | // this.$set(this.flowConditionForm, "conditionType", "script"); | |
| 107 | // this.$set(this.flowConditionForm, "scriptType", "inlineScript"); | |
| 108 | flowConditionForm.value['conditionType'] = 'script' | |
| 109 | flowConditionForm.value['scriptType'] = 'inlineScript' | |
| 110 | ||
| 111 | return | |
| 112 | } | |
| 113 | // this.$set(this.flowConditionForm, "conditionType", "expression"); | |
| 114 | flowConditionForm.value['conditionType'] = 'expression' | |
| 115 | } | |
| 116 | } | |
| 117 | const updateFlowType = (flowType) => { | |
| 118 | // 正常条件类 | |
| 119 | if (flowType === 'condition') { | |
| 120 | flowConditionRef.value = bpmnInstances().moddle.create('bpmn:FormalExpression') | |
| 121 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 122 | conditionExpression: flowConditionRef.value | |
| 123 | }) | |
| 124 | return | |
| 125 | } | |
| 126 | // 默认路径 | |
| 127 | if (flowType === 'default') { | |
| 128 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 129 | conditionExpression: null | |
| 130 | }) | |
| 131 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), { | |
| 132 | default: toRaw(bpmnElement.value) | |
| 133 | }) | |
| 134 | return | |
| 135 | } | |
| 136 | // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置 | |
| 137 | if ( | |
| 138 | bpmnElementSourceRef.value.default && | |
| 139 | bpmnElementSourceRef.value.default.id === bpmnElement.value.id | |
| 140 | ) { | |
| 141 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), { | |
| 142 | default: null | |
| 143 | }) | |
| 144 | } | |
| 145 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 146 | conditionExpression: null | |
| 147 | }) | |
| 148 | } | |
| 149 | const updateFlowCondition = () => { | |
| 150 | let { conditionType, scriptType, body, resource, language } = flowConditionForm.value | |
| 151 | let condition | |
| 152 | if (conditionType === 'expression') { | |
| 153 | condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body }) | |
| 154 | } else { | |
| 155 | if (scriptType === 'inlineScript') { | |
| 156 | condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body, language }) | |
| 157 | // this.$set(this.flowConditionForm, "resource", ""); | |
| 158 | flowConditionForm.value['resource'] = '' | |
| 159 | } else { | |
| 160 | // this.$set(this.flowConditionForm, "body", ""); | |
| 161 | flowConditionForm.value['body'] = '' | |
| 162 | condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { | |
| 163 | resource, | |
| 164 | language | |
| 165 | }) | |
| 166 | } | |
| 167 | } | |
| 168 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 169 | conditionExpression: condition | |
| 170 | }) | |
| 171 | } | |
| 172 | ||
| 173 | onBeforeUnmount(() => { | |
| 174 | bpmnElement.value = null | |
| 175 | bpmnElementSource.value = null | |
| 176 | bpmnElementSourceRef.value = null | |
| 177 | }) | |
| 178 | ||
| 179 | watch( | |
| 180 | () => props.businessObject, | |
| 181 | (val) => { | |
| 182 | console.log(val, 'val') | |
| 183 | nextTick(() => { | |
| 184 | resetFlowCondition() | |
| 185 | }) | |
| 186 | }, | |
| 187 | { | |
| 188 | immediate: true | |
| 189 | } | |
| 190 | ) | |
| 191 | </script> | |
