Showing
5 changed files
with
34 additions
and
4 deletions
| 1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
| 2 | import { Card, Select, Tag, Form, Button } from 'ant-design-vue'; | 2 | import { Card, Select, Tag, Form, Button } from 'ant-design-vue'; |
| 3 | - import { ref, toRaw, unref, watch } from 'vue'; | 3 | + import { nextTick, ref, toRaw, unref, watch } from 'vue'; |
| 4 | import { MessageTypesEnum, MessageTypesNameEnum } from '../../../enum/form'; | 4 | import { MessageTypesEnum, MessageTypesNameEnum } from '../../../enum/form'; |
| 5 | import { JSONEditor } from '/@/components/CodeEditor'; | 5 | import { JSONEditor } from '/@/components/CodeEditor'; |
| 6 | import { Icon } from '/@/components/Icon'; | 6 | import { Icon } from '/@/components/Icon'; |
| @@ -38,6 +38,8 @@ | @@ -38,6 +38,8 @@ | ||
| 38 | (eventName: 'save', value: Value): void; | 38 | (eventName: 'save', value: Value): void; |
| 39 | }>(); | 39 | }>(); |
| 40 | 40 | ||
| 41 | + const jsonEditor = ref<InstanceType<typeof JSONEditor>>(); | ||
| 42 | + | ||
| 41 | const messageType = ref(MessageTypesEnum.POST_TELEMETRY_REQUEST); | 43 | const messageType = ref(MessageTypesEnum.POST_TELEMETRY_REQUEST); |
| 42 | const messageTypeOptions = Object.keys(MessageTypesEnum).map((value) => ({ | 44 | const messageTypeOptions = Object.keys(MessageTypesEnum).map((value) => ({ |
| 43 | label: MessageTypesNameEnum[value], | 45 | label: MessageTypesNameEnum[value], |
| @@ -118,6 +120,8 @@ | @@ -118,6 +120,8 @@ | ||
| 118 | const result = await executeTestScript(); | 120 | const result = await executeTestScript(); |
| 119 | 121 | ||
| 120 | outputContent.value = result; | 122 | outputContent.value = result; |
| 123 | + await nextTick(); | ||
| 124 | + unref(jsonEditor)?.handleFormat(); | ||
| 121 | }; | 125 | }; |
| 122 | 126 | ||
| 123 | const handleSave = async () => { | 127 | const handleSave = async () => { |
| @@ -196,6 +200,7 @@ | @@ -196,6 +200,7 @@ | ||
| 196 | <Card class="w-full h-full"> | 200 | <Card class="w-full h-full"> |
| 197 | <JSONEditor | 201 | <JSONEditor |
| 198 | v-model:value="outputContent" | 202 | v-model:value="outputContent" |
| 203 | + ref="jsonEditor" | ||
| 199 | title="输出" | 204 | title="输出" |
| 200 | class="flex-auto" | 205 | class="flex-auto" |
| 201 | height="100%" | 206 | height="100%" |
| @@ -2,6 +2,14 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; | @@ -2,6 +2,14 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; | ||
| 2 | import { h } from 'vue'; | 2 | import { h } from 'vue'; |
| 3 | import { Tag } from 'ant-design-vue'; | 3 | import { Tag } from 'ant-design-vue'; |
| 4 | import moment from 'moment'; | 4 | import moment from 'moment'; |
| 5 | +// import { | ||
| 6 | +// ClearAlarmFieldsEnum, | ||
| 7 | +// ClearAlarmFieldsNameEnum, | ||
| 8 | +// } from '../../designer/enum/formField/action'; | ||
| 9 | +import { useComponentRegister } from '/@/components/Form'; | ||
| 10 | +import { JavascriptEditorWithTestModal } from '../../designer/src/components/JavaScriptFilterModal'; | ||
| 11 | + | ||
| 12 | +useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal); | ||
| 5 | 13 | ||
| 6 | export enum StatusEnum { | 14 | export enum StatusEnum { |
| 7 | ENABLE = 1, | 15 | ENABLE = 1, |
| @@ -129,11 +137,25 @@ export const formSchema: FormSchema[] = [ | @@ -129,11 +137,25 @@ export const formSchema: FormSchema[] = [ | ||
| 129 | placeholder: '请输入说明', | 137 | placeholder: '请输入说明', |
| 130 | }, | 138 | }, |
| 131 | }, | 139 | }, |
| 140 | + // { | ||
| 141 | + // field: 'function', | ||
| 142 | + // label: '', | ||
| 143 | + // component: 'Input', | ||
| 144 | + // slot: 'function', | ||
| 145 | + // }, | ||
| 132 | { | 146 | { |
| 133 | field: 'function', | 147 | field: 'function', |
| 134 | - label: '', | ||
| 135 | - component: 'Input', | ||
| 136 | - slot: 'function', | 148 | + component: 'JavascriptEditorWithTestModal', |
| 149 | + label: '转换函数', | ||
| 150 | + changeEvent: 'update:value', | ||
| 151 | + componentProps: { | ||
| 152 | + javaScriptEditorProps: { | ||
| 153 | + functionName: 'Details', | ||
| 154 | + paramsName: ['msg', 'metadata', 'msgType'], | ||
| 155 | + scriptType: 'json', | ||
| 156 | + }, | ||
| 157 | + buttonName: '测试转换功能', | ||
| 158 | + }, | ||
| 137 | }, | 159 | }, |
| 138 | { | 160 | { |
| 139 | field: 'id', | 161 | field: 'id', |
| @@ -111,6 +111,7 @@ | @@ -111,6 +111,7 @@ | ||
| 111 | aceEditor.value.setValue( | 111 | aceEditor.value.setValue( |
| 112 | jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};' | 112 | jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};' |
| 113 | ); | 113 | ); |
| 114 | + setFieldsValue({ function: 'return {msg: msg, metadata: metadata, msgType: msgType};' }); | ||
| 114 | beautify(aceEditor.value.session); | 115 | beautify(aceEditor.value.session); |
| 115 | }; | 116 | }; |
| 116 | 117 |