Merge branch 'dev' into test

src/utils/request.js

@@ -19,7 +19,7 @@ service.interceptors.request.use(config => {
   if (getToken() && !isToken) {
     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
-  //config.headers['Authorization'] = 'Bearer ' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dpbk5hbWUiOiIxNTcxMTEzOTg5NSIsInVpZCI6NTI4MjgsImNoYW5uZWxJZCI6MCwiZXhwIjoxNjE5ODMzMzk3LCJpc3MiOiJnaW4tYmxvZyJ9.rh-WXSaFqgqY611Tm5dhba532OYEZvm06vUmgZknoy4'
+  //config.heaoYW5uZWxJZCI6MCwiZXhwIjoxNjE5ODMzMzk3LCJpc3MiOiJnaW4tYmxvZyJ9.rh-WXSaFqgqY611Tm5dhba532OYEZvm06vUmgZknoy4'
   return config
 }, error => {
   console.log("25reject");
@@ -28,33 +28,28 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
+    // debugger
+    let code = res.data.code
+    if(res.data.code !== 0) {
+      code = res.data.code || 200;
+    } else {
+      code = 0;
+    }
+
     // 返回所有数据的统一处理
     const data = res.data;
     // 获取错误信息
-    const message = errorCode[code] || res.data.msg || errorCode['default'];
-    // 200，1意味着成功返回数据
-    if(code === 200 || code === 1) {
-      if( res.data ) {
+    const message = errorCode[code] || res.data.message || errorCode['default'];
+
+    if(code === 1 || code === 200) {
       return res.data
-      } else {
-        if( message ) {
-          Message({message: message, type: 'error'});
-        }else {
-          Message({message: '后台数据出错啦！', type: 'error'});
-        }
-        return Promise.reject('error');
-      }
-    }
-    else if( code === 500) {
+    } else if( code === 500 || code === 0) {
       Message({
         message: message,
         type: 'error'
       })
       return Promise.reject(new Error(message));
-    }
-    else if(code === 401 || code == 99999) {
+    } else if(code === 401 || code == 99999) {
       MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
         confirmButtonText: '重新登录',
         cancelButtonText: '取消',
@@ -64,30 +59,21 @@ service.interceptors.response.use(res => {
           location.reload() // 为了重新实例化vue-router对象 避免bug
         })
       })
-    } else if (code === 500) {
-      Message({
-        message: message,
-        type: 'error'
-      })
-      return Promise.reject(new Error(message))
-    } else if (code !== 200 && code !== 1) {
+    } else {
       Notification.error({
         title: message
       })
       return Promise.reject('error')
       store.dispatch('LogOut').then(() => {
         var ssa = window.location.host;
-        // setTimeout(function (){
+
         if (ssa == 'localhost:1024') {
           window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + ssa
         } else {
           window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + ssa
         }
-        // }, 1000)
         // location.reload() // 为了重新实例化vue-router对象 避免bug
       })
-    } else if (code === 200 || code === 1 ) {
-      return res.data
     }
   }, error => {
     // --- start ---- 开发时候用这段，把错误彻底抛出来 --- start ---
@@ -103,11 +89,8 @@ service.interceptors.response.use(res => {
       message: message,
       type: "error"
     });
-    // console.log(message);
-    // --- end ---- 开发时候用这段，把错误彻底抛出来 --- end ---
 
     // --- start --- 正式上线，隐藏报错信息 ----- start ----
-
     // let ssa = window.location.host;
     // setTimeout(function () {
     //   if (ssa == 'localhost:1024') {
@@ -116,9 +99,7 @@ service.interceptors.response.use(res => {
     //     window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + ssa
     //   }
     // }, 1000);
-
     // --- end  --- 正式上线，隐藏报错信息 ----- end ----
-
     return Promise.reject(error)
   }
 )

src/views/index.vue

@@ -149,11 +149,14 @@ export default {
         let money = []
         let count = []
         let actual = []
+        if(response.data.line && response.data.line.length > 0) {
           response.data.line.forEach(function(item, index) {
             money.unshift(item.price)
             actual.unshift(item.date)
             count.unshift(item.count)
           })
+        }
+
         //最大订单数
         var maxOrderNum=this.lineChartData.maxChannelData;
         for(var n=1;n<count.length;n++){
@@ -185,7 +188,7 @@ export default {
       });
     },
     handleSetLineChartData(type) {
-      console.log("type",type)
+      //console.log("type",type)
       this.lineChartData = lineChartData[type]
     }
   }

src/views/system/goods-wfl/add/components/goodsimg.vue

+<template>
+  <div class="app-container" v-loading="loading">
+    <div style="margin: auto">
+      <p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片，大小在2M以内，支持png、jpg格式，尺寸要求为正方形。</span>
+      </p>
+      <el-upload
+        class="uploadData"
+        action="#"
+        list-type="picture-card"
+        :file-list="ruleFormdialogImageUrlplus"
+        :http-request="uploadGoodsMain"
+        :limit="1"
+        :on-exceed="limitCount1"
+        :before-upload = "beforeUpGoodsMainImg"
+        :before-remove = "beforeRemoveMainImg"
+        :on-remove="removeMainImg"
+        :on-preview="handleMainImgPreview"
+      >
+        <i class="el-icon-plus"></i>
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisibleplus">
+        <img width="100%" :src="dialogImageUrlplus" alt=""/>
+      </el-dialog>
+    </div>
+    <div>
+      <p><span class="tipH4">商品轮播图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片，大小在2M以内，支持png、jpg格式，尺寸要求为正方形。</span>
+      </p>
+      <el-upload
+        class="uploadData"
+        action="#"
+        list-type="picture-card"
+        :file-list="ruleFormdialogImageUrl"
+        :http-request="uploadSectionFile"
+        :limit="5"
+        :on-exceed="limitCount5"
+        :before-upload = "beforeUpCarouselImg"
+        :before-remove="beforeRemoveCarouselImg"
+        :on-remove="removeCarouseImg"
+        :on-preview="handlePictureCardPreview"
+      >
+        <i class="el-icon-plus"></i>
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt=""/>
+      </el-dialog>
+    </div>
+    <div>
+      <el-button style="margin: 20px 0;" @click="resetGoodsImgForm">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {UploadImg} from '@/api/module/goods'
+
+  export default {
+    name: "goodsimg",
+    props: {
+      imgdata: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        loading: false, // 全屏加载
+        picall: {
+          ruleFormdialogImageUrl: [],
+          ruleFormdialogImageUrlplus: [],  //主图
+        },
+        ruleFormdialogImageUrl: [],     //多图
+        dialogImageUrl: "",
+        dialogVisible: false,
+        ruleFormdialogImageUrlplus: [],  //主图
+        dialogImageUrlplus: "",
+        dialogVisibleplus: false,
+      };
+    },
+    components: {},
+    mounted() {
+    },
+    watch: {
+      imgdata(curVal, oldVal) {
+        console.log(84,curVal);
+        if (curVal) {
+          if(curVal.ruleFormdialogImageUrl) {
+            curVal.ruleFormdialogImageUrl.forEach((itemName, nindex) => {
+              this.ruleFormdialogImageUrl.push({'url': itemName.thumbnailM})
+            })
+          }
+          if(this.ruleFormdialogImageUrlplus) {
+            this.ruleFormdialogImageUrlplus.push({'url': curVal.ruleFormdialogImageUrlplus});
+          }
+        }
+      },
+      picall: {
+        handler(val, oldVal) {
+          this.$emit('imgclicks', val)
+        },
+        deep: true
+      },
+      ruleFormdialogImageUrl: {
+        handler(val, oldVal) {
+          this.$set(this.picall, 'ruleFormdialogImageUrl', val)
+        },
+        deep: true
+      },
+      ruleFormdialogImageUrlplus: {
+        handler(val, oldVal) {
+          this.$set(this.picall, 'ruleFormdialogImageUrlplus', val)
+        },
+        deep: true
+      },
+    },
+    methods: {
+      // 商品主图 数量限制
+      limitCount1(files,fileList){
+        this.$message({message: '最多上传1张图片', type: 'warning'});
+      },
+      // 商品主图 大小格式样式校验
+      beforeUpGoodsMainImg(file,fileList){
+        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
+          this.$message({
+            message: '上传图片格式只支持png/png格式',
+            type: "warning"
+          });
+          return false;
+        }
+        let isImgSize = (file.size / 1024 / 1024 ) > 2;
+        if(isImgSize) {
+          this.$message({
+            message: '上传图片大小不能超过2MB',
+            type: "warning"
+          });
+          return false;
+        }
+        // 图片宽高尺寸限制
+        return new Promise(function(resolve, reject){
+          let _URL = window.URL || window.webkitURL;
+          let img = new Image();
+          img.onload = function(){
+            // 图片是否是正方形 宽高比为 1
+            let valid = img.width / img.height === 1;
+            valid ? resolve() : reject();
+          }
+          img.src = _URL.createObjectURL(file);
+        }).then(()=>{
+          return file;
+        }, ()=>{
+          this.$message({
+            message:'商品主图必须为正方形，请重新选择!',
+            type: 'warning'
+          });
+          return Promise.reject();
+        });
+      },
+
+      // 上传商品主图
+      uploadGoodsMain(param) {
+        this.loading = true;
+        this.getBase64(param.file).then((res) => {
+          let result = res.split(",");
+          this.Base64img = result[1];
+          let data = {"image": this.Base64img}
+          UploadImg(data).then(res => {
+            this.loading = false;
+            if (res && res.data.code == 1) {
+              this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl})
+              this.$message({ message:'上传成功',type:'success'});
+            }else {
+              this.ruleFormdialogImageUrlplus = [];
+              this.$message({ message:'上传失败，请重新上传',type:'error'});
+            }
+          })
+        });
+      },
+
+      // 商品主图 删除移除前
+      beforeRemoveMainImg(file,fileList) {
+        if(file.status === "success") {
+          return new Promise((res, rej) => {
+            this.$confirm(`是否删除此图片`, '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              return res();
+            }).catch(() => {
+              this.$message({
+                type: 'success',
+                message: '取消删除!'
+              });
+              return rej();
+            });
+          });
+        }
+      },
+      // 主图删除
+      removeMainImg(file) {
+        if(file.status === "success") {
+          for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
+            if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
+              this.ruleFormdialogImageUrlplus.splice(i,1);
+            }
+          }
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }
+      },
+
+      // 商品主图 预览
+      handleMainImgPreview(file) {
+        this.dialogImageUrlplus = file.url;
+        this.dialogVisibleplus = true;
+      },
+
+      // 轮播图 数量限制
+      limitCount5(files,fileList){
+        this.$message({message: '最多上传5张图片', type: 'warning'});
+      },
+      // 轮播图 大小格式样式校验
+      beforeUpCarouselImg(file) {
+        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
+          this.$message({
+            message: '上传图片格式只支持png/png格式',
+            type: "warning"
+          });
+          return false;
+        }
+
+        let isImgSize = (file.size / 1024 / 1024 ) > 2;
+        if(isImgSize) {
+          this.$message({
+            message: '上传图片大小不能超过2MB',
+            type: "warning"
+          });
+          return false;
+        }
+
+        // 图片宽高尺寸限制
+        return new Promise(function(resolve, reject){
+          let _URL = window.URL || window.webkitURL;
+          let img = new Image();
+          img.onload = function(){
+            // 图片是否是正方形 宽高比为 1
+            let valid = img.width / img.height === 1;
+            valid ? resolve() : reject();
+          }
+          img.src = _URL.createObjectURL(file);
+        }).then(()=>{
+          return file;
+        }, ()=>{
+          this.$message({
+            message:'轮播图图必须为正方形，请重新选择!',
+            type: 'warning'
+          });
+          return Promise.reject();
+        });
+      },
+
+      // 轮播图上传
+      uploadSectionFile(param) {
+        this.loading = true;
+        this.getBase64(param.file).then((res) => {
+          let result = res.split(",");
+          this.Base64img = result[1];
+          let data = {"image": this.Base64img}
+          UploadImg(data).then(res => {
+            if (res && res.data.code == 1) {
+              this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
+              this.$message({ message:'上传成功',type:'success'});
+            }else {
+              this.$message({ message:'上传失败，请重新上传',type:'error'});
+            }
+            this.loading = false;
+          })
+        });
+      },
+
+      // 轮播图 删除前
+      beforeRemoveCarouselImg(file,fileList) {
+        if(file.status === "success") {
+          return new Promise((res, rej) => {
+            this.$confirm(`是否删除此图片`, '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              return res();
+            }).catch(() => {
+              this.$message({
+                type: 'success',
+                message: '取消删除!'
+              });
+              return rej();
+            });
+          });
+        }
+      },
+      // 商品轮播图删除
+      removeCarouseImg(file){
+        if(file.status === "success") {
+          for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) {
+            if(file.uid === this.ruleFormdialogImageUrl[i].uid) {
+              this.ruleFormdialogImageUrl.splice(i,1);
+            }
+          }
+
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }
+      },
+      // 轮播图预览
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+
+      handleinfomationclick() {
+        let pic = {
+          ruleFormdialogImageUrlplus: this.ruleFormdialogImageUrlplus,
+          ruleFormdialogImageUrl: this.ruleFormdialogImageUrl
+        }
+
+        this.$emit('imgclicks', pic)
+      },
+      // 重置
+      resetGoodsImgForm() {
+        this.ruleFormdialogImageUrl = [];
+        this.ruleFormdialogImageUrlplus = [];
+      },
+      // -------------------------通用
+      // 图片转换为 base64
+      getBase64(file) {
+        return new Promise(function (resolve, reject) {
+          let reader = new FileReader();
+          let imgResult = "";
+          reader.readAsDataURL(file);
+          reader.onload = function () {
+            imgResult = reader.result;
+          };
+          reader.onerror = function (error) {
+            reject(error);
+          };
+          reader.onloadend = function () {
+            resolve(imgResult);
+          };
+        });
+      },
+    },
+  };
+</script>
+<style lang="scss" type="text/stylus" scoped>
+  ul,
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .tipH4{
+    font-size: 18px;
+    font-weight : 600;
+  }
+  .tipText {
+    font-size : 14px;
+    color: #c9c9c9;
+  }
+  .tipIcon {
+    color: #e3c300;
+    font-size:16px;
+    padding: 0 8px;
+  }
+
+  .ullist {
+    border: 1px solid #e7eaec;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .el-input-group {
+    width: calc(100% - 60px);
+  }
+  // 上传图片样式重置 start
+  .uploadData {
+    display: inline-block;
+    /deep/ .el-upload--picture-card {
+      width: 100px;
+      height: 100px;
+    }
+
+    /deep/ .el-upload {
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+    }
+
+    /deep/ .el-upload-list--picture-card .el-upload-list__item {
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+    }
+
+    /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+    }
+
+    /deep/ .avatar {
+      width: 100px;
+      height: 100px;
+    }
+  }
+  // 上传图片样式 重置 end
+
+  /deep/.el-upload-list__item .el-icon-close-tip {
+    display :none!important;
+  }
+</style>

