表单构建器实现下拉从远程动态取数据

问题遇到的现象和发生背景

我从gitee上下载了 RuoYi-flowable 在这个项目中 我希望表单配置功能里面的在线构建表单中的下拉菜单，可以动态的从后台获取数据，同时也能支持静态的配置下拉选项

尝试过的解决方法

我尝试过修改el-select.js 文件
代码如下：

  async options(h, conf, key) {
    const options = [];
    const config = conf.__config__;
    if (config.dataType && config.dataType === 'dynamic') {
      const resp = await requestApi(config.method, config.url)
      resp.data.forEach(item => {
        options.push(h({
          tag: 'el-option',
          props: {
            label: item[config.optionsLabel],
            value: item[config.optionsKey]
          }
        }));
      });

    } else {
      const slotOptions = conf.__slot__.options; // 使用动态插槽的内容，或者使用默认的选项配置
      slotOptions.forEach(item => {
        options.push(h({
          tag: 'el-option',
          props: {
            label: item.label,
            value: item.value,
            disabled: item.disabled
          }
        }));
      });
    }
    return options;
  }

我想要达到的结果

下图是我希望达到的效果

optionsKey，optionsLabel的意识如下图

我希望下图中的下拉可以从后台获取数据，实际上我已经从后端获取了数据，但是就是无法渲染出来，可能是因为异步请求的问题。但是我尝试了很多方法，解决不了

它有一个本地的配置文件，路径：\utils\generator\config.js

全局搜索selectComponents，这个是选择型组件的配置，可以看到有两个页面引用\views\tool\build\index.vue和\views\tool\build\RightPanel.vue

可以尝试在页面获取数据后，对源配置数据进行修改

从后台拿到数据之后直接把后台的数据构造成对象数组的格式赋值给下拉框的options里面 可以参照element官方文档

这里可以这样去做 当你进入到这个页面时 你就去请求后端接口 拿到数据后绑定在这个下拉下面

代码是动态生成的：调用如下：

然后通过：render 渲染
render.js 如下：

import { deepClone } from '../../utils/index'
import {requestApi} from '../../api/flowable/api';
const componentChild = {}
/**
 * 将./slots中的文件挂载到对象componentChild上
 * 文件名为key，对应JSON配置中的__config__.tag
 * 文件内容为value，解析JSON配置中的__slot__
 */
const slotsFiles = require.context('./slots', false, /\.js$/)
const keys = slotsFiles.keys() || []
keys.forEach(key => {
  const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = slotsFiles(key).default

  componentChild[tag] = value
})

function vModel(dataObject, defaultValue, config) {
  // 获取上传表单元素组件上传的文件
  if (config.tag === "el-upload") {
    // 上传表单元素组件的成功和移除事件
    dataObject.attrs["on-success"] = (response, file, fileList) => {
      this.$emit("upload", response, file, fileList);
    };

    dataObject.attrs["on-remove"] = (file, fileList) => {
      this.$emit("deleteUpload", file, fileList);
    };

    dataObject.attrs["on-preview"] = (file, fileList) => {
      this.$emit("previewUpload", file, fileList);
    };

    // 获取上传表单元素的默认值
    try {
      dataObject.props["file-list"] = JSON.parse(defaultValue);
    } catch (err) {
      console.warn(err);
    }

    return;
  }

  // 获取普通表单元素的值
  dataObject.props.value = defaultValue;
  dataObject.on.input = (val) => {
    this.$emit("input", val);
  };
}

 function mountSlotFiles(h, confClone, children) {
  const childObjs = componentChild[confClone.__config__.tag]
  if (childObjs) {
    const promises = []; // 存储所有子组件生成函数返回的 Promise 对象
    Object.keys(childObjs).forEach(key => {
      const childFunc = childObjs[key]
      if (confClone.__slot__ && confClone.__slot__[key]) {
        const options = childFunc(h, confClone, key);
        if (options instanceof Promise) {
          promises.push(options); // 如果返回的是 Promise 对象，则添加到 promises 数组中
        } else {
          children.push(options); // 如果返回的不是 Promise 对象，则直接添加到 children 数组中
        }
      }
    })
    // 使用 Promise.all 方法等待所有异步操作完成
    Promise.all(promises).then(results => {
      results.forEach(result => {
       return children.push(result); // 将异步操作的结果添加到 children 数组中
      });
    });
  }
}

function emitEvents(confClone) {
  ['on', 'nativeOn'].forEach(attr => {
    const eventKeyList = Object.keys(confClone[attr] || {})
    eventKeyList.forEach(key => {
      const val = confClone[attr][key]
      if (typeof val === 'string') {
        confClone[attr][key] = event => this.$emit(val, event)
      }
    })
  })
}

function buildDataObject(confClone, dataObject) {
  Object.keys(confClone).forEach(key => {
    const val = confClone[key]
    if (key === '__vModel__') {
      vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone.__config__)
    } else if (dataObject[key] !== undefined) {
      if (dataObject[key] === null
        || dataObject[key] instanceof RegExp
        || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
        dataObject[key] = val
      } else if (Array.isArray(dataObject[key])) {
        dataObject[key] = [...dataObject[key], ...val]
      } else {
        dataObject[key] = { ...dataObject[key], ...val }
      }
    } else {
      dataObject.attrs[key] = val
    }
  })

  // 清理属性
  clearAttrs(dataObject)
}

function clearAttrs(dataObject) {
  delete dataObject.attrs.__config__
  delete dataObject.attrs.__slot__
  delete dataObject.attrs.__methods__
}

function makeDataObject() {
  // 深入数据对象：
  // https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
  return {
    class: {},
    attrs: {},
    props: {},
    domProps: {},
    nativeOn: {},
    on: {},
    style: {},
    directives: [],
    scopedSlots: {},
    slot: null,
    key: null,
    ref: null,
    refInFor: true
  }
}

export default {
  props: {
    conf: {
      type: Object,
      required: true
    }
  },
   render(h) {
    const dataObject = makeDataObject()
    const confClone = deepClone(this.conf)
    const children = this.$slots.default || []

    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
    mountSlotFiles.call(this, h, confClone, children)

    //

    // 将字符串类型的事件，发送为消息
    emitEvents.call(this, confClone)

    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
    buildDataObject.call(this, confClone, dataObject)

    const ce = h(this.conf.__config__.tag, dataObject, children)

    return ce;
  }
}

reder.js中通过 下面的方法调用 el-select.js 文件

那个组件好像是没有处理api数据回调，需要接口返回的数据直接能够拟合到那个组件的数据结构上