huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-27 01:32:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

报错基本解决，数据绑定还有些错误

Browse Source
This commit is contained in:
gexinzhineng/gxzn27 2023-01-28 17:42:19 +08:00
parent 3ce663c7a5
commit b704aae49b
16 changed files with 171 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="process-panel__container" :style="{ width: `${width}px;` }"> <div class="process-panel__container" :style="{ width: `${width}px` }">
<el-collapse v-model="activeTab"> <el-collapse v-model="activeTab">
<el-collapse-item name="base"> <el-collapse-item name="base">
<!-- class="panel-tab__title" --> <!-- class="panel-tab__title" -->

32
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
View File

@ -45,7 +45,7 @@ const props = defineProps({
model: Object // 流程模型的数据 model: Object // 流程模型的数据
}) })
const needProps = ref({}) const needProps = ref({})
let bpmnElement const bpmnElement = ref()
const elementBaseInfo = ref({}) const elementBaseInfo = ref({})
// 流程表单的下拉框的数据 // 流程表单的下拉框的数据
// const forms = ref([]) // const forms = ref([])
@ -57,12 +57,12 @@ const rules = reactive({
const resetBaseInfo = () => { const resetBaseInfo = () => {
console.log(window, 'window') console.log(window, 'window')
console.log(bpmnElement, 'bpmnElement') console.log(bpmnElement.value, 'bpmnElement')
bpmnElement = window?.bpmnInstances?.bpmnElement bpmnElement.value = window?.bpmnInstances?.bpmnElement
console.log(bpmnElement, 'resetBaseInfo11111111111') console.log(bpmnElement.value, 'resetBaseInfo11111111111')
elementBaseInfo.value = bpmnElement.businessObject elementBaseInfo.value = bpmnElement.value.businessObject
needProps.value['type'] = bpmnElement.businessObject.$type needProps.value['type'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject)) // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
@ -81,7 +81,10 @@ const handleKeyUpdate = (value) => {
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点 // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
elementBaseInfo.value['id'] = value elementBaseInfo.value['id'] = value
updateBaseInfo('id')
setTimeout(() => {
updateBaseInfo('id')
}, 100)
} }
const handleNameUpdate = (value) => { const handleNameUpdate = (value) => {
console.log(elementBaseInfo, 'elementBaseInfo') console.log(elementBaseInfo, 'elementBaseInfo')
@ -89,7 +92,10 @@ const handleNameUpdate = (value) => {
return return
} }
elementBaseInfo.value['name'] = value elementBaseInfo.value['name'] = value
updateBaseInfo('name')
setTimeout(() => {
updateBaseInfo('name')
}, 100)
} }
// const handleDescriptionUpdate=(value)=> { // const handleDescriptionUpdate=(value)=> {
// TODO 芋艿：documentation 暂时无法修改，后续在看看 // TODO 芋艿：documentation 暂时无法修改，后续在看看
@ -113,15 +119,15 @@ const updateBaseInfo = (key) => {
if (key === 'id') { if (key === 'id') {
console.log('jinru') console.log('jinru')
console.log(window, 'window') console.log(window, 'window')
console.log(bpmnElement, 'bpmnElement') console.log(bpmnElement.value, 'bpmnElement')
console.log(toRaw(bpmnElement), 'bpmnElement') console.log(toRaw(bpmnElement.value), 'bpmnElement')
window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
id: elementBaseInfo.value[key], id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` } di: { id: `${elementBaseInfo.value[key]}_di` }
}) })
} else { } else {
console.log(attrObj, 'attrObj') console.log(attrObj, 'attrObj')
window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), attrObj) window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
} }
} }
onMounted(() => { onMounted(() => {
@ -165,6 +171,6 @@ watch(
// } // }
// } // }
onBeforeUnmount(() => { onBeforeUnmount(() => {
bpmnElement = null bpmnElement.value = null
}) })
</script> </script>

14
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
View File

@ -63,7 +63,7 @@
</template> </template>
<script setup lang="ts" name="FlowCondition"> <script setup lang="ts" name="FlowCondition">
import { ref, nextTick, watch, onBeforeUnmount } from 'vue' import { ref, nextTick, watch, onBeforeUnmount, toRaw } from 'vue'
import { ElSelect, ElForm, ElFormItem, ElInput, ElOption } from 'element-plus' import { ElSelect, ElForm, ElFormItem, ElInput, ElOption } from 'element-plus'
const props = defineProps({ const props = defineProps({
@ -117,17 +117,17 @@ const updateFlowType = (flowType) => {
// 正常条件类 // 正常条件类
if (flowType === 'condition') { if (flowType === 'condition') {
flowConditionRef.value = window.bpmnInstances.moddle.create('bpmn:FormalExpression') flowConditionRef.value = window.bpmnInstances.moddle.create('bpmn:FormalExpression')
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
conditionExpression: flowConditionRef.value conditionExpression: flowConditionRef.value
}) })
return return
} }
// 默认路径 // 默认路径
if (flowType === 'default') { if (flowType === 'default') {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
conditionExpression: null conditionExpression: null
}) })
window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElementSource.value), {
default: bpmnElement.value default: bpmnElement.value
}) })
return return
@ -137,11 +137,11 @@ const updateFlowType = (flowType) => {
bpmnElementSourceRef.value.default && bpmnElementSourceRef.value.default &&
bpmnElementSourceRef.value.default.id === bpmnElement.value.id bpmnElementSourceRef.value.default.id === bpmnElement.value.id
) { ) {
window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElementSource.value), {
default: null default: null
}) })
} }
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
conditionExpression: null conditionExpression: null
}) })
} }
@ -164,7 +164,7 @@ const updateFlowCondition = () => {
}) })
} }
} }
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
conditionExpression: condition conditionExpression: condition
}) })
} }

10
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
View File

@ -205,7 +205,7 @@
</template> </template>
<script setup lang="ts" name="ElementForm"> <script setup lang="ts" name="ElementForm">
import { ref, inject, watch, nextTick } from 'vue' import { ref, inject, watch, nextTick, toRaw } from 'vue'
import { import {
ElDialog, ElDialog,
ElForm, ElForm,
@ -280,10 +280,12 @@ const resetFormList = () => {
updateElementExtensions() updateElementExtensions()
} }
const updateElementFormKey = () => { const updateElementFormKey = () => {
window.bpmnInstances.modeling.updateProperties(bpmnELement.value, { formKey: formKey.value }) window.bpmnInstances.modeling.updateProperties(toRaw(bpmnELement.value), {
formKey: formKey.value
})
} }
const updateElementBusinessKey = () => { const updateElementBusinessKey = () => {
window.bpmnInstances.modeling.updateModdleProperties(bpmnELement.value, formData.value, { window.bpmnInstances.modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
businessKey: businessKey.value businessKey: businessKey.value
}) })
} }
@ -437,7 +439,7 @@ const updateElementExtensions = () => {
values: otherExtensions.value.concat(formData.value) values: otherExtensions.value.concat(formData.value)
}) })
// 更新到元素上 // 更新到元素上
window.bpmnInstances.modeling.updateProperties(bpmnELement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnELement.value), {
extensionElements: newElExtensionElements extensionElements: newElExtensionElements
}) })
} }

11
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
View File

@ -249,7 +249,7 @@
</div> </div>
</template> </template>
<script setup lang="ts" name="ElementListeners"> <script setup lang="ts" name="ElementListeners">
import { ref, inject, watch, nextTick } from 'vue' import { ref, inject, watch, nextTick, toRaw } from 'vue'
import { import {
ElMessageBox, ElMessageBox,
ElTable, ElTable,
@ -288,8 +288,10 @@ const listenerFormRef = ref()
const listenerFieldFormRef = ref() const listenerFieldFormRef = ref()
const resetListenersList = () => { const resetListenersList = () => {
console.log(window, 'window')
bpmnElement.value = window.bpmnInstances.bpmnElement bpmnElement.value = window.bpmnInstances.bpmnElement
otherExtensionList.value = [] otherExtensionList.value = []
console.log(bpmnElement.value, 'bpmnElement.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`
@ -394,14 +396,15 @@ const saveListenerConfig = async () => {
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.height, 'bpmnElement.value') console.log(bpmnElement.value, 'bpmnElement.value')
console.log(toRaw(bpmnElement.value), 'toRawtoRawtoRawtoRawtoRaw')
console.log( console.log(
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, toRaw(bpmnElement.value),
otherExtensionList.value.concat(bpmnElementListeners.value) toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
) )
// 4. 隐藏侧边栏 // 4. 隐藏侧边栏
listenerFormModelVisible.value = false listenerFormModelVisible.value = false

4
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
View File

@ -331,6 +331,10 @@ const listenerFormRef = ref()
const listenerFieldFormRef = ref() const listenerFieldFormRef = ref()
const resetListenersList = () => { const resetListenersList = () => {
console.log(
window.bpmnInstances.bpmnElement,
'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
)
bpmnElement.value = window.bpmnInstances.bpmnElement bpmnElement.value = window.bpmnInstances.bpmnElement
otherExtensionList.value = [] otherExtensionList.value = []
bpmnElementListeners.value = bpmnElementListeners.value =

62
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
View File

@ -1,62 +0,0 @@
// 初始化表单数据
export function initListenerForm(listener) {
let self = {
...listener
};
if (listener.script) {
self = {
...listener,
...listener.script,
scriptType: listener.script.resource ? "externalScript" : "inlineScript"
};
}
if (listener.event === "timeout" && listener.eventDefinitions) {
if (listener.eventDefinitions.length) {
let k = "";
for (let key in listener.eventDefinitions[0]) {
console.log(listener.eventDefinitions, key);
if (key.indexOf("time") !== -1) {
k = key;
self.eventDefinitionType = key.replace("time", "").toLowerCase();
}
}
console.log(k);
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
}
}
return self;
}
export function initListenerType(listener) {
let listenerType;
if (listener.class) listenerType = "classListener";
if (listener.expression) listenerType = "expressionListener";
if (listener.delegateExpression) listenerType = "delegateExpressionListener";
if (listener.script) listenerType = "scriptListener";
return {
...JSON.parse(JSON.stringify(listener)),
...(listener.script ?? {}),
listenerType: listenerType
};
}
export const listenerType = {
classListener: "Java 类",
expressionListener: "表达式",
delegateExpressionListener: "代理表达式",
scriptListener: "脚本"
};
export const eventType = {
create: "创建",
assignment: "指派",
complete: "完成",
delete: "删除",
update: "更新",
timeout: "超时"
};
export const fieldType = {
string: "字符串",
expression: "表达式"
};

62
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts Normal file
View File

@ -0,0 +1,62 @@
// 初始化表单数据
export function initListenerForm(listener) {
let self = {
...listener
}
if (listener.script) {
self = {
...listener,
...listener.script,
scriptType: listener.script.resource ? 'externalScript' : 'inlineScript'
}
}
if (listener.event === 'timeout' && listener.eventDefinitions) {
if (listener.eventDefinitions.length) {
let k = ''
for (const key in listener.eventDefinitions[0]) {
console.log(listener.eventDefinitions, key)
if (key.indexOf('time') !== -1) {
k = key
self.eventDefinitionType = key.replace('time', '').toLowerCase()
}
}
console.log(k)
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body
}
}
return self
}
export function initListenerType(listener) {
let listenerType
if (listener.class) listenerType = 'classListener'
if (listener.expression) listenerType = 'expressionListener'
if (listener.delegateExpression) listenerType = 'delegateExpressionListener'
if (listener.script) listenerType = 'scriptListener'
return {
...JSON.parse(JSON.stringify(listener)),
...(listener.script ?? {}),
listenerType: listenerType
}
}
export const listenerType = {
classListener: 'Java 类',
expressionListener: '表达式',
delegateExpressionListener: '代理表达式',
scriptListener: '脚本'
}
export const eventType = {
create: '创建',
assignment: '指派',
complete: '完成',
delete: '删除',
update: '更新',
timeout: '超时'
}
export const fieldType = {
string: '字符串',
expression: '表达式'
}

54
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
View File

@ -69,7 +69,7 @@
</template> </template>
<script setup lang="ts" name="ElementMultiInstance"> <script setup lang="ts" name="ElementMultiInstance">
import { inject, ref, onBeforeUnmount, watch } from 'vue' import { inject, ref, onBeforeUnmount, watch, toRaw } from 'vue'
import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElInput } from 'element-plus' import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElInput } from 'element-plus'
const props = defineProps({ const props = defineProps({
businessObject: Object, businessObject: Object,
@ -129,7 +129,9 @@ const changeLoopCharacteristicsType = (type) => {
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置 // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
// 取消多实例配置 // 取消多实例配置
if (type === 'Null') { if (type === 'Null') {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { loopCharacteristics: null }) window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: null
})
return return
} }
// 配置循环 // 配置循环
@ -137,7 +139,7 @@ const changeLoopCharacteristicsType = (type) => {
const loopCharacteristicsObject = window.bpmnInstances.moddle.create( const loopCharacteristicsObject = window.bpmnInstances.moddle.create(
'bpmn:StandardLoopCharacteristics' 'bpmn:StandardLoopCharacteristics'
) )
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: loopCharacteristicsObject loopCharacteristics: loopCharacteristicsObject
}) })
multiLoopInstance.value = null multiLoopInstance.value = null
@ -155,7 +157,7 @@ const changeLoopCharacteristicsType = (type) => {
{ collection: '${coll_userList}' } { collection: '${coll_userList}' }
) )
} }
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
loopCharacteristics: multiLoopInstance.value loopCharacteristics: multiLoopInstance.value
}) })
} }
@ -167,9 +169,13 @@ const updateLoopCardinality = (cardinality) => {
body: cardinality body: cardinality
}) })
} }
window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, { window.bpmnInstances.modeling.updateModdleProperties(
loopCardinality toRaw(bpmnElement.value),
}) multiLoopInstance.value,
{
loopCardinality
}
)
} }
// 完成条件 // 完成条件
const updateLoopCondition = (condition) => { const updateLoopCondition = (condition) => {
@ -179,9 +185,13 @@ const updateLoopCondition = (condition) => {
body: condition body: condition
}) })
} }
window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, { window.bpmnInstances.modeling.updateModdleProperties(
completionCondition toRaw(bpmnElement.value),
}) multiLoopInstance.value,
{
completionCondition
}
)
} }
// 重试周期 // 重试周期
const updateLoopTimeCycle = (timeCycle) => { const updateLoopTimeCycle = (timeCycle) => {
@ -192,16 +202,24 @@ const updateLoopTimeCycle = (timeCycle) => {
}) })
] ]
}) })
window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, { window.bpmnInstances.modeling.updateModdleProperties(
extensionElements toRaw(bpmnElement.value),
}) multiLoopInstance.value,
{
extensionElements
}
)
} }
// 直接更新的基础信息 // 直接更新的基础信息
const updateLoopBase = () => { const updateLoopBase = () => {
window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, { window.bpmnInstances.modeling.updateModdleProperties(
collection: loopInstanceForm.value.collection || null, toRaw(bpmnElement.value),
elementVariable: loopInstanceForm.value.elementVariable || null multiLoopInstance.value,
}) {
collection: loopInstanceForm.value.collection || null,
elementVariable: loopInstanceForm.value.elementVariable || null
}
)
} }
// 各异步状态 // 各异步状态
const updateLoopAsync = (key) => { const updateLoopAsync = (key) => {
@ -215,7 +233,7 @@ const updateLoopAsync = (key) => {
asyncAttr[key] = loopInstanceForm.value[key] asyncAttr[key] = loopInstanceForm.value[key]
} }
window.bpmnInstances.modeling.updateModdleProperties( window.bpmnInstances.modeling.updateModdleProperties(
bpmnElement.value, toRaw(bpmnElement.value),
multiLoopInstance.value, multiLoopInstance.value,
asyncAttr asyncAttr
) )

17
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
View File

@ -17,7 +17,7 @@
</template> </template>
<script setup lang="ts" name="ElementOtherConfig"> <script setup lang="ts" name="ElementOtherConfig">
import { ref, watch, nextTick, onBeforeUnmount } from 'vue' import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
import { ElInput } from 'element-plus' import { ElInput } from 'element-plus'
const props = defineProps({ const props = defineProps({
id: String id: String
@ -25,15 +25,26 @@ const props = defineProps({
const documentation = ref('') const documentation = ref('')
const bpmnElement = ref() const bpmnElement = ref()
const updateDocumentation = () => { const updateDocumentation = () => {
console.log(props, 'props')
console.log(window, 'window')
console.log(
window.bpmnInstances.elementRegistry.get(props.id),
'window.bpmnInstances.elementRegistry.get(props.id)'
)
console.log(bpmnElement.value, 'bpmnElement.value ')
if (bpmnElement.value && bpmnElement.value.id === props.id) { if (bpmnElement.value && bpmnElement.value.id === props.id) {
bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id) bpmnElement.value = window?.bpmnInstances.elementRegistry.get(props.id)
} }
console.log(
bpmnElement.value,
'bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value '
)
// (bpmnElement.value && bpmnElement.value.id === props.id) || // (bpmnElement.value && bpmnElement.value.id === props.id) ||
// (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)) // (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', { const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
text: documentation.value text: documentation.value
}) })
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
documentation: [documentations] documentation: [documentations]
}) })
} }

