vue2-client 1.8.15 → 1.8.17

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.8.15 - 1.8.17 -2023-11-23 @张振宇**
+- 调整配置化组件
+
 **1.8.14 - 1.8.15 -2023-11-23 @江超**
 - 完善导入功能的返回值
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.15",
+  "version": "1.8.17",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/AMisRender/index.js

@@ -0,0 +1,3 @@
+import AMisRender from './index.vue'
+
+export default AMisRender

package/src/base-client/components/common/AMisRender/index.vue

@@ -1,4 +1,4 @@
-<template><div>Loading...</div></template>
+<template><div ref="domRef">Loading...</div></template>
 
 <script>
 // import "amis/sdk/sdk.js";
@@ -11,8 +11,10 @@
 import qs from 'qs'
 import Vue from 'vue'
 import Index from '@vue2-client/base-client/components/index.js'
-import locale from 'ant-design-vue/es/locale-provider/zh_CN'
-
+let React
+let amisLib
+let scoped
+const apps = {}
 function loadScript (src, callback) {
   const script = document.createElement('script')
   script.setAttribute('type', 'text/javascript')
@@ -21,45 +23,50 @@ function loadScript (src, callback) {
   script.onerror = () => callback(new Error(`Failed to load ${src}`))
   document.body.appendChild(script)
 }
+const vueList = {}
 
-function loadStyles (styles) {
-  for (const path of styles) {
-    const style = document.createElement('link')
-    style.setAttribute('rel', 'stylesheet')
-    style.setAttribute('type', 'text/css')
-    style.setAttribute('href', path)
-    document.head.appendChild(style)
-  }
-}
-
-// 动态导入组件
-function CustomComponent (props) {
-  const React = window.amisRequire('react')
-  const dom = React.useRef(null)
+// eslint-disable-next-line no-unused-vars
+function CustomComponent (props, dom) {
   const store = Vue.$store
   const router = Vue.$router
   const i18n = Vue.$i18n
+  console.log('props', props)
   React.useEffect(function () {
-    new Vue({
+    vueList[props.$schema.name] = new Vue({
       router,
       store,
       i18n,
-      render: h => h('a-config-provider', {
-          props: {
-            locale: locale,
-            popContainer: document.getElementById('popContainer')
-          }
-        }, [
-          h(Index[props.$schema.type], {
-            props: props.$schema
-          })
-      ])
+      render: h => h(Index[props.$schema.type], {
+        props: props.$schema
+      })
     }).$mount(dom.current)
-  })
-  return React.createElement('div', {
+  }, [])
+  const app = React.createElement('div', {
     ref: dom
   })
+  if (apps[props.name] !== undefined) {
+    const vue = vueList[props.$schema.name]
+    vue.$children[0].active(props.data)
+  } else {
+    apps[props.name] = app
+  }
+  return app
+}
+
+function loadStyles (styles) {
+  for (const path of styles) {
+    const style = document.createElement('link')
+    style.setAttribute('rel', 'stylesheet')
+    style.setAttribute('type', 'text/css')
+    style.setAttribute('href', path)
+    document.head.appendChild(style)
+  }
+}
+// eslint-disable-next-line no-unused-vars
+function appstyle (data) {
+  console.log('111111111111')
 }
+// 动态导入组件
 
 function loadSDK () {
   return new Promise((resolve, reject) => {
@@ -127,6 +134,7 @@ export default {
       loading: false,
       amisInstance: null,
       unmounted: false,
+      applist: {}
     }
   },
 
@@ -151,73 +159,76 @@ export default {
     if (this.unmounted) {
       return
     }
-
-    const amisLib = window.amisRequire('amis')
-    const scoped = window.amisRequire('amis/embed')
+    React = window.amisRequire('react')
+    amisLib = window.amisRequire('amis')
+    scoped = window.amisRequire('amis/embed')
     const { normalizeLink } = amisLib
     const router = this.$router
+    // eslint-disable-next-line no-prototype-builtins
+    // console.log('this.schema.type', this.schema.type)
+
     amisLib.Renderer({
       test: new RegExp(`(^|\/)${this.schema.type}`)
-    })(CustomComponent)
+    })(props => CustomComponent(props, this.$el))
+
     const instance = scoped.embed(
-        this.$el,
-        this.schema,
-        {
-          data: {
-            ...this.locals,
-          },
-          context: this.context,
-          location: this.location,
-
-          // todo 下发 location 对象
-          ...this.props,
+      this.$el,
+      this.schema,
+      {
+        data: {
+          ...this.locals,
         },
-        {
-          // 覆盖 amis env
-          // 参考 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
-          jumpTo: (to, action) => {
-            if (to === 'goBack') {
-              return router.go(-1)
-            }
-
-            to = normalizeLink(to, this.location)
-
-            if (action?.actionType === 'url') {
-              action.blank === false ? router.push(to) : window.open(to)
-              return
-            }
-
-            // 主要是支持 nav 中的跳转
-            if (action && to && action.target) {
-              window.open(to, action.target)
-              return
-            }
-
-            if (/^https?:\/\//.test(to)) {
-              window.location.replace(to)
-            } else {
-              router.push(to)
-            }
-          },
-
-          updateLocation: (location, replace) => {
-            if (location === 'goBack') {
-              return router.go(-1)
-            }
-
-            location = normalizeLink(location, this.location)
-            replace ? router.replace(location) : router.replace(location)
-          },
-
-          ...this.env,
+        context: this.context,
+        location: this.location,
+
+        // todo 下发 location 对象
+        ...this.props,
+      },
+      {
+        // 覆盖 amis env
+        // 参考 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
+        jumpTo: (to, action) => {
+          if (to === 'goBack') {
+            return router.go(-1)
+          }
+
+          to = normalizeLink(to, this.location)
+
+          if (action?.actionType === 'url') {
+            action.blank === false ? router.push(to) : window.open(to)
+            return
+          }
+
+          // 主要是支持 nav 中的跳转
+          if (action && to && action.target) {
+            window.open(to, action.target)
+            return
+          }
+
+          if (/^https?:\/\//.test(to)) {
+            window.location.replace(to)
+          } else {
+            router.push(to)
+          }
         },
-        () => {
-          this.$emit('ready', {
-            instance,
-          })
-        }
-    )
 
+        updateLocation: (location, replace) => {
+          if (location === 'goBack') {
+            return router.go(-1)
+          }
+
+          location = normalizeLink(location, this.location)
+          replace ? router.replace(location) : router.replace(location)
+        },
+
+        ...this.env,
+      },
+      () => {
+        this.$emit('ready', {
+          instance,
+        })
+      }
+    )
     this.amisInstance = instance
   },
 
@@ -232,6 +243,9 @@ export default {
         ...this.props,
       })
     },
+    initConfig () {
+      console.warn('initConfig')
+    }
   },
 
   destroyed () {

package/src/base-client/components/common/CreateQuery/CreateQuery.vue

@@ -236,7 +236,6 @@
 </template>
 
 <script>
-import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
 import JsonViewer from 'vue-json-viewer'
 import FileSaver from 'file-saver'
@@ -248,8 +247,7 @@ export default {
   components: {
     CreateQueryItem,
     JsonViewer,
-    XFormTable,
-    XFormItem
+    XFormTable
   },
   data () {
     return {

package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQuery.vue

@@ -15,14 +15,19 @@
           :rules="rules"
           :wrapper-col="wrapperCol"
         >
-          <a-form-model-item label="参数组名称" prop="group">
-            <a-input v-model="form.group" placeholder="设置表单项的组名，如：设置上报参数" />
-          </a-form-model-item>
-          <a-form-model-item label="参数组描述" prop="describe">
-            <a-input v-model="form.describe" placeholder="简单描述参数组，如：用于配置物联网设备的上报参数" />
-          </a-form-model-item>
+          <template v-if="asAParamsGroup">
+            <a-form-model-item label="参数组名称" prop="group">
+              <a-input v-model="form.group" placeholder="设置表单项的组名，如：设置上报参数" />
+            </a-form-model-item>
+            <a-form-model-item label="参数组描述" prop="describe">
+              <a-input v-model="form.describe" placeholder="简单描述参数组，如：用于配置物联网设备的上报参数" />
+            </a-form-model-item>
+          </template>
           <a-form-model-item label="数据字段" prop="column">
-            <a-button type="primary" @click="addColumnItem()">增加</a-button>
+            <a-space>
+              <a-button type="primary" @click="addColumnItem()">增加</a-button>
+              <a-button icon="import" @click="$message.warn('从创意库中选择并引用高质量的通用表单项配置，敬请期待')">从创意库引入</a-button>
+            </a-space>
             <a-row :gutter="24">
               <a-col :span="11">
                 <span style="font-weight: bold">
@@ -44,7 +49,6 @@
             <div
               v-for="(columnItem, index) in form.column"
               :key="index"
-              class="column_item"
               draggable="true"
               @dragend="handleDragEnd($event, columnItem)"
               @dragenter="handleDragEnter($event, columnItem)"
@@ -53,7 +57,7 @@
               <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
                 <span class="dragTips">拖到此处放置</span>
               </a-row>
-              <a-row :gutter="24">
+              <a-row :gutter="24" class="column_item">
                 <a-col :span="11">
                   <span style="font-weight: bold">
                     {{ columnItem.title }}
@@ -73,41 +77,9 @@
               </a-row>
             </div>
           </a-form-model-item>
-          <!-- 暂时不需要 -->
-          <!-- <a-form-model-item label="接口插槽" prop="apiSlot">
-            <a-popover placement="right" title="说明">
-              <template slot="content">
-                <p>通过插槽，你可以轻松扩展查询配置的默认业务，配置的插槽会根据类型在默认业务的前后执行，类似于切面</p>
-                <p><span style="color: #FF0000">注意：插槽不应改变默认的业务行为</span></p>
-                <p>如果配置了业务执行前插槽,<br/>执行默认业务前会先执行设置的插槽logic，传给插槽的参数为data本身</p>
-                <p>如果配置了业务执行后插槽,<br/>执行默认业务后会执行设置的插槽logic，传给插槽的参数为默认业务的返回值</p>
-                <img src="@vue2-client/assets/img/querySlotDemo.svg" style="zoom:0.5">
-              </template>
-              <a-button type="primary" @click="addApiSlot()">增加</a-button>
-            </a-popover>
-            <div
-              v-for="(columnItem, index) in form.apiSlotView"
-              :key="index"
-            >
-              <a-input v-model="columnItem.slotName" placeholder="插槽logic名称">
-                <a-select slot="addonBefore" v-model="columnItem.slotType" style="width: 10rem" placeholder="选择插槽类型">
-                  <a-select-option
-                    v-for="item in apiSlotData"
-                    :key="item.value"
-                    :value="item.value">
-                    {{ item.label }}
-                  </a-select-option>
-                </a-select>
-                <a-icon slot="addonAfter" type="close" @click="removeApiSlotItem(index)"/>
-              </a-input>
-            </div>
-          </a-form-model-item> -->
         </a-form-model>
         <create-simple-form-query-item ref="queryItem" @getColumn="getColumn" @itemHandle="itemHandle"/>
-        <a-space>
-          <a-button type="default" @click="view">预览</a-button>
-          <a-button type="primary" @click="submit">保存</a-button>
-        </a-space>
+        <a-button type="primary" @click="view">操作</a-button>
       </a-col>
       <a-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
         <a-card :bordered="false" size="small" style="overflow: auto" title="预览">
@@ -119,18 +91,18 @@
         </a-card>
       </a-col>
     </a-row>
-    <x-add-form ref="xAddForm"/>
+    <x-add-form ref="xAddForm" @onSubmit="submit"/>
   </a-drawer>
 </template>
 
 <script>
-import CreateSimpleFormQueryItem from './CreateSimpleFormQueryItem'
-import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
+import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
 import JsonViewer from 'vue-json-viewer'
 import FileSaver from 'file-saver'
 import { mapState } from 'vuex'
-import { post } from '@vue2-client/services/api'
+import CreateSimpleFormQueryItem from './CreateSimpleFormQueryItem'
 import { parseConfigUrl } from '@vue2-client/services/api/common'
+import { post } from '@vue2-client/services/api'
 
 export default {
   name: 'CreateSimpleFormQuery',
@@ -148,8 +120,8 @@ export default {
       labelCol: { span: 3 },
       wrapperCol: { span: 18 },
       form: {
-        group: '',
-        describe: '',
+        group: undefined,
+        describe: undefined,
         column: [],
         apiSlotView: [],
         apiSlot: {},
@@ -159,10 +131,6 @@ export default {
       selectIndex: null,
       selectType: undefined,
       joinArray: [],
-      rules: {
-        group: [{ required: true, message: '请输入参数组名称', trigger: 'blur' }],
-        describe: [{ required: true, message: '请输入参数组描述', trigger: 'blur' }]
-      },
       ending: null,
       dragging: null,
       // 操作按钮状态集合
@@ -182,20 +150,34 @@ export default {
     this.initView()
   },
   computed: {
-    ...mapState('setting', ['isMobile'])
+    ...mapState('setting', ['isMobile']),
+    rules () {
+      return this.asAParamsGroup ? {
+        group: [{ required: true, message: '请输入参数组名称', trigger: 'blur' }],
+        describe: [{ required: true, message: '请输入参数组描述', trigger: 'blur' }]
+      } : {}
+    },
   },
   props: {
     visible: {
       type: Boolean,
       default: false
     },
-    serviceName: {
-      type: String,
-      default: undefined
+    asAParamsGroup: {
+      type: Boolean,
+      default: false
     },
     toEditJson: {
       type: Object,
       default: () => {}
+    },
+    saveExportJson: {
+      type: Boolean,
+      default: false
+    },
+    serviceName: {
+      type: String,
+      default: undefined
     }
   },
   watch: {
@@ -214,8 +196,6 @@ export default {
         // 处理具体表单项
         this.form = Object.assign(
           {
-            group: '',
-            describe: '',
             apiSlotView: [],
             apiSlot: {},
             column: []
@@ -290,6 +270,7 @@ export default {
       this.result = {}
     },
     onClose () {
+      this.$emit('close')
       this.$emit('update:visible', false)
     },
     addJoinItem () {
@@ -298,7 +279,7 @@ export default {
     },
     itemHandle (item, type) {
       this.itemMap[item.key] = item
-      if (type === '新增') {
+      if (this.type === '新增') {
         this.form.column.push(item)
       } else {
         this.$set(this.form.column, this.selectIndex, item)
@@ -314,6 +295,7 @@ export default {
       this.$refs.queryItem.addColumnItemExecute()
     },
     editColumnItem (key, index) {
+      this.type = '修改'
       if (this.itemMap[key]) {
         this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
         this.selectIndex = index
@@ -349,8 +331,6 @@ export default {
       this.form.column.splice(index, 1, itemA)
       this.form.column.splice(newIndex, 1, itemB)
     },
-    changeJoinArray () {
-    },
     exportJson () {
       const data = JSON.stringify(this.result, null, 2)
       const blob = new Blob([data], { type: 'application/json' })
@@ -391,22 +371,25 @@ export default {
                 businessType: '新增',
                 title: '效果预览',
                 formItems: res.formJson,
-                serviceName: this.serviceName,
-                viewMode: true
+                serviceName: this.serviceName
               })
             })
           })
         }
       })
     },
-    submit () {
+    submit (params, callback) {
       this.$refs.businessCreateForm.validate(valid => {
-        if (valid) {
-          this.viewHandle(() => {
-            // saveQueryParams
+        this.viewHandle(() => {
+          if (this.saveExportJson) {
             this.exportJson()
-          })
-        }
+          } else {
+            this.$emit('saveQueryParams', this.result)
+            if (callback) {
+              callback()
+            }
+          }
+        })
       })
     },
     // 判断是否为json字符串
@@ -455,7 +438,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.column_item :hover {
+.column_item:hover {
   background-color:rgba(64, 169, 255,0.25);
 }
 .dragTips{

package/src/base-client/components/common/FormGroupEdit/FormGroupEdit.vue

@@ -11,7 +11,7 @@
       @onSubmit="onAddOrEditSubmit"/>
     <a-list
       :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
-      :dataSource="columnJson.groups"
+      :dataSource="content.groups"
     >
       <a-list-item slot="renderItem" slot-scope="item">
         <a-card :hoverable="true" @click="toEdit(item)">
@@ -40,7 +40,6 @@ export default {
     return {
       // 页面宽度
       screenWidth: document.documentElement.clientWidth,
-      columnJson: {},
       formObj: {
         groupName: '',
         formJson: []
@@ -67,6 +66,10 @@ export default {
       default: () => {
         return {}
       }
+    },
+    content: {
+      type: Object,
+      required: true
     }
   },
   watch: {
@@ -79,9 +82,6 @@ export default {
   methods: {
     // 初始化组件
     initView () {
-      this.$emit('getColumnJson', val => {
-        this.columnJson = val
-      })
     },
     toEdit (item) {
       parseConfig(item, 'SIMPLE_FORM', this.serviceName).then(res => {

package/src/base-client/components/common/FormGroupQuery/FormGroupQuery.vue

@@ -8,11 +8,12 @@
   >
     <create-simple-form-query
       :to-edit-json="editItem()"
+      :as-a-params-group="true"
       :visible.sync="createQueryVisible"
-      @saveSimpleFormQueryParams="saveQueryParams"
+      @saveQueryParams="saveQueryParams"
     />
     <a-list
-      :dataSource="columnJsonCopy()"
+      :dataSource="contentCopy()"
       :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
     >
       <a-list-item slot="renderItem" slot-scope="item, index">
@@ -39,7 +40,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import CreateSimpleFormQuery from '@vue2-client/base-client/components/common/CreateSimpleFormQuery'
+import CreateSimpleFormQuery from '../CreateSimpleFormQuery'
 
 export default {
   name: 'FormGroupQuery',
@@ -53,7 +54,6 @@ export default {
       // 是否显示生成查询配置抽屉
       createQueryVisible: false,
       targetIndex: 0,
-      columnJson: {},
       editIndex: -1
     }
   },
@@ -67,6 +67,10 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    content: {
+      type: Object,
+      required: true
     }
   },
   watch: {
@@ -80,9 +84,6 @@ export default {
     // 初始化组件
     initView () {
       this.editIndex = -1
-      this.$emit('getColumnJson', val => {
-        this.columnJson = val
-      })
     },
     toCreateQuery () {
       this.editIndex = -1
@@ -101,8 +102,8 @@ export default {
         okType: 'danger',
         cancelText: '取消',
         onOk () {
-          _this.columnJson.groups.splice(index, 1)
-          _this.$emit('saveQueryParams', _this.columnJson)
+          _this.content.groups.splice(index, 1)
+          _this.$emit('saveQueryParams', _this.content)
         }
       })
     },
@@ -111,21 +112,21 @@ export default {
     },
     // 存储查询配置信息
     saveQueryParams (source) {
-      if (!this.columnJson.groups) {
-        this.columnJson.groups = []
+      if (!this.content.groups) {
+        this.content.groups = []
       }
       if (this.editIndex !== -1) {
-        this.columnJson.groups[this.editIndex] = source
+        this.content.groups[this.editIndex] = source
       } else {
-        this.columnJson.groups.push(source)
+        this.content.groups.push(source)
       }
-      this.$emit('saveQueryParams', this.columnJson)
+      this.$emit('saveQueryParams', this.content)
       this.createQueryVisible = false
     },
-    columnJsonCopy () {
+    contentCopy () {
       let groups
-      if (this.columnJson.groups) {
-        groups = JSON.parse(JSON.stringify(this.columnJson.groups))
+      if (this.content.groups) {
+        groups = JSON.parse(JSON.stringify(this.content.groups))
       } else {
         groups = []
       }
@@ -134,7 +135,7 @@ export default {
     },
     editItem () {
       if (this.editIndex !== -1) {
-        return JSON.parse(JSON.stringify(this.columnJson.groups[this.editIndex]))
+        return JSON.parse(JSON.stringify(this.content.groups[this.editIndex]))
       } else {
         return {}
       }

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -46,7 +46,7 @@
       </template>
       <template v-else>
         <a-empty>
-          <span slot="description"> 页面配置不存在，请联系系统管理员 </span>
+          <span slot="description"> 页面配置不存在请联系系统管理员， </span>
         </a-empty>
       </template>
     </div>
@@ -239,6 +239,26 @@ export default {
         return false
       }
     },
+    active (props) {
+      let num = false
+      for (const key in props) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (this.$props.hasOwnProperty(key)) {
+          console.log('key', this.$props[key] instanceof Object)
+          if (this.$props[key] instanceof Object) {
+            this.$props[key] = JSON.parse(props[key])
+          } else {
+            this.$props[key] = props[key]
+          }
+          num = true
+        }
+        console.log(key, props[key])
+      }
+      console.warn('activeProps', this.$props)
+      if (num) {
+        this.initConfig()
+      }
+    },
     /**
      * 提交新增/修改表单后事件
      */
@@ -338,6 +358,22 @@ export default {
      */
     refreshTable (toFirstPage = true) {
       this.$refs.xTable.refresh(toFirstPage)
+    },
+  },
+  action: {
+    /**
+     * 实现doAction方法
+     */
+    doAction (actionType, args, data) {
+      switch (actionType) {
+        case 'refreshTable':
+          for (const item in args) {
+            console.log('item', item)
+          }
+          break
+        default:
+          break
+      }
     }
   }
 }

package/src/base-client/components/index.js

@@ -14,8 +14,8 @@ import FormGroupEdit from './common/FormGroupEdit'
 import FormGroupQuery from './common/FormGroupQuery'
 import AddressSearchCombobox from './common/AddressSearchCombobox'
 import AmapMarker from './common/AmapMarker'
-import CreateQuery from './common/CreateQuery'
-import CreateSimpleFormQuery from './common/CreateSimpleFormQuery'
+// import CreateQuery from './common/CreateQuery'
+// import CreateSimpleFormQuery from './common/CreateSimpleFormQuery'
 import PersonSetting from './common/PersonSetting'
 import XFormTable from './common/XFormTable'
 import XStepView from './common/XStepView'
@@ -38,8 +38,8 @@ export default {
   FormGroupQuery,
   AddressSearchCombobox,
   AmapMarker,
-  CreateQuery,
-  CreateSimpleFormQuery,
+  // CreateQuery,
+  // CreateSimpleFormQuery,
   XFormTable,
   PersonSetting,
   Tree,

package/src/pages/AMisDemo/AMisDemo.vue

@@ -3,54 +3,204 @@
 </template>
 <script>
 import AMISRenderer from '@vue2-client/base-client/components/common/AMisRender'
+// import Vue from 'vue'
+// import Index from '@vue2-client/base-client/components/index.js'
+//
+// const vms = {}
+// const store = Vue.$store
+// const router = Vue.$router
+// const i18n = Vue.$i18n
 
 const schema = {
   // 原生与自定义组件混用
   type: 'page',
-  title: '页面主题',
+  css: {
+  },
   body: [
     {
-      // 自定义组件
-      type: 'XFormTable',
-      queryParamsName: 'crud_dictionary_manage'
-    }
-  ],
-  // 原生边栏组件
-  aside: [
+      type: 'grid',
+      columns: [
+        {
+          mode: 'horizontal',
+          body: {
+            name: 'queryParams',
+            type: 'input-text',
+            label: '查询值'
+          },
+          md: 4
+        }
+      ]
+    },
     {
-      type: 'panel',
-      title: '边栏',
-      body: [
+      type: 'grid',
+      columns: [
         {
-          type: 'input-tree',
-          label: '树选择框',
-          name: 'tree',
-          options: [
+          body: [
+            {
+              type: 'input-tree',
+              name: 'test',
+              label: '树选择框',
+              source: {
+                method: 'post',
+                url: '/api/af-system/logic/get_root_nodes'
+              },
+              // api: {
+              //   method: 'post',
+              //   url: '/api/af-system/logic/get_root_nodes'
+              // }
+            }
+          ],
+          id: 'u:b1d2075dc231',
+          md: 1.5
+        },
+        {
+          body: [
+                {
+                  type: 'table-view',
+                  name: 'table-view1',
+                  api: '',
+                  trs: [
+                    {
+                      background: '#F7F7F7',
+                      tds: [
+                        {
+                          align: 'center',
+                          body: {
+                            type: 'tpl',
+                            tpl: '地区'
+                          }
+                        },
+                        {
+                          align: 'center',
+                          body: {
+                            type: 'tpl',
+                            tpl: '城市'
+                          }
+                        },
+                        {
+                          align: 'center',
+                          body: {
+                            type: 'tpl',
+                            tpl: '销量'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      tds: [
+                        {
+                          align: 'center',
+                          colspan: 2,
+                          rowspan: 2,
+                          body: {
+                            type: 'tpl',
+                            tpl: '${queryParams}'
+                          }
+                        },
+                        {
+                          body: {
+                            type: 'tpl',
+                            tpl: '北京'
+                          },
+                        }
+                      ]
+                    },
+                    {
+                      tds: [
+                        {
+                          body: {
+                            type: 'tpl',
+                            tpl: '上京'
+                          },
+                        }
+                      ]
+                    }
+                  ]
+                },
             {
-              label: '选项A',
-              value: 'A',
-              children: [
+
+            },
+            {
+              type: 'table-view',
+              trs: [
                 {
-                  label: '选项C',
-                  value: 'C'
+                  background: '#F7F7F7',
+                  tds: [
+                    {
+                      align: 'center',
+                      body: {
+                        type: 'tpl',
+                        tpl: '地区'
+                      }
+                    },
+                    {
+                      align: 'center',
+                      body: {
+                        type: 'tpl',
+                        tpl: '城市'
+                      }
+                    },
+                    {
+                      align: 'center',
+                      body: {
+                        type: 'tpl',
+                        tpl: '销量'
+                      }
+                    }
+                  ]
                 },
                 {
-                  label: '选项D',
-                  value: 'D'
+                  tds: [
+                    {
+                      align: 'center',
+                      colspan: 3,
+                      body: {
+                        type: 'tpl',
+                        tpl: '北京'
+                      }
+                    },
+
+                  ]
                 }
               ]
             },
-            {
-              label: '选项B',
-              value: 'B'
-            }
-          ]
+          // {
+          //   name: 'username', // 如果要放在 form 中，需要设置 name，onChange 将会设置这个值
+          //   type: 'custom',
+          //   // onMount 将会在组件创建时执行，默认会创建一个空 div 标签，也可以设置 inline: true 来创建 span 标签
+          //   // dom 是 dom 节点，value 是初始数据，比如表单 name 初始拿到的数据，onChange 只有在表单下才会有
+          //   onMount: (dom, value, onChange) => {
+          //     const vm = new Vue({
+          //       router,
+          //       store,
+          //       i18n,
+          //       render: h => h(Index.XFormTable, {
+          //         props: {
+          //           queryParamsName: `crud_dictionary_manage`
+          //         }
+          //       })
+          //     })
+          //     vms.XFormTable = vm
+          //     dom.appendChild(vm.$mount().$el)
+          //   },
+          //   // onUpdate 将会在数据更新时被调用
+          //   // dom 是 dom 节点、data 将包含表单所有数据，prevData 是之前表单的所有数据
+          //   onUpdate: (dom, data, prevData) => {
+          //     console.log('数据有变化', data)
+          //     const vm = vms.XFormTable
+          //     vm.$children[0].active(data)
+          //   },
+          //   // onUnmount 将会在组件被销毁的时候调用，用于清理资源
+          //   onUnmount: () => {
+          //     console.log('组件被销毁')
+          //   },
+          // }
+          ],
+          id: 'u:e4e49c147c06'
         }
-      ]
+      ],
     }
-  ],
-  asideResizor: true,
-  asideSticky: false
+  ]
 }
 
 export default {
@@ -58,10 +208,16 @@ export default {
   components: {
     'amis-renderer': AMISRenderer,
   },
-  computed: {},
+  computed: {
+  },
+  mounted () {
+
+  },
   data: () => ({
     schema: schema,
-    locals: {},
+    locals: { fixedQueryForm: {} },
+    vms: {},
+    queryParamsName: 'crud_dictionary_manage'
   }),
 }
 </script>

package/src/pages/AMisDemo/AMisDemo2.vue

@@ -0,0 +1,74 @@
+<template>
+  <amis-renderer :schema="schemaJson" :locals="locals" />
+</template>
+<script>
+import AMISRenderer from '@vue2-client/base-client/components/common/AMisRender'
+
+const schema = {
+    // 原生与自定义组件混用
+    type: 'page',
+    data: {
+      queryParamsName: 'crud_dictionary_manage',
+      fixedQueryForm: '{}'
+    },
+    body: [
+      {
+        type: 'tabs',
+        tabsMode: 'chrome',
+        name: 'fixedQueryForm',
+        id: 'username',
+        tabs: [
+          {
+            title: '测试1',
+            value: '{"d_f_name":"设备异常处理方式"}',
+            body: {
+              name: 'username',
+              id: 'XFormTable1',
+              type: 'XFormTable',
+            }
+          },
+          {
+            title: '选项卡3',
+            value: '{"d_f_name":"二级用气性质"}',
+            body: {
+                name: 'username2',
+                id: 'XFormTable2',
+                type: 'XFormTable',
+              }
+          },
+        ],
+      },
+    ]
+  }
+
+export default {
+  name: 'AMisDemo',
+  components: {
+    'amis-renderer': AMISRenderer,
+  },
+  computed: {
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: () => {
+        return 'crud_dictionary_manage'
+      }
+    },
+    schemaJson: {
+      type: Object,
+      default: () => {
+        return schema
+      }
+    }
+  },
+  mounted () {
+  },
+  data: () => ({
+    locals: {},
+    vms: {},
+  }),
+  methods: {
+  }
+}
+</script>

package/src/router.js

@@ -7,7 +7,9 @@ function loadView (view) {
 const routes = [
   // 对于每个路由，你都可以使用 'loadView' 方法动态加载对应的组件
   { path: '/Tree', component: loadView('Tree') },
+  { path: '/XStepView', component: loadView('XStepView') },
   { path: '/Amis', component: () => import('@vue2-client/pages/AMisDemo/AMisDemo') },
+  { path: '/Amis2', component: () => import('@vue2-client/pages/AMisDemo/AMisDemo2') },
   // ... 其他路由
 ]
 export default routes