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