10
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
View File

@ -13,7 +13,7 @@
<el-button <el-button
type="text" type="text"
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeAttributes(scope.roww, scope.$index)" @click="removeAttributes(scope.row, scope.$index)"
>移除</el-button >移除</el-button
> >
</template> </template>
@ -52,7 +52,7 @@
</template> </template>
<script setup lang="ts" name="ElementProperties"> <script setup lang="ts" name="ElementProperties">
import { ref, inject, nextTick, watch } from 'vue' import { ref, inject, nextTick, watch, toRaw } from 'vue'
import { import {
ElMessageBox, ElMessageBox,
ElDialog, ElDialog,
@ -131,8 +131,8 @@ const saveAttribute = () => {
const { name, value } = propertyForm.value const { name, value } = propertyForm.value
if (editingPropertyIndex.value !== -1) { if (editingPropertyIndex.value !== -1) {
window.bpmnInstances.modeling.updateModdleProperties( window.bpmnInstances.modeling.updateModdleProperties(
bpmnElement.value, toRaw(bpmnElement.value),
bpmnElementPropertyList.value[editingPropertyIndex.value], toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
{ {
name, name,
value value
@ -157,7 +157,7 @@ const updateElementExtensions = (properties) => {
const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
values: otherExtensionList.value.concat([properties]) values: otherExtensionList.value.concat([properties])
}) })
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
extensionElements: extensions extensionElements: extensions
}) })
} }

