阶梯价格编辑

src/views/goods/components/price-edit.vue

@@ -0,0 +1,301 @@
+<template>
+  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="600px">
+    <el-form ref="dataForm" :model="formData" size="mini" label-width="120px">
+      <el-form-item label="商品名称：">
+        <div class="text" v-text="productDetail.productName" />
+      </el-form-item>
+      <el-form-item label="供应商名称：">
+        <div class="text" v-text="productDetail.shopName" />
+      </el-form-item>
+      <el-form-item label="商品分类：" prop="classifyID" :rules="{required:true, message:'请选择分类', trigger:'change'}">
+        <el-select v-model="formData.classifyID" placeholder="商品分类" :label="productDetail.productClassifyName" size="small" class="filter-item" :value="productDetail.classifyID*1">
+          <template v-for="item in classify">
+            <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
+          </template>
+        </el-select>
+      </el-form-item>
+      <div class="line">
+        <el-form-item label="市场价：" prop="normalPrice" :rules="{required:true, validator:checkPrice, type:'float', trigger:'blur'}">
+          <el-input v-model.number="formData.normalPrice" size="small" />
+        </el-form-item>
+        <el-form-item label="成本价：" prop="costPrice" :rules="{required:true, validator:checkPrice, type:'float', trigger:'blur'}">
+          <el-input v-model.number="formData.costPrice" size="small" />
+        </el-form-item>
+      </div>
+
+      <el-form-item label="售价：" prop="ladderPriceFlag" :rules="{required:true, message:'请选择是否使用阶梯价格', trigger:'change'}">
+        <el-radio-group v-model="formData.ladderPriceFlag" size="small">
+          <el-radio :label="0">不使用阶梯价格</el-radio>
+          <el-radio :label="1">使用阶梯价格</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <div v-if="formData.ladderPriceFlag === 0" class="single">
+        <el-form-item label="" prop="retailPrice" :rules="{validator:checkPrice, type:'float', trigger:'blur'}">
+          <el-input v-model.number="formData.retailPrice" size="small" />
+        </el-form-item>
+        <el-form-item label="起订量：" prop="minBuyNumber" :rules="{required:true, validator:checkNumber, type:'number', trigger:'blur'}">
+          <el-input v-model.number="formData.minBuyNumber" size="small" />
+        </el-form-item>
+      </div>
+      <div v-if="formData.ladderPriceFlag === 1" class="multiple">
+        <div class="group">
+          <div v-for="(item, index) in formData.ladderPriceList" :key="'ladderPrice'+index" class="line">
+            <el-form-item label="起订量" label-width="60px" style="width:130px" :prop="'ladderPriceList.' + index + '.buyNum'" :rules="{validator:checkMultiNumber, type:'number', trigger:'blur'}">
+              <el-input v-model.number="item.buyNum" size="small" />
+            </el-form-item>
+            <el-form-item label="及以上，单价为" label-width="120px" style="width:210px" :prop="'ladderPriceList.' + index + '.buyPrice'" :rules="{validator:checkMultiPrice, type:'float', trigger:'blur'}">
+              <el-input v-model="item.buyPrice" size="small" />
+            </el-form-item>
+          </div>
+        </div>
+        <el-form-item label-width="20px" style="width:80px">
+          <el-button v-if="ladderSize === 2" type="text" @click="addLadder">添加</el-button>
+          <el-button v-if="ladderSize === 3" type="text" style="color:red" @click="removeLadder">删除</el-button>
+        </el-form-item>
+      </div>
+
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+      <el-button type="primary" @click="updateGoods"> 确认 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveGoods } from '@/api/goods'
+export default {
+  props: {
+    dialogTitle: {
+      type: String,
+      default: '编辑'
+    },
+    isVisible: {
+      type: Boolean,
+      default: false
+    },
+    productDetail: {
+      type: Object,
+      default: () => {}
+    },
+    classify: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data: function() {
+    return {
+      postData: null,
+      formData: {
+        id: '',
+        classifyID: 0,
+        normalPrice: '',
+        costPrice: '',
+        ladderPriceFlag: 0,
+        retailPrice: '',
+        minBuyNumber: '',
+        ladderPriceList: []
+      },
+      ladderSize: 2,
+      ladderPrice: {
+        productId: 0, // bigint(11) DEFAULT NULL COMMENT '商品id,具体对应cm_mall_organize_products表的ID',
+        ladderNum: 3, // bigint(11) DEFAULT NULL COMMENT '第几阶梯(最多可设置3阶梯)',
+        buyNum: '', // bigint(11) DEFAULT NULL COMMENT '购买数量（起订量）',
+        buyPrice: '' // decimal(10,2) DEFAULT NULL COMMENT '购买价格（对应起订量单价）',
+      },
+      singlePrice: {
+        price: '',
+        number: ''
+      },
+      multiplePrice: [],
+      rules: {
+        classifyID: [{ required: true, message: '请选择分类', trigger: 'change' }],
+        normalPrice: [{ required: true, message: '市场价不能为空', trigger: 'blur' }],
+        costPrice: [{ required: true, message: '成本价不能为空', trigger: 'blur' }],
+        ladderPriceFlag: [{ required: true, message: '请选择是否使用阶梯价格', trigger: 'change' }],
+        retailPrice: [{ required: true, message: '售价不能为空', trigger: 'blur' }],
+        minBuyNumber: [{ required: true, message: '起订量不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    dialogFormVisible: {
+      get() {
+        return this.isVisible
+      },
+      set(val) {
+        this.$emit('update:isVisible', val)
+      }
+    }
+  },
+  watch: {
+    productDetail: function(val) {
+      this.postData = JSON.parse(JSON.stringify(val))
+
+      this.formData.id = val.id
+      this.formData.classifyID = val.classifyID * 1
+      this.formData.normalPrice = val.normalPrice
+      this.formData.costPrice = val.costPrice
+      this.formData.ladderPriceFlag = val.ladderPriceFlag * 1
+      this.formData.retailPrice = val.retailPrice
+      this.formData.minBuyNumber = val.minBuyNumber
+      // 初始化阶梯价格
+      this.formData.ladderPriceList = []
+      this.ladderPrice.productId = val.id
+      if (!val.ladderPriceList || val.ladderPriceList.length === 0) {
+        for (let i = 1; i <= 2; i++) {
+          this.ladderPrice.ladderNum = i
+          this.formData.ladderPriceList.push(JSON.parse(JSON.stringify(this.ladderPrice)))
+        }
+      } else {
+        val.ladderPriceList.forEach(item => {
+          if (item.delFlag * 1 === 0) {
+            this.formData.ladderPriceList.push(JSON.parse(JSON.stringify(item)))
+          }
+        })
+      }
+      this.ladderSize = this.formData.ladderPriceList.length
+    }
+  },
+  methods: {
+    clearValidate() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    addLadder() {
+      this.ladderPrice.productId = this.formData.id
+      this.ladderPrice.ladderNum = 3
+      this.formData.ladderPriceList.push(JSON.parse(JSON.stringify(this.ladderPrice)))
+      this.ladderSize = 3
+    },
+    removeLadder() {
+      this.formData.ladderPriceList.splice(2, 1)
+      this.ladderSize = 2
+    },
+    updateGoods() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.formData.ladderPriceFlag === 0) {
+            this.postData.retailPrice = this.formData.retailPrice
+            this.postData.minBuyNumber = this.formData.minBuyNumber
+          } else {
+            this.postData.ladderPriceFlag = this.formData.ladderPriceFlag
+            if (!this.postData.ladderPriceList || this.postData.ladderPriceList.length === 0) {
+              this.postData.ladderPriceList = this.formData.ladderPriceList
+            } else {
+              for (let i = 0; i < this.postData.ladderPriceList.length; i++) {
+                if (this.formData.ladderPriceList[i]) {
+                  this.postData.ladderPriceList[i].buyNum = this.formData.ladderPriceList[i].buyNum
+                  this.postData.ladderPriceList[i].buyPrice = this.formData.ladderPriceList[i].buyPrice
+                  this.postData.ladderPriceList[i].delFlag = 0
+                } else {
+                  this.postData.ladderPriceList[i].delFlag = 1
+                }
+              }
+            }
+          }
+          saveGoods(this.postData).then(response => {
+            this.$message({ message: response.msg, type: 'success', center: true })
+            this.$parent.fetchData()
+            this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    /** 自定义校验规则 */
+    checkNumber(rule, value, callback) {
+      if (!value) {
+        return callback(new Error('数量不能为空'))
+      }
+      this.$nextTick(() => {
+        !Number.isInteger(value) ? callback(new Error('请输入数字值')) : callback()
+      })
+    },
+    checkPrice(rule, value, callback) {
+      if (!value) {
+        return callback(new Error('金额不能为空'))
+      }
+      this.$nextTick(() => {
+        if (!Number.parseFloat(value * 1)) {
+          callback(new Error('请输入正确的金额'))
+        } else {
+          if (('' + value).split('.').length > 1 && ('' + value).split('.')[1].length > 2) {
+            return callback(new Error('最多保留两位小数'))
+          } else {
+            callback()
+          }
+        }
+      })
+    },
+    checkMultiNumber(rule, value, callback) {
+      if (!value) {
+        return callback(new Error('数量不能为空'))
+      }
+      this.$nextTick(() => {
+        if (!Number.isInteger(value)) {
+          callback(new Error('请输入数字值'))
+        } else {
+          if ((rule.fullField.indexOf('2') > 0 && this.formData.ladderPriceList[2].buyNum <= this.formData.ladderPriceList[1].buyNum) ||
+            (rule.fullField.indexOf('1') > 0 && this.formData.ladderPriceList[1].buyNum <= this.formData.ladderPriceList[0].buyNum)) {
+            return callback(new Error('起订量必须大于上一个阶梯'))
+          } else {
+            callback()
+          }
+        }
+      })
+    },
+    checkMultiPrice(rule, value, callback) {
+      if (!value) {
+        return callback(new Error('金额不能为空'))
+      }
+      this.$nextTick(() => {
+        if (!Number.parseFloat(value * 1)) {
+          callback(new Error('请输入正确的金额'))
+        } else {
+          if (('' + value).split('.').length > 1 && ('' + value).split('.')[1].length > 2) {
+            return callback(new Error('最多保留两位小数'))
+          } else if ((rule.fullField.indexOf('2') > 0 && this.formData.ladderPriceList[2].buyPrice * 1 > this.formData.ladderPriceList[1].buyPrice * 1) ||
+            (rule.fullField.indexOf('1') > 0 && this.formData.ladderPriceList[1].buyPrice * 1 > this.formData.ladderPriceList[0].buyPrice * 1)) {
+            return callback(new Error('单价不能高于上一个阶梯'))
+          } else {
+            callback()
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+  .group label{
+    white-space: nowrap;
+    font-weight: normal;
+  }
+</style>
+<style scoped>
+.text{
+  line-height: 20px;
+  padding: 4px 0 0;
+}
+.line{
+  display: flex;
+}
+.single{
+  width:280px;
+}
+.multiple{
+  display: flex;
+  padding-left: 120px;
+  justify-content: left;
+  align-items: flex-end;
+}
+.group{
+  white-space: nowrap;
+  font-weight: normal;
+}
+.group button{
+  padding:0 15px;
+}
+</style>

src/views/goods/list-commonly.vue

@@ -68,8 +68,22 @@
       <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <el-table-column label="市场价" align="center" prop="normalPrice" />
       <el-table-column label="成本价" align="center" prop="costPrice" />
-      <el-table-column label="售价" align="center" prop="retailPrice" width="70" />
-      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="售价" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.price }}</div>
+          </template>
+          <template v-else>{{ row.retailPrice }}</template>
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" width="70">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.number }}</div>
+          </template>
+          <template v-else>{{ row.minBuyNumber }}</template>
+        </template>
+      </el-table-column>
       <el-table-column label="商品分类" align="center" prop="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
         <template v-if="row.addTime" slot-scope="{row}">
@@ -150,6 +164,25 @@ export default {
         this.pageNum = organizeProductsPage.index
         this.classify = listByEffective
         this.listLoading = false
+        this.list.map(row => {
+          row.ladderShownList = []
+          if (row.ladderPriceFlag * 1 === 1 && row.ladderPriceList != null) {
+            for (let i = 0; i < row.ladderPriceList.length; i++) {
+              if (row.ladderPriceList[i] && row.ladderPriceList[i].delFlag * 1 === 0) {
+                let str = ''
+                if (row.ladderPriceList[i + 1] && row.ladderPriceList[i + 1].delFlag * 1 === 0) {
+                  str = row.ladderPriceList[i].buyNum + '-' + row.ladderPriceList[i + 1].buyNum
+                } else {
+                  str = '≥' + row.ladderPriceList[i].buyNum
+                }
+                row.ladderShownList.push({
+                  price: row.ladderPriceList[i].buyPrice,
+                  number: str
+                })
+              }
+            }
+          }
+        })
       })
     },
     handleFilter() {

src/views/goods/list-preferential.vue

@@ -68,8 +68,22 @@
       <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <el-table-column label="市场价" align="center" prop="normalPrice" />
       <el-table-column label="成本价" align="center" prop="costPrice" />
-      <el-table-column label="售价" align="center" prop="retailPrice" />
-      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="售价" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.price }}</div>
+          </template>
+          <template v-else>{{ row.retailPrice }}</template>
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" width="70">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.number }}</div>
+          </template>
+          <template v-else>{{ row.minBuyNumber }}</template>
+        </template>
+      </el-table-column>
       <el-table-column label="商品分类" align="center" prop="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
         <template v-if="row.addTime" slot-scope="{row}">
@@ -150,6 +164,25 @@ export default {
         this.pageNum = organizeProductsPage.index
         this.classify = listByEffective
         this.listLoading = false
+        this.list.map(row => {
+          row.ladderShownList = []
+          if (row.ladderPriceFlag * 1 === 1 && row.ladderPriceList != null) {
+            for (let i = 0; i < row.ladderPriceList.length; i++) {
+              if (row.ladderPriceList[i] && row.ladderPriceList[i].delFlag * 1 === 0) {
+                let str = ''
+                if (row.ladderPriceList[i + 1] && row.ladderPriceList[i + 1].delFlag * 1 === 0) {
+                  str = row.ladderPriceList[i].buyNum + '-' + row.ladderPriceList[i + 1].buyNum
+                } else {
+                  str = '≥' + row.ladderPriceList[i].buyNum
+                }
+                row.ladderShownList.push({
+                  price: row.ladderPriceList[i].buyPrice,
+                  number: str
+                })
+              }
+            }
+          }
+        })
       })
     },
     handleFilter() {

src/views/goods/list-preferred.vue

@@ -68,8 +68,22 @@
       <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <el-table-column label="市场价" align="center" prop="normalPrice" />
       <el-table-column label="成本价" align="center" prop="costPrice" />
-      <el-table-column label="售价" align="center" prop="retailPrice" />
-      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="售价" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.price }}</div>
+          </template>
+          <template v-else>{{ row.retailPrice }}</template>
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" width="70">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.number }}</div>
+          </template>
+          <template v-else>{{ row.minBuyNumber }}</template>
+        </template>
+      </el-table-column>
       <el-table-column label="商品分类" align="center" prop="productClassifyName" />
       <el-table-column align="center" label="添加时间" prop="addTime">
         <template v-if="row.addTime" slot-scope="{row}">
@@ -150,6 +164,25 @@ export default {
         this.pageNum = organizeProductsPage.index
         this.classify = listByEffective
         this.listLoading = false
+        this.list.map(row => {
+          row.ladderShownList = []
+          if (row.ladderPriceFlag * 1 === 1 && row.ladderPriceList != null) {
+            for (let i = 0; i < row.ladderPriceList.length; i++) {
+              if (row.ladderPriceList[i] && row.ladderPriceList[i].delFlag * 1 === 0) {
+                let str = ''
+                if (row.ladderPriceList[i + 1] && row.ladderPriceList[i + 1].delFlag * 1 === 0) {
+                  str = row.ladderPriceList[i].buyNum + '-' + row.ladderPriceList[i + 1].buyNum
+                } else {
+                  str = '≥' + row.ladderPriceList[i].buyNum
+                }
+                row.ladderShownList.push({
+                  price: row.ladderPriceList[i].buyPrice,
+                  number: str
+                })
+              }
+            }
+          }
+        })
       })
     },
     handleFilter() {

src/views/goods/list-select.vue

@@ -61,8 +61,22 @@
       <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
       <el-table-column label="市场价" align="center" prop="normalPrice" />
       <el-table-column label="成本价" align="center" prop="costPrice" />
-      <el-table-column label="售价" align="center" prop="retailPrice" />
-      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="售价" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.price }}</div>
+          </template>
+          <template v-else>{{ row.retailPrice }}</template>
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" width="70">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.number }}</div>
+          </template>
+          <template v-else>{{ row.minBuyNumber }}</template>
+        </template>
+      </el-table-column>
       <el-table-column label="商品分类" align="center" prop="productClassifyName" />
     </el-table>
 
@@ -146,6 +160,25 @@ export default {
         this.total = productsPage.totalRecord
         this.classify = listByEffective
         this.listLoading = false
+        this.list.map(row => {
+          row.ladderShownList = []
+          if (row.ladderPriceFlag * 1 === 1 && row.ladderPriceList != null) {
+            for (let i = 0; i < row.ladderPriceList.length; i++) {
+              if (row.ladderPriceList[i] && row.ladderPriceList[i].delFlag * 1 === 0) {
+                let str = ''
+                if (row.ladderPriceList[i + 1] && row.ladderPriceList[i + 1].delFlag * 1 === 0) {
+                  str = row.ladderPriceList[i].buyNum + '-' + row.ladderPriceList[i + 1].buyNum
+                } else {
+                  str = '≥' + row.ladderPriceList[i].buyNum
+                }
+                row.ladderShownList.push({
+                  price: row.ladderPriceList[i].buyPrice,
+                  number: str
+                })
+              }
+            }
+          }
+        })
       })
     },
     handleFilter() {

src/views/goods/list.vue

@@ -87,8 +87,22 @@
       <el-table-column label="供应商" align="center" prop="shopName" min-width="110" />
       <el-table-column label="市场价" align="center" prop="normalPrice" />
       <el-table-column label="成本价" align="center" prop="costPrice" />
-      <el-table-column label="售价" align="center" prop="retailPrice" />
-      <el-table-column label="起订量" align="center" prop="minBuyNumber" width="70" />
+      <el-table-column label="售价" align="center">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.price }}</div>
+          </template>
+          <template v-else>{{ row.retailPrice }}</template>
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" width="70">
+        <template slot-scope="{row}">
+          <template v-if="row.ladderPriceFlag*1===1">
+            <div v-for="(item, index) in row.ladderShownList" :key="row.id+'list_ladder_pri'+index">{{ item.number }}</div>
+          </template>
+          <template v-else>{{ row.minBuyNumber }}</template>
+        </template>
+      </el-table-column>
       <el-table-column v-if="modules && modules.firstModulesName" :label="modules.firstModulesName" align="center" prop="preferredProduct" width="50">
         <template slot-scope="{row}">
           <!--<el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
