xs-common-plugins 1.0.6 → 1.0.10

package/src/components/pro-upload/index.vue

@@ -1,90 +1,90 @@
-
-<!--
-    action="#"
-    :http-request="httpRequest" 覆盖默认的上传行为，自定义上传的实现
-    list-type="picture-card"
-    :headers="myHeaders"
-    :file-list="prodDetailsList" ， 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
-    :on-success="uploadSuccess"
-    :on-remove="uploadRemove"
-    :before-upload="handleBeforeUpload"
-    :on-preview="handlePictureCardPreview"
-
-    图片上传组件属性说明
-    on-success : 文件上传成功时的钩子
-    on-remove :文件列表移除文件时的钩子
-    before-upload : 上传文件之前的钩子
-    on-preview : 点击文件列表中已上传的文件时的钩子
-    :on-change="uploadChange" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
--->
-<template>
-  <div class="pro-upload-wrapper">
-    <el-upload
-      action="#"
-      multiple
-      :limit="limit"
-      :http-request="httpRequest"
-      list-type="picture-card"
-      :on-preview="handlePictureCardPreview"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :on-remove="handleRemove"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <el-dialog :visible.sync="dialogVisible" append-to-body>
-      <img width="100%" :src="dialogImageUrl" alt />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import data from "./data";
-import methods from "./methods";
-export default {
-  props: {
-    value: {
-      type: [Array],
-      default: function() {
-        return [];
-      }
-    },
-    limit: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false
-      // fileList: []
-    };
-  },
-  computed: {
-    fileList: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit("input", value);
-      }
-    }
-  },
-  methods,
-  mixins: [],
-  components: {},
-  watch: {},
-
-  // ------------------------------------------------------------------
-  // pragma mark - Life Cycle(生命周期)
-  // ------------------------------------------------------------------
-  created() {
-    this.createdInit();
-  },
-  mounted() {
-    this.mountedInit();
-  }
-};
-</script>
+
+<!--
+    action="#"
+    :http-request="httpRequest" 覆盖默认的上传行为，自定义上传的实现
+    list-type="picture-card"
+    :headers="myHeaders"
+    :file-list="prodDetailsList" ， 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
+    :on-success="uploadSuccess"
+    :on-remove="uploadRemove"
+    :before-upload="handleBeforeUpload"
+    :on-preview="handlePictureCardPreview"
+
+    图片上传组件属性说明
+    on-success : 文件上传成功时的钩子
+    on-remove :文件列表移除文件时的钩子
+    before-upload : 上传文件之前的钩子
+    on-preview : 点击文件列表中已上传的文件时的钩子
+    :on-change="uploadChange" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+-->
+<template>
+  <div class="pro-upload-wrapper">
+    <el-upload
+      action="#"
+      multiple
+      :limit="limit"
+      :http-request="httpRequest"
+      list-type="picture-card"
+      :on-preview="handlePictureCardPreview"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :on-remove="handleRemove"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data from "./data";
+import methods from "./methods";
+export default {
+  props: {
+    value: {
+      type: [Array],
+      default: function() {
+        return [];
+      }
+    },
+    limit: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false
+      // fileList: []
+    };
+  },
+  computed: {
+    fileList: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      }
+    }
+  },
+  methods,
+  mixins: [],
+  components: {},
+  watch: {},
+
+  // ------------------------------------------------------------------
+  // pragma mark - Life Cycle(生命周期)
+  // ------------------------------------------------------------------
+  created() {
+    this.createdInit();
+  },
+  mounted() {
+    this.mountedInit();
+  }
+};
+</script>
 <style lang="scss" src="./index.scss" ></style>

package/src/components/pro-upload/methods.js

