huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-23 15:51:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修改数据弹出层

Browse Source
This commit is contained in:
gexinzhineng/gxzn27 2023-01-28 11:28:52 +08:00
parent 89c366be68
commit a03f702fa1
6 changed files with 167 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
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" -->
@ -89,7 +89,7 @@ const props = defineProps({
}, },
width: { width: {
type: Number, type: Number,
default: 480 default: 500
}, },
idEditDisabled: { idEditDisabled: {
type: Boolean, type: Boolean,

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

@ -1,7 +1,7 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-form label-width="90px" :model="needProps" :rules="rules"> <el-form label-width="90px" :model="needProps" :rules="rules">
<div v-if="elementBaseInfo == 'bpmn:Process'"> <div v-if="needProps.type == 'bpmn:Process'">
<!-- 如果是 Process 信息的时候，使用自定义表单 --> <!-- 如果是 Process 信息的时候，使用自定义表单 -->
<el-link <el-link
href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B" href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
@ -9,9 +9,9 @@
target="_blank" target="_blank"
>如何实现实现会签、或签？</el-link >如何实现实现会签、或签？</el-link
> >
<el-form-item label="流程标识" prop="key"> <el-form-item label="流程标识" prop="id">
<el-input <el-input
v-model="needProps.key" v-model="needProps.id"
placeholder="请输入流标标识" placeholder="请输入流标标识"
:disabled="needProps.id !== undefined && needProps.id.length > 0" :disabled="needProps.id !== undefined && needProps.id.length > 0"
@change="handleKeyUpdate" @change="handleKeyUpdate"
@ -38,20 +38,20 @@
</div> </div>
</template> </template>
<script setup lang="ts" name="ElementBaseInfo"> <script setup lang="ts" name="ElementBaseInfo">
import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue' import { ref, reactive, watch, onMounted, onBeforeUnmount, toRaw } from 'vue'
import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus' import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus'
const props = defineProps({ const props = defineProps({
businessObject: Object, businessObject: Object,
model: Object // 流程模型的数据 model: Object // 流程模型的数据
}) })
const needProps = ref() const needProps = ref({})
const bpmnElement = ref() const bpmnElement = ref()
const elementBaseInfo = ref({}) const elementBaseInfo = ref({})
// 流程表单的下拉框的数据 // 流程表单的下拉框的数据
// const forms = ref([]) // const forms = ref([])
// 流程模型的校验 // 流程模型的校验
const rules = reactive({ const rules = reactive({
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }], id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }] name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
}) })
@ -60,10 +60,13 @@ const resetBaseInfo = () => {
console.log(bpmnElement, 'bpmnElement') console.log(bpmnElement, 'bpmnElement')
bpmnElement.value = window?.bpmnInstances?.bpmnElement bpmnElement.value = window?.bpmnInstances?.bpmnElement
console.log(bpmnElement.value, 'resetBaseInfo') console.log(bpmnElement.value, 'resetBaseInfo11111111111')
elementBaseInfo.value = bpmnElement.value.businessObject 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)) // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
console.log(elementBaseInfo.value, 'elementBaseInfo') console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
} }
const handleKeyUpdate = (value) => { const handleKeyUpdate = (value) => {
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
@ -104,10 +107,15 @@ const updateBaseInfo = (key) => {
// id: elementBaseInfo.value[key] // id: elementBaseInfo.value[key]
// // di: { id: `${elementBaseInfo.value[key]}_di` } // // di: { id: `${elementBaseInfo.value[key]}_di` }
// } // }
console.log(elementBaseInfo, 'elementBaseInfo11111111111')
needProps.value = { ...elementBaseInfo.value, ...needProps.value }
if (key === 'id') { if (key === 'id') {
console.log('jinru') console.log('jinru')
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
console.log(toRaw(bpmnElement.value), '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` }
}) })
@ -131,9 +139,9 @@ watch(
(val) => { (val) => {
console.log(val, 'val11111111111111111111') console.log(val, 'val11111111111111111111')
if (val) { if (val) {
nextTick(() => { // nextTick(() => {
resetBaseInfo() resetBaseInfo()
}) // })
} }
} }
) )

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

@ -11,15 +11,15 @@
/> />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)" <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="mini" size="small"
type="text" type="text"
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListener(scope, scope.$index)" @click="removeListener(scope.row, scope.$index)"
>移除</el-button >移除</el-button
> >
</template> </template>
@ -138,7 +138,7 @@
<el-divider /> <el-divider />
<p class="listener-filed__title"> <p class="listener-filed__title">
<span><Icon icon="ep:menu" />注入字段：</span> <span><Icon icon="ep:menu" />注入字段：</span>
<el-button type="primary" @click="openListenerFieldForm(null)">添加字段</el-button> <XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" />
</p> </p>
<el-table <el-table
:data="fieldsListOfListener" :data="fieldsListOfListener"
@ -164,15 +164,18 @@
/> />
<el-table-column label="操作" width="100px"> <el-table-column label="操作" width="100px">
<template #default="scope"> <template #default="scope">
<el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)" <el-button
size="small"
type="text"
@click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="mini" size="small"
type="text" type="text"
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListenerField(scope, scope.$index)" @click="removeListenerField(scope.row, scope.$index)"
>移除</el-button >移除</el-button
> >
</template> </template>
@ -180,8 +183,8 @@
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button> <el-button @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button> <el-button type="primary" @click="saveListenerConfig">保 存</el-button>
</div> </div>
</el-drawer> </el-drawer>
@ -240,8 +243,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button> <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button> <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
@ -392,10 +395,10 @@ 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`
) ?? [] ) ?? []
updateElementExtensions( // updateElementExtensions(
bpmnElement.value, // bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value) // otherExtensionList.value.concat(bpmnElementListeners.value)
) // )
// 4. 隐藏侧边栏 // 4. 隐藏侧边栏
listenerFormModelVisible.value = false listenerFormModelVisible.value = false
listenerForm.value = {} listenerForm.value = {}

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

@ -1,6 +1,6 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border> <el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" /> <el-table-column label="序号" width="50px" type="index" />
<el-table-column <el-table-column
label="事件类型" label="事件类型"
@ -17,15 +17,15 @@
/> />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)" <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="mini" size="small"
type="text" type="text"
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListener(scope, scope.$index)" @click="removeListener(scope.row, scope.$index)"
>移除</el-button >移除</el-button
> >
</template> </template>
@ -33,7 +33,7 @@
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<XButton <XButton
size="mini" size="small"
type="primary" type="primary"
preIcon="ep:plus" preIcon="ep:plus"
title="添加监听器" title="添加监听器"
@ -49,7 +49,7 @@
append-to-body append-to-body
destroy-on-close destroy-on-close
> >
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef"> <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
<el-form-item <el-form-item
label="事件类型" label="事件类型"
prop="event" prop="event"
@ -176,13 +176,13 @@
<el-divider /> <el-divider />
<p class="listener-filed__title"> <p class="listener-filed__title">
<span><Icon icon="ep:menu" />注入字段：</span> <span><Icon icon="ep:menu" />注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)" <el-button size="small" type="primary" @click="openListenerFieldForm(null)"
>添加字段</el-button >添加字段</el-button
> >
</p> </p>
<el-table <el-table
:data="fieldsListOfListener" :data="fieldsListOfListener"
size="mini" size="small"
max-height="240" max-height="240"
border border
fit fit
@ -204,15 +204,18 @@
/> />
<el-table-column label="操作" width="100px"> <el-table-column label="操作" width="100px">
<template #default="scope"> <template #default="scope">
<el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)" <el-button
size="small"
type="text"
@click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button <el-button
size="mini" size="small"
type="text" type="text"
style="color: #ff4d4f" style="color: #ff4d4f"
@click="removeListenerField(scope, scope.$index)" @click="removeListenerField(scope.row, scope.$index)"
>移除</el-button >移除</el-button
> >
</template> </template>
@ -220,8 +223,8 @@
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button> <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button> <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
</div> </div>
</el-drawer> </el-drawer>
@ -235,7 +238,7 @@
> >
<el-form <el-form
:model="listenerFieldForm" :model="listenerFieldForm"
size="mini" size="small"
label-width="96px" label-width="96px"
ref="listenerFieldFormRef" ref="listenerFieldFormRef"
style="height: 136px" style="height: 136px"
@ -281,8 +284,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button> <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button> <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>

72
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
View File

@ -1,69 +1,73 @@
// 创建监听器实例 // 创建监听器实例
export function createListenerObject(options, isTask, prefix) { export function createListenerObject (options, isTask, prefix) {
const listenerObj = Object.create(null); const listenerObj = Object.create(null)
listenerObj.event = options.event; listenerObj.event = options.event
isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段 isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段
switch (options.listenerType) { switch (options.listenerType) {
case "scriptListener": case "scriptListener":
listenerObj.script = createScriptObject(options, prefix); listenerObj.script = createScriptObject(options, prefix)
break; break
case "expressionListener": case "expressionListener":
listenerObj.expression = options.expression; listenerObj.expression = options.expression
break; break
case "delegateExpressionListener": case "delegateExpressionListener":
listenerObj.delegateExpression = options.delegateExpression; listenerObj.delegateExpression = options.delegateExpression
break; break
default: default:
listenerObj.class = options.class; listenerObj.class = options.class
} }
// 注入字段 // 注入字段
if (options.fields) { if (options.fields) {
listenerObj.fields = options.fields.map(field => { listenerObj.fields = options.fields.map(field => {
return createFieldObject(field, prefix); return createFieldObject(field, prefix)
}); })
} }
// 任务监听器的 定时器 设置 // 任务监听器的 定时器 设置
if (isTask && options.event === "timeout" && !!options.eventDefinitionType) { if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions }); const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions })
const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", { const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
id: `TimerEventDefinition_${uuid(8)}`, id: `TimerEventDefinition_${uuid(8)}`,
[`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
}); })
listenerObj.eventDefinitions = [TimerEventDefinition]; listenerObj.eventDefinitions = [TimerEventDefinition]
} }
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj); return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj)
} }
// 创建 监听器的注入字段 实例 // 创建 监听器的注入字段 实例
export function createFieldObject(option, prefix) { export function createFieldObject (option, prefix) {
const { name, fieldType, string, expression } = option; const { name, fieldType, string, expression } = option
const fieldConfig = fieldType === "string" ? { name, string } : { name, expression }; const fieldConfig = fieldType === "string" ? { name, string } : { name, expression }
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig); return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig)
} }
// 创建脚本实例 // 创建脚本实例
export function createScriptObject(options, prefix) { export function createScriptObject (options, prefix) {
const { scriptType, scriptFormat, value, resource } = options; const { scriptType, scriptFormat, value, resource } = options
const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource }; const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource }
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig); return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig)
} }
// 更新元素扩展属性 // 更新元素扩展属性
export function updateElementExtensions(element, extensionList) { export function updateElementExtensions (element, extensionList) {
console.log(element, 'element')
console.log(extensionList, 'extensionList')
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
values: extensionList values: extensionList
}); })
console.log(extensions, 'extensionsextensions')
console.log(window.bpmnInstances.modeling, 'window.bpmnInstances.modeling')
window.bpmnInstances.modeling.updateProperties(element, { window.bpmnInstances.modeling.updateProperties(element, {
extensionElements: extensions extensionElements: extensions.values
}); })
} }
// 创建一个id // 创建一个id
export function uuid(length = 8, chars) { export function uuid (length = 8, chars) {
let result = ""; let result = ""
let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
for (let i = length; i > 0; --i) { for (let i = length; i > 0; --i) {
result += charsString[Math.floor(Math.random() * charsString.length)]; result += charsString[Math.floor(Math.random() * charsString.length)]
} }
return result; return result
} }

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

