update 基本完成上传
This commit is contained in:
rodzic
a9265d6708
commit
b4e00bbca0
@ -46,7 +46,7 @@
|
||||
<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
|
||||
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
|
||||
<!-- <component :is="ec.component" v-model="dataForm[ec.name]"></component> -->
|
||||
<component :is="ec.component" v-bind="ec.props" />
|
||||
<component :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
@ -137,6 +137,11 @@ export default {
|
||||
return defaultNames[name]
|
||||
}
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// _df: this.dataForm
|
||||
// }
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
COLUMN_PER_ROW,
|
||||
@ -236,15 +241,26 @@ export default {
|
||||
} // end if (item.rules)
|
||||
})
|
||||
|
||||
/** 计算默认值 */
|
||||
function calDefault(type) {
|
||||
switch (type) {
|
||||
case 'array':
|
||||
return []
|
||||
// more case...
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
/** 检查是否需要额外的组件 */
|
||||
this.configs.extraComponents &&
|
||||
this.configs.extraComponents.forEach(item => {
|
||||
this.$set(this.dataForm, [item.name], '')
|
||||
this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
|
||||
})
|
||||
|
||||
/** 单独设置 id */
|
||||
this.$set(this.dataForm, 'id', null)
|
||||
})
|
||||
console.log("mounted: this.dataForm", JSON.stringify(this.dataForm))
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -302,6 +318,7 @@ export default {
|
||||
}).then(({ data: res }) => {
|
||||
if (res && res.code === 0) {
|
||||
const dataFormKeys = Object.keys(this.dataForm)
|
||||
console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
|
||||
this.dataForm = pick(res.data, dataFormKeys)
|
||||
}
|
||||
})
|
||||
@ -310,9 +327,12 @@ export default {
|
||||
if (this.shouldWait)
|
||||
this.shouldWait.then(() => {
|
||||
if (this.tempForm.length) {
|
||||
console.log("create new, tempform", JSON.stringify(this.tempForm.length))
|
||||
this.tempForm.forEach(item => {
|
||||
console.log('item data', item.data)
|
||||
this.dataForm[item.name] = item.data
|
||||
})
|
||||
console.log("create new, dataform", JSON.stringify(this.dataForm))
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -381,6 +401,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
handleUploadListUpdate(filelist) {
|
||||
// 此处需要参照‘设备类型’新增的接口,灵活地设置 dataForm
|
||||
this.$set(this.dataForm, 'fileIds', filelist.map(item => item.id))
|
||||
console.log('handleUploadListUpdate(): ', this.dataForm)
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.$emit('destory-dialog')
|
||||
this.visible = false
|
||||
|
@ -9,6 +9,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pick } from 'lodash/object'
|
||||
|
||||
export default {
|
||||
name: 'BaseUpload',
|
||||
props: {
|
||||
@ -21,13 +23,40 @@ export default {
|
||||
extraParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
uploaderInjectFileList: {
|
||||
// 从外部传进来 fileList,用于展示文件列表用
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
// inject: {
|
||||
// parentDataForm: "_df"
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fileList.splice(0)
|
||||
|
||||
this.$watch('uploaderInjectFileList', function(val) {
|
||||
if (val && val.length) {
|
||||
console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
|
||||
/** uploaderInjectFileList 里关于文件的信息比较全,需要手动过滤一下 */
|
||||
this.fileList = val.map(item => {
|
||||
const name = item.fileUrl.split('/').pop()
|
||||
return { ...pick(item, ['id', 'fileName', 'typeCode']), name }
|
||||
})
|
||||
}
|
||||
console.log('fillist: ', this.fileList)
|
||||
})
|
||||
|
||||
// if (this.parentDataForm) {
|
||||
// console.log('parent dataform: ', this.parentDataForm)
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
/** 自定义上传行为 */
|
||||
handleUpload(file) {
|
||||
@ -44,19 +73,34 @@ export default {
|
||||
}
|
||||
}).then(({ data: res }) => {
|
||||
if (res && res.code === 0) {
|
||||
console.log(this.fileList)
|
||||
this.fileList.splice(0)
|
||||
res.data.forEach(item => {
|
||||
this.fileList.push(item) // <== 此处的数据结构可能要调整
|
||||
})
|
||||
// TODO: 在新增和更新阶段,带入 files[] 数组给后端,就可完成文件和设备类型的绑定、删除操作
|
||||
}
|
||||
res.data.forEach(item => {
|
||||
const ext = item.fileUrl.split('.').reverse()[0]
|
||||
const name = `${item.fileName}.${ext}`
|
||||
this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
|
||||
})
|
||||
// TODO: 在新增和更新阶段,带入 fileIds[] 数组给后端,就可完成文件和设备类型的绑定、删除操作
|
||||
this.$emit('uploader-update-filelist', this.fileList)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 大小验证 */
|
||||
validateFile(file) {
|
||||
this.extraUploadParams.typeCode = 'equipmentInfoFile'
|
||||
|
||||
const isRightSize = file.size / 1024 / 1024 < 10
|
||||
if (!isRightSize) {
|
||||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||||
}
|
||||
return isRightSize
|
||||
},
|
||||
|
||||
beforeRemove(file, filelist) {
|
||||
return this.$confirm(`确定移除 ${file.name}?`)
|
||||
},
|
||||
handleRemove(file, filelist) {}
|
||||
handleRemove(file, filelist) {
|
||||
// 把更新后的 fileList 传递出去
|
||||
this.$emit('uploader-update-filelist', filelist)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -81,12 +81,13 @@ const addOrUpdateConfigs = {
|
||||
],
|
||||
extraComponents: [
|
||||
{
|
||||
name: 'file-upload-key',
|
||||
name: 'files',
|
||||
fieldType: 'array',
|
||||
label: '上传资料',
|
||||
component: () => import('@/components/base-upload'),
|
||||
props: { // 上传组件需要的 props
|
||||
url: "/monitoring/attachment/uploadFileFormData",
|
||||
extraParams: { typeCode: 123 },
|
||||
extraParams: { typeCode: "EquipmentTypeFile" },
|
||||
buttonContent: '点击上传',
|
||||
tip: '上传文件大小不要超过 2mb (2048kb)'
|
||||
}
|
||||
|
Ładowanie…
Reference in New Issue
Block a user