|
|
|
|
@ -1,78 +1,49 @@ |
|
|
|
|
<template> |
|
|
|
|
<a-card :bordered="false"> |
|
|
|
|
<div class="card-title">{{ $route.meta.title }}</div> |
|
|
|
|
<a-spin :spinning="isLoading"> |
|
|
|
|
<a-form :form="form" @submit="handleSubmit"> |
|
|
|
|
<a-form-item v-bind="formItemLayoutWithOutLabel"> |
|
|
|
|
<div class="msg"> |
|
|
|
|
<span>价格区间(元)</span> |
|
|
|
|
<span>分销加价率%</span> |
|
|
|
|
<span>利润空间(元)</span> |
|
|
|
|
</div></a-form-item |
|
|
|
|
> |
|
|
|
|
<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="handleAddCondition"> |
|
|
|
|
<a-icon type="minus-circle-o" /> 删除分类模版 |
|
|
|
|
</a-button> |
|
|
|
|
</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 |
|
|
|
|
> |
|
|
|
|
<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 class="fan"> |
|
|
|
|
<a-form-item style="margin-right: 15px; width: 33%"> |
|
|
|
|
<a-input |
|
|
|
|
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 style="margin-right: 15px; width: 33%"> |
|
|
|
|
<a-input |
|
|
|
|
placeholder="利润率" |
|
|
|
|
suffix="%" |
|
|
|
|
v-decorator="[`profit_rate${index}`, { rules: [{ required: true, message: '请输入利润率' }] }]" |
|
|
|
|
style="width: 100%; margin-right: 8px; text-align: center" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
<div style="width: 33%; text-align: center"><span>0</span>~<span>90</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div style="width: 100%"> |
|
|
|
|
<a-button type="dashed" style="width: calc(40% + 8px); margin-right: 50px" @click="handleAddCondition"> |
|
|
|
|
<a-icon type="plus-circle" /> 新增价格区间 </a-button |
|
|
|
|
><a-button type="dashed" style="width: calc(40% + 8px)" @click="handleAddCondition"> |
|
|
|
|
<a-icon type="minus-circle-o" /> 删除价格区间 |
|
|
|
|
</a-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-card :bordered="false"> |
|
|
|
|
<div class="card-title">{{ $route.meta.title }}</div> |
|
|
|
|
<a-spin :spinning="isLoading"> |
|
|
|
|
<a-form :form="form" @submit="handleSubmit"> |
|
|
|
|
<a-form-item v-bind="formItemLayoutWithOutLabel"> |
|
|
|
|
<div class="msg"> |
|
|
|
|
<span>价格区间(元)</span> |
|
|
|
|
<span>分销加价率%</span> |
|
|
|
|
<span>利润空间(元)</span> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<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> |
|
|
|
|
</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> |
|
|
|
|
<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 class="fan" v-for="(k, index) in form.getFieldValue('fliter_condition')" :key="k.id"> |
|
|
|
|
<a-form-item style="margin-right: 15px; width: 33%"> |
|
|
|
|
<a-input 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 style="margin-right: 15px; width: 33%"> |
|
|
|
|
<a-input placeholder="利润率" suffix="%" v-decorator="[`profit_rate${index}`, { rules: [{ required: true, message: '请输入利润率' }] }]" style="width: 100%; margin-right: 8px; text-align: center" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<div style="width: 33%; text-align: center"><span>0</span>~<span>90</span></div> |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
</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> |
|
|
|
|
</a-form> |
|
|
|
|
</a-spin> |
|
|
|
|
</a-card> |
|
|
|
|
<a-form-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
|
|
|
|
<a-button type="primary" html-type="submit">提交</a-button> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-form> |
|
|
|
|
</a-spin> |
|
|
|
|
</a-card> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -82,273 +53,295 @@ import * as GoodsApi from '@/api/goods' |
|
|
|
|
import GoodsModel from '@/common/model/goods/Index' |
|
|
|
|
import { isEmpty } from '@/utils/util' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
// 标签布局属性 |
|
|
|
|
labelCol: { span: 3 }, |
|
|
|
|
// 输入框布局属性 |
|
|
|
|
wrapperCol: { span: 10 }, |
|
|
|
|
// loading状态 |
|
|
|
|
isLoading: false, |
|
|
|
|
// 当前表单元素 |
|
|
|
|
form: this.$form.createForm(this), |
|
|
|
|
// 当前记录详情分类数据、 |
|
|
|
|
formData: GoodsModel.formData, |
|
|
|
|
record: {}, |
|
|
|
|
checkList: [], |
|
|
|
|
formItemLayoutWithOutLabel: { |
|
|
|
|
wrapperCol: { span: 10, offset: 3 }, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 初始化数据 |
|
|
|
|
created() { |
|
|
|
|
this.isLoading = true |
|
|
|
|
// 获取form所需的数据 |
|
|
|
|
GoodsModel.getFromData().then(() => { |
|
|
|
|
this.isLoading = false |
|
|
|
|
}) |
|
|
|
|
this.form.getFieldDecorator('fliter_condition', { initialValue: [], preserve: true }) |
|
|
|
|
this.getDataList() //渠道数据请求 |
|
|
|
|
// 获取当前详情记录 |
|
|
|
|
this.getDetail() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
onSelect(index, event) { |
|
|
|
|
const { form, $nextTick } = this |
|
|
|
|
const key = form.getFieldValue('fliter_condition') |
|
|
|
|
for (let i = 0; i < key.length; i++) { |
|
|
|
|
if (i == index) { |
|
|
|
|
key[i].category.push(event.value) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
$nextTick(() => { |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
fliter_condition: key, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
deleteNodeById(nodes, ids) { |
|
|
|
|
let that = this |
|
|
|
|
for (let i = 0; i < nodes.length; i++) { |
|
|
|
|
nodes[i].disabled = false |
|
|
|
|
if (ids.includes(nodes[i].value) == true) { |
|
|
|
|
nodes[i].disabled = true |
|
|
|
|
} |
|
|
|
|
if (nodes[i].children && nodes[i].children.length > 0) { |
|
|
|
|
that.deleteNodeById(nodes[i].children, ids) // 递归查找子节点 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return nodes |
|
|
|
|
}, |
|
|
|
|
handleSelectChange(index, event) { |
|
|
|
|
const { form, $nextTick } = this |
|
|
|
|
const key = form.getFieldValue('fliter_condition') |
|
|
|
|
let category = [] |
|
|
|
|
for (let i = 0; i < key.length; i++) { |
|
|
|
|
if (i !== index) { |
|
|
|
|
key[i].category.forEach((item) => { |
|
|
|
|
//forEach循环 |
|
|
|
|
category.push(item) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
$nextTick(() => { |
|
|
|
|
this.formData.categoryList = this.deleteNodeById(this.formData.categoryList, category) |
|
|
|
|
this.formData = this.formData |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 删除列表 |
|
|
|
|
handleRemoveCondition(index) { |
|
|
|
|
const { form, $nextTick } = this |
|
|
|
|
const keys = form.getFieldValue('fliter_condition') |
|
|
|
|
if (keys.length === 0) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
keys.splice(index, 1) // 第二个参数1表示删除一个元素 |
|
|
|
|
$nextTick(() => { |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
fliter_condition: keys, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
handleAddCondition() { |
|
|
|
|
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({ |
|
|
|
|
fliter_condition: nextKeys, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
generateRandomString(length) { |
|
|
|
|
let result = '' |
|
|
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' |
|
|
|
|
const charactersLength = characters.length |
|
|
|
|
for (let i = 0; i < length; i++) { |
|
|
|
|
result += characters.charAt(Math.floor(Math.random() * charactersLength)) |
|
|
|
|
} |
|
|
|
|
return result |
|
|
|
|
}, |
|
|
|
|
// 渠道 |
|
|
|
|
getDataList() { |
|
|
|
|
return GoodsApi.getDataList().then((result) => { |
|
|
|
|
const obj = result.data |
|
|
|
|
Object.keys(obj).forEach((item) => { |
|
|
|
|
this.checkList.push({ id: item, name: obj[item] }) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
formatCategoryIds(categoryIds) { |
|
|
|
|
return categoryIds.map((id) => { |
|
|
|
|
return { value: id } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 设置表单默认值 |
|
|
|
|
setFieldsValue() { |
|
|
|
|
const { record, form, $nextTick } = this |
|
|
|
|
const profitAry = [] |
|
|
|
|
const profitRateAry = [] |
|
|
|
|
const categoryAry = [] |
|
|
|
|
if (record.fliter_condition) { |
|
|
|
|
record.fliter_condition = JSON.parse(record.fliter_condition) |
|
|
|
|
record.fliter_condition = record.fliter_condition.map((x) => { |
|
|
|
|
x.id = this.generateRandomString(8) |
|
|
|
|
return x |
|
|
|
|
}) |
|
|
|
|
record.fliter_condition.forEach((x, i) => { |
|
|
|
|
record[`profit${i}`] = x.profit |
|
|
|
|
record[`profit_rate${i}`] = x.profit_rate |
|
|
|
|
record[`category${i}`] = this.formatCategoryIds(x.category) |
|
|
|
|
categoryAry.push(`category${i}`) |
|
|
|
|
profitAry.push(`profit${i}`) |
|
|
|
|
profitRateAry.push(`profit_rate${i}`) |
|
|
|
|
this.form.getFieldDecorator(`category${i}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit${i}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit_rate${i}`, { initialValue: '', preserve: true }) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
if (record.open_channel) { |
|
|
|
|
const list = record.open_channel |
|
|
|
|
const channelAry = [] |
|
|
|
|
this.checkList.map((item) => { |
|
|
|
|
if (list.indexOf(item.id) != -1) { |
|
|
|
|
channelAry.push(item.name) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.form.open_channel = channelAry |
|
|
|
|
} |
|
|
|
|
// 设置表单内容 |
|
|
|
|
!isEmpty(form.getFieldsValue()) && |
|
|
|
|
$nextTick(() => { |
|
|
|
|
form.setFieldsValue( |
|
|
|
|
pick(record, ['open_channel', 'fliter_condition', ...profitAry, ...profitRateAry, ...categoryAry]) |
|
|
|
|
) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
formatCategoryIds(categoryIds) { |
|
|
|
|
return categoryIds.map((id) => { |
|
|
|
|
return { value: id } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 获取当前详情记录 |
|
|
|
|
getDetail() { |
|
|
|
|
this.isLoading = true |
|
|
|
|
Api.info() |
|
|
|
|
.then((result) => { |
|
|
|
|
// 当前记录 |
|
|
|
|
result.data.storeInfo.open_channel = result.data.storeInfo.open_channel |
|
|
|
|
? result.data.storeInfo.open_channel.split(',') |
|
|
|
|
: undefined |
|
|
|
|
this.record = result.data.storeInfo |
|
|
|
|
// 设置默认值 |
|
|
|
|
this.setFieldsValue() |
|
|
|
|
}) |
|
|
|
|
.finally(() => (this.isLoading = false)) |
|
|
|
|
}, |
|
|
|
|
getChannel(val) { |
|
|
|
|
this.form.open_channel = val |
|
|
|
|
}, |
|
|
|
|
// 确认按钮 |
|
|
|
|
handleSubmit(e) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
// 表单验证 |
|
|
|
|
const { |
|
|
|
|
form: { validateFields }, |
|
|
|
|
onFormSubmit, |
|
|
|
|
} = this |
|
|
|
|
validateFields((errors, values) => { |
|
|
|
|
!errors && onFormSubmit(values) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
// 标签布局属性 |
|
|
|
|
labelCol: { span: 3 }, |
|
|
|
|
// 输入框布局属性 |
|
|
|
|
wrapperCol: { span: 10 }, |
|
|
|
|
// loading状态 |
|
|
|
|
isLoading: false, |
|
|
|
|
// 当前表单元素 |
|
|
|
|
form: this.$form.createForm(this), |
|
|
|
|
// 当前记录详情分类数据、 |
|
|
|
|
formData: GoodsModel.formData, |
|
|
|
|
record: {}, |
|
|
|
|
checkList: [], |
|
|
|
|
formItemLayoutWithOutLabel: { |
|
|
|
|
wrapperCol: { span: 10, offset: 3 }, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 初始化数据 |
|
|
|
|
created() { |
|
|
|
|
this.isLoading = true |
|
|
|
|
// 获取form所需的数据 |
|
|
|
|
GoodsModel.getFromData().then(() => { |
|
|
|
|
this.isLoading = false |
|
|
|
|
}) |
|
|
|
|
this.form.getFieldDecorator('fliter_condition', { initialValue: [], preserve: true }) |
|
|
|
|
this.getDataList() //渠道数据请求 |
|
|
|
|
// 获取当前详情记录 |
|
|
|
|
this.getDetail() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
onSelect(index, event) { |
|
|
|
|
const { form, $nextTick } = this |
|
|
|
|
const key = form.getFieldValue('fliter_condition') |
|
|
|
|
for (let i = 0; i < key.length; i++) { |
|
|
|
|
if (i == index) { |
|
|
|
|
key[i].category.push(event.value) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
$nextTick(() => { |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
fliter_condition: key, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
deleteNodeById(nodes, ids) { |
|
|
|
|
let that = this |
|
|
|
|
for (let i = 0; i < nodes.length; i++) { |
|
|
|
|
nodes[i].disabled = false |
|
|
|
|
if (ids.includes(nodes[i].value) == true) { |
|
|
|
|
nodes[i].disabled = true |
|
|
|
|
} |
|
|
|
|
if (nodes[i].children && nodes[i].children.length > 0) { |
|
|
|
|
that.deleteNodeById(nodes[i].children, ids) // 递归查找子节点 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return nodes |
|
|
|
|
}, |
|
|
|
|
handleSelectChange(index, event) { |
|
|
|
|
const { form, $nextTick } = this |
|
|
|
|
const key = form.getFieldValue('fliter_condition') |
|
|
|
|
let category = [] |
|
|
|
|
for (let i = 0; i < key.length; i++) { |
|
|
|
|
if (i !== index) { |
|
|
|
|
key[i].category.forEach((item) => { |
|
|
|
|
//forEach循环 |
|
|
|
|
category.push(item) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
$nextTick(() => { |
|
|
|
|
this.formData.categoryList = this.deleteNodeById(this.formData.categoryList, category) |
|
|
|
|
this.formData = this.formData |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 删除模版列表 |
|
|
|
|
handleRemoveCondition(index) { |
|
|
|
|
const { form } = this |
|
|
|
|
const keys = form.getFieldValue('fliter_condition') |
|
|
|
|
if (keys.length === 0) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
keys.pop() |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
fliter_condition: keys, |
|
|
|
|
}) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}, |
|
|
|
|
// 新增模版列表 |
|
|
|
|
handleAddCondition() { |
|
|
|
|
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({ |
|
|
|
|
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({ |
|
|
|
|
fliter_condition: nextKeys, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
generateRandomString(length) { |
|
|
|
|
let result = '' |
|
|
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' |
|
|
|
|
const charactersLength = characters.length |
|
|
|
|
for (let i = 0; i < length; i++) { |
|
|
|
|
result += characters.charAt(Math.floor(Math.random() * charactersLength)) |
|
|
|
|
} |
|
|
|
|
return result |
|
|
|
|
}, |
|
|
|
|
// 渠道 |
|
|
|
|
getDataList() { |
|
|
|
|
return GoodsApi.getDataList().then((result) => { |
|
|
|
|
const obj = result.data |
|
|
|
|
Object.keys(obj).forEach((item) => { |
|
|
|
|
this.checkList.push({ id: item, name: obj[item] }) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
formatCategoryIds(categoryIds) { |
|
|
|
|
return categoryIds.map((id) => { |
|
|
|
|
return { value: id } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 设置表单默认值 |
|
|
|
|
setFieldsValue() { |
|
|
|
|
const { record, form, $nextTick } = this |
|
|
|
|
const profitAry = [] |
|
|
|
|
const profitRateAry = [] |
|
|
|
|
const categoryAry = [] |
|
|
|
|
if (record.fliter_condition) { |
|
|
|
|
record.fliter_condition = JSON.parse(record.fliter_condition) |
|
|
|
|
record.fliter_condition = record.fliter_condition.map((x) => { |
|
|
|
|
x.id = this.generateRandomString(8) |
|
|
|
|
return x |
|
|
|
|
}) |
|
|
|
|
record.fliter_condition.forEach((x, i) => { |
|
|
|
|
record[`profit${i}`] = x.profit |
|
|
|
|
record[`profit_rate${i}`] = x.profit_rate |
|
|
|
|
record[`category${i}`] = this.formatCategoryIds(x.category) |
|
|
|
|
categoryAry.push(`category${i}`) |
|
|
|
|
profitAry.push(`profit${i}`) |
|
|
|
|
profitRateAry.push(`profit_rate${i}`) |
|
|
|
|
this.form.getFieldDecorator(`category${i}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit${i}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit_rate${i}`, { initialValue: '', preserve: true }) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
if (record.open_channel) { |
|
|
|
|
const list = record.open_channel |
|
|
|
|
const channelAry = [] |
|
|
|
|
this.checkList.map((item) => { |
|
|
|
|
if (list.indexOf(item.id) != -1) { |
|
|
|
|
channelAry.push(item.name) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.form.open_channel = channelAry |
|
|
|
|
} |
|
|
|
|
// 设置表单内容 |
|
|
|
|
!isEmpty(form.getFieldsValue()) && |
|
|
|
|
$nextTick(() => { |
|
|
|
|
form.setFieldsValue( |
|
|
|
|
pick(record, ['open_channel', 'fliter_condition', ...profitAry, ...profitRateAry, ...categoryAry]) |
|
|
|
|
) |
|
|
|
|
this.$forceUpdate() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
formatCategoryIds(categoryIds) { |
|
|
|
|
return categoryIds.map((id) => { |
|
|
|
|
return { value: id } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 获取当前详情记录 |
|
|
|
|
getDetail() { |
|
|
|
|
this.isLoading = true |
|
|
|
|
Api.info() |
|
|
|
|
.then((result) => { |
|
|
|
|
// 当前记录 |
|
|
|
|
result.data.storeInfo.open_channel = result.data.storeInfo.open_channel |
|
|
|
|
? result.data.storeInfo.open_channel.split(',') |
|
|
|
|
: undefined |
|
|
|
|
this.record = result.data.storeInfo |
|
|
|
|
// 设置默认值 |
|
|
|
|
this.setFieldsValue() |
|
|
|
|
}) |
|
|
|
|
.finally(() => (this.isLoading = false)) |
|
|
|
|
}, |
|
|
|
|
getChannel(val) { |
|
|
|
|
this.form.open_channel = val |
|
|
|
|
}, |
|
|
|
|
// 确认按钮 |
|
|
|
|
handleSubmit(e) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
// 表单验证 |
|
|
|
|
const { |
|
|
|
|
form: { validateFields }, |
|
|
|
|
onFormSubmit, |
|
|
|
|
} = this |
|
|
|
|
validateFields((errors, values) => { |
|
|
|
|
!errors && onFormSubmit(values) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 提交到后端api |
|
|
|
|
onFormSubmit(values) { |
|
|
|
|
const params = {} |
|
|
|
|
params.fliter_condition = values.fliter_condition.map((x, i) => { |
|
|
|
|
return { |
|
|
|
|
category: values[`category${i}`], |
|
|
|
|
profit: values[`profit${i}`], |
|
|
|
|
profit_rate: values[`profit_rate${i}`], |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
if (params.fliter_condition.length > 0) { |
|
|
|
|
params.fliter_condition.forEach((item) => { |
|
|
|
|
item.category = Array.from(item.category, ({ value }) => value) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
params.open_channel = values.open_channel ? values.open_channel.join(',') : '' |
|
|
|
|
params.fliter_condition = params.fliter_condition.length > 0 ? params.fliter_condition : [] |
|
|
|
|
this.isLoading = true |
|
|
|
|
Api.update({ form: params }) |
|
|
|
|
.then((result) => { |
|
|
|
|
// 显示提示信息 |
|
|
|
|
this.$message.success(result.message, 1.5) |
|
|
|
|
this.getDetail() |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
this.isLoading = false |
|
|
|
|
}) |
|
|
|
|
.finally(() => (this.isLoading = false)) |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// 提交到后端api |
|
|
|
|
onFormSubmit(values) { |
|
|
|
|
const params = {} |
|
|
|
|
params.fliter_condition = values.fliter_condition.map((x, i) => { |
|
|
|
|
return { |
|
|
|
|
category: values[`category${i}`], |
|
|
|
|
profit: values[`profit${i}`], |
|
|
|
|
profit_rate: values[`profit_rate${i}`], |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
if (params.fliter_condition.length > 0) { |
|
|
|
|
params.fliter_condition.forEach((item) => { |
|
|
|
|
item.category = Array.from(item.category, ({ value }) => value) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
params.open_channel = values.open_channel ? values.open_channel.join(',') : '' |
|
|
|
|
params.fliter_condition = params.fliter_condition.length > 0 ? params.fliter_condition : [] |
|
|
|
|
this.isLoading = true |
|
|
|
|
Api.update({ form: params }) |
|
|
|
|
.then((result) => { |
|
|
|
|
// 显示提示信息 |
|
|
|
|
this.$message.success(result.message, 1.5) |
|
|
|
|
this.getDetail() |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
this.isLoading = false |
|
|
|
|
}) |
|
|
|
|
.finally(() => (this.isLoading = false)) |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
.msg { |
|
|
|
|
width: 100%; |
|
|
|
|
background: #ffe7e7; |
|
|
|
|
border-radius: 0px 0px 0px 0px; |
|
|
|
|
opacity: 1; |
|
|
|
|
padding: 5px 25px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
font-size: 16px; |
|
|
|
|
span { |
|
|
|
|
width: 33%; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
width: 100%; |
|
|
|
|
background: #ffe7e7; |
|
|
|
|
border-radius: 0px 0px 0px 0px; |
|
|
|
|
opacity: 1; |
|
|
|
|
padding: 5px 25px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
font-size: 16px; |
|
|
|
|
span { |
|
|
|
|
width: 33%; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.ant-form-item-control { |
|
|
|
|
padding-left: 10px; |
|
|
|
|
.ant-form-item-control { |
|
|
|
|
padding-left: 0; |
|
|
|
|
} |
|
|
|
|
padding-left: 10px; |
|
|
|
|
.ant-form-item-control { |
|
|
|
|
padding-left: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.ant-input-prefix { |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
.fan { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: top; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: top; |
|
|
|
|
} |
|
|
|
|
.fan /deep/ .ant-form-item { |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
// .fan /deep/ .ant-select-search__field__placeholder{ |
|
|
|
|
// top: 30%; |
|
|
|
|
|
fanfan
6 months ago