我们发布啦

admin/src/components/uploadPicture/forGenrator/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    {{multiple}}
+    <div class="acea-row" v-if="multiple">
+      <div
+        v-for="(item,index) in imageList"
+        :key="index"
+        class="pictrue"
+        draggable="false"
+        @dragstart="handleDragStart($event, item)"
+        @dragover.prevent="handleDragOver($event, item)"
+        @dragenter="handleDragEnter($event, item)"
+        @dragend="handleDragEnd($event, item)"
+      >
+        <img :src="item.sattDir">
+        <i class="el-icon-error btndel" @click="handleRemove(index)" />
+      </div>
+      <div class="upLoadPicBox" @click="modalPicTap('2')">
+        <div class="upLoad">
+          <i class="el-icon-camera cameraIconfont" />
+        </div>
+      </div>
+    </div>
+    <div class="upLoadPicBox" @click="modalPicTap('1')" v-else>
+      <div v-if="image" class="pictrue"><img :src="image"></div>
+      <div v-else class="upLoad">
+        <i class="el-icon-camera cameraIconfont" />
+      </div>
+    </div>
+    <el-dialog
+      title="上传图片"
+      :visible.sync="visible"
+      width="896px"
+      :before-close="handleClose"
+      z-index="3004"
+    >
+      <upload-index v-if="visible" :checkedMore="imageList" :isMore="isMore" @getImage="getImage" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import UploadIndex from '@/components/uploadPicture/index.vue'
+export default {
+  name: 'UploadFroms',
+  components: { UploadIndex },
+  props:{
+    value:{},
+    multiple:{
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      image:"",
+      visible: false,
+      callback: function() {},
+      isMore: '',
+      imageList: []
+    }
+  },
+  beforeMount(){
+    if( this.multiple ){
+      // 接收 v-model 数据
+      if(this.value){
+        this.imageList = JSON.parse(this.value)
+      }
+    }else{
+      // 接收 v-model 数据
+      if(this.value){
+        this.image = this.value
+      }
+    }
+    // 处理多选
+    this.isMore = this.multiple ? '2':'1'
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    getImage(img) {
+      if (this.multiple) {
+        let obj = {};
+        this.imageList = img.reduce((cur,next) => {
+          obj[next.attId] ? "" : obj[next.attId] = true && cur.push(next);
+          return cur;
+        },[])
+        this.$emit('input', JSON.stringify(this.imageList))
+      } else {
+        this.image = img[0].sattDir
+        this.$emit('input', this.image)
+      }
+      this.visible = false
+    },
+    // 点击商品图
+    modalPicTap (tit, num, i) {
+      this.visible = true
+    },
+    handleRemove (i) {
+      this.imageList.splice(i, 1)
+      this.$emit('input', this.imageList.join(','))
+    },
+    // 移动
+    handleDragStart (e, item) {
+      this.dragging = item;
+    },
+    handleDragEnd (e, item) {
+      this.dragging = null
+    },
+    handleDragOver (e) {
+      e.dataTransfer.dropEffect = 'move'
+    },
+    handleDragEnter (e, item) {
+      e.dataTransfer.effectAllowed = 'move'
+      if (item === this.dragging) {
+        return
+      }
+      const newItems = [...this.imageList]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(item)
+      newItems.splice(dst, 0, ...newItems.splice(src, 1))
+      this.imageList = newItems;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .btndel{
+    position: absolute;
+    z-index: 1;
+    width :20px !important;
+    height: 20px !important;
+    left: 46px;
+    top: -4px;
+  }
+  .pictrue{
+    width: 60px;
+    height: 60px;
+    border: 1px dotted rgba(0,0,0,0.1);
+    margin-right: 10px;
+    position: relative;
+    cursor: pointer;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>