Merge branch 'ft' into 'main_dev'

fix: 修复Teambition上的问题

See merge request yunteng/thingskit-front!533

(cherry picked from commit 6fee6dcc13983532958543c85383139aad19fdce)

c62f9e54 pref:优化测试接口表格，只有一项时，清除对应项
85cc1230 fix:DEFECT-1122 分页接口测试错误提示,修复post传参问题
e2c049f2 fix:DEFECT-1112 提示输入参数值 表格选择是否必须为是，则对应测试接口参数若为空则增加提示
f8d25bcd fix:DEFECT-1112 提示输入参数值 表格选择是否必须为是，则对应测试接口参数若为空则增加提示
eaaa19ee pref:调整脚本管理 转换函数
dda4b267 fix:DEFECT-1078 修复暗黑模式场景联动白框问题
b8876e1a fix:DEFECT-1079 修复暗黑模式转换脚本白框问题

 <template>
 <template>
-  <div :class="prefixCls">
+  <div
+    :class="prefixCls"
+    :style="{ backgroundColor: modeSwitch === 'dark' ? '#1f1f1f' : 'rgb(242, 242, 242)' }"
+  >
     <CollapseHeader
     <CollapseHeader
       v-bind="$props"
       v-bind="$props"
       :prefixCls="prefixCls"
       :prefixCls="prefixCls"
@@ -29,7 +32,7 @@
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { PropType } from 'vue';
-  import { ref } from 'vue';
+  import { ref, computed } from 'vue';
   // component
   // component
   import { Skeleton } from 'ant-design-vue';
   import { Skeleton } from 'ant-design-vue';
   import { CollapseTransition } from '/@/components/Transition';
   import { CollapseTransition } from '/@/components/Transition';
@@ -38,6 +41,7 @@
   // hook
   // hook
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { useAppStore } from '/@/store/modules/app';
 
 
   const props = defineProps({
   const props = defineProps({
     isClose: { type: Boolean, default: true },
     isClose: { type: Boolean, default: true },
@@ -64,6 +68,11 @@
      */
      */
     lazyTime: { type: Number, default: 0 },
     lazyTime: { type: Number, default: 0 },
   });
   });
+
+  const userStore = useAppStore();
+
+  const modeSwitch = computed((): string => userStore.getDarkMode);
+
   const emit = defineEmits(['expand', 'change', 'hchange']);
   const emit = defineEmits(['expand', 'change', 'hchange']);
 
 
   const show = ref(true);
   const show = ref(true);
@@ -92,7 +101,7 @@
   @prefix-cls: ~'@{namespace}-collapse-container';
   @prefix-cls: ~'@{namespace}-collapse-container';
 
 
   .@{prefix-cls} {
   .@{prefix-cls} {
-    background-color: @component-background;
+    // background-color: @component-background;
     border-radius: 2px;
     border-radius: 2px;
     transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 
 

@@ -18,6 +18,7 @@
               placeholder="请选择"
               placeholder="请选择"
               :options="selectOptions"
               :options="selectOptions"
               @change="handleChange"
               @change="handleChange"
+              @dropdownVisibleChange="hanldeDropdownVisibleChange"
               allowClear
               allowClear
             />
             />
           </td>
           </td>
@@ -111,16 +112,20 @@
 
 
   // 减少
   // 减少
   const remove = (item, index: number) => {
   const remove = (item, index: number) => {
-    if (tableArray.content.length !== 1) {
+    if (tableArray.content.length > 1) {
       selectOptions.value.forEach((ele) => {
       selectOptions.value.forEach((ele) => {
         if (ele.value == item.key) {
         if (ele.value == item.key) {
           ele.disabled = false;
           ele.disabled = false;
         }
         }
       });
       });
       tableArray.content.splice(index, 1);
       tableArray.content.splice(index, 1);
+    } else {
+      resetValue();
     }
     }
   };
   };
 
 
+  const hanldeDropdownVisibleChange = () => handleChange();
+
   //Select互斥
   //Select互斥
   const handleChange = () => {
   const handleChange = () => {
     selectOptions.value.forEach((ele) => {
     selectOptions.value.forEach((ele) => {
@@ -132,7 +137,7 @@
           element.value = '';
           element.value = '';
           element.editDisabled = true;
           element.editDisabled = true;
         }
         }
-        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
+        if (element.key === ele.value && element.key !== 'scope') {
           ele.disabled = true;
           ele.disabled = true;
         }
         }
       });
       });

@@ -18,6 +18,7 @@
               placeholder="请选择"
               placeholder="请选择"
               :options="selectOptions"
               :options="selectOptions"
               @change="handleChange"
               @change="handleChange"
+              @dropdownVisibleChange="hanldeDropdownVisibleChange"
               allowClear
               allowClear
             />
             />
           </td>
           </td>
@@ -111,13 +112,15 @@
 
 
   // 减少
   // 减少
   const remove = (item, index: number) => {
   const remove = (item, index: number) => {
-    if (tableArray.content.length !== 1) {
+    if (tableArray.content.length > 1) {
       selectOptions.value.forEach((ele) => {
       selectOptions.value.forEach((ele) => {
         if (ele.value == item.key) {
         if (ele.value == item.key) {
           ele.disabled = false;
           ele.disabled = false;
         }
         }
       });
       });
       tableArray.content.splice(index, 1);
       tableArray.content.splice(index, 1);
+    } else {
+      resetValue();
     }
     }
   };
   };
 
 
@@ -132,13 +135,15 @@
           element.value = '';
           element.value = '';
           element.editDisabled = true;
           element.editDisabled = true;
         }
         }
