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> |