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