Showing
1 changed file
with
7 additions
and
62 deletions
... | ... | @@ -6,22 +6,10 @@ |
6 | 6 | @register="register" |
7 | 7 | width="500px" |
8 | 8 | @ok="handleSubmit" |
9 | + destroyOnClose | |
9 | 10 | showFooter |
10 | 11 | > |
11 | - <BasicForm @register="registerForm"> | |
12 | - <template #function> | |
13 | - <Card title="转换函数" :bodyStyle="{ padding: 0, height: '280px' }"> | |
14 | - <template #extra> | |
15 | - <Tag color="blue">Transform Function</Tag> | |
16 | - <a-button @click="handleFormat" size="small">格式化</a-button> | |
17 | - </template> | |
18 | - <div class="ml-8">function Transform(msg, metadata, msgType) {</div> | |
19 | - <div ref="aceRef" class="overflow-hidden"></div> | |
20 | - <div class="ml-7">}</div> | |
21 | - </Card> | |
22 | - <a-button type="primary" class="mt-4" @click="testTransformFunc">测试转换功能</a-button> | |
23 | - </template> | |
24 | - </BasicForm> | |
12 | + <BasicForm @register="registerForm" /> | |
25 | 13 | </BasicDrawer> |
26 | 14 | </div> |
27 | 15 | </template> |
... | ... | @@ -31,30 +19,19 @@ |
31 | 19 | import { useDrawerInner, BasicDrawer } from '/@/components/Drawer/index'; |
32 | 20 | import { useForm, BasicForm } from '/@/components/Form/index'; |
33 | 21 | import { formSchema } from '../config/config.data'; |
34 | - import { Card, Tag } from 'ant-design-vue'; | |
35 | 22 | import { createOrEditTransformScriptApi } from '/@/api/device/TransformScriptApi'; |
36 | 23 | import { useMessage } from '/@/hooks/web/useMessage'; |
37 | - import ace from 'ace-builds'; | |
38 | - import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题 | |
39 | - import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题 | |
40 | - import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式 | |
41 | - import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js'; | |
42 | - import { useAppStore } from '/@/store/modules/app'; | |
43 | 24 | |
44 | 25 | const emit = defineEmits(['register', 'isStatus', 'success']); |
45 | - const userStore = useAppStore(); | |
46 | - const getAceClass = computed((): string => userStore.getDarkMode); | |
47 | 26 | const isUpdate: any = ref(false); |
48 | 27 | const isView = ref(true); |
49 | - const aceEditor = ref(); | |
50 | - const aceRef = ref(); | |
51 | 28 | const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本')); |
52 | 29 | const editId = ref(''); |
30 | + | |
53 | 31 | const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => { |
54 | 32 | resetFields(); |
55 | 33 | setDrawerProps({ confirmLoading: false }); |
56 | 34 | isUpdate.value = data.isUpdate; |
57 | - initEditor(data.record?.configuration.jsScript); | |
58 | 35 | switch (isUpdate.value) { |
59 | 36 | case 'view': |
60 | 37 | isView.value = false; |
... | ... | @@ -64,7 +41,7 @@ |
64 | 41 | loading: false, |
65 | 42 | }); |
66 | 43 | editId.value = data.record.id; |
67 | - setFieldsValue(data.record); | |
44 | + setFieldsValue({ ...data.record, function: data.record?.configuration?.jsScript }); | |
68 | 45 | break; |
69 | 46 | case true: |
70 | 47 | isView.value = true; |
... | ... | @@ -74,7 +51,7 @@ |
74 | 51 | loading: false, |
75 | 52 | }); |
76 | 53 | editId.value = data.record.id; |
77 | - setFieldsValue(data.record); | |
54 | + setFieldsValue({ ...data.record, function: data.record?.configuration?.jsScript }); | |
78 | 55 | break; |
79 | 56 | case false: |
80 | 57 | isView.value = true; |
... | ... | @@ -88,38 +65,10 @@ |
88 | 65 | }); |
89 | 66 | const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ |
90 | 67 | showActionButtonGroup: false, |
91 | - colProps: { span: 24 }, | |
68 | + baseColProps: { span: 24 }, | |
92 | 69 | schemas: formSchema, |
93 | 70 | }); |
94 | 71 | |
95 | - // 初始化编辑器 | |
96 | - const initEditor = (jsScript?: string) => { | |
97 | - aceEditor.value = ace.edit(aceRef.value, { | |
98 | - maxLines: 12, // 最大行数,超过会自动出现滚动条 | |
99 | - minLines: 12, // 最小行数,还未到最大行数时,编辑器会自动伸缩大小 | |
100 | - fontSize: 14, // 编辑器内字体大小 | |
101 | - theme: 'ace/theme/chrome', // 默认设置的主题 | |
102 | - mode: 'ace/mode/javascript', // 默认设置的语言模式 | |
103 | - tabSize: 2, // 制表符设置为 4 个空格大小 | |
104 | - }); | |
105 | - | |
106 | - aceEditor.value.setOptions({ | |
107 | - enableBasicAutocompletion: true, | |
108 | - enableLiveAutocompletion: true, | |
109 | - theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome', | |
110 | - }); | |
111 | - aceEditor.value.setValue( | |
112 | - jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};' | |
113 | - ); | |
114 | - setFieldsValue({ function: 'return {msg: msg, metadata: metadata, msgType: msgType};' }); | |
115 | - beautify(aceEditor.value.session); | |
116 | - }; | |
117 | - | |
118 | - const testTransformFunc = () => { | |
119 | - closeDrawer(); | |
120 | - const jsCode = aceEditor.value.getValue(); | |
121 | - emit('isStatus', { status: 1, jsCode }); | |
122 | - }; | |
123 | 72 | const handleSubmit = async () => { |
124 | 73 | const editIdPost = isUpdate.value ? { id: editId.value } : {}; |
125 | 74 | try { |
... | ... | @@ -128,7 +77,7 @@ |
128 | 77 | if (!fieldsValue) return; |
129 | 78 | await createOrEditTransformScriptApi({ |
130 | 79 | configuration: { |
131 | - jsScript: aceEditor.value.getValue(), | |
80 | + jsScript: fieldsValue.function, | |
132 | 81 | }, |
133 | 82 | type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode', |
134 | 83 | ...fieldsValue, |
... | ... | @@ -145,8 +94,4 @@ |
145 | 94 | }, 300); |
146 | 95 | } |
147 | 96 | }; |
148 | - const handleFormat = () => { | |
149 | - beautify(aceEditor.value.session); | |
150 | - }; | |
151 | - defineExpose({ aceEditor }); | |
152 | 97 | </script> | ... | ... |