Merge branch 'fix/DEFECT-1339' into 'main_dev'

fix: DEFECT-1339转换脚本新增messageType参数

See merge request yunteng/thingskit-front!640

@@ -8,6 +8,31 @@ export enum StatusEnum {
   DISABLE = 0,
 }
 
+export enum ScriptMessageTypeEnum {
+  '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 const columns: BasicColumn[] = [
   {
     title: '名称',

-<template>
-  <div>
-    <BasicDrawer
-      v-bind="$attrs"
-      :title="getTitle"
-      @register="register"
-      width="500px"
-      @ok="handleSubmit"
-      showFooter
-    >
-      <BasicForm @register="registerForm">
-        <template #function>
-          <Card title="转换函数" :bodyStyle="{ padding: 0, height: '280px' }">
-            <template #extra>
-              <Tag color="blue">Transform Function</Tag>
-              <a-button @click="handleFormat" size="small">格式化</a-button>
-            </template>
-            <div class="ml-8">function Transform(msg, metadata) {</div>
-            <div ref="aceRef" class="overflow-hidden"></div>
-            <div class="ml-7">}</div>
-          </Card>
-          <a-button type="primary" class="mt-4" @click="testTransformFunc">测试转换功能</a-button>
-        </template>
-      </BasicForm>
-    </BasicDrawer>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
-  import { useDrawerInner, BasicDrawer } from '/@/components/Drawer/index';
-  import { useForm, BasicForm } from '/@/components/Form/index';
-  import { formSchema } from '../config/config.data';
-  import { Card, Tag } from 'ant-design-vue';
-  import { createOrEditTransformScriptApi } from '/@/api/device/TransformScriptApi';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import ace from 'ace-builds';
-  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
-  import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题
-  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
-  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
-  import { useAppStore } from '/@/store/modules/app';
-
-  const emit = defineEmits(['register', 'isStatus', 'success']);
-  const userStore = useAppStore();
-  const getAceClass = computed((): string => userStore.getDarkMode);
-  const isUpdate: any = ref(false);
-  const isView = ref(true);
-  const aceEditor = ref();
-  const aceRef = ref();
-  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
-  const editId = ref('');
-  const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
-    resetFields();
-    setDrawerProps({ confirmLoading: false });
-    isUpdate.value = data.isUpdate;
-    initEditor(data.record?.configuration.jsScript);
-    switch (isUpdate.value) {
-      case 'view':
-        isView.value = false;
-        setDrawerProps({
-          showFooter: unref(isView),
-          title: '查看转换脚本',
-          loading: false,
-        });
-        editId.value = data.record.id;
-        setFieldsValue(data.record);
-        break;
-      case true:
-        isView.value = true;
-        setDrawerProps({
-          showFooter: unref(isView),
-          title: '编辑转换脚本',
-          loading: false,
-        });
-        editId.value = data.record.id;
-        setFieldsValue(data.record);
-        break;
-      case false:
-        isView.value = true;
-        setDrawerProps({
-          showFooter: unref(isView),
-          title: '新增转换脚本',
-          loading: false,
-        });
-        break;
-    }
-  });
-  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
-    showActionButtonGroup: false,
-    colProps: { span: 24 },
-    schemas: formSchema,
-  });
-
-  // 初始化编辑器
-  const initEditor = (jsScript?: string) => {
-    aceEditor.value = ace.edit(aceRef.value, {
-      maxLines: 12, // 最大行数，超过会自动出现滚动条
-      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-      fontSize: 14, // 编辑器内字体大小
-      theme: 'ace/theme/chrome', // 默认设置的主题
-      mode: 'ace/mode/javascript', // 默认设置的语言模式
-      tabSize: 2, // 制表符设置为 4 个空格大小
-    });
-
-    aceEditor.value.setOptions({
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
-      theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
-    });
-    aceEditor.value.setValue(jsScript ?? 'return {msg: msg, metadata: metadata};');
-    beautify(aceEditor.value.session);
-  };
-
-  const testTransformFunc = () => {
-    closeDrawer();
-    const jsCode = aceEditor.value.getValue();
-    emit('isStatus', { status: 1, jsCode });
-  };
-  const handleSubmit = async () => {
-    const editIdPost = isUpdate.value ? { id: editId.value } : {};
-    try {
-      setDrawerProps({ confirmLoading: true });
-      const fieldsValue = await validate();
-      if (!fieldsValue) return;
-      await createOrEditTransformScriptApi({
-        configuration: {
-          jsScript: aceEditor.value.getValue(),
-        },
-        type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode',
-        ...fieldsValue,
-        ...editIdPost,
-      });
-      closeDrawer();
-      emit('success');
-      const { createMessage } = useMessage();
-      createMessage.success('保存成功');
-    } catch (e) {
-    } finally {
-      setTimeout(() => {
-        setDrawerProps({ confirmLoading: false });
-      }, 300);
-    }
-  };
-  const handleFormat = () => {
-    beautify(aceEditor.value.session);
-  };
-  defineExpose({ aceEditor });
-</script>
+<template>
+  <div>
+    <BasicDrawer
+      v-bind="$attrs"
+      :title="getTitle"
+      @register="register"
+      width="500px"
+      @ok="handleSubmit"
+      showFooter
+    >
+      <BasicForm @register="registerForm">
+        <template #function>
+          <Card title="转换函数" :bodyStyle="{ padding: 0, height: '280px' }">
+            <template #extra>
+              <Tag color="blue">Transform Function</Tag>
+              <a-button @click="handleFormat" size="small">格式化</a-button>
+            </template>
+            <div class="ml-8">function Transform(msg, metadata, msgType) {</div>
+            <div ref="aceRef" class="overflow-hidden"></div>
+            <div class="ml-7">}</div>
+          </Card>
+          <a-button type="primary" class="mt-4" @click="testTransformFunc">测试转换功能</a-button>
+        </template>
+      </BasicForm>
+    </BasicDrawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { useDrawerInner, BasicDrawer } from '/@/components/Drawer/index';
+  import { useForm, BasicForm } from '/@/components/Form/index';
+  import { formSchema } from '../config/config.data';
+  import { Card, Tag } from 'ant-design-vue';
+  import { createOrEditTransformScriptApi } from '/@/api/device/TransformScriptApi';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import ace from 'ace-builds';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+  import { useAppStore } from '/@/store/modules/app';
+
+  const emit = defineEmits(['register', 'isStatus', 'success']);
+  const userStore = useAppStore();
+  const getAceClass = computed((): string => userStore.getDarkMode);
+  const isUpdate: any = ref(false);
+  const isView = ref(true);
+  const aceEditor = ref();
+  const aceRef = ref();
+  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
+  const editId = ref('');
+  const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = data.isUpdate;
+    initEditor(data.record?.configuration.jsScript);
+    switch (isUpdate.value) {
+      case 'view':
+        isView.value = false;
+        setDrawerProps({
+          showFooter: unref(isView),
+          title: '查看转换脚本',
+          loading: false,
+        });
+        editId.value = data.record.id;
+        setFieldsValue(data.record);
+        break;
+      case true:
+        isView.value = true;
+        setDrawerProps({
+          showFooter: unref(isView),
+          title: '编辑转换脚本',
+          loading: false,
+        });
+        editId.value = data.record.id;
+        setFieldsValue(data.record);
+        break;
+      case false:
+        isView.value = true;
+        setDrawerProps({
+          showFooter: unref(isView),
+          title: '新增转换脚本',
+          loading: false,
+        });
+        break;
+    }
+  });
+  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+    showActionButtonGroup: false,
+    colProps: { span: 24 },
+    schemas: formSchema,
+  });
+
+  // 初始化编辑器
+  const initEditor = (jsScript?: string) => {
+    aceEditor.value = ace.edit(aceRef.value, {
+      maxLines: 12, // 最大行数，超过会自动出现滚动条
+      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode: 'ace/mode/javascript', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 4 个空格大小
+    });
+
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
+    });
+    aceEditor.value.setValue(
+      jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};'
+    );
+    beautify(aceEditor.value.session);
+  };
+
+  const testTransformFunc = () => {
+    closeDrawer();
+    const jsCode = aceEditor.value.getValue();
+    emit('isStatus', { status: 1, jsCode });
+  };
+  const handleSubmit = async () => {
+    const editIdPost = isUpdate.value ? { id: editId.value } : {};
+    try {
+      setDrawerProps({ confirmLoading: true });
+      const fieldsValue = await validate();
+      if (!fieldsValue) return;
+      await createOrEditTransformScriptApi({
+        configuration: {
+          jsScript: aceEditor.value.getValue(),
+        },
+        type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode',
+        ...fieldsValue,
+        ...editIdPost,
+      });
+      closeDrawer();
+      emit('success');
+      const { createMessage } = useMessage();
+      createMessage.success('保存成功');
+    } catch (e) {
+    } finally {
+      setTimeout(() => {
+        setDrawerProps({ confirmLoading: false });
+      }, 300);
+    }
+  };
+  const handleFormat = () => {
+    beautify(aceEditor.value.session);
+  };
+  defineExpose({ aceEditor });
+</script>

