From d9447fa02053698e1014f717e11fcb1d2dead5e4 Mon Sep 17 00:00:00 2001 From: wangqing Date: Wed, 16 Dec 2020 18:50:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95upload=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/generator/config.js | 2 +- src/components/parser/Parser.vue | 26 +++++- src/components/render/render.js | 143 ++++++++++++++++------------- src/views/form/statistics.vue | 4 +- 4 files changed, 106 insertions(+), 69 deletions(-) diff --git a/src/components/generator/config.js b/src/components/generator/config.js index 33d4900..7c7430a 100644 --- a/src/components/generator/config.js +++ b/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', diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue index 1a1012e..c659aa6 100644 --- a/src/components/parser/Parser.vue +++ b/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) diff --git a/src/components/render/render.js b/src/components/render/render.js index a4f21e0..949a817 100644 --- a/src/components/render/render.js +++ b/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) + } } diff --git a/src/views/form/statistics.vue b/src/views/form/statistics.vue index 85736de..45a7456 100644 --- a/src/views/form/statistics.vue +++ b/src/views/form/statistics.vue @@ -25,7 +25,7 @@