From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 183 insertions(+), 0 deletions(-)
diff --git a/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 0000000..3172338
--- /dev/null
+++ b/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,183 @@
+<template>
+ <div class="panel-tab__content">
+ <el-form label-width="90px" :model="needProps" :rules="rules">
+ <div v-if="needProps.type == 'bpmn:Process'">
+ <!-- 濡傛灉鏄� 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>
+ </div>
+ </el-form>
+ </div>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'ElementBaseInfo' })
+
+const props = defineProps({
+ 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' }]
+})
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetBaseInfo = () => {
+ 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
+
+ // 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 瑙勫垯锛屾墍浠ヨ繘琛岃祴鍊�')
+
+ // 鍦� BPMN 鐨� XML 涓紝娴佺▼鏍囪瘑 key锛屽叾瀹炲搴旂殑鏄� id 鑺傜偣
+ elementBaseInfo.value['id'] = value
+
+ setTimeout(() => {
+ updateBaseInfo('id')
+ }, 100)
+}
+const handleNameUpdate = (value) => {
+ console.log(elementBaseInfo, 'elementBaseInfo')
+ if (!value) {
+ return
+ }
+ elementBaseInfo.value['name'] = value
+
+ setTimeout(() => {
+ updateBaseInfo('name')
+ }, 100)
+}
+// const handleDescriptionUpdate=(value)=> {
+// TODO 鑺嬭壙锛歞ocumentation 鏆傛椂鏃犳硶淇敼锛屽悗缁湪鐪嬬湅
+// 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 }
+
+ 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()
+ // })
+ }
+ }
+)
+
+watch(
+ () => props.model?.key,
+ (val) => {
+ // 閽堝涓婁紶鐨� bpmn 娴佺▼鍥炬椂锛屼繚璇� key 鍜� name 鐨勬洿鏂�
+ if (val) {
+ handleKeyUpdate(props.model.key)
+ handleNameUpdate(props.model.name)
+ }
+ },
+ {
+ immediate: true
+ }
+)
+
+// watch(
+// () => ({ ...props }),
+// (oldVal, newVal) => {
+// console.log(oldVal, 'oldVal')
+// console.log(newVal, 'newVal')
+// if (newVal) {
+// needProps.value = newVal
+// }
+// },
+// {
+// immediate: true
+// }
+// )
+// 'model.key': {
+// immediate: false,
+// handler: function (val) {
+// this.handleKeyUpdate(val)
+// }
+// }
+onBeforeUnmount(() => {
+ bpmnElement.value = null
+})
+</script>
--
Gitblit v1.8.0