src/views/system/goods-wfl/add/components/goodsinfomation.vue

+<template>
+  <div class="app-container">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+      <el-row>
+        <el-col :span="12">
+
+          <el-form-item label="商品名称" prop="goodsName">
+            <el-input v-model="ruleForm.goodsName" style="width:400px;"></el-input>
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="最多允许输入30个汉字（60字符），建议标题内包含与商品相关的关键词">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="商品分类" prop="categoryId">
+            <el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
+                         style="width:400px;"></el-cascader>
+          </el-form-item>
+
+          <el-form-item label="市场原价" prop="scPrice">
+            <el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
+            元
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="指导售价" prop="price">
+            <el-input v-model="ruleForm.price" style="width:400px;"></el-input>
+            元
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="结算价格" prop="jsPrice">
+            <el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
+            元
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="运费模板" prop="freightId">
+            <el-radio-group v-model="ruleForm.resource" @change="freightIdTypeChange">
+              <el-radio label='1'>运费模板</el-radio>
+              <el-radio label='0'>单独运费</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
+            <el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="运费模板" v-if="ruleForm.resource==1">
+            <el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;" @change="selectTm">
+              <el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
+                         style="text-align:center;"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="发货时效" prop="Delayompensate">
+            <el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
+              <el-option label="24小时" value="24" ></el-option>
+              <el-option label="48小时" value="48" ></el-option>
+              <el-option label="72小时" value="72" ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="售后时长" prop="aftersaleTime">
+            <el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
+              <el-option label="7天" value="7" style="text-align:center;"></el-option>
+              <el-option label="15天" value="15" style="text-align:center;"></el-option>
+              <el-option label="30天" value="30" style="text-align:center;"></el-option>
+            </el-select>
+          </el-form-item>
+
+        </el-col>
+        <!-- right -->
+        <el-col :span="12">
+          <el-form-item label="商品库存" prop="goodsNowStock">
+            <el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品产地" prop="producingArea">
+            <el-input v-model="ruleForm.producingArea	" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品重量" prop="weight">
+            <el-input v-model="ruleForm.weight" style="width:400px;"></el-input>
+            克（g）
+          </el-form-item>
+          <el-form-item label="商品单位" prop="unit">
+            <el-input v-model="ruleForm.unit" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品品牌" prop="goodsBrand">
+            <el-select v-model="ruleForm.goodsBrand" style="width:400px;" filterable @change="goodsBrandChange" placeholder="请选择品牌">
+              <el-option
+                v-for="item in brandOtions"
+                :key="item.id"
+                :label="item.brand_cn"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            <el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link>
+          </el-form-item>
+
+          <el-form-item label="三方编号" prop="outGoodsId">
+            <el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0">
+            <el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
+            元
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="商品备注" prop="mark">
+        <el-input type="textarea" v-model="ruleForm.mark"></el-input>
+      </el-form-item>
+      <el-form-item label="服务标签" prop="serviceagsTags">
+        <el-checkbox-group v-model="serviceagsTags">
+          <el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
+        <el-upload
+          class="avatar-uploader2"
+          action="#"
+          auto-upload
+          :http-request="uploadSectionFile"
+          name="file"
+          multiple
+          :show-file-list="false"
+          :file-list="ruleFormdialogImageUrl"
+          :before-upload="beforeUploadEdit">
+        </el-upload>
+         <input class="uploadImg"  style="display: none;" type="file" ref="file" accept="image/*"  @change="fileChange($event)" name="file" multiple id="file">
+        <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor>
+      </el-form-item>
+      <el-form-item style="margin-bottom: 0;">
+        <el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  // 工具栏配置
+  const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+    ['blockquote', 'code-block'],
+    [{'header': 1}, {'header': 2}],               // custom button values
+    [{'list': 'ordered'}, {'list': 'bullet'}],
+    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
+    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
+    [{'direction': 'rtl'}],                         // text direction
+    // [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
+    // [{'header': [1, 2, 3, 4, 5, 6, false]}],
+    // [{'color': []}, {'background': []}],          // dropdown with defaults from theme
+    // [{'font': []}],
+    // [{'align': []}],
+    ['image', 'video'],
+    ['clean']                                         // remove formatting button
+  ]
+  import {
+    GetCategory,
+    GetFreight,
+    UploadImg
+  } from '@/api/module/goods'
+  import {getBrandsInf} from '@/api/module/brand/brand'
+  export default {
+    name: 'goods',
+    props: {
+      infomationdatas: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      let categoryIdCheck = (rule, value, callback) => {
+        if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) {
+          callback(new Error("请选择商品分类"));
+        } else {
+          callback();
+        }
+      };
+      return {
+        tags: [
+          {id: 2, tag: "假一赔十", isdc: false},
+          {id: 3, tag: "7天退换", isdc: false},
+          {id: 4, tag: "不可退还", isdc: false},
+          {id: 5, tag: "厂家直供", isdc: false},
+          {id: 6, tag: "售后无忧", isdc: false}
+        ],
+        propsaddress: {
+          label: 'label',
+          value: 'id',
+        },
+        content: '',
+        // editorOption: {
+        //   placeholder: '编辑内容'
+        // },
+        brandOtions: [],
+        serviceagsTags: [],
+        ruleForm: {
+          outGoodsId: '',
+          value: [],
+          goodsId: 0,
+          goodsName: '',
+          scPrice: '',
+          price: "", //市场价 单位分
+          goodsNowStock: "",
+          producingArea: '',
+          weight: '',
+          unit: '', //单位
+          goodsBrand: '', //品牌
+          resource: '1',
+          categoryId: 0,
+          freightId: 310, //运费模板ID
+          wlPrice: '',
+          pywlPrice: '',
+          jsPrice: '', //协议价
+          Delayompensate: "",
+          aftersaleTime: '7',
+          mark: '',
+          serviceagsTags: [],
+          description: ''
+        },
+        rules: {
+          goodsName: [
+            {required: true, message: '请输入商品名称', trigger: 'blur'},
+            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
+          ],
+          categoryId: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}],
+          price: [{required: true, message: '请填写指导售价', trigger: 'blur'}],
+          jsPrice: [{required: true, message: '请填写结算售价', trigger: 'blur'}],
+          scPrice: [{required: true, message: '请填写市场原价', trigger: 'blur'}],
+          goodsNowStock: [
+            {required: true, message: '商品库存不能为空', trigger: 'blur'},
+            {type: 'number', message: '商品库存要填写数字'},
+          ],
+          unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
+          goodsBrand: [{required: true, message: '商品品牌不能为空', trigger: 'change'}]
+        },
+        // 运费模板列表
+        freightList: [],
+        options1: [],
+/*8888888888888*/
+        index:0,
+        indexall:0,
+        editorOption: {
+          placeholder: '',
+          theme: 'snow',  // or 'bubble'
+          modules: {
+            toolbar: {
+              container: toolbarOptions,  // 工具栏
+              handlers: {
+                'image': function (value) {
+                  if (value) {
+                    // 触发input框选择图片文件
+                    document.querySelector('#file').click()
+                  } else {
+                    this.quill.format('image', false);
+                  }
+                }
+              }
+            }
+          }
+        },
+        quillUpdateImg:false,
+        ruleFormdialogImageUrl:[]
+      }
+    },
+    components: {},
+    watch: {
+      serviceagsTags: {
+        handler(val, oldVal) {
+          this.$set(this.ruleForm, 'serviceagsTags', val)
+        },
+        deep: true
+      },
+      content: {
+        handler(val, oldVal) {
+          this.$set(this.ruleForm, 'description', val)
+        },
+        deep: true
+      },
+      ruleForm: {
+        handler(val, oldVal) {
+          val.description = this.content;
+          val.serviceagsTags = this.serviceagsTags;
+          this.$emit('infomationclick', val);
+        },
+        deep: true
+      },
+      infomationdatas(curVal, oldVal) {
+        console.log("商品信息子组件：",curVal);
+        if (curVal) {
+          this.ruleForm = curVal;
+          if(curVal.freightId == 0) {
+            this.ruleForm.resource = '0';
+          }else {
+            this.ruleForm.resource = '1';
+          }
+          this.content = this.ruleForm.description;
+          // 初始化
+          this.serviceagsTags = [];
+          if(this.ruleForm.serviceagsTags) {
+            this.ruleForm.serviceagsTags.forEach((val) => {
+              if (val) {
+                let nid = parseInt(val);
+                this.serviceagsTags.push(nid);
+              }
+            })
+          }
+        }
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.getCategory();
+      this.getFreight();
+      this.getBrands();
+    },
+    methods: {
+      fileChange(e){
+        const list = this.$refs.file.files;
+        console.log(list)
+        this.indexall = list.length
+        this.uplonds()
+      },
+      uplonds(){
+        this.getBase64(this.$refs.file.files[this.index]).then((res) => {
+          let result = res.split(",");
+          this.Base64img = result[1];
+          let data = {"image": this.Base64img}
+          this.quillUpdateImg = true;
+          UploadImg(data).then(res => {
+            if (res && res.data.code == 1) {
+              this.index++
+              this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
+              this.$message({ message:'上传成功',type:'success'});
+              // 获取富文本组件实例
+              let quill = this.$refs.myTextEditor.quill;
+              let length = quill.getSelection().index;
+              // 插入图片  res.data.url为服务器返回的图片地址
+              quill.insertEmbed(length, 'image', res.data.data.imageUrl)
+              // 调整光标到最后
+              quill.setSelection(length + 1)
+              if(this.index<this.indexall){
+                this.uplonds()
+              }else{
+                this.index = 0
+                 this.quillUpdateImg = false;
+              }
+
+            }else {
+              this.$message({ message:'上传失败，请重新上传',type:'error'});
+               this.quillUpdateImg = false;
+            }
+
+          })
+        });
+      },
+      /*************************/
+      // 上传图片前
+      beforeUploadEdit(res, file) {
+        // 显示loading动画
+        this.quillUpdateImg = true
+      },
+      // 上传图片成功
+      uploadSectionFile(param, file, fileList) {
+
+        this.getBase64(param.file).then((res) => {
+          let result = res.split(",");
+          this.Base64img = result[1];
+          let data = {"image": this.Base64img}
+          this.quillUpdateImg = true;
+          UploadImg(data).then(res => {
+            if (res && res.data.code == 1) {
+              this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
+              this.$message({ message:'上传成功',type:'success'});
+              // 获取富文本组件实例
+              let quill = this.$refs.myTextEditor.quill;
+              let length = quill.getSelection().index;
+              // 插入图片  res.data.url为服务器返回的图片地址
+              quill.insertEmbed(length, 'image', res.data.data.imageUrl)
+              // 调整光标到最后
+              quill.setSelection(length + 1)
+            }else {
+              this.$message({ message:'上传失败，请重新上传',type:'error'});
+            }
+            this.quillUpdateImg = false;
+          })
+        });
+        /*-----*/
+      },
+      // 图片转换为 base64
+      getBase64(file) {
+        return new Promise(function (resolve, reject) {
+          let reader = new FileReader();
+          let imgResult = "";
+          reader.readAsDataURL(file);
+          reader.onload = function () {
+            imgResult = reader.result;
+          };
+          reader.onerror = function (error) {
+            reject(error);
+          };
+          reader.onloadend = function () {
+            resolve(imgResult);
+          };
+        });
+      },
+      /*************************/
+      // 服务标签 中，7天退换和不可退换只能2选一
+      serviceSingleChange(id) {
+        let index4 = this.serviceagsTags.indexOf(4);
+        let index3 = this.serviceagsTags.indexOf(3);
+        if(id == 3) {
+          if( index4 > -1) {
+            this.serviceagsTags.splice(index4,1)
+          }
+        }
+        if(id == 4) {
+          if( index3 > -1) {
+            this.serviceagsTags.splice(index3,1)
+          }
+        }
+      },
+      // 运费模板类型，change事件
+      freightIdTypeChange(val) {
+        // 0  单独运费   1  是运费模板
+        if(val === '1') {
+          if(this.ruleForm.freightId == 0) {
+            this.ruleForm.freightId = "全国包邮通用模板";
+          }
+        }
+      },
+      // 获取品牌信息
+      getBrands() {
+        getBrandsInf().then(res => {
+          if (res.data.data) {
+            this.brandOtions = res.data.data;
+          }
+        });
+      },
+      // 获取 商品分类 信息
+      getCategory() {
+        GetCategory({}).then(response => {
+          this.options1 = response.data.data;
+        });
+      },
+      // 运费模板
+      getFreight() {
+        GetFreight(this.queryParams).then(response => {
+          this.freightList = response.data
+        });
+      },
+      handleChange(value) {
+        this.ruleForm.categoryId = value[value.length - 1]
+      },
+      setTreeData(arr) {
+        //  删除所有 children,以防止多次调用
+        arr.forEach(function (item) {
+          delete item.children;
+        });
+        let map = {}; // 构建map
+        arr.forEach(i => {
+          map[i.third_id] = i; // 构建以third_id为键 当前数据为值
+        });
+        let treeData = [];
+        arr.forEach(child => {
+          const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
+          if (mapItem) { // 存在则表示当前数据不是最顶层数据
+            // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
+            (mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
+          } else { // 不存在则是组顶层数据
+            treeData.push(child);
+          }
+        });
+        return treeData;
+      },
+      onEditorChange({editor, html, text}) {
+        this.content = html;
+        //console.log(315,this.content);
+      },
+      // 商品品牌 向后台传入 name
+      goodsBrandChange(indexId) {
+        let obj = {};
+        obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
+          return item.id === indexId;//筛选出匹配数据
+        });
+        this.ruleForm.goodsBrand = obj.brand_cn;
+      },
+      // 维护品牌
+      toBrand() {
+        this.$router.push({path: '/system/shop/brand'});
+      },
+
+      resetGoodsInfForm(formName) {
+        this.$refs[formName].resetFields();
+        // 详情描述，重置
+        this.content = '';
+        // 服务标签
+        this.serviceagsTags = [];
+        //console.log("重置后的数据：",this.ruleForm);
+      },
+      // 商品信息 子组件 form表单校验
+      validateGoodsInfForm () {
+        let flag = null
+        this.$refs['ruleForm'].validate(valid => {
+          if (valid) {
+            flag = true
+          } else {
+            flag = false
+          }
+        })
+        return flag
+      },
+
+
+      selectTm(indexId) {
+
+      },
+
+    }
+  }
+</script>
+<style scoped>
+  ul, li {
+    list-style: none;
+    /*margin: 0;*/
+    /*padding: 0;*/
+  }
+
+  .el-input-group {
+    width: calc(100% - 60px);
+  }
+</style>

