<template>
|
<div v-if="oss">
|
<el-collapse class="config-uploader" v-model="activeNames" v-if="oss.groups.length>1">
|
<el-collapse-item name="1" v-for="group in (oss.groups || [])" :key="group.busiFieldGroup">
|
<template slot="title">
|
<el-tag>{{group.busiFieldGroup}}</el-tag>
|
</template>
|
<!-- <zt-form-item :label="field.busiFieldName" :prop="field.busiField" v-for="field in group.fields"
|
:key="field.busiField" :rules="field.isRequired ? 'required':''" style="width: 100%;">
|
<zt-uploader v-model="dataForm[field.busiField]" multiple :limit="field.fileLimit" :file-type="field.fileType"
|
:accept="field.accept" :file-size="field.fileSize" @input="change(field.busiField)"/>
|
</zt-form-item>-->
|
<el-table :data="group.fields" :show-header="false">
|
<el-table-column width="180" style="text-align: left;white-space:nowrap;">
|
<template slot-scope="scope">
|
<span v-html="(scope.row.isRequired?'<font color=red>* </font>':'')+ scope.row.busiFieldName"></span>
|
</template>
|
</el-table-column>
|
<el-table-column align="left">
|
<template slot-scope="scope">
|
<zt-uploader v-model="dataForm[scope.row.busiField]" :dataForm="dataForm" multiple
|
:limit="scope.row.fileLimit" :file-type="scope.row.fileTypeArr"
|
:showFileList2="false" :accept="scope.row.accept" :file-size="scope.row.fileSize"
|
@input="change(scope.row.busiField)"/>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-else class="config-uploader" v-model="activeNames">
|
<div v-for="group in (oss.groups || [])" :key="group.busiFieldGroup">
|
<!-- <zt-form-item :label="field.busiFieldName" :prop="field.busiField" v-for="field in group.fields"
|
:key="field.busiField" :rules="field.isRequired ? 'required':''" style="width: 100%;">
|
<zt-uploader v-model="dataForm[field.busiField]" multiple :limit="field.fileLimit" :file-type="field.fileType"
|
:accept="field.accept" :file-size="field.fileSize" @input="change(field.busiField)"/>
|
</zt-form-item>-->
|
<template slot="title">
|
<el-tag>{{group.busiFieldGroup}}</el-tag>
|
</template>
|
<!-- <zt-form-item :label="field.busiFieldName" :prop="field.busiField" v-for="field in group.fields"
|
:key="field.busiField" :rules="field.isRequired ? 'required':''" style="width: 100%;">
|
<zt-uploader v-model="dataForm[field.busiField]" multiple :limit="field.fileLimit" :file-type="field.fileType"
|
:accept="field.accept" :file-size="field.fileSize" @input="change(field.busiField)"/>
|
</zt-form-item>-->
|
<el-table :data="group.fields" :show-header="false">
|
<el-table-column width="180" style="text-align: left;white-space:nowrap;">
|
<template slot-scope="scope">
|
<span v-html="(scope.row.isRequired?'<font color=red>* </font>':'')+ scope.row.busiFieldName"></span>
|
</template>
|
</el-table-column>
|
<el-table-column align="left">
|
<template slot-scope="scope">
|
<zt-uploader v-model="dataForm[scope.row.busiField]" :dataForm="dataForm" multiple
|
:limit="scope.row.fileLimit" :file-type="scope.row.fileTypeArr"
|
:showFileList2="false" :accept="scope.row.accept" :file-size="scope.row.fileSize"
|
@input="change(scope.row.busiField)" @getUploaderImg="getUploaderImg"/>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
<script>
|
|
export default {
|
name: 'ConfigUploader',
|
components: {},
|
props: {
|
value: Object,
|
dataForm: Object,
|
busiType: String // 业务类型
|
},
|
data() {
|
return {
|
activeNames: ['1'],
|
oss: null
|
}
|
},
|
computed: {
|
fields() {
|
let arr = []
|
if (this.dataForm.files && this.dataForm.files.groups) {
|
this.dataForm.files.groups.forEach(group => {
|
group.fields.forEach(field => {
|
let arrType = []
|
if (field.fileTypes) {
|
arrType = field.fileTypes.split(',')
|
}
|
//this.$set(field, 'fileTypeArr', arrType)
|
field.fileTypeArr = arrType
|
arr.push(field)
|
})
|
})
|
}
|
return arr
|
}
|
},
|
watch: {
|
value(val, oldval) {
|
if (JSON.stringify(val) !== JSON.stringify(oldval)) {
|
this.oss = {
|
...this.getOss(),
|
...(val || {})
|
}
|
// this.dataForm.files = this.oss
|
this.$set(this.dataForm, 'files', this.oss)
|
|
// 分解到每个字段给dataForm赋值
|
this.fields.forEach(field => {
|
// this.dataForm[field.busiField] = field.files
|
this.$set(this.dataForm, field.busiField, field.files)
|
})
|
}
|
}
|
},
|
mounted() {
|
this.oss = this.getOss()
|
if (this.oss) {
|
this.oss.groups.forEach(group => {
|
this.activeNames.push(group.busiFieldGroup)
|
})
|
// this.dataForm.files = this.oss
|
this.$set(this.dataForm, 'files', this.oss)
|
}
|
},
|
methods: {
|
getOss() {
|
let arr = (this.$store.state.oss.configs || []).filter(config => config.busiType === this.busiType)
|
if (arr.length > 0) {
|
arr[0].groups.forEach(group => {
|
group.fields.forEach(field => {
|
let arrType = []
|
if (field.fileTypes) {
|
arrType = field.fileTypes.split(',')
|
}
|
//this.$set(field, 'fileTypeArr', arrType)
|
field.fileTypeArr = arrType
|
})
|
})
|
console.log(JSON.parse(JSON.stringify(arr[0])), 'JSON.parse(JSON.stringify(arr[0]))')
|
return JSON.parse(JSON.stringify(arr[0]))
|
}
|
return null
|
},
|
getUploaderImg(list) {
|
// this.imageList = list
|
if (list[0].url) {
|
this.$emit('getImageUrl', list[0].url)
|
}
|
},
|
change(busiField) {
|
console.log(busiField, 'config_uploader change(busiField) busiField')
|
this.fields.forEach(field => {
|
if (field.busiField === busiField) {
|
field.files.length = 0
|
this.dataForm[busiField].forEach(file => {
|
field.files.push(file)
|
}
|
)
|
if (this.dataForm) {
|
this.dataForm.hasUploadFinsh = 100
|
}
|
}
|
})
|
console.log(this.dataForm, 'config_uploader change(busiField)')
|
this.$emit('getImageUrl')
|
}
|
}
|
}
|
</script>
|
<style>
|
.config-uploader label {
|
width: 260px !important;
|
}
|
|
.zt .el-upload-list__item .el-progress {
|
top: 15px !important;
|
}
|
</style>
|
