From 668991de264e498569018b496e49763a34888e82 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 29 May 2023 14:27:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E8=BE=93=E5=85=A5=E6=A1=86=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/fields/DataSourceInput.vue     | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index 874a2e5c..d522fa8a 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -31,11 +31,7 @@
     </template>
   </component>
   <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div
-      :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`"
-      :contenteditable="!disabled"
-      style="justify-content: left"
-    >
+    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`" style="justify-content: left">
       <template v-for="(item, index) in displayState">
         <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
         <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
@@ -45,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, watchEffect } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
@@ -83,20 +79,9 @@ const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
 const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
-watchEffect(() => {
-  state.value = props.model[props.name] || '';
-});
-
-const mouseupHandler = async () => {
-  isFocused.value = true;
-  await nextTick();
-  autocomplete.value?.focus();
-};
-
-const blurHandler = () => {
-  isFocused.value = false;
-
+const setDisplayState = () => {
   displayState.value = [];
 
   const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
@@ -108,9 +93,11 @@ const blurHandler = () => {
       type: 'text',
       value: state.value.substring(index, match.index),
     });
+
     let dsText = '';
     let ds: DataSourceSchema | undefined;
     let fields: DataSchema[] | undefined;
+
     match[1].split('.').forEach((item, index) => {
       if (index === 0) {
         ds = dataSources.value.find((ds) => ds.id === item);
@@ -123,10 +110,12 @@ const blurHandler = () => {
       fields = field?.fields;
       dsText += `.${field?.title || item}`;
     });
+
     displayState.value.push({
       type: 'var',
       value: dsText,
     });
+
     index = match.index + match[0].length;
   }
 
@@ -138,6 +127,28 @@ const blurHandler = () => {
   }
 };
 
+watch(
+  () => props.model[props.name],
+  (value = '') => {
+    state.value = value;
+
+    setDisplayState();
+  },
+  { immediate: true },
+);
+
+const mouseupHandler = async () => {
+  isFocused.value = true;
+  await nextTick();
+  autocomplete.value?.focus();
+};
+
+const blurHandler = () => {
+  isFocused.value = false;
+
+  setDisplayState();
+};
+
 const changeHandler = (v: string) => {
   emit('change', v);
 };
@@ -150,8 +161,6 @@ const inputHandler = (v: string) => {
   }
 };
 
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
-
 /**
  * 光标位置是不是}
  * @param selectionStart 光标位置