src/views/system/goods-wfl/add/components/goodsinfomationhxz.vue

+<template>
+  <div class="app-container">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+      <el-row>
+        <el-col :span="12">
+
+          <el-form-item label="商品名称" prop="goodsName">
+            <el-input v-model="ruleForm.goodsName" style="width:400px;"></el-input>
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="最多允许输入30个汉字（60字符），建议标题内包含与商品相关的关键词">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="商品分类" prop="categoryId">
+            <el-cascader v-model="ruleForm.categoryId" :props='propsaddress' :options="options1" @change="handleChange"
+                         style="width:400px;"></el-cascader>
+          </el-form-item>
+
+          <el-form-item label="市场原价" prop="scPrice">
+            <el-input v-model="ruleForm.scPrice" style="width:400px;"></el-input>
+            元
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="市场原价起到参考的作用">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="指导售价" prop="price">
+            <el-input v-model="ruleForm.price" style="width:400px;"></el-input>
+            元
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="您建议下游商家售卖的价格">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="结算价格" prop="jsPrice">
+            <el-input v-model="ruleForm.jsPrice" style="width:400px;"></el-input>
+            元
+            <el-popover
+              placement="top-start" width="300" trigger="hover" content="您与云仓平台最终结算的价格">
+              <i style="color: #e3c300;font-size:16px" class="el-icon-question" slot="reference"></i>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item label="运费模板" prop="freightId">
+            <el-radio-group v-model="ruleForm.resource" @change="freightIdTypeChange">
+              <el-radio label='1'>运费模板</el-radio>
+              <el-radio label='0'>单独运费</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="统一运费" v-if="ruleForm.resource==0" prop="wlPrice">
+            <el-input v-model="ruleForm.wlPrice" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="运费模板" v-if="ruleForm.resource==1">
+            <el-select v-model="ruleForm.freightId" placeholder="请选择运费模板" style="width:400px;" @change="selectTm">
+              <el-option v-for="item in freightList" :key="item.Id" :label="item.Name" :value="item.Id"
+                         style="text-align:center;"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="发货时效" prop="Delayompensate">
+            <el-select v-model="ruleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
+              <el-option label="24小时" value="24" ></el-option>
+              <el-option label="48小时" value="48" ></el-option>
+              <el-option label="72小时" value="72" ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="售后时长" prop="aftersaleTime">
+            <el-select v-model="ruleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
+              <el-option label="7天" value="7" style="text-align:center;"></el-option>
+              <el-option label="15天" value="15" style="text-align:center;"></el-option>
+              <el-option label="30天" value="30" style="text-align:center;"></el-option>
+            </el-select>
+          </el-form-item>
+
+        </el-col>
+        <!-- right -->
+        <el-col :span="12">
+          <el-form-item label="商品库存" prop="goodsNowStock">
+            <el-input v-model.number="ruleForm.goodsNowStock" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品产地" prop="producingArea">
+            <el-input v-model="ruleForm.producingArea	" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品重量" prop="weight">
+            <el-input v-model="ruleForm.weight" style="width:400px;"></el-input>
+            克（g）
+          </el-form-item>
+          <el-form-item label="商品单位" prop="unit">
+            <el-input v-model="ruleForm.unit" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品品牌" prop="goodsBrand">
+            <el-select v-model="ruleForm.goodsBrand" style="width:400px;" filterable @change="goodsBrandChange" placeholder="请选择品牌">
+              <el-option
+                v-for="item in brandOtions"
+                :key="item.id"
+                :label="item.brand_cn"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            <el-link type="primary" @click="toBrand" :underline="false">添加品牌</el-link>
+          </el-form-item>
+
+          <el-form-item label="三方编号" prop="outGoodsId">
+            <el-input v-model="ruleForm.outGoodsId" style="width:400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="附加运费" prop="pywlPrice" v-if="ruleForm.resource==0">
+            <el-input v-model="ruleForm.pywlPrice" style="width:400px;" placeholder="偏远地区六省"></el-input>
+            元
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="商品备注" prop="mark">
+        <el-input type="textarea" v-model="ruleForm.mark"></el-input>
+      </el-form-item>
+      <el-form-item label="服务标签" prop="serviceagsTags">
+        <el-checkbox-group v-model="serviceagsTags">
+          <el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
+        <el-upload
+          class="avatar-uploader2"
+          action="#"
+          :http-request="uploadSectionFile"
+          name="file"
+          :show-file-list="false"
+          :file-list="ruleFormdialogImageUrl"
+          :before-upload="beforeUploadEdit">
+        </el-upload>
+        <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor>
+      </el-form-item>
+      <el-form-item style="margin-bottom: 0;">
+        <el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  // 工具栏配置
+  const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+    ['blockquote', 'code-block'],
+    [{'header': 1}, {'header': 2}],               // custom button values
+    [{'list': 'ordered'}, {'list': 'bullet'}],
+    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
+    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
+    [{'direction': 'rtl'}],                         // text direction
+    // [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
+    // [{'header': [1, 2, 3, 4, 5, 6, false]}],
+    // [{'color': []}, {'background': []}],          // dropdown with defaults from theme
+    // [{'font': []}],
+    // [{'align': []}],
+    ['image', 'video'],
+    ['clean']                                         // remove formatting button
+  ]
+  import {
+    GetCategory,
+    GetFreight,
+    UploadImg
+  } from '@/api/module/goods'
+  import {getBrandsInf} from '@/api/module/brand/brand'
+  export default {
+    name: 'goods',
+    props: {
+      infomationdatas: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      let categoryIdCheck = (rule, value, callback) => {
+        if (this.ruleForm.categoryId == 0 || !this.ruleForm.categoryId) {
+          callback(new Error("请选择商品分类"));
+        } else {
+          callback();
+        }
+      };
+      return {
+        tags: [
+          {id: 2, tag: "假一赔十", isdc: false},
+          {id: 3, tag: "7天退换", isdc: false},
+          {id: 4, tag: "不可退还", isdc: false},
+          {id: 5, tag: "厂家直供", isdc: false},
+          {id: 6, tag: "售后无忧", isdc: false}
+        ],
+        propsaddress: {
+          label: 'label',
+          value: 'id',
+        },
+        content: '',
+        // editorOption: {
+        //   placeholder: '编辑内容'
+        // },
+        brandOtions: [],
+        serviceagsTags: [],
+        ruleForm: {
+          outGoodsId: '',
+          value: [],
+          goodsId: 0,
+          goodsName: '',
+          scPrice: '',
+          price: "", //市场价 单位分
+          goodsNowStock: "",
+          producingArea: '',
+          weight: '',
+          unit: '', //单位
+          goodsBrand: '', //品牌
+          resource: '1',
+          categoryId: 0,
+          freightId: 310, //运费模板ID
+          wlPrice: '',
+          pywlPrice: '',
+          jsPrice: '', //协议价
+          Delayompensate: "",
+          aftersaleTime: '7',
+          mark: '',
+          serviceagsTags: [],
+          description: ''
+        },
+        rules: {
+          goodsName: [
+            {required: true, message: '请输入商品名称', trigger: 'blur'},
+            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
+          ],
+          categoryId: [{required: true, message: '请选择商品分类', validator: categoryIdCheck}],
+          price: [{required: true, message: '请填写指导售价', trigger: 'blur'}],
+          jsPrice: [{required: true, message: '请填写结算售价', trigger: 'blur'}],
+          scPrice: [{required: true, message: '请填写市场原价', trigger: 'blur'}],
+          goodsNowStock: [
+            {required: true, message: '商品库存不能为空', trigger: 'blur'},
+            {type: 'number', message: '商品库存要填写数字'},
+          ],
+          unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
+          goodsBrand: [{required: true, message: '商品品牌不能为空', trigger: 'change'}]
+        },
+        // 运费模板列表
+        freightList: [],
+        options1: [],
+/*8888888888888*/
+        editorOption: {
+          placeholder: '',
+          theme: 'snow',  // or 'bubble'
+          modules: {
+            toolbar: {
+              container: toolbarOptions,  // 工具栏
+              handlers: {
+                'image': function (value) {
+                  if (value) {
+                    // 触发input框选择图片文件
+                    document.querySelector('.avatar-uploader2 input').click()
+                  } else {
+                    this.quill.format('image', false);
+                  }
+                }
+              }
+            }
+          }
+        },
+        quillUpdateImg:false,
+        ruleFormdialogImageUrl:[]
+      }
+    },
+    components: {},
+    watch: {
+      serviceagsTags: {
+        handler(val, oldVal) {
+          this.$set(this.ruleForm, 'serviceagsTags', val)
+        },
+        deep: true
+      },
+      content: {
+        handler(val, oldVal) {
+          this.$set(this.ruleForm, 'description', val)
+        },
+        deep: true
+      },
+      ruleForm: {
+        handler(val, oldVal) {
+          val.description = this.content;
+          val.serviceagsTags = this.serviceagsTags;
+          this.$emit('infomationclick', val);
+        },
+        deep: true
+      },
+      infomationdatas(curVal, oldVal) {
+        console.log("商品信息子组件：",curVal);
+        if (curVal) {
+          this.ruleForm = curVal;
+          if(curVal.freightId == 0) {
+            this.ruleForm.resource = '0';
+          }else {
+            this.ruleForm.resource = '1';
+          }
+          this.content = this.ruleForm.description;
+          // 初始化
+          this.serviceagsTags = [];
+          if(this.ruleForm.serviceagsTags) {
+            this.ruleForm.serviceagsTags.forEach((val) => {
+              if (val) {
+                let nid = parseInt(val);
+                this.serviceagsTags.push(nid);
+              }
+            })
+          }
+        }
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.getCategory();
+      this.getFreight();
+      this.getBrands();
+    },
+    methods: {
+      /*************************/
+      // 上传图片前
+      beforeUploadEdit(res, file) {
+        // 显示loading动画
+        this.quillUpdateImg = true
+      },
+      // 上传图片成功
+      uploadSectionFile(param) {
+        this.quillUpdateImg = true;
+        this.getBase64(param.file).then((res) => {
+          let result = res.split(",");
+          this.Base64img = result[1];
+          let data = {"image": this.Base64img}
+          UploadImg(data).then(res => {
+            if (res && res.data.code == 1) {
+              this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
+              this.$message({ message:'上传成功',type:'success'});
+              // 获取富文本组件实例
+              let quill = this.$refs.myTextEditor.quill;
+              let length = quill.getSelection().index;
+              // 插入图片  res.data.url为服务器返回的图片地址
+              quill.insertEmbed(length, 'image', res.data.data.imageUrl)
+              // 调整光标到最后
+              quill.setSelection(length + 1)
+            }else {
+              this.$message({ message:'上传失败，请重新上传',type:'error'});
+            }
+            this.quillUpdateImg = false;
+          })
+        });
+        /*-----*/
+      },
+      // 图片转换为 base64
+      getBase64(file) {
+        return new Promise(function (resolve, reject) {
+          let reader = new FileReader();
+          let imgResult = "";
+          reader.readAsDataURL(file);
+          reader.onload = function () {
+            imgResult = reader.result;
+          };
+          reader.onerror = function (error) {
+            reject(error);
+          };
+          reader.onloadend = function () {
+            resolve(imgResult);
+          };
+        });
+      },
+      /*************************/
+      // 服务标签 中，7天退换和不可退换只能2选一
+      serviceSingleChange(id) {
+        let index4 = this.serviceagsTags.indexOf(4);
+        let index3 = this.serviceagsTags.indexOf(3);
+        if(id == 3) {
+          if( index4 > -1) {
+            this.serviceagsTags.splice(index4,1)
+          }
+        }
+        if(id == 4) {
+          if( index3 > -1) {
+            this.serviceagsTags.splice(index3,1)
+          }
+        }
+      },
+      // 运费模板类型，change事件
+      freightIdTypeChange(val) {
+        // 0  单独运费   1  是运费模板
+        if(val === '1') {
+          if(this.ruleForm.freightId == 0) {
+            this.ruleForm.freightId = "全国包邮通用模板";
+          }
+        }
+      },
+      // 获取品牌信息
+      getBrands() {
+        getBrandsInf().then(res => {
+          if (res.data.data) {
+            this.brandOtions = res.data.data;
+          }
+        });
+      },
+      // 获取 商品分类 信息
+      getCategory() {
+        GetCategory({}).then(response => {
+          this.options1 = response.data.data;
+        });
+      },
+      // 运费模板
+      getFreight() {
+        GetFreight(this.queryParams).then(response => {
+          this.freightList = response.data
+        });
+      },
+      handleChange(value) {
+        this.ruleForm.categoryId = value[value.length - 1]
+      },
+      setTreeData(arr) {
+        //  删除所有 children,以防止多次调用
+        arr.forEach(function (item) {
+          delete item.children;
+        });
+        let map = {}; // 构建map
+        arr.forEach(i => {
+          map[i.third_id] = i; // 构建以third_id为键 当前数据为值
+        });
+        let treeData = [];
+        arr.forEach(child => {
+          const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中
+          if (mapItem) { // 存在则表示当前数据不是最顶层数据
+            // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
+            (mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
+          } else { // 不存在则是组顶层数据
+            treeData.push(child);
+          }
+        });
+        return treeData;
+      },
+      onEditorChange({editor, html, text}) {
+        this.content = html;
+        //console.log(315,this.content);
+      },
+      // 商品品牌 向后台传入 name
+      goodsBrandChange(indexId) {
+        let obj = {};
+        obj = this.brandOtions.find((item)=>{//这里的userList就是上面遍历的数据源
+          return item.id === indexId;//筛选出匹配数据
+        });
+        this.ruleForm.goodsBrand = obj.brand_cn;
+      },
+      // 维护品牌
+      toBrand() {
+        this.$router.push({path: '/system/shop/brand'});
+      },
+
+      resetGoodsInfForm(formName) {
+        this.$refs[formName].resetFields();
+        // 详情描述，重置
+        this.content = '';
+        // 服务标签
+        this.serviceagsTags = [];
+        //console.log("重置后的数据：",this.ruleForm);
+      },
+      // 商品信息 子组件 form表单校验
+      validateGoodsInfForm () {
+        let flag = null
+        this.$refs['ruleForm'].validate(valid => {
+          if (valid) {
+            flag = true
+          } else {
+            flag = false
+          }
+        })
+        return flag
+      },
+
+
+      selectTm(indexId) {
+
+      },
+
+    }
+  }
+</script>
+<style scoped>
+  ul, li {
+    list-style: none;
+    /*margin: 0;*/
+    /*padding: 0;*/
+  }
+
+  .el-input-group {
+    width: calc(100% - 60px);
+  }
+</style>

src/views/system/goods-wfl/add/components/goodsparameter.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+        <el-col :span="4" >
+            <div class="grid-content bg-purple">
+                <p>参数</p>
+                <p style="font-size:12px;">根据商品特性设置相符的商品参数</p>
+            </div>
+        </el-col>
+        <el-col :span="20" style="border-left:2px solid #fff;">
+          <div  class='tablessst'>
+            <p class="col_p">参数名称</p>
+            <p class='col_pr'>参数值 拖动行可进行排序</p>
+          </div>
+           <div v-for="(item,index) in goodsPram" :key="index" v-dragging="{ list: goodsPram, item: item, group: 'knowTab' }" class='tablesss'>
+            <p class="col_p"><el-input v-model="item.title" placeholder="如尺码,颜色等" style="width:calc(100% - 20px)"></el-input></p>
+            <p class='col_pr'>
+              <el-input v-model="item.value" placeholder="根据参数进行设置, 如 S/M/L/XL/XXl, 或红/黄/蓝"  style="width:calc(100% - 200px)"></el-input>
+               <el-button icon="el-icon-close" style="margin-left:10px;" @click="deletearrinput(index)"></el-button>
+               <el-button style="margin-left:10px;">拖动排序</el-button>
+            </p>
+          </div>
+
+          <el-button @click="addguild()"  icon="el-icon-plus" style="margin-top:20px;"> 添加参数</el-button>
+        </el-col>
+    </el-row>
+
+<!--    <el-button type="primary" @click="handleinfomationclick('ruleForm')">下一步</el-button>-->
+    <el-button >重置</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'goodsmeter',
+    props: {
+    parameterdata: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+     goodsPram:[{
+       id:0,
+       title:'',
+       value:''
+     }]
+
+
+    }
+  },
+     components:{
+    'hello':{
+        render:function(createElement){
+
+          return createElement(
+            'h'+this.level,
+            this.$se
+          )
+
+        }
+    }
+  },
+  mounted() {
+    // this.driver = new Driver()
+     this.$dragging.$on('dragged', (value) => {
+      //因为我这在排序的时候不需要做处理，所以空着就行
+      // debugger
+    })
+
+  },
+  watch:{
+    goodsPram:{
+      handler(val, oldVal){
+            this.$emit('parameterclicks',val)
+        },
+        deep:true
+    },
+  parameterdata(curVal,oldVal){
+  if(curVal){
+    this.goodsPram= curVal
+  }
+  }
+  },
+  methods: {
+     handleinfomationclick(formName) {
+            this.$emit('parameterclicks',this.goodsPram)
+       },
+     addguild(){
+      let arrchild={
+            id:0,
+            title:'',
+            value:''
+          }
+      this.$set(this.goodsPram, this.goodsPram.length,arrchild)
+    },
+      deletearrinput(index){
+
+        this.goodsPram.splice(index,1)
+    },
+
+
+  }
+}
+</script>
+<style scoped>
+.app-container{
+    width:100%;
+    height:100%;
+    background: #f8f8f8;
+}
+ul,li{
+  list-style: none;
+  margin: 0;
+  padding:0;
+}
+.ullist{
+    border: 1px solid #e7eaec;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+.el-input-group{
+  width:calc(100% - 60px);
+}
+.col_p{
+  width:30%;
+  float:left;
+}
+.col_pr{
+  width:70%;
+  float:left;
+}
+.tablesss{
+  height:70px;
+  border-bottom: 1px solid #e6ebf5;
+}
+.tablessst{
+  height:50px;
+  border-bottom: 1px solid #e6ebf5;
+}
+</style>

