| 提交 | 用户 | 时间 | ||
| 3e359e | 1 | <template> |
| H | 2 | <div class="node-wrapper"> |
| 3 | <div class="node-container"> | |
| 4 | <div | |
| 5 | class="node-box" | |
| 6 | :class="[ | |
| 7 | { 'node-config-error': !currentNode.showText }, | |
| 8 | `${useTaskStatusClass(currentNode?.activityStatus)}` | |
| 9 | ]" | |
| 10 | > | |
| 11 | <div class="node-title-container"> | |
| 12 | <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div> | |
| 13 | <input | |
| 14 | v-if="!readonly && showInput" | |
| 15 | type="text" | |
| 16 | class="editable-title-input" | |
| 17 | @blur="blurEvent()" | |
| 18 | v-mountedFocus | |
| 19 | v-model="currentNode.name" | |
| 20 | :placeholder="currentNode.name" | |
| 21 | /> | |
| 22 | <div v-else class="node-title" @click="clickTitle"> | |
| 23 | {{ currentNode.name }} | |
| 24 | </div> | |
| 25 | </div> | |
| 26 | <div class="node-content" @click="openNodeConfig"> | |
| 27 | <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText"> | |
| 28 | {{ currentNode.showText }} | |
| 29 | </div> | |
| 30 | <div class="node-text" v-else> | |
| 31 | {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }} | |
| 32 | </div> | |
| 33 | <Icon v-if="!readonly" icon="ep:arrow-right-bold" /> | |
| 34 | </div> | |
| 35 | <div v-if="!readonly" class="node-toolbar"> | |
| 36 | <div class="toolbar-icon" | |
| 37 | ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode" | |
| 38 | /></div> | |
| 39 | </div> | |
| 40 | </div> | |
| 41 | ||
| 42 | <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 --> | |
| 43 | <NodeHandler | |
| 44 | v-if="currentNode" | |
| 45 | v-model:child-node="currentNode.childNode" | |
| 46 | :current-node="currentNode" | |
| 47 | /> | |
| 48 | </div> | |
| 49 | <CopyTaskNodeConfig | |
| 50 | v-if="!readonly && currentNode" | |
| 51 | ref="nodeSetting" | |
| 52 | :flow-node="currentNode" | |
| 53 | /> | |
| 54 | </div> | |
| 55 | </template> | |
| 56 | <script setup lang="ts"> | |
| 57 | import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts' | |
| 58 | import NodeHandler from '../NodeHandler.vue' | |
| 59 | import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node' | |
| 60 | import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue' | |
| 61 | defineOptions({ | |
| 62 | name: 'CopyTaskNode' | |
| 63 | }) | |
| 64 | const props = defineProps({ | |
| 65 | flowNode: { | |
| 66 | type: Object as () => SimpleFlowNode, | |
| 67 | required: true | |
| 68 | } | |
| 69 | }) | |
| 70 | // 定义事件，更新父组件。 | |
| 71 | const emits = defineEmits<{ | |
| 72 | 'update:flowNode': [node: SimpleFlowNode | undefined] | |
| 73 | }>() | |
| 74 | // 是否只读 | |
| 75 | const readonly = inject<Boolean>('readonly') | |
| 76 | // 监控节点的变化 | |
| 77 | const currentNode = useWatchNode(props) | |
| 78 | // 节点名称编辑 | |
| 79 | const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.COPY_TASK_NODE) | |
| 80 | ||
| 81 | const nodeSetting = ref() | |
| 82 | // 打开节点配置 | |
| 83 | const openNodeConfig = () => { | |
| 84 | if (readonly) { | |
| 85 | return | |
| 86 | } | |
| 87 | nodeSetting.value.showCopyTaskNodeConfig(currentNode.value) | |
| 88 | nodeSetting.value.openDrawer() | |
| 89 | } | |
| 90 | ||
| 91 | // 删除节点。更新当前节点为孩子节点 | |
| 92 | const deleteNode = () => { | |
| 93 | emits('update:flowNode', currentNode.value.childNode) | |
| 94 | } | |
| 95 | </script> | |
| 96 | ||
| 97 | <style lang="scss" scoped></style> | |
