Browse Source

el-upload

old
wangqing 5 years ago
parent
commit
21ca867c28
  1. 3
      src/components/generator/config.js
  2. 22
      src/components/parser/Parser.vue
  3. 3
      src/components/render/render.js
  4. 3
      src/components/render/slots/el-upload.js
  5. 12
      src/utils/convert.js
  6. 25
      src/views/form/RightPanel.vue

3
src/components/generator/config.js

@ -494,7 +494,7 @@ export const selectComponents = [
buttonText: '点击上传', buttonText: '点击上传',
regList: [], regList: [],
changeTag: true, changeTag: true,
fileSize: 2, fileSize: 1,
sizeUnit: 'MB', sizeUnit: 'MB',
document: 'https://element.eleme.cn/#/zh-CN/component/upload' document: 'https://element.eleme.cn/#/zh-CN/component/upload'
}, },
@ -507,6 +507,7 @@ export const selectComponents = [
name: 'file', name: 'file',
'auto-upload': true, 'auto-upload': true,
'list-type': 'text', 'list-type': 'text',
limit: 2,
multiple: false multiple: false
} }
] ]

22
src/components/parser/Parser.vue

@ -136,25 +136,24 @@ function renderChildren(h, scheme) {
} }
function setUpload(config, scheme, response, file, fileList) { 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__]) let newValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
if (!newValue) { if (!newValue) {
newValue = [] newValue = []
} }
newValue.push({name: file.name, url: response.data}) newValue.push({fileName: file.name, url: response.data})
this.$set(config, 'defaultValue', JSON.stringify(newValue)) this.$set(config, 'defaultValue', JSON.stringify(newValue))
this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue)) this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue))
setValueLabel.call(this, {type: 'file', files: JSON.stringify(newValue)}, config, scheme)
} }
function deleteUpload(event, config, scheme, file, fileList) { function deleteUpload(config, scheme, file, fileList) {
let newValue = [] let newValue = []
fileList.forEach(element => { fileList.forEach(element => {
newValue.push({name: element.name, url: element.url}) newValue.push({fileName: element.name, url: element.url})
}) })
this.$set(config, 'defaultValue', JSON.stringify(newValue)) this.$set(config, 'defaultValue', JSON.stringify(newValue))
this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue)) this.$set(this[this.formConf.formModel], scheme.__vModel__, JSON.stringify(newValue))
setValueLabel.call(this, {type: 'file', files: JSON.stringify(newValue)}, config, scheme)
} }
function setValue(event, config, scheme) { function setValue(event, config, scheme) {
@ -177,6 +176,8 @@ function setValueLabel(event, config, scheme) {
let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) let item = _.find(_.get(scheme, tagOptionKey), {'value': event})
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
} }
} else if (config.tag === 'el-upload') {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
} else { } else {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
} }
@ -206,7 +207,7 @@ function buildListeners(scheme) {
// render.js vModel $emit('input', val) // render.js vModel $emit('input', val)
listeners.input = event => setValue.call(this, event, config, scheme) listeners.input = event => setValue.call(this, event, config, scheme)
listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList) listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList)
listeners.deleteUpload = event => setValue.call(this, event, config, scheme) listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList)
return listeners return listeners
} }
@ -283,6 +284,13 @@ export default {
buildRules(componentList, rules) { buildRules(componentList, rules) {
componentList.forEach(cur => { componentList.forEach(cur => {
const config = cur.__config__ const config = cur.__config__
if (cur.tag === 'el-upload') {
config.regList.push({
validator: () => {
console.log(cur.limit)
}, trigger: 'change'
})
}
if (Array.isArray(config.regList)) { if (Array.isArray(config.regList)) {
if (config.required) { if (config.required) {
const required = {required: config.required, message: cur.placeholder} const required = {required: config.required, message: cur.placeholder}

3
src/components/render/render.js

@ -25,6 +25,9 @@ function vModel(dataObject, defaultValue) {
dataObject.attrs['on-remove'] = (file, fileList) => { dataObject.attrs['on-remove'] = (file, fileList) => {
this.$emit('deleteUpload', file, fileList) this.$emit('deleteUpload', file, fileList)
} }
dataObject.attrs['on-exceed']=(file, fileList) => {
this.$emit('deleteUpload', file, fileList)
}
} else { } else {
dataObject.props.value = defaultValue dataObject.props.value = defaultValue

3
src/components/render/slots/el-upload.js

@ -9,9 +9,10 @@ export default {
} }
if (config.showTip ) { if (config.showTip ) {
list.push( list.push(
<div slot="tip" class="el-upload__tip">只能上传不超过 {config.fileSize}{config.sizeUnit} {conf.accept}文件</div> <div slot="tip" class="el-upload__tip">只能上传不超过 {config.fileSize}{config.sizeUnit} {conf.accept}文件,最多不超过{conf.limit}个文件</div>
) )
} }
return list return list
} }
} }

12
src/utils/convert.js

@ -130,9 +130,19 @@ let dataParams = {
'max': 'max', 'max': 'max',
'step': 'step' 'step': 'step'
},//时间选择 },//时间选择
11: {} 11: {},
//文件上传
17: {
'buttonText': '__config__.buttonText',
'showTip': '__config__.showTip',
'fileSize': '__config__.fileSize',
'sizeUnit': '__config__.sizeUnit',
'listType': 'list-type',
'limit': 'limit',
'multiple': 'multiple'
} }
}

25
src/views/form/RightPanel.vue

@ -29,9 +29,9 @@
</el-option-group> </el-option-group>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__vModel__!==undefined" label="字段名"> <!-- <el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">-->
<el-input v-model="activeData.__vModel__" placeholder="请输入字段名(v-model)" /> <!-- <el-input v-model="activeData.__vModel__" placeholder="请输入字段名(v-model)" />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名"> <el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名">
{{ activeData.__config__.componentName }} {{ activeData.__config__.componentName }}
</el-form-item> </el-form-item>
@ -214,9 +214,9 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.name !== undefined" label="文件字段名"> <!-- <el-form-item v-if="activeData.name !== undefined" label="文件字段名">-->
<el-input v-model="activeData.name" placeholder="请输入上传文件字段名" /> <!-- <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item v-if="activeData.accept !== undefined" label="文件类型"> <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
<el-select <el-select
v-model="activeData.accept" v-model="activeData.accept"
@ -242,9 +242,9 @@
</el-select> </el-select>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.action !== undefined" label="上传地址"> <!-- <el-form-item v-if="activeData.action !== undefined" label="上传地址">-->
<el-input v-model="activeData.action" placeholder="请输入上传地址" clearable /> <!-- <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型"> <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
<el-radio-group v-model="activeData['list-type']" size="small"> <el-radio-group v-model="activeData['list-type']" size="small">
<el-radio-button label="text"> <el-radio-button label="text">
@ -515,9 +515,12 @@
<el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件"> <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
<el-switch v-model="activeData.multiple" /> <el-switch v-model="activeData.multiple" />
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传"> <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="文件个数">
<el-switch v-model="activeData['auto-upload']" /> <el-input-number v-model="activeData.limit" />
</el-form-item> </el-form-item>
<!-- <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">-->
<!-- <el-switch v-model="activeData['auto-upload']" />-->
<!-- </el-form-item>-->
<el-form-item v-if="activeData.readonly !== undefined" label="是否只读"> <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
<el-switch v-model="activeData.readonly" /> <el-switch v-model="activeData.readonly" />
</el-form-item> </el-form-item>

Loading…
Cancel
Save