fix(subform): subform logic

When a field under a subform is required or hidden and the subform has no logic, the field's own logic should be followed.
Liberty-liu · Sep 21, 2023 · d31c8c7 · d31c8c7
1 parent a6d773f
commit d31c8c7
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 24 deletions.
diff --git a/packages/formEditor/preview.vue b/packages/formEditor/preview.vue
@@ -107,8 +107,6 @@ const setData1 = async (data, value) => {
     utils.addContext(e, state.store)
   })
   const subforms = _.cloneDeep(state.fields.filter(e => e.type === 'subform'))
-  // For SubformLayout.jsx to get the first data
-  await nextTick()
   if (!_.isEmpty(value)) {
     for (const key in value) {
       state.remoteValues.set(key, value[key])
@@ -133,7 +131,6 @@ defineExpose({
   setData,
   getData
 })
-window.state = state
 </script>
 <template>
   <CanvesPanel v-if="state.store.length"></CanvesPanel>

diff --git a/packages/hooks/use-props/index.js b/packages/hooks/use-props/index.js
@@ -17,7 +17,7 @@ const findPosition = (node, parent) => {
 
   return { x: -1, y: -1 }
 }
-const addValidate = (result, node, isPc, t) => {
+const addValidate = (result, node, isPc, t, state, ExtraParams) => {
   const {
     options
   } = node
@@ -66,7 +66,6 @@ const addValidate = (result, node, isPc, t) => {
           arg1[0](false)
         }
     let value = isPc ? arg0[1] : arg0[0]
-    // only for mobile
     if (/^(signature|radio|checkbox|select|html)$/.test(node.type)) {
       value = options.defaultValue
     }
@@ -86,11 +85,17 @@ const addValidate = (result, node, isPc, t) => {
       }
     } else {
       let isRequired = result.required
-      if (utils.checkIsInSubform(node)) {
+      if (state.mode === 'preview' && utils.checkIsInSubform(node)) {
         const parent = node?.context?.parent?.context?.parent
         if (parent) {
-          const parentProps = useProps(state, parent, isPc).value
-          isRequired = parentProps.required
+          const {
+            readOnly,
+            required
+          } = getLogicStateByField(parent, state.fieldsLogicState)
+          const parentProps = useProps(state, parent, isPc, false, false, t, ExtraParams).value
+          if (required !== undefined) {
+            isRequired = parentProps.required
+          }
         }
       }
       if (isRequired && node.type !== 'subform' && utils.isEmpty(newValue)) {
@@ -158,12 +163,23 @@ const addValidate = (result, node, isPc, t) => {
   }
   result.rules = [obj]
 }
-export const useProps = (state, data, isPc = true, isRoot = false, specialHandling) => {
-  const {
-    t
-  } = useI18n()
+const getLogicStateByField = (field, fieldsLogicState) => {
+  const fieldState = fieldsLogicState.get(field)
+  const required = _.get(fieldState, 'required', undefined)
+  const readOnly = _.get(fieldState, 'readOnly', undefined)
+  return {
+    required,
+    readOnly
+  }
+}
+export const useProps = (state, data, isPc = true, isRoot = false, specialHandling, t, ExtraParams) => {
+  if (!t) {
+    t = useI18n().t
+  }
+  if (!ExtraParams) {
+    ExtraParams = inject('EverrightExtraParams', {})
+  }
   return computed(() => {
-    const ExtraParams = inject('EverrightExtraParams', {})
     let node = isRoot ? data.config : data
     let result = {}
     const platform = isPc ? 'pc' : 'mobile'
@@ -191,9 +207,10 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
       required: options.required
     }
     if (state.mode === 'preview') {
-      const fieldState = state.fieldsLogicState.get(node)
-      const required = _.get(fieldState, 'required', undefined)
-      const readOnly = _.get(fieldState, 'readOnly', undefined)
+      const {
+        readOnly,
+        required
+      } = getLogicStateByField(node, state.fieldsLogicState)
       if (readOnly === undefined) {
         result.disabled = options.disabled
       } else {
@@ -204,13 +221,21 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
       } else {
         result.required = result.disabled ? false : required === 1
       }
-    }
-    if (utils.checkIsInSubform(node)) {
-      const parent = node?.context?.parent?.context?.parent
-      if (parent) {
-        const parentProps = useProps(state, parent, isPc).value
-        result.disabled = parentProps.disabled
-        result.required = parentProps.required
+      if (utils.checkIsInSubform(node)) {
+        const parent = node?.context?.parent?.context?.parent
+        if (parent) {
+          const {
+            readOnly,
+            required
+          } = getLogicStateByField(node, state.fieldsLogicState)
+          const parentProps = useProps(state, parent, isPc, false, false, t, ExtraParams).value
+          if (readOnly !== undefined) {
+            result.disabled = parentProps.disabled
+          }
+          if (required !== undefined) {
+            result.required = parentProps.required
+          }
+        }
       }
     }
     try {
@@ -219,7 +244,7 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
       }
     } catch (e) {
     }
-    addValidate(result, node, isPc, t)
+    addValidate(result, node, isPc, t, state, ExtraParams)
     if (isPc) {
       result.labelWidth = options.isShowLabel ? options.labelWidth + 'px' : 'auto'
     }

diff --git a/test/formTypes/subform.test.js b/test/formTypes/subform.test.js
@@ -274,4 +274,31 @@ describe('Field: subform', () => {
     await flushPromises()
     expect(setDefaultEl.findAll(utils.getTestId('SubformLayout:item'))[2].find('input').element.value).toEqual(addValue)
   })
+  test('Value priority is greater than default content', async () => {
+    const values = ['1', '2']
+    const addValue = 'everright-formeditor'
+    const newField = _.cloneDeep(field)
+    newField.columns[0] = newField.columns[0].id
+    const subForm = erGeneratorData(_.cloneDeep(erComponentsConfig.fieldsConfig[2].list[5]), true, 'en')
+    const list = _.cloneDeep(subForm)
+    list.columns[0] = subForm.columns[0].id
+    subForm.columns[0].list[0].push(newField)
+    subForm.columns[0].options.defaultValue = values.map(e => {
+      const result = {}
+      result[field.columns[0].key] = e
+      return result
+    })
+    field.columns[0].options.defaultValue = addValue
+    const data = wrapLayoutDataByLayoutType([list], [subForm.columns[0], field.columns[0]])
+    const remoteValue = {}
+    remoteValue[subForm.columns[0].key] = []
+    remoteValue[subForm.columns[0].key].push(JSON.parse(`{"${field.columns[0].key}": "${addValue + 1}"}`))
+    remoteValue[subForm.columns[0].key].push(JSON.parse(`{"${field.columns[0].key}": "${addValue + 2}"}`))
+    remoteValue[subForm.columns[0].key].push(JSON.parse(`{"${field.columns[0].key}": "${addValue + 3}"}`))
+    await previewWrapper.findComponent({ ref: 'EReditorRef' }).vm.setData(data, remoteValue)
+    expect(previewWrapper.find(utils.getTestId('SubformLayout:addButton')).exists()).toBe(true)
+    expect(previewWrapper.findAll(utils.getTestId('SubformLayout:item'))).toHaveLength(3)
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    expect(previewWrapper.findAll(utils.getTestId('SubformLayout:item')).map(e => e.find('input').element.value)).toEqual(new Array(3).fill(addValue).map((e, i) => e + (i + 1)))
+  })
 })