-        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
+        if (element.key === ele.value && element.key !== 'scope') {
           ele.disabled = true;
           ele.disabled = true;
         }
         }
       });
       });
     });
     });
   };
   };
 
 
+  const hanldeDropdownVisibleChange = () => handleChange();
+
   //获取数据
   //获取数据
   const getValue = () => {
   const getValue = () => {
     const assemblyData = tableArray.content.map((it) => {
     const assemblyData = tableArray.content.map((it) => {

@@ -31,6 +31,7 @@
   import moment from 'moment';
   import moment from 'moment';
   import { useUtils } from '../../../hooks/useUtils';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
   import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
 
   const emits = defineEmits(['testBodyInterface']);
   const emits = defineEmits(['testBodyInterface']);
 
 
@@ -40,6 +41,8 @@
     },
     },
   });
   });
 
 
+  const { createMessage } = useMessage();
+
   const showTestEditCell = ref(false);
   const showTestEditCell = ref(false);
 
 
   const excuteData = ref({});
   const excuteData = ref({});
@@ -63,13 +66,12 @@
   const getValue = async () => {
   const getValue = async () => {
     await nextTick();
     await nextTick();
     await nextTick(() => {
     await nextTick(() => {
-      console.log(props.data?.list);
       if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
       if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
         const getSingleKey = props.data?.list;
         const getSingleKey = props.data?.list;
-        const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
+        const getMuteKey = props.data?.list?.filter((it: any) => it.key?.split(',').length > 1);
         const getMuteKeys = getMultipleKeys(getMuteKey);
         const getMuteKeys = getMultipleKeys(getMuteKey);
         const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter(
         const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter(
-          (it: any) => it.key.split(',').length === 1
+          (it: any) => it.key?.split(',').length === 1
         );
         );
         testEditCellTableRef.value?.setTableArray(mergeKeys);
         testEditCellTableRef.value?.setTableArray(mergeKeys);
       } else if (props.data?.type === 'json') {
       } else if (props.data?.type === 'json') {
@@ -111,6 +113,7 @@
         return {
         return {
           key,
           key,
           value,
           value,
+          required: it.required,
         };
         };
       });
       });
   };
   };
@@ -120,6 +123,11 @@
     let params: any = {};
     let params: any = {};
     if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
     if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
       const getTable = getTestTableKeyValue();
       const getTable = getTestTableKeyValue();
+      const hasRequired = getTable?.some((it) => it.required === true && !it.value);
+      if (hasRequired) {
+        createMessage.error('选择项为必须的，参数不能为空');
+        throw new Error('选择项为必须的，参数不能为空');
+      }
       getTable?.map((it) => (params[it.key!] = it.value!));
       getTable?.map((it) => (params[it.key!] = it.value!));
     } else if (props.data?.type === 'json') {
     } else if (props.data?.type === 'json') {
       params = jsonEditorRef.value?.getJsonValue();
       params = jsonEditorRef.value?.getJsonValue();

@@ -228,6 +228,7 @@
   };
   };
 
 
   const getAttributeOptions = async (params) => {
   const getAttributeOptions = async (params) => {
+    console.log(params);
     const res = await getDeviceAttributes(params);
     const res = await getDeviceAttributes(params);
     if (Object.keys(res).length === 0) return (attributeOptions.value.length = 0);
     if (Object.keys(res).length === 0) return (attributeOptions.value.length = 0);
     attributeOptions.value = res?.map((item) => ({ label: item.name, value: item.identifier }));
     attributeOptions.value = res?.map((item) => ({ label: item.name, value: item.identifier }));
@@ -243,7 +244,9 @@
         if (f.key === 'organizationId') organizationId = f.value;
         if (f.key === 'organizationId') organizationId = f.value;
         if (f.key === 'entityId') f.value = null;
         if (f.key === 'entityId') f.value = null;
       });
       });
-      getAttributeOptions({ deviceProfileId: e.value });
+      if (e.value) {
+        getAttributeOptions({ deviceProfileId: e.value });
+      }
       if (organizationId !== '') {
       if (organizationId !== '') {
         getEntityOptions(organizationId, e.value);
         getEntityOptions(organizationId, e.value);
       }
       }
@@ -261,6 +264,9 @@
 </script>
 </script>
 
 
 <style scoped lang="less">
 <style scoped lang="less">
