update dialog: 多上传组件分流
This commit is contained in:
parent
535004719c
commit
23e508916e
@ -45,10 +45,16 @@
|
|||||||
|
|
||||||
<!-- extra components , like Markdown or RichEdit -->
|
<!-- extra components , like Markdown or RichEdit -->
|
||||||
<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
|
<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 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-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>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -167,7 +173,8 @@ export default {
|
|||||||
dataForm: {},
|
dataForm: {},
|
||||||
dataFormRules: {},
|
dataFormRules: {},
|
||||||
tempForm: [], // 临时保存自动生成的code,或其他数据
|
tempForm: [], // 临时保存自动生成的code,或其他数据
|
||||||
shouldWait: null
|
shouldWait: null,
|
||||||
|
fileForm: {} // 文件上传分流用、合并用的表单,根据 typeCode 进行分流,在请求时合并
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -373,6 +380,21 @@ export default {
|
|||||||
/** 需要验证表单的操作 */
|
/** 需要验证表单的操作 */
|
||||||
this.$refs['dataForm'].validate(valid => {
|
this.$refs['dataForm'].validate(valid => {
|
||||||
if (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)
|
console.log('before send: ', this.dataForm)
|
||||||
|
|
||||||
this.$http({
|
this.$http({
|
||||||
@ -422,14 +444,25 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
handleUploadListUpdate(filelist) {
|
// LABEL: FILE_RELATED
|
||||||
// 此处需要参照‘设备类型’新增的接口,灵活地设置 dataForm
|
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.$set(
|
||||||
this.dataForm,
|
this.fileForm,
|
||||||
'fileIds',
|
typeCode,
|
||||||
filelist.map(item => item.id)
|
filelist.map(item => item.id)
|
||||||
)
|
)
|
||||||
console.log('handleUploadListUpdate(): ', this.dataForm)
|
console.log('handleUploadListUpdate(): ', this.fileForm)
|
||||||
},
|
},
|
||||||
|
|
||||||
handleClose() {
|
handleClose() {
|
||||||
|
@ -100,7 +100,7 @@ const addOrUpdateConfigs = {
|
|||||||
props: {
|
props: {
|
||||||
// 上传组件需要的 props
|
// 上传组件需要的 props
|
||||||
url: '/monitoring/attachment/uploadFileFormData',
|
url: '/monitoring/attachment/uploadFileFormData',
|
||||||
extraParams: { typeCode: 'EquipmentTypeFile' },
|
extraParams: { typeCode: 'EquipmentInfoFile' },
|
||||||
buttonContent: '点击上传',
|
buttonContent: '点击上传',
|
||||||
tip: '上传文件大小不要超过 2mb (2048kb)'
|
tip: '上传文件大小不要超过 2mb (2048kb)'
|
||||||
},
|
},
|
||||||
@ -117,7 +117,7 @@ const addOrUpdateConfigs = {
|
|||||||
props: {
|
props: {
|
||||||
// 上传组件需要的 props
|
// 上传组件需要的 props
|
||||||
url: '/monitoring/attachment/uploadFileFormData',
|
url: '/monitoring/attachment/uploadFileFormData',
|
||||||
extraParams: { typeCode: 'EquipmentTypeImage' },
|
extraParams: { typeCode: 'EquipmentInfoImage' },
|
||||||
buttonContent: '点击上传',
|
buttonContent: '点击上传',
|
||||||
tip: '上传文件大小不要超过 2mb (2048kb)'
|
tip: '上传文件大小不要超过 2mb (2048kb)'
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user