From 2356ff514d0a8019cac8b2b57fdbac29495200e0 Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Thu, 15 Sep 2022 14:46:45 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/CodeSelect.vue | 54 +++++++++++++----------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 645a386d..8a69633a 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, watchEffect } from 'vue';
+import { computed, defineEmits, defineProps, inject, ref, watch, watchEffect } from 'vue';
 import { View } from '@element-plus/icons-vue';
-import { map } from 'lodash-es';
+import { isEmpty, map } from 'lodash-es';
 
 import { SelectConfig } from '@tmagic/form';
 
@@ -66,7 +66,6 @@ const fieldKey = ref('');
 const combineIds = ref<string[]>([]);
 
 watchEffect(async () => {
-  console.log('--combineIds.value--', combineIds.value);
   if (!combineIds.value) return;
   const combineNames = await Promise.all(
     combineIds.value.map(async (id) => {
@@ -76,34 +75,41 @@ watchEffect(async () => {
   );
   fieldKey.value = combineNames.join('-');
 });
-// watch(
-//   () => services?.codeBlockService.getCodeEditorShowStatus(),
-//   (value, oldValue) => {
-//     if (oldValue && !value) {
-//       // 由打开到关闭
-//       fieldKey.value = '222'
-//       // const selectedValue = props.model[props.name];
-//       // props.model[props.name] = null;
-//       // props.model[props.name] = selectedValue;
-//     }
-//   },
-//   { immediate: true },
-// );
 
 const changeHandler = async (value: any) => {
-  // 记录组件与代码块的绑定关系
-  const { id = '' } = services?.editorService.get('node') || {};
-  await services?.codeBlockService.setCompRelation(id, value);
-  combineIds.value = props.model[props.name];
-  if (typeof props.model[props.name] === 'string') {
-    combineIds.value = [props.model[props.name]];
-  }
+  await setCombineRelation(value);
   emit('change', value);
 };
 
+// 同步绑定关系
+const setCombineRelation = async (selectedIds: string[] | string) => {
+  if (typeof selectedIds === 'string') {
+    // 兼容select单选
+    combineIds.value = [selectedIds];
+  } else {
+    combineIds.value = selectedIds;
+  }
+  // 组件id
+  const { id = '' } = services?.editorService.get('node') || {};
+  // 记录组件与代码块的绑定关系
+  await services?.codeBlockService.setCompRelation(id, combineIds.value);
+  // 记录当前已被绑定的代码块，为查看弹窗的展示内容
+  await services?.codeBlockService.setCombineIds(combineIds.value);
+};
+
 const viewHandler = async () => {
   await services?.codeBlockService.setMode(EditorMode.LIST);
-  await services?.codeBlockService.setCombineIds(combineIds.value);
   services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
 };
+
+watch(
+  () => props.model[props.name],
+  async (value) => {
+    if (isEmpty(value)) return;
+    await setCombineRelation(value);
+  },
+  {
+    immediate: true,
+  },
+);
 </script>