+  :deep(.ant-select-selector) {
+    max-width: 16vw;
+  }
   @table-color: #e5e7eb;
   @table-color: #e5e7eb;
 
 
   .table-border-color {
   .table-border-color {

@@ -36,7 +36,7 @@
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { getAuthCache } from '/@/utils/auth';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  // import { useGlobSetting } from '/@/hooks/setting';
+  import { useUtils } from '../../../hooks/useUtils';
 
 
   const emits = defineEmits(['emitExcute']);
   const emits = defineEmits(['emitExcute']);
 
 
@@ -56,8 +56,6 @@
 
 
   const socketUrls = ref('');
   const socketUrls = ref('');
 
 
-  // const { socketUrl } = useGlobSetting();
-
   const socketMessage: any = reactive({
   const socketMessage: any = reactive({
     server: ``,
     server: ``,
     sendValue: {
     sendValue: {
@@ -152,7 +150,7 @@
     apiUrl,
     apiUrl,
     headers = {},
     headers = {},
     params = {},
     params = {},
-    body,
+    body = {},
     joinPrefix = false
     joinPrefix = false
   ) => {
   ) => {
     switch (apiType) {
     switch (apiType) {
@@ -165,8 +163,9 @@
           }
           }
         );
         );
       case 'POST':
       case 'POST':
+        const { convertObj } = useUtils();
         return await otherHttp.post(
         return await otherHttp.post(
-          { url: apiUrl, data: body, headers, params },
+          { url: `${apiUrl}?${convertObj(params)}`, data: body, headers },
           {
           {
             apiUrl: '',
             apiUrl: '',
             joinPrefix,
             joinPrefix,

@@ -20,6 +20,7 @@
   import { ref, nextTick } from 'vue';
   import { ref, nextTick } from 'vue';
   import { Button } from 'ant-design-vue';
   import { Button } from 'ant-design-vue';
   import TestHeaderEditCellTable from './testEditHeaderCellTable.vue';
   import TestHeaderEditCellTable from './testEditHeaderCellTable.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
 
   const emits = defineEmits(['testHeaderInterface']);
   const emits = defineEmits(['testHeaderInterface']);
 
 
@@ -29,6 +30,8 @@
     },
     },
   });
   });
 
 
+  const { createMessage } = useMessage();
+
   const showTestEditCell = ref(false);
   const showTestEditCell = ref(false);
 
 
   const excuteData = ref({});
   const excuteData = ref({});
@@ -59,6 +62,11 @@
   //获取数据
   //获取数据
   const getTestValue = () => {
   const getTestValue = () => {
     const getTable = getTestTableKeyValue();
     const getTable = getTestTableKeyValue();
+    const hasRequired = getTable?.some((it) => it.required === true && !it.value);
+    if (hasRequired) {
+      createMessage.error('选择项为必须的，参数不能为空');
+      throw new Error('选择项为必须的，参数不能为空');
+    }
     const params: any = {};
     const params: any = {};
     getTable?.map((it: any) => (params[it.key!] = it.value!));
     getTable?.map((it: any) => (params[it.key!] = it.value!));
     excuteData.value = {
     excuteData.value = {

@@ -22,6 +22,7 @@
   import TestParamsCellTable from './testEditParamsCellTable.vue';
   import TestParamsCellTable from './testEditParamsCellTable.vue';
   import moment from 'moment';
   import moment from 'moment';
   import { useUtils } from '../../../hooks/useUtils';
   import { useUtils } from '../../../hooks/useUtils';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
 
   const emits = defineEmits(['testParamsInterface']);
   const emits = defineEmits(['testParamsInterface']);
 
 
@@ -31,6 +32,8 @@
     },
     },
   });
   });
 
 
+  const { createMessage } = useMessage();
+
   const showTestEditCell = ref(false);
   const showTestEditCell = ref(false);
 
 
   const excuteData = ref({});
   const excuteData = ref({});
@@ -92,6 +95,7 @@
         return {
         return {
           key,
           key,
           value,
           value,
+          required: it.required,
         };
         };
       });
       });
   };
   };
@@ -99,6 +103,11 @@
   //获取数据
   //获取数据
   const getTestValue = () => {
   const getTestValue = () => {
     const getTable = getTestTableKeyValue();
     const getTable = getTestTableKeyValue();
+    const hasRequired = getTable?.some((it) => it.required === true && !it.value);
+    if (hasRequired) {
+      createMessage.error('选择项为必须的，参数不能为空');
+      throw new Error('选择项为必须的，参数不能为空');
+    }
     const params: any = {};
     const params: any = {};
     getTable?.map((it) => (params[it.key!] = it.value!));
     getTable?.map((it) => (params[it.key!] = it.value!));
     if (params['keys']) {
     if (params['keys']) {

@@ -235,7 +235,9 @@
         if (f.key === 'organizationId') organizationId = f.value;
         if (f.key === 'organizationId') organizationId = f.value;
         if (f.key === 'entityId') f.value = null;
         if (f.key === 'entityId') f.value = null;
       });
       });
-      getAttributeOptions({ deviceProfileId: e.value });
+      if (e.value) {
+        getAttributeOptions({ deviceProfileId: e.value });
+      }
       if (organizationId !== '') {
       if (organizationId !== '') {
         getEntityOptions(organizationId, e.value);
         getEntityOptions(organizationId, e.value);
       }
       }

@@ -5,9 +5,14 @@ export const useUtils = () => {
     list?.forEach((it) => {
     list?.forEach((it) => {
       const keys = it.key.split(',');
       const keys = it.key.split(',');
       const temp = keys.map((item) => {
       const temp = keys.map((item) => {
-        const obj: { key: string; value: string } = { key: '', value: '' };
+        const obj: { key: string; value: string; required: boolean } = {
+          key: '',
+          value: '',
+          required: false,
+        };
         obj.key = item;
         obj.key = item;
         obj.value = item === 'scope' ? it.value : '';
         obj.value = item === 'scope' ? it.value : '';
+        obj.required = it.required;
         return obj;
         return obj;
       });
       });
       temps = temp;
       temps = temp;
@@ -36,5 +41,20 @@ export const useUtils = () => {
       type: '0',
       type: '0',
     },
     },
   };
   };
-  return { getMultipleKeys, pushObj, resetReqHttpType, resetUpdateSchema };
+  //对象转get params参数
+  const convertObj = (data: object) => {
+    const _result: any = [];
+    for (const key in data) {
+      const value = data[key];
+      if (value.constructor == Array) {
+        value.forEach(function (_value) {
+          _result.push(key + '=' + _value);
+        });
+      } else {
+        _result.push(key + '=' + value);
+      }
+    }
+    return _result.join('&');
+  };
+  return { getMultipleKeys, pushObj, resetReqHttpType, resetUpdateSchema, convertObj };
 };
 };

 <template>
 <template>
   <div>
   <div>
-    <CollapseContainer style="background-color: #f2f2f2" :title="`${title} ${index + 1}`">
+    <CollapseContainer :title="`${title} ${index + 1}`">
       <template #action>
       <template #action>
         <div class="flex">
         <div class="flex">
           <div class="flex">
           <div class="flex">

 <template>
 <template>
