Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调流程定义 流程图

Browse Source
This commit is contained in:
GGJ
2024-04-17 09:44:50 +08:00
parent ecb649dc47
commit 38e88f0ff5
11 changed files with 314 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
View File

@@ -1,161 +1,168 @@
<template>
<div class="panel-tab__content">
<el-form label-width="90px" :model="needProps" :rules="rules">
<div v-if="needProps.type == 'bpmn:Process'">
<!-- <el-form-item label="流程标识" prop="id">
<el-input
v-model="needProps.id"
placeholder="请输入流标标识"
:disabled="needProps.id !== undefined && needProps.id.length > 0"
@change="handleKeyUpdate"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="needProps.name"
placeholder="请输入流程名称"
clearable
@change="handleNameUpdate"
/>
</el-form-item> -->
</div>
<div v-else>
<el-form-item label="ID">
<el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="elementBaseInfo.documentation" clearable @change="updateBaseInfo('documentation')" />
</el-form-item>
</div>
</el-form>
</div>
<div class="panel-tab__content">
<el-form label-width="90px" :model="needProps" :rules="rules">
<div v-if="needProps.type == 'bpmn:Process'">
<el-form-item label="流程标识" prop="id">
<el-input
v-model="needProps.id"
:disabled="needProps.id !== undefined && needProps.id.length > 0"
placeholder="请输入流标标识"
@change="handleKeyUpdate"
/>
</el-form-item>
</div>
<div v-else>
<el-form-item label="ID">
<el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="elementBaseInfo.documentation"
clearable
@change="updateBaseInfo('documentation')"
/>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw } from 'vue'
import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw } from 'vue'
defineOptions({ name: 'ElementBaseInfo' })
const props = defineProps({
businessObject: {
type: Object,
default: () => {}
},
model: {
type: Object,
default: () => {}
}
businessObject: {
type: Object,
default: () => {}
},
model: {
type: Object,
default: () => {}
}
})
const needProps = ref<any>({})
const bpmnElement = ref()
const elementBaseInfo = ref<any>({})
// 流程表单的下拉框的数据
// const forms = ref([])
// 流程模型的校验
const rules = reactive({
id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
})
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetBaseInfo = () => {
console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
bpmnElement.value = bpmnInstances()?.bpmnElement
// console.log(bpmnElement.value, 'resetBaseInfo11111111111')
elementBaseInfo.value = bpmnElement.value.businessObject
needProps.value['type'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
bpmnElement.value = bpmnInstances()?.bpmnElement
// console.log(bpmnElement.value, 'resetBaseInfo11111111111')
elementBaseInfo.value = bpmnElement.value.businessObject
needProps.value['type'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
// console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
// console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
}
const handleKeyUpdate = (value) => {
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
if (!value) {
return
}
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
console.log('key 不满足 XML NCName 规则，所以不进行赋值')
return
}
console.log('key 满足 XML NCName 规则，所以进行赋值')
const handleKeyUpdate = value => {
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
if (!value) {
return
}
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
console.log('key 不满足 XML NCName 规则，所以不进行赋值')
return
}
console.log('key 满足 XML NCName 规则，所以进行赋值')
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
elementBaseInfo.value['id'] = value
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
elementBaseInfo.value['id'] = value
setTimeout(() => {
updateBaseInfo('id')
}, 100)
setTimeout(() => {
updateBaseInfo('id')
}, 100)
}
const handleNameUpdate = (value) => {
console.log(elementBaseInfo, 'elementBaseInfo')
if (!value) {
return
}
elementBaseInfo.value['name'] = value
const handleNameUpdate = value => {
console.log(elementBaseInfo, 'elementBaseInfo')
if (!value) {
return
}
elementBaseInfo.value['name'] = value
setTimeout(() => {
updateBaseInfo('name')
}, 100)
setTimeout(() => {
updateBaseInfo('name')
}, 100)
}
const handleClassifyUpdate = value => {
if (!value) {
return
}
elementBaseInfo.value['processCategory'] = value
setTimeout(() => {
updateBaseInfo('processCategory')
}, 100)
}
// const handleDescriptionUpdate=(value)=> {
// TODO 芋艿：documentation 暂时无法修改，后续在看看
// this.elementBaseInfo['documentation'] = value;
// this.updateBaseInfo('documentation');
// }
const updateBaseInfo = (key) => {
console.log(key, 'key')
// 触发 elementBaseInfo 对应的字段
const attrObj = Object.create(null)
// console.log(attrObj, 'attrObj')
attrObj[key] = elementBaseInfo.value[key]
// console.log(attrObj, 'attrObj111')
// const attrObj = {
// id: elementBaseInfo.value[key]
// // di: { id: `${elementBaseInfo.value[key]}_di` }
// }
// console.log(elementBaseInfo, 'elementBaseInfo11111111111')
needProps.value = { ...elementBaseInfo.value, ...needProps.value }
const updateBaseInfo = key => {
console.log(key, 'key')
// 触发 elementBaseInfo 对应的字段
const attrObj = Object.create(null)
// console.log(attrObj, 'attrObj')
attrObj[key] = elementBaseInfo.value[key]
// console.log(attrObj, 'attrObj111')
// const attrObj = {
// id: elementBaseInfo.value[key]
// // di: { id: `${elementBaseInfo.value[key]}_di` }
// }
// console.log(elementBaseInfo, 'elementBaseInfo11111111111')
needProps.value = { ...elementBaseInfo.value, ...needProps.value }
if (key === 'id') {
// console.log('jinru')
console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
console.log(toRaw(bpmnElement.value), 'bpmnElement')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` }
})
} else {
console.log(attrObj, 'attrObj')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
}
if (key === 'id') {
// console.log('jinru')
console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
console.log(toRaw(bpmnElement.value), 'bpmnElement')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` }
})
} else {
console.log(attrObj, 'attrObj')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
}
}
watch(
() => props.businessObject,
(val) => {
// console.log(val, 'val11111111111111111111')
if (val) {
// nextTick(() => {
resetBaseInfo()
// })
() => props.businessObject,
val => {
// console.log(val, 'val11111111111111111111')
if (val) {
// nextTick(() => {
resetBaseInfo()
// })
}
}
}
)
watch(
() => props.model?.key,
(val) => {
// 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
if (val) {
handleKeyUpdate(props.model.key)
handleNameUpdate(props.model.name)
() => props.model?.key,
val => {
// 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
if (val) {
handleKeyUpdate(props.model.key)
handleNameUpdate(props.model.name)
}
}
}
)
// watch(
@@ -178,6 +185,6 @@ watch(
// }
// }
onBeforeUnmount(() => {
bpmnElement.value = null
bpmnElement.value = null
})
</script>