Showing
8 changed files
with
90 additions
and
2 deletions
| @@ -125,6 +125,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) { | @@ -125,6 +125,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) { | ||
| 125 | }); | 125 | }); |
| 126 | 126 | ||
| 127 | onNodeDoubleClick(async ({ node }) => { | 127 | onNodeDoubleClick(async ({ node }) => { |
| 128 | + if ((node.data as NodeData).config?.disableAction) return; | ||
| 129 | + | ||
| 128 | const { flag, data } = | 130 | const { flag, data } = |
| 129 | (await unref(updateNodeDrawerActionType)?.open( | 131 | (await unref(updateNodeDrawerActionType)?.open( |
| 130 | toRaw((node as NodeData)?.data as unknown as NodeData) | 132 | toRaw((node as NodeData)?.data as unknown as NodeData) |
| @@ -139,6 +141,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) { | @@ -139,6 +141,8 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) { | ||
| 139 | onEdgeDoubleClick(async ({ edge }) => { | 141 | onEdgeDoubleClick(async ({ edge }) => { |
| 140 | if (!validateHasLabelConnection(edge.sourceNode.data)) return; | 142 | if (!validateHasLabelConnection(edge.sourceNode.data)) return; |
| 141 | 143 | ||
| 144 | + if ((edge.sourceNode.data as NodeData).config?.disableAction) return; | ||
| 145 | + | ||
| 142 | const { flag, data } = | 146 | const { flag, data } = |
| 143 | (await unref(updateEdgeDrawerActionType)?.open( | 147 | (await unref(updateEdgeDrawerActionType)?.open( |
| 144 | toRaw(unref(edge.sourceNode?.data as unknown as NodeData)), | 148 | toRaw(unref(edge.sourceNode?.data as unknown as NodeData)), |
| @@ -66,7 +66,8 @@ | @@ -66,7 +66,8 @@ | ||
| 66 | const getDeleteDisplayState = computed(() => unref(flowActionType.getSelectedElements).length); | 66 | const getDeleteDisplayState = computed(() => unref(flowActionType.getSelectedElements).length); |
| 67 | 67 | ||
| 68 | const handleDeleteSelectionElements = () => { | 68 | const handleDeleteSelectionElements = () => { |
| 69 | - flowActionType.removeSelectedElements(); | 69 | + flowActionType.removeEdges(unref(flowActionType.getSelectedEdges)); |
| 70 | + flowActionType.removeNodes(unref(flowActionType.getSelectedNodes)); | ||
| 70 | }; | 71 | }; |
| 71 | 72 | ||
| 72 | onMounted(() => { | 73 | onMounted(() => { |
| 1 | +<script setup lang="ts"> | ||
| 2 | + import { NodeProps } from '@vue-flow/core'; | ||
| 3 | + import { Icon } from '/@/components/Icon'; | ||
| 4 | + import { Tooltip } from 'ant-design-vue'; | ||
| 5 | + | ||
| 6 | + defineProps<{ | ||
| 7 | + nodeProps?: NodeProps; | ||
| 8 | + }>(); | ||
| 9 | + | ||
| 10 | + const handleClick = () => { | ||
| 11 | + // event.stopPropagation(); | ||
| 12 | + // event.preventDefault(); | ||
| 13 | + // console.log(props); | ||
| 14 | + }; | ||
| 15 | +</script> | ||
| 16 | + | ||
| 17 | +<template> | ||
| 18 | + <div class="w-full h-6 flex justify-end" @click="handleClick"> | ||
| 19 | + <Tooltip color="#fff"> | ||
| 20 | + <template #title> | ||
| 21 | + <span class="text-slate-500 italic">打开规则链</span> | ||
| 22 | + </template> | ||
| 23 | + <Icon | ||
| 24 | + icon="material-symbols:login" | ||
| 25 | + class="cursor-pointer svg:text-lg svg:text-light-50 border-1 border-light-50 bg-purple-400 hover:bg-purple-500 rounded" | ||
| 26 | + /> | ||
| 27 | + </Tooltip> | ||
| 28 | + </div> | ||
| 29 | +</template> |
| @@ -11,6 +11,7 @@ import { RuleNodeTypeEnum } from './index.type'; | @@ -11,6 +11,7 @@ import { RuleNodeTypeEnum } from './index.type'; | ||
| 11 | 11 | ||
| 12 | const createModules = import.meta.glob('../packages/**/create.vue'); | 12 | const createModules = import.meta.glob('../packages/**/create.vue'); |
| 13 | const connectionModules = import.meta.glob('../packages/**/connection.vue'); | 13 | const connectionModules = import.meta.glob('../packages/**/connection.vue'); |
| 14 | +const nodeExtraContentModules = import.meta.glob('../packages/**/node.vue'); | ||
| 14 | 15 | ||
| 15 | const BasicConnectionComponent = { | 16 | const BasicConnectionComponent = { |
| 16 | [BasicConnectionModalEnum.BASIC]: () => | 17 | [BasicConnectionModalEnum.BASIC]: () => |
| @@ -47,8 +48,21 @@ export const fetchCreateComponent = async (config: NodeItemConfigType) => { | @@ -47,8 +48,21 @@ export const fetchCreateComponent = async (config: NodeItemConfigType) => { | ||
| 47 | return fetchNodeComponent(config, FetchNodeComFlagTypeENum.CREATE_MODAL); | 48 | return fetchNodeComponent(config, FetchNodeComFlagTypeENum.CREATE_MODAL); |
| 48 | }; | 49 | }; |
| 49 | 50 | ||
| 51 | +export const fetchNodeExtraContent = async (config: NodeItemConfigType) => { | ||
| 52 | + const { key, categoryType } = config || {}; | ||
| 53 | + const modulesName = Object.keys(nodeExtraContentModules); | ||
| 54 | + const path = modulesName.find((item) => { | ||
| 55 | + const temp = item.split('/'); | ||
| 56 | + const categoryName = temp[temp.length - 3]; | ||
| 57 | + const fileName = temp[temp.length - 2]; | ||
| 58 | + return fileName === key && categoryType.toUpperCase() === categoryName.toUpperCase(); | ||
| 59 | + }); | ||
| 60 | + | ||
| 61 | + return path ? nodeExtraContentModules[path] : null; | ||
| 62 | +}; | ||
| 63 | + | ||
| 50 | export const allComponents: Record< | 64 | export const allComponents: Record< |
| 51 | - RuleNodeTypeEnum, | 65 | + Exclude<RuleNodeTypeEnum, RuleNodeTypeEnum.ENTRY>, |
| 52 | { category: CategoryConfigType; components: NodeItemConfigType[] } | 66 | { category: CategoryConfigType; components: NodeItemConfigType[] } |
| 53 | > = { | 67 | > = { |
| 54 | [RuleNodeTypeEnum.FILTER]: { | 68 | [RuleNodeTypeEnum.FILTER]: { |
| @@ -26,6 +26,8 @@ | @@ -26,6 +26,8 @@ | ||
| 26 | const path = computed(() => getBezierPath(props)); | 26 | const path = computed(() => getBezierPath(props)); |
| 27 | 27 | ||
| 28 | const handleOpenEdit = async () => { | 28 | const handleOpenEdit = async () => { |
| 29 | + if (unref(props.sourceNode.data as NodeData).config?.disableAction) return; | ||
| 30 | + | ||
| 29 | const { flag, data } = | 31 | const { flag, data } = |
| 30 | (await unref(updateEdgeDrawerActionType)?.open( | 32 | (await unref(updateEdgeDrawerActionType)?.open( |
| 31 | toRaw(unref(props.sourceNode?.data as unknown as NodeData)), | 33 | toRaw(unref(props.sourceNode?.data as unknown as NodeData)), |
| @@ -6,6 +6,7 @@ | @@ -6,6 +6,7 @@ | ||
| 6 | import { Icon } from '/@/components/Icon'; | 6 | import { Icon } from '/@/components/Icon'; |
| 7 | import type { NodeData, NodeDefinition } from '../../../types/node'; | 7 | import type { NodeData, NodeDefinition } from '../../../types/node'; |
| 8 | import BasicToolbar from './BasicToolbar.vue'; | 8 | import BasicToolbar from './BasicToolbar.vue'; |
| 9 | + import NodeExtraContent from './NodeExtraContent.vue'; | ||
| 9 | 10 | ||
| 10 | const props = defineProps<NodeProps>(); | 11 | const props = defineProps<NodeProps>(); |
| 11 | 12 | ||
| @@ -73,6 +74,9 @@ | @@ -73,6 +74,9 @@ | ||
| 73 | <span class="text-gray-700 w-full truncate dark:text-light-50">{{ getLabel }}</span> | 74 | <span class="text-gray-700 w-full truncate dark:text-light-50">{{ getLabel }}</span> |
| 74 | <span class="w-full truncate dark:text-neutral-50">{{ getName }}</span> | 75 | <span class="w-full truncate dark:text-neutral-50">{{ getName }}</span> |
| 75 | </div> | 76 | </div> |
| 77 | + <div class="flex-auto"> | ||
| 78 | + <NodeExtraContent :config="getData.config" :nodeProps="$props" /> | ||
| 79 | + </div> | ||
| 76 | <Handle v-if="getHasInEnabled" type="source" :position="Position.Left" /> | 80 | <Handle v-if="getHasInEnabled" type="source" :position="Position.Left" /> |
| 77 | <Handle v-if="getHasOutEnabled" type="source" :position="Position.Right" /> | 81 | <Handle v-if="getHasOutEnabled" type="source" :position="Position.Right" /> |
| 78 | </main> | 82 | </main> |
| 1 | +<script setup lang="ts"> | ||
| 2 | + import { onBeforeMount, ref, shallowRef } from 'vue'; | ||
| 3 | + import { Spin } from 'ant-design-vue'; | ||
| 4 | + import { NodeItemConfigType } from '../../../types/node'; | ||
| 5 | + import { fetchNodeExtraContent } from '../../../packages'; | ||
| 6 | + | ||
| 7 | + const props = defineProps<{ | ||
| 8 | + config?: NodeItemConfigType; | ||
| 9 | + nodeProps?: NodeProps; | ||
| 10 | + }>(); | ||
| 11 | + | ||
| 12 | + const spinning = ref(false); | ||
| 13 | + | ||
| 14 | + const shallowComponent = shallowRef(); | ||
| 15 | + | ||
| 16 | + onBeforeMount(async () => { | ||
| 17 | + spinning.value = true; | ||
| 18 | + const path = await fetchNodeExtraContent(props.config!); | ||
| 19 | + if (!path) spinning.value = false; | ||
| 20 | + const instance = await path?.(); | ||
| 21 | + instance?.default && (shallowComponent.value = instance?.default); | ||
| 22 | + spinning.value = false; | ||
| 23 | + }); | ||
| 24 | +</script> | ||
| 25 | + | ||
| 26 | +<template> | ||
| 27 | + <Spin :spinning="spinning" class="w-full h-full"> | ||
| 28 | + <component :is="shallowComponent" :nodeProps="nodeProps" /> | ||
| 29 | + </Spin> | ||
| 30 | +</template> |