@@ -128,37 +142,8 @@
 
     <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
 
-    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="440px">
-      <el-form ref="dataForm" :rules="rules" :model="dialog" label-position="left" label-width="220px" style="width:400px;text-align: right;">
-        <el-form-item label="商品分类" prop="classifyID">
-          <el-select v-model="dialog.classifyID" placeholder="商品分类" :label="dialog.productClassifyName" class="filter-item" :value="dialog.classifyID*1">
-            <template v-for="item in classify">
-              <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="'市场价：¥' + dialog.normalPrice + '，修改为：'" prop="normalPrice">
-          <el-input v-model="dialog.normalPrice" />
-        </el-form-item>
-        <el-form-item :label="'成本价：¥' + dialog.costPrice + '，修改为：'" prop="costPrice">
-          <el-input v-model="dialog.costPrice" />
-        </el-form-item>
-        <el-form-item :label="'售价：¥' + dialog.retailPrice + '，修改为：'" prop="retailPrice">
-          <el-input v-model="dialog.retailPrice" />
-        </el-form-item>
-        <el-form-item :label="'起订量：' + dialog.minBuyNumber + '，修改为：'" prop="minBuyNumber">
-          <el-input v-model="dialog.minBuyNumber" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
-          关闭
-        </el-button>
-        <el-button type="primary" @click="updateGoods">
-          确认
-        </el-button>
-      </div>
-    </el-dialog>
+    <PriceEdit ref="priceChild" :dialog-title="dialogTitle" :is-visible.sync="dialogFormVisible" :product-detail="dialogData" :classify="classify" />
+
     <template>
       <el-backtop style="right: 40px; bottom: 40px;">
         <i class="el-icon-upload2" />
