feat: 实现过滤器所有节点

@@ -16,6 +16,7 @@
     "inited",
     "liveui",
     "MQTT",
+    "noconflict",
     "notif",
     "PROTOBUF",
     "rtsp",

@@ -58,6 +58,7 @@
     "flv.js": "^1.6.2",
     "hls.js": "^1.0.10",
     "intro.js": "^4.1.0",
+    "js-beautify": "^1.14.9",
     "jsoneditor": "^9.7.2",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",

+import { DeviceInfoItemType } from './model';
+import { TBPaginationResult } from '/#/axios';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  GET_DEVICE_INFOS = '/tenant/deviceInfos',
+}
+
+export const getDeviceInfos = () => {
+  return defHttp.get<TBPaginationResult<DeviceInfoItemType>>(
+    {
+      url: Api.GET_DEVICE_INFOS,
+    },
+    { joinPrefix: false }
+  );
+};

+export interface DeviceInfoItemType {
+  id: Id;
+  createdTime: number;
+  additionalInfo: AdditionalInfo;
+  tenantId: Id;
+  customerId: Id;
+  name: string;
+  type: string;
+  label: string;
+  deviceProfileId: Id;
+  deviceData: DeviceData;
+  firmwareId: any;
+  softwareId: any;
+  customerTitle: any;
+  customerIsPublic: boolean;
+  deviceProfileName: string;
+}
+
+export interface Id {
+  entityType: string;
+  id: string;
+}
+
+export interface DeviceData {
+  configuration: Configuration;
+  transportConfiguration: TransportConfiguration;
+}
+
+export interface AdditionalInfo {
+  gateway: boolean;
+  description: string;
+  overwriteActivityTime: boolean;
+}
+export interface Configuration {
+  type: string;
+}
+
+export interface TransportConfiguration {
+  type: string;
+}

 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import JSONEditor, { JSONEditorOptions } from 'jsoneditor';
-  import 'jsoneditor/dist/jsoneditor.min.css';
-  import { unref } from 'vue';
-  import { onMounted } from 'vue';
-  import { computed } from '@vue/reactivity';
-  import { onUnmounted } from 'vue';
+  import { onMounted, computed, onUnmounted, unref, ref, watch } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { useFullscreen } from '@vueuse/core';
+  import { isNumber, isObject, isString } from '/@/utils/is';
+  import AceEditor, { Ace } from 'ace-builds';
+  import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
+  import githubTheme from 'ace-builds/src-noconflict/theme-github?url';
+  import 'ace-builds/src-noconflict/mode-json';
 
   enum EventEnum {
     UPDATE_VALUE = 'update:value',
@@ -16,89 +18,133 @@
 
   const props = withDefaults(
     defineProps<{
-      value?: string;
-      options?: JSONEditorOptions;
-      height?: number;
+      value?: string | Recordable;
+      height?: number | string;
+      title?: string;
+      disabled?: boolean;
     }>(),
     {
-      options: () =>
-        ({
-          mode: 'code',
-          mainMenuBar: false,
-          statusBar: false,
-        } as JSONEditorOptions),
       height: 150,
     }
   );
 
   const emit = defineEmits<{
-    (e: EventEnum.UPDATE_VALUE, value: any, instance?: JSONEditor): void;
-    (e: EventEnum.CHANGE, value: any, instance?: JSONEditor): void;
-    (e: EventEnum.BLUR, event: Event, instance?: JSONEditor): void;
-    (e: EventEnum.FOCUS, event: Event, instance?: JSONEditor): void;
+    (e: EventEnum.UPDATE_VALUE, value: any, instance?: Ace.Editor): void;
+    (e: EventEnum.CHANGE, value: any, instance?: Ace.Editor): void;
+    (e: EventEnum.BLUR, event: Event, instance?: Ace.Editor): void;
+    (e: EventEnum.FOCUS, event: Event, instance?: Ace.Editor): void;
   }>();
 
   const jsonEditorElRef = ref<Nullable<any>>();
 
-  const editoreRef = ref<JSONEditor>();
+  const editoreRef = ref<Ace.Editor>();
 
   const isFocus = ref(false);
 
-  const handleChange = (value: any) => {
+  const handleOnChange = () => {
+    const value = get();
     emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef));
     emit(EventEnum.CHANGE, value, unref(editoreRef));
   };
 
-  const handleEmit = (event: Event, key: EventEnum) => {
-    emit(key as EventEnum[keyof EventEnum], event, unref(editoreRef));
+  const handleOnBlur = (event: Event) => {
+    isFocus.value = false;
+    emit(EventEnum.BLUR, event, unref(editoreRef));
   };
 
-  const getOptions = computed(() => {
-    const { options } = props;
-    return {
-      ...options,
-      onChangeText: handleChange,
-      onBlur: (event: Event) => {
-        isFocus.value = false;
-        handleEmit(event, EventEnum.BLUR);
-      },
-      onFocus: (event: Event) => {
-        isFocus.value = true;
-        handleEmit(event, EventEnum.FOCUS);
-      },
-    } as JSONEditorOptions;
-  });
+  const handleOnFocus = (event: Event) => {
+    isFocus.value = true;
+    emit(EventEnum.FOCUS, event, unref(editoreRef));
+  };
+
+  const getFormatValue = (value: Recordable | string = '') => {
+    return isObject(value) ? JSON.stringify(value, null, 2) : value;
+  };
 
   const initialize = () => {
-    editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions));
+    AceEditor.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
+    AceEditor.config.setModuleUrl('ace/theme/github', githubTheme);
+    const editor = AceEditor.edit(unref(jsonEditorElRef)!, {
+      mode: 'ace/mode/json',
+    });
+    editor.setTheme('ace/theme/github');
+    editor.setOptions({
+      fontSize: 14,
+    });
+
+    editor.on('change', handleOnChange);
+    editor.on('blur', handleOnBlur);
+    editor.on('focus', handleOnFocus);
+
+    editoreRef.value = editor;
+    unref(editoreRef)?.setValue(getFormatValue(props.value), 1);
+    unref(editoreRef)?.setReadOnly(props.disabled);
   };
 
   watch(
     () => props.value,
     (target) => {
-      if (unref(isFocus)) return;
-      unref(editoreRef)?.setText(target || '');
+      // const position = unref(editoreRef)?.getCursorPosition();
+      unref(editoreRef)?.setValue(getFormatValue(target));
+      unref(editoreRef)?.clearSelection();
+      // position && unref(editoreRef)?.moveCursorToPosition(position!);
     },
     {
       immediate: true,
     }
   );
 
