From 0ca0abf2da4cf835c20c661cd773955350fa830d Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Fri, 28 Oct 2022 14:58:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8form.initValues?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BB=A3=E7=A0=81=E5=9D=97=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E5=85=B3=E7=B3=BB=E6=9B=B4=E6=96=B0=E4=B8=8D=E5=8F=8A=E6=97=B6?=
 =?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 | 26 ++++++++---------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index b73b848b..55d581b0 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -33,16 +33,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref, watch, watchEffect } from 'vue';
-import { cloneDeep, map, xor } from 'lodash-es';
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
+import { map, xor } from 'lodash-es';
 
 import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import { SelectConfig } from '@tmagic/form';
+import { FormState, SelectConfig } from '@tmagic/form';
 
 import type { Services } from '../type';
 import { CodeEditorMode, CodeSelectOp } from '../type';
 const services = inject<Services>('services');
-
+const form = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = defineProps<{
@@ -77,17 +77,7 @@ const selectConfig = computed(() => {
 });
 const fieldKey = ref('');
 const multiple = ref(true);
-let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
-
-// 管理端和editor有表现不一致的地方，管理端切换组件表单不会重新渲染，通过setTimeout确保lastTagSnapshot的准确性
-watch(
-  () => props.model[props.name],
-  (selectValue) => {
-    setTimeout(() => {
-      lastTagSnapshot = cloneDeep(selectValue) || [];
-    });
-  },
-);
+const lastTagSnapshot = ref<string[]>([]);
 
 watchEffect(async () => {
   if (!props.model[props.name]) return;
@@ -119,8 +109,10 @@ const setCombineRelation = async (codeIds: string[]) => {
   let opFlag = CodeSelectOp.CHANGE;
   let diffValues = codeIds;
   if (multiple.value) {
-    opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-    diffValues = xor(codeIds, lastTagSnapshot) as string[];
+    // initValues为表单初始值，当表单内容发生变化时，initValues也会更新，可以理解为上一次表单内容的快照
+    lastTagSnapshot.value = form?.initValues[props.name] || [];
+    opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+    diffValues = xor(codeIds, lastTagSnapshot.value) as string[];
   }
   // 记录绑定关系
   await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);