@@ -4,11 +4,25 @@
     <div class="h-full flex p-4">
       <div class="flex flex-col w-1/2">
         <div class="flex-1 mr-4 mb-4">
-          <Card title="消息" :bodyStyle="cardStyle">
+          <Card :bodyStyle="cardStyle">
+            <template #title>
+              <div class="w-3/4 flex">
+                <span class="mr-2">消息类型</span>
+                <Select
+                  v-model:value="messageType"
+                  class="flex-1 mr-2"
+                  :options="getScriptMessageTypeOptions"
+                  placeholder="请选择消息类型"
+                />
+              </div>
+              <div>消息</div>
+            </template>
             <template #extra>
-              <Tag color="blue">Message</Tag>
-              <a-button @click="handleFormatJson" size="small">格式化</a-button>
-              <a-button @click="handleMiniJson" size="small" class="ml-2">收起</a-button>
+              <div>
+                <Tag color="blue">Message</Tag>
+                <a-button @click="handleFormatJson" size="small">格式化</a-button>
+                <a-button @click="handleMiniJson" size="small" class="ml-2">收起</a-button>
+              </div>
             </template>
             <div ref="jsoneditorRef" style="height: 100%"></div>
           </Card>
@@ -23,7 +37,7 @@
                 <QuestionCircleOutlined class="ml-2" style="font-size: 1rem" />
               </Tooltip>
             </template>