-  <CollapseContainer style="background-color: #f2f2f2" :title="`执行动作 ${actionIndex + 1}`">
+  <CollapseContainer :title="`执行动作 ${actionIndex + 1}`">
     <template #action>
     <template #action>
       <Tooltip title="移除" v-if="actionData.length > 1">
       <Tooltip title="移除" v-if="actionData.length > 1">
         <Icon
         <Icon

-<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/mode-javascript'; // 默认设置的语言模式
-  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
-
-  const emit = defineEmits(['register', 'isStatus', 'success']);
-  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,
-    });
-    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) {</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>
-    <a-form
-      ref="formRef"
-      :model="scriptForm"
-      name="basic"
-      :label-col="{ span: 4 }"
-      :wrapper-col="{ span: 16 }"
-      autocomplete="off"
-    >
-      <a-form-item
-        :label="ifAdd ? '名称' : '输入参数(params)'"
-        :name="ifAdd ? 'name' : 'params'"
-        :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
-      >
-        <a-input
-          v-if="ifAdd"
-          :maxlength="36"
-          v-model:value="scriptForm.name"
-          placeholder="请输入脚本名称"
-        />
-        <a-input
-          @change="handleInputChange"
-          v-else
-          v-model:value="scriptForm.params"
-          placeholder="请输入参数"
-        />
-      </a-form-item>
-      <a-form-item
-        label="上报数据类型"
-        name="dataType"
-        :rules="[{ required: true, message: '请选择上报数据类型' }]"
-      >
-        <a-space direction="vertical">
-          <a-radio-group v-model:value="scriptForm.dataType" :options="typeOptions" />
-        </a-space>
-      </a-form-item>
-      <a-form-item
-        label="保存原始数据"
-        name="saveOriginalData"
-        :rules="[{ required: true, message: '请选择保存原始数据' }]"
-      >
-        <a-space direction="vertical">
-          <a-radio-group v-model:value="scriptForm.saveOriginalData" :options="originalOptions" />
-        </a-space>
-      </a-form-item>
-      <a-form-item label="脚本内容" :name="ifAdd ? 'convertJs' : 'script'">
-        <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
-          <template #extra>
-            <a-button @click="handleFormat" size="small">格式化</a-button>
-            <Tooltip :title="defaultTitle" class="ml-2">
-              <QuestionCircleOutlined style="font-size: 1rem" />
-            </Tooltip>
-          </template>
-          <div ref="aceRef" class="overflow-hidden"></div>
-        </Card>
-        <Button @click="handleCopy" class="mt-4">
-          <template #icon>
-            <CopyOutlined />
-          </template>
-          copy
-        </Button>
-      </a-form-item>
-      <a-form-item
-        :label="ifAdd ? '备注' : '输出参数(output)'"
-        :name="ifAdd ? 'description' : 'output'"
-      >
-        <a-textarea
-          :rows="3"
-          v-if="ifAdd"
-          v-model:value="scriptForm.description"
-          placeholder="请输入备注"
-          :maxlength="255"
-        />
-        <a-textarea
-          :rows="3"
-          v-else
-          v-model:value="scriptForm.output"
-          placeholder="输出参数为服务端返回的内容"
-          :maxlength="255"
-        />
-      </a-form-item>
-    </a-form>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, unref, reactive, onMounted, toRefs, nextTick } from 'vue';
-  import ace from 'ace-builds';
-  import { Card, Button, Tooltip } from 'ant-design-vue';
-  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
-  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
-  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
-  import { CopyOutlined } from '@ant-design/icons-vue';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { findDictItemByCode } from '/@/api/system/dict';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-  import { defaultTitle } from './config.data';
-
-  defineEmits(['register']);
-  const props = defineProps({
-    ifAdd: { type: Boolean, default: true },
-  });
-  const scriptForm = reactive({
-    name: '',
-    description: '',
-    convertJs: '',
-    script: '',
-    params: '',
-    output: '',
-    dataType: 'HEX',
-    saveOriginalData: 'true',
-  });
-  const reportTypeOptions = reactive({
-    typeOptions: [],
-    originalOptions: [],
-  });
-  const { originalOptions, typeOptions } = toRefs(reportTypeOptions);
-  const { createMessage } = useMessage();
-  const { clipboardRef, copiedRef } = useCopyToClipboard();
-  const aceEditor = ref();
-  const aceRef = ref();
-  const setDefaultRadio = (p1, p2) => {
-    scriptForm.dataType = p1;
-    scriptForm.saveOriginalData = p2;
-  };
-  onMounted(async () => {
-    const res: any = await findDictItemByCode({
-      dictCode: 'report_data_type',
-    });
-    const resOriginal: any = await findDictItemByCode({
-      dictCode: 'original_data',
-    });
-    reportTypeOptions.typeOptions = res.map((m) => {
-      return { label: m.itemText, value: m.itemValue };
-    });
-    reportTypeOptions.originalOptions = resOriginal.map((m) => {
-      return { label: m.itemText, value: m.itemValue };
-    });
-  });
-  // 初始化编辑器
-  const initEditor = () => {
-    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,
-    });
-    aceEditor.value.setValue('');
-    beautify(aceEditor.value.session);
-    // scriptForm.convertJs = aceEditor.value.getValue();
-  };
-  const handleCopy = () => {
-    const valueRef = aceEditor.value.getValue();
-    const value = unref(valueRef);
-    if (!value) {
-      createMessage.warning('请输入要拷贝的内容！');
-      return;
-    }
-    clipboardRef.value = value;
-    if (unref(copiedRef)) {
-      createMessage.success('复制成功！');
-    }
-  };
-  const formRef = ref();
-  const getFormData = async () => {
-    const value = await formRef.value.validateFields();
-    if (props.ifAdd) {
-      scriptForm.convertJs = aceEditor.value.getValue();
-      if (scriptForm.convertJs == '') {
-        createMessage.error('请编写脚本内容');
-        throw '请编写脚本内容';
-      }
-    } else {
-      scriptForm.script = aceEditor.value.getValue();
-      if (scriptForm.script == '') {
-        createMessage.error('请编写脚本内容');
-        throw '请编写脚本内容';
-      }
-    }
-    if (!value) return;
-    if (scriptForm.params) {
-      const trimParams = scriptForm.params.replace(/\s*/g, '');
-      Reflect.set(value, 'params', trimParams);
-    }
-    if (scriptForm.convertJs.length > 1000) {
-      createMessage.error('脚本内容长度不能大于1000');
-      throw '脚本内容长度不能大于1000';
-    }
-    return {
-      ...value,
-      ...{ convertJs: props.ifAdd ? scriptForm.convertJs : null },
-      ...{ script: !props.ifAdd ? scriptForm.script : null },
-      ...{ saveOriginalData: scriptForm.saveOriginalData === 'false' ? false : true },
-    };
-  };
-  const handleInputChange = (e) => {
-    const trimParams = e.target.value.replace(/\s*/g, '');
-    Reflect.set(scriptForm, 'params', trimParams);
-  };
-  const setFormData = (v) => {
-    if (v) {
-      for (let i in scriptForm) {
-        Reflect.set(scriptForm, i, v[i]);
-      }
-      nextTick(() => {
-        setTimeout(() => {
-          scriptForm.saveOriginalData = v.saveOriginalData === false ? 'false' : 'true';
-          scriptForm.dataType = v.dataType;
-        }, 10);
-      });
-      aceEditor.value.setValue(v.convertJs);
-      handleFormat();
-    }
-  };
-  const setScriptContentData = (v) => {
-    aceEditor.value.setValue(v);
-    handleFormat();
-  };
-  const resetFormData = () => {
-    for (let i in scriptForm) {
-      Reflect.set(scriptForm, i, '');
-    }
-  };
-  const setScriptOutputData = (v) => {
-    scriptForm.output = v;
-  };
-  const handleFormat = () => beautify(aceEditor.value.session);
-
-  defineExpose({
-    initEditor,
-    getFormData,
-    resetFormData,
-    setFormData,
-    setScriptContentData,
-    setScriptOutputData,
-    setDefaultRadio,
-  });
-</script>
-<style lang="less" scoped>
-  @import url('./ConverScriptModal.less');
-</style>
+<template>
+  <div>
+    <a-form
+      ref="formRef"
+      :model="scriptForm"
+      name="basic"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 16 }"
+      autocomplete="off"
+    >
+      <a-form-item
+        :label="ifAdd ? '名称' : '输入参数(params)'"
+        :name="ifAdd ? 'name' : 'params'"
+        :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
+      >
+        <a-input
+          v-if="ifAdd"
+          :maxlength="36"
+          @change="handleInputChange"
+          v-model:value="scriptForm.name"
+          placeholder="请输入脚本名称"
+        />
+        <a-input
+          @change="handleInputChange"
+          v-else
+          v-model:value="scriptForm.params"
+          placeholder="请输入参数"
+        />
+      </a-form-item>
+      <a-form-item
+        label="上报数据类型"
+        name="dataType"
+        :rules="[{ required: false, message: '请选择上报数据类型' }]"
+      >
+        <a-space direction="vertical">
+          <a-radio-group v-model:value="scriptForm.dataType" :options="typeOptions" />
+        </a-space>
+      </a-form-item>
+      <a-form-item
+        label="脚本类型"
+        name="scriptType"
+        :rules="[{ required: true, message: '请选择脚本类型' }]"
+      >
+        <a-space direction="vertical">
+          <a-radio-group
+            @change="handleScriptType"
+            v-model:value="scriptForm.scriptType"
+            :options="scriptTypeOptions"
+          />
+        </a-space>
+      </a-form-item>
+      <a-form-item
+        label="保存原始数据"
+        name="saveOriginalData"
+        :rules="[{ required: true, message: '请选择保存原始数据' }]"
+      >
+        <a-space direction="vertical">
+          <a-radio-group v-model:value="scriptForm.saveOriginalData" :options="originalOptions" />
+        </a-space>
+      </a-form-item>
+      <a-form-item label="脚本内容" :name="ifAdd ? 'convertJs' : 'script'">
+        <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
+          <template #extra>
+            <a-button @click="handleFormat" size="small">格式化</a-button>
+            <Tooltip :title="defaultTitle" class="ml-2">
+              <QuestionCircleOutlined style="font-size: 1rem" />
+            </Tooltip>
+          </template>
+          {{ getAceClass }}
+          <div ref="aceRef" class="overflow-hidden"></div>
+        </Card>
+        <Button @click="handleCopy" class="mt-4">
+          <template #icon>
+            <CopyOutlined />
+          </template>
+          copy
+        </Button>
+      </a-form-item>
+      <a-form-item
+        :label="ifAdd ? '备注' : '输出参数(output)'"
+        :name="ifAdd ? 'description' : 'output'"
+      >
+        <a-textarea
+          :rows="3"
+          v-if="ifAdd"
+          v-model:value="scriptForm.description"
+          placeholder="请输入备注"
+          :maxlength="255"
+        />
+        <a-textarea
+          :rows="3"
+          v-else
+          v-model:value="scriptForm.output"
+          placeholder="输出参数为服务端返回的内容"
+          :maxlength="255"
+        />
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, unref, reactive, onMounted, toRefs, nextTick, computed } from 'vue';
+  import ace from 'ace-builds';
+  import { Card, Button, Tooltip } from 'ant-design-vue';
+  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 { CopyOutlined } from '@ant-design/icons-vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { defaultTitle, defaultScriptTypeContent } from './config.data';
+  import { useAppStore } from '/@/store/modules/app';
+
+  defineEmits(['register']);
+  const props = defineProps({
+    ifAdd: { type: Boolean, default: true },
+  });
+
+  const scriptForm = reactive({
+    name: '',
+    description: '',
+    convertJs: '',
+    script: '',
+    params: '',
+    output: '',
+    dataType: 'HEX',
+    scriptType: 'TRANSPORT_TCP_UP',
+    saveOriginalData: 'true',
+  });
+
+  const reportTypeOptions = reactive({
+    typeOptions: [],
+    originalOptions: [],
+    scriptTypeOptions: [],
+  });
+
+  const { originalOptions, typeOptions, scriptTypeOptions } = toRefs(reportTypeOptions);
+
+  const { createMessage } = useMessage();
+
+  const { clipboardRef, copiedRef } = useCopyToClipboard();
+
+  const aceEditor = ref();
+
+  const aceRef = ref();
+
+  const userStore = useAppStore();
+
+  const getAceClass = computed((): string => userStore.getDarkMode);
+
+  const setDefaultRadio = (p1, p2, p3) => {
+    scriptForm.dataType = p1;
+    scriptForm.saveOriginalData = p2;
+    scriptForm.scriptType = p3;
+  };
+
+  const getDictValue = async (dict_type) => {
+    const res = await findDictItemByCode({
+      dictCode: dict_type,
+    });
+    return res.map((m) => {
+      return { label: m.itemText, value: m.itemValue };
+    });
+  };
+
+  onMounted(async () => {
+    reportTypeOptions.typeOptions = (await getDictValue('report_data_type')) as never as any;
+    reportTypeOptions.originalOptions = (await getDictValue('original_data')) as never as any;
+    reportTypeOptions.scriptTypeOptions = (await getDictValue('script_type')) as never as any;
+  });
+
+  // 初始化编辑器
+  const initEditor = () => {
+    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('');
+    beautify(aceEditor.value.session);
+    switchScriptTypeGetContent('TRANSPORT_TCP_UP');
+  };
+
+  const handleScriptType = ({ target }) => {
+    const { value } = target;
+    switchScriptTypeGetContent(value);
+  };
+
+  const switchScriptTypeGetContent = (type) => {
+    if (type === 'TRANSPORT_TCP_DOWN')
+      Reflect.set(
+        defaultScriptTypeContent,
+        'TRANSPORT_TCP_DOWN',
+        `out.datas = "${scriptForm.params}";out.deviceName = "sensor";`
+      );
+    aceEditor.value.setValue(defaultScriptTypeContent[type]);
+  };
+
+  const handleCopy = () => {
+    const valueRef = aceEditor.value.getValue();
+    const value = unref(valueRef);
+    if (!value) {
+      createMessage.warning('请输入要拷贝的内容！');
+      return;
+    }
+    clipboardRef.value = value;
+    if (unref(copiedRef)) {
+      createMessage.success('复制成功！');
+    }
+  };
+
+  const formRef = ref();
+
+  const getFormData = async () => {
+    const value = await formRef.value.validateFields();
+    if (props.ifAdd) {
+      scriptForm.convertJs = aceEditor.value.getValue();
+      if (scriptForm.convertJs == '') {
+        createMessage.error('请编写脚本内容');
+        throw '请编写脚本内容';
+      }
+    } else {
+      scriptForm.script = aceEditor.value.getValue();
+      if (scriptForm.script == '') {
+        createMessage.error('请编写脚本内容');
+        throw '请编写脚本内容';
+      }
+    }
+    if (!value) return;
+    if (scriptForm.params) {
+      const trimParams = scriptForm.params.replace(/\s*/g, '');
+      Reflect.set(value, 'params', trimParams);
+    }
+    if (scriptForm.convertJs.length > 1000) {
+      createMessage.error('脚本内容长度不能大于1000');
+      throw '脚本内容长度不能大于1000';
+    }
+    return {
+      ...value,
+      ...{ convertJs: props.ifAdd ? scriptForm.convertJs : null },
+      ...{ script: !props.ifAdd ? scriptForm.script : null },
+      ...{ saveOriginalData: scriptForm.saveOriginalData === 'false' ? false : true },
+    };
+  };
+
+  const handleInputChange = (e) => {
+    const trimParams = e.target.value.replace(/\s*/g, '');
+    Reflect.set(scriptForm, 'params', trimParams);
+    if (scriptForm.scriptType === 'TRANSPORT_TCP_DOWN') {
+      aceEditor.value.setValue(`out.datas = "${scriptForm.params}";out.deviceName = "sensor";`);
+    }
+  };
+
+  const setFormData = (v) => {
+    if (v) {
+      for (let i in scriptForm) {
+        Reflect.set(scriptForm, i, v[i]);
+      }
+      nextTick(() => {
+        setTimeout(() => {
+          scriptForm.saveOriginalData = v.saveOriginalData === false ? 'false' : 'true';
+          scriptForm.dataType = v.dataType;
+        }, 10);
+      });
+      aceEditor.value.setValue(v.convertJs);
+      handleFormat();
+    }
+  };
+
+  const setScriptContentData = (v) => {
+    aceEditor.value.setValue(v);
+    handleFormat();
+  };
+
+  const resetFormData = () => {
+    for (let i in scriptForm) {
+      Reflect.set(scriptForm, i, '');
+    }
+  };
+
+  const setScriptOutputData = (v) => {
+    scriptForm.output = v;
+  };
+
+  const handleFormat = () => beautify(aceEditor.value.session);
+
+  defineExpose({
+    initEditor,
+    getFormData,
+    resetFormData,
+    setFormData,
+    setScriptContentData,
+    setScriptOutputData,
+    setDefaultRadio,
+  });
+</script>
+<style lang="less" scoped>
+  @import url('./ConverScriptModal.less');
+</style>

