From bc000e9ca606ea744a2ecf4da58b2aa71681c38b Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Wed, 14 Sep 2022 17:53:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E8=A7=A3=E5=86=B3=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=BB=A3=E7=A0=81=E5=90=8D=E7=A7=B0=E5=90=8E=E5=B7=B2?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=9A=84select=20tag=E4=B8=8D=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98,=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/CodeSelect.vue     | 39 +++++++++++++++----
 .../sidebar/code-block/CodeBlockEditor.vue    |  5 ++-
 packages/editor/src/theme/code-block.scss     | 25 +++++++-----
 playground/src/configs/dsl.ts                 |  4 +-
 4 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 2c0a7217..645a386d 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-fields-code-select">
+  <div class="m-fields-code-select" :key="fieldKey">
     <m-fields-select
       :config="selectConfig"
       :model="model"
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref } from 'vue';
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
 import { View } from '@element-plus/icons-vue';
 import { map } from 'lodash-es';
 
@@ -62,22 +62,47 @@ const selectConfig = computed(() => {
     ...props.config.selectConfig,
   };
 });
+const fieldKey = ref('');
+const combineIds = ref<string[]>([]);
 
-const combineIds = ref();
+watchEffect(async () => {
+  console.log('--combineIds.value--', combineIds.value);
+  if (!combineIds.value) return;
+  const combineNames = await Promise.all(
+    combineIds.value.map(async (id) => {
+      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
+      return name;
+    }),
+  );
+  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]];
+  }
   emit('change', value);
 };
 
 const viewHandler = async () => {
   await services?.codeBlockService.setMode(EditorMode.LIST);
-  combineIds.value = props.model[props.name];
-  if (typeof props.model[props.name] === 'string') {
-    combineIds.value = [props.model[props.name]];
-  }
   await services?.codeBlockService.setCombineIds(combineIds.value);
   services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
 };
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 308e7b02..339bc599 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -5,9 +5,10 @@
     :fullscreen="true"
     :before-close="saveAndClose"
     :append-to-body="true"
+    custom-class="code-editor-dialog"
   >
     <template v-if="mode === EditorMode.LIST">
-      <el-menu :default-active="selectedIds[0]" class="el-menu-vertical-demo code-editor-side-menu">
+      <el-menu :default-active="selectedIds[0]" class="code-editor-side-menu">
         <el-menu-item v-for="(value, key) in selectedValue" :index="key" :key="key" @click="menuSelectHandler">
           <template #title>{{ value.name }}（{{ key }}）</template>
         </el-menu-item>
@@ -22,7 +23,7 @@
     >
       <slot name="code-block-edit-panel-header" :id="id"></slot>
       <el-row class="code-name-wrapper" justify="start">
-        <el-col :span="2">
+        <el-col :span="3">
           <span>代码块名称</span>
         </el-col>
         <el-col :span="6">
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index b9d11335..9289f9af 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -75,13 +75,20 @@
   width: 100%;
   align-items: center;
 }
-.code-editor-side-menu {
-  width: 20%;
-}
-.m-editor-code-block-editor-panel-list-mode {
-  width: 80%;
-  position: absolute;
-  height: 90%;
-  left: 20%;
-  top: 60px;
+.code-editor-dialog {
+  .el-dialog__body {
+    height: 90%;
+  }
+  .code-editor-side-menu {
+    width: 20%;
+    height: 90%;
+    overflow: auto;
+  }
+  .m-editor-code-block-editor-panel-list-mode {
+    width: 80%;
+    position: absolute;
+    height: 90%;
+    left: 20%;
+    top: 60px;
+  }
 }
diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
index 0bb397bc..d38f1469 100644
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@@ -23,9 +23,7 @@ export default {
   methods: {
     l7znj1q24wilb357ay6: {
       name: 'getData',
-      content: () => {
-        console.log('this is getData function');
-      },
+      content: `() => {\n  console.log("this is getData function")\n}`,
     },
   },
   items: [