From bb9bf60cbd34d0638f1df89c69358533b2cc220c Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期二, 05 十二月 2023 15:48:40 +0800
Subject: [PATCH] 项目表
---
web/src/components/config-uploader/src/config-uploader.vue | 156 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 120 insertions(+), 36 deletions(-)
diff --git a/web/src/components/config-uploader/src/config-uploader.vue b/web/src/components/config-uploader/src/config-uploader.vue
index c4a3343..956ed4e 100644
--- a/web/src/components/config-uploader/src/config-uploader.vue
+++ b/web/src/components/config-uploader/src/config-uploader.vue
@@ -1,29 +1,67 @@
<template>
- <el-collapse class="config-uploader" v-model="activeNames" v-if="oss">
- <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="250" style="text-align: left;white-space:nowrap;">
- <template slot-scope="scope">
- <span v-html="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]" multiple :limit="scope.row.fileLimit" :file-type="scope.row.fileType"
- :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-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
+ :lineHeight="lineHeight"
+ :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>
@@ -31,6 +69,14 @@
name: 'ConfigUploader',
components: {},
props: {
+ busiTypeVarName: {
+ type : String,
+ default:'files'
+ },
+ lineHeight:{
+ type:Boolean,
+ default:false
+ },
value: Object,
dataForm: Object,
busiType: String // 涓氬姟绫诲瀷
@@ -44,9 +90,17 @@
computed: {
fields() {
let arr = []
- if (this.dataForm.files && this.dataForm.files.groups) {
- this.dataForm.files.groups.forEach(group => {
- group.fields.forEach(field => arr.push(field))
+ if (this.value && this.value.groups) {
+ console.log(this.dataForm,"fields this.dataForm")
+ this.value.groups.forEach(group => {
+ group.fields.forEach(field => {
+ let arrType = []
+ if (field.fileTypes) {
+ arrType = field.fileTypes.split(',')
+ }
+ field.fileTypeArr = arrType
+ arr.push(field)
+ })
})
}
return arr
@@ -59,9 +113,8 @@
...this.getOss(),
...(val || {})
}
- // this.dataForm.files = this.oss
- this.$set(this.dataForm, 'files', this.oss)
-
+ this.$set(this.dataForm, this.busiTypeVarName, this.oss)
+ console.log(this.fields, 'watch this.fields')
// 鍒嗚В鍒版瘡涓瓧娈电粰dataForm璧嬪��
this.fields.forEach(field => {
// this.dataForm[field.busiField] = field.files
@@ -76,25 +129,55 @@
this.oss.groups.forEach(group => {
this.activeNames.push(group.busiFieldGroup)
})
- // this.dataForm.files = this.oss
- this.$set(this.dataForm, 'files', this.oss)
+ this.$set(this.dataForm, this.busiTypeVarName, 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,this.uploadList, 'config_uploader change(busiField) busiField')
+ console.log(this.fields, 'change this.fields')
+ if (!Array.isArray(this.dataForm[busiField])) {
+ this.$set(this.dataForm, busiField, [])
+ }
this.fields.forEach(field => {
if (field.busiField === busiField) {
field.files.length = 0
- this.dataForm[busiField].forEach(file => field.files.push(file))
+ this.dataForm[busiField].forEach(file => {
+ field.files.push(file)
+ }
+ )
+ if (this.dataForm) {
+ this.dataForm.hasUploadFinsh = 100
+ }
+ console.log(this.dataForm[busiField], 'config_uploader change(busiField) this.dataForm[busiField]')
}
})
+ console.log(this.dataForm, 'config_uploader change(busiField)')
+ this.$emit('getImageUrl')
}
}
}
@@ -103,7 +186,8 @@
.config-uploader label {
width: 260px !important;
}
- .zt .el-upload-list__item .el-progress{
- top:15px !important;
+
+ .zt .el-upload-list__item .el-progress {
+ top: 15px !important;
}
</style>
--
Gitblit v1.9.1