yos_web/src/HManagement/siteManage/securityConfig/modules/productImage.vue

<template>
  <div>
    <el-button size="small" style="width:120px" type="primary" @click="queryFileLink">{{ $t('设 置') }}</el-button>
    <el-dialog :title="$t('设置')"  append-to-body :visible.sync="dialogEditVisible">
      <el-row :gutter="16">
        <el-col :span="12">
          <p> {{ $t('默认图片') }}:</p>
          <uploadFile v-if="!image.url" style="margin-top:10px" :folderid="folderid" accept=".JPG,.PNG" btntype="image" :bindData="{ownertable:'system',ownerid:1,usetype:'defaultImage'}" @onSuccess="queryFileLink"></uploadFile>
          <div v-else>
            <!-- <img  style="width:100%" :src="image.url" alt=""> -->
            <viewImage :image="image" :deletebtn="true" @onSuccess="queryFileLink"></viewImage>
          </div>
          <small style="display:block;margin-top:20px" class="info">{{$t('注:建议上传图片大小')}}1024x1024,{{ $t('大小不超过') }}2M,{{$t('格式为')}}JPG/PNG</small>
        </el-col>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogEditVisible = false" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">{{$t('确 定')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

import uploadFile from '../../../../components/upload/hw_obs_upload.vue'
import viewImage from '../../../../components/previewImage/index.vue'

export default {
  props:['basicInfo'],
  components:{
    uploadFile,
    viewImage
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo'
    })
  },
  data () {
    return {
      dialogEditVisible:false,
      image:{url:''},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid
    }
  },
  methods:{
    // 获取附件信息
    async queryFileLink () {
      this.dialogEditVisible = true
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "queryFileLink",
        "content": {
          "ownertable": 'system',
          "ownerid": 1,
          "usetype":'defaultImage'//传空返回有所
        }
      })
      res.data[0]?this.image = res.data[0]:this.image = {url:''}
    },
    onSubmit(){
      this.dialogEditVisible = false
      this.$emit('setProductImage')
    }
  }
}

</script>
<style scoped>
.dialog-footer{
  margin-top: 50px;
  text-align: center;
}
</style>