qgb-process 0.2.3 → 0.2.7

package/src/components/public/components/BaseImageUploadDrag.vue

@@ -1,320 +1,320 @@
-<template>
-  <div class="image-drag">
-    <div class="btn-list">
-<!--      按钮组-->
-     <el-tooltip
-        class="item"
-        effect="dark"
-        content="图片排序"
-        placement="top-start">
-      <el-button
-        @click="open"
-        v-if="!dragOpen"
-        :disabled="imageList.length <= 1"
-        type="primary"
-        icon="el-icon-rank"
-        circle></el-button>
-     </el-tooltip>
-      <el-button
-        @click="save"
-        v-if="dragOpen"
-        type="primary"
-        icon="el-icon-check"
-        circle></el-button>
-      <el-button
-        @click="cancel"
-        v-if="dragOpen"
-        type="danger"
-        icon="el-icon-close"
-        circle></el-button>
-    </div>
-    <div class="image-list">
-<!--      拖拽-->
-      <div class="list-wrap" v-show="dragOpen">
-        <draggable
-          v-model="imageList"
-          :options="{
-            animation: 150,
-            ghostClass: 'sortable-ghost',
-            chosenClass: 'chosen-class',
-            scroll: true,
-            scrollSensitivity: 200
-          }">
-          <div
-            class="image-item"
-            v-for="(image, index) in imageList"
-            :key="index"
-            :style="{backgroundImage: `url(${image.url})`}"></div>
-        </draggable>
-      </div>
-      <div class="list-wrap" v-show="!dragOpen">
-<!--        展示-->
-        <div
-          class="image-item"
-          v-for="(image, index) in imageList"
-          :key="index"
-          :style="{ backgroundImage: `url(${image.url})`}"
-          @mouseover.prevent="image.is_hover=true"
-          @mouseleave.prevent="image.is_hover=false">
-          <div class="label" v-show="!image.is_hover">
-            <i class="el-icon-upload-success el-icon-check icon-success"></i>
-          </div>
-          <div class="mask" v-show="image.is_hover">
-            <i class="el-icon-delete bin" @click="deleteImage(index)"></i>
-            <i class="el-icon-zoom-in bin-search" @click="handlePictureCardPreview(image)"></i>
-          </div>
-        </div>
-<!--        上传-->
-        <el-upload
-          ref="upload"
-          v-show="limit === 0 || imageList.length < limit"
-          list-type="picture-card"
-          name="file"
-          :file-list="fileList"
-          class="upload-demo"
-          :disabled="dragOpen"
-          :action="action"
-          :on-change="onChange"
-          :on-remove="onRemove"
-          :on-error="onError"
-          :on-success="onSuccess"
-          :before-upload="beforeUpload"
-          :limit="limit"
-          :headers="headers"
-          :show-file-list="false"
-          :multiple="multiple"
-          v-loading="loading"
-          :on-exceed="onExceed"
-          enctype="multipart/form-data">
-          <i class="el-icon-plus"></i>
-          <div class="el-upload__tip des" slot="tip">{{tip}}</div>
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="imageUrl" alt="">
-        </el-dialog>
-      </div>
-    </div>
-  </div>
-</template>
-<script type="text/babel">
-// import Draggable from "vuedraggable"
-const Draggable = () => ({
-  // 需要加载的组件 (应该是一个 `Promise` 对象)
-  component: import("vuedraggable"),
-  // 异步组件加载时使用的组件
-  loading: "",
-  // 加载失败时使用的组件
-  error: "",
-  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
-  delay: 200,
-  // 如果提供了超时时间且组件加载也超时了，
-  // 则使用加载失败时使用的组件。默认值是：`Infinity`
-  timeout: 3000
-});
-export default {
-  name: "BaseImageUploadDrag",
-  props: {
-    // 图片数组
-    list: {
-      type: Array
-    },
-	  headers: {
-    	type: Object
-    },
-    // 上传图片数量限制
-    limit: {
-      type: Number,
-      default: 0
-    },
-    // 展示信息
-    tip: {
-      type: String,
-      default: ""
-    },
-    // 是否批量上传
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    // 图片上传地址
-    action: {
-      type: String,
-      default: ""
-    },
-    // 图片上传前校验
-    beforeUpload: {
-      type: Function,
-      default: () => {}
-    },
-    // 图片上传失败
-    onError: {
-      type: Function,
-      default: () => {}
-    },
-    // 图片上传成功
-    onSuccess: {
-      type: Function,
-      default: () => {}
-    },
-    // 图片移除
-    onRemove: {
-      type: Function,
-      default: () => {
-      }
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      // 图片预览
-      dialogVisible: false,
-      imageUrl: "",
-      imageList: [],
-      fileList: [],
-      dragOpen: false // 拖拽开关
-    }
-  },
-  methods: {
-    onChange(file, fileList) {},
-    handlePictureCardPreview(file) {
-      this.imageUrl = file.url
-      this.dialogVisible = true
-    },
-    deleteImage(i) {
-      this.imageList.splice(i, 1)
-      this.fileList = JSON.parse(JSON.stringify(this.imageList))
-      this.$emit("update", this.imageList.map(item => item.url))
-    },
-    open() {
-      this.fileList = JSON.parse(JSON.stringify(this.imageList))
-      this.dragOpen = true
-    },
-    cancel() {
-      this.imageList = this.fileList
-      this.dragOpen = false
-    },
-    save() {
-      if (this.imageList.length <= this.limit) {
-        this.loading = true
-        this.$emit("update", this.imageList.map(item => item.url))
-        this.loading = false
-        this.dragOpen = false
-      }
-    },
-    onExceed(files, fileList) {
-      this.$message.warning(`当前最多可上传${this.limit}张图片`)
-    },
-    initData() {
-      this.imageList = this.list.map(url => {
-        return {
-          url,
-          is_hover: false
-        }
-      })
-    }
-  },
-  components: {
-    Draggable
-  },
-  watch: {
-    list(newValue) {
-      console.log(newValue.length)
-      if (newValue.length > this.limit && this.limit !== 0) {
-        this.$message.warning(`当前最多可上传${this.limit}张图片`)
-        this.$refs.upload.abort()
-        return false
-      }
-      this.imageList = newValue.map(url => {
-        return {
-          url,
-          is_hover: false
-        }
-      })
-    }
-  },
-  mounted() {
-    this.initData()
-  }
-}
-</script>
-<style lang="scss" scoped>
-//
-.image-drag {
-  .btn-list {
-    margin: 10px 0;
-  }
-  .des {
-    display: block;
-    font-size: 12px;
-    font-weight: normal;
-    color: #99a9bf;
-    line-height: 16px;
-  }
-  .operation-danger {
-    color: $color-danger;
-  }
-  &:after {
-    display: block;
-    clear: both;
-    content: "";
-  }
-  .bin {
-    font-size: 22px;
-    position: absolute;
-    left: 60%;
-    top: 43%;
-  }
-  .bin-search {
-    font-size: 22px;
-    position: absolute;
-    left: 30%;
-    top: 43%;
-  }
-  .image-list {
-    float: left;
-    &:after {
-      display: block;
-      clear: both;
-      content: "";
-    }
-    .list-wrap {
-      float: left;
-      .icon-success {
-        transform: rotate(-45deg);
-      }
-      .image-item {
-        width: 148px;
-        height: 148px;
-        position: relative;
-        margin-right: 10px;
-        margin-bottom: 10px;
-        border: 1px solid #c0ccda;
-        background-size: 100% 100%;
-        border-radius: 6px;
-        float: left;
-        overflow: hidden;
-        cursor: pointer;
-        .label {
-          width: 46px;
-          height: 26px;
-          background-color: $color-success;
-          color: $color-white;
-          transform: rotate(45deg);
-          text-align: center;
-          position: absolute;
-          right: -17px;
-          top: -7px;
-        }
-        .mask {
-          width: 100%;
-          height: 100%;
-          border-radius: 6px;
-          background-color: rgba(0, 0, 0, 0.5);
-          color: $color-white;
-          position: relative;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="image-drag">
+    <div class="btn-list">
+<!--      按钮组-->
+     <el-tooltip
+        class="item"
+        effect="dark"
+        content="图片排序"
+        placement="top-start">
+      <el-button
+        @click="open"
+        v-if="!dragOpen"
+        :disabled="imageList.length <= 1"
+        type="primary"
+        icon="el-icon-rank"
+        circle></el-button>
+     </el-tooltip>
+      <el-button
+        @click="save"
+        v-if="dragOpen"
+        type="primary"
+        icon="el-icon-check"
+        circle></el-button>
+      <el-button
+        @click="cancel"
+        v-if="dragOpen"
+        type="danger"
+        icon="el-icon-close"
+        circle></el-button>
+    </div>
+    <div class="image-list">
+<!--      拖拽-->
+      <div class="list-wrap" v-show="dragOpen">
+        <draggable
+          v-model="imageList"
+          :options="{
+            animation: 150,
+            ghostClass: 'sortable-ghost',
+            chosenClass: 'chosen-class',
+            scroll: true,
+            scrollSensitivity: 200
+          }">
+          <div
+            class="image-item"
+            v-for="(image, index) in imageList"
+            :key="index"
+            :style="{backgroundImage: `url(${image.url})`}"></div>
+        </draggable>
+      </div>
+      <div class="list-wrap" v-show="!dragOpen">
+<!--        展示-->
+        <div
+          class="image-item"
+          v-for="(image, index) in imageList"
+          :key="index"
+          :style="{ backgroundImage: `url(${image.url})`}"
+          @mouseover.prevent="image.is_hover=true"
+          @mouseleave.prevent="image.is_hover=false">
+          <div class="label" v-show="!image.is_hover">
+            <i class="el-icon-upload-success el-icon-check icon-success"></i>
+          </div>
+          <div class="mask" v-show="image.is_hover">
+            <i class="el-icon-delete bin" @click="deleteImage(index)"></i>
+            <i class="el-icon-zoom-in bin-search" @click="handlePictureCardPreview(image)"></i>
+          </div>
+        </div>
+<!--        上传-->
+        <el-upload
+          ref="upload"
+          v-show="limit === 0 || imageList.length < limit"
+          list-type="picture-card"
+          name="file"
+          :file-list="fileList"
+          class="upload-demo"
+          :disabled="dragOpen"
+          :action="action"
+          :on-change="onChange"
+          :on-remove="onRemove"
+          :on-error="onError"
+          :on-success="onSuccess"
+          :before-upload="beforeUpload"
+          :limit="limit"
+          :headers="headers"
+          :show-file-list="false"
+          :multiple="multiple"
+          v-loading="loading"
+          :on-exceed="onExceed"
+          enctype="multipart/form-data">
+          <i class="el-icon-plus"></i>
+          <div class="el-upload__tip des" slot="tip">{{tip}}</div>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="imageUrl" alt="">
+        </el-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/babel">
+// import Draggable from "vuedraggable"
+const Draggable = () => ({
+  // 需要加载的组件 (应该是一个 `Promise` 对象)
+  component: import("vuedraggable"),
+  // 异步组件加载时使用的组件
+  loading: "",
+  // 加载失败时使用的组件
+  error: "",
+  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
+  delay: 200,
+  // 如果提供了超时时间且组件加载也超时了，
+  // 则使用加载失败时使用的组件。默认值是：`Infinity`
+  timeout: 3000
+});
+export default {
+  name: "BaseImageUploadDrag",
+  props: {
+    // 图片数组
+    list: {
+      type: Array
+    },
+	  headers: {
+    	type: Object
+    },
+    // 上传图片数量限制
+    limit: {
+      type: Number,
+      default: 0
+    },
+    // 展示信息
+    tip: {
+      type: String,
+      default: ""
+    },
+    // 是否批量上传
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 图片上传地址
+    action: {
+      type: String,
+      default: ""
+    },
+    // 图片上传前校验
+    beforeUpload: {
+      type: Function,
+      default: () => {}
+    },
+    // 图片上传失败
+    onError: {
+      type: Function,
+      default: () => {}
+    },
+    // 图片上传成功
+    onSuccess: {
+      type: Function,
+      default: () => {}
+    },
+    // 图片移除
+    onRemove: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      // 图片预览
+      dialogVisible: false,
+      imageUrl: "",
+      imageList: [],
+      fileList: [],
+      dragOpen: false // 拖拽开关
+    }
+  },
+  methods: {
+    onChange(file, fileList) {},
+    handlePictureCardPreview(file) {
+      this.imageUrl = file.url
+      this.dialogVisible = true
+    },
+    deleteImage(i) {
+      this.imageList.splice(i, 1)
+      this.fileList = JSON.parse(JSON.stringify(this.imageList))
+      this.$emit("update", this.imageList.map(item => item.url))
+    },
+    open() {
+      this.fileList = JSON.parse(JSON.stringify(this.imageList))
+      this.dragOpen = true
+    },
+    cancel() {
+      this.imageList = this.fileList
+      this.dragOpen = false
+    },
+    save() {
+      if (this.imageList.length <= this.limit) {
+        this.loading = true
+        this.$emit("update", this.imageList.map(item => item.url))
+        this.loading = false
+        this.dragOpen = false
+      }
+    },
+    onExceed(files, fileList) {
+      this.$message.warning(`当前最多可上传${this.limit}张图片`)
+    },
+    initData() {
+      this.imageList = this.list.map(url => {
+        return {
+          url,
+          is_hover: false
+        }
+      })
+    }
+  },
+  components: {
+    Draggable
+  },
+  watch: {
+    list(newValue) {
+      console.log(newValue.length)
+      if (newValue.length > this.limit && this.limit !== 0) {
+        this.$message.warning(`当前最多可上传${this.limit}张图片`)
+        this.$refs.upload.abort()
+        return false
+      }
+      this.imageList = newValue.map(url => {
+        return {
+          url,
+          is_hover: false
+        }
+      })
+    }
+  },
+  mounted() {
+    this.initData()
+  }
+}
+</script>
+<style lang="scss" scoped>
+//
+.image-drag {
+  .btn-list {
+    margin: 10px 0;
+  }
+  .des {
+    display: block;
+    font-size: 12px;
+    font-weight: normal;
+    color: #99a9bf;
+    line-height: 16px;
+  }
+  .operation-danger {
+    color: $color-danger;
+  }
+  &:after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+  .bin {
+    font-size: 22px;
+    position: absolute;
+    left: 60%;
+    top: 43%;
+  }
+  .bin-search {
+    font-size: 22px;
+    position: absolute;
+    left: 30%;
+    top: 43%;
+  }
+  .image-list {
+    float: left;
+    &:after {
+      display: block;
+      clear: both;
+      content: "";
+    }
+    .list-wrap {
+      float: left;
+      .icon-success {
+        transform: rotate(-45deg);
+      }
+      .image-item {
+        width: 148px;
+        height: 148px;
+        position: relative;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        border: 1px solid #c0ccda;
+        background-size: 100% 100%;
+        border-radius: 6px;
+        float: left;
+        overflow: hidden;
+        cursor: pointer;
+        .label {
+          width: 46px;
+          height: 26px;
+          background-color: $color-success;
+          color: $color-white;
+          transform: rotate(45deg);
+          text-align: center;
+          position: absolute;
+          right: -17px;
+          top: -7px;
+        }
+        .mask {
+          width: 100%;
+          height: 100%;
+          border-radius: 6px;
+          background-color: rgba(0, 0, 0, 0.5);
+          color: $color-white;
+          position: relative;
+        }
+      }
+    }
+  }
+}
+</style>