feat: 表格组件获取远程数据

Author: JakHuang

src/components/generator/config.js

@@ -559,6 +559,10 @@ export const layoutComponents = [
       changeTag: true,
       labelWidth: null,
       label: '表格[开发中]',
+      dataType: 'dynamic',
+      method: 'get',
+      dataKey: 'list',
+      url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
       children: [{
         __config__: {
           layout: 'raw',
@@ -610,10 +614,10 @@ export const layoutComponents = [
         label: '操作'
       }]
     },
-    data: [{
-      date: '2016-05-02',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
+    data: [],
+    directives: [{
+      name: 'loading',
+      value: true
     }],
     border: true,
     type: 'default',

src/views/index/Home.vue

@@ -95,6 +95,7 @@
       :form-conf="formConf"
       :show-field="!!drawingList.length"
       @tag-change="tagChange"
+      @fetch-data="fetchData"
     />
 
     <form-drawer
@@ -266,18 +267,48 @@ export default {
     })
   },
   methods: {
+    fetchData(component) {
+      const {
+        dataType, method, url, dataKey, renderKey
+      } = 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)
+        })
+      }
+    },
+    setLoading(component, val) {
+      const { directives } = component
+      if (Array.isArray(directives)) {
+        const t = directives.find(d => d.name === 'loading')
+        if (t) t.value = val
+      }
+    },
     activeFormItem(currentItem) {
       this.activeData = currentItem
       this.activeId = currentItem.__config__.formId
     },
     onEnd(obj) {
       if (obj.from !== obj.to) {
+        this.fetchData(tempActiveData)
         this.activeData = tempActiveData
         this.activeId = this.idGlobal
       }
     },
     addComponent(item) {
       const clone = this.cloneComponent(item)
+      this.fetchData(clone)
       this.drawingList.push(clone)
       this.activeFormItem(clone)
     },

src/views/index/RightPanel.vue

@@ -339,9 +339,9 @@
             <el-divider />
           </template>
 
-          <template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1">
+          <template v-if="['el-cascader', 'el-table'].includes(activeData.__config__.tag)">
             <el-divider>选项</el-divider>
-            <el-form-item label="数据类型">
+            <el-form-item v-if="activeData.__config__.dataType" label="数据类型">
               <el-radio-group v-model="activeData.__config__.dataType" size="small">
                 <el-radio-button label="dynamic">
                   动态数据
@@ -359,11 +359,13 @@
                   :title="activeData.__config__.url"
                   placeholder="请输入接口地址"
                   clearable
+                  @blur="$emit('fetch-data', activeData)"
                 >
                   <el-select
                     slot="prepend"
                     v-model="activeData.__config__.method"
                     :style="{width: '85px'}"
+                    @change="$emit('fetch-data', activeData)"
                   >
                     <el-option label="get" value="get" />
                     <el-option label="post" value="post" />
@@ -373,17 +375,24 @@
                 </el-input>
               </el-form-item>
               <el-form-item label="数据位置">
-                <el-input v-model="activeData.__config__.dataKey" placeholder="请输入标签键名" />
-              </el-form-item>
-              <el-form-item label="标签键名">
-                <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
-              </el-form-item>
-              <el-form-item label="值键名">
-                <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
-              </el-form-item>
-              <el-form-item label="子级键名">
-                <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
+                <el-input
+                  v-model="activeData.__config__.dataKey"
+                  placeholder="请输入数据位置"
+                  @blur="$emit('fetch-data', activeData)"
+                />
               </el-form-item>
+
+              <template v-if="activeData.props && activeData.props.props">
+                <el-form-item label="标签键名">
+                  <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
+                </el-form-item>
+                <el-form-item label="值键名">
+                  <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
+                </el-form-item>
+                <el-form-item label="子级键名">
+                  <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
+                </el-form-item>
+              </template>
             </template>
 
             <!-- 级联选择静态树 -->