|
|
|
@ -3,61 +3,60 @@ |
|
|
|
|
<div class="card-title">{{ $route.meta.title }}</div> |
|
|
|
|
<a-spin :spinning="isLoading"> |
|
|
|
|
<a-form :form="form" @submit="handleSubmit"> |
|
|
|
|
<div style="width:1000px"> |
|
|
|
|
<a-form-item v-bind="formItemLayoutWithOutLabel"> |
|
|
|
|
<div class="msg"> |
|
|
|
|
<span>价格区间(元)</span> |
|
|
|
|
<span>会员加价率%</span> |
|
|
|
|
<span>利润空间(元)</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="ruleText"><span class="ruleTitle">会员说明:</span>A.当加价率生效后,会员价高于市场价,会员价统一自动按以下标准执行: |
|
|
|
|
(市场价-成本价)x_____% +成本价=会员价 _____%为此时的加价率。</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-modal v-model:visible="setPriceVisible" width="450px" title="利润值" @ok="handleBatchPrice(index_1, index_2, mixPrice, maxPrice)"> |
|
|
|
|
<div class="fen" style="margin-top: -10px"> |
|
|
|
|
<input placeholder="最大利润值" style="margin-right: 25px" v-model="mixPrice" class="input" type="text" /> |
|
|
|
|
<input placeholder="最小利润值" v-model="maxPrice" class="input" type="text" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="setRule"> |
|
|
|
|
<div class="ruleTitle">设置规则:</div> |
|
|
|
|
<div class="ruleText"> |
|
|
|
|
A.当加价率生效后,会员价高于市场价,会员价统一自动按以下标准执行: (市场价-成本价)x_____% +成本价=会员价 |
|
|
|
|
_____%为此时的加价率。 利润低于_____元的商品不展示在商城里。 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a-modal> |
|
|
|
|
<a-form-item v-bind="formItemLayoutWithOutLabel"> |
|
|
|
|
<a-button type="dashed" style="width: calc(43.5% + 8px); margin-right: 50px" @click="handleAddCondition"> |
|
|
|
|
<a-icon type="plus-circle" /> 新增分类模版 </a-button><a-button type="dashed" style="width: calc(44.5% + 8px)" @click="handleRemoveCondition"> |
|
|
|
|
<a-icon type="minus-circle-o" /> 删除分类模版 |
|
|
|
|
</a-button> |
|
|
|
|
<div style="width: 100%;"> |
|
|
|
|
<a-button type="dashed" style="width: 100%" @click="handleAddCondition"> |
|
|
|
|
<a-icon type="plus-circle" /> 新增分类模版 </a-button> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item v-for="(k, index) in form.getFieldValue('list')" :key="k.id" :label="index === 0 ? '会员模版' : ''" :labelCol="labelCol" v-bind="index === 0 ? { wrapperCol } : formItemLayoutWithOutLabel" required> |
|
|
|
|
<a-tree-select style="width: 100%; margin-right: 8px; margin-top: 3px" placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable allowClear treeCheckStrictly |
|
|
|
|
@select="onSelect(index, $event)" @focus="handleSelectChange(index)" v-decorator="[`category${k.id}`]"></a-tree-select> |
|
|
|
|
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between"> |
|
|
|
|
<div style="width: 700px;"> |
|
|
|
|
<a-tree-select style="width: 100%; margin-right: 8px; margin-top: 3px" placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable allowClear |
|
|
|
|
treeCheckStrictly @select="onSelect(index, $event)" @focus="handleSelectChange(index)" v-decorator="[`category${k.id}`]"></a-tree-select> |
|
|
|
|
<div style="width: 100%"> |
|
|
|
|
<div class="fan" v-for="(m, index2) in k.price_list" :key="m.id"> |
|
|
|
|
<a-form-item style="margin-right: 15px; width: 33%; cursor: pointer"> |
|
|
|
|
<div class="inMax" @click="setPrice(index, index2,m.min,m.max)"> |
|
|
|
|
<span v-if="m.min && m.max">{{ m.min }} ~ {{ m.max }}</span><span style="color: #d9d9d9" v-else>利润值</span> |
|
|
|
|
<a-form-item style="margin-right: 15px; width: 47%; cursor: pointer"> |
|
|
|
|
<div class="inMax"> |
|
|
|
|
<input placeholder="最小利润值" @blur="onPrice($event, index, index2)" v-model="m.min" class="input" type="text" /> |
|
|
|
|
~<input placeholder="最大利润值" @blur="onPrice($event, index, index2)" v-model="m.max" class="input" type="text" /> |
|
|
|
|
<div class="yuan">元</div> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item style="margin-right: 15px; width: 33%"> |
|
|
|
|
<a-form-item style="margin-right: 15px; width: 23%"> |
|
|
|
|
<a-input placeholder="利润率" @input="onRate($event, index, index2)" suffix="%" v-model="m.add_price_rate" style="width: 100%; margin-right: 8px; text-align: center" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<div style="width: 33%; text-align: center"> |
|
|
|
|
<div style="width: 30%; text-align: center"> |
|
|
|
|
<span>{{ m.startProfit }}</span> ~ <span>{{ m.endProfit }}</span> |
|
|
|
|
</div> |
|
|
|
|
<a-button type="dashed" style="width: 120px" @click="handleRemovePriceRate(index,index2)"> |
|
|
|
|
<a-icon type="minus-circle-o" /> 删除价格区间</a-button> |
|
|
|
|
</div> |
|
|
|
|
<div style="width: 100%"> |
|
|
|
|
<a-button type="dashed" style="width: calc(40% + 8px); margin-right: 50px" @click="handleAddPriceRate(index)"> |
|
|
|
|
<a-icon type="plus-circle" /> 新增价格区间 </a-button><a-button type="dashed" style="width: calc(40% + 8px)" @click="handleRemovePriceRate(index)"> |
|
|
|
|
<a-icon type="minus-circle-o" /> 删除价格区间 |
|
|
|
|
</a-button> |
|
|
|
|
<a-button type="dashed" style="width: 100%; margin-right: 50px" @click="handleAddPriceRate(index)"> |
|
|
|
|
<a-icon type="plus-circle" /> 新增价格区间 </a-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<a-button type="dashed" style="width: 120px;margin-left: 20px;" @click="handleRemoveCondition(index)"> |
|
|
|
|
<a-icon type="minus-circle-o" /> 删除分类模版 |
|
|
|
|
</a-button> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
|
|
|
|
<a-button type="primary" html-type="submit">提交</a-button> |
|
|
|
|
</a-form-item> |
|
|
|
|
</div> |
|
|
|
|
</a-form> |
|
|
|
|
</a-spin> |
|
|
|
|
</a-card> |
|
|
|
@ -87,11 +86,6 @@ export default { |
|
|
|
|
formItemLayoutWithOutLabel: { |
|
|
|
|
wrapperCol: { span: 10, offset: 3 }, |
|
|
|
|
}, |
|
|
|
|
setPriceVisible: false, |
|
|
|
|
index_1: '', |
|
|
|
|
index_2: '', |
|
|
|
|
mixPrice: '', |
|
|
|
|
maxPrice: '', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 初始化数据 |
|
|
|
@ -107,6 +101,50 @@ export default { |
|
|
|
|
this.getDetail() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
onPrice(e, index_1, index_2, type) { |
|
|
|
|
const { form } = this |
|
|
|
|
const list = form.getFieldValue('list') |
|
|
|
|
if (0 >= list[index_1].price_list[index_2].min) { |
|
|
|
|
list[index_1].price_list[index_2].min = null |
|
|
|
|
this.$message.warning('最小利润值必须大于0', 1.5) |
|
|
|
|
list[index_1].price_list[index_2].startProfit = 0 |
|
|
|
|
list[index_1].price_list[index_2].endProfit = 0 |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (0 >= list[index_1].price_list[index_2].max) { |
|
|
|
|
list[index_1].price_list[index_2].max = null |
|
|
|
|
this.$message.warning('最大利润值必须大于0', 1.5) |
|
|
|
|
list[index_1].price_list[index_2].startProfit = 0 |
|
|
|
|
list[index_1].price_list[index_2].endProfit = 0 |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (list[index_1].price_list[index_2].min > list[index_1].price_list[index_2].max) { |
|
|
|
|
list[index_1].price_list[index_2].max = null |
|
|
|
|
this.$message.warning('最大利润值不能低于最小利润值', 1.5) |
|
|
|
|
list[index_1].price_list[index_2].startProfit = 0 |
|
|
|
|
list[index_1].price_list[index_2].endProfit = 0 |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (!list[index_1].price_list[index_2].min || !list[index_1].price_list[index_2].max || !list[index_1].price_list[index_2].add_price_rate) { |
|
|
|
|
list[index_1].price_list[index_2].startProfit = 0 |
|
|
|
|
list[index_1].price_list[index_2].endProfit = 0 |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (list[index_1].price_list[index_2].min && list[index_1].price_list[index_2].max) { |
|
|
|
|
let rate = Number(list[index_1].price_list[index_2].add_price_rate) |
|
|
|
|
list[index_1].price_list[index_2].startProfit = Number( |
|
|
|
|
(list[index_1].price_list[index_2].min * (rate / 100)).toFixed(2) |
|
|
|
|
) |
|
|
|
|
list[index_1].price_list[index_2].endProfit = Number( |
|
|
|
|
(list[index_1].price_list[index_2].max * (rate / 100)).toFixed(2) |
|
|
|
|
) |
|
|
|
|
list[index_1].price_list[index_2].add_price_rate = rate |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
list: list, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 计算利润率 |
|
|
|
|
onRate(e, index_1, index_2) { |
|
|
|
|
const { form } = this |
|
|
|
@ -136,49 +174,6 @@ export default { |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}, |
|
|
|
|
handleBatchPrice(index1, index2, min, max) { |
|
|
|
|
const { form } = this |
|
|
|
|
if (!this.mixPrice) { |
|
|
|
|
this.$message.warning('请输入最低价格', 1.5) |
|
|
|
|
} else if (!this.maxPrice) { |
|
|
|
|
this.$message.warning('请输入最高价格', 1.5) |
|
|
|
|
} else if (0 >= this.mixPrice) { |
|
|
|
|
this.mixPrice = null |
|
|
|
|
this.$message.warning('最低价格必须大于0', 1.5) |
|
|
|
|
} else if (0 >= this.maxPrice) { |
|
|
|
|
this.maxPrice = null |
|
|
|
|
this.$message.warning('最高价格必须大于0', 1.5) |
|
|
|
|
} else if (this.mixPrice > this.maxPrice) { |
|
|
|
|
this.maxPrice = null |
|
|
|
|
this.$message.warning('最高价格不能低于最低价格', 1.5) |
|
|
|
|
} else { |
|
|
|
|
const condition = form.getFieldValue('list') |
|
|
|
|
condition.forEach(function (item, k) { |
|
|
|
|
if (k == index1) { |
|
|
|
|
item.price_list.forEach(function (item1, j) { |
|
|
|
|
if (j == index2) { |
|
|
|
|
item1.min = min |
|
|
|
|
item1.max = max |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
list: condition, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
this.mixPrice = '' |
|
|
|
|
this.maxPrice = '' |
|
|
|
|
this.setPriceVisible = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
setPrice(index1, index2, min, max) { |
|
|
|
|
this.index_1 = index1 |
|
|
|
|
this.index_2 = index2 |
|
|
|
|
this.mixPrice = min; |
|
|
|
|
this.maxPrice = max |
|
|
|
|
this.setPriceVisible = true |
|
|
|
|
}, |
|
|
|
|
onSelect(index, event) { |
|
|
|
|
const { form, $nextTick } = this |
|
|
|
|
const key = form.getFieldValue('list') |
|
|
|
@ -198,7 +193,6 @@ export default { |
|
|
|
|
let that = this |
|
|
|
|
for (let i = 0; i < nodes.length; i++) { |
|
|
|
|
nodes[i].disabled = false |
|
|
|
|
console.log(nodes[i].value, ids) |
|
|
|
|
if (ids.includes(nodes[i].value) == true) { |
|
|
|
|
nodes[i].disabled = true |
|
|
|
|
} |
|
|
|
@ -220,10 +214,8 @@ export default { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
console.log(key, category) |
|
|
|
|
$nextTick(() => { |
|
|
|
|
this.formData.categoryList = this.deleteNodeById(this.formData.categoryList, category) |
|
|
|
|
console.log(this.deleteNodeById(this.formData.categoryList, category)) |
|
|
|
|
this.formData = this.formData |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
@ -232,11 +224,7 @@ export default { |
|
|
|
|
handleRemoveCondition(index) { |
|
|
|
|
const { form } = this |
|
|
|
|
const keys = form.getFieldValue('list') |
|
|
|
|
if (keys.length === 0) { |
|
|
|
|
this.$message.warning('暂无可删除的分类模版', 1.5) |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
keys.pop() |
|
|
|
|
keys.splice(index, 1) // 第二个参数1表示删除一个元素 |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
list: keys, |
|
|
|
|
}) |
|
|
|
@ -253,22 +241,12 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 删除值列表 |
|
|
|
|
handleRemovePriceRate(index) { |
|
|
|
|
handleRemovePriceRate(index1, index2) { |
|
|
|
|
const { form } = this |
|
|
|
|
const priceList = form.getFieldValue('list')[index].price_list |
|
|
|
|
if (priceList.length === 0) { |
|
|
|
|
this.$message.warning('暂无可删除的价格区间', 1.5) |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
priceList.pop() |
|
|
|
|
const conditionList = form.getFieldValue('list') |
|
|
|
|
conditionList.forEach(function (item, mm) { |
|
|
|
|
if (mm == index) { |
|
|
|
|
item.price_list = priceList |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
const priceList = form.getFieldValue('list') |
|
|
|
|
priceList[index1].price_list.splice(index2, 1) // 第二个参数1表示删除一个元素 |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
list: conditionList, |
|
|
|
|
list: priceList, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}, |
|
|
|
@ -313,6 +291,12 @@ export default { |
|
|
|
|
return { value: id } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
convertToString(value) { |
|
|
|
|
if (typeof value == 'number') { |
|
|
|
|
return String(value); |
|
|
|
|
} |
|
|
|
|
return value; |
|
|
|
|
}, |
|
|
|
|
// 设置表单默认值 |
|
|
|
|
setFieldsValue() { |
|
|
|
|
const { record, form, $nextTick } = this |
|
|
|
@ -323,10 +307,10 @@ export default { |
|
|
|
|
return x |
|
|
|
|
}) |
|
|
|
|
record.list.forEach((x, i) => { |
|
|
|
|
record[`category${x.id}`] = this.formatCategoryIds(x.category.split(',')) |
|
|
|
|
record[`category${x.id}`] = this.formatCategoryIds((this.convertToString(x.category)).split(',')) |
|
|
|
|
categoryAry.push(`category${x.id}`) |
|
|
|
|
this.form.getFieldDecorator(`category${x.id}`, { initialValue: '', preserve: true }) |
|
|
|
|
x.category = x.category.split(',') |
|
|
|
|
x.category = (this.convertToString(x.category)).split(',') |
|
|
|
|
x.price_list.forEach((m, j) => { |
|
|
|
|
m.startProfit = Number((m.min * (Number(m.add_price_rate) / 100)).toFixed(2)) |
|
|
|
|
m.endProfit = Number((m.max * (Number(m.add_price_rate) / 100)).toFixed(2)) |
|
|
|
@ -467,6 +451,9 @@ export default { |
|
|
|
|
/deep/.ant-input-prefix { |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
/deep/.ant-col-10 { |
|
|
|
|
width: 80%; |
|
|
|
|
} |
|
|
|
|
.fan { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: top; |
|
|
|
@ -502,6 +489,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
.setRule { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
.ruleTitle { |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
@ -516,7 +504,6 @@ export default { |
|
|
|
|
color: #8b8b8b; |
|
|
|
|
line-height: 32px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.inMax { |
|
|
|
|
width: 100%; |
|
|
|
|
text-align: center; |
|
|
|
@ -526,21 +513,35 @@ export default { |
|
|
|
|
list-style: none; |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 30px; |
|
|
|
|
padding: 4px 11px; |
|
|
|
|
height: 32px; |
|
|
|
|
padding: 0 26px 0 0; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
font-size: 13px; |
|
|
|
|
line-height: 1.8; |
|
|
|
|
line-height: 32px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
background-image: none; |
|
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
-webkit-transition: all 0.3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
input { |
|
|
|
|
border: none; |
|
|
|
|
width: 45%; |
|
|
|
|
margin: 0; |
|
|
|
|
height: 100%; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
input:focus { |
|
|
|
|
outline: none; |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
input::-webkit-input-placeholder { |
|
|
|
|
color: #bfbfbf; |
|
|
|
|
} |
|
|
|
|
.yuan { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 10px; |
|
|
|
|
top: 2px; |
|
|
|
|
top: 0px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|