@ -1,23 +1,51 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent> <el-form
<div v-if="elementBaseInfo.$type === 'bpmn:Process'"> <!-- 如果是 Process 信息的时候，使用自定义表单 --> size="mini"
<el-link href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B" label-width="90px"
type="danger" target="_blank">如何实现实现会签、或签？</el-link> :model="model"
:rules="rules"
@submit.native.prevent
>
<div v-if="elementBaseInfo.$type === 'bpmn:Process'">
<!-- 如果是 Process 信息的时候，使用自定义表单 -->
<el-link
href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
type="danger"
target="_blank"
>如何实现实现会签、或签？</el-link
>
<el-form-item label="流程标识" prop="key"> <el-form-item label="流程标识" prop="key">
<el-input v-model="model.key" placeholder="请输入流标标识" <el-input
:disabled="model.id !== undefined && model.id.length > 0" @change="handleKeyUpdate" /> v-model="model.key"
placeholder="请输入流标标识"
:disabled="model.id !== undefined && model.id.length > 0"
@change="handleKeyUpdate"
/>
</el-form-item> </el-form-item>
<el-form-item label="流程名称" prop="name"> <el-form-item label="流程名称" prop="name">
<el-input v-model="model.name" placeholder="请输入流程名称" clearable @change="handleNameUpdate" /> <el-input
v-model="model.name"
placeholder="请输入流程名称"
clearable
@change="handleNameUpdate"
/>
</el-form-item> </el-form-item>
</div> </div>
<div v-else> <div v-else>
<el-form-item label="ID"> <el-form-item label="ID">
<el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')"/> <el-input
v-model="elementBaseInfo.id"
clearable
@change="updateBaseInfo('id')"
/>
</el-form-item> </el-form-item>
<el-form-item label="名称"> <el-form-item label="名称">
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" /> <el-input
v-model="elementBaseInfo.name"
clearable
@change="updateBaseInfo('name')"
/>
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
@ -31,7 +59,7 @@ export default {
businessObject: Object, businessObject: Object,
model: Object, // 流程模型的数据 model: Object, // 流程模型的数据
}, },
data() { data () {
return { return {
elementBaseInfo: {}, elementBaseInfo: {},
// 流程表单的下拉框的数据 // 流程表单的下拉框的数据
@ -41,14 +69,14 @@ export default {
key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }], key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }], name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
}, },
}; }
}, },
watch: { watch: {
businessObject: { businessObject: {
immediate: false, immediate: false,
handler: function(val) { handler: function (val) {
if (val) { if (val) {
this.$nextTick(() => this.resetBaseInfo()); this.$nextTick(() => this.resetBaseInfo())
} }
} }
}, },
@ -59,7 +87,7 @@ export default {
// } // }
// } // }
}, },
created() { created () {
// 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新 // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
setTimeout(() => { setTimeout(() => {
this.handleKeyUpdate(this.model.key) this.handleKeyUpdate(this.model.key)
@ -67,53 +95,53 @@ export default {
}, 1000) }, 1000)
}, },
methods: { methods: {
resetBaseInfo() { resetBaseInfo () {
this.bpmnElement = window?.bpmnInstances?.bpmnElement; this.bpmnElement = window?.bpmnInstances?.bpmnElement
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject)); this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
}, },
handleKeyUpdate(value) { handleKeyUpdate (value) {
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 // 校验 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 节点
this.elementBaseInfo['id'] = value;
this.updateBaseInfo('id');
},
handleNameUpdate(value) {
if (!value) { if (!value) {
return return
} }
this.elementBaseInfo['name'] = value; if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
this.updateBaseInfo('name'); console.log('key 不满足 XML NCName 规则，所以不进行赋值')
return
}
console.log('key 满足 XML NCName 规则，所以进行赋值')
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
this.elementBaseInfo['id'] = value
this.updateBaseInfo('id')
}, },
handleDescriptionUpdate(value) { handleNameUpdate (value) {
if (!value) {
return
}
this.elementBaseInfo['name'] = value
this.updateBaseInfo('name')
},
handleDescriptionUpdate (value) {
// TODO 芋艿：documentation 暂时无法修改，后续在看看 // TODO 芋艿：documentation 暂时无法修改，后续在看看
// this.elementBaseInfo['documentation'] = value; // this.elementBaseInfo['documentation'] = value;
// this.updateBaseInfo('documentation'); // this.updateBaseInfo('documentation');
}, },
updateBaseInfo(key) { updateBaseInfo (key) {
// 触发 elementBaseInfo 对应的字段 // 触发 elementBaseInfo 对应的字段
const attrObj = Object.create(null); const attrObj = Object.create(null)
attrObj[key] = this.elementBaseInfo[key]; attrObj[key] = this.elementBaseInfo[key]
if (key === "id") { if (key === "id") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
id: this.elementBaseInfo[key], id: this.elementBaseInfo[key],
di: { id: `${this.elementBaseInfo[key]}_di` } di: { id: `${this.elementBaseInfo[key]}_di` }
}); })
} else { } else {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj); window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj)
} }
} }
}, },
beforeDestroy() { beforeDestroy () {
this.bpmnElement = null; this.bpmnElement = null
} }
}; };
</script> </script>