src/views/system/goods-wfl/add/components/guide.vue

+<template>
+  <div class="app-container">
+    <div>
+      <!-- <div slot="header" class="clearfix">
+        <span>商品规格</span>
+        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+    </div> -->
+      <el-checkbox v-model="checked">启用商品规格</el-checkbox>
+      <p style='font-size:14px;'>启用商品规格后，商品的价格及库存以商品规格为准</p>
+      <p style='font-size:14px;'>
+        操作顺序：添加新规格 (<span style="color: red">必填</span>) -&gt;
+        添加规格项 (<span style="color: red">必填</span>) -&gt; 生成产品规格表
+        -&gt; 修改数值 -&gt; 保存商品规格
+        <span style="color: red">注意：商品价格金额必须小于指导价格</span>
+      </p>
+      <ul class="tab_list" v-if="checked">
+        <li
+          class="ullist"
+          v-for="(item, index) in shopType"
+          :key="index"
+          v-dragging="{ list: shopType, item: item, group: 'knowTab' }"
+        >
+          <div class="tab_list_left">
+            <div style="margin-top: 15px">
+              <el-input placeholder="请输入内容" v-model="item.specName" >
+                <template slot="append">
+                  <el-button
+                    type="primary"
+                    class="addbtn"
+                    @click="addlistguied(index)"
+                    ><i class="el-icon-plus"></i>添加规格项</el-button
+                  >
+                </template>
+              </el-input>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                class="eldelbtn"
+                @click="deletearrinput(index)"
+              ></el-button>
+            </div>
+            <el-row :gutter="20" class="tab_list childlist">
+              <el-col
+                :span="4"
+                v-for="(items, indexs) in item.specValue"
+                :key="indexs"
+                v-dragging="{
+                  list: item.specValue,
+                  item: items,
+                  group: 'itemchild',
+                }"
+                style="margin: 5px 0; min-width: 205px"
+              >
+                <el-input
+                  placeholder=""
+                  v-model="items.value"
+                  @input="guidInput"
+                  style="
+                    width: 100%;
+                    min-width: 200px;
+                    padding: 0;
+                    text-align: center;
+                  "
+                >
+                  <template slot="append">
+                    <!-- <img :src="nopeimg" alt="" style="width:29px;height:29px;display:inline-block;"/> -->
+                    <!--  -->
+                    <el-button
+                      type="primary"
+                      class="dfbtn"
+                      icon="el-icon-delete"
+                    >
+                      <input
+                        style="
+                          display: none;
+                          width: 29px;
+                          height: 29px;
+                          position: absolute;
+                          left: 0;
+                          top: 0;
+                        "
+                        @change="inputimg()"
+                        accept="image/*"
+                        :id="imagesid(index, indexs)"
+                        type="file"
+                      />
+                      <img
+                        v-if="!items.img"
+                        :src="nopeimg"
+                        alt=""
+                        style="
+                          width: 25px;
+                          height: 25px;
+                          position: absolute;
+                          left: 2px;
+                          top: 2px;
+                        "
+                        @click="updateimg(index, indexs)"
+                      />
+                      <img
+                        v-if="items.img"
+                        :src="items.img"
+                        alt=""
+                        style="
+                          width: 33px;
+                          height: 33px;
+                          position: absolute;
+                          left: 0;
+                          top: 0;
+                        "
+                      />
+                    </el-button>
+                    <el-button
+                      type="primary"
+                      icon="el-icon-delete"
+                      @click="deleteinput(index, indexs)"
+                    ></el-button>
+                    <el-button type="primary" icon="el-icon-rank"></el-button>
+                  </template>
+                </el-input>
+              </el-col>
+            </el-row>
+          </div>
+        </li>
+      </ul>
+      <el-button
+        type="primary"
+        v-if="checked"
+        icon="el-icon-search"
+        @click="addguild()"
+        >添加新规格</el-button
+      >
+      <el-button
+        type="primary"
+        v-if="checked"
+        icon="el-icon-search"
+        @click="processing()"
+        >生成产品规格表</el-button
+      >
+
+      <div class="table_box" v-if="checked">
+      <!--  <div class="mark">
+          操作顺序：添加新规格 (<span style="color: red">必填</span>) -&gt;
+          添加规格项 (<span style="color: red">必填</span>) -&gt; 生成产品规格表
+          -&gt; 修改数值 -&gt; 保存商品规格
+          <span style="color: red">注意：商品价格金额必须小于指导价格</span>
+        </div> -->
+        <!-- 我记得有个scope属性的 -->
+        <el-table
+          :data="tableData7"
+          :span-method="objectSpanMethod1"
+          border
+          style="width: 100%; margin-top: 20px"
+        >
+          <el-table-column
+            header-align="center"
+            align="center"
+            v-for="(item, index) in tablearr"
+            :key="index"
+            :prop="item"
+            :label="item"
+          ></el-table-column>
+
+          <el-table-column prop="moany" label="市场价" align="center">
+            <template slot="header" slot-scope="scope">
+              <p class="table_p">市场价</p>
+              <el-input placeholder="" v-model="scPrice"
+                ><el-button
+                  slot="append"
+                  @click="scPriceall"
+                  icon="el-icon-bottom"
+                ></el-button
+              ></el-input>
+            </template>
+            <template slot-scope="scope" align="center">
+              <el-input placeholder="" v-model="scope.row.scPrice"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="moany" label="指导价" align="center">
+            <template slot="header" slot-scope="scope">
+              <p class="table_p">指导价</p>
+              <el-input placeholder="" v-model="price"
+                ><el-button
+                  slot="append"
+                  @click="priceall"
+                  icon="el-icon-bottom"
+                ></el-button
+              ></el-input>
+            </template>
+            <template slot-scope="scope" align="center">
+              <el-input placeholder="" v-model="scope.row.price"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="moany" label="结算价" align="center">
+            <template slot="header" slot-scope="scope">
+              <p class="table_p">结算价</p>
+              <el-input placeholder="" v-model="jsPrice"
+                ><el-button
+                  slot="append"
+                  @click="jsPriceall"
+                  icon="el-icon-bottom"
+                ></el-button
+              ></el-input>
+            </template>
+            <template slot-scope="scope" align="center">
+              <el-input placeholder="" v-model="scope.row.jsPrice"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="kucun" label="库存" align="center">
+            <template slot="header" slot-scope="scope">
+              <p class="table_p">库存</p>
+              <el-input placeholder="" v-model="goodsNowStock"
+                ><el-button
+                  slot="append"
+                  @click="goodsNowStockall"
+                  icon="el-icon-bottom"
+                ></el-button
+              ></el-input>
+            </template>
+            <template slot-scope="scope" align="center">
+              <el-input
+                placeholder=""
+                v-model="scope.row.goodsNowStock"
+              ></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="moany" label="重量（克）" align="center">
+            <template slot="header" slot-scope="scope">
+              <p class="table_p">重量（克）</p>
+              <el-input placeholder="" v-model="weight"
+                ><el-button
+                  slot="append"
+                  @click="weightall"
+                  icon="el-icon-bottom"
+                ></el-button
+              ></el-input>
+            </template>
+            <template slot-scope="scope" align="center">
+              <el-input placeholder="" v-model="scope.row.weight"></el-input>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-button style="margin-top: 20px;">重 置</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import descartes from "@/utils/dikaerjs.js";
+// import { onlodaimg } from "@/api/date";
+ import { UploadImg } from '@/api/module/goods'
+export default {
+  name: "goods",
+   props: {
+    guidedata: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      arrtdall:[],
+      nopeimg: require("@/assets/image/nopic100.jpg"),
+      checked: false,
+      type: "",
+      imgname: "",
+      indeximg: "",
+      indexsimg: "",
+      shopType: [],
+      shopTypes: [],
+      newList: [],
+      newData: [],
+      tableData7: [], // 规格列表表格
+      goodsNowStock: "",
+      jsPrice: "", //协议价
+      price: "", //指导价
+      scPrice: "", //市场价
+      weight: "",
+      spanArr: [],
+      pos: "",
+      spanArr1: [],
+      pos1: "",
+      tablearr: [],
+      spanArrS: {
+        spanArr0: [],
+        spanArr1: [],
+      },
+      posS: {
+        pos0: "",
+        pos1: "",
+      },
+    };
+  },
+  components: {
+    hello: {
+      render: function (createElement) {
+        return createElement("h" + this.level, this.$se);
+      },
+    },
+  },
+  mounted() {
+    // this.driver = new Driver()
+    this.$dragging.$on("dragged", (value) => {
+      //因为我这在排序的时候不需要做处理，所以空着就行
+    });
+  },
+  watch:{
+    tableData7:{
+      handler(val, oldVal){
+        let arrlist = JSON.stringify(val);
+        let listarr = JSON.parse(arrlist);
+        this.processguidelist(listarr);
+        this.$emit('guideclicks',this.arrtdall,this.shopType)
+
+            // this.$emit('parameterclicks',val)
+        },
+        deep:true
+    },
+    // 父组件传给 子组件的  值
+    guidedata(curVal,oldVal){
+
+      if(curVal){
+        if(curVal.goodsSpec){
+          this.checked = true;
+        }else {
+          this.checked = false;
+        }
+
+        if(curVal.specName && curVal.specName.length > 0) {
+          this.shopType = curVal.specName;
+          this.shopType.forEach((item, index) => {
+            this.shopType[index]['specValue'] = []
+            if(curVal.specValue) {
+              curVal.specValue.forEach((itemName, nindex) => {
+                if(itemName.specNameId == item.id){
+                  this.shopType[index]['specValue'].push(itemName)
+                }
+              })
+            }
+          })
+
+          this.clgoodspace(curVal);
+          //笛卡尔积值
+          this.tableData7 = curVal.specOption;
+        }
+
+
+
+
+
+
+
+
+
+
+      }
+    },
+  },
+  methods: {
+    guidInput(val){
+      this.$forceUpdate()
+    },
+    // 处理回显数据
+    clgoodspace(goodsspace){
+      this.shopTypes = JSON.parse(JSON.stringify(this.shopType));
+      let specName = goodsspace.specName;
+      let specValue = goodsspace.specValue;
+      let specOption = goodsspace.specOption;
+
+      if(specName) {
+        specName.forEach((item)=>{
+          this.tablearr.push(item.specName)
+          specValue.forEach((itemchild)=>{
+            if(item.id ==itemchild.specNameId){
+              itemchild['specName'] =item.specName
+            }
+          })
+        })
+      }
+
+      if(specOption) {
+        specOption.forEach(item=>{
+          let goodsarr = item.specValueIds.split('_')
+          goodsarr.forEach(itemchild=>{
+            specValue.forEach(itemgoodschild=>{
+              if(itemchild == itemgoodschild.id){
+                item[itemgoodschild.specName] = itemgoodschild.value
+              }
+            })
+
+          })
+        })
+      }
+
+      this.tableData7 = specOption;
+      this.getSpanArr(this.tableData7);
+    },
+
+    // 不能删
+    descartes,
+
+    processguidelist(obj) {
+      let arrtdall = []
+      if(obj) {
+        obj.forEach((item, index) => {
+          let objtd = {}
+          let arrtd = []
+          for(let key in item){
+            if(key=='goodsNowStock'||key=='jsPrice'||key=='price'||key=='scPrice'||key=='wlPrice'||key=='pywlPrice'||key=='weight'){
+              objtd[key] = item[key]
+            }else{
+              arrtd.push(item[key])
+              objtd['specValues'] = arrtd
+            }
+          }
+          arrtdall.push(objtd)
+
+        });
+      }
+
+      this.arrtdall = arrtdall
+    },
+    deletearrinput(index) {
+      this.shopType.splice(index, 1);
+    },
+    jsPriceall() {
+      this.tableData7.forEach((element, index) => {
+        this.tableData7[index].jsPrice = this.jsPrice;
+      });
+    },
+    priceall() {
+      this.tableData7.forEach((element, index) => {
+        this.tableData7[index].price = this.price;
+      });
+    },
+    scPriceall() {
+      this.tableData7.forEach((element, index) => {
+        this.tableData7[index].scPrice = this.scPrice;
+      });
+    },
+    // 一键 库存
+    goodsNowStockall() {
+      this.tableData7.forEach((element, index) => {
+        this.tableData7[index].goodsNowStock = this.goodsNowStock;
+      });
+    },
+    // 一键 重量
+    weightall() {
+      this.tableData7.forEach((element, index) => {
+        this.tableData7[index].weight = this.weight;
+      });
+    },
+    //删除规格项
+    deleteinput(index, indexs) {
+      this.shopType[index].specValue.splice(indexs, 1);
+      this.$forceUpdate()
+    },
+    //添加规格项
+    addlistguied(index) {
+      let childlist = {
+        value: "",
+        img: "",
+      };
+
+      this.$set(this.shopType[index].specValue,this.shopType[index].specValue.length,childlist);
+      this.$forceUpdate()
+    },
+    // 添加新规格
+    addguild() {
+      let arrchild = {
+        specName: "",
+        score: "",
+        specValue: [],
+      };
+      this.$set(this.shopType, this.shopType.length, arrchild);
+    },
+    guide() {
+      this.driver.defineSteps(steps);
+      this.driver.start();
+    },
+    imagesid(index, indexs) {
+      return index.toString() + indexs.toString() + "ss";
+    },
+    updateimg(index, indexs) {
+      let id = index.toString() + indexs.toString() + "ss";
+      this.imgname = id;
+      this.indeximg = index;
+      this.indexsimg = indexs;
+      document.getElementById(id).value = "";
+      document.getElementById(id).click();
+    },
+    inputimg() {
+      let file = document.getElementById(this.imgname).files[0];
+      //  let formdata=new FormData()
+      if (file.size > 1024 * 1024 * 3) {
+        return false;
+      } else {
+        //  formdata.append("file", file);
+      }
+      // var image = new Image();
+      // image.src = window.URL.createObjectURL(file);
+      // console.log(image);
+      // image.onload = () => {
+      //   console.log(this.getBase64Img(image));
+      //   //this.getBase64Img(image)即为转换为base64格式的图片形式
+      //   let date={
+      //     imgData:this.getBase64Img(image)
+      //   }
+      //   onlodaimg(date).then(res=>{
+      //   })
+      // };
+       this.getBase64(file).then((res) => {
+         var result = res.split(",");
+         let Base64img = result[1];
+         let data = {"image": Base64img}
+         UploadImg(data).then((res) => {
+           if (res.data.code == 1) {
+             this.shopType[this.indeximg].specValue[this.indexsimg].img =
+               res.data.data.imageUrl
+                this.$forceUpdate()
+           }
+         });
+
+
+       });
+
+
+
+    },
+    getBase64(file) {
+            return new Promise(function(resolve, reject) {
+              let reader = new FileReader();
+              let imgResult = "";
+              reader.readAsDataURL(file);
+              reader.onload = function() {
+                imgResult = reader.result;
+              };
+              reader.onerror = function(error) {
+                reject(error);
+              };
+              reader.onloadend = function() {
+                resolve(imgResult);
+              };
+            });
+          },
+    getBase64Img(img) {
+      var canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      var ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
+      var dataURL = canvas.toDataURL("image/" + ext);
+      return dataURL;
+    },
+    //返回所属规格名字
+    retName(index) {
+      // if (index == 1) {
+      //   if (this.shopType.length > 1) {
+      //     return this.shopType[0].name;
+      //   }
+      // } else if (index == 2) {
+      //   if (this.shopType.length > 1) {
+      //     return this.shopType[1].name;
+      //   }
+      // } else if (index == 3) {
+      //   if (this.shopType.length > 1) {
+      //     return this.shopType[2].name;
+      //   }
+      // } else {
+      //   return "";
+      // }
+    },
+    //处理数据
+    processing() {
+      this.newData = [];
+      this.tablearr = [];
+      this.shopTypes = JSON.parse(JSON.stringify(this.shopType));
+
+      if(this.shopTypes && this.shopTypes.length > 0) {
+        for (let i = 0; i < this.shopTypes.length; i++) {
+          var newlist = [];
+          for (
+            let index = 0;
+            index < this.shopTypes[i].specValue.length;
+            index++
+          ) {
+            newlist.push(this.shopTypes[i].specValue[index].value);
+          }
+          this.newData.push(newlist);
+        }
+      }
+      this.getList();
+    },
+    //转换数据
+    getList() {
+      this.tableData7 = [];
+      this.newList = this.descartes(this.newData);
+
+      if(this.shopTypes && this.shopTypes.length > 0) {
+        for (let i = 0; i < this.shopTypes.length; i++) {
+          this.tablearr.push(this.shopTypes[i].specName);
+        }
+      }
+
+      for (let index = 0; index < this.newList.length; index++) {
+        var listobj = {};
+        for (let i = 0; i < this.shopTypes.length; i++) {
+          if(this.shopTypes.length>1){
+            listobj[this.shopTypes[i].specName] = this.newList[index][i];
+          }
+          if(this.shopTypes.length==1){
+            listobj[this.shopTypes[i].specName] = this.newList[index];
+          }
+          listobj["goodsNowStock"] = "";
+          listobj["jsPrice"] = "";
+          listobj["price"] = "";
+          listobj["scPrice"] = "";
+          listobj["weight"] = "";
+        }
+        this.tableData7.push(listobj);
+      }
+      this.getSpanArr(this.tableData7);
+      let arrlist = JSON.stringify(this.tableData7); //可以将json对象转换成json对符串
+      let listarr = JSON.parse(arrlist); //可以将json字符串转换成json对象
+      this.processguidelist(listarr);
+    },
+    //计算位置的方法
+    getSpanArr(data) {
+      this.spanArrS = {};
+      this.spanArr = [];
+      this.pos = "";
+      this.spanArr1 = [];
+      this.pos1 = "";
+
+      if(this.shopTypes && this.shopTypes.length > 0) {
+        for (let s = 0; s < this.shopTypes.length; s++) {
+          this.spanArrS["spanArr" + s] = [];
+          for (var i = 0; i < data.length; i++) {
+            if (i === 0) {
+              this.spanArrS["spanArr" + s].push(1);
+              this.posS["pos" + s] = 0;
+            } else {
+              // 判断当前元素与上一个元素是否相同
+              if (
+                data[i][this.shopTypes[s].specName] ==
+                data[i - 1][this.shopTypes[s].specName]
+              ) {
+                this.spanArrS["spanArr" + s][this.posS["pos" + s]] += 1;
+                this.spanArrS["spanArr" + s].push(0);
+              } else {
+                this.spanArrS["spanArr" + s].push(1);
+                this.posS["pos" + s] = i;
+              }
+            }
+          }
+        }
+      }
+
+      // for (var i = 0; i < data.length; i++) {
+      //   if (i === 0) {
+      //     this.spanArr1.push(1);
+      //     this.pos1 = 0;
+      //   } else {
+      //     //如果笛卡尔积一直递增下去的话 这是一个很蠢的方法 由于我的要求层数是已知的 这里偷懒了 不然应该用for循环
+      //     if (data[i].cailiao === data[i - 1].cailiao) {
+      //       this.spanArr1[this.pos1] += 1;
+      //       this.spanArr1.push(0);
+      //     } else {
+      //       this.spanArr1.push(1);
+      //       this.pos1 = i;
+      //     }
+      //   }
+      // }
+    },
+    // 合并行数
+    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+      if(this.shopTypes && this.shopTypes.length > 0) {
+        for (let s = 0; s < this.shopTypes.length; s++) {
+          if (columnIndex == s) {
+            const _row = this.spanArrS["spanArr" + s][rowIndex];
+            const _col = _row > 0 ? 1 : 0;
+            return {
+              rowspan: _row,
+              colspan: _col,
+            };
+            // columnIndex === 1 找到第二列，合并他的列数
+          }
+        }
+      }
+
+
+      // columnIndex === 0 找到第一列，实现合并随机出现的行数
+      // if (columnIndex === 0) {
+      //   const _row = this.spanArr[rowIndex];
+      //   const _col = _row > 0 ? 1 : 0;
+      //   return {
+      //     rowspan: _row,
+      //     colspan: _col
+      //   };
+      //   // columnIndex === 1 找到第二列，合并他的列数
+      // } else if (columnIndex === 1) {
+      //   const _row = this.spanArr1[rowIndex];
+      //   const _col = _row > 0 ? 1 : 0;
+      //   return {
+      //     rowspan: _row,
+      //     colspan: _col
+      //   };
+      // }
+    },
+  },
+};
+</script>
+<style scoped>
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ullist {
+  border: 1px solid #e7eaec;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.el-input-group {
+  width: calc(100% - 60px);
+}
+.table_box .el-input-group {
+  width: 100%;
+}
+.addbtn {
+  background-color: #5bc0de !important;
+  color: #fff !important;
+  border-radius: 0 4px 4px 0;
+}
+.eldelbtn {
+  height: 30px;
+  padding: 5px 20px !important;
+  margin-left: -3px;
+}
+.childlist {
+  margin-top: 10px;
+}
+.childlist .el-input-group--append .el-input__inner {
+  padding: 0;
+}
+.el-button--medium {
+  padding: 10px 12px;
+}
+.dfbtn {
+  position: relative;
+}
+.table_p {
+  margin: 0;
+  text-align: center;
+}
+.mark {
+  background-color: #fcf8e3;
+  padding: 5px;
+  /* font-size: 12px; */
+  margin-top: 20px;
+}
+</style>

