ruoyi-vue-pro/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue

<template>
  <div class="panel-tab__content">
    <div class="element-property input-property">
      <div class="element-property__label">元素文档：</div>
      <div class="element-property__value">
        <el-input
          type="textarea"
          v-model="documentation"
          resize="vertical"
          :autosize="{ minRows: 2, maxRows: 4 }"
          @input="updateDocumentation"
          @blur="updateDocumentation"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ElementOtherConfig">
import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
import { ElInput } from 'element-plus'
const props = defineProps({
  id: String
})
const documentation = ref('')
const bpmnElement = ref()
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) {
    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 = window.bpmnInstances.elementRegistry.get(props.id))
  const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
    text: documentation.value
  })
  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
    documentation: [documentations]
  })
}
onBeforeUnmount(() => {
  bpmnElement.value = null
})

watch(
  () => props.id,
  (id) => {
    if (id && id.length) {
      nextTick(() => {
        const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation
        documentation.value = documentations && documentations.length ? documentations[0].text : ''
      })
    } else {
      documentation.value = ''
    }
  },
  { immediate: true }
)
</script>