From e0ba15f0ecb6b47337c97ab3258e8ca8cd2c2215 Mon Sep 17 00:00:00 2001
From: zhouxinyong <zhoudaxia5683@163.com>
Date: Fri, 22 Jul 2022 19:25:38 +0800
Subject: [PATCH] fix: change Editable render

---
 packages/components/src/editable/index.ts | 55 +++++++++++------------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/editable/index.ts b/packages/components/src/editable/index.ts
index 13ce94b..0c633f7 100644
--- a/packages/components/src/editable/index.ts
+++ b/packages/components/src/editable/index.ts
@@ -21,7 +21,7 @@ export type EditableProps = FormItemProps
 
 const useInitialPattern = (fieldRef) => {
   const field = fieldRef.value
-  return computed(() => field?.pattern)
+  return computed(() => field?.parent?.pattern || field?.form?.pattern)
 }
 
 const useFormItemProps = (fieldRef): FormItemProps => {
@@ -49,9 +49,9 @@ const EditableInner = observer(
     setup(props, { attrs, slots }) {
       const fieldRef = useField<Field>()
       const innerRef = ref(document.body)
-      const pattern = useInitialPattern(fieldRef)
       const prefixCls = `${stylePrefix}-editable`
       const setEditable = (payload: boolean) => {
+        const pattern = useInitialPattern(fieldRef)
         // console.log('pattern', pattern)
         if (pattern.value !== 'editable') return
         fieldRef.value.setPattern(payload ? 'editable' : 'readPretty')
@@ -59,6 +59,8 @@ const EditableInner = observer(
 
       const dispose = reaction(
         () => {
+          const pattern = useInitialPattern(fieldRef)
+
           return pattern
         },
         (pattern) => {
@@ -72,8 +74,8 @@ const EditableInner = observer(
       )
 
       onBeforeUnmount(() => {
-        const field = fieldRef.value
-        field.setPattern(pattern.value)
+        // const field = fieldRef.value
+        // field.setPattern(pattern.value)
         dispose()
       })
 
@@ -81,6 +83,7 @@ const EditableInner = observer(
         const field = fieldRef.value
         const editable = field.pattern === 'editable'
         const itemProps = useFormItemProps(fieldRef)
+        const pattern = useInitialPattern(fieldRef)
 
         const closeEditable = () => {
           if (editable && !fieldRef.value?.errors?.length) {
@@ -133,9 +136,7 @@ const EditableInner = observer(
           return h(
             FormBaseItem,
             {
-              attrs: {
-                ...attrs,
-              },
+              ...attrs,
             },
             {
               default: () => {
@@ -155,33 +156,27 @@ const EditableInner = observer(
           'div',
           {
             class: prefixCls,
-            ref: 'innerRef',
+            ref: innerRef,
             onClick: onClick,
           },
-          {
-            default: () => {
-              return h(
-                'div',
+          h(
+            'div',
+            {
+              class: `${prefixCls}-content`,
+            },
+            [
+              h(
+                FormBaseItem,
                 {
-                  class: `${prefixCls}-content`,
+                  ...attrs,
+                  ...itemProps,
                 },
-                {
-                  default: () => [
-                    h(
-                      FormBaseItem,
-                      {
-                        ...attrs,
-                        ...itemProps,
-                      },
-                      slots
-                    ),
-                    renderEditHelper(),
-                    renderCloseHelper(),
-                  ],
-                }
-              )
-            },
-          }
+                slots
+              ),
+              renderEditHelper(),
+              renderCloseHelper(),
+            ]
+          )
         )
       }
     },