各个节点绑定值 修改等bug

This commit is contained in:
gexinzhineng/gxzn27 2023-01-29 14:12:16 +08:00
parent 548f8bc32c
commit 2be0ea5ffb
6 changed files with 39 additions and 58 deletions

View File

@ -9,14 +9,15 @@
show-overflow-tooltip show-overflow-tooltip
:formatter="(row) => listenerTypeObject[row.listenerType]" :formatter="(row) => listenerTypeObject[row.listenerType]"
/> />
<el-table-column label="操作" width="130px"> <el-table-column label="操作" width="100px">
<template #default="scope"> <template #default="scope">
<el-button size="small" @click="openListenerForm(scope.row, scope.$index)" <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="small" size="small"
link
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListener(scope.row, scope.$index)" @click="removeListener(scope.row, scope.$index)"
>移除</el-button >移除</el-button
@ -26,7 +27,6 @@
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<XButton <XButton
size="mini"
type="primary" type="primary"
preIcon="ep:plus" preIcon="ep:plus"
title="添加监听器" title="添加监听器"
@ -137,7 +137,7 @@
<el-divider /> <el-divider />
<p class="listener-filed__title"> <p class="listener-filed__title">
<span><Icon icon="ep:menu" />注入字段</span> <span><Icon icon="ep:menu" />注入字段</span>
<XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" /> <XButton type="primary" @click="openListenerFieldForm(null)" title="添加字段" />
</p> </p>
<el-table <el-table
:data="fieldsListOfListener" :data="fieldsListOfListener"
@ -163,16 +163,13 @@
/> />
<el-table-column label="操作" width="130px"> <el-table-column label="操作" width="130px">
<template #default="scope"> <template #default="scope">
<el-button <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
size="small"
type="text"
@click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="small" size="small"
type="text" link
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListenerField(scope.row, scope.$index)" @click="removeListenerField(scope.row, scope.$index)"
>移除</el-button >移除</el-button
@ -293,9 +290,7 @@ const resetListenersList = () => {
otherExtensionList.value = [] otherExtensionList.value = []
console.log(bpmnElement.value, 'bpmnElement.value') console.log(bpmnElement.value, 'bpmnElement.value')
bpmnElementListeners.value = bpmnElementListeners.value =
// bpmnElement.value.businessObject?.extensionElements?.filter( bpmnElement.value.businessObject?.extensionElements?.values?.filter(
bpmnElement.value.businessObject?.extensionElements?.filter(
// bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix}:ExecutionListener` (ex) => ex.$type === `${prefix}:ExecutionListener`
) ?? [] ) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) => elementListenersList.value = bpmnElementListeners.value.map((listener) =>
@ -396,8 +391,8 @@ const saveListenerConfig = async () => {
// //
console.log(bpmnElement.value, 'bpmnElement.value') console.log(bpmnElement.value, 'bpmnElement.value')
otherExtensionList.value = otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.filter( // bpmnElement.value.businessObject?.extensionElements?.filter(
// bpmnElement.value.businessObject?.extensionElements?.values?.filter( bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:ExecutionListener` (ex) => ex.$type !== `${prefix}:ExecutionListener`
) ?? [] ) ?? []
console.log(bpmnElement.value, 'bpmnElement.value') console.log(bpmnElement.value, 'bpmnElement.value')
@ -406,20 +401,10 @@ const saveListenerConfig = async () => {
otherExtensionList.value.concat(bpmnElementListeners.value), otherExtensionList.value.concat(bpmnElementListeners.value),
'otherExtensionList.value.concat(bpmnElementListeners.value).value' 'otherExtensionList.value.concat(bpmnElementListeners.value).value'
) )
// updateElementExtensions( updateElementExtensions(
// bpmnElement.value, bpmnElement.value,
// // toRaw(bpmnElement.value), otherExtensionList.value.concat(bpmnElementListeners.value)
// otherExtensionList.value.concat(bpmnElementListeners.value) )
// // toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
// )
const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
values: otherExtensionList.value.concat(bpmnElementListeners.value)
})
console.log(extensions, 'extensionsextensionsextensions')
console.log(extensions.values, 'extensionsextensionsextensions')
window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
extensionElements: extensions.values
})
// 4. // 4.
listenerFormModelVisible.value = false listenerFormModelVisible.value = false
listenerForm.value = {} listenerForm.value = {}

View File