-            <div class="ml-8">function Transform(msg, metadata) {</div>
+            <div class="ml-8">function Transform(msg, metadata, msgType) {</div>
             <div ref="aceRef" style="height: calc(100% - 44px)"></div>
             <div class="ml-7">}</div>
           </Card>
@@ -69,24 +83,27 @@
       centered
       v-bind="$attrs"
     >
-      <h2> function Transform(msg,metadata): {msg: object, metadata: object} </h2>
+      <h2> function Transform(msg,metadata): {msg: object, metadata: object, msgType: string} </h2>
       <li> 将输入消息、元数据转换为输出消息的 JavaScript 函数 </li>
       <h2>参数:</h2>
       <ul>
         <li>msg: {[key: string]: any} - 是消息有效负载键/值对象。</li>
-        <li>metadata: {[key: string]: string} - 是消息元数据键/值映射，其中键和值都是字符串。</li>
+        <li>metadata: {[key: string]: string} - 是消息元数据键/值映射, 其中键和值都是字符串。</li>
+        <li>msgType: string - 是包含消息类型的字符串。有关常用值, 请参见MessageType enum。</li>
       </ul>
       <h2>返回值:</h2>
       <ul>
-        <li> { msg?: {[key: string]: any}, metadata?: {[key: string]: string} } </li>
+        <li>
+          { msg?: {[key: string]: any}, metadata?: {[key: string]: string}, msgType?: string }
+        </li>
         <li> 结果对象中的所有字段都是可选的，如果未指定，将从原始消息中获取。 </li>
       </ul>
     </BasicModal>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, defineComponent } from 'vue';
-  import { Card, Tag, Tooltip } from 'ant-design-vue';
+  import { ref, onMounted, defineComponent, computed, unref } from 'vue';
+  import { Card, Tag, Tooltip, Select } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { Description, DescItem, useDescription } from '/@/components/Description/index';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -100,6 +117,7 @@
   import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
   import 'ace-builds/src-noconflict/ext-language_tools.js'; //语言提示
   import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js'; //格式化
+  import { ScriptMessageTypeEnum } from '../config/config.data';
   // !!!important 重要，配置ace编辑器的错误提示，基础路径。否则会加载不到相关web Worker,就没有syntax validation提示
   ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.14/src-noconflict/');
   defineComponent({
@@ -120,6 +138,15 @@
   const aceEditor = ref();
   const aceRef = ref();
   const emit = defineEmits(['isStatus']);
+
+  const messageType = ref(ScriptMessageTypeEnum['Post telemetry']);
+  const getScriptMessageTypeOptions = computed(() =>
+    Object.keys(ScriptMessageTypeEnum).map((item) => ({
+      label: item,
+      value: ScriptMessageTypeEnum[item],
+    }))
+  );
+
   function initEditor() {
     let options = {
       mode: 'code',
@@ -200,7 +227,12 @@
       const metadata = mataData;
       const jsCode = aceEditor.value.getValue();
       // 执行动态Javascript脚本
-      let result = Function('msg', 'metadata', jsCode)(msg, metadata);
+      let result = Function(
+        'msg',
+        'metadata',
+        'msgType',
+        jsCode
+      )(msg, metadata, unref(messageType));
       // 设置输出值
       outputEditor.value.set(result);
     } catch (e) {