scrq-hd/.svn/pristine/db/db81bccba46587828b261da6c9b8bffef546c9a9.svn-base

<template>
  <el-dialog :modal="false" title="添加设备图片" :visible.sync="dialogVisible" width="300px">
    <div style="display: flex;">
      <el-upload element-loading-text="上传中..." class="avatar-uploader"
                 :action="doUpload" :data="uploadData"
                 :on-success="onSuccess"
                 :on-progress="onProgress"
                 :auto-upload="false"
                 :file-list="fileList"
                 :http-request="httpRequest"
                 ref="upload"
                 :before-upload="beforeAvatarUpload"
                 :on-error="onError" accept=".jpeg,.jpg,.png,.gif">
        <!--				<img v-if="picPath" :src="picPath" class="avatar">-->
        <!--				<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
			<el-button style="background: #BBC3CD!important;border-color:#BBC3CD!important;" size="small" type="success"
                 @click="dialogVisible = false">取 消</el-button>
			<el-button style="background: #1979EF!important;border-color:#1979EF!important;" size="small" type="success"
                 @click="onSubmit">确 定</el-button>
		</span>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  export default {
    props: ['addDevicePicturesDialogVisible'],
    data() {
      return {
        inputBillId:null,
        file: "",
        fileList: [],
        dialogVisible: false,
        picPath: '',
        picName: '',
        loading: false,
        doUpload: '/sys/attachment/upload',//"https://jsonplaceholder.typicode.com/posts/"
        uploadData: {
          equipmentId: ''
        },
        nodeItem: {}
      }
    },
    methods: {

      //打开弹框
      openDialog(id) {
        this.picPath = ''
        this.picName = ''
        this.dialogVisible = true
        this.inputBillId = id
      },
      //文件上传时的钩子
      onProgress(event, file, fileList) {
        console.log(file)
        console.log(fileList)
      },
      //文件上传成功时的钩子
      onSuccess(response, file, fileList) {
      },
      //文件上传失败时的钩子
      onError(err, file, fileList) {
        this.loading = false
        this.$message.error('上传失败')
      },
      //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
      beforeAvatarUpload(file) {
        console.log('开始上传')
        console.log(file)
        this.file = file
        this.loading = true
        const isJPG = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传图片只能是jpeg,jpg,png,gif格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      onSubmit() {
        console.log(this.addDevicePicturesDialogVisible.$data.currentRow)
        if (false) {
          this.$message.warning('上传图片不能为空')
        } else {
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          })

          this.$refs.upload.submit()
          this.fileList = []

          setTimeout(this.go, 500)

        }
      },
      go() {
        this.addDevicePicturesDialogVisible.init()
      },


      httpRequest(){
        const data = new FormData();
        data.append('file', this.file);
        data.append('directory', 'inputBill/image');
        data.append('type','123');

        axios.post('/sys/attachment/upload', data, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        }).then(data=>{
          if(data.data.code===200){
            const params = {
              attaExt:data.data.data.attaExt,
              attaName:data.data.data.attaName,
              attaSize:data.data.data.attaSize,
              attaType:data.data.data.attaType,
              attaUrl:data.data.data.attaUrl,
              inputId:this.addDevicePicturesDialogVisible.$data.currentRow.id,
              attaId:data.data.data.id,
            }

            this.$inputBill.saveFilesInputBill(params).then(value=>{

            })

            // this.RefreshList()
          }
        })
      }
    }
  }
</script>

<style scoped>
  >>> .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  >>> .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  >>> .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  >>> .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  >>> .el-textarea__inner {
    min-height: auto;
    height: 100%;
  }
</style>