-<template>
-  <div>
-    <BasicModal
-      destroyOnClose
-      v-bind="$attrs"
-      width="60rem"
-      @register="register"
-      :title="getTitle"
-      :minHeight="500"
-      @cancel="handleCancel"
-      @ok="handleSubmit"
-    >
-      <ConverScript :ifAdd="isTest ? false : true" ref="converScriptRef" />
-    </BasicModal>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, computed, unref, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import ConverScript from './ConverScript.vue';
-  import {
-    createOrEditScriptManage,
-    getScriptManageDetail,
-    testScriptManage,
-  } from '/@/api/scriptmanage/scriptManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const emits = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
-  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
-  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
-  const isUpdate = ref(false);
-  const isViewDetail = ref('');
-  const isTest = ref(false);
-  const isText = ref('');
-  const isTitle = ref('');
-  const editData = reactive({
-    data: {},
-  });
-  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    setModalProps({ loading: true });
-    handleCancel(false);
-    isUpdate.value = data.isUpdate;
-    isViewDetail.value = data.isView;
-    isTest.value = data.isTest;
-    isText.value = data.isText;
-    isTitle.value = data.isTitle;
-    editData.data = data.record;
-    setModalProps({ loading: false });
-    converScriptRef.value?.initEditor();
-    if (!unref(isViewDetail)) {
-      const title =
-        unref(isTitle) == 'edit'
-          ? '编辑转换脚本'
-          : unref(isTitle) == 'add'
-          ? '新增转换脚本'
-          : '测试转换脚本';
-      const okText = isText.value == 'test' ? '测试' : '确定';
-      if (unref(isTitle) == 'add') {
-        converScriptRef.value?.setDefaultRadio('HEX', 'true');
-      }
-      if (unref(isTitle) == 'edit') {
-        converScriptRef.value?.setFormData(data.record);
-      }
-      if (unref(isTitle) == 'test') {
-        if (data.record) {
-          const res = await getScriptManageDetail(data.record);
-          converScriptRef.value?.setFormData(res);
-        } else {
-          converScriptRef.value?.setDefaultRadio('HEX', 'true');
-        }
-      }
-      setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
-      if (!unref(isUpdate)) {
-      }
-    } else {
-      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
-      const res = await getScriptManageDetail(data.record.id);
-      converScriptRef.value?.setFormData(res || {});
-    }
-  });
-
-  const handleSubmit = async () => {
-    setModalProps({ confirmLoading: true });
-    try {
-      const val = await converScriptRef.value?.getFormData();
-      const tempObj = {
-        ...editData.data,
-        ...val,
-      };
-      const res: any =
-        isText.value == 'test'
-          ? await testScriptManage(val)
-          : await createOrEditScriptManage(tempObj);
-      createMessage.success(
-        unref(isTitle) == 'edit'
-          ? '编辑转换脚本成功'
-          : unref(isTitle) == 'add'
-          ? '新增转换脚本成功'
-          : '测试转换脚本成功'
-      );
-      if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
-        setTimeout(() => {
-          closeModal();
-        }, 10);
-        emits('success', {
-          res,
-          text: isText.value,
-        });
-      } else {
-        if (res) {
-          converScriptRef.value?.setScriptOutputData(res?.output || res?.error);
-        }
-      }
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
-  };
-  const handleCancel = (flag) => {
-    if (flag) {
-      closeModal();
-    }
-    converScriptRef.value?.resetFormData();
-  };
-</script>
-<style lang="less" scoped>
-  @import url('./ConverScriptModal.less');
-</style>
+<template>
+  <div>
+    <BasicModal
+      destroyOnClose
+      v-bind="$attrs"
+      width="60rem"
+      @register="register"
+      :title="getTitle"
+      :minHeight="500"
+      @cancel="handleCancel"
+      @ok="handleSubmit"
+    >
+      <ConverScript :ifAdd="isTest ? false : true" ref="converScriptRef" />
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import ConverScript from './ConverScript.vue';
+  import {
+    createOrEditScriptManage,
+    getScriptManageDetail,
+    testScriptManage,
+  } from '/@/api/scriptmanage/scriptManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const emits = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
+  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
+  const isUpdate = ref(false);
+  const isViewDetail = ref('');
+  const isTest = ref(false);
+  const isText = ref('');
+  const isTitle = ref('');
+  const editData = reactive({
+    data: {},
+  });
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    handleCancel(false);
+    isUpdate.value = data.isUpdate;
+    isViewDetail.value = data.isView;
+    isTest.value = data.isTest;
+    isText.value = data.isText;
+    isTitle.value = data.isTitle;
+    editData.data = data.record;
+    setModalProps({ loading: false });
+    converScriptRef.value?.initEditor();
+    if (!unref(isViewDetail)) {
+      const title =
+        unref(isTitle) == 'edit'
+          ? '编辑转换脚本'
+          : unref(isTitle) == 'add'
+          ? '新增转换脚本'
+          : '测试转换脚本';
+      const okText = isText.value == 'test' ? '测试' : '确定';
+      if (unref(isTitle) == 'add') {
+        converScriptRef.value?.setDefaultRadio('HEX', 'true', 'TRANSPORT_TCP_UP');
+      }
+      if (unref(isTitle) == 'edit') {
+        converScriptRef.value?.setFormData(data.record);
+      }
+      if (unref(isTitle) == 'test') {
+        if (data.record) {
+          const res = await getScriptManageDetail(data.record);
+          converScriptRef.value?.setFormData(res);
+        } else {
+          converScriptRef.value?.setDefaultRadio('HEX', 'true', 'TRANSPORT_TCP_UP');
+        }
+      }
+      setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
+      if (!unref(isUpdate)) {
+      }
+    } else {
+      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
+      const res = await getScriptManageDetail(data.record.id);
+      converScriptRef.value?.setFormData(res || {});
+    }
+  });
+
+  const handleSubmit = async () => {
+    setModalProps({ confirmLoading: true });
+    try {
+      const val = await converScriptRef.value?.getFormData();
+      const tempObj = {
+        ...editData.data,
+        ...val,
+      };
+      const res: any =
+        isText.value == 'test'
+          ? await testScriptManage(val)
+          : await createOrEditScriptManage(tempObj);
+      createMessage.success(
+        unref(isTitle) == 'edit'
+          ? '编辑转换脚本成功'
+          : unref(isTitle) == 'add'
+          ? '新增转换脚本成功'
+          : '测试转换脚本成功'
+      );
+      if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
+        setTimeout(() => {
+          closeModal();
+        }, 10);
+        emits('success', {
+          res,
+          text: isText.value,
+        });
+      } else {
+        if (res) {
+          converScriptRef.value?.setScriptOutputData(res?.output || res?.error);
+        }
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  };
+  const handleCancel = (flag) => {
+    if (flag) {
+      closeModal();
+    }
+    converScriptRef.value?.resetFormData();
+  };
+</script>
+<style lang="less" scoped>
+  @import url('./ConverScriptModal.less');
+</style>

-import { BasicColumn, FormSchema } from '/@/components/Table';
-import moment from 'moment';
-import { h } from 'vue';
-
-// 表格配置
-export const columns: BasicColumn[] = [
-  {
-    title: '脚本名称',
-    dataIndex: 'name',
-    width: 80,
-  },
-  {
-    title: '脚本状态',
-    dataIndex: 'status',
-    width: 120,
-    slots: { customRender: 'status' },
-  },
-  {
-    title: '脚本内容',
-    dataIndex: 'convertJs',
-    width: 120,
-    slots: { customRender: 'convertJs' },
-  },
-  {
-    title: '备注',
-    dataIndex: 'description',
-    width: 120,
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180,
-  },
-];
-
-// 查询配置
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '脚本名称',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入配置名称',
-    },
-  },
-  {
-    field: 'sendTime',
-    label: '创建时间',
-    component: 'RangePicker',
-    componentProps: {
-      showTime: {
-        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-      },
-    },
-    colProps: { span: 6 },
-  },
-];
-
-export const defaultTitle = h('div', { style: 'background:#404040' }, [
-  h('h3', { style: 'color:white' }, '示例'),
-  h('h3', { style: 'color:white' }, '输入参数:'),
-  h('h3', { style: 'color:white' }, '0103040150008D3BBB'),
-  h('h3', { style: 'color:white' }, [
-    h('h3', { style: 'color:white' }, '脚本内容:'),
-    h(
-      'h3',
-      { style: 'color:white' },
-      "out.humidity = (parseInt('0x'+params.substr(6, 4))*0.1).toFixed(2);"
-    ),
-    h(
-      'h3',
-      { style: 'color:white' },
-      "out.temperature = (parseInt('0x'+params.substr(10, 4))*0.1).toFixed(2);"
-    ),
-    h('h3', { style: 'color:white' }, '输出参数:'),
-    h('h3', { style: 'color:white' }, "{'humidity':'33.60','temperature':'14.10'}"),
-  ]),
-]);
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+import { h } from 'vue';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '脚本名称',
+    dataIndex: 'name',
+    width: 80,
+  },
+  {
+    title: '脚本状态',
+    dataIndex: 'status',
+    width: 120,
+    slots: { customRender: 'status' },
+  },
+  {
+    title: '脚本内容',
+    dataIndex: 'convertJs',
+    width: 120,
+    slots: { customRender: 'convertJs' },
+  },
+  {
+    title: '备注',
+    dataIndex: 'description',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '脚本名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: 'sendTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const defaultTitle = h('div', { style: 'background:#404040' }, [
+  h('h3', { style: 'color:white' }, '示例'),
+  h('h3', { style: 'color:white' }, '输入参数:'),
+  h('h3', { style: 'color:white' }, '0103040150008D3BBB'),
+  h('h3', { style: 'color:white' }, [
+    h('h3', { style: 'color:white' }, '脚本内容:'),
+    h(
+      'h3',
+      { style: 'color:white' },
+      "out.humidity = (parseInt('0x'+params.substr(6, 4))*0.1).toFixed(2);"
+    ),
+    h(
+      'h3',
+      { style: 'color:white' },
+      "out.temperature = (parseInt('0x'+params.substr(10, 4))*0.1).toFixed(2);"
+    ),
+    h('h3', { style: 'color:white' }, '输出参数:'),
+    h('h3', { style: 'color:white' }, "{'humidity':'33.60','temperature':'14.10'}"),
+  ]),
+]);
+
+export const defaultScriptTypeContent = {
+  TRANSPORT_TCP_UP:
+    'var attrData = {};var teleData = {};teleData.source= params;out.datas = teleData;out.telemetry =true;out.ackMsg = params;out.deviceName = "sensor";out.ts = Date.now();',
+  TRANSPORT_TCP_DOWN: 'out.datas = "";out.deviceName = "sensor";',
+  TRANSPORT_TCP_AUTH: 'out.password = params;out.success = params;',
+};