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. 5
      src/components/render/slots/el-upload.js
  5. 12
      src/utils/convert.js
  6. 27
      src/views/form/RightPanel.vue

3
src/components/generator/config.js

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

22
src/components/parser/Parser.vue

@ -136,25 +136,24 @@ function renderChildren(h, scheme) {
}
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})
newValue.push({fileName: file.name, url: response.data})
this.$set(config, 'defaultValue', 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 = []
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(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) {
@ -177,6 +176,8 @@ function setValueLabel(event, config, scheme) {
let item = _.find(_.get(scheme, tagOptionKey), {'value': event})
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 {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
}
@ -206,7 +207,7 @@ 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)
listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList)
return listeners
}
@ -283,6 +284,13 @@ export default {
buildRules(componentList, rules) {
componentList.forEach(cur => {
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 (config.required) {
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) => {
this.$emit('deleteUpload', file, fileList)
}
dataObject.attrs['on-exceed']=(file, fileList) => {
this.$emit('deleteUpload', file, fileList)
}
} else {
dataObject.props.value = defaultValue

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

@ -7,11 +7,12 @@ export default {
} else {
list.push(<el-button size="small" type="primary" icon="el-icon-upload">{config.buttonText}</el-button>)
}
if (config.showTip) {
if (config.showTip ) {
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
}
}

12
src/utils/convert.js

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

27
src/views/form/RightPanel.vue

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

Loading…
Cancel
Save