@@ -168,10 +153,11 @@
 </template>
 
 <script>
-import { getList, getModule, switchGoods, saveGoods } from '@/api/goods'
+import { getList, getModule, switchGoods } from '@/api/goods'
+import PriceEdit from './components/price-edit'
 import Pagination from '@/components/Pagination'
 export default {
-  components: { Pagination },
+  components: { PriceEdit, Pagination },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -204,25 +190,10 @@ export default {
         preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
         productClassifyName: '' // '对应cm_mall_products_classify商品分类表id',
       },
+      dialogData: {},
       dialogFormVisible: false,
       dialogStatus: '',
-      dialogTitle: '编辑',
-      dialog: {
-        id: '',
-        classifyID: 0,
-        normalPrice: '',
-        costPrice: '',
-        retailPrice: '',
-        minBuyNumber: '',
-        productClassifyName: ''
-      },
-      rules: {
-        classifyID: [{ required: true, message: '请选择分类', trigger: 'change' }],
-        normalPrice: [{ required: true, message: '市场价不能为空', trigger: 'blur' }],
-        costPrice: [{ required: true, message: '成本价不能为空', trigger: 'blur' }],
-        retailPrice: [{ required: true, message: '售价不能为空', trigger: 'blur' }],
-        minBuyNumber: [{ required: true, message: '起订量不能为空', trigger: 'blur' }]
-      }
+      dialogTitle: '编辑'
     }
   },
   computed: {
@@ -249,6 +220,25 @@ export default {
         this.total = organizeProductsPage.totalRecord
         this.classify = listByEffective
         this.listLoading = false
+        this.list.map(row => {
+          row.ladderShownList = []
+          if (row.ladderPriceFlag * 1 === 1 && row.ladderPriceList != null) {
+            for (let i = 0; i < row.ladderPriceList.length; i++) {
+              if (row.ladderPriceList[i] && row.ladderPriceList[i].delFlag * 1 === 0) {
+                let str = ''
+                if (row.ladderPriceList[i + 1] && row.ladderPriceList[i + 1].delFlag * 1 === 0) {
+                  str = row.ladderPriceList[i].buyNum + '-' + row.ladderPriceList[i + 1].buyNum
+                } else {
+                  str = '≥' + row.ladderPriceList[i].buyNum
+                }
+                row.ladderShownList.push({
+                  price: row.ladderPriceList[i].buyPrice,
+                  number: str
+                })
+              }
+            }
+          }
+        })
       })
     },
     handleFilter() {
@@ -281,23 +271,9 @@ export default {
       })
     },
     handleEdit(row) {
-      this.dialog = Object.assign({}, row)
-      this.dialog.classifyID = this.dialog.classifyID * 1
+      this.dialogData = Object.assign({}, row)
       this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    },
-    updateGoods() {
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          saveGoods(this.dialog).then(response => {
-            this.$message({ message: response.msg, type: 'success', center: true })
-            this.fetchData()
-            this.dialogFormVisible = false
-          })
-        }
-      })
+      this.$refs['priceChild'].clearValidate()
     }
   }
 }