Commit 569233ff1d68870ac260f7ba5d570d83f6156e46
Merge branch 'cherry-pick-5d00b403' into 'main'
fix: 修复脚本管理规则链转换脚本数据保存问题 See merge request yunteng/thingskit-front!1075
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> | ... | ... |