fj-dc-ui/.svn/pristine/6b/6bbd7f3e48f27470fabd3f1fd69e6c7cdc2c4663.svn-base

<!--
<upload ref="uploadFile" url="/biz/hzz/basic/file/upload?bizId=" @uploadOver="uploadOver"></upload>
if (this.$refs.uploadFile.submitUpload(id)) {
  // true上传列表为空，直接执行结束操作
  this.insertOver()
}
-->

<template>
      <div>
        <div style="width: 160px;margin: 20px auto;">
          <el-upload
          ref="upload"
          list-type="picture-card"
          :action="allurl"
          :headers="header"
          :show-file-list="false"
          :auto-upload="false"
          :file-list="fileList"
          multiple
          :on-preview="handlePictureCardPreview"
          :on-change="changeFileList"
          :on-success="uploadSuccess"
          :on-error="upError"
          :before-upload="uploadBefore"
          :data="updateData"
          >
          <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div>
          <draggable v-model="fileList" :options="{group:'image'}" @change="dragChange">
              <div class="img_container" v-for="(item,index) in fileList" :key="index" style="">
                <img v-if="item.raw.type.indexOf('image')>-1" :src="item.url" :alt="item.url">
                <p v-else>{{item.name}}</p>
                <div class="delete_modal">
                  <i class="el-icon-zoom-in" v-if="item.raw.type.indexOf('image')>-1" @click="handlePictureCardPreview(item)" style="margin-right: 20px;"></i>
                  <i class="el-icon-delete" @click="deletePic(index)"></i>
                </div>
              </div>
          </draggable>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  props: ["url"], // 上传基础路径
  data() {
    return {
        fileList: [],
        resList: [],
        length: 0, // 上传列表长度
        sum: 0, // 上传成功次数
        allurl: "", // 上传完整路径
        header: {
          'persId': localStorage.getItem('userid'),
          'accessToken' : localStorage.getItem('accessToken'),
          'orgId': localStorage.getItem('currentOrgId')
        },
        dialogImageUrl: '',
        dialogVisible: false,
        imageList: [],
        updateData: {
          sn: 0
        }
    };
  },
  components:{
    draggable
  },
  computed:{
    userid(){
      return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
    }
  },
  methods: {
    // 初始化，
    init() {
      this.$refs.upload.clearFiles();
      this.length = 0;
      this.sum = 0;
      this.allurl = "";
      this.resList = [];
    },
    // 开始上传，文件列表为空直接返回turn表示结束，不为空触发上传并返回false，由uploadOver判断结束时间
    submitUpload(id,leng) {
      this.updateData.sn = leng ? leng : 0
      this.allurl = this.url + id;
      if (this.length) {
        this.$nextTick(() => {
          this.$refs.upload.submit();
        });
        return true;
      } else {
        return true;
      }
    },
    // 上传出错，向上触发结束
    upError(err, file, fileList) {
      this.$message.error("上传出错，请修改文件！");
      this.$emit("uploadOver");
      this.init();
    },
    // 全部上传成功，向上触发结束
    uploadSuccess(response, file, fileList) {
      this.resList.push(response.data);
      console.log(this.resList);
      this.sum = this.sum + 1;
      if (this.sum == this.length) {
        this.$emit("uploadOver", this.resList);
        this.init();
      }
    },
    uploadBefore(){
      this.updateData.sn ++
    },
    // 及时更新列表长度
    changeFileList(file, fileList) {
        this.length = fileList.length;
        this.fileList = fileList;
    },
    deletePic(index){
        this.fileList.splice(index, 1);
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },
    dragChange(val){
        console.log(val)
        console.log(this.fileList)
    }
  }
};
</script>
<style lang="scss" scoped>
  .img_container{
    display:inline-block;
    width: 160px;
    height:150px;
    margin-right:10px;
    vertical-align: top;
    position: relative;
    img{
      width: 100%;
      max-height: 100%;
      min-height:30px;
      border:solid 1px #ddd;
      border-radius: 5px;
    }
    p{
      border: solid 1px #ddd;
      padding: 5px;
      border-radius: 5px;
      font-weight: bold;
      background: #eee;
    }
    &:hover{
      .delete_modal{
        display: block;
      }
    }
    .delete_modal{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 36px;
      background-color: rgba(0, 0, 0, .6);
      text-align: center;
      line-height: 36px;
      color: #fff;
      display: none;
      cursor: pointer;
      i{
        font-size: 18px;
      }
    }
  }
</style>