@@ -1,86 +1,86 @@
-export default {
-  // ------------------------------------------------------------------
-  // pragma mark - inti(初始化行为)
-  // ------------------------------------------------------------------
-  createdInit() {},
-  mountedInit() {},
-
-  /**
-   * 图片预览
-   * @param {*} file
-   */
-  handlePictureCardPreview(file) {
-    this.dialogImageUrl = file.url;
-    this.dialogVisible = true;
-  },
-
-  /**
-   * 删除图片
-   * @param {*} file
-   * @param {*} fileList
-   */
-  handleRemove(file, fileList) {
-    this.fileList = fileList;
-  },
-
-  /**
-   * 覆盖默认的上传行为，自定义上传的实现
-   * @param {*} data
-   */
-  httpRequest(data) {
-    const that = this;
-    let fd = new FormData();
-    fd.append("files", data.file); //传文件
-    this.$http
-      .post("api.img.upload", fd, {
-        headers: {
-          "Content-Type": "multipart/form-data"
-        }
-      })
-      .then(function(res) {
-        if (res.code === 0) {
-          that.fileList.push({
-            url: res.data
-          });
-          that.$emit("input", that.fileList);
-        }
-      });
-  },
-
-  /**
-   * 图片上传之前
-   */
-  handleBeforeUpload(file) {
-    console.log(this.limit)
-    const isFormat = /^image\/(jpeg|png|jpg|ico|gif)$/.test(file.type);
-    const isLt4M = file.size / 1024 / 1024 < 4;
-    console.log("file.size", file.size);
-    console.log("isLt4M", isLt4M);
-    if (!isFormat) {
-      this.$message.error("上传图片只能是 JPEG/PNG/JPG/ICO/gif 格式!");
-    }
-    if (!isLt4M) {
-      this.$message.error("上传图片大小不能超过 4MB!");
-    }
-    return isFormat && isLt4M;
-  },
-
-  handleDownload(file) {
-    // console.log(file);
-  },
-
-  uploadSuccess() {}
-};
-
-// 说明
-
-// file 结构
-// file: {
-//   lastModified: 1595401711625,
-//   lastModifiedDate:'',//返回当前文件的最后修改日期,
-//   name: "WechatIMG71.png",
-//   size: 6164,
-//   type: "image/png",
-//   uid: 1604643922901,
-//   webkitRelativePath: ""
-// }
+export default {
+  // ------------------------------------------------------------------
+  // pragma mark - inti(初始化行为)
+  // ------------------------------------------------------------------
+  createdInit() {},
+  mountedInit() {},
+
+  /**
+   * 图片预览
+   * @param {*} file
+   */
+  handlePictureCardPreview(file) {
+    this.dialogImageUrl = file.url;
+    this.dialogVisible = true;
+  },
+
+  /**
+   * 删除图片
+   * @param {*} file
+   * @param {*} fileList
+   */
+  handleRemove(file, fileList) {
+    this.fileList = fileList;
+  },
+
+  /**
+   * 覆盖默认的上传行为，自定义上传的实现
+   * @param {*} data
+   */
+  httpRequest(data) {
+    const that = this;
+    let fd = new FormData();
+    fd.append("files", data.file); //传文件
+    this.$http
+      .post("api.img.upload", fd, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      })
+      .then(function(res) {
+        if (res.code === 0) {
+          that.fileList.push({
+            url: res.data
+          });
+          that.$emit("input", that.fileList);
+        }
+      });
+  },
+
+  /**
+   * 图片上传之前
+   */
+  handleBeforeUpload(file) {
+    console.log(this.limit)
+    const isFormat = /^image\/(jpeg|png|jpg|ico|gif)$/.test(file.type);
+    const isLt4M = file.size / 1024 / 1024 < 4;
+    console.log("file.size", file.size);
+    console.log("isLt4M", isLt4M);
+    if (!isFormat) {
+      this.$message.error("上传图片只能是 JPEG/PNG/JPG/ICO/gif 格式!");
+    }
+    if (!isLt4M) {
+      this.$message.error("上传图片大小不能超过 4MB!");
+    }
+    return isFormat && isLt4M;
+  },
+
+  handleDownload(file) {
+    // console.log(file);
+  },
+
+  uploadSuccess() {}
+};
+
+// 说明
+
+// file 结构
+// file: {
+//   lastModified: 1595401711625,
+//   lastModifiedDate:'',//返回当前文件的最后修改日期,
+//   name: "WechatIMG71.png",
+//   size: 6164,
+//   type: "image/png",
+//   uid: 1604643922901,
+//   webkitRelativePath: ""
+// }

package/src/components/report_set/index.scss

@@ -1,45 +1,45 @@
-.report-set-wrapper {
-    min-width: 550px;
-
-    .el-row {
-        margin: 4px 0;
-    }
-
-    .el-select>.el-input {
-        width: 440px;
-    }
-
-    .el-form-item {
-        display: flex;
-        align-items: center;
-    }
-
-    .el-radio-group {
-        margin-top: 0;
-    }
-
-    .el-form-item__content {
-        line-height: initial;
-    }
-
-    .el-checkbox {
-        margin-right: 10px;
-    }
-
-    .el-col {
-        display: flex;
-        align-items: center;
-
-        >span {
-            width: 80px;
-            text-align: right;
-            vertical-align: middle;
-            float: left;
-            font-size: 14px;
-            color: #606266;
-            line-height: 28px;
-            padding: 0 12px 0 0;
-            box-sizing: border-box;
-        }
-    }
+.report-set-wrapper {
+    min-width: 550px;
+
+    .el-row {
+        margin: 4px 0;
+    }
+
+    .el-select>.el-input {
+        width: 440px;
+    }
+
+    .el-form-item {
+        display: flex;
+        align-items: center;
+    }
+
+    .el-radio-group {
+        margin-top: 0;
+    }
+
+    .el-form-item__content {
+        line-height: initial;
+    }
+
+    .el-checkbox {
+        margin-right: 10px;
+    }
+
+    .el-col {
+        display: flex;
+        align-items: center;
+
+        >span {
+            width: 80px;
+            text-align: right;
+            vertical-align: middle;
+            float: left;
+            font-size: 14px;
+            color: #606266;
+            line-height: 28px;
+            padding: 0 12px 0 0;
+            box-sizing: border-box;
+        }
+    }
 }