update 基本完成上传

This commit is contained in:
g7hoo 2022-08-15 10:23:39 +08:00
rodzic a9265d6708
commit b4e00bbca0
3 zmienionych plików z 83 dodań i 12 usunięć

Wyświetl plik

@ -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

Wyświetl plik

@ -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>

Wyświetl plik

@ -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)'
}