调整
This commit is contained in:
guanj
@@ -103,7 +103,7 @@ const highlightDiagram = async () => {
|
|||||||
let findProcessTask = false //是否已经高亮了进行中的任务
|
let findProcessTask = false //是否已经高亮了进行中的任务
|
||||||
//进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
|
//进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
|
||||||
let removeTaskDefinitionKeyList = []
|
let removeTaskDefinitionKeyList = []
|
||||||
// debugger
|
//
|
||||||
//芋道这里取值是rootElements[0].flowElements
|
//芋道这里取值是rootElements[0].flowElements
|
||||||
bpmnModeler.getDefinitions().rootElements[1].flowElements?.forEach((n: any) => {
|
bpmnModeler.getDefinitions().rootElements[1].flowElements?.forEach((n: any) => {
|
||||||
let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
|
let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
|
||||||
@@ -135,7 +135,6 @@ const highlightDiagram = async () => {
|
|||||||
// 处理 outgoing 出线
|
// 处理 outgoing 出线
|
||||||
const outgoing = getActivityOutgoing(activity)
|
const outgoing = getActivityOutgoing(activity)
|
||||||
outgoing?.forEach((nn: any) => {
|
outgoing?.forEach((nn: any) => {
|
||||||
// debugger
|
|
||||||
let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
|
let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
|
||||||
// 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
|
// 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
|
||||||
if (targetActivity) {
|
if (targetActivity) {
|
||||||
|
|||||||
@@ -1,463 +1,459 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='panel-tab__content'>
|
<div class='panel-tab__content'>
|
||||||
<el-table :data='elementListenersList' size='small' border>
|
<el-table :data='elementListenersList' size='small' border>
|
||||||
<el-table-column label='序号' width='80px' type='index' />
|
<el-table-column label='序号' width='80px' type='index' />
|
||||||
<el-table-column label='事件类型' min-width='100px' prop='event' />
|
<el-table-column label='事件类型' min-width='100px' prop='event' />
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label='监听器类型'
|
label='监听器类型'
|
||||||
min-width='100px'
|
min-width='100px'
|
||||||
show-overflow-tooltip
|
show-overflow-tooltip
|
||||||
:formatter='(row) => listenerTypeObject[row.listenerType]'
|
:formatter='(row) => listenerTypeObject[row.listenerType]'
|
||||||
/>
|
/>
|
||||||
<el-table-column label='操作' width='100px'>
|
<el-table-column label='操作' width='100px'>
|
||||||
<template #default='scope'>
|
<template #default='scope'>
|
||||||
<el-button size='small' link @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 size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
|
<el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
|
||||||
>移除
|
>移除
|
||||||
</el-button
|
</el-button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<div class='element-drawer__button'>
|
<div class='element-drawer__button'>
|
||||||
<XButton
|
<XButton
|
||||||
type="primary"
|
type="primary"
|
||||||
preIcon="ep:plus"
|
preIcon="ep:plus"
|
||||||
title="添加监听器"
|
title="添加监听器"
|
||||||
size="small"
|
size="small"
|
||||||
@click="openListenerForm(null)"
|
@click="openListenerForm(null)"
|
||||||
/>
|
/>
|
||||||
<!-- <Plus type='primary'-->
|
<!-- <Plus type='primary'-->
|
||||||
<!-- title='添加监听器'-->
|
<!-- title='添加监听器'-->
|
||||||
<!-- size='small'-->
|
<!-- size='small'-->
|
||||||
<!-- @click='openListenerForm(null)' />-->
|
<!-- @click='openListenerForm(null)' />-->
|
||||||
<XButton
|
<XButton
|
||||||
type="success"
|
type="success"
|
||||||
preIcon="ep:select"
|
preIcon="ep:select"
|
||||||
title="选择监听器"
|
title="选择监听器"
|
||||||
size="small"
|
size="small"
|
||||||
@click="openProcessListenerDialog"
|
@click="openProcessListenerDialog"
|
||||||
/>
|
/>
|
||||||
<!-- <Select-->
|
<!-- <Select-->
|
||||||
<!-- type='success'-->
|
<!-- type='success'-->
|
||||||
<!-- title='选择监听器'-->
|
<!-- title='选择监听器'-->
|
||||||
<!-- size='small'-->
|
<!-- size='small'-->
|
||||||
<!-- @click='openProcessListenerDialog'-->
|
<!-- @click='openProcessListenerDialog'-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 监听器 编辑/创建 部分 -->
|
<!-- 监听器 编辑/创建 部分 -->
|
||||||
<el-drawer
|
<el-drawer
|
||||||
v-model='listenerFormModelVisible'
|
v-model='listenerFormModelVisible'
|
||||||
title='执行监听器'
|
title='执行监听器'
|
||||||
:size='`${width}px`'
|
:size='`${width}px`'
|
||||||
append-to-body
|
append-to-body
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
>
|
>
|
||||||
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
|
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label='事件类型'
|
label='事件类型'
|
||||||
prop='event'
|
prop='event'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
: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' />
|
||||||
<el-option label='end' value='end' />
|
<el-option label='end' value='end' />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label='监听器类型'
|
label='监听器类型'
|
||||||
prop='listenerType'
|
prop='listenerType'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-select v-model='listenerForm.listenerType'>
|
<el-select v-model='listenerForm.listenerType'>
|
||||||
<el-option
|
<el-option
|
||||||
v-for='i in Object.keys(listenerTypeObject)'
|
v-for='i in Object.keys(listenerTypeObject)'
|
||||||
:key='i'
|
:key='i'
|
||||||
:label='listenerTypeObject[i]'
|
:label='listenerTypeObject[i]'
|
||||||
:value='i'
|
:value='i'
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerForm.listenerType === 'classListener'"
|
v-if="listenerForm.listenerType === 'classListener'"
|
||||||
label='Java类'
|
label='Java类'
|
||||||
prop='class'
|
prop='class'
|
||||||
key='listener-class'
|
key='listener-class'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerForm.class' clearable />
|
<el-input v-model='listenerForm.class' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||||
label='表达式'
|
label='表达式'
|
||||||
prop='expression'
|
prop='expression'
|
||||||
key='listener-expression'
|
key='listener-expression'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerForm.expression' clearable />
|
<el-input v-model='listenerForm.expression' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||||
label='代理表达式'
|
label='代理表达式'
|
||||||
prop='delegateExpression'
|
prop='delegateExpression'
|
||||||
key='listener-delegate'
|
key='listener-delegate'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerForm.delegateExpression' clearable />
|
<el-input v-model='listenerForm.delegateExpression' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label='脚本格式'
|
label='脚本格式'
|
||||||
prop='scriptFormat'
|
prop='scriptFormat'
|
||||||
key='listener-script-format'
|
key='listener-script-format'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerForm.scriptFormat' clearable />
|
<el-input v-model='listenerForm.scriptFormat' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label='脚本类型'
|
label='脚本类型'
|
||||||
prop='scriptType'
|
prop='scriptType'
|
||||||
key='listener-script-type'
|
key='listener-script-type'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||||
>
|
>
|
||||||
<el-select v-model='listenerForm.scriptType'>
|
<el-select v-model='listenerForm.scriptType'>
|
||||||
<el-option label='内联脚本' value='inlineScript' />
|
<el-option label='内联脚本' value='inlineScript' />
|
||||||
<el-option label='外部脚本' value='externalScript' />
|
<el-option label='外部脚本' value='externalScript' />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||||
label='脚本内容'
|
label='脚本内容'
|
||||||
prop='value'
|
prop='value'
|
||||||
key='listener-script'
|
key='listener-script'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerForm.value' clearable />
|
<el-input v-model='listenerForm.value' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerForm.scriptType === 'externalScript'"
|
v-if="listenerForm.scriptType === 'externalScript'"
|
||||||
label='资源地址'
|
label='资源地址'
|
||||||
prop='resource'
|
prop='resource'
|
||||||
key='listener-resource'
|
key='listener-resource'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerForm.resource' clearable />
|
<el-input v-model='listenerForm.resource' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-divider />
|
<el-divider />
|
||||||
<p class='listener-filed__title'>
|
<p class='listener-filed__title'>
|
||||||
<span><Menu />注入字段：</span>
|
<span><Menu />注入字段：</span>
|
||||||
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
|
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
|
||||||
</p>
|
</p>
|
||||||
<el-table
|
<el-table
|
||||||
:data='fieldsListOfListener'
|
:data='fieldsListOfListener'
|
||||||
size='small'
|
size='small'
|
||||||
max-height='240'
|
max-height='240'
|
||||||
fit
|
fit
|
||||||
border
|
border
|
||||||
style='flex: none'
|
style='flex: none'
|
||||||
>
|
>
|
||||||
<el-table-column label='序号' width='80px' type='index' />
|
<el-table-column label='序号' width='80px' type='index' />
|
||||||
<el-table-column label='字段名称' min-width='100px' prop='name' />
|
<el-table-column label='字段名称' min-width='100px' prop='name' />
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label='字段类型'
|
label='字段类型'
|
||||||
min-width='80px'
|
min-width='80px'
|
||||||
show-overflow-tooltip
|
show-overflow-tooltip
|
||||||
:formatter='(row) => fieldTypeObject[row.fieldType]'
|
:formatter='(row) => fieldTypeObject[row.fieldType]'
|
||||||
/>
|
/>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label='字段值/表达式'
|
label='字段值/表达式'
|
||||||
min-width='100px'
|
min-width='100px'
|
||||||
show-overflow-tooltip
|
show-overflow-tooltip
|
||||||
:formatter='(row) => row.string || row.expression'
|
:formatter='(row) => row.string || row.expression'
|
||||||
/>
|
/>
|
||||||
<el-table-column label='操作' width='130px'>
|
<el-table-column label='操作' width='130px'>
|
||||||
<template #default='scope'>
|
<template #default='scope'>
|
||||||
<el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
|
<el-button size='small' link @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'
|
||||||
link
|
link
|
||||||
style='color: #ff4d4f'
|
style='color: #ff4d4f'
|
||||||
@click='removeListenerField(scope.$index)'
|
@click='removeListenerField(scope.$index)'
|
||||||
>移除
|
>移除
|
||||||
</el-button
|
</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 @click='listenerFormModelVisible = false'>取 消</el-button>
|
<el-button @click='listenerFormModelVisible = false'>取 消</el-button>
|
||||||
<el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
|
<el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
||||||
<!-- 注入西段 编辑/创建 部分 -->
|
<!-- 注入西段 编辑/创建 部分 -->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
title='字段配置'
|
title='字段配置'
|
||||||
v-model='listenerFieldFormModelVisible'
|
v-model='listenerFieldFormModelVisible'
|
||||||
width='600px'
|
width='600px'
|
||||||
append-to-body
|
append-to-body
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
>
|
>
|
||||||
<el-form
|
<el-form
|
||||||
:model='listenerFieldForm'
|
:model='listenerFieldForm'
|
||||||
label-width='96spx'
|
label-width='96spx'
|
||||||
ref='listenerFieldFormRef'
|
ref='listenerFieldFormRef'
|
||||||
style='height: 136px'
|
style='height: 136px'
|
||||||
>
|
>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label='字段名称：'
|
label='字段名称：'
|
||||||
prop='name'
|
prop='name'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
: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>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label='字段类型：'
|
label='字段类型：'
|
||||||
prop='fieldType'
|
prop='fieldType'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-select v-model='listenerFieldForm.fieldType'>
|
<el-select v-model='listenerFieldForm.fieldType'>
|
||||||
<el-option
|
<el-option
|
||||||
v-for='i in Object.keys(fieldTypeObject)'
|
v-for='i in Object.keys(fieldTypeObject)'
|
||||||
:key='i'
|
:key='i'
|
||||||
:label='fieldTypeObject[i]'
|
:label='fieldTypeObject[i]'
|
||||||
:value='i'
|
:value='i'
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerFieldForm.fieldType === 'string'"
|
v-if="listenerFieldForm.fieldType === 'string'"
|
||||||
label='字段值：'
|
label='字段值：'
|
||||||
prop='string'
|
prop='string'
|
||||||
key='field-string'
|
key='field-string'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerFieldForm.string' clearable />
|
<el-input v-model='listenerFieldForm.string' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||||
label='表达式：'
|
label='表达式：'
|
||||||
prop='expression'
|
prop='expression'
|
||||||
key='field-expression'
|
key='field-expression'
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||||
>
|
>
|
||||||
<el-input v-model='listenerFieldForm.expression' clearable />
|
<el-input v-model='listenerFieldForm.expression' clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
|
<el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
|
||||||
<el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
|
<el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 选择弹窗 -->
|
<!-- 选择弹窗 -->
|
||||||
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
|
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
|
||||||
</template>
|
</template>
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import XButton from '@/components/XButton/src/XButton.vue'
|
import XButton from '@/components/XButton/src/XButton.vue'
|
||||||
import { Plus, Select, Menu } from '@element-plus/icons-vue'
|
import { Plus, Select, Menu } from '@element-plus/icons-vue'
|
||||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
import { createListenerObject, updateElementExtensions } from '../../utils'
|
||||||
import {
|
import {
|
||||||
initListenerType,
|
initListenerType,
|
||||||
initListenerForm,
|
initListenerForm,
|
||||||
listenerType,
|
listenerType,
|
||||||
fieldType,
|
fieldType,
|
||||||
initListenerForm2
|
initListenerForm2
|
||||||
} from './utilSelf'
|
} from './utilSelf'
|
||||||
import ProcessListenerDialog from './ProcessListenerDialog.vue'
|
import ProcessListenerDialog from './ProcessListenerDialog.vue'
|
||||||
|
|
||||||
defineOptions({ name: 'ElementListeners' })
|
defineOptions({ name: 'ElementListeners' })
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: String,
|
id: String,
|
||||||
type: String
|
type: String
|
||||||
})
|
})
|
||||||
const prefix = inject('prefix')
|
const prefix = inject('prefix')
|
||||||
const width = inject('width')
|
const width = inject('width')
|
||||||
const elementListenersList = ref<any[]>([]) // 监听器列表
|
const elementListenersList = ref<any[]>([]) // 监听器列表
|
||||||
const listenerForm = ref<any>({}) // 监听器详情表单
|
const listenerForm = ref<any>({}) // 监听器详情表单
|
||||||
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
|
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
|
||||||
const fieldsListOfListener = ref<any[]>([])
|
const fieldsListOfListener = ref<any[]>([])
|
||||||
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
|
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
|
||||||
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
|
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
|
||||||
const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
|
const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
|
||||||
const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
|
const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
|
||||||
const listenerTypeObject = ref(listenerType)
|
const listenerTypeObject = ref(listenerType)
|
||||||
const fieldTypeObject = ref(fieldType)
|
const fieldTypeObject = ref(fieldType)
|
||||||
const bpmnElement = ref()
|
const bpmnElement = ref()
|
||||||
const otherExtensionList = ref()
|
const otherExtensionList = ref()
|
||||||
const bpmnElementListeners = ref()
|
const bpmnElementListeners = ref()
|
||||||
const listenerFormRef = ref()
|
const listenerFormRef = ref()
|
||||||
const listenerFieldFormRef = ref()
|
const listenerFieldFormRef = ref()
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||||
|
|
||||||
const resetListenersList = () => {
|
const resetListenersList = () => {
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
bpmnElement.value = bpmnInstances().bpmnElement
|
||||||
otherExtensionList.value = []
|
otherExtensionList.value = []
|
||||||
bpmnElementListeners.value =
|
bpmnElementListeners.value =
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.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) =>
|
||||||
initListenerType(listener)
|
initListenerType(listener)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
// 打开 监听器详情 侧边栏
|
// 打开 监听器详情 侧边栏
|
||||||
const openListenerForm = (listener, index?) => {
|
const openListenerForm = (listener, index?) => {
|
||||||
// debugger
|
if (listener) {
|
||||||
if (listener) {
|
listenerForm.value = initListenerForm(listener)
|
||||||
listenerForm.value = initListenerForm(listener)
|
editingListenerIndex.value = index
|
||||||
editingListenerIndex.value = index
|
} else {
|
||||||
} else {
|
listenerForm.value = {}
|
||||||
listenerForm.value = {}
|
editingListenerIndex.value = -1 // 标记为新增
|
||||||
editingListenerIndex.value = -1 // 标记为新增
|
}
|
||||||
}
|
if (listener && listener.fields) {
|
||||||
if (listener && listener.fields) {
|
fieldsListOfListener.value = listener.fields.map((field) => ({
|
||||||
fieldsListOfListener.value = listener.fields.map((field) => ({
|
...field,
|
||||||
...field,
|
fieldType: field.string ? 'string' : 'expression'
|
||||||
fieldType: field.string ? 'string' : 'expression'
|
}))
|
||||||
}))
|
} else {
|
||||||
} else {
|
fieldsListOfListener.value = []
|
||||||
fieldsListOfListener.value = []
|
listenerForm.value['fields'] = []
|
||||||
listenerForm.value['fields'] = []
|
}
|
||||||
}
|
// 打开侧边栏并清楚验证状态
|
||||||
// 打开侧边栏并清楚验证状态
|
listenerFormModelVisible.value = true
|
||||||
listenerFormModelVisible.value = true
|
nextTick(() => {
|
||||||
nextTick(() => {
|
if (listenerFormRef.value) {
|
||||||
if (listenerFormRef.value) {
|
listenerFormRef.value.clearValidate()
|
||||||
listenerFormRef.value.clearValidate()
|
}
|
||||||
}
|
})
|
||||||
})
|
}
|
||||||
}
|
// 打开监听器字段编辑弹窗
|
||||||
// 打开监听器字段编辑弹窗
|
const openListenerFieldForm = (field, index?) => {
|
||||||
const openListenerFieldForm = (field, index?) => {
|
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
|
||||||
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
|
editingListenerFieldIndex.value = field ? index : -1
|
||||||
editingListenerFieldIndex.value = field ? index : -1
|
listenerFieldFormModelVisible.value = true
|
||||||
listenerFieldFormModelVisible.value = true
|
nextTick(() => {
|
||||||
nextTick(() => {
|
if (listenerFieldFormRef.value) {
|
||||||
if (listenerFieldFormRef.value) {
|
listenerFieldFormRef.value.clearValidate()
|
||||||
listenerFieldFormRef.value.clearValidate()
|
}
|
||||||
}
|
})
|
||||||
})
|
}
|
||||||
}
|
// 保存监听器注入字段
|
||||||
// 保存监听器注入字段
|
const saveListenerFiled = async () => {
|
||||||
const saveListenerFiled = async () => {
|
let validateStatus = await listenerFieldFormRef.value.validate()
|
||||||
// debugger
|
if (!validateStatus) return // 验证不通过直接返回
|
||||||
let validateStatus = await listenerFieldFormRef.value.validate()
|
if (editingListenerFieldIndex.value === -1) {
|
||||||
if (!validateStatus) return // 验证不通过直接返回
|
fieldsListOfListener.value.push(listenerFieldForm.value)
|
||||||
if (editingListenerFieldIndex.value === -1) {
|
listenerForm.value.fields.push(listenerFieldForm.value)
|
||||||
fieldsListOfListener.value.push(listenerFieldForm.value)
|
} else {
|
||||||
listenerForm.value.fields.push(listenerFieldForm.value)
|
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
||||||
} else {
|
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
||||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
}
|
||||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
listenerFieldFormModelVisible.value = false
|
||||||
}
|
nextTick(() => {
|
||||||
listenerFieldFormModelVisible.value = false
|
listenerFieldForm.value = {}
|
||||||
nextTick(() => {
|
})
|
||||||
listenerFieldForm.value = {}
|
}
|
||||||
})
|
// 移除监听器字段
|
||||||
}
|
const removeListenerField = (index) => {
|
||||||
// 移除监听器字段
|
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
|
||||||
const removeListenerField = (index) => {
|
confirmButtonText: '确 认',
|
||||||
// debugger
|
cancelButtonText: '取 消'
|
||||||
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
|
})
|
||||||
confirmButtonText: '确 认',
|
.then(() => {
|
||||||
cancelButtonText: '取 消'
|
fieldsListOfListener.value.splice(index, 1)
|
||||||
})
|
listenerForm.value.fields.splice(index, 1)
|
||||||
.then(() => {
|
})
|
||||||
fieldsListOfListener.value.splice(index, 1)
|
.catch(() => console.info('操作取消'))
|
||||||
listenerForm.value.fields.splice(index, 1)
|
}
|
||||||
})
|
// 移除监听器
|
||||||
.catch(() => console.info('操作取消'))
|
const removeListener = (index) => {
|
||||||
}
|
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
|
||||||
// 移除监听器
|
confirmButtonText: '确 认',
|
||||||
const removeListener = (index) => {
|
cancelButtonText: '取 消'
|
||||||
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
|
})
|
||||||
confirmButtonText: '确 认',
|
.then(() => {
|
||||||
cancelButtonText: '取 消'
|
bpmnElementListeners.value.splice(index, 1)
|
||||||
})
|
elementListenersList.value.splice(index, 1)
|
||||||
.then(() => {
|
updateElementExtensions(
|
||||||
bpmnElementListeners.value.splice(index, 1)
|
bpmnElement.value,
|
||||||
elementListenersList.value.splice(index, 1)
|
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||||
updateElementExtensions(
|
)
|
||||||
bpmnElement.value,
|
})
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
.catch(() => console.info('操作取消'))
|
||||||
)
|
}
|
||||||
})
|
// 保存监听器配置
|
||||||
.catch(() => console.info('操作取消'))
|
const saveListenerConfig = async () => {
|
||||||
}
|
let validateStatus = await listenerFormRef.value.validate()
|
||||||
// 保存监听器配置
|
if (!validateStatus) return // 验证不通过直接返回
|
||||||
const saveListenerConfig = async () => {
|
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
|
||||||
// debugger
|
if (editingListenerIndex.value === -1) {
|
||||||
let validateStatus = await listenerFormRef.value.validate()
|
bpmnElementListeners.value.push(listenerObject)
|
||||||
if (!validateStatus) return // 验证不通过直接返回
|
elementListenersList.value.push(listenerForm.value)
|
||||||
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
|
} else {
|
||||||
if (editingListenerIndex.value === -1) {
|
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
|
||||||
bpmnElementListeners.value.push(listenerObject)
|
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
|
||||||
elementListenersList.value.push(listenerForm.value)
|
}
|
||||||
} else {
|
// 保存其他配置
|
||||||
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
|
otherExtensionList.value =
|
||||||
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
|
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||||
}
|
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||||
// 保存其他配置
|
) ?? []
|
||||||
otherExtensionList.value =
|
updateElementExtensions(
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
bpmnElement.value,
|
||||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||||
) ?? []
|
)
|
||||||
updateElementExtensions(
|
// 4. 隐藏侧边栏
|
||||||
bpmnElement.value,
|
listenerFormModelVisible.value = false
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
listenerForm.value = {}
|
||||||
)
|
}
|
||||||
// 4. 隐藏侧边栏
|
|
||||||
listenerFormModelVisible.value = false
|
// 打开监听器弹窗
|
||||||
listenerForm.value = {}
|
const processListenerDialogRef = ref()
|
||||||
}
|
const openProcessListenerDialog = async () => {
|
||||||
|
processListenerDialogRef.value.open('execution')
|
||||||
// 打开监听器弹窗
|
}
|
||||||
const processListenerDialogRef = ref()
|
const selectProcessListener = (listener) => {
|
||||||
const openProcessListenerDialog = async () => {
|
const listenerForm = initListenerForm2(listener)
|
||||||
processListenerDialogRef.value.open('execution')
|
const listenerObject = createListenerObject(listenerForm, false, prefix)
|
||||||
}
|
bpmnElementListeners.value.push(listenerObject)
|
||||||
const selectProcessListener = (listener) => {
|
elementListenersList.value.push(listenerForm)
|
||||||
const listenerForm = initListenerForm2(listener)
|
|
||||||
const listenerObject = createListenerObject(listenerForm, false, prefix)
|
// 保存其他配置
|
||||||
bpmnElementListeners.value.push(listenerObject)
|
otherExtensionList.value =
|
||||||
elementListenersList.value.push(listenerForm)
|
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||||
|
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||||
// 保存其他配置
|
) ?? []
|
||||||
otherExtensionList.value =
|
updateElementExtensions(
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
bpmnElement.value,
|
||||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||||
) ?? []
|
)
|
||||||
updateElementExtensions(
|
}
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
watch(
|
||||||
)
|
() => props.id,
|
||||||
}
|
(val) => {
|
||||||
|
val &&
|
||||||
watch(
|
val.length &&
|
||||||
() => props.id,
|
nextTick(() => {
|
||||||
(val) => {
|
resetListenersList()
|
||||||
val &&
|
})
|
||||||
val.length &&
|
},
|
||||||
nextTick(() => {
|
{ immediate: true }
|
||||||
resetListenersList()
|
)
|
||||||
})
|
</script>
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -748,6 +748,13 @@ const init = () => {
|
|||||||
console.error('WebSocket 客户端实例不存在')
|
console.error('WebSocket 客户端实例不存在')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
echartsDataV1.value = initEcharts('#DAA520', 0, 'A相')
|
||||||
|
echartsDataV2.value = initEcharts('#2E8B57', 0, 'B相')
|
||||||
|
echartsDataV3.value = initEcharts('#A52a2a', 0, 'C相')
|
||||||
|
|
||||||
|
echartsDataA1.value = initEcharts('#DAA520', 1, 'A相')
|
||||||
|
echartsDataA2.value = initEcharts('#2E8B57', 1, 'B相')
|
||||||
|
echartsDataA3.value = initEcharts('#A52a2a', 1, 'C相')
|
||||||
if (monitoringPoint.state.comFlag == 0) {
|
if (monitoringPoint.state.comFlag == 0) {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
return ElMessage({
|
return ElMessage({
|
||||||
@@ -757,13 +764,7 @@ const init = () => {
|
|||||||
}
|
}
|
||||||
loading.value = true
|
loading.value = true
|
||||||
const url = localStorage.getItem('WebSocketUrl') || 'null' //'ws://192.168.1.68:10407/api/pushMessage/'
|
const url = localStorage.getItem('WebSocketUrl') || 'null' //'ws://192.168.1.68:10407/api/pushMessage/'
|
||||||
echartsDataV1.value = initEcharts('#DAA520', 0, 'A相')
|
|
||||||
echartsDataV2.value = initEcharts('#2E8B57', 0, 'B相')
|
|
||||||
echartsDataV3.value = initEcharts('#A52a2a', 0, 'C相')
|
|
||||||
|
|
||||||
echartsDataA1.value = initEcharts('#DAA520', 1, 'A相')
|
|
||||||
echartsDataA2.value = initEcharts('#2E8B57', 1, 'B相')
|
|
||||||
echartsDataA3.value = initEcharts('#A52a2a', 1, 'C相')
|
|
||||||
|
|
||||||
let pids = monitoringPoint.state.pid.split(',')
|
let pids = monitoringPoint.state.pid.split(',')
|
||||||
dataSocket.socketServe.connect(`${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
|
dataSocket.socketServe.connect(`${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
|
||||||
@@ -1176,16 +1177,10 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.view_bot) {
|
:deep(.vxe-cell) {
|
||||||
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
|
|
||||||
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
|
|
||||||
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
|
|
||||||
padding: 5px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vxe-table--body-wrapper {
|
|
||||||
min-height: 32px !important;
|
min-height: 32px !important;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-collapse-item__header {
|
::v-deep .el-collapse-item__header {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user