项目表

wente

2024-01-12 c21bf35f523ee1430fc5fa02ab1b4171492009b6

 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 v-if="!image">{{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 :image="image" 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" @getUploaderImg="getUploaderImg" @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,9 +69,16 @@
    name: 'ConfigUploader',
    components: {},
    props: {
      busiTypeVarName: {
        type : String,
        default:'files'
      },
      lineHeight:{
        type:Boolean,
        default:false
      },
      value: Object,
      dataForm: Object,
      image:false,
      busiType: String // 业务类型
    },
    data() {
@@ -45,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
@@ -60,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
@@ -77,33 +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,'busiField 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]')
          }
        })
      },
      getUploaderImg(list){
        // this.imageList = list
        if(list[0].url){
          this.$emit('getImageUrl',list[0].url)
        }

        console.log(this.dataForm, 'config_uploader change(busiField)')
        this.$emit('getImageUrl')
      }
    }
  }
@@ -112,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>