修改

jinlin

2024-01-29 7a0c5479c363a10f573aa15a54dc8130eabd47ff

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

@@ -1,25 +1,13 @@
<template>
  <div>
    <div class="config-uploader" >
    <div class="config-uploader1" v-if="oss">
      <div v-for="group in (oss.groups || [])" :key="group.busiFieldGroup">
         <zt-form-item v-for="field in group.fields" :prop="field.busiField"
                       :key="field.busiField" :rules="field.isRequired ? 'required':''" style="width: 100%;margin-bottom: 0">
           <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" @getUploaderImg="getUploaderImg" @input="change(scope.row.busiField)"/>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <zt-form-item v-for="field in group.fields" :prop="field.busiField"
                      :key="field.busiField" :rules="field.isRequired ? 'required':''"
                      style="width: 100%;margin-bottom: 0">
          <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>
      </div>
    </div>
  </div>
@@ -27,92 +15,96 @@
</template>
<script>

export default {
  name: 'TableUploader',
  components: {},
  props: {
    value: Object,
    dataForm: Object,
    image:false,
    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 => arr.push(field))
        })
  import cloneDeep from "lodash/cloneDeep";

  export default {
    name: 'TableUploader',
    components: {},
    props: {
      value: Object,
      dataForm: Object,
      image: false,
      busiType: String // 业务类型
    },
    data() {
      return {
        activeNames: ['1'],
        oss: null
      }
      return arr
    }
  },
  watch: {
    value(val, oldval) {
      if (JSON.stringify(val) !== JSON.stringify(oldval)) {
        this.oss = {
          ...this.getOss(),
          ...(val || {})
    },
    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))
          })
        }
        return arr
      }
    },
    mounted() {
      if (this.value)
        this.oss = this.value
      else
        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)

        // 分解到每个字段给dataForm赋值
        this.fields.forEach(field => {
          // this.dataForm[field.busiField] = field.files
          this.$set(this.dataForm, field.busiField, field.files)
        })
         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) {
        return JSON.parse(JSON.stringify(arr[0]))
      }
      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))
    methods: {
      getOss() {
        let arr = (this.$store.state.oss.configs || []).filter(config => config.busiType === this.busiType)
        if (arr.length > 0) {
          return JSON.parse(JSON.stringify(arr[0]))
        }
      })
    },
    getUploaderImg(list){
      // this.imageList = list
      if(list[0].url){
        this.$emit('getImageUrl',list[0].url)
      }
        return null
      },
      change(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)
        }

      }
    }
  }
}
</script>
<style>
.config-uploader label {
  width: 260px !important;
}
.zt .el-upload-list__item .el-progress{
  top:15px !important;
}
  .config-uploader1 label {
    width: 30px !important;
  }

  .config-uploader1 a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 180px;
  }

  .config-uploader1 .zt-upload {
    line-height: 0;
  }

  .zt .el-upload-list__item .el-progress {
    top: 15px !important;
  }
</style>