远程接口返回数据位置读取

Author: JakHuang

src/components/generator/config.js

@@ -186,7 +186,8 @@ export const selectComponents = [
       label: '级联选择',
       url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
       method: 'get',
-      dataKey: 'list',
+      dataPath: 'list',
+      dataConsumer: 'options',
       showLabel: true,
       labelWidth: null,
       tag: 'el-cascader',
@@ -561,7 +562,8 @@ export const layoutComponents = [
       label: '表格[开发中]',
       dataType: 'dynamic',
       method: 'get',
-      dataKey: 'list',
+      dataPath: 'list',
+      dataConsumer: 'data',
       url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
       children: [{
         __config__: {

src/components/generator/js.js

@@ -232,7 +232,7 @@ function buildOptionMethod(methodName, model, methodList, scheme) {
       url: '${config.url}'
     }).then(resp => {
       var { data } = resp
-      this.${model} = data.${config.dataKey}
+      this.${model} = data.${config.dataPath}
     })
   },`
   methodList.push(str)

src/views/index/Home.vue

@@ -267,24 +267,35 @@ export default {
     })
   },
   methods: {
+    setObjectValueByStringKeys(obj, strKeys, val) {
+      const arr = strKeys.split('.')
+      arr.reduce((pre, item, i) => {
+        if (arr.length === i + 1) {
+          pre[item] = val
+        } else if (Object.prototype.toString.call(pre[item]) !== '[Object Object]') {
+          pre[item] = {}
+        }
+        return pre[item]
+      }, obj)
+    },
+    setRespData(component, respData) {
+      const { dataPath, renderKey, dataConsumer } = component.__config__
+      if (!dataPath || !dataConsumer) return
+      const data = dataPath.split('.').reduce((pre, item) => pre[item], respData)
+      this.setObjectValueByStringKeys(component, dataConsumer, data)
+      const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
+      if (i > -1) this.$set(this.drawingList, i, component)
+    },
     fetchData(component) {
-      const {
-        dataType, method, url, dataKey, renderKey
-      } = component.__config__
+      const { dataType, method, url } = component.__config__
       if (dataType === 'dynamic' && method && url) {
         this.setLoading(component, true)
         this.$axios({
           method,
           url
         }).then(resp => {
           this.setLoading(component, false)
-          if (dataKey) {
-            component.data = dataKey.split('.').reduce((pre, item) => pre[item], resp.data)
-          } else {
-            component.data = resp.data
-          }
-          const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
-          if (i > -1) this.$set(this.drawingList, i, component)
+          this.setRespData(component, resp.data)
         })
       }
     },

src/views/index/RightPanel.vue

@@ -376,7 +376,7 @@
               </el-form-item>
               <el-form-item label="数据位置">
                 <el-input
-                  v-model="activeData.__config__.dataKey"
+                  v-model="activeData.__config__.dataPath"
                   placeholder="请输入数据位置"
                   @blur="$emit('fetch-data', activeData)"
                 />