big-model-web/src/views/workflow/instance/component/vars/vars-value.vue

<template>
  <div
    class="flex flex-wrap items-center rounded-sm bg-[#ffffff] px-2 py-1"
    v-if="vars"
  >
    <template v-if="vars.source === VarsSource.Env">
      <SvgIcon name="env_1" color="#7839ee" size="14" class="mr-1" />
    </template>
    <template v-else-if="vars.source === VarsSource.Root">
      <SvgIcon name="earth" color="#fc9009" size="14" class="mr-1" />
    </template>
    <template v-else>
      <SvgIcon name="vars" color="#155aef" size="14" class="mr-1" />
    </template>
    <div class="__text-ellipsis flex-1">
      <span class="text-[12px]">{{
        nodeDataCpt.desc || nodeDataCpt.title
      }}</span>
      / <span class="text-[#155aef]">{{ vars.key }}</span> ·
      <span class="opacity-65">{{ vars.label }}</span>
    </div>
    <span class="opacity-65">{{ vars.type }}</span>
    <span v-if="vars.required" class="text-red-500">*</span>
  </div>
  <div v-else class="opacity-65">{x}请选择变量</div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref } from 'vue'
import { useWorkflowStore } from '@/stores'
import { VarsSource } from '@/views/workflow/types'

const WorkflowStore = useWorkflowStore()
const emit = defineEmits([])
const props = defineProps({
  vars: <any>{},
})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({})
const nodeDataCpt = computed(() => {
  if (props.vars.source === VarsSource.Env) {
    return { title: '环境变量' }
  } else {
    const node = WorkflowStore.graph.getCellById(props.vars?.nodeId)
    return node.data.workflowData
  }
})
</script>

<style lang="scss" scoped></style>