SCADATrainSys/src/components/business/EasyProcess/node/voice_node.vue

<template>
  <div class="flex flex-row items-center gap-2">
    <Icon :icon="getIcon" :width="26" :height="26"></Icon>
    <div>{{ nodeData?.name || '' }}</div>
  </div>
</template>
<script setup lang="ts">
  import { getNodeRole, ProcessConstant } from '../common/process.data'
  import { ProcessValidator } from '../common/process.helper'
  import { Process } from '../common/process.type'

  const props = withDefaults(defineProps<{ node: Process.VoiceNode }>(), {})
  const nodeData = ref<Record<string, unknown>>(props.node.nodeData || {})
  watch(
    () => props.node.nodeData,
    (newVal) => {
      nodeData.value = newVal || {}
      console.log('nodeData.value', nodeData.value)
    }
  )
  const getIcon = computed(() => `svg:${getNodeRole(String(nodeData.value?.bindRole) || '')}`)

  const validate = inject<ProcessValidator>(ProcessConstant.KEY_PROCESS_VALIDATOR)

  validate?.register(props.node.nodeId, () => {
    const messages: string[] = []
    if (!nodeData.value?.name) {
      messages.push('请输入语音节点名称')
    }
    if (!nodeData.value?.bindRole) {
      messages.push('请选择语音节点角色')
    }
    return { valid: messages.length === 0, message: messages.join(',') }
  })
</script>