JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-11 06:29:22 +08:00
Code Issues Projects Releases Wiki Activity

fix: 使用form.initValues解决代码块绑定关系更新不及时的问题

Browse Source
This commit is contained in:
parisma 2022-10-28 14:58:30 +08:00
parent f8d7eaea5e
commit 0ca0abf2da
1 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/editor/src/fields/CodeSelect.vue
View File

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