fanfan 10 months ago
parent 4e6cf6a3ee
commit f5b87fb608
  1. 85
      src/views/goods/distributionPrice/Index.vue

@ -8,59 +8,30 @@
<span>价格区间()</span> <span>价格区间()</span>
<span>分销加价率%</span> <span>分销加价率%</span>
<span>利润空间()</span> <span>利润空间()</span>
</div></a-form-item </div>
> </a-form-item>
<a-form-item v-bind="formItemLayoutWithOutLabel"> <a-form-item v-bind="formItemLayoutWithOutLabel">
<a-button type="dashed" style="width: calc(43.5% + 8px); margin-right: 50px" @click="handleAddCondition"> <a-button type="dashed" style="width: calc(43.5% + 8px); margin-right: 50px" @click="handleAddCondition">
<a-icon type="plus-circle" /> 新增分类模版 </a-button <a-icon type="plus-circle" /> 新增分类模版 </a-button><a-button type="dashed" style="width: calc(44.5% + 8px)" @click="handleRemoveCondition">
><a-button type="dashed" style="width: calc(44.5% + 8px)" @click="handleAddCondition">
<a-icon type="minus-circle-o" /> 删除分类模版 <a-icon type="minus-circle-o" /> 删除分类模版
</a-button> </a-button>
</a-form-item> </a-form-item>
<a-form-item <a-form-item v-for="(k, index) in form.getFieldValue('fliter_condition')" :key="k.id" :label="index === 0 ? '分销模版' : ''" :labelCol="labelCol" v-bind="index === 0 ? { wrapperCol } : formItemLayoutWithOutLabel" required>
v-for="(k, index) in form.getFieldValue('fliter_condition')" <a-tree-select style="width: 100%; margin-right: 8px; margin-top: 3px" placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable allowClear treeCheckStrictly
:key="k.id" @select="onSelect(index, $event)" @focus="handleSelectChange(index)" v-decorator="[`category${index}`, { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"></a-tree-select>
: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${index}`, { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"
></a-tree-select>
<div style="width: 100%"> <div style="width: 100%">
<div class="fan"> <div class="fan" v-for="(k, index) in form.getFieldValue('fliter_condition')" :key="k.id">
<a-form-item style="margin-right: 15px; width: 33%"> <a-form-item style="margin-right: 15px; width: 33%">
<a-input <a-input placeholder="利润值" suffix="元" v-decorator="[`profit${index}`, { rules: [{ required: true, message: '请输入利润值' }] }]" style="width: 100%; margin-right: 8px; text-align: center" />
placeholder="利润值"
suffix="元"
v-decorator="[`profit${index}`, { rules: [{ required: true, message: '请输入利润值' }] }]"
style="width: 100%; margin-right: 8px; text-align: center"
/>
</a-form-item> </a-form-item>
<a-form-item style="margin-right: 15px; width: 33%"> <a-form-item style="margin-right: 15px; width: 33%">
<a-input <a-input placeholder="利润率" suffix="%" v-decorator="[`profit_rate${index}`, { rules: [{ required: true, message: '请输入利润率' }] }]" style="width: 100%; margin-right: 8px; text-align: center" />
placeholder="利润率"
suffix="%"
v-decorator="[`profit_rate${index}`, { rules: [{ required: true, message: '请输入利润率' }] }]"
style="width: 100%; margin-right: 8px; text-align: center"
/>
</a-form-item> </a-form-item>
<div style="width: 33%; text-align: center"><span>0</span>~<span>90</span></div> <div style="width: 33%; text-align: center"><span>0</span>~<span>90</span></div>
</div> </div>
<div style="width: 100%"> <div style="width: 100%">
<a-button type="dashed" style="width: calc(40% + 8px); margin-right: 50px" @click="handleAddCondition"> <a-button type="dashed" style="width: calc(40% + 8px); margin-right: 50px" @click="handleAddPriceRate(index)">
<a-icon type="plus-circle" /> 新增价格区间 </a-button <a-icon type="plus-circle" /> 新增价格区间 </a-button><a-button type="dashed" style="width: calc(40% + 8px)" @click="handleRemovePriceRate(index)">
><a-button type="dashed" style="width: calc(40% + 8px)" @click="handleAddCondition">
<a-icon type="minus-circle-o" /> 删除价格区间 <a-icon type="minus-circle-o" /> 删除价格区间
</a-button> </a-button>
</div> </div>
@ -160,26 +131,48 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}) })
}, },
// //
handleRemoveCondition(index) { handleRemoveCondition(index) {
const { form, $nextTick } = this const { form } = this
const keys = form.getFieldValue('fliter_condition') const keys = form.getFieldValue('fliter_condition')
if (keys.length === 0) { if (keys.length === 0) {
return return
} }
keys.splice(index, 1) // 1 keys.pop()
$nextTick(() => {
form.setFieldsValue({ form.setFieldsValue({
fliter_condition: keys, fliter_condition: keys,
}) })
this.$forceUpdate() this.$forceUpdate()
})
}, },
//
handleAddCondition() { handleAddCondition() {
const { form } = this const { form } = this
const key = form.getFieldValue('fliter_condition') const key = form.getFieldValue('fliter_condition')
const keys = key ? key : [] const keys = key ? key : []
const nextKeys = keys.concat([{ category: [], profit: '', profit_rate: '', id: this.generateRandomString(8) }]) const nextKeys = keys.concat([{ category: [], profit: [], profit_rate: [], id: this.generateRandomString(8) }])
form.setFieldsValue({
fliter_condition: nextKeys,
})
},
//
handleRemovePriceRate() {
const { form } = this
const keys = form.getFieldValue('fliter_condition')
if (keys.length === 0) {
return
}
keys.pop()
form.setFieldsValue({
fliter_condition: keys,
})
this.$forceUpdate()
},
//
handleAddPriceRate() {
const { form } = this
const key = form.getFieldValue('fliter_condition')
const keys = key ? key : []
const nextKeys = keys.concat([{ category: [], profit: [], profit_rate: [], id: this.generateRandomString(8) }])
form.setFieldsValue({ form.setFieldsValue({
fliter_condition: nextKeys, fliter_condition: nextKeys,
}) })

Loading…
Cancel
Save