Merge branch 'fix/script-manage' into 'main'

Fix/script manage

See merge request yunteng/thingskit-front!1416

@@ -43,6 +43,7 @@ export interface TransportScriptParamsType {
   scriptLanguage: ScriptLanguageEnum;
   status: number;
   serviceType?: string;
+  scriptType: string;
 }
 
 export interface TransportScriptRecordType {
@@ -58,4 +59,5 @@ export interface TransportScriptRecordType {
   convertJs?: string;
   serviceType?: string;
   saveOriginalData: boolean;
+  scriptType: string;
 }

@@ -96,7 +96,7 @@
   };
 
   const set = (val: string, cursorPos?: number) => {
-    return unref(editorInstance)?.setValue(val, cursorPos);
+    return unref(editorInstance)?.setValue(unref(val), cursorPos);
   };
 
   function destroy() {

@@ -3,6 +3,8 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchemas } from './create.config';
   import { NodeData } from '../../../types/node';
+  import { ScriptEditorValueType } from '/@/views/rule/designer/src/components/JavaScriptFilterModal';
+  import { ScriptFieldsEnum } from '../../../enum/formField/transformation';
 
   defineProps<{
     config: NodeData;
@@ -16,12 +18,15 @@
   const getValue: CreateModalDefineExposeType['getFieldsValue'] = async () => {
     await validate();
     const value = getFieldsValue() || {};
-    return value;
+    const { scriptLang, jsScript, tbelScript } = (value || {})?.jsScript as ScriptEditorValueType;
+    return { scriptLang, jsScript, tbelScript };
   };
 
   const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
     resetFields();
-    setFieldsValue(value);
+    setFieldsValue({
+      [ScriptFieldsEnum.JS_SCRIPT]: value,
+    });
   };
 
   defineExpose({

@@ -27,7 +27,9 @@ export const ScriptConfig: NodeItemConfigType = {
       customRelations: false,
       ruleChainNode: false,
       defaultConfiguration: {
+        scriptLang: 'TBEL',
         jsScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
+        tbelScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
       },
       uiResources: ['static/rulenode/rulenode-core-config.js'],
       configDirective: 'tbTransformationNodeScriptConfig',

@@ -12,13 +12,7 @@
   import { isFunction, isString } from '/@/utils/is';
   import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
   import { ScriptTestParams } from '/@/api/ruleChainDesigner/model';
-
-  interface Value {
-    msg: Recordable;
-    metadata: Recordable;
-    msgType: MessageTypesEnum;
-    javascriptFunction: string;
-  }
+  import { TestModalValueType } from '.';
 
   const props = withDefaults(
     defineProps<{
@@ -45,8 +39,8 @@
 
   const emit = defineEmits<{
     (eventName: 'cancel'): void;
-    (eventName: 'test', value: Value): void;
-    (eventName: 'save', value: Value): void;
+    (eventName: 'test', value: TestModalValueType): void;
+    (eventName: 'save', value: TestModalValueType): void;
   }>();
 
   const jsonEditor = ref<InstanceType<typeof JSONEditor>>();
@@ -85,7 +79,7 @@
     return true;
   };
 
-  const getValue = (): Value => {
+  const getValue = (): TestModalValueType => {
     const msg = unref(messageContent);
     const msgType = unref(messageType);
     const javascriptFunction = unref(scriptContent);
@@ -138,14 +132,13 @@
 
     const result = await executeTestScript();
 
-    outputContent.value = result;
+    outputContent.value = result || '';
     await nextTick();
     unref(jsonEditor)?.handleFormat();
   };
 
   const handleSave = async () => {
     const flag = await handleValidate();
-
     flag && emit('save', getValue());
   };
 

@@ -10,7 +10,7 @@
   const props = defineProps<{
     onlyTest?: boolean;
     visible?: boolean;
-    language?: ScriptLanguageEnum;
+    language: ScriptLanguageEnum;
     messageValue?: Recordable;
     beforeTest?: (params: ScriptTestParams) => Promise<Recordable>;
     javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props'];

@@ -6,7 +6,7 @@
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { computed, ref, toRaw, unref, watch } from 'vue';
   import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
-  import { ScriptEditorValueType } from '.';
+  import { ScriptEditorValueType, TestModalValueType } from '.';
   import { ScriptTestParams } from '/@/api/ruleChainDesigner/model';
 
   const props = withDefaults(
@@ -36,14 +36,15 @@
   const [register, { openModal }] = useModal();
 
   const handleOpen = () => {
+    const { scriptLang, jsScript, tbelScript } = props.value || {};
     openModal(true, {
-      record: props.value?.value,
+      record: scriptLang === ScriptLanguageEnum.JavaScript ? jsScript : tbelScript,
       mode: DataActionModeEnum.CREATE,
     } as ModalParamsType<string>);
   };
 
   watch(
-    () => props.value?.scriptLanguage,
+    () => props.value?.scriptLang,
     (target) => {
       target && (activeLanguage.value = target);
     },
@@ -56,28 +57,49 @@
 
   const getValue = computed<string>({
     get() {
-      return props.value?.value || '';
+      const { scriptLang, jsScript = '', tbelScript = '' } = props.value || {};
+      return scriptLang === ScriptLanguageEnum.JavaScript ? jsScript : tbelScript;
     },
     set(value) {
+      const { jsScript, tbelScript } = props.value || {};
+      const scriptLang = unref(activeLanguage);
       emit(
         'update:value',
         toRaw({
-          value,
-          scriptLanguage: unref(activeLanguage),
+          jsScript: scriptLang === ScriptLanguageEnum.JavaScript ? value : jsScript,
+          tbelScript: scriptLang === ScriptLanguageEnum.TBEL ? value : tbelScript,
+          scriptLang,
         } as ScriptEditorValueType)
       );
     },
   });
 
-  const handleSave = (value: Record<'javascriptFunction', string>) => {
+  const handleSave = ({ javascriptFunction }: TestModalValueType) => {
+    const { jsScript, tbelScript } = props.value || {};
+    const scriptLang = unref(activeLanguage);
     emit(
       'update:value',
       toRaw({
-        value: value.javascriptFunction,
-        scriptLanguage: unref(activeLanguage),
+        jsScript: scriptLang === ScriptLanguageEnum.JavaScript ? javascriptFunction : jsScript,
+        tbelScript: scriptLang === ScriptLanguageEnum.TBEL ? javascriptFunction : tbelScript,
+        scriptLang,
       } as ScriptEditorValueType)
     );
   };
+
+  function onScriptLangteChange(item: string) {
+    activeLanguage.value = ScriptLanguageEnum[item];
+    const { jsScript, tbelScript } = props.value || {};
+    const scriptLang = unref(activeLanguage);
+    emit(
+      'update:value',
+      toRaw({
+        scriptLang,
+        jsScript,
+        tbelScript,
+      } as ScriptEditorValueType)
+    );
+  }
 </script>
 
 <template>
@@ -91,7 +113,7 @@
         :key="item"
         class="cursor-pointer text-center w-40 rounded-3xl h-8 leading-8"
         :class="activeLanguage === ScriptLanguageEnum[item] && 'bg-blue-500 text-light-50'"
-        @click="activeLanguage = ScriptLanguageEnum[item]"
+        @click="onScriptLangteChange(item)"
       >
         {{ item }}
       </div>

+import { MessageTypesEnum } from '../../../enum/form';
 import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
 
 export { default as JavaScriptTestModal } from './JavaScriptTestModal.vue';
@@ -5,6 +6,14 @@ export { default as JavascriptEditorWithTestModal } from './JavascriptEditorWith
 export { default as JavaScriptFilterTest } from './JavaScriptFilterTest.vue';
 
 export interface ScriptEditorValueType {
-  scriptLanguage: ScriptLanguageEnum;
-  value: string;
+  scriptLang: ScriptLanguageEnum;
+  jsScript: string;
+  tbelScript: string;
+}
+
+export interface TestModalValueType {
+  msg: Recordable;
+  metadata: Recordable;
+  msgType: MessageTypesEnum;
+  javascriptFunction: string;
 }

@@ -7,7 +7,6 @@
     TransportScriptParamsType,
     TransportScriptRecordType,
   } from '/@/api/scriptmanage/model/scriptModel';
-  import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
   import { computed, ref, unref } from 'vue';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
 
@@ -21,22 +20,26 @@
       resetFields();
       clearValidate();
       if ([DataActionModeEnum.UPDATE, DataActionModeEnum.READ].includes(mode)) {
-        const { name, description, convertTbel, convertJs, scriptLanguage, serviceType } =
-          record || {};
-        activeLanguage.value = scriptLanguage;
+        const {
+          name,
+          description,
+          convertTbel,
+          convertJs,
+          scriptLanguage,
+          serviceType,
+          scriptType = 'TRANSPORT_TCP_UP',
+        } = record || {};
         setFieldsValue({
           name,
           description,
           serviceType,
           language: scriptLanguage,
           scriptContent: {
-            scriptLanguage: 'JS',
-            value: convertJs,
-          },
-          tbelContent: {
-            scriptLanguage: 'TBEL',
-            value: convertTbel,
+            scriptLang: scriptLanguage,
+            jsScript: convertJs,
+            tbelScript: convertTbel,
           },
+          scriptType,
         } as FormFieldsValueType);
       }
       currentData.value = data;
@@ -57,26 +60,20 @@
     try {
       setModalProps({ loading: true, confirmLoading: true });
       await validate();
-      const {
-        name,
-        description,
-        scriptContent: { value },
-        language,
-        scriptType,
-        tbelContent: { value: taelValue },
-        serviceType,
-      } = getFieldsValue() as FormFieldsValueType;
+      const { name, description, scriptContent, scriptType, serviceType } =
+        getFieldsValue() as FormFieldsValueType;
 
+      const { scriptLang, tbelScript, jsScript } = scriptContent || {};
       const params: TransportScriptParamsType = {
         name,
         description,
         status: 1,
         scriptType,
-        scriptLanguage: language,
+        scriptLanguage: scriptLang,
+        convertJs: jsScript,
+        convertTbel: tbelScript,
         serviceType,
       };
-      params.convertJs = value;
-      params.convertTbel = taelValue;
 
       if (unref(currentData)?.mode === DataActionModeEnum.UPDATE) {
         params.id = unref(currentData)!.record.id;
@@ -89,11 +86,6 @@
       setModalProps({ loading: false, confirmLoading: false });
     }
   };
-  const activeLanguage = ref<string>(ScriptLanguageEnum.JavaScript);
-  const languageChange = (type, model) => {
-    activeLanguage.value = type;
-    model.language = type;
-  };
 </script>
 
 <template>
@@ -104,20 +96,6 @@
     @ok="handleOk"
     :showOkBtn="currentData?.mode !== DataActionModeEnum.READ"
   >
-    <BasicForm @register="registerForm">
-      <template #language="{ model }">
-        <div class="bg-gray-200 text-gray-400 font-medium rounded-3xl flex w-80 mb-2 mx-auto">
-          <div
-            v-for="item in Object.keys(ScriptLanguageEnum)"
-            :key="item"
-            class="cursor-pointer text-center w-40 rounded-3xl h-8 leading-8"
-            :class="activeLanguage === ScriptLanguageEnum[item] && 'bg-blue-500 text-light-50'"
-            @click="languageChange(ScriptLanguageEnum[item], model)"
-          >
-            {{ item }}
-          </div>
-        </div>
-      </template>
-    </BasicForm>
+    <BasicForm @register="registerForm" />
   </BasicModal>
 </template>

@@ -9,6 +9,7 @@ import { Tag, Tooltip } from 'ant-design-vue';
 import Icon from '/@/components/Icon';
 import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
 import { findDictItemByCode } from '/@/api/system/dict';
+import { DeviceTypeEnum } from '../../../dataFlow/cpns/config';
 
 useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal);
 
@@ -16,17 +17,15 @@ export enum FormFieldsEnum {
   Name = 'name',
   Description = 'description',
   ScriptContent = 'scriptContent',
-  TbelContent = 'tbelContent',
   ServiceType = 'serviceType',
 }
 
 export interface FormFieldsValueType {
   [FormFieldsEnum.Name]: string;
   [FormFieldsEnum.ScriptContent]: ScriptEditorValueType;
-  [FormFieldsEnum.TbelContent]: ScriptEditorValueType;
   [FormFieldsEnum.Description]?: string;
   [FormFieldsEnum.ServiceType]?: string;
-  language: string;
+  scriptType: string;
 }
 
 export const formSchemas: FormSchema[] = [
@@ -65,32 +64,28 @@ export const formSchemas: FormSchema[] = [
         labelField: 'itemText',
         valueField: 'itemValue',
         onChange(e) {
-          if (e === 'SENSOR' || e === 'DIRECT_CONNECTION') {
-            formModel[FormFieldsEnum.ScriptContent].value = getDirectWithSensorScript().JavaScript;
-            formModel[FormFieldsEnum.TbelContent].value = getDirectWithSensorScript().TBEL;
-          } else {
-            formModel[FormFieldsEnum.ScriptContent].value = getGatewayScript().JavaScript;
-            formModel[FormFieldsEnum.TbelContent].value = getGatewayScript().TBEL;
-          }
+          const { jsScript, tbelScript, scriptLang } = (formModel[FormFieldsEnum.ScriptContent] ||
+            {}) as ScriptEditorValueType;
+
+          const { JavaScript, TBEL } =
+            e === DeviceTypeEnum.SENSOR || e === DeviceTypeEnum.DIRECT_CONNECTION
+              ? getDirectWithSensorScript()
+              : getGatewayScript();
+
+          formModel[FormFieldsEnum.ScriptContent] = {
+            scriptLang,
+            jsScript: scriptLang === ScriptLanguageEnum.JavaScript ? JavaScript : jsScript,
+            tbelScript: scriptLang === ScriptLanguageEnum.TBEL ? TBEL : tbelScript,
+          };
         },
       };
     },
   },
-  {
-    label: '',
-    field: 'language',
-    component: 'Input',
-    defaultValue: ScriptLanguageEnum.JavaScript,
-    slot: 'language',
-  },
-  //Javascript
+
   {
     label: '',
     field: FormFieldsEnum.ScriptContent,
     component: 'JavascriptEditorWithTestModal',
-    ifShow: ({ model }) => {
-      return model.language === ScriptLanguageEnum.JavaScript;
-    },
     componentProps: {
       buttonName: '测试转换脚本',
       javaScriptEditorProps: {
@@ -101,14 +96,14 @@ export const formSchemas: FormSchema[] = [
       messageValue: {
         params: '010304026C00883BF0',
       },
-      isShowLanguage: false,
       beforeTest: (params: Recordable) => {
         return { ...params, needMetadataAndMsgType: true };
       },
     },
     defaultValue: {
-      scriptLanguage: ScriptLanguageEnum.JavaScript,
-      value: getGatewayScript().JavaScript,
+      scriptLang: ScriptLanguageEnum.JavaScript,
+      jsScript: getGatewayScript().JavaScript,
+      tbelScript: getGatewayScript().TBEL,
     } as ScriptEditorValueType,
     changeEvent: 'update:value',
     valueField: 'value',
@@ -126,9 +121,13 @@ export const formSchemas: FormSchema[] = [
                     event: 'directWithSensor',
                     onClick: () => {
                       const { JavaScript, TBEL } = getDirectWithSensorScript();
+                      const { jsScript, tbelScript } = (model[FormFieldsEnum.ScriptContent] ||
+                        {}) as ScriptEditorValueType;
                       model[FormFieldsEnum.ScriptContent] = {
-                        scriptLanguage,
-                        value: scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : TBEL,
+                        scriptLang: scriptLanguage,
+                        jsScript:
+                          scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : jsScript,
+                        tbelScript: scriptLanguage === ScriptLanguageEnum.TBEL ? TBEL : tbelScript,
                       };
                     },
                   },
@@ -137,9 +136,13 @@ export const formSchemas: FormSchema[] = [
                     event: 'gateway',
                     onClick: () => {
                       const { JavaScript, TBEL } = getGatewayScript();
+                      const { jsScript, tbelScript } = (model[FormFieldsEnum.ScriptContent] ||
+                        {}) as ScriptEditorValueType;
                       model[FormFieldsEnum.ScriptContent] = {
-                        scriptLanguage,
-                        value: scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : TBEL,
+                        scriptLang: scriptLanguage,
+                        jsScript:
+                          scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : jsScript,
+                        tbelScript: scriptLanguage === ScriptLanguageEnum.TBEL ? TBEL : tbelScript,
                       };
                     },
                   },
@@ -169,96 +172,6 @@ export const formSchemas: FormSchema[] = [
       };
     },
   },
-  // TBEL
-  {
-    label: '',
-    field: FormFieldsEnum.TbelContent,
-    component: 'JavascriptEditorWithTestModal',
-    ifShow: ({ model }) => {
-      return model.language === ScriptLanguageEnum.TBEL;
-    },
-    componentProps: {
-      buttonName: '测试转换脚本',
-      javaScriptEditorProps: {
-        functionName: 'Transform',
-        paramsName: ['msg', 'metadata', 'msgType'],
-        scriptType: 'update',
-      },
-      messageValue: {
-        params: '010304026C00883BF0',
-      },
-      isShowLanguage: false,
-      beforeTest: (params: Recordable) => {
-        return { ...params, needMetadataAndMsgType: true };
-      },
-    },
-    defaultValue: {
-      scriptLanguage: ScriptLanguageEnum.TBEL,
-      value: getGatewayScript().TBEL,
-    } as ScriptEditorValueType,
-    changeEvent: 'update:value',
-    valueField: 'value',
-    renderComponentContent: ({ model }) => {
-      return {
-        beforeFormat: ({ scriptLanguage }) => {
-          return [
-            h(Tooltip, { title: '脚本用例' }, () =>
-              h(
-                Dropdown,
-                {
-                  trigger: ['click'],
-                  dropMenuList: [
-                    {
-                      text: '直连/子设备用例',
-                      event: 'directWithSensor',
-                      onClick: () => {
-                        const { JavaScript, TBEL } = getDirectWithSensorScript();
-                        model[FormFieldsEnum.TbelContent] = {
-                          scriptLanguage,
-                          value:
-                            scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : TBEL,
-                        };
-                      },
-                    },
-                    {
-                      text: '网关用例',
-                      event: 'gateway',
-                      onClick: () => {
-                        const { JavaScript, TBEL } = getGatewayScript();
-                        model[FormFieldsEnum.TbelContent] = {
-                          scriptLanguage,
-                          value:
-                            scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : TBEL,
-                        };
-                      },
-                    },
-                  ],
-                },
-                () =>
-                  h(
-                    Tag,
-                    { color: '#2a79ef', class: 'cursor-pointer' },
-                    {
-                      icon: () =>
-                        h(Icon, {
-                          icon: 'magic',
-                          prefix: 'mdi',
-                          size: 14,
-                          class: 'cursor-pointer svg:text-sm',
-                        }),
-                      default: () => '脚本用例',
-                    }
-                  )
-              )
-            ),
-            h(Tooltip, { title: '复制' }, () =>
-              h(Icon, { icon: 'copy-filled', prefix: 'ant-design', class: 'cursor-pointer' })
-            ),
-          ];
-        },
-      };
-    },
-  },
   {
     field: FormFieldsEnum.Description,
     label: '备注',

@@ -174,7 +174,7 @@
     }
   };
 
-  const testScriptLanguage = ref<string>(ScriptLanguageEnum.JavaScript);
+  const testScriptLanguage = ref<ScriptLanguageEnum>(ScriptLanguageEnum.JavaScript);
   const handleOpenTestModal = (record: TransportScriptRecordType) => {
     const { scriptLanguage = ScriptLanguageEnum.JavaScript, convertJs, convertTbel } = record;
     testScriptLanguage.value = scriptLanguage!;

@@ -150,8 +150,9 @@ export const formSchema: FormSchema[] = [
     label: '转换函数',
     changeEvent: 'update:value',
     defaultValue: {
-      value: 'return {msg: msg, metadata: metadata, msgType: msgType};',
-      scriptLanguage: ScriptLanguageEnum.JavaScript,
+      jsScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
+      scriptLang: ScriptLanguageEnum.JavaScript,
+      tbelScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
     },
     componentProps: {
       javaScriptEditorProps: {

@@ -32,6 +32,7 @@
     resetFields();
     setDrawerProps({ confirmLoading: false });
     isUpdate.value = data.isUpdate;
+
     switch (isUpdate.value) {
       case 'view':
         isView.value = false;
@@ -41,7 +42,10 @@
           loading: false,
         });
         editId.value = data.record.id;
-        setFieldsValue({ ...data.record, function: data.record?.configuration?.jsScript });
+        setFieldsValue({
+          ...data.record,
+          function: data?.record?.configuration,
+        });
         break;
       case true:
         isView.value = true;
@@ -51,7 +55,10 @@
           loading: false,
         });
         editId.value = data.record.id;
-        setFieldsValue({ ...data.record, function: data.record?.configuration?.jsScript });
+        setFieldsValue({
+          ...data.record,
+          function: data?.record?.configuration,
+        });
         break;
       case false:
         isView.value = true;
@@ -75,10 +82,9 @@
       setDrawerProps({ confirmLoading: true });
       const fieldsValue = await validate();
       if (!fieldsValue) return;
+
       await createOrEditTransformScriptApi({
-        configuration: {
-          jsScript: fieldsValue.function,
-        },
+        configuration: fieldsValue.function,
         type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode',
         ...fieldsValue,
         ...editIdPost,