工作流 上下文参数使用++

src/components/common/dynamic-input.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+import {fetchGetSystemVarList} from "@/service/api/system-variable";
+import { onMounted, ref, computed} from 'vue'
+
+onMounted(() => {
+  getSystemVariables();
+});
+
 const content = defineModel<{ key: string; value: string | number | boolean; type: string }[]>('value', {
   required: true,
   default: () => []
@@ -25,6 +32,34 @@ const dynamicInputRule = [
     }
   }
 ];
+const inputValue = ref('');
+const syncOptions = ref([
+  {
+    label: String,
+    value: String
+  }
+]);
+
+const  getSystemVariables = async () =>{
+  const { error,data } = await fetchGetSystemVarList();
+  if (!error) {
+    syncOptions.value = data.map(item => ({
+      label: item.variableName,
+      value: item.variableKey.replace("$",'')
+    }));
+  }
+  console.log("syncOptions"+syncOptions.value[0].value)
+  console.log("syncOptions"+syncOptions.value[0].label)
+};
+
+const filteredOptions = computed(() => {
+  return inputValue.value
+    ? syncOptions.value.filter(opt =>
+      opt.label.includes(inputValue.value) ||
+      opt.value.includes(inputValue.value))
+    : syncOptions.value
+});
+
 
 const typeOptions = [
   {
@@ -87,12 +122,33 @@ const handleUpdateType = (index: number) => {
         :rule="dynamicInputRule"
         :path="`${path}[${index}].value`"
       >
-        <NInput
+<!--        <NInput-->
+<!--          v-if="content[index].type === 'string'"-->
+<!--          v-model:value="content[index].value as string"-->
+<!--          placeholder="value"-->
+<!--          @keydown.enter.prevent-->
+<!--        />-->
+
+        <n-mention
           v-if="content[index].type === 'string'"
           v-model:value="content[index].value as string"
           placeholder="value"
+          :options="syncOptions"
+          default-value="@"
+          :prefix="['$']"
           @keydown.enter.prevent
         />
+        <NPopover trigger="hover"
+                  v-if="content[index].type === 'string'"
+        >
+          <template #trigger>
+            <NButton text>
+              <SvgIcon icon="ant-design:info-circle-outlined" class="text-18px color-blue" />
+            </NButton>
+          </template>
+          输入$提示变量信息
+        </NPopover>
+
         <NInputNumber
           v-if="content[index].type === 'number'"
           v-model:value="content[index].value as number"