11

src/views/emis/emisBrand/index.vue

@@ -240,9 +240,33 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
+             <!-- 
             <el-form-item label="品牌图片(多图;号隔开)" prop="brandImg">
               <el-input v-model="form.brandImg" placeholder="请输入品牌图片(多图;号隔开)" />
             </el-form-item>
+          -->
+            <!-- 图片 -->
+            <el-form-item label="品牌图片" prop="brandImg"> 
+              <el-upload
+                :headers="imgUploadHeaders"
+                action="none"  
+                accept=".jpg,.jpeg,.png,.gif,.pdf"  
+                name="brandImg"    
+                :limit='1' 
+                :file-list="sendbackitem.fileList"
+                :on-exceed='uploadOverrun'
+                :on-change="handleChange"
+                 :before-upload="beforeAvatarUpload"
+                 :http-request='submitUpload'
+                 :before-remove="beforeRemoveCerdImg"
+                  list-type="picture-card"
+                  :on-preview="handlePictureCardPreview" >
+                <i  class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload> 
+              <el-dialog :visible.sync="dialogVisible1" append-to-body>
+                  <img width="100%" fit="contain" :src="dialogImageUrl" alt="" style=" height: 80%;">
+              </el-dialog>
+              </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
@@ -296,7 +320,26 @@ export default {
   ],
   data() {
     return {
+      dialogVisible1:false,
+      dialogVisible2:false,
+      dialogImageUrl:"",
+      dialogImageUrls:"",
+      currentId:null,
       // 遮罩层
+      sendbackitem:{
+         package_id:'',	
+          detail:'',
+          mobile:'',	
+          consignee:'',
+          img:'',
+          city:'',
+          district:'',
+          detail1:'',
+          zipcode:'',
+          yd_sn:'',
+          img1:[],
+          fileList:[],
+        },
       loading: true,
       // 选中数组
       ids: [],
@@ -374,7 +417,7 @@ export default {
           { required: true, message: "0-未开放不能为空", trigger: "blur" }
         ],
         brandImg: [
-          { required: true, message: "品牌图片(多图;号隔开)不能为空", trigger: "blur" }
+          { required: true, message: "品牌图片不能为空", trigger: "blur" }
         ],
       }
     };
@@ -382,7 +425,91 @@ export default {
   created() {
     this.getList();
   },
+  computed: {
+    uploadDisabled:function() {
+        return this.sendbackitem.fileList.length >0
+    },
+    imgUploadHeaders(){return { }},
+  },
   methods: {
+    handlePictureCardPreview(file){
+      //console.log(file)
+      this.dialogImageUrl = file.url;
+      this.dialogVisible1 = true;
+    },
+    beforeAvatarUpload(file) {
+          const isLt2M = file.size / 1024 / 1024 < 2;
+          if (!isLt2M) {
+            this.$message.error("上传图片大小不能超过 2MB!");
+            return false
+          }
+    },
+    submitUpload: function(content) {//自定义的上传图片的方法
+      console.log(content);
+     /*
+        let that = this;
+      //1. 创建formData 利用AXIOS传递
+      console.log(content)
+      const formData = new FormData();
+      //  文件名
+      const filename = `${content.file.type.split("/")[1]}`;
+      // 需要上传的文件file
+      formData.append("file", content.file, filename);
+      formData.append("name", content.file.name);
+       let config = {
+          'Content-Type': 'multipart/form-data'
+        }
+     
+         axios.post('http://oms.wuqinclub.com/lca/index.php?m=admin&c=batch&a=batch_upload_goods_images_sd', formData, config)
+              .then(function(res) {
+               if (!res.data.success) {
+                    that.$message({
+                      message: res.data.message,
+                      type: 'error'
+                    });
+                     that.sendbackitem.fileList = that.sendbackitem.fileList.splice(-1,1);
+                     that.sendbackitem.img = that.sendbackitem.img1[0];
+                  }else{
+                    if(res.data.pic!=''){
+                        that.$set(that.sendbackitem.img1, 0,res.data.pic)
+                        that.sendbackitem.img = res.data.pic
+                    }
+   
+                  }
+               })
+            .catch(function(error) {
+                 that.$message.error(error);
+           })
+           */
+    },
+    beforeRemoveCerdImg(file,list){
+      let that = this
+      let currentProfileIndex = (that.sendbackitem.fileList || []).findIndex((profile) => profile.uid === file.uid)
+      console.log(currentProfileIndex)
+       that.sendbackitem.fileList.splice(currentProfileIndex, 1);
+       that.sendbackitem.img1.splice(currentProfileIndex, 1);
+       that.sendbackitem.img = that.sendbackitem.img1[0];
+    },
+    handleChange(file, fileList) {
+       console.log(file);
+       this.form.brandImg = file;
+      console.log(11);
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      console.log(isLt2M)
+      if (!isLt2M) {
+           this.$message.error('上传图片大小不能超过 2MB!');
+           this.sendbackitem.fileList =  this.sendbackitem.fileList.splice(-1,1);
+      }else{
+           this.sendbackitem.fileList =  fileList;
+         
+      }
+    },
+    uploadOverrun: function() {
+        this.$message({
+          type: 'error',
+          message: '上传文件个数超出限制!最多上传1张图片!'
+        });
+    },
     /** 查询品牌列表 */
     getList() {
       this.loading = true;
@@ -404,6 +531,7 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
+      this.dialogVisible1 = false;
       this.reset();
     },
     // 表单重置
@@ -467,6 +595,13 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改";
+        if(this.form.brandImg != null){
+          this.dialogVisible1 = true;
+          this.dialogImageUrl = this.form.brandImg;
+        }else{
+          this.dialogVisible1 = false;
+          this.dialogImageUrl = '';
+        }
       });
 
        // 子组件打开模式
@@ -485,16 +620,19 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          console.log(this.form);
           if (this.form.id != null) {
             updateEmisBrand(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
+              this.dialogVisible1 = false;
               this.getList();
             });
           } else {
             addEmisBrand(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
+              this.dialogVisible1 = false;
               this.getList();
             });
           }
@@ -503,10 +641,12 @@ export default {
     },
     handleFormChanged(){
         this.openForm = false;
+        this.dialogVisible1 = false;
         this.getList();
     },
     cancelForm(){
       this.openForm = false;
+      this.dialogVisible1 = false;
     },
     /** 删除按钮操作 */
     handleDelete(row) {