feat formList拦截ObjGroup base

packages/elements/FormList/FormList.vue

@@ -105,7 +105,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, watch } from 'vue'
+import { computed, h, provide, ref, watch } from 'vue'
 import { FormItem, CanvasGroup } from '@vue-form-craft/components'
 import { deepParse } from '@vue-form-craft/utils'
 import { isEqual, isString, pickBy } from 'lodash'
@@ -139,6 +139,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const list = defineModel<Record<string, any>[]>({ default: [] })
 
+const cIndex = ref(0)
+
 const formInstance = useFormInstance()
 
 const parseFields = (index: number) =>
@@ -174,8 +176,6 @@ const formatter = (row: any, column: TableColumnCtx<any>, cellValue: any, index:
 
 // formList 值联动
 watch(list, (newVal, oldVal) => {
-  if (!props.children.some((item) => item.change)) return
-
   const changeIndex = newVal.reduce((acc, cur, index) => {
     if (!isEqual(cur, oldVal[index])) {
       acc = index
@@ -184,6 +184,10 @@ watch(list, (newVal, oldVal) => {
     return acc
   }, 0)
 
+  cIndex.value = changeIndex
+
+  if (!props.children.some((item) => item.change)) return
+
   const fields = parseFields(changeIndex)
 
   const newChangeData = newVal[changeIndex]
@@ -206,6 +210,11 @@ watch(list, (newVal, oldVal) => {
     }
   })
 })
+
+provide(
+  '$objGroupBase',
+  computed(() => `${props.name}.${cIndex.value}`)
+)
 </script>
 
 <style lang="scss">
@@ -236,7 +245,7 @@ watch(list, (newVal, oldVal) => {
     margin-left: 0;
   }
 
-  .layoutRender{
+  .layoutRender {
     border: 2px dashed var(--el-color-primary);
     padding: 5px;
   }

packages/elements/ObjGroup/ObjGroup.vue

@@ -16,7 +16,7 @@
 import { CanvasGroup, FormItem } from '@vue-form-craft/components'
 import type { FormItemType } from '@vue-form-craft/types'
 import { useFormInstance } from '@vue-form-craft/hooks'
-import { computed, inject, provide } from 'vue'
+import { inject, provide, ref, type Ref } from 'vue'
 
 const props = defineProps<{
   children: FormItemType[]
@@ -25,12 +25,16 @@ const props = defineProps<{
 
 const formInstance = useFormInstance()
 
-const objGroupBase = inject('$objGroupBase')
+const objGroupBase = inject<Ref<string>>('$objGroupBase')
 
+// 只初始化一次
+const base = objGroupBase ? `${objGroupBase.value}.${props.name}` : props.name
 
-const base = computed(() => (objGroupBase ? `${objGroupBase}.${props.name}` : props.name))
+// watchEffect(()=>{
+//   console.log(objGroupBase?.value);
+// })
 
-provide('$objGroupBase', base.value)
+provide('$objGroupBase', ref(base))
 </script>
 
 <style lang="scss">