6
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
View File

@ -50,7 +50,7 @@
</template> </template>
<script setup lang="ts" name="ReceiveTask"> <script setup lang="ts" name="ReceiveTask">
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue' import { ref, watch, onBeforeUnmount, onMounted, nextTick, toRaw } from 'vue'
import { ElMessage, ElFormItem, ElDialog, ElForm, ElSelect, ElOption } from 'element-plus' import { ElMessage, ElFormItem, ElDialog, ElForm, ElSelect, ElOption } from 'element-plus'
const props = defineProps({ const props = defineProps({
id: String, id: String,
@ -85,11 +85,11 @@ const createNewMessage = () => {
} }
const updateTaskMessage = (messageId) => { const updateTaskMessage = (messageId) => {
if (messageId === '-1') { if (messageId === '-1') {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: null messageRef: null
}) })
} else { } else {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: bpmnMessageRefsMap.value[messageId] messageRef: bpmnMessageRefsMap.value[messageId]
}) })
} }

4
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
View File

@ -45,7 +45,7 @@
</template> </template>
<script setup lang="ts" name="ScriptTask"> <script setup lang="ts" name="ScriptTask">
import { ref, watch, nextTick, onBeforeUnmount } from 'vue' import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
import { ElInput, ElFormItem } from 'element-plus' import { ElInput, ElFormItem } from 'element-plus'
const props = defineProps({ const props = defineProps({
id: String, id: String,
@ -78,7 +78,7 @@ const updateElementTask = () => {
taskAttr.resource = scriptTaskForm.value.resource || null taskAttr.resource = scriptTaskForm.value.resource || null
taskAttr.script = null taskAttr.script = null
} }
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr) window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {

4
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
View File

@ -38,7 +38,7 @@
</template> </template>
<script setup lang="ts" name="UserTask"> <script setup lang="ts" name="UserTask">
import { ref, watch, nextTick, onBeforeUnmount } from 'vue' import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
import { ElLink, ElFormItem, ElInput } from 'element-plus' import { ElLink, ElFormItem, ElInput } from 'element-plus'
const props = defineProps({ const props = defineProps({
id: String, id: String,
@ -78,7 +78,7 @@ const updateElementTask = (key) => {
} else { } else {
taskAttr[key] = userTaskForm.value[key] || null taskAttr[key] = userTaskForm.value[key] || null
} }
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr) window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
} }
watch( watch(

6
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
View File

@ -1,3 +1,4 @@
import { toRaw } from 'vue'
// 创建监听器实例 // 创建监听器实例
export function createListenerObject(options, isTask, prefix) { export function createListenerObject(options, isTask, prefix) {
const listenerObj = Object.create(null) const listenerObj = Object.create(null)
@ -59,12 +60,9 @@ export function updateElementExtensions(element, extensionList) {
const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
values: extensionList values: extensionList
}) })
console.log(element, 'elementelementelementelement') window.bpmnInstances.modeling.updateProperties(toRaw(element), {
console.log(extensions.values, 'extensionsextensionsextensions')
window.bpmnInstances.modeling.updateProperties(element, {
extensionElements: extensions.values extensionElements: extensions.values
}) })
console.log('ssss')
} }
// 创建一个id // 创建一个id

5
yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
View File

@ -27,7 +27,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue' import { ref, onMounted } from 'vue'
// import { translations } from '@/components/bpmnProcessDesigner/src/translations' // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务） // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad' import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
@ -64,9 +64,6 @@ const controlForm = ref({
// }) // })
// 流程模型的信息 // 流程模型的信息
const model = ref({}) const model = ref({})
onBeforeMount(() => {
// window.bpmnInstances = {}
})
onMounted(() => { onMounted(() => {
// 如果 modelId 非空，说明是修改流程模型 // 如果 modelId 非空，说明是修改流程模型
const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId