update dialog: 多上传组件分流
This commit is contained in:
parent
535004719c
commit
23e508916e
@ -45,10 +45,16 @@
|
||||
|
||||
<!-- extra components , like Markdown or RichEdit -->
|
||||
<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
|
||||
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label" class="extra-components">
|
||||
<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
|
||||
<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
|
||||
<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
|
||||
<component v-else :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files" />
|
||||
<component
|
||||
v-else
|
||||
:is="ec.component"
|
||||
v-bind="ec.props"
|
||||
@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
|
||||
:uploader-inject-file-list="dataForm.files"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
@ -167,7 +173,8 @@ export default {
|
||||
dataForm: {},
|
||||
dataFormRules: {},
|
||||
tempForm: [], // 临时保存自动生成的code,或其他数据
|
||||
shouldWait: null
|
||||
shouldWait: null,
|
||||
fileForm: {} // 文件上传分流用、合并用的表单,根据 typeCode 进行分流,在请求时合并
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -373,6 +380,21 @@ export default {
|
||||
/** 需要验证表单的操作 */
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
/** 对于文件上传的单独处理(合并处理) */
|
||||
if (Object.keys(this.fileForm).length) {
|
||||
console.log('fileform 有值')
|
||||
// LABEL: FILE_RELATED
|
||||
let fileIds = []
|
||||
for (const [key, item] of Object.entries(this.fileForm)) {
|
||||
if (Array.isArray(item)) {
|
||||
fileIds = fileIds.concat(item)
|
||||
} else {
|
||||
console.error('handleClick(): 上传文件数组类型不正确')
|
||||
}
|
||||
}
|
||||
this.$set(this.dataForm, 'fileIds', fileIds)
|
||||
}
|
||||
|
||||
console.log('before send: ', this.dataForm)
|
||||
|
||||
this.$http({
|
||||
@ -422,14 +444,25 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
handleUploadListUpdate(filelist) {
|
||||
// 此处需要参照‘设备类型’新增的接口,灵活地设置 dataForm
|
||||
// LABEL: FILE_RELATED
|
||||
handleUploadListUpdate(filelist, typeCode = 'DefaultTypeCode') {
|
||||
// 设备类型 typeCode: EquipmentTypeFile
|
||||
// 设备信息 typeCode: EquipmentInfoFile | EquipmentInfoImage
|
||||
|
||||
// 原先写法:直接更新 dataForm 对象,不适用于有多个上传组件的需求
|
||||
// this.$set(
|
||||
// this.dataForm,
|
||||
// 'fileIds',
|
||||
// filelist.map(item => item.id)
|
||||
// )
|
||||
// console.log('handleUploadListUpdate(): ', this.dataForm)
|
||||
// 现更改为分流写法
|
||||
this.$set(
|
||||
this.dataForm,
|
||||
'fileIds',
|
||||
this.fileForm,
|
||||
typeCode,
|
||||
filelist.map(item => item.id)
|
||||
)
|
||||
console.log('handleUploadListUpdate(): ', this.dataForm)
|
||||
console.log('handleUploadListUpdate(): ', this.fileForm)
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
|
@ -100,7 +100,7 @@ const addOrUpdateConfigs = {
|
||||
props: {
|
||||
// 上传组件需要的 props
|
||||
url: '/monitoring/attachment/uploadFileFormData',
|
||||
extraParams: { typeCode: 'EquipmentTypeFile' },
|
||||
extraParams: { typeCode: 'EquipmentInfoFile' },
|
||||
buttonContent: '点击上传',
|
||||
tip: '上传文件大小不要超过 2mb (2048kb)'
|
||||
},
|
||||
@ -117,7 +117,7 @@ const addOrUpdateConfigs = {
|
||||
props: {
|
||||
// 上传组件需要的 props
|
||||
url: '/monitoring/attachment/uploadFileFormData',
|
||||
extraParams: { typeCode: 'EquipmentTypeImage' },
|
||||
extraParams: { typeCode: 'EquipmentInfoImage' },
|
||||
buttonContent: '点击上传',
|
||||
tip: '上传文件大小不要超过 2mb (2048kb)'
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user