+  watch(
+    () => props.disabled,
+    (value) => {
+      unref(editoreRef)?.setReadOnly(value);
+    }
+  );
+
   const get = (): string => {
-    return unref(editoreRef)?.getText() || '';
+    return unref(editoreRef)?.getValue() || '';
   };
 
   const set = (data: any) => {
-    return unref(editoreRef)?.set(data);
+    return unref(editoreRef)?.setValue(getFormatValue(data));
   };
 
   onMounted(() => {
     initialize();
-    unref(editoreRef)?.setText(props.value || '');
+    unref(editoreRef)?.setValue(getFormatValue(props.value));
   });
 
   onUnmounted(() => {
+    unref(editoreRef)?.off('change', handleOnChange);
+    unref(editoreRef)?.off('blur', handleOnBlur);
+    unref(editoreRef)?.off('focus', handleOnFocus);
     unref(editoreRef)?.destroy();
+    unref(editoreRef)?.container.remove();
+  });
+
+  const handleFormat = () => {
+    const value = get();
+    if (isString(value) && !value) return;
+    unref(editoreRef)?.setValue(JSON.stringify(JSON.parse(value), null, 2));
+    unref(editoreRef)?.clearSelection();
+  };
+
+  const handleCompress = () => {
+    const value = get();
+    if (isString(value) && !value) return;
+    unref(editoreRef)?.setValue(JSON.stringify(JSON.parse(value)));
+    unref(editoreRef)?.clearSelection();
+  };
+
+  const jsonEditorContainerElRef = ref<Nullable<HTMLDivElement>>();
+  const { isFullscreen, isSupported, toggle } = useFullscreen(jsonEditorContainerElRef);
+  const handleFullScreen = () => {
+    toggle();
+  };
+
+  const getHeight = computed(() => {
+    const { height } = props;
+    return isNumber(height) ? `${height}px` : height;
   });
 
   defineExpose({
@@ -108,22 +154,41 @@
 </script>
 
 <template>
-  <div class="p-2 bg-gray-200" :style="{ height: `${height}px` }">
-    <div ref="jsonEditorElRef" class="jsoneditor"></div>
+  <div
+    ref="jsonEditorContainerElRef"
+    class="p-2 bg-gray-200 flex flex-col"
+    :style="{ height: getHeight }"
+  >
+    <div class="w-full h-8 flex justify-between items-center">
+      <div>
+        {{ title }}
+      </div>
+      <slot name="header"></slot>
+      <div class="flex h-8 gap-3 justify-end items-center text-dark-500 svg:text-2xl">
+        <slot name="beforeFormat"></slot>
+        <Tooltip title="整洁">
+          <Icon @click="handleFormat" class="cursor-pointer" icon="gg:format-left" />
+        </Tooltip>
+        <slot name="beforeCompress"></slot>
+
+        <Tooltip title="迷你">
+          <Icon @click="handleCompress" class="cursor-pointer" icon="material-symbols:compress" />
+        </Tooltip>
+        <slot name="beforeFullScreen"></slot>
+
+        <Tooltip title="全屏">
+          <Icon
+            v-if="isSupported"
+            class="cursor-pointer"
+            :icon="
+              isFullscreen ? 'material-symbols:fullscreen-exit' : 'material-symbols:fullscreen'
+            "
+            @click="handleFullScreen"
+          />
+        </Tooltip>
+        <slot name="afterFullScreen"></slot>
+      </div>
+    </div>
+    <div ref="jsonEditorElRef" class="flex-auto"></div>
   </div>
 </template>
-
-<style lang="less" scoped>
-  .jsoneditor {
-    border: none !important;
-
-    :deep(.jsoneditor) {
-      border: none !important;
-
-      .ace-jsoneditor,
-      textarea.jsoneditor-text {
-        min-height: auto;
-      }
-    }
-  }
-</style>

@@ -13,6 +13,7 @@ export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as ApiUpload } from './src/components/ApiUpload.vue';
 
 export { default as StructForm } from './src/externalCompns/components/StructForm/StructForm.vue';
+export { default as JavaScriptFunctionEditor } from './src/components/JavaScriptFunctionEditor.vue';
 
 //注册自定义组件
 export {

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
   import { ref, watchEffect, computed, unref, watch, reactive } from 'vue';
   import { Select, Spin } from 'ant-design-vue';
-  import { isFunction } from '/@/utils/is';
+  import { isFunction, isNullAndUnDef } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { get, omit } from 'lodash-es';
@@ -30,8 +30,11 @@
       labelField?: string;
       valueField?: string;
       immediate?: boolean;
-      pagenation?: Pagination;
+      searchField?: string;
+      pagination?: Pagination;
       queryEmptyDataAgin?: boolean;
+      fetchSearch?: boolean;
+      filterOption?: (inputValue: string, options: Recordable) => boolean;
     }>(),
     {
       resultField: '',
@@ -39,14 +42,15 @@
       valueField: 'value',
       immediate: true,
       queryEmptyDataAgin: true,
-      pagenation: () => ({ page: 1, pageSize: 10 }),
+      pagination: () => ({ page: 1, pageSize: 10 }),
+      fetchSearch: false,
     }
   );
 
   const OptionsItem = (_, { attrs }: { attrs: { vNode: any } }) => attrs.vNode;
 
   const options = ref<OptionsItem[]>([]);
-  const pagination = reactive(Object.assign({ total: 0, page: 1, pageSize: 10 }, props.pagenation));
+  const pagination = reactive<Record<'total' | 'page' | 'pageSize', number>>({} as any);
   const scrollLoading = ref(false);
   const lock = ref(false);
   const loading = ref(false);
@@ -55,6 +59,13 @@
   const attrs = useAttrs();
   const { t } = useI18n();
 
+  const getPagination = computed(() => {
+    return {
+      ...props.pagination,
+      ...unref(pagination),
+    };
+  });
+
   // Embedded in the form, just use the hook binding to perform form verification
   const [state] = useRuleFormItem(props, 'value', 'change', emitData);
 
@@ -86,16 +97,18 @@
     { deep: true }
   );
 
