From 0b1f4d14dfeac85982c28fe7c75d112fb606d9f8 Mon Sep 17 00:00:00 2001 From: Kinplemelon Date: Wed, 12 Jun 2024 09:55:25 +0800 Subject: [PATCH 1/2] feat(placeholder select): support custom placeholder --- src/components/InputWithPlaceholderSelect.vue | 6 ++++-- src/hooks/Rule/bridge/useComponentsHandlers.ts | 18 ++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/InputWithPlaceholderSelect.vue b/src/components/InputWithPlaceholderSelect.vue index 99d3a5319..88a458f89 100644 --- a/src/components/InputWithPlaceholderSelect.vue +++ b/src/components/InputWithPlaceholderSelect.vue @@ -26,7 +26,8 @@ import useSQLAvailablePlaceholder from '@/hooks/Rule/useSQLAvailablePlaceholder' import { escapeRegExp } from 'lodash' import { computed, defineEmits, defineProps, ref, watch } from 'vue' -const props = defineProps<{ modelValue?: string; [key: string]: any }>() +const props = + defineProps<{ modelValue?: string; [key: string]: any; customPlaceholders?: Array }>() const emit = defineEmits<{ (e: 'update:modelValue', v: string): void (e: 'input', v: any): void @@ -50,7 +51,8 @@ const fetchSuggestions = (queryString: string, cb: any) => { let ret: Array<{ value: string }> = [] if (matchPart) { const filterReg = new RegExp(escapeRegExp(matchPart), 'i') - ret = availablePlaceholders.value.reduce((arr, value) => { + const availableList = props.customPlaceholders || availablePlaceholders.value + ret = availableList.reduce((arr: Array<{ value: string }>, value: string) => { if (filterReg.test(value)) { arr.push({ value }) } diff --git a/src/hooks/Rule/bridge/useComponentsHandlers.ts b/src/hooks/Rule/bridge/useComponentsHandlers.ts index 04d9e84c5..1203e667d 100644 --- a/src/hooks/Rule/bridge/useComponentsHandlers.ts +++ b/src/hooks/Rule/bridge/useComponentsHandlers.ts @@ -56,6 +56,10 @@ export default ( }, []) } + const setComponentProps = (prop: Property, componentProps: Record) => { + prop.componentProps = Object.assign(prop.componentProps || {}, componentProps) + } + const { completionProvider } = useAvailableProviders() const handleProp = (parm: Property) => { @@ -69,15 +73,9 @@ export default ( prop.format === 'sql' && prop.is_template ) { - if (!prop.componentProps) { - prop.componentProps = {} - } - prop.componentProps.completionProvider = completionProvider + setComponentProps(prop, { completionProvider }) } else if (prop.type === 'object' && !prop.properties && prop.is_template) { - if (!prop.componentProps) { - prop.componentProps = {} - } - prop.componentProps.supportPlaceholder = ['key', 'value'] + setComponentProps(prop, { supportPlaceholder: ['key', 'value'] }) } } @@ -114,12 +112,12 @@ export default ( if (qos?.type === 'oneof') { qos.type = 'enum' qos.symbols = [...(getSymbolsFromOneOfArr(qos.oneOf) || []), '${qos}'] - qos.componentProps = { filterable: true, allowCreate: true } + setComponentProps(qos, { filterable: true, allowCreate: true }) } if (retain?.type === 'oneof') { retain.type = 'enum' retain.symbols = [true, false, '${flags.retain}'] - retain.componentProps = { filterable: true, allowCreate: true } + setComponentProps(retain, { filterable: true, allowCreate: true }) } // for detect whether it is source or action if (topic && !payload) { From c8a17e7934c360f214e6a09841226e507b8297e0 Mon Sep 17 00:00:00 2001 From: Kinplemelon Date: Wed, 12 Jun 2024 10:42:51 +0800 Subject: [PATCH 2/2] fix(rule): support select placeholder when editing re pub payload --- src/components/SelectAllowInput.vue | 31 +++++++++++++++---- .../Rule/bridge/useComponentsHandlers.ts | 10 ++++-- src/views/RuleEngine/components/RePubForm.vue | 5 ++- 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/src/components/SelectAllowInput.vue b/src/components/SelectAllowInput.vue index 2c6861786..6f0ce8a9a 100644 --- a/src/components/SelectAllowInput.vue +++ b/src/components/SelectAllowInput.vue @@ -1,15 +1,20 @@ diff --git a/src/hooks/Rule/bridge/useComponentsHandlers.ts b/src/hooks/Rule/bridge/useComponentsHandlers.ts index 1203e667d..6eb4a416d 100644 --- a/src/hooks/Rule/bridge/useComponentsHandlers.ts +++ b/src/hooks/Rule/bridge/useComponentsHandlers.ts @@ -5,6 +5,7 @@ import { BridgeType } from '@/types/enum' import { Properties, Property } from '@/types/schemaForm' import { pick } from 'lodash' import { useAvailableProviders } from '../useProvidersForMonaco' +import useSQLAvailablePlaceholder from '../useSQLAvailablePlaceholder' type Handler = ({ components, rules }: { components: Properties; rules: SchemaRules }) => { components: Properties @@ -60,6 +61,7 @@ export default ( prop.componentProps = Object.assign(prop.componentProps || {}, componentProps) } + const { availablePlaceholders } = useSQLAvailablePlaceholder() const { completionProvider } = useAvailableProviders() const handleProp = (parm: Property) => { @@ -111,12 +113,16 @@ export default ( const { qos, retain, payload, topic } = components?.parameters?.properties || {} if (qos?.type === 'oneof') { qos.type = 'enum' - qos.symbols = [...(getSymbolsFromOneOfArr(qos.oneOf) || []), '${qos}'] + qos.symbols = [ + ...(getSymbolsFromOneOfArr(qos.oneOf) || []), + '${qos}', + ...availablePlaceholders.value, + ] setComponentProps(qos, { filterable: true, allowCreate: true }) } if (retain?.type === 'oneof') { retain.type = 'enum' - retain.symbols = [true, false, '${flags.retain}'] + retain.symbols = [true, false, '${flags.retain}', ...availablePlaceholders.value] setComponentProps(retain, { filterable: true, allowCreate: true }) } // for detect whether it is source or action diff --git a/src/views/RuleEngine/components/RePubForm.vue b/src/views/RuleEngine/components/RePubForm.vue index f403ffe83..2fec915f5 100644 --- a/src/views/RuleEngine/components/RePubForm.vue +++ b/src/views/RuleEngine/components/RePubForm.vue @@ -44,6 +44,7 @@ json-without-validate :disabled="readonly" :id="createRandomString()" + :completion-provider="completionProvider" /> @@ -137,8 +138,9 @@ import { QoSOptions as defaultQoSOptions } from '@/common/constants' import { createRandomString } from '@/common/tools' import CustomFormItem from '@/components/CustomFormItem.vue' import FormItemLabel from '@/components/FormItemLabel.vue' -import Monaco from '@/components/Monaco.vue' import SelectAllowInput from '@/components/SelectAllowInput.vue' +import Monaco from '@/components/Monaco.vue' +import { useAvailableProviders } from '@/hooks/Rule/useProvidersForMonaco' import useSQLAvailablePlaceholder from '@/hooks/Rule/useSQLAvailablePlaceholder' import useFormRules from '@/hooks/useFormRules' import useI18nTl from '@/hooks/useI18nTl' @@ -188,6 +190,7 @@ const togglePubPropsEnabled = (val: string | number | boolean) => { } const { availablePlaceholders } = useSQLAvailablePlaceholder() +const { completionProvider } = useAvailableProviders() const QoSOptions = [...defaultQoSOptions, '${qos}', ...availablePlaceholders.value]