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