Commit a03f702fa132524dbd444fcd281350d44894eaff
1 parent
89c366be
修改数据弹出层
Showing
6 changed files
with
160 additions
and
114 deletions
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="process-panel__container" :style="{ width: `${width}px` }"> | 2 | + <div class="process-panel__container" :style="{ width: `${width}px;` }"> |
| 3 | <el-collapse v-model="activeTab"> | 3 | <el-collapse v-model="activeTab"> |
| 4 | <el-collapse-item name="base"> | 4 | <el-collapse-item name="base"> |
| 5 | <!-- class="panel-tab__title" --> | 5 | <!-- class="panel-tab__title" --> |
| @@ -89,7 +89,7 @@ const props = defineProps({ | @@ -89,7 +89,7 @@ const props = defineProps({ | ||
| 89 | }, | 89 | }, |
| 90 | width: { | 90 | width: { |
| 91 | type: Number, | 91 | type: Number, |
| 92 | - default: 480 | 92 | + default: 500 |
| 93 | }, | 93 | }, |
| 94 | idEditDisabled: { | 94 | idEditDisabled: { |
| 95 | type: Boolean, | 95 | type: Boolean, |
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="panel-tab__content"> | 2 | <div class="panel-tab__content"> |
| 3 | <el-form label-width="90px" :model="needProps" :rules="rules"> | 3 | <el-form label-width="90px" :model="needProps" :rules="rules"> |
| 4 | - <div v-if="elementBaseInfo == 'bpmn:Process'"> | 4 | + <div v-if="needProps.type == 'bpmn:Process'"> |
| 5 | <!-- 如果是 Process 信息的时候，使用自定义表单 --> | 5 | <!-- 如果是 Process 信息的时候，使用自定义表单 --> |
| 6 | <el-link | 6 | <el-link |
| 7 | href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B" | 7 | href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B" |
| @@ -9,9 +9,9 @@ | @@ -9,9 +9,9 @@ | ||
| 9 | target="_blank" | 9 | target="_blank" |
| 10 | >如何实现实现会签、或签？</el-link | 10 | >如何实现实现会签、或签？</el-link |
| 11 | > | 11 | > |
| 12 | - <el-form-item label="流程标识" prop="key"> | 12 | + <el-form-item label="流程标识" prop="id"> |
| 13 | <el-input | 13 | <el-input |
| 14 | - v-model="needProps.key" | 14 | + v-model="needProps.id" |
| 15 | placeholder="请输入流标标识" | 15 | placeholder="请输入流标标识" |
| 16 | :disabled="needProps.id !== undefined && needProps.id.length > 0" | 16 | :disabled="needProps.id !== undefined && needProps.id.length > 0" |
| 17 | @change="handleKeyUpdate" | 17 | @change="handleKeyUpdate" |
| @@ -38,20 +38,20 @@ | @@ -38,20 +38,20 @@ | ||
| 38 | </div> | 38 | </div> |
| 39 | </template> | 39 | </template> |
| 40 | <script setup lang="ts" name="ElementBaseInfo"> | 40 | <script setup lang="ts" name="ElementBaseInfo"> |
| 41 | -import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue' | 41 | +import { ref, reactive, watch, onMounted, onBeforeUnmount, toRaw } from 'vue' |
| 42 | import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus' | 42 | import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus' |
| 43 | const props = defineProps({ | 43 | const props = defineProps({ |
| 44 | businessObject: Object, | 44 | businessObject: Object, |
| 45 | model: Object // 流程模型的数据 | 45 | model: Object // 流程模型的数据 |
| 46 | }) | 46 | }) |
| 47 | -const needProps = ref() | 47 | +const needProps = ref({}) |
| 48 | const bpmnElement = ref() | 48 | const bpmnElement = ref() |
| 49 | const elementBaseInfo = ref({}) | 49 | const elementBaseInfo = ref({}) |
| 50 | // 流程表单的下拉框的数据 | 50 | // 流程表单的下拉框的数据 |
| 51 | // const forms = ref([]) | 51 | // const forms = ref([]) |
| 52 | // 流程模型的校验 | 52 | // 流程模型的校验 |
| 53 | const rules = reactive({ | 53 | const rules = reactive({ |
| 54 | - key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }], | 54 | + id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }], |
| 55 | name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }] | 55 | name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }] |
| 56 | }) | 56 | }) |
| 57 | 57 | ||
| @@ -60,10 +60,13 @@ const resetBaseInfo = () => { | @@ -60,10 +60,13 @@ const resetBaseInfo = () => { | ||
| 60 | console.log(bpmnElement, 'bpmnElement') | 60 | console.log(bpmnElement, 'bpmnElement') |
| 61 | 61 | ||
| 62 | bpmnElement.value = window?.bpmnInstances?.bpmnElement | 62 | bpmnElement.value = window?.bpmnInstances?.bpmnElement |
| 63 | - console.log(bpmnElement.value, 'resetBaseInfo') | 63 | + console.log(bpmnElement.value, 'resetBaseInfo11111111111') |
| 64 | elementBaseInfo.value = bpmnElement.value.businessObject | 64 | elementBaseInfo.value = bpmnElement.value.businessObject |
| 65 | + needProps.value['type'] = bpmnElement.value.businessObject.$type | ||
| 66 | + // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type | ||
| 67 | + | ||
| 65 | // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject)) | 68 | // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject)) |
| 66 | - console.log(elementBaseInfo.value, 'elementBaseInfo') | 69 | + console.log(elementBaseInfo.value, 'elementBaseInfo22222222222') |
| 67 | } | 70 | } |
| 68 | const handleKeyUpdate = (value) => { | 71 | const handleKeyUpdate = (value) => { |
| 69 | // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 | 72 | // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 |
| @@ -104,10 +107,15 @@ const updateBaseInfo = (key) => { | @@ -104,10 +107,15 @@ const updateBaseInfo = (key) => { | ||
| 104 | // id: elementBaseInfo.value[key] | 107 | // id: elementBaseInfo.value[key] |
| 105 | // // di: { id: `${elementBaseInfo.value[key]}_di` } | 108 | // // di: { id: `${elementBaseInfo.value[key]}_di` } |
| 106 | // } | 109 | // } |
| 110 | + console.log(elementBaseInfo, 'elementBaseInfo11111111111') | ||
| 111 | + needProps.value = { ...elementBaseInfo.value, ...needProps.value } | ||
| 107 | 112 | ||
| 108 | if (key === 'id') { | 113 | if (key === 'id') { |
| 109 | console.log('jinru') | 114 | console.log('jinru') |
| 110 | - window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { | 115 | + console.log(window, 'window') |
| 116 | + console.log(bpmnElement.value, 'bpmnElement') | ||
| 117 | + console.log(toRaw(bpmnElement.value), 'bpmnElement') | ||
| 118 | + window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), { | ||
| 111 | id: elementBaseInfo.value[key], | 119 | id: elementBaseInfo.value[key], |
| 112 | di: { id: `${elementBaseInfo.value[key]}_di` } | 120 | di: { id: `${elementBaseInfo.value[key]}_di` } |
| 113 | }) | 121 | }) |
| @@ -131,9 +139,9 @@ watch( | @@ -131,9 +139,9 @@ watch( | ||
| 131 | (val) => { | 139 | (val) => { |
| 132 | console.log(val, 'val11111111111111111111') | 140 | console.log(val, 'val11111111111111111111') |
| 133 | if (val) { | 141 | if (val) { |
| 134 | - nextTick(() => { | ||
| 135 | - resetBaseInfo() | ||
| 136 | - }) | 142 | + // nextTick(() => { |
| 143 | + resetBaseInfo() | ||
| 144 | + // }) | ||
| 137 | } | 145 | } |
| 138 | } | 146 | } |
| 139 | ) | 147 | ) |
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
| @@ -11,15 +11,15 @@ | @@ -11,15 +11,15 @@ | ||
| 11 | /> | 11 | /> |
| 12 | <el-table-column label="操作" width="90px"> | 12 | <el-table-column label="操作" width="90px"> |
| 13 | <template #default="scope"> | 13 | <template #default="scope"> |
| 14 | - <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)" | 14 | + <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)" |
| 15 | >编辑</el-button | 15 | >编辑</el-button |
| 16 | > | 16 | > |
| 17 | <el-divider direction="vertical" /> | 17 | <el-divider direction="vertical" /> |
| 18 | <el-button | 18 | <el-button |
| 19 | - size="mini" | 19 | + size="small" |
| 20 | type="text" | 20 | type="text" |
| 21 | style="color: #ff4d4f" | 21 | style="color: #ff4d4f" |
| 22 | - @click="removeListener(scope, scope.$index)" | 22 | + @click="removeListener(scope.row, scope.$index)" |
| 23 | >移除</el-button | 23 | >移除</el-button |
| 24 | > | 24 | > |
| 25 | </template> | 25 | </template> |
| @@ -138,7 +138,7 @@ | @@ -138,7 +138,7 @@ | ||
| 138 | <el-divider /> | 138 | <el-divider /> |
| 139 | <p class="listener-filed__title"> | 139 | <p class="listener-filed__title"> |
| 140 | <span><Icon icon="ep:menu" />注入字段：</span> | 140 | <span><Icon icon="ep:menu" />注入字段：</span> |
| 141 | - <el-button type="primary" @click="openListenerFieldForm(null)">添加字段</el-button> | 141 | + <XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" /> |
| 142 | </p> | 142 | </p> |
| 143 | <el-table | 143 | <el-table |
| 144 | :data="fieldsListOfListener" | 144 | :data="fieldsListOfListener" |
| @@ -164,15 +164,18 @@ | @@ -164,15 +164,18 @@ | ||
| 164 | /> | 164 | /> |
| 165 | <el-table-column label="操作" width="100px"> | 165 | <el-table-column label="操作" width="100px"> |
| 166 | <template #default="scope"> | 166 | <template #default="scope"> |
| 167 | - <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)" | 167 | + <el-button |
| 168 | + size="small" | ||
| 169 | + type="text" | ||
| 170 | + @click="openListenerFieldForm(scope.row, scope.$index)" | ||
| 168 | >编辑</el-button | 171 | >编辑</el-button |
| 169 | > | 172 | > |
| 170 | <el-divider direction="vertical" /> | 173 | <el-divider direction="vertical" /> |
| 171 | <el-button | 174 | <el-button |
| 172 | - size="mini" | 175 | + size="small" |
| 173 | type="text" | 176 | type="text" |
| 174 | style="color: #ff4d4f" | 177 | style="color: #ff4d4f" |
| 175 | - @click="removeListenerField(scope, scope.$index)" | 178 | + @click="removeListenerField(scope.row, scope.$index)" |
| 176 | >移除</el-button | 179 | >移除</el-button |
| 177 | > | 180 | > |
| 178 | </template> | 181 | </template> |
| @@ -180,8 +183,8 @@ | @@ -180,8 +183,8 @@ | ||
| 180 | </el-table> | 183 | </el-table> |
| 181 | 184 | ||
| 182 | <div class="element-drawer__button"> | 185 | <div class="element-drawer__button"> |
| 183 | - <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button> | ||
| 184 | - <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button> | 186 | + <el-button @click="listenerFormModelVisible = false">取 消</el-button> |
| 187 | + <el-button type="primary" @click="saveListenerConfig">保 存</el-button> | ||
| 185 | </div> | 188 | </div> |
| 186 | </el-drawer> | 189 | </el-drawer> |
| 187 | 190 | ||
| @@ -240,8 +243,8 @@ | @@ -240,8 +243,8 @@ | ||
| 240 | </el-form-item> | 243 | </el-form-item> |
| 241 | </el-form> | 244 | </el-form> |
| 242 | <template #footer> | 245 | <template #footer> |
| 243 | - <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button> | ||
| 244 | - <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button> | 246 | + <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button> |
| 247 | + <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button> | ||
| 245 | </template> | 248 | </template> |
| 246 | </el-dialog> | 249 | </el-dialog> |
| 247 | </div> | 250 | </div> |
| @@ -392,10 +395,10 @@ const saveListenerConfig = async () => { | @@ -392,10 +395,10 @@ const saveListenerConfig = async () => { | ||
| 392 | bpmnElement.value.businessObject?.extensionElements?.values?.filter( | 395 | bpmnElement.value.businessObject?.extensionElements?.values?.filter( |
| 393 | (ex) => ex.$type !== `${prefix}:ExecutionListener` | 396 | (ex) => ex.$type !== `${prefix}:ExecutionListener` |
| 394 | ) ?? [] | 397 | ) ?? [] |
| 395 | - updateElementExtensions( | ||
| 396 | - bpmnElement.value, | ||
| 397 | - otherExtensionList.value.concat(bpmnElementListeners.value) | ||
| 398 | - ) | 398 | + // updateElementExtensions( |
| 399 | + // bpmnElement.value, | ||
| 400 | + // otherExtensionList.value.concat(bpmnElementListeners.value) | ||
| 401 | + // ) | ||
| 399 | // 4. 隐藏侧边栏 | 402 | // 4. 隐藏侧边栏 |
| 400 | listenerFormModelVisible.value = false | 403 | listenerFormModelVisible.value = false |
| 401 | listenerForm.value = {} | 404 | listenerForm.value = {} |
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="panel-tab__content"> | 2 | <div class="panel-tab__content"> |
| 3 | - <el-table :data="elementListenersList" size="mini" border> | 3 | + <el-table :data="elementListenersList" size="small" border> |
| 4 | <el-table-column label="序号" width="50px" type="index" /> | 4 | <el-table-column label="序号" width="50px" type="index" /> |
| 5 | <el-table-column | 5 | <el-table-column |
| 6 | label="事件类型" | 6 | label="事件类型" |
| @@ -17,15 +17,15 @@ | @@ -17,15 +17,15 @@ | ||
| 17 | /> | 17 | /> |
| 18 | <el-table-column label="操作" width="90px"> | 18 | <el-table-column label="操作" width="90px"> |
| 19 | <template #default="scope"> | 19 | <template #default="scope"> |
| 20 | - <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)" | 20 | + <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)" |
| 21 | >编辑</el-button | 21 | >编辑</el-button |
| 22 | > | 22 | > |
| 23 | <el-divider direction="vertical" /> | 23 | <el-divider direction="vertical" /> |
| 24 | <el-button | 24 | <el-button |
| 25 | - size="mini" | 25 | + size="small" |
| 26 | type="text" | 26 | type="text" |
| 27 | style="color: #ff4d4f" | 27 | style="color: #ff4d4f" |
| 28 | - @click="removeListener(scope, scope.$index)" | 28 | + @click="removeListener(scope.row, scope.$index)" |
| 29 | >移除</el-button | 29 | >移除</el-button |
| 30 | > | 30 | > |
| 31 | </template> | 31 | </template> |
| @@ -33,7 +33,7 @@ | @@ -33,7 +33,7 @@ | ||
| 33 | </el-table> | 33 | </el-table> |
| 34 | <div class="element-drawer__button"> | 34 | <div class="element-drawer__button"> |
| 35 | <XButton | 35 | <XButton |
| 36 | - size="mini" | 36 | + size="small" |
| 37 | type="primary" | 37 | type="primary" |
| 38 | preIcon="ep:plus" | 38 | preIcon="ep:plus" |
| 39 | title="添加监听器" | 39 | title="添加监听器" |
| @@ -49,7 +49,7 @@ | @@ -49,7 +49,7 @@ | ||
| 49 | append-to-body | 49 | append-to-body |
| 50 | destroy-on-close | 50 | destroy-on-close |
| 51 | > | 51 | > |
| 52 | - <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef"> | 52 | + <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef"> |
| 53 | <el-form-item | 53 | <el-form-item |
| 54 | label="事件类型" | 54 | label="事件类型" |
| 55 | prop="event" | 55 | prop="event" |
| @@ -176,13 +176,13 @@ | @@ -176,13 +176,13 @@ | ||
| 176 | <el-divider /> | 176 | <el-divider /> |
| 177 | <p class="listener-filed__title"> | 177 | <p class="listener-filed__title"> |
| 178 | <span><Icon icon="ep:menu" />注入字段：</span> | 178 | <span><Icon icon="ep:menu" />注入字段：</span> |
| 179 | - <el-button size="mini" type="primary" @click="openListenerFieldForm(null)" | 179 | + <el-button size="small" type="primary" @click="openListenerFieldForm(null)" |
| 180 | >添加字段</el-button | 180 | >添加字段</el-button |
| 181 | > | 181 | > |
| 182 | </p> | 182 | </p> |
| 183 | <el-table | 183 | <el-table |
| 184 | :data="fieldsListOfListener" | 184 | :data="fieldsListOfListener" |
| 185 | - size="mini" | 185 | + size="small" |
| 186 | max-height="240" | 186 | max-height="240" |
| 187 | border | 187 | border |
| 188 | fit | 188 | fit |
| @@ -204,15 +204,18 @@ | @@ -204,15 +204,18 @@ | ||
| 204 | /> | 204 | /> |
| 205 | <el-table-column label="操作" width="100px"> | 205 | <el-table-column label="操作" width="100px"> |
| 206 | <template #default="scope"> | 206 | <template #default="scope"> |
| 207 | - <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)" | 207 | + <el-button |
| 208 | + size="small" | ||
| 209 | + type="text" | ||
| 210 | + @click="openListenerFieldForm(scope.row, scope.$index)" | ||
| 208 | >编辑</el-button | 211 | >编辑</el-button |
| 209 | > | 212 | > |
| 210 | <el-divider direction="vertical" /> | 213 | <el-divider direction="vertical" /> |
| 211 | <el-button | 214 | <el-button |
| 212 | - size="mini" | 215 | + size="small" |
| 213 | type="text" | 216 | type="text" |
| 214 | style="color: #ff4d4f" | 217 | style="color: #ff4d4f" |
| 215 | - @click="removeListenerField(scope, scope.$index)" | 218 | + @click="removeListenerField(scope.row, scope.$index)" |
| 216 | >移除</el-button | 219 | >移除</el-button |
| 217 | > | 220 | > |
| 218 | </template> | 221 | </template> |
| @@ -220,8 +223,8 @@ | @@ -220,8 +223,8 @@ | ||
| 220 | </el-table> | 223 | </el-table> |
| 221 | 224 | ||
| 222 | <div class="element-drawer__button"> | 225 | <div class="element-drawer__button"> |
| 223 | - <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button> | ||
| 224 | - <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button> | 226 | + <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button> |
| 227 | + <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button> | ||
| 225 | </div> | 228 | </div> |
| 226 | </el-drawer> | 229 | </el-drawer> |
| 227 | 230 | ||
| @@ -235,7 +238,7 @@ | @@ -235,7 +238,7 @@ | ||
| 235 | > | 238 | > |
| 236 | <el-form | 239 | <el-form |
| 237 | :model="listenerFieldForm" | 240 | :model="listenerFieldForm" |
| 238 | - size="mini" | 241 | + size="small" |
| 239 | label-width="96px" | 242 | label-width="96px" |
| 240 | ref="listenerFieldFormRef" | 243 | ref="listenerFieldFormRef" |
| 241 | style="height: 136px" | 244 | style="height: 136px" |
| @@ -281,8 +284,8 @@ | @@ -281,8 +284,8 @@ | ||
| 281 | </el-form-item> | 284 | </el-form-item> |
| 282 | </el-form> | 285 | </el-form> |
| 283 | <template #footer> | 286 | <template #footer> |
| 284 | - <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button> | ||
| 285 | - <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button> | 287 | + <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button> |
| 288 | + <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button> | ||
| 286 | </template> | 289 | </template> |
| 287 | </el-dialog> | 290 | </el-dialog> |
| 288 | </div> | 291 | </div> |
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
| 1 | // 创建监听器实例 | 1 | // 创建监听器实例 |
| 2 | -export function createListenerObject(options, isTask, prefix) { | ||
| 3 | - const listenerObj = Object.create(null); | ||
| 4 | - listenerObj.event = options.event; | ||
| 5 | - isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段 | 2 | +export function createListenerObject (options, isTask, prefix) { |
| 3 | + const listenerObj = Object.create(null) | ||
| 4 | + listenerObj.event = options.event | ||
| 5 | + isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段 | ||
| 6 | switch (options.listenerType) { | 6 | switch (options.listenerType) { |
| 7 | case "scriptListener": | 7 | case "scriptListener": |
| 8 | - listenerObj.script = createScriptObject(options, prefix); | ||
| 9 | - break; | 8 | + listenerObj.script = createScriptObject(options, prefix) |
| 9 | + break | ||
| 10 | case "expressionListener": | 10 | case "expressionListener": |
| 11 | - listenerObj.expression = options.expression; | ||
| 12 | - break; | 11 | + listenerObj.expression = options.expression |
| 12 | + break | ||
| 13 | case "delegateExpressionListener": | 13 | case "delegateExpressionListener": |
| 14 | - listenerObj.delegateExpression = options.delegateExpression; | ||
| 15 | - break; | 14 | + listenerObj.delegateExpression = options.delegateExpression |
| 15 | + break | ||
| 16 | default: | 16 | default: |
| 17 | - listenerObj.class = options.class; | 17 | + listenerObj.class = options.class |
| 18 | } | 18 | } |
| 19 | // 注入字段 | 19 | // 注入字段 |
| 20 | if (options.fields) { | 20 | if (options.fields) { |
| 21 | listenerObj.fields = options.fields.map(field => { | 21 | listenerObj.fields = options.fields.map(field => { |
| 22 | - return createFieldObject(field, prefix); | ||
| 23 | - }); | 22 | + return createFieldObject(field, prefix) |
| 23 | + }) | ||
| 24 | } | 24 | } |
| 25 | // 任务监听器的 定时器 设置 | 25 | // 任务监听器的 定时器 设置 |
| 26 | if (isTask && options.event === "timeout" && !!options.eventDefinitionType) { | 26 | if (isTask && options.event === "timeout" && !!options.eventDefinitionType) { |
| 27 | - const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions }); | 27 | + const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions }) |
| 28 | const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", { | 28 | const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", { |
| 29 | id: `TimerEventDefinition_${uuid(8)}`, | 29 | id: `TimerEventDefinition_${uuid(8)}`, |
| 30 | [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition | 30 | [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition |
| 31 | - }); | ||
| 32 | - listenerObj.eventDefinitions = [TimerEventDefinition]; | 31 | + }) |
| 32 | + listenerObj.eventDefinitions = [TimerEventDefinition] | ||
| 33 | } | 33 | } |
| 34 | - return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj); | 34 | + return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj) |
| 35 | } | 35 | } |
| 36 | 36 | ||
| 37 | // 创建 监听器的注入字段 实例 | 37 | // 创建 监听器的注入字段 实例 |
| 38 | -export function createFieldObject(option, prefix) { | ||
| 39 | - const { name, fieldType, string, expression } = option; | ||
| 40 | - const fieldConfig = fieldType === "string" ? { name, string } : { name, expression }; | ||
| 41 | - return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig); | 38 | +export function createFieldObject (option, prefix) { |
| 39 | + const { name, fieldType, string, expression } = option | ||
| 40 | + const fieldConfig = fieldType === "string" ? { name, string } : { name, expression } | ||
| 41 | + return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig) | ||
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | // 创建脚本实例 | 44 | // 创建脚本实例 |
| 45 | -export function createScriptObject(options, prefix) { | ||
| 46 | - const { scriptType, scriptFormat, value, resource } = options; | ||
| 47 | - const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource }; | ||
| 48 | - return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig); | 45 | +export function createScriptObject (options, prefix) { |
| 46 | + const { scriptType, scriptFormat, value, resource } = options | ||
| 47 | + const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource } | ||
| 48 | + return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig) | ||
| 49 | } | 49 | } |
| 50 | 50 | ||
| 51 | // 更新元素扩展属性 | 51 | // 更新元素扩展属性 |
| 52 | -export function updateElementExtensions(element, extensionList) { | 52 | +export function updateElementExtensions (element, extensionList) { |
| 53 | + console.log(element, 'element') | ||
| 54 | + console.log(extensionList, 'extensionList') | ||
| 53 | const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { | 55 | const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { |
| 54 | values: extensionList | 56 | values: extensionList |
| 55 | - }); | 57 | + }) |
| 58 | + console.log(extensions, 'extensionsextensions') | ||
| 59 | + console.log(window.bpmnInstances.modeling, 'window.bpmnInstances.modeling') | ||
| 56 | window.bpmnInstances.modeling.updateProperties(element, { | 60 | window.bpmnInstances.modeling.updateProperties(element, { |
| 57 | - extensionElements: extensions | ||
| 58 | - }); | 61 | + extensionElements: extensions.values |
| 62 | + }) | ||
| 59 | } | 63 | } |
| 60 | 64 | ||
| 61 | // 创建一个id | 65 | // 创建一个id |
| 62 | -export function uuid(length = 8, chars) { | ||
| 63 | - let result = ""; | ||
| 64 | - let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; | 66 | +export function uuid (length = 8, chars) { |
| 67 | + let result = "" | ||
| 68 | + let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" | ||
| 65 | for (let i = length; i > 0; --i) { | 69 | for (let i = length; i > 0; --i) { |
| 66 | - result += charsString[Math.floor(Math.random() * charsString.length)]; | 70 | + result += charsString[Math.floor(Math.random() * charsString.length)] |
| 67 | } | 71 | } |
| 68 | - return result; | 72 | + return result |
| 69 | } | 73 | } |
yudao-ui-admin/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="panel-tab__content"> | 2 | <div class="panel-tab__content"> |
| 3 | - <el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent> | ||
| 4 | - <div v-if="elementBaseInfo.$type === 'bpmn:Process'"> <!-- 如果是 Process 信息的时候，使用自定义表单 --> | ||
| 5 | - <el-link href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B" | ||
| 6 | - type="danger" target="_blank">如何实现实现会签、或签？</el-link> | 3 | + <el-form |
| 4 | + size="mini" | ||
| 5 | + label-width="90px" | ||
| 6 | + :model="model" | ||
| 7 | + :rules="rules" | ||
| 8 | + @submit.native.prevent | ||
| 9 | + > | ||
| 10 | + <div v-if="elementBaseInfo.$type === 'bpmn:Process'"> | ||
| 11 | + <!-- 如果是 Process 信息的时候，使用自定义表单 --> | ||
| 12 | + <el-link | ||
| 13 | + href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B" | ||
| 14 | + type="danger" | ||
| 15 | + target="_blank" | ||
| 16 | + >如何实现实现会签、或签？</el-link | ||
| 17 | + > | ||
| 7 | <el-form-item label="流程标识" prop="key"> | 18 | <el-form-item label="流程标识" prop="key"> |
| 8 | - <el-input v-model="model.key" placeholder="请输入流标标识" | ||
| 9 | - :disabled="model.id !== undefined && model.id.length > 0" @change="handleKeyUpdate" /> | 19 | + <el-input |
| 20 | + v-model="model.key" | ||
| 21 | + placeholder="请输入流标标识" | ||
| 22 | + :disabled="model.id !== undefined && model.id.length > 0" | ||
| 23 | + @change="handleKeyUpdate" | ||
| 24 | + /> | ||
| 10 | </el-form-item> | 25 | </el-form-item> |
| 11 | <el-form-item label="流程名称" prop="name"> | 26 | <el-form-item label="流程名称" prop="name"> |
| 12 | - <el-input v-model="model.name" placeholder="请输入流程名称" clearable @change="handleNameUpdate" /> | 27 | + <el-input |
| 28 | + v-model="model.name" | ||
| 29 | + placeholder="请输入流程名称" | ||
| 30 | + clearable | ||
| 31 | + @change="handleNameUpdate" | ||
| 32 | + /> | ||
| 13 | </el-form-item> | 33 | </el-form-item> |
| 14 | </div> | 34 | </div> |
| 15 | <div v-else> | 35 | <div v-else> |
| 16 | <el-form-item label="ID"> | 36 | <el-form-item label="ID"> |
| 17 | - <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')"/> | 37 | + <el-input |
| 38 | + v-model="elementBaseInfo.id" | ||
| 39 | + clearable | ||
| 40 | + @change="updateBaseInfo('id')" | ||
| 41 | + /> | ||
| 18 | </el-form-item> | 42 | </el-form-item> |
| 19 | <el-form-item label="名称"> | 43 | <el-form-item label="名称"> |
| 20 | - <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" /> | 44 | + <el-input |
| 45 | + v-model="elementBaseInfo.name" | ||
| 46 | + clearable | ||
| 47 | + @change="updateBaseInfo('name')" | ||
| 48 | + /> | ||
| 21 | </el-form-item> | 49 | </el-form-item> |
| 22 | </div> | 50 | </div> |
| 23 | </el-form> | 51 | </el-form> |
| @@ -31,7 +59,7 @@ export default { | @@ -31,7 +59,7 @@ export default { | ||
| 31 | businessObject: Object, | 59 | businessObject: Object, |
| 32 | model: Object, // 流程模型的数据 | 60 | model: Object, // 流程模型的数据 |
| 33 | }, | 61 | }, |
| 34 | - data() { | 62 | + data () { |
| 35 | return { | 63 | return { |
| 36 | elementBaseInfo: {}, | 64 | elementBaseInfo: {}, |
| 37 | // 流程表单的下拉框的数据 | 65 | // 流程表单的下拉框的数据 |
| @@ -41,14 +69,14 @@ export default { | @@ -41,14 +69,14 @@ export default { | ||
| 41 | key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }], | 69 | key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }], |
| 42 | name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }], | 70 | name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }], |
| 43 | }, | 71 | }, |
| 44 | - }; | 72 | + } |
| 45 | }, | 73 | }, |
| 46 | watch: { | 74 | watch: { |
| 47 | businessObject: { | 75 | businessObject: { |
| 48 | immediate: false, | 76 | immediate: false, |
| 49 | - handler: function(val) { | 77 | + handler: function (val) { |
| 50 | if (val) { | 78 | if (val) { |
| 51 | - this.$nextTick(() => this.resetBaseInfo()); | 79 | + this.$nextTick(() => this.resetBaseInfo()) |
| 52 | } | 80 | } |
| 53 | } | 81 | } |
| 54 | }, | 82 | }, |
| @@ -59,7 +87,7 @@ export default { | @@ -59,7 +87,7 @@ export default { | ||
| 59 | // } | 87 | // } |
| 60 | // } | 88 | // } |
| 61 | }, | 89 | }, |
| 62 | - created() { | 90 | + created () { |
| 63 | // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新 | 91 | // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新 |
| 64 | setTimeout(() => { | 92 | setTimeout(() => { |
| 65 | this.handleKeyUpdate(this.model.key) | 93 | this.handleKeyUpdate(this.model.key) |
| @@ -67,53 +95,53 @@ export default { | @@ -67,53 +95,53 @@ export default { | ||
| 67 | }, 1000) | 95 | }, 1000) |
| 68 | }, | 96 | }, |
| 69 | methods: { | 97 | methods: { |
| 70 | - resetBaseInfo() { | ||
| 71 | - this.bpmnElement = window?.bpmnInstances?.bpmnElement; | ||
| 72 | - this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject)); | 98 | + resetBaseInfo () { |
| 99 | + this.bpmnElement = window?.bpmnInstances?.bpmnElement | ||
| 100 | + this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject)) | ||
| 73 | }, | 101 | }, |
| 74 | - handleKeyUpdate(value) { | 102 | + handleKeyUpdate (value) { |
| 75 | // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 | 103 | // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 |
| 76 | if (!value) { | 104 | if (!value) { |
| 77 | - return; | 105 | + return |
| 78 | } | 106 | } |
| 79 | if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) { | 107 | if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) { |
| 80 | - console.log('key 不满足 XML NCName 规则，所以不进行赋值'); | ||
| 81 | - return; | 108 | + console.log('key 不满足 XML NCName 规则，所以不进行赋值') |
| 109 | + return | ||
| 82 | } | 110 | } |
| 83 | - console.log('key 满足 XML NCName 规则，所以进行赋值'); | 111 | + console.log('key 满足 XML NCName 规则，所以进行赋值') |
| 84 | 112 | ||
| 85 | // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点 | 113 | // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点 |
| 86 | - this.elementBaseInfo['id'] = value; | ||
| 87 | - this.updateBaseInfo('id'); | 114 | + this.elementBaseInfo['id'] = value |
| 115 | + this.updateBaseInfo('id') | ||
| 88 | }, | 116 | }, |
| 89 | - handleNameUpdate(value) { | 117 | + handleNameUpdate (value) { |
| 90 | if (!value) { | 118 | if (!value) { |
| 91 | return | 119 | return |
| 92 | } | 120 | } |
| 93 | - this.elementBaseInfo['name'] = value; | ||
| 94 | - this.updateBaseInfo('name'); | 121 | + this.elementBaseInfo['name'] = value |
| 122 | + this.updateBaseInfo('name') | ||
| 95 | }, | 123 | }, |
| 96 | - handleDescriptionUpdate(value) { | 124 | + handleDescriptionUpdate (value) { |
| 97 | // TODO 芋艿：documentation 暂时无法修改，后续在看看 | 125 | // TODO 芋艿：documentation 暂时无法修改，后续在看看 |
| 98 | // this.elementBaseInfo['documentation'] = value; | 126 | // this.elementBaseInfo['documentation'] = value; |
| 99 | // this.updateBaseInfo('documentation'); | 127 | // this.updateBaseInfo('documentation'); |
| 100 | }, | 128 | }, |
| 101 | - updateBaseInfo(key) { | 129 | + updateBaseInfo (key) { |
| 102 | // 触发 elementBaseInfo 对应的字段 | 130 | // 触发 elementBaseInfo 对应的字段 |
| 103 | - const attrObj = Object.create(null); | ||
| 104 | - attrObj[key] = this.elementBaseInfo[key]; | 131 | + const attrObj = Object.create(null) |
| 132 | + attrObj[key] = this.elementBaseInfo[key] | ||
| 105 | if (key === "id") { | 133 | if (key === "id") { |
| 106 | window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { | 134 | window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { |
| 107 | id: this.elementBaseInfo[key], | 135 | id: this.elementBaseInfo[key], |
| 108 | di: { id: `${this.elementBaseInfo[key]}_di` } | 136 | di: { id: `${this.elementBaseInfo[key]}_di` } |
| 109 | - }); | 137 | + }) |
| 110 | } else { | 138 | } else { |
| 111 | - window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj); | 139 | + window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj) |
| 112 | } | 140 | } |
| 113 | } | 141 | } |
| 114 | }, | 142 | }, |
| 115 | - beforeDestroy() { | ||
| 116 | - this.bpmnElement = null; | 143 | + beforeDestroy () { |
| 144 | + this.bpmnElement = null | ||
| 117 | } | 145 | } |
| 118 | }; | 146 | }; |
| 119 | </script> | 147 | </script> |