lw-cdp-ui 1.0.19 → 1.0.21

package/dist/components/lwUpload/index.vue

@@ -1,365 +1,365 @@
-<template>
-  <div class="lw-upload"
-       :class="{'lw-upload-round':round}"
-       :style="style">
-    <div v-if="file && file.status != 'success'"
-         class="lw-upload__uploading">
-      <div class="lw-upload__progress">
-        <el-progress :percentage="file.percentage"
-                     :text-inside="true"
-                     :stroke-width="16" />
-      </div>
-      <el-image class="image"
-                :src="file.tempFile"
-                fit="cover"></el-image>
-    </div>
-    <div v-if="file && file.status=='success'"
-         class="lw-upload__img">
-      <el-image class="image"
-                :src="file.url"
-                :preview-src-list="[file.url]"
-                fit="cover"
-                hide-on-click-modal
-                append-to-body
-                :z-index="9999">
-        <template #placeholder>
-          <div class="lw-upload__img-slot">
-            Loading...
-          </div>
-        </template>
-      </el-image>
-      <div class="lw-upload__img-actions"
-           v-if="!disabled">
-        <span class="del"
-              @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
-      </div>
-    </div>
-    <el-upload v-if="!file"
-               class="uploader"
-               ref="uploader"
-               :auto-upload="cropper?false:autoUpload"
-               :disabled="disabled"
-               :show-file-list="showFileList"
-               :action="action"
-               :name="name"
-               :data="data"
-               :accept="accept"
-               :limit="1"
-               :http-request="request"
-               :on-change="change"
-               :before-upload="before"
-               :on-success="success"
-               :on-error="error"
-               :on-exceed="handleExceed">
-      <slot>
-        <div class="el-upload--picture-card">
-          <div class="file-empty">
-            <el-icon>
-              <component :is="icon" />
-            </el-icon>
-            <h4 v-if="title">{{title}}</h4>
-          </div>
-        </div>
-      </slot>
-    </el-upload>
-    <span style="display:none!important"><el-input
-                v-model="value"></el-input></span>
-
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    modelValue: { type: String, default: "" },
-    height: { type: Number, default: 148 },
-    width: { type: Number, default: 148 },
-    title: { type: String, default: "" },
-    icon: { type: String, default: "el-icon-plus" },
-    action: { type: String, default: () => {} },
-    apiObj: { type: Object, default: () => { } },
-    name: { type: String, default: "file" },
-    data: { type: Object, default: () => { } },
-    accept: { type: String, default: "image/gif, image/jpeg, image/png" },
-    maxSize: { type: Number, default: 10 },
-    limit: { type: Number, default: 1 },
-    autoUpload: { type: Boolean, default: true },
-    showFileList: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    round: { type: Boolean, default: false },
-    onSuccess: { type: Function, default: () => { return true } },
-
-    cropper: { type: Boolean, default: false },
-    compress: { type: Number, default: 1 },
-    aspectRatio: { type: Number, default: NaN }
-  },
-
-  data() {
-    return {
-      value: "",
-      file: null,
-      style: {
-        width: this.width + "px",
-        height: this.height + "px"
-      },
-      cropperDialogVisible: false,
-      cropperFile: null
-    }
-  },
-  watch: {
-    modelValue(val) {
-      this.value = val
-      this.newFile(val)
-    },
-    value(val) {
-      this.$emit('update:modelValue', val)
-    }
-  },
-  mounted() {
-    this.value = this.modelValue
-    this.newFile(this.modelValue)
-  },
-  methods: {
-    newFile(url) {
-      if (url) {
-        this.file = {
-          status: "success",
-          url: url
-        }
-      } else {
-        this.file = null
-      }
-    },
-    handleRemove() {
-      this.clearFiles()
-    },
-    clearFiles() {
-      URL.revokeObjectURL(this.file.tempFile)
-      this.value = ""
-      this.file = null
-      this.$nextTick(() => {
-        this.$refs.uploader.clearFiles()
-      })
-    },
-    change(file, files) {
-      if (files.length > 1) {
-        files.splice(0, 1)
-      }
-      if (this.cropper && file.status == 'ready') {
-        const acceptIncludes = ["image/gif", "image/jpeg", "image/png"].includes(file.raw.type)
-        if (!acceptIncludes) {
-          this.$notify.warning({
-            title: '上传文件警告',
-            message: '选择的文件非图像类文件'
-          })
-          return false
-        }
-        this.cropperFile = file
-        this.cropperFile.tempCropperFile = URL.createObjectURL(file.raw)
-        this.cropperDialogVisible = true
-        return false
-      }
-      this.file = file
-      if (file.status == 'ready') {
-        file.tempFile = URL.createObjectURL(file.raw)
-      }
-    },
-    before(file) {
-      const acceptIncludes = this.accept.replace(/\s/g, "").split(",").includes(file.type)
-      if (!acceptIncludes) {
-        this.$notify.warning({
-          title: '上传文件警告',
-          message: '选择的文件非图像类文件'
-        })
-        this.clearFiles()
-        return false
-      }
-      const maxSize = file.size / 1024 / 1024 < this.maxSize;
-      if (!maxSize) {
-        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
-        this.clearFiles()
-        return false
-      }
-    },
-    handleExceed(files) {
-      const file = files[0]
-      file.uid = this.$tool.getUUID('file, 16')
-      this.$refs.uploader.handleStart(file)
-    },
-    parseData(res) {
-      return {
-        code: 200,				//分析状态字段结构
-        fileName: res.fileName,//分析文件名称
-        src: res.previewInfo.url,			//分析图片远程地址结构
-        msg: res.message			//分析描述字段结构
-      }
-    },
-    success(res, file) {
-      //释放内存删除blob
-      URL.revokeObjectURL(file.tempFile)
-      delete file.tempFile
-      var os = this.onSuccess(res, file)
-      if (os != undefined && os == false) {
-        this.$nextTick(() => {
-          this.file = null
-          this.value = ""
-        })
-        return false
-      }
-      var response = this.parseData(res)
-      file.url = response.src
-      this.value = file.url
-    },
-    error(err) {
-      this.$nextTick(() => {
-        this.clearFiles()
-      })
-      this.$notify.error({
-        title: '上传文件未成功',
-        message: err
-      })
-    },
-    request(param) {
-      let apiObj = this.apiObj || this.$api.auth.upload
-      const data = new FormData();
-      data.append(param.filename, param.file);
-      for (const key in param.data) {
-        data.append(key, param.data[key]);
-      }
-      console.log(data)
-      apiObj(data, {
-        onUploadProgress: e => {
-          const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
-          param.onProgress({ percent: complete })
-        }
-      }).then(res => {
-        var response = this.parseData(res);
-        if (response.code == 200) {
-          param.onSuccess(res)
-        } else {
-          param.onError(response.msg || "未知错误")
-        }
-      }).catch(err => {
-        param.onError(err)
-      })
-    }
-  }
-}
-</script>
-
-<style lwoped>
-.el-form-item.is-error .lw-upload .el-upload--picture-card {
-  border-color: var(--el-color-danger);
-}
-.lw-upload .el-upload--picture-card {
-  border-radius: 0;
-}
-
-.lw-upload .uploader,
-.lw-upload:deep(.el-upload) {
-  width: 100%;
-  height: 100%;
-}
-
-.lw-upload__img {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.lw-upload__img .image {
-  width: 100%;
-  height: 100%;
-}
-.lw-upload__img-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
-}
-.lw-upload__img-actions span {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-  color: #fff;
-}
-.lw-upload__img-actions span i {
-  font-size: 12px;
-}
-.lw-upload__img-actions .del {
-  background: #f56c6c;
-}
-.lw-upload__img:hover .lw-upload__img-actions {
-  display: block;
-}
-.lw-upload__img-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  background-color: var(--el-fill-color-lighter);
-}
-
-.lw-upload__uploading {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.lw-upload__progress {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--el-overlay-color-lighter);
-  z-index: 1;
-  padding: 10px;
-}
-.lw-upload__progress .el-progress {
-  width: 100%;
-}
-.lw-upload__uploading .image {
-  width: 100%;
-  height: 100%;
-}
-
-.lw-upload .file-empty {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.lw-upload .file-empty i {
-  font-size: 28px;
-}
-.lw-upload .file-empty h4 {
-  font-size: 12px;
-  font-weight: normal;
-  color: #8c939d;
-  margin-top: 8px;
-}
-
-.lw-upload.lw-upload-round {
-  border-radius: 50%;
-  overflow: hidden;
-}
-.lw-upload.lw-upload-round .el-upload--picture-card {
-  border-radius: 50%;
-}
-.lw-upload.lw-upload-round .lw-upload__img-actions {
-  top: auto;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.lw-upload.lw-upload-round .lw-upload__img-actions span {
-  width: 100%;
-}
-</style>
+<template>
+  <div class="lw-upload"
+       :class="{'lw-upload-round':round}"
+       :style="style">
+    <div v-if="file && file.status != 'success'"
+         class="lw-upload__uploading">
+      <div class="lw-upload__progress">
+        <el-progress :percentage="file.percentage"
+                     :text-inside="true"
+                     :stroke-width="16" />
+      </div>
+      <el-image class="image"
+                :src="file.tempFile"
+                fit="cover"></el-image>
+    </div>
+    <div v-if="file && file.status=='success'"
+         class="lw-upload__img">
+      <el-image class="image"
+                :src="file.url"
+                :preview-src-list="[file.url]"
+                fit="cover"
+                hide-on-click-modal
+                append-to-body
+                :z-index="9999">
+        <template #placeholder>
+          <div class="lw-upload__img-slot">
+            Loading...
+          </div>
+        </template>
+      </el-image>
+      <div class="lw-upload__img-actions"
+           v-if="!disabled">
+        <span class="del"
+              @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
+      </div>
+    </div>
+    <el-upload v-if="!file"
+               class="uploader"
+               ref="uploader"
+               :auto-upload="cropper?false:autoUpload"
+               :disabled="disabled"
+               :show-file-list="showFileList"
+               :action="action"
+               :name="name"
+               :data="data"
+               :accept="accept"
+               :limit="1"
+               :http-request="request"
+               :on-change="change"
+               :before-upload="before"
+               :on-success="success"
+               :on-error="error"
+               :on-exceed="handleExceed">
+      <slot>
+        <div class="el-upload--picture-card">
+          <div class="file-empty">
+            <el-icon>
+              <component :is="icon" />
+            </el-icon>
+            <h4 v-if="title">{{title}}</h4>
+          </div>
+        </div>
+      </slot>
+    </el-upload>
+    <span style="display:none!important"><el-input
+                v-model="value"></el-input></span>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: { type: String, default: "" },
+    height: { type: Number, default: 148 },
+    width: { type: Number, default: 148 },
+    title: { type: String, default: "" },
+    icon: { type: String, default: "el-icon-plus" },
+    action: { type: String, default: () => {} },
+    apiObj: { type: Object, default: () => { } },
+    name: { type: String, default: "file" },
+    data: { type: Object, default: () => { } },
+    accept: { type: String, default: "image/gif, image/jpeg, image/png" },
+    maxSize: { type: Number, default: 10 },
+    limit: { type: Number, default: 1 },
+    autoUpload: { type: Boolean, default: true },
+    showFileList: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    round: { type: Boolean, default: false },
+    onSuccess: { type: Function, default: () => { return true } },
+
+    cropper: { type: Boolean, default: false },
+    compress: { type: Number, default: 1 },
+    aspectRatio: { type: Number, default: NaN }
+  },
+
+  data() {
+    return {
+      value: "",
+      file: null,
+      style: {
+        width: this.width + "px",
+        height: this.height + "px"
+      },
+      cropperDialogVisible: false,
+      cropperFile: null
+    }
+  },
+  watch: {
+    modelValue(val) {
+      this.value = val
+      this.newFile(val)
+    },
+    value(val) {
+      this.$emit('update:modelValue', val)
+    }
+  },
+  mounted() {
+    this.value = this.modelValue
+    this.newFile(this.modelValue)
+  },
+  methods: {
+    newFile(url) {
+      if (url) {
+        this.file = {
+          status: "success",
+          url: url
+        }
+      } else {
+        this.file = null
+      }
+    },
+    handleRemove() {
+      this.clearFiles()
+    },
+    clearFiles() {
+      URL.revokeObjectURL(this.file.tempFile)
+      this.value = ""
+      this.file = null
+      this.$nextTick(() => {
+        this.$refs.uploader.clearFiles()
+      })
+    },
+    change(file, files) {
+      if (files.length > 1) {
+        files.splice(0, 1)
+      }
+      if (this.cropper && file.status == 'ready') {
+        const acceptIncludes = ["image/gif", "image/jpeg", "image/png"].includes(file.raw.type)
+        if (!acceptIncludes) {
+          this.$notify.warning({
+            title: '上传文件警告',
+            message: '选择的文件非图像类文件'
+          })
+          return false
+        }
+        this.cropperFile = file
+        this.cropperFile.tempCropperFile = URL.createObjectURL(file.raw)
+        this.cropperDialogVisible = true
+        return false
+      }
+      this.file = file
+      if (file.status == 'ready') {
+        file.tempFile = URL.createObjectURL(file.raw)
+      }
+    },
+    before(file) {
+      const acceptIncludes = this.accept.replace(/\s/g, "").split(",").includes(file.type)
+      if (!acceptIncludes) {
+        this.$notify.warning({
+          title: '上传文件警告',
+          message: '选择的文件非图像类文件'
+        })
+        this.clearFiles()
+        return false
+      }
+      const maxSize = file.size / 1024 / 1024 < this.maxSize;
+      if (!maxSize) {
+        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
+        this.clearFiles()
+        return false
+      }
+    },
+    handleExceed(files) {
+      const file = files[0]
+      file.uid = this.$tool.getUUID('file, 16')
+      this.$refs.uploader.handleStart(file)
+    },
+    parseData(res) {
+      return {
+        code: 200,				//分析状态字段结构
+        fileName: res.fileName,//分析文件名称
+        src: res.previewInfo.url,			//分析图片远程地址结构
+        msg: res.message			//分析描述字段结构
+      }
+    },
+    success(res, file) {
+      //释放内存删除blob
+      URL.revokeObjectURL(file.tempFile)
+      delete file.tempFile
+      var os = this.onSuccess(res, file)
+      if (os != undefined && os == false) {
+        this.$nextTick(() => {
+          this.file = null
+          this.value = ""
+        })
+        return false
+      }
+      var response = this.parseData(res)
+      file.url = response.src
+      this.value = file.url
+    },
+    error(err) {
+      this.$nextTick(() => {
+        this.clearFiles()
+      })
+      this.$notify.error({
+        title: '上传文件未成功',
+        message: err
+      })
+    },
+    request(param) {
+      let apiObj = this.apiObj || this.$api.auth.upload
+      const data = new FormData();
+      data.append(param.filename, param.file);
+      for (const key in param.data) {
+        data.append(key, param.data[key]);
+      }
+      console.log(data)
+      apiObj(data, {
+        onUploadProgress: e => {
+          const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
+          param.onProgress({ percent: complete })
+        }
+      }).then(res => {
+        var response = this.parseData(res);
+        if (response.code == 200) {
+          param.onSuccess(res)
+        } else {
+          param.onError(response.msg || "未知错误")
+        }
+      }).catch(err => {
+        param.onError(err)
+      })
+    }
+  }
+}
+</script>
+
+<style lwoped>
+.el-form-item.is-error .lw-upload .el-upload--picture-card {
+  border-color: var(--el-color-danger);
+}
+.lw-upload .el-upload--picture-card {
+  border-radius: 0;
+}
+
+.lw-upload .uploader,
+.lw-upload:deep(.el-upload) {
+  width: 100%;
+  height: 100%;
+}
+
+.lw-upload__img {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.lw-upload__img .image {
+  width: 100%;
+  height: 100%;
+}
+.lw-upload__img-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+}
+.lw-upload__img-actions span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  color: #fff;
+}
+.lw-upload__img-actions span i {
+  font-size: 12px;
+}
+.lw-upload__img-actions .del {
+  background: #f56c6c;
+}
+.lw-upload__img:hover .lw-upload__img-actions {
+  display: block;
+}
+.lw-upload__img-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  background-color: var(--el-fill-color-lighter);
+}
+
+.lw-upload__uploading {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.lw-upload__progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--el-overlay-color-lighter);
+  z-index: 1;
+  padding: 10px;
+}
+.lw-upload__progress .el-progress {
+  width: 100%;
+}
+.lw-upload__uploading .image {
+  width: 100%;
+  height: 100%;
+}
+
+.lw-upload .file-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.lw-upload .file-empty i {
+  font-size: 28px;
+}
+.lw-upload .file-empty h4 {
+  font-size: 12px;
+  font-weight: normal;
+  color: #8c939d;
+  margin-top: 8px;
+}
+
+.lw-upload.lw-upload-round {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.lw-upload.lw-upload-round .el-upload--picture-card {
+  border-radius: 50%;
+}
+.lw-upload.lw-upload-round .lw-upload__img-actions {
+  top: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.lw-upload.lw-upload-round .lw-upload__img-actions span {
+  width: 100%;
+}
+</style>