2022-05-13

<template>
  <XqFormItem :key="theRowKey" :wrapper="tableLabel?newItem['wrapper']:null">
  <div style="    display: flex;
    flex-wrap: wrap;">
 <draggable
      class="draggable"
      v-model="fileList"
      chosenClass="chosen"
       filter=".forbid"  
      forceFallback="true"
      group="people"
      animation="1000"
      @start="onStart"
      @end="onEnd"
    >
      <div v-for="(item, index) in fileList" :key="index" class="Uploading_img_warps">
        <div class="Uploading_img_warp">
          <div class="Uploading_imgs">
            <div v-if="item.url && limit !== 0" class="masking">
              <div class="maskings">
                <a-icon
               
                  type="eye"
                  class="icon forbid"
                  style="color: #fdfdfd"
                  @click="handlePreview(item)"
                />
               
                <a-icon
                  style="color: #fdfdfd"
                  type="delete"
                  class="icon forbid"
                  @click="ondelete(index)"
                />
              </div>
            </div>
            <img
             
              :src="item.url"
              alt=""
              class="Uploading_img"
            />
          

         
          </div>
        </div>
        <p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          {{ item.name }}
        </p>
      </div> 

      <XqUpload
      class="forbid"
    :showUploadList="false"
      v-decorator="[
        theRowKey,
        {
          ...newItem['decorator'],
          valuePropName: 'fileList',
          getValueFromEvent: getValue
        }
      ]"
      name="files"
      :form="form"
      :customize="newItem['customize']"
      :defaultFileList="newValue"
      :fileList="fileList"
      :decorator="[
        theRowKey,
        {
          ...newItem['decorator'],
          valuePropName: 'fileList',
          getValueFromEvent: getValue
        }
      ]"
      @change="handleChange"
    >
      <template v-if="showUploadBtn">
        <a-button v-if="listType === 'text' || listType === 'picture'">
          <a-icon type="upload" />
          选择文件
        </a-button>
        <a-icon v-else type="plus" style="font-size: 32px; color: #999" />
      </template>
    </XqUpload>
    </draggable>
   
  </div>
      
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </XqFormItem>

</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
import XqFormItem from "./XqFormItem";
import XqUpload from "./XqUpload";
import { message } from "ant-design-vue";
export default {
  name: "",
  components: {
    XqFormItem,
    XqUpload,
    draggable
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    item: {
      type: Object,
      default: () => {}
    },
    dataSource: {
      type: Object,
      default: () => {}
    },
    editable: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: ""
    },
    tableLabel: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [],
      defined: false
    };
  },
  computed: {
    newItem() {
      const tempItem = JSON.parse(JSON.stringify(this.item));
      return tempItem;
    },
    theRowKey() {
      return `${this.newItem['model']}${!!this.rowKey ? '_' + this.rowKey : ''}`;
    },
    newValue() {
      if (this.item && this.dataSource) {
        const value = this.dataSource[this.item["model"]];
        const list = this.initList(value);
        return list;
      }
      return [];
    },
    extendConfig() {
      return this.item["extend"];
    },
    size() {
      if(this.extendConfig && this.extendConfig.size) {
        return this.extendConfig.size;
      }
      return false;
    },
    limit() {
      if(this.extendConfig && this.extendConfig.limit) {
        return this.extendConfig.limit;
      }
      return false;
    },
    listType() {
      if(this.item && this.item["customize"] && this.item["customize"]["listType"]) {
        return this.item["customize"]["listType"];
      }
      return "text";
    },
    showUploadBtn() {
      if (this.limit && this.fileList && this.fileList.length >= this.limit) {
        return false;
      }
      return true;
    }
  },
  watch: {
    newValue: {
      handler(newVal) {
        if (newVal && !this.defined) {
          this.fileList = newVal;
          this.defined = true;
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
     //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    
      this.dataSource[this.item["model"]]=this.fileList
      this.$emit("change", this.fileList);
     
    },
       ondelete(index) {
      this.fileList.splice(index, 1);
           this.dataSource[this.item["model"]]=this.fileList
           this.$emit("change", this.fileList);
       
    },

     async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    getValue(e) {
      if(Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    handleChange({file, fileList, event}) {
      if(this.size){
        if(file.size / 1024 / 1024 > this.size){
          message.warning("文件体积超出限制，无法上传！")
          return false;
        }
      }
      let tempList = [...fileList];
      if(this.limit){
        tempList = tempList.slice(-this.limit);
      }
      tempList = tempList.map(li => {
        if(li.response && li.response.code === 200) {
          li.url = li.response.data[0]
        }
        return li;
      })   
      this.fileList = tempList;
      this.$emit("change", this.fileList);
     
    },
    initList(values) {
      if(values) {
        const urls = Array.isArray(values) ? values : values.split(",");
        if(urls.length > 0) {
          const tempList = [];
          for(let i = 0; i < urls.length; i++) {
            const url = urls[i];
            if (Object.prototype.toString.call(url) === '[object Object]') {
              tempList.push(url)
            } else {
              const nameArr = url.split("/");
              tempList.push({
                uid: -1 - i,
                name: nameArr[nameArr.length - 1],
                status: "done",
                url: url
              });
            }
          }
          return tempList;
        }
        return [];
      }
      return [];
    }
  }
}
</script>
<style lang="scss">
.uploading {
  width: 104px;
  display: inline-block;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.clearfix {
  display: flex;
  flex-wrap: wrap;
}
 
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.Uploading_img_warp {
  width: 104px;
  height: 104px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Uploading_imgs {
  position: relative;
  width: 90px;
  height: 90px;
  overflow: hidden;
}
.Uploading_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.masking {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  width: 90px;
  height: 90px;
  position: absolute;
  left: 0;
  right: 0;
}
.maskings {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Uploading_imgs:hover .masking {
  display: block;
}
.Uploading_file {
  display: inline-block;
  font-size: 90px;
  line-height: 90px;
}
.icon {
  cursor: pointer;
  margin: 0 2px;
  color: #fff;
}
.Uploading_img_warps {
  width: 114px;
  margin: 0 8px 8px 0;
}
.Uploading_loading {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.forbid {
  display: inline-block;width: 0%;
}
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
.draggable {
     display: flex;
    flex-wrap: wrap;
}
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}</style>