表单设计器附件的上传、显示和下载

本文采用开源的form-generator和element-ui，相关技术可以参考下面的链接

form-generator: https://github.com/JakHuang/form-generator

element-ui: https://element.eleme.cn//#/zh-CN/component/installation

修改组件render.js

function vModel(dataObject, defaultValue)增加下面文件

//获取上传表单元素组件 上传// add by nbacheng 2022-07-19的文件
  if (this.conf.__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) => {
      this.$emit('download', file)
    }
    return
  }
  // add by nbacheng 2022-07-19

同时在组件Parser增加下面内容

function buildListeners(scheme) {
  const config = scheme.__config__
  const methods = this.formConf.__methods__ || {}
  const listeners = {}

  // 给__methods__中的方法绑定this和event
  Object.keys(methods).forEach(key => {
    listeners[key] = event => methods[key].call(this, event)
  })
  // 响应 render.js 中的 vModel $emit('input', val)
  listeners.input = event => setValue.call(this, event, config, scheme)
  //上传表单元素组件的成功和移除事件; // add by nbacheng 2022-07-19
  listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme,response, file, fileList)
  listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme,file, fileList)
  //listeners.download = (file) => download.call(this, file)
  // add by nbacheng 2022-07-19
  return listeners
}

//获取上传表单元素组件 上传的文件 // add by nbacheng 2022-07-19
function setUpload(config, scheme, response, file, fileList) {
  //response: 上传接口返回的数据sponse}
  var filename=response.message.substring(response.message.lastIndexOf('/')+1)  //获取文件名称
  let fileObj = {name: filename, url: response.message}
  let oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
  console.log("setUpload response=",response)
  if (oldValue) {
    oldValue.push(fileObj)
  } else {
    oldValue = [fileObj]
  }
  console.log("setUpload oldValue=",oldValue)
  this.$set(config, 'defaultValue', JSON.stringify(oldValue))
  this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(oldValue))
}
//获取上传表单元素组件 删除文件后的文件列表
function deleteUpload(config, scheme, file, fileList) {
  let oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])

  //file 删除的文件
  //过滤掉删除的文件
  let newValue = oldValue.filter(item => item.name !== file.name)
  this.$set(config, 'defaultValue', JSON.stringify(newValue))
  this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue))
}

//点击进行下载文件
function download(file) {
  var a = document.createElement('a');
  var event = new MouseEvent('click');
  a.download = file.name;
  a.href = file.url;
  a.dispatchEvent(event);
}
// add by nbacheng 2022-07-19

同时在下面的初始化Form数据里增加token

initFormData(componentList, formData) {
      componentList.forEach(cur => {
        const vModel = cur.__vModel__
        const val = formData[vModel]
        const config = cur.__config__
        if (config.tag === 'el-upload') {
          // 如果需要token，可以设置 
          const token = Vue.ls.get(ACCESS_TOKEN);
          cur['headers'] = {"X-Access-Token":token};
        }  
        if (cur.__vModel__) {
            formData[cur.__vModel__] = config.defaultValue
        }
        if (config.children) this.initFormData(config.children, formData)
      })
    },

同时在自己需要显示的页面上增加

           
           
 

mounted() {
      //表单数据回填，模拟异步请求场景
      setTimeout(() => {
        // 回填数据,这里主要是处理文件显示
        this.fillFormData(this.variablesData.fields, this.variablesData)
        // 更新表单
        this.key = +new Date().getTime()
      }, 1000)
    },

fillFormData(fields, formConf) {
        const { formModel, formRef } = formConf
        fields.forEach((item, i) => {
          const vModel = item.__vModel__
          const val = item.__config__.defaultValue 
          // 特殊处理el-upload，包括 回显图片
          if (item.__config__.tag === 'el-upload') {
            
            // 回显图片
            console.log("fillFormData val=",JSON.parse(val))
            this.fileDisplay = true
            console.log('item=',item['list-type'])
            if(item['list-type'] != 'text') {
              this.fileList = ''    //隐藏加的el-upload文件列表
              item['file-list'] = JSON.parse(val)
            }
            else {  //图片
              this.fileList = JSON.parse(val)
              item['file-list'] = '' //隐藏加的表单设计器的文件列表
            }
            
          }
          // 设置各表单项的默认值（回填表单），包括el-upload的默认值
          if (val) {
            item.__config__.defaultValue = val
          }
          if (Array.isArray(item.__config__.children)) {
            this.fillFormData(item.__config__.children, formConf)
          }
        })
      },

//点击文件列表中已上传文件进行下载
      handleFilePreview(file) {
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.download = file.name;
        a.href = file.url;
        a.dispatchEvent(event);
        console.log(file)
      },

效果图如下：

具体实现可以见我的开源项目

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git