商品管理 库存交互修改

src/views/goods/create-good.vue

@@ -56,7 +56,7 @@
                   class="bg-uploader"
                   action="#"
                   :show-file-list="false"
-                  :before-upload="beforeUploadPic1"
+                  :before-upload="beforeUploadPic"
               >
                 <img
                     v-if="formData.goods_image"
@@ -366,9 +366,9 @@
               <el-form-item label="库存" prop="name">
                 <el-col :span="20">
                   <div class="stock-com">
-                    <span class="sp sp-l"><i class="el-icon-minus"></i></span>
+                    <span class="sp sp-l" @click="changeStock(1)" :class="{'opac':formData.stock == 0}"><i class="el-icon-minus"></i></span>
                     <span class="sp sp-c">{{formData.stock}}</span>
-                    <span class="sp sp-r"><i class="el-icon-plus"></i></span>
+                    <span class="sp sp-r" @click="changeStock(2)"><i class="el-icon-plus"></i></span>
                   </div>
                  <!-- <el-input
                       size="small"
@@ -411,6 +411,25 @@
           />
         </div>
       </el-dialog>
+      <el-dialog
+        :title="stock.title"
+        :visible.sync="stockDio"
+        width="30%"
+        center>
+        <div class="stock-dia">
+          <div class="stock-item">更新库存后，将影响买家购买，请谨慎操作</div>
+          <div class="stock-item">当前库存：{{formData.stock}}</div>
+          <div class="demo-input-suffix">
+            {{stock.type == 1 ? '减少数量' : '增加数量'}}：
+           <el-input v-model="stock.num" :placeholder="stock.placeholderTxt" style="width: 180px;"></el-input>
+          </div>
+
+        </div>
+        <span slot="footer" class="dialog-footer" style="text-align: right;">
+          <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
+          <el-button type="primary" @click="updateStock">完成</el-button>
+        </span>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -437,6 +456,13 @@
         }
       };
       return{
+        stock:{
+          title:'减少库存',
+          type:1,
+          placeholderTxt:'请输入减少的库存数量',
+          num:''
+        },
+        stockDio:false,
         curmbFirst: '云鹊店铺',
         isGoods_image:true,
         isSpecification_url:true,
@@ -472,7 +498,7 @@
           treat_disease:'',
           bar_code:'',
           discount_price:'',
-          stock:1,
+          stock:0,
         },
         showCropper: false,
         currentOption: {
@@ -559,6 +585,49 @@
       this.title = id == 'add' ? '新增商品' : '编辑商品'
     },
     methods: {
+      updateStock(){
+        let r = /^\+?[1-9][0-9]*$/;
+        if(!r.test(this.stock.num)){
+          return  this.$message({
+            message: '库存数量必须正整数',
+            type: 'warning'
+          });
+        }
+
+        if(this.stock.type == 1){
+          if(this.stock.num > this.formData.stock){
+            return  this.$message({
+              message: '减少库存数量不得大于当前库存',
+              type: 'warning'
+            });
+          }
+        }
+
+        //造假  接口来了删掉
+        if(this.stock.num <= 0){
+          return  this.$message({
+            message: '增加库存数量不得为0',
+            type: 'warning'
+          });
+        }
+        this.formData.stock = this.stock.num
+        this.stockDio = false
+      },
+      changeStock(type){
+        if(this.formData.stock == 0 && type == 1){
+          return;
+        }
+        let str = type == 1 ? '减少' : '增加',
+            txt = `请输入${str}的库存数量`,
+            tit = str + '库存'
+        this.stock = {
+          title:tit,
+          type,
+          num:'',
+          placeholderTxt:txt
+        }
+        this.stockDio = true
+      },
       complete() {
         let formName = "formData";
 
@@ -590,9 +659,35 @@
           }
         });
         this.$emit('returnIsNext', flag);
+      },
+      beforeUploadPic(file) {
+        let vm = this;
+        let picTypes = ['image/jpeg','image/png']
+
+        //const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
+        if (picTypes.indexOf(file.type) == -1) {
+          return this.$message.error("请上传jpeg或png格式的图片");
+
+        }
+        // if (!isLt2M) {
+        //   vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
+        //   return;
+        // }
+        let _img = new FileReader();
+        _img.readAsDataURL(file);
+        openLoading(vm);
+        doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
+          closeLoading(vm);
+          console.log('上传成功后路径', path);
+          vm.formData.goods_image = path.fullPath
+
+          vm.$message.success("上传成功");
+        });
+
+
       },
       //上传店铺logo
-      beforeUploadPic1(file) {
+      beforeUploadPic1(file,type) {
         this.currentOption.aspectRatio = 1/1;
         this.currentOption.cropBoxResizable = true;
         this.currentOption.minCropBoxWidth = 160;
@@ -833,34 +928,46 @@
   .stock-com{
     width: 158px;
     height: 32px;
-    border:1px solid #dcdfe6;
+
     border-radius: 4px;
     overflow: hidden;
     .sp{
       display: inline-block;
       float: left;
+      color: #fff;
     }
     .sp-c{
-      line-height: 32px;
+      line-height: 30px;
       width:92px;
       text-align: center;
+      color: #666;
+      border-top:1px solid #449284;
+      border-bottom:1px solid #449284;
     }
     .sp-l{
-      border-right:1px solid #dcdfe6;
+      border-right:1px solid #449284;
 
     }
     .sp-r{
-      border-left:1px solid #dcdfe6;
-
+      border-left:1px solid #449284;
+      border-radius: 0 4px 4px 0;
     }
     .sp-l,.sp-r{
       width: 32px;
       text-align: center;
       line-height: 32px;
       font-size: 13px;
-      background: #f5f7fa;
+      background: #449284 ;
       cursor: pointer;
 
     }
+    .opac{
+      opacity: 0.5;
+    }
+  }
+  .stock-dia{
+    .stock-item{
+      padding-bottom: 20px;
+    }
   }
 </style>