src/views/system/goods-wfl/add/index.vue

+<template>
+  <div class="app-container goods" v-loading="loading">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="font-size: 18px; float:left;margin-top: 4px;">{{title}}</span>
+        <el-button style="float: right; margin: 0 10px 0 20px;" size="mini" type="info" plain @click="submitForm(0)">保 存 草 稿
+        </el-button>
+        <el-button style="float: right;" size="mini" type="primary" @click="submitForm(1)">提 交 上 架
+        </el-button>
+      </div>
+      <el-tabs type="border-card">
+        <el-tab-pane label="商品信息">
+          <Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
+        </el-tab-pane>
+        <el-tab-pane label="商品图片">
+          <Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
+        </el-tab-pane>
+        <el-tab-pane label="商品规格">
+          <Guide :guidedata='guidedate' @guideclicks='guideclick'/>
+        </el-tab-pane>
+        <el-tab-pane label="商品参数">
+          <Goodsparameter :parameterdata='parameterdata' @parameterclicks='parameterclick'/>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import {getGoods,GetFreight} from '@/api/module/goods'
+  import descartes from "@/utils/dikaerjs.js";
+  import Guide from './components/guide'
+  import Goodsinfomation from './components/goodsinfomation'
+  import Goodsimg from './components/goodsimg'
+  import Goodsparameter from './components/goodsparameter'
+  import {addGoods} from '@/api/module/goods'
+  export default {
+    name: 'goods',
+    data() {
+      return {
+        infomationdata: {},
+        parameterdata: {},
+        goodsOnsale: 0,
+        loading: false,
+        applyStatus: '',
+        title: "添加新商品",
+        imgdate: {},
+        guidedate: {},
+        parameterdate: {},
+        params: {
+          applyStatus: 0
+        },
+        expressTemplateIdList: [], //'原来绑定的运费模板已经被删除',
+        expressTemplateList: [],
+      }
+    },
+    components: {
+      Guide,
+      Goodsinfomation,
+      Goodsimg,
+      Goodsparameter
+    },
+    created() {
+      this.getFreight();//运费模板数据，回显匹配专用
+      this.getParams();
+    },
+    methods: {
+      // 运费模板
+      getFreight() {
+        GetFreight(this.queryParams).then(res => {
+          this.expressTemplateList = res.data;
+          this.expressTemplateIdList = this.expressTemplateList.filter(function(item) {
+            return item.Id;
+          })
+        });
+      },
+      getParams() {
+        let goodsId = this.$route.query.goodsId;
+        if (goodsId > 0) {
+          this.title = "编辑商品信息";
+          this.genGoodsInfo(goodsId);
+        }
+      },
+      // 获取商品详情
+      genGoodsInfo(goodsId) {
+        this.loading = true;
+        const goods_id = goodsId;
+        getGoods(goods_id).then(res => {
+          console.log(9999,res);
+          if(res.code === 1 && res.data) {
+            this.goodsOnsale = res.data.isOnsale;
+            // 对发货时效单独处理
+            if(res.data.Delayompensate == 0) {
+              res.data.Delayompensate = '';
+            }
+            //res.data.freightId 返回的值类型有  0（string/number）|| ‘全国包邮通用模板’（string）|| 310(number)
+            let resourceType = '1'; // 为了单元框正常显示，先给一个默认值，// 字符串 ‘0’,代表  数据为单独运费
+            let serviceagsTagsVal = [];
+            if(res.data.ServiceagsTags) {
+              serviceagsTagsVal = JSON.parse(res.data.ServiceagsTags);
+            }
+
+            // 库存，后台返回字段更换，提前处理 specOption
+            if( res.data.goodsSpecs.specOption && res.data.goodsSpecs.specOption.length > 0) {
+              res.data.goodsSpecs.specOption.forEach(function(item){
+                if(item.stock) {
+                  item['goodsNowStock'] = item.stock;
+                }
+              });
+            }
+
+            this.infomationdata = {
+              goodsId: res.data.goodsId,
+              goodsName: res.data.goodsName,
+              categoryId: res.data.categoryId,
+              scPrice: res.data.scPrice / 100,
+              price: res.data.price / 100,
+              jsPrice: res.data.jsPrice / 100,
+              goodsNowStock: res.data.goodsNowStock,
+              producingArea: res.data.producingArea,
+              weight: res.data.weight,
+              unit: res.data.unit,
+              goodsBrand: res.data.goodsBrand,
+              wlPrice: res.data.wlPrice,
+              pywlPrice: res.data.pywlPrice,
+              resource: resourceType,
+              Delayompensate: res.data.Delayompensate,
+              aftersaleTime: res.data.aftersaleTime,
+              mark: res.data.mark,
+              serviceagsTags: serviceagsTagsVal,
+              description: res.data.description,
+              freightId: res.data.freightId,
+              outGoodsId: res.data.outGoodsId,
+            };
+            this.guidedate = res.data.goodsSpecs;
+            this.guidedate["goodsSpec"] = res.data.goodsSpec;
+            this.parameterdata = res.data.Params ? res.data.Params : {};
+            this.imgdate = {
+              "ruleFormdialogImageUrl": res.data.image,
+              "ruleFormdialogImageUrlplus": res.data.defaultImage
+            };
+          }else if(res.code === 0) {
+            if(res.msg) {
+              this.$message({type:'error',message: res.msg});
+            }else {
+              this.$message({type:'error',message: '数据出错啦'});
+            }
+          }
+
+          this.loading = false;
+        });
+      },
+      info() {
+        addgoods(this.listQuery).then(res => {
+          this.list = res.data.items
+          this.total = res.data.total
+          this.listLoading = false
+        })
+      },
+      //商品信息
+      infomationclick(type) {
+        Object.assign(this.params, type);
+      },
+      //商品图片
+      imgclick(type) {
+        let img = [];
+        type.ruleFormdialogImageUrl.forEach((res, index) => {
+          img.push(res.url)
+        })
+        this.params["imgs"] = img;
+        this.params["defaultImg"] = ''
+        if(type.ruleFormdialogImageUrlplus.length > 0) {
+          this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
+        }
+      },
+      //规格
+      guideclick(type, specsGroup) {
+        this.params["specs"] = type;
+        this.params["specsGroup"] = specsGroup;
+        // 浮点处理
+        if(this.params.specs && this.params.specs.length > 0) {
+          for(let i = 0; i < this.params.specs.length; i++) {
+            if(this.params.specs[i].jsPrice ) {
+              this.params.specs[i].jsPrice = parseInt(this.params.specs[i].jsPrice * 100);
+            }
+            if(this.params.specs[i].price ) {
+              this.params.specs[i].price = parseInt(this.params.specs[i].price * 100);
+            }
+            if(this.params.specs[i].scPrice ) {
+              this.params.specs[i].scPrice = parseInt(this.params.specs[i].scPrice * 100);
+            }
+          }
+        }
+      },
+      //参数
+      parameterclick(type) {
+        this.params["goodsPram"] = type;
+      },
+
+      /** 确定按钮 */
+      submitForm(status) {
+        this.params.applyStatus = 0;
+        this.params.isOnsale = this.goodsOnsale;
+
+        if(status === 1) {
+          this.params.applyStatus = 1;
+        }
+
+        if(this.params.resource == 0) {
+          this.params.freightId = 0;
+        }else if(this.params.resource == 1) {
+          this.params.wlPrice = 0;
+          this.params.pywlPrice = 0;
+          // 运费模板字段单独处理,兼容老数据
+          if(this.params.freightId === '全国包邮通用模板' || this.params.freightId == 0) {
+            this.params.freightId = 310;
+          }
+        }
+
+        console.log("gogogogog",this.params);
+        //return ;
+
+        // 商品信息  表单字段校验
+        let isGoodInfMsg = this.$refs['childGoodsInf'].validateGoodsInfForm();
+        // 商品图片  校验
+        let isGoodSImgMsg = 'defaultImg' in this.params;
+
+        if(!isGoodInfMsg) {
+          if(!('goodsName' in this.params)) {
+            this.$message({type: 'error',message: '[ 商品信息 ] 未填写完整！'});
+            return;
+          }
+
+          if('goodsName' in this.params) {
+            if(this.params.goodsName === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
+              return;
+            }
+
+            if(this.params.categoryId === 0) {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品分类未填写！'});
+              return;
+            }
+
+            if(this.params.scPrice === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 市场原价未填写！'});
+              return;
+            }
+
+            if(this.params.price === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 指导售价未填写！'});
+              return;
+            }
+
+            if(this.params.jsPrice === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 结算价格未填写！'});
+              return;
+            }
+
+            if(this.params.goodsNowStock === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品库存未填写！'});
+              return;
+            }
+
+            if(this.params.unit === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品单位未填写！'});
+              return;
+            }
+
+            if(this.params.goodsBrand === '') {
+              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
+              return;
+            }
+          }
+        }
+
+        if(!isGoodSImgMsg) {
+          this.$message({type: 'error',message: '[ 商品图片 ] 未上传图片！'});
+          return;
+        }else {
+          if('defaultImg' in this.params) {
+            if(this.params.defaultImg === '') {
+              this.$message({type: 'error',message: '[ 商品图片 ] 中 商品主图未上传！'});
+              return;
+            }
+            if(this.params.imgs.length === 0) {
+              this.$message({type: 'error',message: '[ 商品图片 ] 中 商品轮播图未上传！'});
+              return;
+            }
+          }
+        }
+        this.loading = true;
+        addGoods(this.params).then(res => {
+          if (res.code === 1) {
+            this.$message({
+              message: res.msg,
+              type: 'success'
+            });
+            this.$emit('closeDialog',false);
+            if (this.goodsOnsale) {
+              var redUrl = '/system/goods/onsale';
+            } else {
+              var redUrl = '/system/goods/offsale';
+            }
+            this.$router.push({
+              path: redUrl
+            });
+          } else if(res.code === 0) {
+            if(res.msg) {
+              this.$message.error(res.msg);
+            }else {
+              this.$message.error("操作失败！");
+            }
+
+          }
+          this.loading = false;
+        });
+
+      },
+      //------  通用方法  -----
+      verifiesForm(type,fieldName,obj) {
+        // 先判断类型，字符串类型type === text,  下拉形式字段 select
+        if(type === 'text') {
+          // 没有这个属性，肯定没有填写，抛出提示
+          if(!(fieldName in obj)) {
+            return 1;
+          }
+        }
+
+        if(type === 'select') {
+
+        }
+
+        // 如果有这个属性，那么进一步判断，这个必填值是否填写
+        // if(fieldName in obj && !obj[fieldName]) {
+        //   return 2
+        // }
+
+      }
+    }
+  }
+</script>
+<style scoped lang="scss" type="text/stylus">
+  ul, li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ullist {
+    border: 1px solid #e7eaec;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .el-input-group {
+    width: calc(100% - 60px);
+  }
+
+  .addbtn {
+    background-color: #5bc0de !important;
+    color: #fff !important;
+    border-radius: 0 4px 4px 0;
+  }
+
+  /deep/.el-card__body {
+    height: calc(100% - 50px);
+    overflow: hidden;
+  }
+
+  .el-tabs {
+    height: 100%;
+    overflow: hidden;
+
+    /deep/.el-tabs__content {
+      height: calc(100% - 50px);
+      overflow-y: scroll;
+    }
+  }
+
+  .eldelbtn {
+    height: 30px;
+    padding: 5px 20px !important;
+    margin-left: -3px;
+  }
+
+  .childlist {
+    margin-top: 10px;
+  }
+
+  .el-button--medium {
+    padding: 10px 12px;
+  }
+
+  .dfbtn {
+    position: relative;
+  }
+
+  .goods .el-tabs__content {
+    height: 100%;
+    overflow-y: scroll;
+  }
+</style>