-  async function fetch() {
-    const api = props.api;
+  async function fetch(searchText?: string) {
+    const { api, searchField, fetchSearch } = props;
     if (!api || !isFunction(api)) return;
+    const isFetchSearchFlag = fetchSearch && !isNullAndUnDef(searchText) && searchField;
     try {
       !unref(getOptions).length ? (loading.value = true) : (scrollLoading.value = true);
       lock.value = true;
       const { total, items } = await api({
         ...props.params,
-        page: pagination.page,
-        pageSize: pagination.pageSize,
+        page: unref(getPagination).page,
+        pageSize: unref(getPagination).pageSize,
+        ...(isFetchSearchFlag ? { [searchField!]: searchText } : {}),
       });
 
       pagination.total = total;
@@ -105,11 +118,13 @@
         return;
       }
       if (props.resultField) {
-        options.value = [...options.value, ...(get(items, props.resultField) || [])];
+        options.value = isFetchSearchFlag
+          ? get(items, props.resultField) || []
+          : [...options.value, ...(get(items, props.resultField) || [])];
       }
       emitChange();
     } catch (error) {
-      pagination.page = Math.ceil(unref(getOptions).length / pagination.pageSize);
+      pagination.page = Math.ceil(unref(getOptions).length / unref(getPagination).pageSize);
       console.warn(error);
     } finally {
       isFirstLoad.value = false;
@@ -134,17 +149,39 @@
     emitData.value = args;
   }
 
+  const sleep = async (number: number) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(number);
+      }, number);
+    });
+  };
+
   async function handlePopupScroll(event: MouseEvent) {
     const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLDivElement;
     if (scrollTop + clientHeight >= scrollHeight) {
-      if (unref(getOptions).length < pagination.total && !unref(lock)) {
-        pagination.page = pagination.page + 1;
+      if (unref(getOptions).length < unref(getPagination).total && !unref(lock)) {
+        pagination.page = unref(getPagination).page + 1;
+        scrollLoading.value = true;
+        await sleep(500);
         await fetch();
       }
     }
   }
 
   const debounceHandlePopupScroll = useDebounceFn(handlePopupScroll, 100);
+
+  const handleFilterOption = async (inputValue: string, option: Recordable) => {
+    const { filterOption, fetchSearch } = props;
+    if (filterOption && isFunction(filterOption)) {
+      filterOption?.(inputValue, option);
+      return;
+    }
+
+    if (fetchSearch) {
+      await fetch(inputValue);
+    }
+  };
 </script>
 
 <template>
@@ -153,6 +190,8 @@
     v-bind="attrs"
     @change="handleChange"
     :options="getOptions"
+    :filterOption="handleFilterOption"
+    :showSearch="true"
     v-model:value="state"
     @popup-scroll="debounceHandlePopupScroll"
   >

+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+  import { computed, onMounted, onUnmounted, ref, shallowRef, unref, watch } from 'vue';
+  import AceEditor, { Ace } from 'ace-builds';
+  import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
+  import githubTheme from 'ace-builds/src-noconflict/theme-github?url';
+  import 'ace-builds/src-noconflict/mode-javascript';
+  import 'ace-builds/src-noconflict/ext-searchbox';
+  import 'ace-builds/src-noconflict/ext-language_tools';
+  import 'ace-builds/src-noconflict/snippets/javascript';
+  import { useBeautify } from '/@/hooks/business/useBeautify';
+  import { useFullscreen } from '@vueuse/core';
+  import { isNumber } from '/@/utils/is';
+
+  const emit = defineEmits(['update:value', 'focus', 'blur']);
+  const props = withDefaults(
+    defineProps<{
+      functionName?: string;
+      paramsName?: string[];
+      height?: number | string;
+      value?: string;
+      disabled?: boolean;
+      validateStatus?: boolean;
+    }>(),
+    {
+      functionName: 'method',
+      paramsName: () => [],
+      height: 200,
+      value: '',
+    }
+  );
+
+  const getHeight = computed(() => {
+    const { height } = props;
+    return isNumber(height) ? `${height}px` : height;
+  });
+
+  const javaScriptEditorElRef = ref<Nullable<HTMLDivElement>>();
+  const editorInstance = shallowRef<Ace.Editor>();
+  const isFocus = ref(false);
+
+  const handleFocus = () => {
+    isFocus.value = true;
+    emit('focus', unref(editorInstance));
+  };
+
+  const handleBlur = () => {
+    isFocus.value = false;
+    emit('update:value', get());
+    emit('blur', unref(editorInstance));
+  };
+
+  const handleChange = () => {
+    emit('update:value', get());
+  };
+
+  const initEditor = () => {
+    AceEditor.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
+    AceEditor.config.setModuleUrl('ace/theme/github', githubTheme);
+    const editor = AceEditor.edit(unref(javaScriptEditorElRef)!, {
+      mode: 'ace/mode/javascript',
+    });
+    editor.setTheme('ace/theme/github');
+    editor.setOptions({
+      fontSize: 14,
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true,
+    });
+
+    editor.on('focus', handleFocus);
+    editor.on('blur', handleBlur);
+    editor.on('change', handleChange);
+    editorInstance.value = editor;
+    editor.setValue(props.value);
+    editor?.clearSelection();
+    unref(editorInstance)?.setReadOnly(props.disabled);
+  };
+
+  const get = () => {
+    return unref(editorInstance)?.getValue();
+  };
+
+  const set = (val: string, cursorPos?: number) => {
+    return unref(editorInstance)?.setValue(val, cursorPos);
+  };
+
+  onMounted(() => {
+    initEditor();
+  });
+
+  onUnmounted(() => {
+    unref(editorInstance)?.off('change', handleChange);
+    unref(editorInstance)?.off('focus', handleFocus);
+    unref(editorInstance)?.off('blur', handleBlur);
+    unref(editorInstance)?.destroy();
+    unref(editorInstance)?.container.remove();
+  });
+
+  const { beautifyJs } = useBeautify();
+  const handleFormatCode = async () => {
+    const res = await beautifyJs(get() || '', { indent_size: 4, wrap_line_length: 60 });
+    set(res || '', -1);
+  };
+
+  const jsFunctionContainerElRef = ref<Nullable<HTMLDivElement>>();
+  const { isFullscreen, isSupported, toggle } = useFullscreen(jsFunctionContainerElRef);
+  const handleFullScreen = () => {
+    toggle();
+  };
+
+  watch(
+    () => props.value,
+    (value) => {
+      // const position = unref(editorInstance)?.getCursorPosition();
+      if (unref(isFocus)) return;
+      set(value);
+      unref(editorInstance)?.clearSelection();
+      // position && unref(editorInstance)?.moveCursorToPosition(position!);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(
+    () => props.disabled,
+    (value) => {
+      unref(editorInstance)?.setReadOnly(value);
+    }
+  );
+
+  defineExpose({
+    get,
+    set,
+  });
+</script>
+
+<template>
+  <section
+    ref="jsFunctionContainerElRef"
+    class="p-2 bg-gray-200 flex flex-col"
+    :style="{ height: getHeight }"
+  >
+    <head class="flex justify-between h-8 items-center">
+      <div class="font-bold">
+        <span>function</span>
+        <span class="ml-1">{{ functionName }}</span>
+        <span>({{ paramsName.join(',') }})</span>
+        <span class="ml-1">{</span>
+      </div>
+      <div class="flex gap-3 items-center svg:text-2xl">
+        <slot name="beforeFormat"></slot>
+
+        <Tooltip title="整洁">
+          <Icon class="cursor-pointer" icon="gg:format-left" @click="handleFormatCode" />
+        </Tooltip>
+        <slot name="beforeFullScreen"></slot>
+        <Tooltip title="全屏">
+          <Icon
+            v-if="isSupported"
+            class="cursor-pointer"
+            :icon="
+              isFullscreen ? 'material-symbols:fullscreen-exit' : 'material-symbols:fullscreen'
+            "
+            @click="handleFullScreen"
+          />
+        </Tooltip>
+        <slot name="afterFullScreen"></slot>
+      </div>
+    </head>
+    <main ref="javaScriptEditorElRef" class="flex-auto"> </main>
+    <footer class="font-bold">}</footer>
+  </section>
+</template>

@@ -130,4 +130,6 @@ export type ComponentType =
   | 'ControlGroup'
   | 'JSONEditor'
   | 'OrgTreeSelect'
-  | 'ExtendDesc';
+  | 'ExtendDesc'
+  | 'JavaScriptFunctionEditor'
+  | 'JavaScriptFilterFunctionModal';

@@ -19,4 +19,8 @@ export enum DictEnum {
   DISABLE_CUSTOMER_AUTH = 'disabled_customer_auth',
   // 寄存器数据格式
   REGISTER_DATA_FORMAT = 'register_data_format',
+  // 消息类型 规则节点 Filter message type switch
+  MESSAGE_TYPES_FILTER = 'message_types_filter',
+  // 实体类型 规则节点 Filter originator types switch
+  ORIGINATOR_TYPES = 'originator_types',
 }

+import { saveOrEditDictItem } from '/@/api/system/dict';
+import { SysDictItem } from '/@/api/system/model/dictModel';
+
+interface BatchSettingParamsType {
+  dictId: string;
+  list: any[];
+  transformText: (item: any) => any;
+  transformValue: (item: any) => any;
+  update?: boolean;
+}
+
+export function useBatchSettingDict() {
+  const batchSetting = async (options: BatchSettingParamsType) => {
+    const { dictId, list, transformText, transformValue, update = false } = options;
+    if (!transformText || !transformValue) return;
+    let index = 1;
+    for (const item of list) {
+      const params: Partial<SysDictItem> & { dictId: string } = {
+        dictId,
+        sort: index++,
+        status: 1,
+        itemText: transformText(item),
+        itemValue: transformValue(item),
+      };
+
+      await saveOrEditDictItem(params as SysDictItem, update);
+    }
+  };
+
+  const batchDelete = () => {};
+
+  return {
+    batchSetting,
+    batchDelete,
+  };
+}

+export function useBeautify() {
+  let jsBeautifyModule: any;
+
+  async function loadJsBeautify() {
+    if (jsBeautifyModule) return jsBeautifyModule;
+    jsBeautifyModule = await import('js-beautify/js/lib/beautifier');
+    return jsBeautifyModule;
+  }
+
+  async function beautifyJs(source: string, options?: any) {
+    const module = await loadJsBeautify();
+    return module.js(source, options);
+  }
+  return { beautifyJs };
+}

+import { isObject, isString } from '/@/utils/is';
+
+export function useJsonParse(value: any, defaultValue = {}) {
+  let flag = false;
+  try {
+    value = JSON.parse(value);
+    if (isObject(value) || (isString(value) && value.trim() === '')) flag = true;
+  } catch (error) {
+    value = defaultValue;
+  }
+  return { flag, value };
+}

@@ -91,7 +91,7 @@ export const formSchema: FormSchema[] = [
     valueField: 'fileList',
     componentProps: () => {
       return {
-        listType: 'picture-card',
+        // listType: 'picture-card',
         maxFileLimit: 1,
         api: async (file: File) => {
           try {
@@ -110,6 +110,10 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        showUploadList: {
+          showDownloadIcon: true,
+          showRemoveIcon: true,
+        },
       };
     },
   },

@@ -46,7 +46,7 @@ export const formSchema: FormSchema[] = [
     valueField: 'fileList',
     componentProps: () => {
       return {
-        listType: 'picture-card',
+        // listType: 'picture-card',
         maxFileLimit: 1,
         api: async (file: File) => {
           try {
@@ -62,6 +62,10 @@ export const formSchema: FormSchema[] = [
             return {};
           }
         },
+        showUploadList: true,
+        onDownload(file) {
+          console.log(file);
+        },
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },

@@ -23,7 +23,7 @@
     layout: 'vertical',
   });
 
-  const { genForm } = useGenDynamicForm();
+  const { genForm, transformValue } = useGenDynamicForm();
 
   const keys = ref<string[]>([]);
 
@@ -127,8 +127,8 @@
 
         sendValue.value = await genModbusCommand(unref(modBUSForm));
       } else {
-        const _value = getFieldsValue();
-
+        await validate();
+        const _value = transformValue(getFieldsValue());
         sendValue.value = unref(keys).reduce((prev, next) => {
           return { ...prev, [next]: _value[next] };
         }, {});

 import { DataType, Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { JSONEditor } from '/@/components/CodeEditor';
 import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { useJsonParse } from '/@/hooks/business/useJsonParse';
 import { DataTypeEnum } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 export interface BasicCreateFormParams {
@@ -20,7 +21,6 @@ export const useGenDynamicForm = () => {
     const { specs, type } = dataType;
     const { valueRange, step } = specs! as Partial<Specs>;
     const { max, min } = valueRange || {};
-    console.log({ max, min });
     return {
       field: identifier,
       label: functionName,
@@ -107,6 +107,19 @@ export const useGenDynamicForm = () => {
       field: identifier,
       label: functionName,
       component: 'JSONEditor',
+      valueField: 'value',
+      changeEvent: 'update:value',
+      rules: [
+        {
+          validator: (_rule, value: any) => {
+            if (value) {
+              const { flag } = useJsonParse(value);
+              if (!flag) return Promise.reject(`${functionName} 不是一个有效的JSON对象`);
+            }
+            return Promise.resolve();
+          },
+        },
+      ],
     };
   };
 
@@ -118,11 +131,14 @@ export const useGenDynamicForm = () => {
     [DataTypeEnum.IS_STRUCT]: createInputJson,
   };
 
+  const fieldTypeMap = new Map<string, DataTypeEnum>();
   const genForm = (schemas: StructJSON[]) => {
+    fieldTypeMap.clear();
     const formSchema = schemas.map((item) => {
       const { functionName, identifier, dataType } = item;
       const { type } = dataType || {};
 
+      fieldTypeMap.set(identifier!, dataType!.type);
       const method = schemaMethod[type!];
 
       const formSchema = method?.({
@@ -137,5 +153,21 @@ export const useGenDynamicForm = () => {
     return formSchema.filter(Boolean);
   };
 
-  return { genForm };
+  const transformValue = (value: Recordable) => {
+    return Object.keys(value || {}).reduce((prev, next) => {
+      const dataType = fieldTypeMap.get(next)!;
+
+      let itemValue = value[next];
+      if (dataType === DataTypeEnum.IS_STRUCT) {
+        const { value } = useJsonParse(itemValue);
+        itemValue = value;
+      }
+      return {
+        ...prev,
+        [next]: itemValue,
+      };
+    }, {} as Recordable);
+  };
+
+  return { genForm, transformValue };
 };

+/**
+ * @description 方向
+ */
+export enum DirectionEnum {
+  FROM = 'FROM',
+  TO = 'TO',
+}
+
+export enum DirectionNameEnum {
+  FROM = '从',
+  TO = '到',
+}
+/**
+ * @description 关联类型
+ */
+export enum RelationTypeEnum {
+  CONTAINS = 'contains',
+  MANAGES = 'manages',
+}
+
+/**
+ * @description 类型
+ */
+export enum EntityTypeEnum {
+  DEVICE = 'DEVICE',
+  ASSET = 'ASSET',
+  ENTITY_VIEW = 'ENTITY_VIEW',
+  TENANT = 'TENANT',
+  CUSTOMER = 'CUSTOMER',
+  USER = 'USER',
+  DASHBOARD = 'DASHBOARD',
+  EDGE = 'EDGE',
+}
+
+export enum EntityTypeNameEnum {
+  DEVICE = '设备',
+  ASSET = '资产',
+  ENTITY_VIEW = '实体视图',
+  TENANT = '租户',
+  CUSTOMER = '客户',
+  USER = '用户',
+  DASHBOARD = '仪表板',
+  EDGE = 'Edge',
+}
+
+/**
+ * @description Filter Perimeter type
+ */
+export enum PerimeterTypeEnum {
+  POLYGON = 'POLYGON',
+  CIRCLE = 'CIRCLE',
+}
+
+/**
+ * @description Filter Range util
+ */
+export enum RangeUtilEnum {
+  METER = 'METER',
+  KILOMETER = 'KILOMETER',
+  FOOT = 'FOOT',
+  MILE = 'MILE',
+  NAUTICAL_MILE = 'NAUTICAL_MILE',
+}
+
+export enum RangeUtilNameEnum {
+  METER = 'Meter',
+  KILOMETER = 'Kilometer',
+  FOOT = 'Foot',
+  MILE = 'Mile',
+  NAUTICAL_MILE = 'Nautical mile',
+}
+
+export enum MessageTypesFilterEnum {
+  POST_ATTRIBUTES = 'POST_ATTRIBUTES',
+  POST_TELEMETRY = 'POST_TELEMETRY',
+  RPC_REQUEST_FROM_DEVICE = 'RPC_REQUEST_FROM_DEVICE',
+  RPC_REQUEST_TO_DEVICE = 'RPC_REQUEST_TO_DEVICE',
+  ACTIVITY_EVENT = 'ACTIVITY_EVENT',
+  INACTIVITY_EVENT = 'INACTIVITY_EVENT',
+  CONNECT_EVENT = 'CONNECT_EVENT',
+  DISCONNECT_EVENT = 'DISCONNECT_EVENT',
+  ENTITY_CREATED = 'ENTITY_CREATED',
+  ENTITY_UPDATED = 'ENTITY_UPDATED',
+  ENTITY_DELETED = 'ENTITY_DELETED',
+  ENTITY_ASSIGNED = 'ENTITY_ASSIGNED',
+  ENTITY_UNASSIGNED = 'ENTITY_UNASSIGNED',
+  ATTRIBUTES_UPDATED = 'ATTRIBUTES_UPDATED',
+  ATTRIBUTES_DELETED = 'ATTRIBUTES_DELETED',
+  TIMESERIES_UPDATED = 'TIMESERIES_UPDATED',
+  TIMESERIES_DELETED = 'TIMESERIES_DELETED',
+  RPC_QUEUED = 'RPC_QUEUED',
+  RPC_DELIVERED = 'RPC_DELIVERED',
+  RPC_SUCCESSFUL = 'RPC_SUCCESSFUL',
+  RPC_TIMEOUT = 'RPC_TIMEOUT',
+  RPC_FAILED = 'RPC_FAILED',
+}
+
+export enum MessageTypesFilterNameEnum {
+  POST_ATTRIBUTES = 'Post attributes',
+  POST_TELEMETRY = 'Post telemetry',
+  RPC_REQUEST_FROM_DEVICE = 'RPC Request from Device',
+  RPC_REQUEST_TO_DEVICE = 'RPC Request to Device',
+  ACTIVITY_EVENT = 'Activity Event',
+  INACTIVITY_EVENT = 'Inactivity Event',
+  CONNECT_EVENT = 'Connect Event',
+  DISCONNECT_EVENT = 'Disconnect Event',
+  ENTITY_CREATED = 'Entity Created',
+  ENTITY_UPDATED = 'Entity Updated',
+  ENTITY_DELETED = 'Entity Deleted',
+  ENTITY_ASSIGNED = 'Entity Assigned',
+  ENTITY_UNASSIGNED = 'Entity Unassigned',
+  ATTRIBUTES_UPDATED = 'Attributes Updated',
+  ATTRIBUTES_DELETED = 'Attributes Deleted',
+  TIMESERIES_UPDATED = 'Timeseries Updated',
+  TIMESERIES_DELETED = 'Timeseries Deleted',
+  RPC_QUEUED = 'RPC Queued',
+  RPC_DELIVERED = 'RPC Delivered',
+  RPC_SUCCESSFUL = 'RPC Successful',
+  RPC_TIMEOUT = 'RPC Timeout',
+  RPC_FAILED = 'RPC Failed',
+}

@@ -5,16 +5,85 @@ export enum FetchNodeComFlagTypeENum {
 
 export enum NodeBindDataFieldEnum {
   NAME = 'name',
-  ALARM_STATUS_LIST = 'alarmStatusList',
   DESCRIPTION = 'description',
   DEBUG_MODE = 'debugMode',
+
+  // Filter Check Alarm status
+  ALARM_STATUS_LIST = 'alarmStatusList',
+
+  // Filter Check Existence Fields
+  MESSAGE_NAMES = 'messageNames',
+  METADATA_NAMES = 'metadataNames',
+  CHECK_ALL_KEYS = 'checkAllKeys',
+
+  // Filter Check Relation
+  DIRECTION = 'direction',
+  CHECK_FOR_SINGLE_ENTITY = 'checkForSingleEntity',
+  ENTITY_TYPE = 'entityType',
+  RELEATION_TYPE = 'relationType',
+  ENTITY_ID = 'entityId',
+
+  // Filter Gps geofencing filter
+  LATITUDE_KEY_NAME = 'latitudeKeyName',
+  LONGITUDE_KEY_NAME = 'longitudeKeyName',
+  PERIMETER_TYPE = 'perimeterType',
+  FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA = 'fetchPerimeterInfoFromMessageMetadata',
+  PERIMETER_KEY_NAME = 'perimeterKeyName',
+  CENTER_LATITUDE = 'centerLatitude',
+  CENTER_LONGITUDE = 'centerLongitude',
+  RANGE = 'range',
+  RANGE_UNIT = 'rangeUnit',
+  POLYGONS_DEFINITION = 'polygonsDefinition',
+
+  // Filter Message Type
+  MESSAGE_TYPES = 'messageTypes',
+
+  // Filter Originator Type
+  ORIGINATOR_TYPES = 'originatorTypes',
+
+  // Filter Script
+  JS_SCRIPT = 'jsScript',
 }
 
 export enum NodeBindDataFieldNameEnum {
   NAME = '名称',
-  ALARM_STATUS_LIST = 'Alarm status filter',
   DESCRIPTION = '说明',
   DEBUG_MODE = '调试模式',
+
+  // Filter Check Alarm status
+  ALARM_STATUS_LIST = 'Alarm status filter',
+
+  // Filter Check Existence Fields
+  MESSAGE_NAMES = '消息数据',
+  METADATA_NAMES = '消息元数据',
+  CHECK_ALL_KEYS = '检查所有选择的键是否都存在',
+
+  // Filter Check Relation
+  DIRECTION = '方向',
+  CHECK_FOR_SINGLE_ENTITY = 'Check relation to specific entity',
+  ENTITY_TYPE = '类型',
+  RELEATION_TYPE = '关联类型',
+
+  // Filter Gps geofencing filter
+  LATITUDE_KEY_NAME = 'Latitude Key Name',
+  LONGITUDE_KEY_NAME = 'Longitude Key Name',
+  PERIMETER_TYPE = 'Perimeter Type',
+  FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA = 'Fetch perimeter information from message metadata',
+  CENTER_LATITUDE = 'Center latitude',
+  CENTER_LONGITUDE = 'Center longitude',
+  RANGE = 'Range',
+  RANGE_UNIT = 'Range unit',
+  PERIMETER_KEY_NAME = 'Perimeter key name',
+  POLYGONS_DEFINITION = 'Polygons definition',
+
+  // Filter Message Type
+  MESSAGE_TYPES = 'Message Types Filter',
+
+  // Filter Originator Type
+  ORIGINATOR_TYPES = 'Originator types filter',
+
+  // Filter Script
+  JS_SCRIPT = 'Filter',
 }
 
 export enum EdgeBindDataFieldEnum {

@@ -53,7 +53,7 @@ export function useBasicDataTransform() {
 
     nodes.forEach((item, index) => indexMap.set(index, item));
 
-    connections.forEach((item) => {
+    (connections || []).forEach((item) => {
       const { fromIndex, toIndex, type } = item;
       const key = `${fromIndex}${SEPARATOR}${toIndex}`;
       if (!groupByConnections.has(key)) groupByConnections.set(key, []);

@@ -124,7 +124,7 @@ export function useSaveAndRedo() {
         firstNodeIndex,
         ruleChainId: {
           entityType: 'RULE_CHAIN',
-          id: 'd6ddea70-25da-11ee-bc6b-47e715464e68',
+          id: '992ddda0-3d97-11ee-8b46-0dfb0900ab17',
         },
       });
 
@@ -140,7 +140,7 @@ export function useSaveAndRedo() {
     try {
       loading.value = true;
 
-      const id = 'd6ddea70-25da-11ee-bc6b-47e715464e68';
+      const id = '992ddda0-3d97-11ee-8b46-0dfb0900ab17';
 
       const data = await getRuleChainData(id);
 

@@ -3,8 +3,27 @@ import { FormSchema } from '/@/components/Form';
 
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    field: NodeBindDataFieldEnum.MESSAGE_NAMES,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.MESSAGE_NAMES,
+    componentProps: {
+      mode: 'tags',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.METADATA_NAMES,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.METADATA_NAMES,
+    componentProps: {
+      mode: 'tags',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.CHECK_ALL_KEYS,
+    component: 'Checkbox',
+    label: NodeBindDataFieldNameEnum.CHECK_ALL_KEYS,
+    labelWidth: 200,
   },
 ];

+import {
+  DirectionEnum,
+  DirectionNameEnum,
+  EntityTypeEnum,
+  EntityTypeNameEnum,
+  RelationTypeEnum,
+} from '../../../enum/form';
 import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
+import { deviceProfilePage } from '/@/api/device/deviceManager';
 import { FormSchema } from '/@/components/Form';
 
 export const formSchemas: FormSchema[] = [
@@ -7,4 +15,64 @@ export const formSchemas: FormSchema[] = [
     component: 'Input',
     label: NodeBindDataFieldNameEnum.NAME,
   },
+  {
+    field: NodeBindDataFieldEnum.CHECK_FOR_SINGLE_ENTITY,
+    component: 'Checkbox',
+    label: NodeBindDataFieldNameEnum.CHECK_FOR_SINGLE_ENTITY,
+    labelWidth: 220,
+  },
+  {
+    field: NodeBindDataFieldEnum.DIRECTION,
+    component: 'Select',
+    label: NodeBindDataFieldEnum.DIRECTION,
+    componentProps: {
+      options: [
+        { label: DirectionNameEnum.FROM, value: DirectionEnum.FROM },
+        { label: DirectionNameEnum.TO, value: DirectionEnum.TO },
+      ],
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.ENTITY_TYPE,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.ENTITY_TYPE,
+    colProps: { span: 8 },
+    componentProps: {
+      options: Object.keys(EntityTypeEnum).map((key) => ({
+        label: EntityTypeNameEnum[key],
+        value: key,
+      })),
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.ENTITY_ID,
+    component: 'ApiSelectScrollLoad',
+    label: ' ',
+    colProps: { span: 16 },
+    show: ({ model }) => model[NodeBindDataFieldEnum.ENTITY_TYPE],
+    componentProps: ({ formModel }) => {
+      const entityType = formModel[NodeBindDataFieldEnum.ENTITY_TYPE];
+
+      return {
+        showSearch: true,
+        api: deviceProfilePage,
+        resultField: 'items',
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: `请选择${EntityTypeNameEnum[entityType]}`,
+      };
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.RELEATION_TYPE,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.RELEATION_TYPE,
+    defaultValue: RelationTypeEnum.CONTAINS,
+    componentProps: {
+      options: [
+        { label: RelationTypeEnum.CONTAINS, value: RelationTypeEnum.CONTAINS },
+        { label: RelationTypeEnum.MANAGES, value: RelationTypeEnum.MANAGES },
+      ],
+    },
+  },
 ];

+import { PerimeterTypeEnum, RangeUtilEnum, RangeUtilNameEnum } from '../../../enum/form';
 import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
 import { FormSchema } from '/@/components/Form';
 
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
+    field: NodeBindDataFieldEnum.LATITUDE_KEY_NAME,
     component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    label: NodeBindDataFieldNameEnum.LATITUDE_KEY_NAME,
+  },
+  {
+    field: NodeBindDataFieldEnum.LONGITUDE_KEY_NAME,
+    component: 'Input',
+    label: NodeBindDataFieldNameEnum.LONGITUDE_KEY_NAME,
+  },
+  {
+    field: NodeBindDataFieldEnum.PERIMETER_TYPE,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.PERIMETER_TYPE,
+    componentProps: {
+      options: Object.keys(PerimeterTypeEnum).map((value) => ({ label: value, value })),
+    },
+  },
+  {
+    field: NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA,
+    component: 'Checkbox',
+    label: NodeBindDataFieldNameEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA,
+    labelWidth: 350,
+  },
+  {
+    field: NodeBindDataFieldEnum.PERIMETER_KEY_NAME,
+    component: 'Input',
+    label: NodeBindDataFieldNameEnum.PERIMETER_KEY_NAME,
+    show: ({ model }) => model[NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA],
+  },
+  {
+    field: NodeBindDataFieldEnum.POLYGONS_DEFINITION,
+    component: 'Input',
+    label: NodeBindDataFieldNameEnum.POLYGONS_DEFINITION,
+    helpMessage:
+      'Please, use the following format for manual definition of polygon: [[lat1,lon1],[lat2,lon2], ... ,[latN,lonN]].',
+    show: ({ model }) =>
+      !model[NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA] &&
+      model[NodeBindDataFieldEnum.PERIMETER_TYPE] === PerimeterTypeEnum.POLYGON,
+  },
+  {
+    field: NodeBindDataFieldEnum.CENTER_LATITUDE,
+    component: 'InputNumber',
+    label: NodeBindDataFieldNameEnum.CENTER_LATITUDE,
+    colProps: { span: 12 },
+    show: ({ model }) =>
+      model[NodeBindDataFieldEnum.PERIMETER_TYPE] === PerimeterTypeEnum.CIRCLE &&
+      !model[NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA],
+  },
+  {
+    field: NodeBindDataFieldEnum.CENTER_LONGITUDE,
+    component: 'InputNumber',
+    label: NodeBindDataFieldNameEnum.CENTER_LONGITUDE,
+    colProps: { span: 12 },
+    show: ({ model }) =>
+      model[NodeBindDataFieldEnum.PERIMETER_TYPE] === PerimeterTypeEnum.CIRCLE &&
+      !model[NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA],
+  },
+  {
+    field: NodeBindDataFieldEnum.RANGE,
+    component: 'InputNumber',
+    label: NodeBindDataFieldNameEnum.RANGE,
+    colProps: { span: 12 },
+    show: ({ model }) =>
+      model[NodeBindDataFieldEnum.PERIMETER_TYPE] === PerimeterTypeEnum.CIRCLE &&
+      !model[NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA],
+  },
+  {
+    field: NodeBindDataFieldEnum.RANGE_UNIT,
+    component: 'Select',
+    label: NodeBindDataFieldNameEnum.RANGE_UNIT,
+    colProps: { span: 12 },
+    show: ({ model }) =>
+      model[NodeBindDataFieldEnum.PERIMETER_TYPE] === PerimeterTypeEnum.CIRCLE &&
+      !model[NodeBindDataFieldEnum.FETCH_PERIMETER_INFO_FROM_MESSAGE_METADATA],
+    componentProps: {
+      options: Object.keys(RangeUtilEnum).map((value) => ({
+        label: RangeUtilNameEnum[value],
+        value,
+      })),
+    },
   },
 ];

 import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
+import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema } from '/@/components/Form';
+import { DictEnum } from '/@/enums/dictEnum';
 
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    field: NodeBindDataFieldEnum.MESSAGE_TYPES,
+    component: 'ApiSelect',
+    label: NodeBindDataFieldNameEnum.MESSAGE_TYPES,
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: DictEnum.MESSAGE_TYPES_FILTER,
+      },
+      mode: 'multiple',
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
   },
 ];

-import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
 import { FormSchema } from '/@/components/Form';
 
-export const formSchemas: FormSchema[] = [
-  {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
-  },
-];
+export const formSchemas: FormSchema[] = [];

 import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
+import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema } from '/@/components/Form';
+import { DictEnum } from '/@/enums/dictEnum';
 
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    field: NodeBindDataFieldEnum.ORIGINATOR_TYPES,
+    component: 'ApiSelect',
+    label: NodeBindDataFieldNameEnum.ORIGINATOR_TYPES,
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: DictEnum.ORIGINATOR_TYPES,
+      },
+      mode: 'multiple',
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
   },
 ];

-import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
 import { FormSchema } from '/@/components/Form';
 
-export const formSchemas: FormSchema[] = [
-  {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
-  },
-];
+export const formSchemas: FormSchema[] = [];

-import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
 import { FormSchema } from '/@/components/Form';
+import { isObject } from '/@/utils/is';
+
+export const validateJSON = (value: string): { value: Recordable | string; flag: boolean } => {
+  let flag = false;
+  try {
+    value = JSON.parse(value);
+    if (isObject(value)) flag = true;
+  } catch (error) {}
+  return { value, flag };
+};
 
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    field: 'value',
+    component: 'JSONEditor',
+    label: '配置',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    rules: [
+      {
+        required: true,
+        validator: (_rule, value) => {
+          const { flag } = validateJSON(value);
+          return flag ? Promise.resolve() : Promise.reject('配置项不是一个JSON对象');
+        },
+      },
+    ],
+    componentProps: {
+      height: 300,
+    },
   },
 ];

 <script lang="ts" setup>
   import type { CreateModalDefineExposeType } from '../../../types';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchemas } from './create.config';
+  import { formSchemas, validateJSON } from './create.config';
   import { NodeData } from '../../../types/node';
 
   defineProps<{
@@ -16,12 +16,13 @@
   const getValue: CreateModalDefineExposeType['getFieldsValue'] = async () => {
     await validate();
     const value = getFieldsValue() || {};
-    return value;
+    const { value: data } = validateJSON(value?.value);
+    return data as Recordable;
   };
 
   const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
     resetFields();
-    setFieldsValue(value);
+    setFieldsValue({ value: JSON.stringify(value, null, 2) });
   };
 
   defineExpose({

+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import ScriptFilterTest from './ScriptFilterTest.vue';
+  import { MessageTypesFilterEnum } from '../../../enum/form';
+  import { ref } from 'vue';
+  import { JavaScriptFunctionEditor } from '/@/components/Form';
+
+  defineProps<{
+    visible?: boolean;
+    javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props'];
+  }>();
+
+  const emit = defineEmits(['save', 'register']);
+
+  interface SaveValueType {
+    msg: Recordable;
+    metadata: Recordable;
+    msgType: MessageTypesFilterEnum;
+    javascriptFunction: string;
+  }
+
+  const value = ref('');
+
+  const [register, { closeModal }] = useModalInner((data: ModalParamsType<string>) => {
+    value.value = data.record;
+  });
+
+  const handleSaveScript = (value: SaveValueType) => {
+    emit('save', value);
+    closeModal();
+  };
+</script>
+
+<template>
+  <BasicModal
+    wrapClassName="scriptTestModal"
+    @register="register"
+    :visible="visible"
+    title="测试脚本功能"
+    defaultFullscreen
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+  >
+    <ScriptFilterTest
+      :javaScriptEditorProps="javaScriptEditorProps"
+      :value="value"
+      @cancel="closeModal()"
+      @save="handleSaveScript"
+    />
+  </BasicModal>
+</template>

+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+  import { ref } from 'vue';
+
+  const visible = ref(false);
+  const handleOpenHelpMessage = () => {
+    visible.value = true;
+  };
+</script>
+
+<template>
+  <Tooltip title="点击获取帮助">
+    <Icon
+      icon="material-symbols:help-outline"
+      class="cursor-pointer svg:text-xl"
+      @click="handleOpenHelpMessage"
+    />
+  </Tooltip>
+</template>

+<script setup lang="ts">
+  import { JavaScriptFunctionEditor } from '/@/components/Form';
+  import { Button } from 'ant-design-vue';
+  import FilterModal from './FilterModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      buttonName?: string;
+      javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props'];
+    }>(),
+    {
+      buttonName: 'Test Filter Function',
+      javaScriptEditorProps: () => ({
+        functionName: 'Filter',
+        paramsName: ['msg', 'metadata', 'msgType'],
+      }),
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+  const [register, { openModal }] = useModal();
+
+  const handleOpen = () => {
+    openModal(true, {
+      record: props.value,
+      mode: DataActionModeEnum.CREATE,
+    } as ModalParamsType<string>);
+  };
+
+  const getValue = computed<string>({
+    get() {
+      return props.value || '';
+    },
+    set(value) {
+      emit('update:value', value);
+    },
+  });
+
+  const handleSave = (value: Record<'javascriptFunction', string>) => {
+    emit('update:value', value.javascriptFunction);
+  };
+</script>
+
+<template>
+  <section>
+    <JavaScriptFunctionEditor v-model:value="getValue" v-bind="javaScriptEditorProps" />
+    <Button class="mt-4" type="primary" @click="handleOpen">{{ buttonName }}</Button>
+    <FilterModal
+      :javaScriptEditorProps="javaScriptEditorProps"
+      @register="register"
+      @save="handleSave"
+    />
+  </section>
+</template>

+<script lang="ts" setup>
+  import { Card, Select, Tag, Form, Button, Input } from 'ant-design-vue';
+  import { ref, unref, watch } from 'vue';
+  import { MessageTypesFilterEnum, MessageTypesFilterNameEnum } from '../../../enum/form';
+  import { JSONEditor } from '/@/components/CodeEditor';
+  import { buildShortUUID } from '/@/utils/uuid';
+  import { Icon } from '/@/components/Icon';
+  import { JavaScriptFunctionEditor } from '/@/components/Form';
+  import { useJsonParse } from '/@/hooks/business/useJsonParse';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { isNullOrUnDef } from '/@/utils/is';
+
+  interface MetaDataItemType {
+    label: string;
+    value: string;
+    uuid: string;
+  }
+
+  interface Value {
+    msg: Recordable;
+    metadata: Recordable;
+    msgType: MessageTypesFilterEnum;
+    javascriptFunction: string;
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props'];
+    }>(),
+    {
+      javaScriptEditorProps: () => ({
+        functionName: 'Filter',
+        paramsName: ['msg', 'metadata', 'msgType'],
+      }),
+    }
+  );
+
+  const emit = defineEmits<{
+    (eventName: 'cancel'): void;
+    (eventName: 'test', value: Value): void;
+    (eventName: 'save', value: Value): void;
+  }>();
+
+  const messageType = ref(MessageTypesFilterEnum.POST_TELEMETRY);
+  const messageTypeOptions = Object.keys(MessageTypesFilterEnum).map((value) => ({
+    label: MessageTypesFilterNameEnum[value],
+    value,
+  }));
+
+  const messageContent = ref({
+    temperature: 22.4,
+    humidity: 78,
+  });
+
+  const scriptContent = ref('return msg.temperature > 20;');
+
+  const outputContent = ref('');
+
+  const metaData = ref<MetaDataItemType[]>([
+    { uuid: buildShortUUID(), label: 'deviceName', value: 'Test Device' },
+    { uuid: buildShortUUID(), label: 'deviceType', value: 'default' },
+    { uuid: buildShortUUID(), label: 'ts', value: Date.now().toString() },
+  ]);
+
+  const handleAddMetadata = () => {
+    metaData.value.push({ uuid: buildShortUUID(), label: '', value: '' });
+  };
+
+  const handleRemove = (data: MetaDataItemType) => {
+    const index = unref(metaData).findIndex((item) => item.uuid === data.uuid);
+    ~index && unref(metaData).splice(index, 1);
+  };
+
+  const { createMessage } = useMessage();
+  const handleValidate = () => {
+    const message = unref(messageContent);
+    const metadata = unref(metaData);
+    const { flag } = useJsonParse(message);
+
+    if (!flag) {
+      createMessage.warning('消息不是一个有效的JSON对象');
+      return false;
+    }
+
+    for (const item of metadata) {
+      const { label, value } = item;
+      if (isNullOrUnDef(label) || isNullOrUnDef(value)) {
+        createMessage.warning('元数据的键名和键值为必填项');
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const getValue = (): Value => {
+    const msg = unref(messageContent);
+    const msgType = unref(messageType);
+    const metadata = unref(metaData).reduce(
+      (prev, next) => ({ ...prev, [next.label]: next.value }),
+      {} as Recordable
+    );
+    const javascriptFunction = unref(scriptContent);
+    return { msg, msgType, metadata, javascriptFunction };
+  };
+
+  const handleTestScript = () => {
+    const flag = handleValidate();
+
+    flag && emit('test', getValue());
+  };
+
+  const handleSave = () => {
+    const flag = handleValidate();
+    flag && emit('save', getValue());
+  };
+
+  watch(
+    () => props.value,
+    (value) => {
+      scriptContent.value = value || '';
+    }
+  );
+</script>
+
+<template>
+  <section class="script-test-container w-full h-full flex flex-col">
+    <Form class="flex-auto grid grid-cols-2 grid-rows-2 bg-gray-100 gap-2">
+      <main>
+        <Card class="w-full h-full">
+          <div class="w-full h-full flex flex-col">
+            <div class="flex justify-between items-center">
+              <div class="flex flex-col">
+                <Form.Item label="消息类型" labelAlign="left" :colon="false">
+                  <Select
+                    v-model:value="messageType"
+                    :options="messageTypeOptions"
+                    :bordered="false"
+                    class="min-w-60 border-b-gray-400 border-b"
+                  />
+                </Form.Item>
+              </div>
+              <Tag color="blue"> 消息 </Tag>
+            </div>
+            <JSONEditor v-model:value="messageContent" title="消息" class="mt-4 flex-auto" />
+          </div>
+        </Card>
+      </main>
+      <main>
+        <Card class="w-full h-full">
+          <div class="flex flex-col">
+            <div class="flex justify-between">
+              <span class="text-gray-400">元数据</span>
+              <Tag color="blue">元数据</Tag>
+            </div>
+            <div class="mt-4 overflow-y-auto">
+              <div v-for="item in metaData" :key="item.uuid" class="flex mt-2 gap-2 items-end">
+                <Input v-model:value="item.label" placeholder="请输入键名" />
+                <Input v-model:value="item.value" placeholder="请输入键值" />
+                <Icon
+                  icon="material-symbols:close"
+                  class="svg:text-2xl cursor-pointer"
+                  @click="handleRemove(item)"
+                />
+              </div>
+            </div>
+            <div class="mt-4">
+              <Button type="primary" @click="handleAddMetadata">添加</Button>
+            </div>
+          </div>
+        </Card>
+      </main>
+      <main>
+        <Card class="w-full h-full">
+          <JavaScriptFunctionEditor
+            v-model:value="scriptContent"
+            v-bind="javaScriptEditorProps"
+            height="100%"
+          >
+            <template #beforeFormat>
+              <Tag color="blue" class="!mr-0">{{ javaScriptEditorProps.functionName }}</Tag>
+            </template>
+            <template #beforeFullScreen>
+              <Icon icon="material-symbols:help-outline" class="cursor-pointer svg:text-xl" />
+            </template>
+          </JavaScriptFunctionEditor>
+        </Card>
+      </main>
+      <main>
+        <Card class="w-full h-full">
+          <JSONEditor
+            v-model:value="outputContent"
+            title="输出"
+            class="flex-auto"
+            height="100%"
+            :disabled="true"
+          >
+            <template #beforeFormat>
+              <Tag color="blue" class="!mr-0">输出</Tag>
+            </template>
+          </JSONEditor>
+        </Card>
+      </main>
+    </Form>
+    <div class="h-12 flex items-center justify-between px-4 bg-light-50">
+      <Button type="primary" @click="handleTestScript">测试</Button>
+      <div class="flex gap-4">
+        <Button @click="emit('cancel')">取消</Button>
+        <Button type="primary" @click="handleSave">保存</Button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+  .script-test-container {
+    :deep(.ant-card-body) {
+      @apply w-full h-full p-2;
+
+      .ant-form-item {
+        label {
+          @apply text-xs pl-3 text-gray-400;
+        }
+      }
+
+      .ant-input {
+        @apply !border-transparent !border-b !border-b-dark-300;
+
+        &:focus {
+          @apply !shadow-none;
+        }
+      }
+    }
+  }
+</style>

+import { h } from 'vue';
 import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
-import { FormSchema } from '/@/components/Form';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import HelpMessage from './HelpMessage.vue';
+import JavaScriptFilterFunctionModal from './JavaScriptFilterFunctionModal.vue';
+
+useComponentRegister('JavaScriptFilterFunctionModal', JavaScriptFilterFunctionModal);
 
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    field: NodeBindDataFieldEnum.JS_SCRIPT,
+    component: 'JavaScriptFilterFunctionModal',
+    label: NodeBindDataFieldNameEnum.JS_SCRIPT,
+    changeEvent: 'update:value',
+    valueField: 'value',
+    renderComponentContent: () => {
+      return {
+        beforeFullScreen: () => h(HelpMessage),
+      };
+    },
   },
 ];

 import { NodeBindDataFieldEnum, NodeBindDataFieldNameEnum } from '../../../enum/node';
-import { FormSchema } from '/@/components/Form';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import JavaScriptFilterFunctionModal from '../Script/JavaScriptFilterFunctionModal.vue';
 
+useComponentRegister('JavaScriptFilterFunctionModal', JavaScriptFilterFunctionModal);
 export const formSchemas: FormSchema[] = [
   {
-    field: NodeBindDataFieldEnum.NAME,
-    component: 'Input',
-    label: NodeBindDataFieldNameEnum.NAME,
+    field: NodeBindDataFieldEnum.JS_SCRIPT,
+    component: 'JavaScriptFilterFunctionModal',
+    label: NodeBindDataFieldNameEnum.JS_SCRIPT,
+    changeEvent: 'update:value',
+    valueField: 'value',
+    componentProps: {
+      buttonName: 'Test Switch Function',
+      javaScriptEditorProps: {
+        functionName: 'Switch',
+        paramsName: ['msg', 'metadata', 'mstType'],
+      },
+    },
+    renderComponentContent: () => {
+      return {
+        // beforeFullScreen: () => h(HelpMessage),
+      };
+    },
   },
 ];

@@ -27,8 +27,8 @@ export const FilterComponents: NodeItemConfigType[] = [
   GpsGeofencingFilterConfig,
   MessageTypeConfig,
   MessageTypeSwitchConfig,
-  OriginatorTypeSwitchConfig,
   OriginatorTypeConfig,
+  OriginatorTypeSwitchConfig,
   SceneReactConfig,
   ScriptConfig,
   SwitchConfig,

@@ -75,6 +75,7 @@
       <section v-if="shadowComponent" class="w-full h-full">
         <BasicForm @register="topFormRegister" />
         <component
+          class="rule-node-form"
           :is="shadowComponent"
           ref="createComponentEl"
           :key="getComponentKey"
@@ -87,3 +88,12 @@
     </Spin>
   </BasicModal>
 </template>
+
+<style lang="less" scoped>
+  .rule-node-form {
+    :deep(.ant-input-number) {
+      width: 100%;
+      min-width: none;
+    }
+  }
+</style>

@@ -10,6 +10,6 @@
     <p class="text-gray-600 italic">
       {{ nodeData?.config?.configurationDescriptor.nodeDefinition.description }}</p
     >
-    <p>{{ nodeData?.config?.configurationDescriptor.nodeDefinition.details }}</p>
+    <p v-html="nodeData?.config?.configurationDescriptor.nodeDefinition.details"> </p>
   </section>
 </template>

@@ -99,6 +99,7 @@
           <section v-if="shadowComponent" class="w-full h-full">
             <BasicForm @register="topFormRegister" @vue:mounted="handleTopFormMounted" />
             <component
+              class="rule-node-form"
               :is="shadowComponent"
               ref="createComponentEl"
               :config="nodeData"
@@ -119,3 +120,12 @@
     </Tabs>
   </BasicDrawer>
 </template>
+
+<style lang="less" scoped>
+  .rule-node-form {
+    :deep(.ant-input-number) {
+      width: 100%;
+      min-width: none;
+    }
+  }
+</style>

@@ -136,7 +136,6 @@ export const tenantFormSchema: FormSchema[] = [
           }
           return { items, total };
         },
-        showSearch: true,
         labelField: 'name',
         valueField: 'id.id',
         filterOption: (inputValue: string, options: Record<'label' | 'value', string>) => {

@@ -49,3 +49,10 @@ export interface PaginationResult<T = Recordable> {
   items: T[];
   total: number;
 }
+
+export interface TBPaginationResult<T = Recordable> {
+  data: T[];
+  hasNext: boolean;
+  totalElements: number;
+  totalPages: number;
+}