update 监听器添加远程服务代理选项
This commit is contained in:
ZETA
parent
c2fdbc66b2
commit
bd2d9ed1b6
@ -1020,6 +1020,11 @@ export default {
|
||||
'isAttr': true,
|
||||
'type': 'String'
|
||||
},
|
||||
{
|
||||
'name': 'alias',
|
||||
'isAttr': true,
|
||||
'type': 'String'
|
||||
},
|
||||
{
|
||||
'name': 'event',
|
||||
'isAttr': true,
|
||||
@ -1058,6 +1063,11 @@ export default {
|
||||
'isAttr': true,
|
||||
'type': 'String'
|
||||
},
|
||||
{
|
||||
'name': 'alias',
|
||||
'isAttr': true,
|
||||
'type': 'String'
|
||||
},
|
||||
{
|
||||
'name': 'event',
|
||||
'isAttr': true,
|
||||
@ -1247,4 +1257,4 @@ export default {
|
||||
}
|
||||
],
|
||||
'emumerations': []
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
import showConfig from '../assets/showConfig';
|
||||
import type { ModdleElement } from 'bpmn';
|
||||
import useModelerStore from '@/store/modules/modeler';
|
||||
import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
|
||||
import showConfig from '../assets/showConfig'
|
||||
import type { ModdleElement } from 'bpmn'
|
||||
import useModelerStore from '@/store/modules/modeler'
|
||||
import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums'
|
||||
interface Options {
|
||||
element: ModdleElement;
|
||||
element: ModdleElement
|
||||
}
|
||||
|
||||
export default (ops: Options) => {
|
||||
const { element } = ops;
|
||||
const { getModeling, getModdle } = useModelerStore();
|
||||
const modeling = getModeling();
|
||||
const moddle = getModdle();
|
||||
const { element } = ops
|
||||
const { getModeling, getModdle } = useModelerStore()
|
||||
const modeling = getModeling()
|
||||
const moddle = getModdle()
|
||||
|
||||
/**
|
||||
* 当前节点类型
|
||||
*/
|
||||
const elementType = computed(() => {
|
||||
const bizObj = element.businessObject;
|
||||
return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
|
||||
});
|
||||
const bizObj = element.businessObject
|
||||
return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type
|
||||
})
|
||||
|
||||
/**
|
||||
* 用于控制面板字段显示与隐藏的配置
|
||||
*/
|
||||
const config = computed(() => showConfig[elementType.value] || {});
|
||||
const config = computed(() => showConfig[elementType.value] || {})
|
||||
|
||||
/**
|
||||
* 创建一个节点
|
||||
@ -32,22 +32,22 @@ export default (ops: Options) => {
|
||||
* @param parent 父节点
|
||||
*/
|
||||
const createModdleElement = (elementType: string, properties: any, parent: ModdleElement) => {
|
||||
const element = moddle.create(elementType, properties);
|
||||
parent && (element.$parent = parent);
|
||||
return element;
|
||||
};
|
||||
const element = moddle.create(elementType, properties)
|
||||
parent && (element.$parent = parent)
|
||||
return element
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取扩展属性，如果不存在会自动创建
|
||||
*/
|
||||
const getExtensionElements = (create = true) => {
|
||||
let extensionElements = element.businessObject.get<ModdleElement>('extensionElements');
|
||||
let extensionElements = element.businessObject.get<ModdleElement>('extensionElements')
|
||||
if (!extensionElements && create) {
|
||||
extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject);
|
||||
modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
|
||||
extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject)
|
||||
modeling.updateModdleProperties(element, element.businessObject, { extensionElements })
|
||||
}
|
||||
return extensionElements;
|
||||
};
|
||||
return extensionElements
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取extensionElements下的properties
|
||||
@ -55,25 +55,26 @@ export default (ops: Options) => {
|
||||
*/
|
||||
const getPropertiesElements = (extensionElements?: ModdleElement) => {
|
||||
if (!extensionElements) {
|
||||
extensionElements = getExtensionElements();
|
||||
extensionElements = getExtensionElements()
|
||||
}
|
||||
let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
|
||||
let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties')
|
||||
if (!propertiesElements) {
|
||||
propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements);
|
||||
propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements)
|
||||
modeling.updateModdleProperties(element, extensionElements, {
|
||||
values: [...extensionElements.get<[]>('values'), propertiesElements]
|
||||
});
|
||||
})
|
||||
}
|
||||
return propertiesElements;
|
||||
};
|
||||
return propertiesElements
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新节点属性
|
||||
* @param properties 属性值
|
||||
*/
|
||||
const updateProperties = (properties: any) => {
|
||||
modeling.updateProperties(element, properties);
|
||||
};
|
||||
console.log(properties)
|
||||
modeling.updateProperties(element, properties)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新节点信息
|
||||
@ -81,8 +82,8 @@ export default (ops: Options) => {
|
||||
* @param properties 属性
|
||||
*/
|
||||
const updateModdleProperties = (updateElement, properties: any) => {
|
||||
modeling.updateModdleProperties(element, updateElement, properties);
|
||||
};
|
||||
modeling.updateModdleProperties(element, updateElement, properties)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新Property属性
|
||||
@ -90,41 +91,41 @@ export default (ops: Options) => {
|
||||
* @param value 值
|
||||
*/
|
||||
const updateProperty = (name: string, value: string) => {
|
||||
const propertiesElements = getPropertiesElements();
|
||||
const propertiesElements = getPropertiesElements()
|
||||
|
||||
let propertyElements = propertiesElements.values.find((item) => item.name === name);
|
||||
let propertyElements = propertiesElements.values.find((item) => item.name === name)
|
||||
if (!propertyElements) {
|
||||
propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements);
|
||||
propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements)
|
||||
modeling.updateModdleProperties(element, propertiesElements, {
|
||||
values: [...propertiesElements.get('values'), propertyElements]
|
||||
});
|
||||
})
|
||||
} else {
|
||||
propertyElements.name = name;
|
||||
propertyElements.value = value;
|
||||
propertyElements.name = name
|
||||
propertyElements.value = value
|
||||
}
|
||||
return propertyElements;
|
||||
};
|
||||
return propertyElements
|
||||
}
|
||||
|
||||
const idChange = (newVal: string) => {
|
||||
if (newVal) {
|
||||
updateProperties({ id: newVal });
|
||||
updateProperties({ id: newVal })
|
||||
}
|
||||
};
|
||||
}
|
||||
const nameChange = (newVal: string) => {
|
||||
if (newVal) {
|
||||
updateProperties({ name: newVal });
|
||||
updateProperties({ name: newVal })
|
||||
}
|
||||
};
|
||||
}
|
||||
const formKeyChange = (newVal: string) => {
|
||||
updateProperties({ formKey: newVal });
|
||||
};
|
||||
updateProperties({ formKey: newVal })
|
||||
}
|
||||
const constant = {
|
||||
MultiInstanceType: [
|
||||
{ id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
|
||||
{ id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
|
||||
{ id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
elementType,
|
||||
@ -141,5 +142,5 @@ export default (ops: Options) => {
|
||||
formKeyChange,
|
||||
getExtensionElements,
|
||||
getPropertiesElements
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
:show-close="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
|
||||
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="120px">
|
||||
<el-form-item label="事件" prop="event">
|
||||
<el-select v-model="formData.event">
|
||||
<el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
|
||||
@ -62,7 +62,7 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<el-select v-model="formData.type">
|
||||
<el-select v-model="formData.type" @change="handleChangeType">
|
||||
<el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -70,7 +70,7 @@
|
||||
:label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
|
||||
prop="className"
|
||||
>
|
||||
<el-input v-model="formData.className" type="text"></el-input>
|
||||
<el-input v-model="formData.className" type="text" :disabled="formData.alias? true : false"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs type="border-card">
|
||||
@ -88,139 +88,164 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import ListenerParam from './ListenerParam.vue';
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
|
||||
import type { ExecutionListenerVO } from 'bpmnDesign';
|
||||
import type { Moddle, Modeler, ModdleElement } from 'bpmn';
|
||||
import ListenerParam from './ListenerParam.vue'
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'
|
||||
import type { ExecutionListenerVO } from 'bpmnDesign'
|
||||
import type { Moddle, Modeler, ModdleElement } from 'bpmn'
|
||||
|
||||
import usePanel from '../../hooks/usePanel';
|
||||
import useDialog from '@/hooks/useDialog';
|
||||
import useModelerStore from '@/store/modules/modeler';
|
||||
import usePanel from '../../hooks/usePanel'
|
||||
import useDialog from '@/hooks/useDialog'
|
||||
import useModelerStore from '@/store/modules/modeler'
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const emit = defineEmits(['close'])
|
||||
interface PropType {
|
||||
element: ModdleElement;
|
||||
element: ModdleElement
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {});
|
||||
const props = withDefaults(defineProps<PropType>(), {})
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
|
||||
const selectRow = ref<ExecutionListenerVO | null>();
|
||||
const selectRow = ref<ExecutionListenerVO | null>()
|
||||
const formDialog = useDialog({
|
||||
title: selectRow.value ? '编辑&保存' : '新增&保存'
|
||||
});
|
||||
})
|
||||
|
||||
const { showConfig, elementType, updateProperties } = usePanel({
|
||||
element: toRaw(props.element)
|
||||
});
|
||||
const { getModdle } = useModelerStore();
|
||||
const moddle = getModdle();
|
||||
})
|
||||
const { getModdle } = useModelerStore()
|
||||
const moddle = getModdle()
|
||||
|
||||
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
|
||||
const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
|
||||
const formRef = ref<ElFormInstance>();
|
||||
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>()
|
||||
const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>()
|
||||
const formRef = ref<ElFormInstance>()
|
||||
|
||||
const initData: ExecutionListenerVO = {
|
||||
event: '',
|
||||
type: '',
|
||||
className: '',
|
||||
params: []
|
||||
};
|
||||
const formData = ref<ExecutionListenerVO>({ ...initData });
|
||||
const tableData = ref<ExecutionListenerVO[]>([]);
|
||||
}
|
||||
const formData = ref<ExecutionListenerVO>({ ...initData })
|
||||
const tableData = ref<ExecutionListenerVO[]>([])
|
||||
const tableRules = ref<ElFormRules>({
|
||||
event: [{ required: true, message: '请选择', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择', trigger: 'blur' }],
|
||||
className: [{ required: true, message: '请输入', trigger: 'blur' }]
|
||||
});
|
||||
})
|
||||
|
||||
const submitEvent = async () => {
|
||||
const error = await listenerParamRef.value.validate();
|
||||
const error = await listenerParamRef.value.validate()
|
||||
await formRef.value.validate((validate) => {
|
||||
if (validate && !error) {
|
||||
const $table = tableRef.value;
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
formData.value.params = listenerParamRef.value.getTableData();
|
||||
formData.value.params = listenerParamRef.value.getTableData()
|
||||
if (selectRow.value) {
|
||||
Object.assign(selectRow.value, formData.value);
|
||||
Object.assign(selectRow.value, formData.value)
|
||||
} else {
|
||||
$table.insertAt({ ...formData.value }, -1);
|
||||
$table.insertAt({ ...formData.value }, -1)
|
||||
}
|
||||
updateElement();
|
||||
formDialog.closeDialog();
|
||||
updateElement()
|
||||
formDialog.closeDialog()
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const handleChangeType = (v) => {
|
||||
if (v === 'serviceClass') {
|
||||
formData.value.className = '${delegatedExecutionListener}'
|
||||
formData.value.alias = v
|
||||
formData.value.params = listenerParamRef.value.getTableData()
|
||||
const index = formData.value.params.findIndex((item) => item.name === 'clazz')
|
||||
console.log(index, formData.value.params)
|
||||
if (index === -1) {
|
||||
formData.value.params.unshift({
|
||||
name: 'interfaceName',
|
||||
type: 'stringValue',
|
||||
value: ''
|
||||
})
|
||||
}
|
||||
} else {
|
||||
formData.value.alias = ''
|
||||
}
|
||||
}
|
||||
|
||||
const removeSelectRowEvent = async () => {
|
||||
const $table = tableRef.value;
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const selectCount = $table.getCheckboxRecords().length;
|
||||
const selectCount = $table.getCheckboxRecords().length
|
||||
if (selectCount === 0) {
|
||||
proxy?.$modal.msgWarning('请选择行');
|
||||
proxy?.$modal.msgWarning('请选择行')
|
||||
} else {
|
||||
await $table.removeCheckboxRow();
|
||||
updateElement();
|
||||
await $table.removeCheckboxRow()
|
||||
updateElement()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
const insertEvent = async () => {
|
||||
Object.assign(formData.value, initData);
|
||||
selectRow.value = null;
|
||||
formDialog.openDialog();
|
||||
};
|
||||
formData.value.alias = ''
|
||||
Object.assign(formData.value, initData)
|
||||
selectRow.value = null
|
||||
formDialog.openDialog()
|
||||
}
|
||||
|
||||
const editEvent = (row: ExecutionListenerVO) => {
|
||||
Object.assign(formData.value, row);
|
||||
selectRow.value = row;
|
||||
formDialog.openDialog();
|
||||
};
|
||||
Object.assign(formData.value, row)
|
||||
selectRow.value = row
|
||||
formDialog.openDialog()
|
||||
}
|
||||
|
||||
const removeEvent = async (row: ExecutionListenerVO) => {
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?');
|
||||
const $table = tableRef.value;
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?')
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
await $table.remove(row);
|
||||
updateElement();
|
||||
await $table.remove(row)
|
||||
updateElement()
|
||||
}
|
||||
};
|
||||
}
|
||||
const updateElement = () => {
|
||||
const $table = tableRef.value;
|
||||
const data = $table.getTableData().fullData;
|
||||
const $table = tableRef.value
|
||||
const data = $table.getTableData().fullData
|
||||
if (data.length) {
|
||||
let extensionElements = props.element.businessObject.get('extensionElements');
|
||||
let extensionElements = props.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = moddle.create('bpmn:ExtensionElements');
|
||||
extensionElements = moddle.create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? []
|
||||
data.forEach((item) => {
|
||||
const executionListener = moddle.create('flowable:ExecutionListener');
|
||||
executionListener['event'] = item.event;
|
||||
executionListener[item.type] = item.className;
|
||||
const executionListener = moddle.create('flowable:ExecutionListener')
|
||||
executionListener['event'] = item.event
|
||||
if (item.alias) {
|
||||
executionListener.delegateExpression = item.className
|
||||
executionListener.alias = item.alias
|
||||
} else {
|
||||
executionListener[item.type] = item.className
|
||||
}
|
||||
if (item.params && item.params.length) {
|
||||
item.params.forEach((field) => {
|
||||
const fieldElement = moddle.create('flowable:Field');
|
||||
fieldElement['name'] = field.name;
|
||||
fieldElement[field.type] = field.value;
|
||||
executionListener.get('fields').push(fieldElement);
|
||||
});
|
||||
const fieldElement = moddle.create('flowable:Field')
|
||||
fieldElement['name'] = field.name
|
||||
fieldElement[field.type] = field.value
|
||||
executionListener.get('fields').push(fieldElement)
|
||||
})
|
||||
}
|
||||
extensionElements.get('values').push(executionListener);
|
||||
});
|
||||
updateProperties({ extensionElements: extensionElements });
|
||||
extensionElements.get('values').push(executionListener)
|
||||
})
|
||||
updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = props.element.businessObject[`extensionElements`];
|
||||
const extensionElements = props.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? []
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => {
|
||||
editEvent(row);
|
||||
};
|
||||
editEvent(row)
|
||||
}
|
||||
|
||||
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({
|
||||
body: {
|
||||
@ -232,71 +257,73 @@ const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({
|
||||
]
|
||||
},
|
||||
visibleMethod({ options, column }) {
|
||||
const isDisabled = !column;
|
||||
const isDisabled = !column
|
||||
options.forEach((list) => {
|
||||
list.forEach((item) => {
|
||||
item.disabled = isDisabled;
|
||||
});
|
||||
});
|
||||
return true;
|
||||
item.disabled = isDisabled
|
||||
})
|
||||
})
|
||||
return true
|
||||
}
|
||||
});
|
||||
})
|
||||
const contextMenuClickEvent: VxeTableEvents.MenuClick<ExecutionListenerVO> = ({ menu, row, column }) => {
|
||||
const $table = tableRef.value;
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
switch (menu.code) {
|
||||
case 'edit':
|
||||
editEvent(row);
|
||||
break;
|
||||
editEvent(row)
|
||||
break
|
||||
case 'remove':
|
||||
removeEvent(row);
|
||||
break;
|
||||
removeEvent(row)
|
||||
break
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const initTableData = () => {
|
||||
tableData.value =
|
||||
props.element.businessObject.extensionElements?.values
|
||||
.filter((item) => item.$type === 'flowable:ExecutionListener')
|
||||
.map((item) => {
|
||||
let type;
|
||||
if ('class' in item) type = 'class';
|
||||
if ('expression' in item) type = 'expression';
|
||||
if ('delegateExpression' in item) type = 'delegateExpression';
|
||||
let type
|
||||
if ('class' in item) type = 'class'
|
||||
if ('expression' in item) type = 'expression'
|
||||
if ('delegateExpression' in item) type = 'delegateExpression'
|
||||
return {
|
||||
event: item.event,
|
||||
type: type,
|
||||
className: item[type],
|
||||
alias: item.alias || undefined,
|
||||
params:
|
||||
item.fields?.map((field) => {
|
||||
let fieldType;
|
||||
if ('stringValue' in field) fieldType = 'stringValue';
|
||||
if ('expression' in field) fieldType = 'expression';
|
||||
let fieldType
|
||||
if ('stringValue' in field) fieldType = 'stringValue'
|
||||
if ('expression' in field) fieldType = 'expression'
|
||||
return {
|
||||
name: field.name,
|
||||
type: fieldType,
|
||||
value: field[fieldType]
|
||||
};
|
||||
}
|
||||
}) ?? []
|
||||
};
|
||||
}) ?? [];
|
||||
};
|
||||
}
|
||||
}) ?? []
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
initTableData()
|
||||
})
|
||||
|
||||
const typeSelect = [
|
||||
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
|
||||
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
|
||||
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
|
||||
];
|
||||
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' },
|
||||
{ id: 'ssjksjksjkslkw', label: '远程服务代理', value: 'serviceClass' }
|
||||
]
|
||||
const eventSelect = [
|
||||
{ id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '开始', value: 'start' },
|
||||
{ id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '结束', value: 'end' },
|
||||
{ id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '启用', value: 'take' }
|
||||
];
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Panda
|
||||
* @Date: 2024-05-28 15:05:21
|
||||
* @LastEditors: Panda
|
||||
* @LastEditTime: 2024-05-30 18:13:12
|
||||
* @FilePath: \platform-frontend\src\bpmn\panel\property\TaskListener.vue
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<vxe-toolbar>
|
||||
@ -42,7 +50,7 @@
|
||||
:show-close="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
|
||||
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="120px">
|
||||
<el-form-item label="事件" prop="event">
|
||||
<template #label>
|
||||
<span>
|
||||
@ -63,7 +71,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="formData.type">
|
||||
<el-select v-model="formData.type" @change="handleChangeType">
|
||||
<el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -71,7 +79,7 @@
|
||||
:label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
|
||||
prop="className"
|
||||
>
|
||||
<el-input v-model="formData.className" type="text"></el-input>
|
||||
<el-input v-model="formData.className" :disabled="formData.alias ? true : false" type="text"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs type="border-card">
|
||||
@ -89,35 +97,35 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import ListenerParam from './ListenerParam.vue';
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
|
||||
import type { TaskListenerVO } from 'bpmnDesign';
|
||||
import type { ModdleElement } from 'bpmn';
|
||||
import ListenerParam from './ListenerParam.vue'
|
||||
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'
|
||||
import type { TaskListenerVO } from 'bpmnDesign'
|
||||
import type { ModdleElement } from 'bpmn'
|
||||
|
||||
import usePanel from '../../hooks/usePanel';
|
||||
import useDialog from '@/hooks/useDialog';
|
||||
import useModelerStore from '@/store/modules/modeler';
|
||||
import usePanel from '../../hooks/usePanel'
|
||||
import useDialog from '@/hooks/useDialog'
|
||||
import useModelerStore from '@/store/modules/modeler'
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
|
||||
interface PropType {
|
||||
element: ModdleElement;
|
||||
element: ModdleElement
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {});
|
||||
const props = withDefaults(defineProps<PropType>(), {})
|
||||
|
||||
const selectRow = ref<TaskListenerVO | null>();
|
||||
const selectRow = ref<TaskListenerVO | null>()
|
||||
const formDialog = useDialog({
|
||||
title: selectRow.value ? '编辑&保存' : '新增&保存'
|
||||
});
|
||||
})
|
||||
const { showConfig, elementType, updateProperties } = usePanel({
|
||||
element: toRaw(props.element)
|
||||
});
|
||||
const { getModdle } = useModelerStore();
|
||||
const moddle = getModdle();
|
||||
})
|
||||
const { getModdle } = useModelerStore()
|
||||
const moddle = getModdle()
|
||||
|
||||
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
|
||||
const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
|
||||
const formRef = ref<ElFormInstance>();
|
||||
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>()
|
||||
const tableRef = ref<VxeTableInstance<TaskListenerVO>>()
|
||||
const formRef = ref<ElFormInstance>()
|
||||
|
||||
const initData: TaskListenerVO = {
|
||||
event: '',
|
||||
@ -125,104 +133,133 @@ const initData: TaskListenerVO = {
|
||||
className: '',
|
||||
name: '',
|
||||
params: []
|
||||
};
|
||||
const formData = ref<TaskListenerVO>({ ...initData });
|
||||
const currentIndex = ref(0);
|
||||
const tableData = ref<TaskListenerVO[]>([]);
|
||||
}
|
||||
const formData = ref<TaskListenerVO>({ ...initData })
|
||||
const currentIndex = ref(0)
|
||||
const tableData = ref<TaskListenerVO[]>([])
|
||||
const tableRules = ref<VxeTablePropTypes.EditRules>({
|
||||
event: [{ required: true, message: '请选择', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
className: [{ required: true, message: '请输入', trigger: 'blur' }]
|
||||
});
|
||||
})
|
||||
|
||||
const submitEvent = async () => {
|
||||
const error = await listenerParamRef.value.validate();
|
||||
const error = await listenerParamRef.value.validate()
|
||||
await formRef.value.validate((validate) => {
|
||||
if (validate && !error) {
|
||||
const $table = tableRef.value;
|
||||
const $table = tableRef.value
|
||||
console.log($table)
|
||||
if ($table) {
|
||||
formData.value.params = listenerParamRef.value.getTableData();
|
||||
formData.value.params = listenerParamRef.value.getTableData()
|
||||
if (selectRow.value) {
|
||||
Object.assign(selectRow.value, formData.value);
|
||||
Object.assign(selectRow.value, formData.value)
|
||||
} else {
|
||||
$table.insertAt({ ...formData.value }, -1);
|
||||
$table.insertAt({ ...formData.value }, -1)
|
||||
}
|
||||
updateElement();
|
||||
formDialog.closeDialog();
|
||||
updateElement()
|
||||
formDialog.closeDialog()
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const handleChangeType = (v) => {
|
||||
if (v === 'serviceClass') {
|
||||
formData.value.className = '${delegatedTaskListener}'
|
||||
formData.value.alias = v
|
||||
formData.value.params = listenerParamRef.value.getTableData()
|
||||
const index = formData.value.params.findIndex((item) => item.name === 'clazz')
|
||||
console.log(index, formData.value.params)
|
||||
if (index === -1) {
|
||||
formData.value.params.unshift({
|
||||
name: 'interfaceName',
|
||||
type: 'stringValue',
|
||||
value: ''
|
||||
})
|
||||
}
|
||||
} else {
|
||||
formData.value.alias = ''
|
||||
}
|
||||
}
|
||||
|
||||
const insertEvent = async () => {
|
||||
Object.assign(formData.value, initData);
|
||||
selectRow.value = null;
|
||||
formDialog.openDialog();
|
||||
};
|
||||
formData.value.alias = ''
|
||||
Object.assign(formData.value, initData)
|
||||
selectRow.value = null
|
||||
formDialog.openDialog()
|
||||
}
|
||||
|
||||
const editEvent = (row: TaskListenerVO) => {
|
||||
Object.assign(formData.value, row);
|
||||
selectRow.value = row;
|
||||
formDialog.openDialog();
|
||||
};
|
||||
Object.assign(formData.value, row)
|
||||
selectRow.value = row
|
||||
formDialog.openDialog()
|
||||
}
|
||||
const removeEvent = async (row: TaskListenerVO) => {
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?');
|
||||
const $table = tableRef.value;
|
||||
await proxy?.$modal.confirm('您确定要删除该数据?')
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
await $table.remove(row);
|
||||
updateElement();
|
||||
await $table.remove(row)
|
||||
updateElement()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const removeSelectRowEvent = async () => {
|
||||
const $table = tableRef.value;
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const selectCount = $table.getCheckboxRecords().length;
|
||||
const selectCount = $table.getCheckboxRecords().length
|
||||
if (selectCount === 0) {
|
||||
proxy?.$modal.msgWarning('请选择行');
|
||||
proxy?.$modal.msgWarning('请选择行')
|
||||
} else {
|
||||
await $table.removeCheckboxRow();
|
||||
updateElement();
|
||||
await $table.removeCheckboxRow()
|
||||
updateElement()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
const updateElement = () => {
|
||||
const $table = tableRef.value;
|
||||
const data = $table.getTableData().fullData;
|
||||
const $table = tableRef.value
|
||||
const data = $table.getTableData().fullData
|
||||
if (data.length) {
|
||||
let extensionElements = props.element.businessObject.get('extensionElements');
|
||||
let extensionElements = props.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = moddle.create('bpmn:ExtensionElements');
|
||||
extensionElements = moddle.create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
|
||||
extensionElements.values = extensionElements?.values.filter((item) => item.$type !== 'flowable:TaskListener') ?? []
|
||||
data.forEach((item) => {
|
||||
const taskListener = moddle.create('flowable:TaskListener');
|
||||
taskListener['event'] = item.event;
|
||||
taskListener[item.type] = item.className;
|
||||
const taskListener = moddle.create('flowable:TaskListener')
|
||||
taskListener['event'] = item.event
|
||||
if (item.alias) {
|
||||
taskListener.delegateExpression = item.className
|
||||
taskListener.alias = item.alias
|
||||
} else {
|
||||
taskListener[item.type] = item.className
|
||||
}
|
||||
if (item.params && item.params.length) {
|
||||
item.params.forEach((field) => {
|
||||
const fieldElement = moddle.create('flowable:Field');
|
||||
fieldElement['name'] = field.name;
|
||||
fieldElement[field.type] = field.value;
|
||||
taskListener.get('fields').push(fieldElement);
|
||||
});
|
||||
const fieldElement = moddle.create('flowable:Field')
|
||||
fieldElement['name'] = field.name
|
||||
fieldElement[field.type] = field.value
|
||||
taskListener.get('fields').push(fieldElement)
|
||||
})
|
||||
}
|
||||
extensionElements.get('values').push(taskListener);
|
||||
});
|
||||
updateProperties({ extensionElements: extensionElements });
|
||||
extensionElements.get('values').push(taskListener)
|
||||
})
|
||||
updateProperties({ extensionElements: extensionElements })
|
||||
data.forEach((item) => {
|
||||
if (item.alias) item.type = item.alias
|
||||
})
|
||||
} else {
|
||||
const extensionElements = props.element.businessObject[`extensionElements`];
|
||||
const extensionElements = props.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
|
||||
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? []
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
|
||||
editEvent(row);
|
||||
};
|
||||
editEvent(row)
|
||||
}
|
||||
|
||||
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
|
||||
body: {
|
||||
@ -234,71 +271,73 @@ const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
|
||||
]
|
||||
},
|
||||
visibleMethod({ options, column }) {
|
||||
const isDisabled = !column;
|
||||
const isDisabled = !column
|
||||
options.forEach((list) => {
|
||||
list.forEach((item) => {
|
||||
item.disabled = isDisabled;
|
||||
});
|
||||
});
|
||||
return true;
|
||||
item.disabled = isDisabled
|
||||
})
|
||||
})
|
||||
return true
|
||||
}
|
||||
});
|
||||
})
|
||||
const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => {
|
||||
const $table = tableRef.value;
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
switch (menu.code) {
|
||||
case 'edit':
|
||||
editEvent(row);
|
||||
break;
|
||||
editEvent(row)
|
||||
break
|
||||
case 'remove':
|
||||
removeEvent(row);
|
||||
break;
|
||||
removeEvent(row)
|
||||
break
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
const initTableData = () => {
|
||||
tableData.value =
|
||||
props.element.businessObject.extensionElements?.values
|
||||
.filter((item) => item.$type === 'flowable:TaskListener')
|
||||
.map((item) => {
|
||||
let type;
|
||||
if ('class' in item) type = 'class';
|
||||
if ('expression' in item) type = 'expression';
|
||||
if ('delegateExpression' in item) type = 'delegateExpression';
|
||||
let type
|
||||
if ('class' in item) type = 'class'
|
||||
if ('expression' in item) type = 'expression'
|
||||
if ('delegateExpression' in item) type = 'delegateExpression'
|
||||
return {
|
||||
event: item.event,
|
||||
type: type,
|
||||
type: item.alias || type,
|
||||
className: item[type],
|
||||
alias: item.alias || undefined,
|
||||
params:
|
||||
item.fields?.map((field) => {
|
||||
let fieldType;
|
||||
if ('stringValue' in field) fieldType = 'stringValue';
|
||||
if ('expression' in field) fieldType = 'expression';
|
||||
let fieldType
|
||||
if ('stringValue' in field) fieldType = 'stringValue'
|
||||
if ('expression' in field) fieldType = 'expression'
|
||||
return {
|
||||
name: field.name,
|
||||
type: fieldType,
|
||||
value: field[fieldType]
|
||||
};
|
||||
}
|
||||
}) ?? []
|
||||
};
|
||||
}) ?? [];
|
||||
};
|
||||
}
|
||||
}) ?? []
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
initTableData()
|
||||
})
|
||||
|
||||
const typeSelect = [
|
||||
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
|
||||
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
|
||||
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
|
||||
];
|
||||
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' },
|
||||
{ id: 'ssjksjksjkslkw', label: '远程服务代理', value: 'serviceClass' }
|
||||
]
|
||||
const eventSelect = [
|
||||
{ id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '创建', value: 'create' },
|
||||
{ id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '指派', value: 'assignment' },
|
||||
{ id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '完成', value: 'complete' },
|
||||
{ id: '68801972-85f1-482f-bd86-1fad015c26ed', label: '删除', value: 'delete' }
|
||||
];
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
118
src/types/bpmn/panel.d.ts
vendored
118
src/types/bpmn/panel.d.ts
vendored
@ -1,92 +1,94 @@
|
||||
declare module 'bpmnDesign' {
|
||||
import { AllocationTypeEnum, SpecifyDescEnum, MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
|
||||
import { AllocationTypeEnum, SpecifyDescEnum, MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums'
|
||||
|
||||
export interface ParamVO {
|
||||
type: string;
|
||||
name: string;
|
||||
value: string;
|
||||
type: string
|
||||
name: string
|
||||
value: string
|
||||
alias?: string
|
||||
}
|
||||
|
||||
export interface TaskListenerVO {
|
||||
event: string;
|
||||
type: string;
|
||||
name: string;
|
||||
className: string;
|
||||
params: ParamVO[];
|
||||
event: string
|
||||
type: string
|
||||
name: string
|
||||
className: string
|
||||
alias?: string
|
||||
params: ParamVO[]
|
||||
}
|
||||
|
||||
export interface ExecutionListenerVO {
|
||||
event: string;
|
||||
type: string;
|
||||
className: string;
|
||||
params: ParamVO[];
|
||||
event: string
|
||||
type: string
|
||||
className: string
|
||||
params: ParamVO[]
|
||||
}
|
||||
|
||||
interface BasePanel {
|
||||
id: string;
|
||||
name: string;
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
export interface ProcessPanel extends BasePanel {}
|
||||
|
||||
export interface TaskPanel extends BasePanel {
|
||||
allocationType: AllocationTypeEnum;
|
||||
specifyDesc: SpecifyDescEnum;
|
||||
multiInstanceType: MultiInstanceTypeEnum;
|
||||
async?: boolean;
|
||||
priority?: number;
|
||||
formKey?: string;
|
||||
skipExpression?: string;
|
||||
isForCompensation?: boolean;
|
||||
triggerServiceTask?: boolean;
|
||||
autoStoreVariables?: boolean;
|
||||
ruleVariablesInput?: string;
|
||||
excludeTaskListener?: boolean;
|
||||
exclude?: boolean;
|
||||
class?: string;
|
||||
dueDate?: string;
|
||||
fixedAssignee?: string;
|
||||
allocationType: AllocationTypeEnum
|
||||
specifyDesc: SpecifyDescEnum
|
||||
multiInstanceType: MultiInstanceTypeEnum
|
||||
async?: boolean
|
||||
priority?: number
|
||||
formKey?: string
|
||||
skipExpression?: string
|
||||
isForCompensation?: boolean
|
||||
triggerServiceTask?: boolean
|
||||
autoStoreVariables?: boolean
|
||||
ruleVariablesInput?: string
|
||||
excludeTaskListener?: boolean
|
||||
exclude?: boolean
|
||||
class?: string
|
||||
dueDate?: string
|
||||
fixedAssignee?: string
|
||||
|
||||
candidateUsers?: string;
|
||||
assignee?: string;
|
||||
candidateGroups?: string;
|
||||
collection?: string;
|
||||
elementVariable?: string;
|
||||
completionCondition?: string;
|
||||
isSequential?: boolean;
|
||||
candidateUsers?: string
|
||||
assignee?: string
|
||||
candidateGroups?: string
|
||||
collection?: string
|
||||
elementVariable?: string
|
||||
completionCondition?: string
|
||||
isSequential?: boolean
|
||||
|
||||
loopCharacteristics?: {
|
||||
collection: string;
|
||||
elementVariable: string;
|
||||
isSequential: boolean;
|
||||
collection: string
|
||||
elementVariable: string
|
||||
isSequential: boolean
|
||||
completionCondition: {
|
||||
body: string;
|
||||
};
|
||||
};
|
||||
body: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface StartEndPanel extends BasePanel {}
|
||||
export interface GatewayPanel extends BasePanel {}
|
||||
export interface SequenceFlowPanel extends BasePanel {
|
||||
conditionExpression: {
|
||||
body: string;
|
||||
};
|
||||
conditionExpressionValue: string;
|
||||
skipExpression: string;
|
||||
body: string
|
||||
}
|
||||
conditionExpressionValue: string
|
||||
skipExpression: string
|
||||
}
|
||||
|
||||
export interface ParticipantPanel extends BasePanel {}
|
||||
export interface SubProcessPanel extends BasePanel {
|
||||
multiInstanceType: MultiInstanceTypeEnum;
|
||||
collection?: string;
|
||||
elementVariable?: string;
|
||||
completionCondition?: string;
|
||||
multiInstanceType: MultiInstanceTypeEnum
|
||||
collection?: string
|
||||
elementVariable?: string
|
||||
completionCondition?: string
|
||||
loopCharacteristics?: {
|
||||
collection: string;
|
||||
elementVariable: string;
|
||||
isSequential: boolean;
|
||||
collection: string
|
||||
elementVariable: string
|
||||
isSequential: boolean
|
||||
completionCondition: {
|
||||
body: string;
|
||||
};
|
||||
};
|
||||
body: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user