mini-form-render 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-form-render",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "scripts": {
     "serve": "mpx-cli-service serve:mp",

package/src/app.mpx

@@ -20,6 +20,7 @@ createApp({
     "pages": [
       "./pages/index",
       "./pages/form-render",
+      "./pages/js-logic-render",
       "./pages/server-scheme"
     ]
   }

package/src/components/basic-picker.mpx

@@ -1,12 +1,16 @@
 <template>
   <view class="basic-picker">
     <view class="^form-item-title">{{item.title}}</view>
-    <picker wx:model="{{resultIndex}}" wx:model-event="change" range="{{item.customData.pickerArr}}">
+    <picker
+      wx:model="{{resultIndex}}"
+      wx:model-event="change"
+      range="{{item.customData.pickerArr}}"
+    >
       <view class="picker-box">
         <view class="picker-show-title">
           {{item.customData.pickerArr[resultIndex]}}
         </view>
-        <image class="picker-title-arrow" src="../image/caret-right.svg" mode="widthFix"></image>
+        <image class="picker-title-arrow" src="https://aipaint.lihuanyu.com/common/caret-right.svg" mode="widthFix"></image>
       </view>
     </picker>
   </view>

package/src/components/form.mpx

@@ -1,6 +1,6 @@
 <template>
   <view class="mini-form-container">
-    <view wx:for="{{scheme.properties}}">
+    <view wx:for="{{scheme.properties}}" wx:key="key">
       <view class="mini-form-item {{index !== scheme.properties.length - 1 ? 'retina-border-bottom' : ''}}">
         <basic-picker wx:if="{{item.widget === 'picker'}}" item="{{item}}" wx:model="{{formRes[item.key]}}"/>
         <basic-input wx:else item="{{item}}" wx:model="{{formRes[item.key]}}"/>
@@ -24,11 +24,12 @@ createComponent({
   },
   methods: {
     parseScheme(scheme) {
+      const oldFormRes = this.formRes
       this.formRes = {}
       const properties = scheme.properties || []
       properties.forEach(item => {
         const key = item.key
-        this.$set(this.formRes, key)
+        this.$set(this.formRes, key, oldFormRes[key])
       })
     }
     // handleTap() {

package/src/pages/index.mpx

@@ -4,6 +4,7 @@
 
     <view class="demo-index">
       <view bindtap="handleJump('render')">跳转去本地表单渲染测试页</view>
+      <view bindtap="handleJump('logic')">跳转去本地逻辑渲染测试页</view>
       <view bindtap="handleJump('server')">跳转去服务端协议渲染测试</view>
     </view>
   </view>
@@ -20,6 +21,8 @@ createPage({
     handleJump(action) {
       if (action === 'render') {
         mpx.navigateTo({ url: '/pages/form-render' })
+      } else if (action === 'logic') {
+        mpx.navigateTo({ url: '/pages/js-logic-render' })
       } else if (action === 'server') {
         mpx.navigateTo({ url: '/pages/server-scheme' })
       }

package/src/pages/js-logic-render.mpx

@@ -0,0 +1,59 @@
+<template>
+  <view class="form-demo-page">
+    <view style="content: ''; overflow: hidden;"></view>
+
+    <view class="form-demo-container">
+      <view class="form-title">JS逻辑控制scheme渲染表单测试</view>
+      <mini-form-render
+        class="form-render-container"
+        scheme="{{formScheme}}"
+        bindformchange="handleFormChange"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+import getFormScheme from '../test/paint-form'
+
+createPage({
+  data: {
+    formScheme: getFormScheme({})
+  },
+  onLoad() {
+    console.log('onLoad')
+  },
+  methods: {
+    handleFormChange(e) {
+      const formResult = e.detail
+      console.log('form changed: ', formResult)
+      this.formScheme = getFormScheme(formResult)
+      this.formResult = formResult
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+page
+  background-color #f5f5f5
+
+.form-demo-container
+  background #fff
+  margin 24rpx
+  border-radius 16rpx
+  padding 24rpx
+
+.form-render-container {
+  margin-top 24rpx
+}
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "mini-form-render": "../components/form"
+    }
+  }
+</script>

package/src/test/paint-form.js

@@ -0,0 +1,43 @@
+const getFormScheme = (formRes) => {
+  const baseScheme = {
+    properties: [model]
+  }
+
+  baseScheme.properties.push(formRes.model !== '二次元' ? templateDream : templateAnything)
+
+  const formScheme = baseScheme
+
+  return formScheme
+}
+
+const model = {
+  key: 'model',
+  type: 'string',
+  title: '模型选择',
+  widget: 'picker',
+  customData: {
+    pickerArr: ['绘梦', '二次元']
+  }
+}
+
+const templateDream = {
+  key: 'template',
+  type: 'string',
+  title: '模板选择',
+  widget: 'picker',
+  customData: {
+    pickerArr: ['油画', '风景', '水彩']
+  }
+}
+
+const templateAnything = {
+  key: 'template',
+  type: 'string',
+  title: '模板选择',
+  widget: 'picker',
+  customData: {
+    pickerArr: ['幻想', '动漫']
+  }
+}
+
+export default getFormScheme