fix: state accessor defaultValue support expression opentiny#977

chilingling · Jan 7, 2025 · efd8805 · efd8805
1 parent a14a508
commit efd8805
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 26 deletions.
diff --git a/packages/vue-generator/src/generator/vue/sfc/generateAttribute.js b/packages/vue-generator/src/generator/vue/sfc/generateAttribute.js
@@ -377,6 +377,50 @@ export const handleTinyIconPropsHook = (schemaData, globalHooks, config) => {
   })
 }
 
+// 生成 watchEffect
+const genStateAccessor = (value, globalHooks) => {
+  if (isSetter(value?.accessor)) {
+    globalHooks.addStatement({
+      position: INSERT_POSITION.AFTER_METHODS,
+      value: `vue.watchEffect(wrap(${value.accessor.setter?.value ?? ''}))`
+    })
+  }
+
+  if (isGetter(value?.accessor)) {
+    globalHooks.addStatement({
+      position: INSERT_POSITION.AFTER_METHODS,
+      value: `vue.watchEffect(wrap(${value.accessor.getter?.value ?? ''}))`
+    })
+  }
+}
+
+// 针对 state 有 getter 的场景进行处理
+export const handleAccessorBinding = (renderKey, value, globalHooks, config) => {
+  genStateAccessor(value, globalHooks)
+
+  const result = { shouldBindToState: false, res: '' }
+
+  if (typeof value.defaultValue === 'string') {
+    result.res = `${renderKey}"${value.defaultValue.replaceAll("'", "\\'").replaceAll(/"/g, "'")}"`
+  } else if (specialTypeHandler[value?.defaultValue?.type]) {
+    const specialVal = specialTypeHandler[value.defaultValue.type](value.defaultValue, globalHooks, config)?.value || ''
+
+    if (specialTypes.includes(value.defaultValue.type)) {
+      result.shouldBindToState = true
+    }
+
+    result.res = `${renderKey}${specialVal}`
+  } else {
+    const { res: tempRes } =
+      // eslint-disable-next-line no-use-before-define
+      transformObjType(value.defaultValue, globalHooks, config) || {}
+
+    result.res = `${renderKey}${tempRes}`
+  }
+
+  return result
+}
+
 export const transformObjType = (obj, globalHooks, config) => {
   if (!obj || typeof obj !== 'object') {
     return {
@@ -415,32 +459,10 @@ export const transformObjType = (obj, globalHooks, config) => {
     }
 
     if (hasAccessor(value?.accessor)) {
-      if (typeof value.defaultValue === 'string') {
-        resStr.push(`${renderKey}"${value.defaultValue.replaceAll("'", "\\'").replaceAll(/"/g, "'")}"`)
-      } else {
-        const { res: tempRes, shouldBindToState: tempShouldBindToState } =
-          transformObjType(value.defaultValue, globalHooks, config) || {}
-
-        resStr.push(`${renderKey}${tempRes}`)
-
-        if (tempShouldBindToState) {
-          shouldBindToState = true
-        }
-      }
+      // 递归处理其他类型
+      const { res } = handleAccessorBinding(renderKey, value, globalHooks, config)
 
-      if (isSetter(value?.accessor)) {
-        globalHooks.addStatement({
-          position: INSERT_POSITION.AFTER_METHODS,
-          value: `vue.watchEffect(wrap(${value.accessor.setter?.value ?? ''}))`
-        })
-      }
-
-      if (isGetter(value?.accessor)) {
-        globalHooks.addStatement({
-          position: INSERT_POSITION.AFTER_METHODS,
-          value: `vue.watchEffect(wrap(${value.accessor.getter?.value ?? ''}))`
-        })
-      }
+      resStr.push(res)
 
       continue
     }

diff --git a/packages/vue-generator/test/testcases/sfc/accessor/expected/Accessor.vue b/packages/vue-generator/test/testcases/sfc/accessor/expected/Accessor.vue
@@ -16,6 +16,9 @@ const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
 const wrap = lowcodeWrap(props, { emit })
 wrap({ stores })
 
+const { utils } = wrap(function () {
+  return this
+})()
 const state = vue.reactive({
   firstName: 'Opentiny',
   lastName: 'TinyEngine',
@@ -26,7 +29,22 @@ const state = vue.reactive({
   trueVal: true,
   falseVal: false,
   arrVal: [1, '2', { aaa: 'aaa' }, [3, 4], true, false],
-  objVal: { aaa: 'aaa', arr: [1, '2', true, false, 0], ccc: { bbb: 'bbb' }, d: 32432, e: '', f: null, g: false }
+  objVal: { aaa: 'aaa', arr: [1, '2', true, false, 0], ccc: { bbb: 'bbb' }, d: 32432, e: '', f: null, g: false },
+  IconPlusSquare: utils.IconPlusSquare(),
+  editConfig: {
+    trigger: 'click',
+    mode: 'cell',
+    showStatus: true,
+    activeMethod: () => {
+      return props.isEdit
+    }
+  },
+  status: vue.computed(statusData),
+  buttons: [
+    { type: 'primary', text: '主要操作' },
+    { type: 'success', text: '成功操作' },
+    { type: 'danger', text: t('operation.danger') }
+  ]
 })
 wrap({ state })
 
@@ -70,5 +88,25 @@ vue.watchEffect(
     this.state.objVal = `${this.state.firstName} ${this.state.lastName}`
   })
 )
+vue.watchEffect(
+  wrap(function () {
+    this.state.IconPlusSquare = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.editConfig = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.status = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.buttons = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
 </script>
 <style scoped></style>
diff --git a/packages/vue-generator/test/testcases/sfc/accessor/schema.json b/packages/vue-generator/test/testcases/sfc/accessor/schema.json
@@ -94,6 +94,73 @@
           "value": "function() { this.state.objVal = `${this.state.firstName} ${this.state.lastName}` }"
         }
       }
+    },
+    "IconPlusSquare": {
+      "defaultValue": {
+        "type": "JSResource",
+        "value": "this.utils.IconPlusSquare()"
+      },
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.IconPlusSquare = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "editConfig": {
+      "defaultValue": {
+        "trigger": "click",
+        "mode": "cell",
+        "showStatus": true,
+        "activeMethod": {
+          "type": "JSFunction",
+          "value": "function() { return this.props.isEdit }"
+        }
+      },
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.editConfig = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "status": {
+      "defaultValue": {
+        "type": "JSExpression",
+        "value": "this.statusData",
+        "computed": true
+      },
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.status = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "buttons": {
+      "defaultValue": [
+        {
+          "type": "primary",
+          "text": "主要操作"
+        },
+        {
+          "type": "success",
+          "text": "成功操作"
+        },
+        {
+          "type": "danger",
+          "text": {
+            "type": "i18n",
+            "key": "operation.danger"
+          }
+        }
+      ],
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.buttons = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
     }
   },
   "lifeCycles": {},