表单upload 组件

src/components/generator/config.js

@@ -501,7 +501,7 @@ export const selectComponents = [
         __slot__: {
             'list-type': true
         },
-        action: 'https://jsonplaceholder.typicode.com/posts/',
+        action: 'https://api.freebrio.com/api/v1/file/upload',
         disabled: false,
         accept: '',
         name: 'file',

src/components/parser/Parser.vue

@@ -135,6 +135,28 @@ function renderChildren(h, scheme) {
     return renderFormItem.call(this, h, config.children)
 }
 
+function setUpload(config, scheme, response, file, fileList) {
+    debugger
+    console.log(this[this.formConf.formModel][scheme.__vModel__])
+    let newValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
+    if (!newValue) {
+        newValue = []
+    }
+    newValue.push({name: file.name, url: response.data})
+    this.$set(config, 'defaultValue', JSON.stringify(newValue))
+    this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue))
+
+}
+
+function deleteUpload(event, config, scheme, file, fileList) {
+    let newValue = []
+    fileList.forEach(element => {
+        newValue.push({name: element.name, url: element.url})
+    })
+    this.$set(config, 'defaultValue', JSON.stringify(newValue))
+    this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue))
+}
+
 function setValue(event, config, scheme) {
     this.$set(config, 'defaultValue', event)
     this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
@@ -183,6 +205,8 @@ function buildListeners(scheme) {
     })
     // 响应 render.js 中的 vModel $emit('input', val)
     listeners.input = event => setValue.call(this, event, config, scheme)
+    listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList)
+    listeners.deleteUpload = event => setValue.call(this, event, config, scheme)
 
     return listeners
 }
@@ -230,7 +254,7 @@ export default {
                     let tagOptionKey = processType[temConfig.tag]
                     let defaultValue = temConfig.defaultValue
                     let labelStr = ''
-                    if (tagOptionKey&&defaultValue) {
+                    if (tagOptionKey && defaultValue) {
                         if (defaultValue instanceof Array) {
                             defaultValue.forEach(item => {
                                 let {label} = getObject(_.get(cur, tagOptionKey), 'value', item)

src/components/render/render.js

@@ -1,4 +1,4 @@
-import { deepClone } from '@/utils/index'
+import {deepClone} from '@/utils/index'
 
 const componentChild = {}
 /**
@@ -9,96 +9,109 @@ const componentChild = {}
 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
+    const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
+    const value = slotsFiles(key).default
+    componentChild[tag] = value
 })
 
 function vModel(dataObject, defaultValue) {
-  dataObject.props.value = defaultValue
+    let config = dataObject.attrs.__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)
+        }
+    } else {
+        dataObject.props.value = defaultValue
+
+        dataObject.on.input = val => {
+            this.$emit('input', val)
+        }
+    }
 
-  dataObject.on.input = val => {
-    this.$emit('input', val)
-  }
 }
 
 function mountSlotFlies(h, confClone, children) {
-  const childObjs = componentChild[confClone.__config__.tag]
-  if (childObjs) {
-    Object.keys(childObjs).forEach(key => {
-      const childFunc = childObjs[key]
-      if (confClone.__slot__ && confClone.__slot__[key]) {
-        children.push(childFunc(h, confClone, key))
-      }
-    })
-  }
+    const childObjs = componentChild[confClone.__config__.tag]
+    if (childObjs) {
+        Object.keys(childObjs).forEach(key => {
+            const childFunc = childObjs[key]
+            if (confClone.__slot__ && confClone.__slot__[key]) {
+                children.push(childFunc(h, confClone, key))
+            }
+        })
+    }
 }
 
 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)
-      }
+    ['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)
-    } else if (dataObject[key]) {
-      dataObject[key] = { ...dataObject[key], ...val }
-    } else {
-      dataObject.attrs[key] = val
-    }
-  })
+    Object.keys(confClone).forEach(key => {
+        const val = confClone[key]
+        if (key === '__vModel__') {
+            vModel.call(this, dataObject, confClone.__config__.defaultValue)
+        } else if (dataObject[key]) {
+            dataObject[key] = {...dataObject[key], ...val}
+        } else {
+            dataObject.attrs[key] = val
+        }
+    })
 
-  // 清理属性
-  clearAttrs(dataObject)
+    // 清理属性
+    clearAttrs(dataObject)
 }
 
 function clearAttrs(dataObject) {
-  delete dataObject.attrs.__config__
-  delete dataObject.attrs.__slot__
-  delete dataObject.attrs.__methods__
+    delete dataObject.attrs.__config__
+    delete dataObject.attrs.__slot__
+    delete dataObject.attrs.__methods__
 }
 
 function makeDataObject() {
-  return {
-    attrs: {},
-    props: {},
-    nativeOn: {},
-    on: {},
-    style: {}
-  }
+    return {
+        attrs: {},
+        props: {},
+        nativeOn: {},
+        on: {},
+        style: {}
+    }
 }
 
 export default {
-  props: {
-    conf: {
-      type: Object,
-      required: true
-    }
-  },
-  render(h) {
-    const dataObject = makeDataObject()
-    const confClone = deepClone(this.conf)
-    const children = this.$slots.default || []
+    props: {
+        conf: {
+            type: Object,
+            required: true
+        }
+    },
+    render(h) {
+        const dataObject = makeDataObject()
+        const confClone = deepClone(this.conf)
+        const children = this.$slots.default || []
 
-    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
-    mountSlotFlies.call(this, h, confClone, children)
+        // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
+        mountSlotFlies.call(this, h, confClone, children)
 
-    // 将字符串类型的事件，发送为消息
-    emitEvents.call(this, confClone)
+        // 将字符串类型的事件，发送为消息
+        emitEvents.call(this, confClone)
 
-    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
-    buildDataObject.call(this, confClone, dataObject)
+        // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
+        buildDataObject.call(this, confClone, dataObject)
 
-    return h(this.conf.__config__.tag, dataObject, children)
-  }
+        return h(this.conf.__config__.tag, dataObject, children)
+    }
 }

src/views/form/statistics.vue

@@ -25,7 +25,7 @@
         </div>
         <div class="result-table-view">
             <el-table
-                stripe :header-cell-style="{background:'#2466a0'}"
+                stripe
                 :data="projectResultList">
                 <el-table-column
                     type="selection"
@@ -198,7 +198,7 @@ export default {
 
 .result-table-view {
     width: 80%;
-    margin: 0px auto;
+    margin: 6px auto;
 }
 
 .filter-table-view {