src/views/system/goods-wfl/offsale/index.vue

+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-form :inline="true" class="queryFormInline">
+          <el-row :span="24" type="flex" align="middle" justify="space-between">
+            <el-col :span="18">
+              <p style="font-size: 18px; float:left;">下架商品列表</p>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item style="float: right">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  size="mini"
+                  @click="handleAdd"
+                >新增
+                </el-button>
+                <el-button
+                  type="success"
+                  icon="el-icon-edit"
+                  size="mini"
+                  @click="handleOnsale"
+                >申请上架
+                </el-button>
+                <el-button
+                  type="danger"
+                  icon="el-icon-delete"
+                  size="mini"
+                  :disabled="multiple"
+                  @click="handleDelete"
+                >删除
+                </el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+         <el-form-item label="商品ID" prop="goods_id">
+           <el-input
+             v-model="queryParams.goods_id"
+             placeholder="请输入商品ID"
+             clearable
+             size="small"
+             @keyup.enter.native="handleQuery"
+           />
+         </el-form-item>
+           <el-form-item>
+               <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+             </el-form-item>
+       </el-form> -->
+      <el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="商品主图" align="center" width="100" prop="defaultImage">
+          <template slot-scope="scope">
+            <el-image
+              style="width: 60px; height: 50px"
+              :src="scope.row.defaultImage"
+            ></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品ID" align="center" prop="goodsId"/>
+        <el-table-column label="商品名称" align="center" prop="goodsName"/>
+        <el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice"/>
+        <el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice"/>
+        <el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice"/>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleUpdate(scope.row)"
+            >编辑
+            </el-button>
+            <el-divider direction="vertical"></el-divider>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDelete(scope.row)"
+            >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+      <!-- 添加或修改goods对话框 -->
+      <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+        <IndexBtn :option="form" @closeDialog="closeDialog"/>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+<script>
+  import IndexBtn from '../add'
+  import {listGoods, getGoods, delGoods, addGoods, updateGoods, OffSaleList, Onsale} from '@/api/module/goods'
+
+  export default {
+    name: "goods",
+    data() {
+      return {
+        fullHeight: 0,
+        tableHeight: 0,
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // goods表格数据
+        goodsList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          isOnsale: 0
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          goods_name: [
+            {required: true, message: "商品名称不能为空", trigger: "blur"}
+          ],
+        }
+      };
+    },
+    components: {
+      IndexBtn
+    },
+    created() {
+      this.getList();
+      this.$nextTick(() => {
+        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
+      })
+
+    },
+    watch: {
+      fullHeight(val) {
+        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
+        this.tableHeight = val - formHeight - 100;
+      }
+    },
+    methods: {
+      //格式化价格
+      formatePrice(row, s, value, i) {
+        var nm = 0
+        var money = value
+        if (money > 0) {
+          nm = money / 100
+        }
+        return nm
+      },
+      /** 查询goods列表 */
+      getList() {
+        this.loading = true;
+        listGoods(this.queryParams).then(res => {
+          if(res.code === 1 && res.data) {
+            this.goodsList = res.data.list;
+            this.total = res.data.count;
+          }else if(res.code === 0) {
+            if(res.msg) {
+              this.$message({type: 'error',message: res.msg});
+            }else {
+              this.$message({type: 'error',message: '数据出错啦！'});
+            }
+          }
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {};
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.goodsId)
+        this.single = true
+        this.multiple = !selection.length
+      },
+      /** 上架操作 */
+      handleOnsale(row) {
+        const rowIds = row.goodsId || this.ids;
+        let params = {"ids": rowIds, "status": 1};
+
+        if(!rowIds || rowIds.length === 0) {
+          this.$message({message: '请先选择要上架的商品数据', type: 'warning'});
+          return;
+        }
+        Onsale(params).then(res => {
+          this.msgSuccess("成功申请" + res.length + "个商品");
+        });
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.$router.push({
+          path: '/system/goods/add'
+        });
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const goods_id = row.goodsId
+        this.$router.push({
+          path: '/system/goods/add', query: {goodsId: goods_id}
+
+        });
+        // getGoods(goods_id).then(response => {
+        //   this.form = response.data;
+        //   this.open = true;
+        //   this.title = "修改goods";
+        // });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.goods_id != null) {
+              updateGoods(this.form).then(response => {
+                if (response.code === 0) {
+                  this.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            } else {
+              addGoods(this.form).then(response => {
+                if (response.code === 0) {
+                  this.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+
+        const goods_ids = row.goodsId || this.ids;
+        this.$confirm('是否确认删除商品ID为"' + goods_ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function () {
+          return delGoods(goods_ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(function () {
+        });
+      },
+      // 子组件关闭父组件对话框
+      closeDialog(params) {
+        this.open = params;
+      }
+    } //methods结束
+  };
+</script>
+<style scoped>
+  .app-container {
+    height: 100%;
+  }
+
+  .box-card {
+    height: 100%;
+  }
+
+  .box-card /deep/ .el-card__body {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .el-table {
+    height: calc(100% - 120px);
+  }
+
+  /deep/ .el-dialog {
+    height: 90%;
+    overflow: hidden;
+  }
+
+  /deep/ .el-dialog__body {
+    height: 100%;
+    //height: calc(100% - 20px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+
+
+</style>

src/views/system/goods-wfl/onsale/index.vue

+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+          <el-form :model="queryParams" ref="queryForm" :inline="true" class="queryFormInline">
+            <el-row :span="24" type="flex" align="middle" justify="space-between">
+              <el-col :span="20">
+                <el-form-item label="商品Id" prop="goodsId">
+                  <el-input
+                    size="small"
+                    placeholder="请输入商品Id"
+                    v-model="queryParams.goodsId"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="商品名称" prop="goodsName">
+                  <el-input
+                    size="small"
+                    placeholder="请输入商品名称"
+                    v-model="queryParams.goodsName"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item>
+                  <el-button
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQuery"
+                  >搜索</el-button>
+                  <el-button
+                    size="mini"
+                    icon="el-icon-refresh"
+                    @click="resetQuery('queryForm')"
+                  >重置</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item style="float: right">
+                  <el-button
+                    type="primary"
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleAdd"
+                  >新增
+                  </el-button>
+                  <el-button
+                    type="success"
+                    icon=""
+                    size="mini"
+                    @click="handleOffGoods"
+                  >商品下架
+                  </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+      </div>
+
+      <el-table v-loading="loading" :data="goodsList" :height="tableHeight" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="商品主图" align="center" width="100" prop="defaultImage">
+          <template slot-scope="scope">
+            <el-image
+              style="width: 60px; height: 50px"
+              :src="scope.row.defaultImage"
+            ></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品ID" align="center" prop="goodsId"/>
+        <el-table-column label="商品名称" align="center" prop="goodsName"/>
+        <el-table-column label="协议价" align="center" :formatter="formatePrice" prop="jsPrice"/>
+        <el-table-column label="物流运费" align="center" :formatter="formatePrice" prop="wlPrice"/>
+        <el-table-column label="市场售价" align="center" :formatter="formatePrice" prop="scPrice"/>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleOffGoods(scope.row)"
+            >下架
+            </el-button>
+            <el-divider direction="vertical"></el-divider>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleUpdate(scope.row)"
+            >编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+      <!-- 添加或修改goods对话框 -->
+      <el-dialog :title="title" :visible.sync="open" :modal-append-to-body="false" width="90%"
+                 style="height:90%;overflow:hidden;" append-to-body>
+        <IndexBtn :option="form"/>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+<script>
+  import IndexBtn from '../add'
+  import {listGoods, getGoods, delGoods, addGoods, updateGoods, Onsale} from '@/api/module/goods'
+
+  export default {
+    name: "goods",
+    data() {
+      return {
+        fullHeight: 0,
+        tableHeight: 0,
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // goods表格数据
+        goodsList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          isOnsale: 1,
+          goodsId: '',
+          goodsName: ''
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          goods_name: [
+            {required: true, message: "商品名称不能为空", trigger: "blur"}
+          ],
+        }
+      };
+    },
+    components: {
+      IndexBtn
+    },
+    created() {
+      this.getList();
+      this.$nextTick(() => {
+        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
+      })
+    },
+    watch: {
+      fullHeight(val) {
+        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
+        this.tableHeight = val - formHeight - 100;
+      }
+    },
+    methods: {
+      /*商品下架*/
+      handleOffGoods(row) {
+        const rowIds = row.goodsId || this.ids;
+        let params = {"ids": rowIds, "status": 0};
+        if (!rowIds || rowIds.length === 0) {
+          this.$message({message: '请先选择要下架的商品数据', type: 'warning'});
+          return;
+        }
+        this.$confirm('是否确认下架商品ID为"' + rowIds + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function () {
+          return Onsale(params);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("下架成功");
+        }).catch(() => {
+
+        });
+      },
+      //格式化价格
+      formatePrice(row, s, value, i) {
+        var nm = 0
+        var money = value
+        if (money > 0) {
+          nm = money / 100
+        }
+        return nm
+      },
+      /** 查询goods列表 */
+      getList() {
+        this.loading = true;
+        listGoods(this.queryParams).then(res => {
+          if(res.code === 1 && res.data) {
+            this.goodsList = res.data.list;
+            this.total = res.data.count;
+          }else if(res.code === 0) {
+            if(res.msg) {
+              this.$message({type: 'error',message: res.msg});
+            }else {
+              this.$message({type: 'error',message: '数据出错啦！'});
+            }
+          }
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {};
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.goodsId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 下架操作 */
+      handleOnsale() {
+        Onsale({"ids": this.ids, "status": 0}).then(response => {
+          this.msgSuccess("成功申请" + response.data.length + "个商品");
+        });
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.$router.push({
+          path: '/system/goods/add'
+        });
+      },
+      /** 详情按钮操作 */
+      handleUpdate(row) {
+        const goods_id = row.goodsId
+        this.$router.push({
+          path: '/system/goods/add', query: {goodsId: goods_id}
+
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.goodsId != null) {
+              updateGoods(this.form).then(response => {
+                if (response.code === 0) {
+                  this.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            } else {
+              addGoods(this.form).then(response => {
+                if (response.code === 0) {
+                  this.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                }
+              });
+            }
+          }
+        });
+      },
+      // 重置
+      resetQuery(form) {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+    } //methods结束
+  };
+</script>
+<style scoped>
+  .app-container {
+    height: 100%;
+  }
+
+  /deep/ .el-dialog {
+    height: 100%;
+  }
+
+  /deep/ .el-dialog__body {
+    height: 80%;
+    overflow-y: scroll;
+  }
+
+  .box-card {
+    height: 100%;
+  }
+
+  .box-card /deep/ .el-card__body {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .el-table {
+    height: calc(100% - 120px);
+  }
+</style>

src/views/system/settings/setpsd.vue

@@ -417,12 +417,12 @@
             changePayPassword(this.payForm).then(res => {
               if(res.code === 1) {
                 this.$message({type:"success",message: '支付密码修改成功'});
+                this.clearAccountCodeDown();
+                this.isPay = false;
               }else {
                 let msg = res.msg || '修改失败';
                 this.$message({type:"error",message: msg});
               }
-              this.clearAccountCodeDown();
-              this.isPay = false;
             });
           }
         });