@ -17,13 +17,13 @@
/> />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)" <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="small" size="small"
type="text" link
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListener(scope.row, scope.$index)" @click="removeListener(scope.row, scope.$index)"
>移除</el-button >移除</el-button
@ -204,16 +204,13 @@
/> />
<el-table-column label="操作" width="100px"> <el-table-column label="操作" width="100px">
<template #default="scope"> <template #default="scope">
<el-button <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
size="small"
type="text"
@click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="small" size="small"
type="text" link
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListenerField(scope.row, scope.$index)" @click="removeListenerField(scope.row, scope.$index)"
>移除</el-button >移除</el-button
@ -338,8 +335,7 @@ const resetListenersList = () => {
bpmnElement.value = window.bpmnInstances.bpmnElement bpmnElement.value = window.bpmnInstances.bpmnElement
otherExtensionList.value = [] otherExtensionList.value = []
bpmnElementListeners.value = bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.filter( bpmnElement.value.businessObject?.extensionElements?.values.filter(
// bpmnElement.value.businessObject?.extensionElements?.values.filter(
(ex) => ex.$type === `${prefix}:TaskListener` (ex) => ex.$type === `${prefix}:TaskListener`
) ?? [] ) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) => elementListenersList.value = bpmnElementListeners.value.map((listener) =>

View File

@ -1,25 +1,25 @@
export const template = isTaskListener => { export const template = isTaskListener => {
return ` return `
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border> <el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" /> <el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="100px" prop="event" /> <el-table-column label="事件类型" min-width="100px" prop="event" />
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" /> <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button> <el-button size="small" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button> <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button> <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
</div> </div>
<!-- 监听器 编辑/创建 部分 --> <!-- 监听器 编辑/创建 部分 -->
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close> <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent> <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }"> <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event"> <el-select v-model="listenerForm.event">
<el-option label="start" value="start" /> <el-option label="start" value="start" />
@ -115,31 +115,31 @@ export const template = isTaskListener => {
<el-divider /> <el-divider />
<p class="listener-filed__title"> <p class="listener-filed__title">
<span><i class="el-icon-menu"></i></span> <span><i class="el-icon-menu"></i></span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button> <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p> </p>
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none"> <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
<el-table-column label="序号" width="50px" type="index" /> <el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" /> <el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" /> <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" /> <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px"> <el-table-column label="操作" width="100px">
<template #default="scope"> <template #default="scope">
<el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button> <el-button size="small" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button> <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false"> </el-button> <el-button size="small" @click="listenerFormModelVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="saveListenerConfig"> </el-button> <el-button size="small" type="primary" @click="saveListenerConfig"> </el-button>
</div> </div>
</el-drawer> </el-drawer>
<!-- 注入西段 编辑/创建 部分 --> <!-- 注入西段 编辑/创建 部分 -->
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close> <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent> <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<el-form-item label="字段名称:" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }"> <el-form-item label="字段名称:" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable /> <el-input v-model="listenerFieldForm.name" clearable />
</el-form-item> </el-form-item>
@ -168,8 +168,8 @@ export const template = isTaskListener => {
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button size="mini" @click="listenerFieldFormModelVisible = false"> </el-button> <el-button size="small" @click="listenerFieldFormModelVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled"> </el-button> <el-button size="small" type="primary" @click="saveListenerFiled"> </el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>

View File

@ -4,14 +4,15 @@
<el-table-column label="序号" width="50px" type="index" /> <el-table-column label="序号" width="50px" type="index" />
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip /> <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip /> <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="110px">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="openAttributesForm(scope.row, scope.$index)" <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
type="text" link
size="small"
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeAttributes(scope.row, scope.$index)" @click="removeAttributes(scope.row, scope.$index)"
>移除</el-button >移除</el-button
@ -86,8 +87,8 @@ const resetAttributesList = () => {
bpmnElement.value = window.bpmnInstances.bpmnElement bpmnElement.value = window.bpmnInstances.bpmnElement
otherExtensionList.value = [] // otherExtensionList.value = [] //
bpmnElementProperties.value = bpmnElementProperties.value =
bpmnElement.value.businessObject?.extensionElements?.filter((ex) => { // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
// bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => { bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
if (ex.$type !== `${prefix}:Properties`) { if (ex.$type !== `${prefix}:Properties`) {
otherExtensionList.value.push(ex) otherExtensionList.value.push(ex)
} }

View File

@ -18,7 +18,6 @@
/> />
</el-select> </el-select>
<XButton <XButton
size="mini"
type="primary" type="primary"
preIcon="ep:plus" preIcon="ep:plus"
style="margin-left: 8px" style="margin-left: 8px"

View File

@ -61,7 +61,7 @@ export function updateElementExtensions(element, extensionList) {
values: extensionList values: extensionList
}) })
window.bpmnInstances.modeling.updateProperties(toRaw(element), { window.bpmnInstances.modeling.updateProperties(toRaw(element), {
extensionElements: extensions.values extensionElements: extensions
}) })
} }