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/properties/ElementProperties.vue | 181 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 181 insertions(+), 0 deletions(-)
diff --git a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
new file mode 100644
index 0000000..49c35aa
--- /dev/null
+++ b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -0,0 +1,181 @@
+<template>
+ <div class="panel-tab__content">
+ <el-table :data="elementPropertyList" max-height="240" fit border>
+ <el-table-column label="搴忓彿" width="50px" type="index" />
+ <el-table-column label="灞炴�у悕" prop="name" min-width="100px" show-overflow-tooltip />
+ <el-table-column label="灞炴�у��" prop="value" min-width="100px" show-overflow-tooltip />
+ <el-table-column label="鎿嶄綔" width="110px">
+ <template #default="scope">
+ <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
+ 缂栬緫
+ </el-button>
+ <el-divider direction="vertical" />
+ <el-button
+ link
+ size="small"
+ style="color: #ff4d4f"
+ @click="removeAttributes(scope.row, scope.$index)"
+ >
+ 绉婚櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="element-drawer__button">
+ <XButton
+ type="primary"
+ preIcon="ep:plus"
+ title="娣诲姞灞炴��"
+ @click="openAttributesForm(null, -1)"
+ />
+ </div>
+
+ <el-dialog
+ v-model="propertyFormModelVisible"
+ title="灞炴�ч厤缃�"
+ width="600px"
+ append-to-body
+ destroy-on-close
+ >
+ <el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
+ <el-form-item label="灞炴�у悕锛�" prop="name">
+ <el-input v-model="propertyForm.name" clearable />
+ </el-form-item>
+ <el-form-item label="灞炴�у�硷細" prop="value">
+ <el-input v-model="propertyForm.value" clearable />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="propertyFormModelVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="saveAttribute">纭� 瀹�</el-button>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { ElMessageBox } from 'element-plus'
+defineOptions({ name: 'ElementProperties' })
+const props = defineProps({
+ id: String,
+ type: String
+})
+const prefix = inject('prefix')
+// const width = inject('width')
+
+const elementPropertyList = ref<any[]>([])
+const propertyForm = ref<any>({})
+const editingPropertyIndex = ref(-1)
+const propertyFormModelVisible = ref(false)
+const otherExtensionList = ref()
+const bpmnElementProperties = ref()
+const bpmnElementPropertyList = ref()
+const attributeFormRef = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetAttributesList = () => {
+ const instances = bpmnInstances()
+ if (!instances || !instances.bpmnElement) return
+
+ // 鐩存帴浣跨敤鍘熷BPMN鍏冪礌锛岄伩鍏峍ue鍝嶅簲寮忎唬鐞嗛棶棰�
+ const bpmnElement = instances.bpmnElement
+ const businessObject = bpmnElement.businessObject
+
+ otherExtensionList.value = [] // 鍏朵粬鎵╁睍閰嶇疆
+ bpmnElementProperties.value =
+ businessObject?.extensionElements?.values?.filter((ex) => {
+ if (ex.$type !== `${prefix}:Properties`) {
+ otherExtensionList.value.push(ex)
+ }
+ return ex.$type === `${prefix}:Properties`
+ }) ?? []
+
+ // 淇濆瓨鎵�鏈夌殑 鎵╁睍灞炴�у瓧娈�
+ bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
+ (pre, current) => pre.concat(current.values),
+ []
+ )
+ // 澶嶅埗 鏄剧ず
+ elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
+}
+const openAttributesForm = (attr, index) => {
+ editingPropertyIndex.value = index
+ propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
+ propertyFormModelVisible.value = true
+ nextTick(() => {
+ if (attributeFormRef.value) attributeFormRef.value.clearValidate()
+ })
+}
+const removeAttributes = (attr, index) => {
+ console.log(attr, 'attr')
+ ElMessageBox.confirm('纭绉婚櫎璇ュ睘鎬у悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭� 璁�',
+ cancelButtonText: '鍙� 娑�'
+ })
+ .then(() => {
+ elementPropertyList.value.splice(index, 1)
+ bpmnElementPropertyList.value.splice(index, 1)
+ // 鏂板缓涓�涓睘鎬у瓧娈电殑淇濆瓨鍒楄〃
+ const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+ values: bpmnElementPropertyList.value
+ })
+ updateElementExtensions(propertiesObject)
+ resetAttributesList()
+ })
+ .catch(() => console.info('鎿嶄綔鍙栨秷'))
+}
+const saveAttribute = () => {
+ console.log(propertyForm.value, 'propertyForm.value')
+ const { name, value } = propertyForm.value
+ const instances = bpmnInstances()
+ if (!instances || !instances.bpmnElement) return
+
+ const bpmnElement = instances.bpmnElement
+
+ if (editingPropertyIndex.value !== -1) {
+ instances.modeling.updateModdleProperties(
+ bpmnElement,
+ bpmnElementPropertyList.value[editingPropertyIndex.value],
+ {
+ name,
+ value
+ }
+ )
+ } else {
+ // 鏂板缓灞炴�у瓧娈�
+ const newPropertyObject = instances.moddle.create(`${prefix}:Property`, {
+ name,
+ value
+ })
+ // 鏂板缓涓�涓睘鎬у瓧娈电殑淇濆瓨鍒楄〃
+ const propertiesObject = instances.moddle.create(`${prefix}:Properties`, {
+ values: bpmnElementPropertyList.value.concat([newPropertyObject])
+ })
+ updateElementExtensions(propertiesObject)
+ }
+ propertyFormModelVisible.value = false
+ resetAttributesList()
+}
+const updateElementExtensions = (properties) => {
+ const instances = bpmnInstances()
+ if (!instances || !instances.bpmnElement) return
+
+ const bpmnElement = instances.bpmnElement
+ const extensions = instances.moddle.create('bpmn:ExtensionElements', {
+ values: otherExtensionList.value.concat([properties])
+ })
+ instances.modeling.updateProperties(bpmnElement, {
+ extensionElements: extensions
+ })
+}
+
+watch(
+ () => props.id,
+ (val) => {
+ if (val) {
+ val && val.length && resetAttributesList()
+ }
+ },
+ { immediate: true }
+)
+</script>
--
Gitblit v1.8.0