fix(表单设计器): 修复表单设计级联选择动态数据无法获取问题。

ruoyi-ui/public/preview.html

@@ -9,6 +9,7 @@
     <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{
@@ -34,6 +35,7 @@
     </noscript>
     <div id="previewApp"></div>
     <script type="text/javascript">
+      Vue.prototype.$axios = axios
       const childAttrs = {
         file: '',
         dialog: ' width="600px" class="dialog-width" v-if="visible" :visible.sync="visible" :modal-append-to-body="false" '

ruoyi-ui/src/utils/generator/config.js

@@ -186,7 +186,7 @@ export const selectComponents = [
       label: '级联选择',
       url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
       method: 'get',
-      dataPath: 'list',
+      dataKey: 'list',
       dataConsumer: 'options',
       showLabel: true,
       labelWidth: null,

ruoyi-ui/src/utils/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.dataPath}
+      this.${model} = data.${config.dataKey}
     })
   },`
   methodList.push(str)

ruoyi-ui/src/utils/generator/parser.js

@@ -1,6 +1,10 @@
 import { deepClone } from '@/utils/index';
 import { getToken } from '@/utils/auth';
 import render from '@/utils/generator/render';
+import axios from 'axios'
+import Vue from 'vue';
+
+Vue.prototype.$axios = axios
 
 const ruleTrigger = {
   'el-input': 'blur',
@@ -140,6 +144,7 @@ export default {
   methods: {
     initFormData(componentList, formData) {
       componentList.forEach(cur => {
+        this.buildOptionMethod(cur)
         const config = cur.__config__;
         if (cur.__vModel__) {
           formData[cur.__vModel__] = config.defaultValue;
@@ -173,6 +178,21 @@ export default {
         }
       })
     },
+    // 特殊处理的 Option
+    buildOptionMethod(scheme) {
+      const config = scheme.__config__;
+      if (config && config.tag === 'el-cascader') {
+        if (config.dataType === 'dynamic') {
+          this.$axios({
+            method: config.method,
+            url: config.url
+          }).then(resp => {
+            var { data } = resp
+            scheme[config.dataConsumer] = data[config.dataKey]
+          });
+        }
+      }
+    },
     buildRules(componentList, rules) {
       componentList.forEach(cur => {
         const config = cur.__config__

ruoyi-ui/src/views/tool/build/RightPanel.vue

@@ -339,9 +339,9 @@
             <el-divider />
           </template>
 
-          <template v-if="['el-cascader', 'el-table'].includes(activeData.__config__.tag)">
+          <template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1">
             <el-divider>选项</el-divider>
-            <el-form-item v-if="activeData.__config__.dataType" label="数据类型">
+            <el-form-item label="数据类型">
               <el-radio-group v-model="activeData.__config__.dataType" size="small">
                 <el-radio-button label="dynamic">
                   动态数据
@@ -359,13 +359,11 @@
                   :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" />
@@ -375,14 +373,8 @@
                 </el-input>
               </el-form-item>
               <el-form-item label="数据位置">
-                <el-input
+                <el-input v-model="activeData.__config__.dataKey" placeholder="请输入标签键名" />
-                  v-model="activeData.__config__.dataPath"
-                  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>
@@ -393,7 +385,6 @@
                 <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
               </el-form-item>
             </template>
-            </template>
 
             <!-- 级联选择静态树 -->
             <el-tree
@@ -650,7 +641,6 @@
 
 <script>
 import { isArray } from 'util'
-import draggable from 'vuedraggable'
 import TreeNodeDialog from './TreeNodeDialog'
 import { isNumberStr } from '@/utils/index'
 import IconsDialog from './IconsDialog'
@@ -675,7 +665,6 @@ const needRerenderList = ['tinymce']
 
 export default {
   components: {
-    draggable,
     TreeNodeDialog,
     IconsDialog
   },

ruoyi-ui/src/views/tool/build/index.vue

@@ -155,6 +155,8 @@ import DraggableItem from './DraggableItem'
 import { getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf } from '@/utils/db'
 import loadBeautifier from '@/utils/loadBeautifier'
 import { getForm, addForm, updateForm } from '@/api/workflow/form'
+import axios from 'axios'
+import Vue from 'vue';
 
 let beautifier
 const emptyActiveData = { style: {}, autosize: {} }
@@ -163,6 +165,7 @@ let tempActiveData
 const drawingListInDB = getDrawingList()
 const formConfInDB = getFormConf()
 const idGlobal = getIdGlobal()
+Vue.prototype.$axios = axios
 
 export default {
   components: {