fix(rule): support select placeholder when editing re pub payload

Author: Kinplemelon

src/components/SelectAllowInput.vue

@@ -1,15 +1,20 @@
 <!-- Only one can be selected -->
 <template>
-  <el-autocomplete v-model="inputValue" clearable :fetch-suggestions="querySearch" />
+  <el-autocomplete
+    v-model="inputValue"
+    clearable
+    :fetch-suggestions="querySearch"
+    v-bind="$attrs"
+  />
 </template>
 
 <script setup lang="ts">
-import { isObject, isUndefined } from 'lodash'
+import { escapeRegExp, isObject, isUndefined } from 'lodash'
 import { computed, defineEmits, defineProps, withDefaults } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string
+    modelValue?: string | boolean | number
     options: Array<Record<string, any>> | Array<string> | Array<number>
     valueKey?: string
     labelKey?: string
@@ -21,11 +26,11 @@ const props = withDefaults(
   },
 )
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: string | number | boolean): void
 }>()
 
 const inputValue = computed({
-  get: () => props.modelValue,
+  get: () => props.modelValue?.toString?.(),
   set: (val) => emit('update:modelValue', val),
 })
 
@@ -45,6 +50,20 @@ const opts = computed(() => {
 })
 
 const querySearch = (queryString: string, cb: (arg0: Array<Record<string, any>>) => void) => {
-  cb(opts.value)
+  if (!queryString) {
+    cb(opts.value)
+  } else {
+    const filterReg = new RegExp(escapeRegExp(queryString), 'i')
+    const ret = opts.value.reduce(
+      (arr: Array<{ value: string }>, { value }: { value: string; item: string }) => {
+        if (filterReg.test(value)) {
+          arr.push({ value })
+        }
+        return arr
+      },
+      [] as Array<{ value: string }>,
+    )
+    cb(ret)
+  }
 }
 </script>

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

src/views/RuleEngine/components/RePubForm.vue

@@ -44,6 +44,7 @@
               json-without-validate
               :disabled="readonly"
               :id="createRandomString()"
+              :completion-provider="completionProvider"
             />
           </div>
         </CustomFormItem>
@@ -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]