From 134efbfb0f2eed8e536cc17ed6d1add260e5bd43 Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Thu, 15 Sep 2022 15:42:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=E4=BB=8Edsl?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=97=B6=E4=BB=A3=E7=A0=81=E5=9D=97?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E5=85=B3=E7=B3=BB=E6=9C=AA=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98,=E4=BF=AE=E5=A4=8D=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9Bwarning,=E4=BC=98=E5=8C=96=E8=AF=AD=E6=B3=95=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E6=97=B6=E4=BF=9D=E5=AD=98=E5=B9=B6=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E7=9A=84=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                | 19 ++++++++++++++++++-
 packages/editor/src/fields/CodeSelect.vue     | 17 +++--------------
 .../sidebar/code-block/CodeBlockEditor.vue    | 19 ++++++++++++-------
 .../sidebar/code-block/CodeBlockList.vue      |  2 +-
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 929782a2..bc45e017 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -65,6 +65,7 @@
 
 <script lang="ts">
 import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch } from 'vue';
+import { isEmpty } from 'lodash-es';
 
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
@@ -226,10 +227,26 @@ export default defineComponent({
       emit('update:modelValue', toRaw(editorService.get('root')));
     });
 
+    const initCodeRelation = (rootValue: MNode) => {
+      if (isEmpty(rootValue.items)) return;
+      rootValue.items.forEach((nodeValue: MNode) => {
+        if (!isEmpty(nodeValue.created)) {
+          codeBlockService.setCompRelation(nodeValue.id, nodeValue.created);
+        }
+        if (!isEmpty(nodeValue.items)) {
+          initCodeRelation(nodeValue);
+        }
+      });
+    };
+
     // 初始值变化，重新设置节点信息
     watch(
       () => props.modelValue,
-      (modelValue) => editorService.set('root', modelValue),
+      (modelValue) => {
+        editorService.set('root', modelValue);
+        // 初始化代码块与组件的绑定关系
+        initCodeRelation(modelValue);
+      },
       {
         immediate: true,
       },
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 8a69633a..abdb621d 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -20,9 +20,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref, watch, watchEffect } from 'vue';
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
 import { View } from '@element-plus/icons-vue';
-import { isEmpty, map } from 'lodash-es';
+import { map } from 'lodash-es';
 
 import { SelectConfig } from '@tmagic/form';
 
@@ -34,7 +34,7 @@ const emit = defineEmits(['change']);
 
 const props = defineProps<{
   config: {
-    selectConfig: SelectConfig;
+    selectConfig?: SelectConfig;
   };
   model: any;
   prop: string;
@@ -101,15 +101,4 @@ const viewHandler = async () => {
   await services?.codeBlockService.setMode(EditorMode.LIST);
   services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
 };
-
-watch(
-  () => props.model[props.name],
-  async (value) => {
-    if (isEmpty(value)) return;
-    await setCombineRelation(value);
-  },
-  {
-    immediate: true,
-  },
-);
 </script>
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 339bc599..0575d0f8 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -34,7 +34,7 @@
         <magic-code-editor
           ref="codeEditor"
           class="m-editor-content"
-          :init-values="codeConfig.content"
+          :init-values="`${codeConfig.content}`"
           @save="saveCode"
           :options="{
             tabSize: 2,
@@ -71,7 +71,9 @@ const codeConfig = ref<CodeBlockContent | null>(null);
 const selectedValue = ref<CodeBlockDSL | null>(null);
 
 // 是否展示代码编辑区
-const isShowCodeBlockEditor = computed(() => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus());
+const isShowCodeBlockEditor = computed(
+  () => (codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus()) || false,
+);
 const mode = computed(() => services?.codeBlockService.getMode());
 const id = computed(() => services?.codeBlockService.getId() || '');
 const editable = computed(() => services?.codeBlockService.getEditStatus());
@@ -87,8 +89,8 @@ watchEffect(async () => {
 });
 
 // 保存代码
-const saveCode = async () => {
-  if (!codeEditor.value || !codeConfig.value || !editable.value) return;
+const saveCode = async (): Promise<boolean> => {
+  if (!codeEditor.value || !codeConfig.value || !editable.value) return false;
 
   try {
     // 代码内容
@@ -97,7 +99,7 @@ const saveCode = async () => {
     codeConfig.value.content = eval(codeContent);
   } catch (e: any) {
     ElMessage.error(e.stack);
-    return;
+    return false;
   }
   // 存入dsl
   await services?.codeBlockService.setCodeDslById(id.value, {
@@ -105,12 +107,15 @@ const saveCode = async () => {
     content: codeConfig.value.content,
   });
   ElMessage.success('代码保存成功');
+  return true;
 };
 
 // 保存并关闭
 const saveAndClose = async () => {
-  await saveCode();
-  await services?.codeBlockService.setCodeEditorShowStatus(false);
+  const saveRes = await saveCode();
+  if (saveRes) {
+    await services?.codeBlockService.setCodeEditorShowStatus(false);
+  }
 };
 
 const menuSelectHandler = (item: any) => {
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 48a542ac..fb1d98c1 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -52,7 +52,7 @@ enum ErrorType {
 }
 
 const props = defineProps<{
-  customError: (id: string, errorType: ErrorType) => any;
+  customError?: (id: string, errorType: ErrorType) => any;
 }>();
 
 const services = inject<Services>('services');