Changes

jinlin

2023-11-23 a83a278de80c8f5e5bb2b34e1525763bca3d10ab

 web/src/components/config-uploader/src/config-uploader.vue

@@ -1,29 +1,54 @@
<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" @input="change(scope.row.busiField)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
  </el-collapse>
  <div>
    <el-collapse class="config-uploader" v-model="activeNames" v-if="oss && oss.groups.length>1">
      <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-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>-->
        <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>
      </div>
    </div>
  </div>

</template>
<script>

@@ -90,12 +115,20 @@
        return null
      },
      change(busiField) {
        console.log(busiField,'busiField busiField')
        this.fields.forEach(field => {
          if (field.busiField === busiField) {
            field.files.length = 0
            this.dataForm[busiField].forEach(file => field.files.push(file))
          }
        })
      },
      getUploaderImg(list){
        // this.imageList = list
        if(list[0].url){
          this.$emit('getImageUrl',list[0].url)
        }

      }
    }
  }