feat: 级联组件动态获取数据

Author: JakHuang

package.json

@@ -13,11 +13,12 @@
   },
   "dependencies": {
     "@babel/parser": "^7.7.4",
+    "axios": "^0.19.2",
     "clipboard": "^2.0.4",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11",
     "file-saver": "^2.0.2",
     "throttle-debounce": "^2.1.0",
+    "vue": "^2.6.11",
     "vuedraggable": "^2.23.2"
   },
   "devDependencies": {

public/index.html

@@ -80,7 +80,6 @@
   <link href="https://lib.baomitu.com/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
   <script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
   <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
-  <!-- <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script> -->
   <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
 </head>
 

public/preview.html

@@ -9,7 +9,6 @@
     <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
     <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
     <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
-    <!-- <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script> -->
     <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
     <style>
       body{

src/components/generator/config.js

@@ -184,6 +184,9 @@ export const selectComponents = [
   {
     __config__: {
       label: '级联选择',
+      url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
+      method: 'get',
+      dataKey: 'list',
       showLabel: true,
       labelWidth: null,
       tag: 'el-cascader',

src/components/generator/js.js

@@ -26,9 +26,10 @@ export function makeUpJs(formConfig, type) {
   const propsList = []
   const methodList = mixinMethod(type)
   const uploadVarList = []
+  const created = []
 
   formConfig.fields.forEach(el => {
-    buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
+    buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created)
   })
 
   const script = buildexport(
@@ -39,14 +40,15 @@ export function makeUpJs(formConfig, type) {
     optionsList.join('\n'),
     uploadVarList.join('\n'),
     propsList.join('\n'),
-    methodList.join('\n')
+    methodList.join('\n'),
+    created.join('\n')
   )
   confGlobal = null
   return script
 }
 
 // 构建组件属性
-function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) {
+function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created) {
   const config = scheme.__config__
   const slot = scheme.__slot__
   buildData(scheme, dataList)
@@ -58,7 +60,9 @@ function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, pr
     if (config.dataType === 'dynamic') {
       const model = `${scheme.__vModel__}Options`
       const options = titleCase(model)
-      buildOptionMethod(`get${options}`, model, methodList)
+      const methodName = `get${options}`
+      buildOptionMethod(methodName, model, methodList, scheme)
+      callInCreated(methodName, created)
     }
   }
 
@@ -83,11 +87,16 @@ function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, pr
   // 构建子级组件属性
   if (config.children) {
     config.children.forEach(item => {
-      buildAttributes(item, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
+      buildAttributes(item, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created)
     })
   }
 }
 
+// 在Created调用函数
+function callInCreated(methodName, created) {
+  created.push(`this.${methodName}()`)
+}
+
 // 混入处理函数
 function mixinMethod(type) {
   const list = []; const
@@ -214,16 +223,23 @@ function buildSubmitUpload(scheme) {
   return str
 }
 
-function buildOptionMethod(methodName, model, methodList) {
+function buildOptionMethod(methodName, model, methodList, scheme) {
+  const config = scheme.__config__
   const str = `${methodName}() {
-    // TODO 发起请求获取数据
-    this.${model}
+    // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
+    this.$axios({
+      method: '${config.method}',
+      url: '${config.url}'
+    }).then(resp => {
+      var { data } = resp
+      this.${model} = data.${config.dataKey}
+    })
   },`
   methodList.push(str)
 }
 
 // js整体拼接
-function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods) {
+function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods, created) {
   const str = `${exportDefault}{
   ${inheritAttrs[type]}
   components: {},
@@ -243,7 +259,9 @@ function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, m
   },
   computed: {},
   watch: {},
-  created () {},
+  created () {
+    ${created}
+  },
   mounted () {},
   methods: {
     ${methods}

src/utils/db.js

@@ -1,5 +1,5 @@
 const DRAWING_ITEMS = 'drawingItems'
-const DRAWING_ITEMS_VERSION = '1.1'
+const DRAWING_ITEMS_VERSION = '1.2'
 const DRAWING_ITEMS_VERSION_KEY = 'DRAWING_ITEMS_VERSION'
 const DRAWING_ID = 'idGlobal'
 const TREE_NODE_ID = 'treeNodeId'

src/views/index/Home.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="container">
     <div class="left-board">

src/views/index/RightPanel.vue

@@ -353,6 +353,28 @@
             </el-form-item>
 
             <template v-if="activeData.__config__.dataType === 'dynamic'">
+              <el-form-item label="接口地址">
+                <el-input
+                  v-model="activeData.__config__.url"
+                  :title="activeData.__config__.url"
+                  placeholder="请输入接口地址"
+                  clearable
+                >
+                  <el-select
+                    slot="prepend"
+                    v-model="activeData.__config__.method"
+                    :style="{width: '85px'}"
+                  >
+                    <el-option label="get" value="get" />
+                    <el-option label="post" value="post" />
+                    <el-option label="put" value="put" />
+                    <el-option label="delete" value="delete" />
+                  </el-select>
+                </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>

src/views/index/main.js

@@ -3,11 +3,13 @@ import App from './App.vue'
 import router from '@/router'
 import '@/styles/index.scss'
 import '@/icons'
+import axios from 'axios'
 import Tinymce from '@/components/tinymce/index.vue'
 
 Vue.component('tinymce', Tinymce)
 
 Vue.config.productionTip = false
+Vue.prototype.$axios = axios
 
 new Vue({
   router,

src/views/preview/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import { loadScriptQueue } from '@/utils/loadScript'
+import axios from 'axios'
 import Tinymce from '@/components/tinymce/index.vue'
 
 Vue.component('tinymce', Tinymce)
+Vue.prototype.$axios = axios
 
 const $previewApp = document.getElementById('previewApp')
 const childAttrs = {

vue.config.js

@@ -43,7 +43,6 @@ module.exports = {
     externals: {
       vue: 'Vue',
       'vue-router': 'VueRouter',
-      axios: 'axios',
       'element-ui': 'ELEMENT'
     }
   },