fix: 修复脚本管理规则链转换脚本数据保存问题

loveumiko
1 parent 80350bc2
Showing 1 changed file with 7 additions and 62 deletions
src/views/rule/script/cpns/ScriptDrawer.vue
--- a/src/views/rule/script/cpns/ScriptDrawer.vue
View file @5d00b40
+++ b/src/views/rule/script/cpns/ScriptDrawer.vue
View file @5d00b40
@@ -6,22 +6,10 @@
       @register="register"
       width="500px"
       @ok="handleSubmit"
+      destroyOnClose
       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>
+      <BasicForm @register="registerForm" />
     </BasicDrawer>
   </div>
 </template>
@@ -31,30 +19,19 @@
   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;
@@ -64,7 +41,7 @@
           loading: false,
         });
         editId.value = data.record.id;
-        setFieldsValue(data.record);
+        setFieldsValue({ ...data.record, function: data.record?.configuration?.jsScript });
         break;
       case true:
         isView.value = true;
@@ -74,7 +51,7 @@
           loading: false,
         });
         editId.value = data.record.id;
-        setFieldsValue(data.record);
+        setFieldsValue({ ...data.record, function: data.record?.configuration?.jsScript });
         break;
       case false:
         isView.value = true;
@@ -88,38 +65,10 @@
   });
   const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
     showActionButtonGroup: false,
-    colProps: { span: 24 },
+    baseColProps: { 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};'
-    );
-    setFieldsValue({ function: '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 {
@@ -128,7 +77,7 @@
       if (!fieldsValue) return;
       await createOrEditTransformScriptApi({
         configuration: {
-          jsScript: aceEditor.value.getValue(),
+          jsScript: fieldsValue.function,
         },
         type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode',
         ...fieldsValue,
@@ -145,8 +94,4 @@
       }, 300);
     }
   };
-  const handleFormat = () => {
-    beautify(aceEditor.value.session);
-  };
-  defineExpose({ aceEditor });
 </script>