qj-common 4.3.0 → 4.3.2

package/src/components/Upload/upload.vue

@@ -1,295 +1,295 @@
-<template>
-  <div>
-    <input
-      v-show="false"
-      type="file"
-      :id="filesone"
-      name="file"
-      @change="uploadChange"
-      accept="image/*"
-    >
-    <div v-if="!isCheckBox" class="imgSrc">
-      <label :for="filesone">
-        <i class="el-icon-plus" v-show="show"></i>
-        <img v-show="ident=='0'&&emptyImg" :src="classLogo?classLogo:null">
-        <img v-show="ident=='1'" :src="editClassLogo">
-      </label>
-    </div>
-    <div v-else>
-      <div>
-        <ul v-show="emptyImg">
-          <li class="imgLi" v-for="(item,index) in items" :key="index">
-            <div>
-              <i class="el-icon-delete" @click="deleteIcon(index)"></i>
-            </div>
-            <img :src="item">
-          </li>
-        </ul>
-        <div class="upload_input">
-          <i class="el-icon-plus"></i>
-          <input
-            type="file"
-            :id="filesone"
-            name="file"
-            multiple="multiple"
-            @change="uploadChange"
-            accept="image/png, image/gif"
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { uploadGoodsFile } from "#/api/shopFbu";
-export default {
-  props: ["isCheckBox", "editClassLogo", "ident", "emptyImg", "items"],
-  data() {
-    return {
-      classLogo: "",
-      show: true,
-      filesone: this.id || "vue-filesonel-" + +new Date() + +Math.random(),
-      secDomainName:null
-    };
-  },
-  mounted() {
-    let hrefs = window.location.href, hosts = window.location.host;
-    if (hrefs && hosts) {
-      let name = hrefs.split(hosts)[1] ? hrefs.split(hosts)[1].split('/')[1] : null;
-      this.secDomainName = name && name !== 'paas' && process.env.NODE_ENV != 'development' ? process.env.API_ROOT + '/' + name : process.env.API_ROOT
-    } else {
-      this.secDomainName = process.env.API_ROOT
-    }
-  },
-  methods: {
-    uploadChange(event) {
-      console.log("shangchuan");
-      if (event.target.files.length > 0) {
-        this.show = false;
-        this.files = event.target.files[0];
-        let data = {};
-        let files = this.files;
-        let param = new FormData();
-        if (files != "") {
-          param.append("file", files, files.name);
-        } else {
-          this.$message.error("请添加图片");
-        }
-        param.append("tenantCode", "00000001");
-        param.append("param", JSON.stringify(data));
-        uploadGoodsFile(param).then(res => {
-          document.getElementsByName("file").value = "";
-          if (this.isCheckBox) {
-            this.$emit("classLogoAttr", res.fileUrl);
-          } else {
-            this.classLogo = "";
-            this.classLogo = res.fileUrl;
-            this.$emit("emitClassLogo", this.classLogo);
-          }
-        });
-      }
-    },
-    deleteIcon(index) {
-      this.items.splice(index, 1);
-    }
-  },
-  watch: {
-    editClassLogo(val) {
-      console.log("val发生改变");
-
-      if (val) {
-        this.show = false;
-      } else {
-        this.show = true;
-      }
-    }
-  }
-};
-//单个图片上传方法引用：
-// 1.新增
-//     <v-upload
-//     @emitClassLogo="emitClassLogo"
-//     :isCheckBox="isCheckBox"
-//     :ident="0"
-//     :emptyImg="emptyImg">
-//     </v-upload>
-// 2.编辑
-//     <v-upload
-//     @emitClassLogo="emitClassLogo"
-//     :isCheckBox="isCheckBox"
-//     :editClassLogo="editForm.goodsClassLogo"
-//     :ident="1">
-//     </v-upload>
-
-//import Upload from "@/components/Upload/upload";
-// export default {
-//     components:{
-//         'v-upload': Upload,
-//     },
-//     data() {
-//       return {
-//         isCheckBox:false,
-//         editClassLogo:'',
-//         emptyImg:false,
-//       };
-//     },
-//     methods: {
-//       addClassify(){
-//         this.emptyImg=false;
-//       },
-
-//       emitClassLogo(value){
-//         this.form.goodsClassLogo='';
-//         this.form.goodsClassLogo= value ;
-//         this.editForm.goodsClassLogo='';
-//         this.editForm.goodsClassLogo= value ;
-//         this.emptyImg=true;
-//       },
-//     },
-//   };
-
-//多个图片上传方法：
-//1.新增
-// <v-upload
-// @classLogoAttr="classLogoAttr"
-// :isCheckBox="isCheckBox"
-// :ident="0"
-// :emptyImg="emptyImg"
-// :items="items"
-// >
-// </v-upload>
-//2.编辑
-// <v-upload
-// @classLogoAttr="classLogoAttr"
-// :isCheckBox="isCheckBox"
-// :ident="1"
-// :emptyImg="emptyImg"
-// :items="items"
-// >
-// </v-upload>
-//import Upload from "@/components/Upload/upload";
-//   export default {
-//     components:{
-//         'v-upload': Upload,
-//     },
-//     data() {
-//       return {
-//         isCheckBox:true,
-//         editClassLogo:'',
-//         emptyImg:false,
-//         items:[],
-//     },
-//     methods: {
-//       addClassify(){
-//         this.showAddNewVirtual=true;
-//         this.selectAdd=true;
-//         this.emptyImg=false;
-//         this.items=[];
-//       },
-
-//       emitClassLogo(value){
-//         this.form.goodsClassLogo='';
-//         this.form.goodsClassLogo= value ;
-//         this.editForm.goodsClassLogo='';
-//         this.editForm.goodsClassLogo= value ;
-//         this.emptyImg=true;
-//       },
-//       classLogoAttr(value){
-//         this.emptyImg=true;
-//         this.items.push(value);
-//       },
-//         点编辑的时候将获取到的图片数据赋值给this.items;
-//     },
-//   };
-</script>
-
-<style lang='scss' scoped>
-img {
-  width: 148px;
-  height: 148px;
-}
-.upload_input,
-.imgSrc,
-.imgLi {
-  width: 148px;
-  height: 148px;
-  border: 1px dashed #c0ccda;
-  background: #fbfdff;
-  border-radius: 6px;
-}
-.upload_input {
-  position: relative;
-  border: 1px dashed #c0ccda;
-  float: left;
-  input {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    cursor: pointer;
-  }
-  i {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -12px;
-    margin-left: -12px;
-    font-size: 24px;
-  }
-}
-.imgSrc {
-  position: relative;
-  overflow: hidden;
-  label {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    display: inline-block;
-    i {
-      white-space: pre;
-      position: absolute;
-      font-size: 24px;
-      color: #8c939d;
-      top: 50%;
-      left: 50%;
-      margin-top: -12px;
-      margin-left: -12px;
-    }
-  }
-}
-ul {
-  .imgLi {
-    float: left;
-    margin: 0 10px 10px 0;
-    list-style: none;
-    padding: 0;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-    div {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      opacity: 0.5;
-      background-color: rgba(0, 0, 0, 0.4);
-      display: none;
-      i {
-        position: absolute;
-        font-size: 24px;
-        top: 50%;
-        left: 50%;
-        margin-top: -12px;
-        margin-left: -12px;
-        color: #fff;
-      }
-    }
-  }
-  .imgLi:hover {
-    div {
-      display: block;
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <input
+      v-show="false"
+      type="file"
+      :id="filesone"
+      name="file"
+      @change="uploadChange"
+      accept="image/*"
+    >
+    <div v-if="!isCheckBox" class="imgSrc">
+      <label :for="filesone">
+        <i class="el-icon-plus" v-show="show"></i>
+        <img v-show="ident=='0'&&emptyImg" :src="classLogo?classLogo:null">
+        <img v-show="ident=='1'" :src="editClassLogo">
+      </label>
+    </div>
+    <div v-else>
+      <div>
+        <ul v-show="emptyImg">
+          <li class="imgLi" v-for="(item,index) in items" :key="index">
+            <div>
+              <i class="el-icon-delete" @click="deleteIcon(index)"></i>
+            </div>
+            <img :src="item">
+          </li>
+        </ul>
+        <div class="upload_input">
+          <i class="el-icon-plus"></i>
+          <input
+            type="file"
+            :id="filesone"
+            name="file"
+            multiple="multiple"
+            @change="uploadChange"
+            accept="image/png, image/gif"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { uploadGoodsFile } from "#/api/shopFbu";
+export default {
+  props: ["isCheckBox", "editClassLogo", "ident", "emptyImg", "items"],
+  data() {
+    return {
+      classLogo: "",
+      show: true,
+      filesone: this.id || "vue-filesonel-" + +new Date() + +Math.random(),
+      secDomainName:null
+    };
+  },
+  mounted() {
+    let hrefs = window.location.href, hosts = window.location.host;
+    if (hrefs && hosts) {
+      let name = hrefs.split(hosts)[1] ? hrefs.split(hosts)[1].split('/')[1] : null;
+      this.secDomainName = name && name !== 'paas' && process.env.NODE_ENV != 'development' ? process.env.API_ROOT + '/' + name : process.env.API_ROOT
+    } else {
+      this.secDomainName = process.env.API_ROOT
+    }
+  },
+  methods: {
+    uploadChange(event) {
+      console.log("shangchuan");
+      if (event.target.files.length > 0) {
+        this.show = false;
+        this.files = event.target.files[0];
+        let data = {};
+        let files = this.files;
+        let param = new FormData();
+        if (files != "") {
+          param.append("file", files, files.name);
+        } else {
+          this.$message.error("请添加图片");
+        }
+        param.append("tenantCode", "00000001");
+        param.append("param", JSON.stringify(data));
+        uploadGoodsFile(param).then(res => {
+          document.getElementsByName("file").value = "";
+          if (this.isCheckBox) {
+            this.$emit("classLogoAttr", res.fileUrl);
+          } else {
+            this.classLogo = "";
+            this.classLogo = res.fileUrl;
+            this.$emit("emitClassLogo", this.classLogo);
+          }
+        });
+      }
+    },
+    deleteIcon(index) {
+      this.items.splice(index, 1);
+    }
+  },
+  watch: {
+    editClassLogo(val) {
+      console.log("val发生改变");
+
+      if (val) {
+        this.show = false;
+      } else {
+        this.show = true;
+      }
+    }
+  }
+};
+//单个图片上传方法引用：
+// 1.新增
+//     <v-upload
+//     @emitClassLogo="emitClassLogo"
+//     :isCheckBox="isCheckBox"
+//     :ident="0"
+//     :emptyImg="emptyImg">
+//     </v-upload>
+// 2.编辑
+//     <v-upload
+//     @emitClassLogo="emitClassLogo"
+//     :isCheckBox="isCheckBox"
+//     :editClassLogo="editForm.goodsClassLogo"
+//     :ident="1">
+//     </v-upload>
+
+//import Upload from "@/components/Upload/upload";
+// export default {
+//     components:{
+//         'v-upload': Upload,
+//     },
+//     data() {
+//       return {
+//         isCheckBox:false,
+//         editClassLogo:'',
+//         emptyImg:false,
+//       };
+//     },
+//     methods: {
+//       addClassify(){
+//         this.emptyImg=false;
+//       },
+
+//       emitClassLogo(value){
+//         this.form.goodsClassLogo='';
+//         this.form.goodsClassLogo= value ;
+//         this.editForm.goodsClassLogo='';
+//         this.editForm.goodsClassLogo= value ;
+//         this.emptyImg=true;
+//       },
+//     },
+//   };
+
+//多个图片上传方法：
+//1.新增
+// <v-upload
+// @classLogoAttr="classLogoAttr"
+// :isCheckBox="isCheckBox"
+// :ident="0"
+// :emptyImg="emptyImg"
+// :items="items"
+// >
+// </v-upload>
+//2.编辑
+// <v-upload
+// @classLogoAttr="classLogoAttr"
+// :isCheckBox="isCheckBox"
+// :ident="1"
+// :emptyImg="emptyImg"
+// :items="items"
+// >
+// </v-upload>
+//import Upload from "@/components/Upload/upload";
+//   export default {
+//     components:{
+//         'v-upload': Upload,
+//     },
+//     data() {
+//       return {
+//         isCheckBox:true,
+//         editClassLogo:'',
+//         emptyImg:false,
+//         items:[],
+//     },
+//     methods: {
+//       addClassify(){
+//         this.showAddNewVirtual=true;
+//         this.selectAdd=true;
+//         this.emptyImg=false;
+//         this.items=[];
+//       },
+
+//       emitClassLogo(value){
+//         this.form.goodsClassLogo='';
+//         this.form.goodsClassLogo= value ;
+//         this.editForm.goodsClassLogo='';
+//         this.editForm.goodsClassLogo= value ;
+//         this.emptyImg=true;
+//       },
+//       classLogoAttr(value){
+//         this.emptyImg=true;
+//         this.items.push(value);
+//       },
+//         点编辑的时候将获取到的图片数据赋值给this.items;
+//     },
+//   };
+</script>
+
+<style lang='scss' scoped>
+img {
+  width: 148px;
+  height: 148px;
+}
+.upload_input,
+.imgSrc,
+.imgLi {
+  width: 148px;
+  height: 148px;
+  border: 1px dashed #c0ccda;
+  background: #fbfdff;
+  border-radius: 6px;
+}
+.upload_input {
+  position: relative;
+  border: 1px dashed #c0ccda;
+  float: left;
+  input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    cursor: pointer;
+  }
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -12px;
+    margin-left: -12px;
+    font-size: 24px;
+  }
+}
+.imgSrc {
+  position: relative;
+  overflow: hidden;
+  label {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: inline-block;
+    i {
+      white-space: pre;
+      position: absolute;
+      font-size: 24px;
+      color: #8c939d;
+      top: 50%;
+      left: 50%;
+      margin-top: -12px;
+      margin-left: -12px;
+    }
+  }
+}
+ul {
+  .imgLi {
+    float: left;
+    margin: 0 10px 10px 0;
+    list-style: none;
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0.5;
+      background-color: rgba(0, 0, 0, 0.4);
+      display: none;
+      i {
+        position: absolute;
+        font-size: 24px;
+        top: 50%;
+        left: 50%;
+        margin-top: -12px;
+        margin-left: -12px;
+        color: #fff;
+      }
+    }
+  }
+  .imgLi:hover {
+    div {
+      display: block;
+    }
+  }
+}
+</style>