|
|
|
|
@ -1,88 +1,47 @@ |
|
|
|
|
<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 label="数据渠道" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|
|
|
|
<a-select |
|
|
|
|
v-decorator="[`open_channel`]" |
|
|
|
|
allowClear |
|
|
|
|
mode="multiple" |
|
|
|
|
@change="getChannel" |
|
|
|
|
placeholder="请选择渠道" |
|
|
|
|
> |
|
|
|
|
<a-select-option :value="item.id" v-for="item in checkList" :key="item.id"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
<div style="color: rgba(0, 0, 0, 0.45); font-size: 12.5px; line-height: 20px"> |
|
|
|
|
注：数据渠道未选择时则代表所有渠道 |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<!-- {{form.getFieldValue('fliter_condition')}} --> |
|
|
|
|
<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 |
|
|
|
|
> |
|
|
|
|
<div class="fan"> |
|
|
|
|
<a-tree-select |
|
|
|
|
:key="k.id" |
|
|
|
|
style="width: 100%; margin-right: 8px; margin-top: 3px" |
|
|
|
|
placeholder="请选择商品分类" |
|
|
|
|
:dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" |
|
|
|
|
:treeData="formData.categoryList" |
|
|
|
|
treeCheckable |
|
|
|
|
allowClear |
|
|
|
|
showCheckedStrategy="SHOW_ALL" |
|
|
|
|
@select="onSelect(index, $event)" |
|
|
|
|
@focus="handleSelectChange(index)" |
|
|
|
|
v-decorator="[`category${k.id}`, { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]" |
|
|
|
|
></a-tree-select> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-input |
|
|
|
|
placeholder="利润值" |
|
|
|
|
prefix=">" |
|
|
|
|
suffix="元" |
|
|
|
|
v-decorator="[`profit${k.id}`, { rules: [{ required: true, message: '请输入利润值' }] }]" |
|
|
|
|
style="width: 94%; margin-right: 8px" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-input |
|
|
|
|
placeholder="利润率" |
|
|
|
|
prefix=">" |
|
|
|
|
suffix="%" |
|
|
|
|
v-decorator="[`profit_rate${k.id}`, { rules: [{ required: true, message: '请输入利润率' }] }]" |
|
|
|
|
style="width: 94%; margin-right: 8px" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-icon |
|
|
|
|
style="margin-top: 30rpx" |
|
|
|
|
v-if="form.getFieldValue('fliter_condition').length > 0" |
|
|
|
|
class="dynamic-delete-button" |
|
|
|
|
type="minus-circle-o" |
|
|
|
|
:disabled="form.getFieldValue('fliter_condition').length === 1" |
|
|
|
|
@click="() => handleRemoveCondition(index)" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item v-bind="formItemLayoutWithOutLabel"> |
|
|
|
|
<a-button type="dashed" style="width: calc(50% + 8px)" @click="handleAddCondition"> |
|
|
|
|
<a-icon type="plus" /> 新增过滤数据 |
|
|
|
|
</a-button> |
|
|
|
|
</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-card :bordered="false"> |
|
|
|
|
<div class="card-title">{{ $route.meta.title }}</div> |
|
|
|
|
<a-spin :spinning="isLoading"> |
|
|
|
|
<a-form :form="form" @submit="handleSubmit"> |
|
|
|
|
<a-form-item label="选择渠道" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|
|
|
|
<a-select v-decorator="[`open_channel`]" allowClear mode="multiple" @change="getChannel" placeholder="请选择渠道"> |
|
|
|
|
<a-select-option :value="item.id" v-for="item in checkList" :key="item.id"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
<div style="color: rgba(0, 0, 0, 0.45); font-size: 12.5px; line-height: 20px"> |
|
|
|
|
注：渠道未选择时则代表所有渠道 |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<!-- {{form.getFieldValue('fliter_condition')}} --> |
|
|
|
|
<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> |
|
|
|
|
<div class="fan"> |
|
|
|
|
<a-tree-select :key="k.id" style="width: 100%; margin-right: 8px; margin-top: 3px" placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable checkStrictly |
|
|
|
|
allowClear showCheckedStrategy="SHOW_ALL" @change="onChange(k.id, $event)" @select="onSelect(index, $event)" @focus="handleSelectChange(index)" |
|
|
|
|
v-decorator="[`category${k.id}`, { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"></a-tree-select> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-input placeholder="利润值" prefix=">" suffix="元" v-decorator="[`profit${k.id}`, { rules: [{ required: true, message: '请输入利润值' }] }]" style="width: 94%; margin-right: 8px" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-input placeholder="利润率" prefix=">" suffix="%" v-decorator="[`profit_rate${k.id}`, { rules: [{ required: true, message: '请输入利润率' }] }]" style="width: 94%; margin-right: 8px" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-icon style="margin-top: 30rpx" v-if="form.getFieldValue('fliter_condition').length > 0" class="dynamic-delete-button" type="minus-circle-o" :disabled="form.getFieldValue('fliter_condition').length === 1" |
|
|
|
|
@click="() => handleRemoveCondition(index)" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item v-bind="formItemLayoutWithOutLabel"> |
|
|
|
|
<a-button type="dashed" style="width: calc(50% + 8px)" @click="handleAddCondition"> |
|
|
|
|
<a-icon type="plus" /> 新增筛选条件 |
|
|
|
|
</a-button> |
|
|
|
|
</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> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -92,259 +51,271 @@ 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${x.id}`] = x.profit |
|
|
|
|
record[`profit_rate${x.id}`] = x.profit_rate |
|
|
|
|
record[`category${x.id}`] = x.category |
|
|
|
|
categoryAry.push(`category${x.id}`) |
|
|
|
|
profitAry.push(`profit${x.id}`) |
|
|
|
|
profitRateAry.push(`profit_rate${x.id}`) |
|
|
|
|
this.form.getFieldDecorator(`category${x.id}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit${x.id}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit_rate${x.id}`, { 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: { |
|
|
|
|
onChange(id, event) { |
|
|
|
|
console.log(id, event) |
|
|
|
|
}, |
|
|
|
|
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${x.id}`] = x.profit |
|
|
|
|
record[`profit_rate${x.id}`] = x.profit_rate |
|
|
|
|
record[`category${x.id}`] = x.category |
|
|
|
|
categoryAry.push(`category${x.id}`) |
|
|
|
|
profitAry.push(`profit${x.id}`) |
|
|
|
|
profitRateAry.push(`profit_rate${x.id}`) |
|
|
|
|
this.form.getFieldDecorator(`category${x.id}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit${x.id}`, { initialValue: '', preserve: true }) |
|
|
|
|
this.form.getFieldDecorator(`profit_rate${x.id}`, { 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 } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
convertToString(value) { |
|
|
|
|
if (typeof value == 'number') { |
|
|
|
|
return String(value); |
|
|
|
|
} |
|
|
|
|
return value; |
|
|
|
|
}, |
|
|
|
|
// 获取当前详情记录 |
|
|
|
|
getDetail() { |
|
|
|
|
this.isLoading = true |
|
|
|
|
Api.info() |
|
|
|
|
.then((result) => { |
|
|
|
|
// 当前记录 |
|
|
|
|
result.data.storeInfo.open_channel = result.data.storeInfo.open_channel |
|
|
|
|
? this.convertToString(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${x.id}`], |
|
|
|
|
profit: values[`profit${x.id}`], |
|
|
|
|
profit_rate: values[`profit_rate${x.id}`], |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// 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 = {} |
|
|
|
|
if (values.fliter_condition) { |
|
|
|
|
params.fliter_condition = values.fliter_condition.map((x, i) => { |
|
|
|
|
return { |
|
|
|
|
category: values[`category${x.id}`], |
|
|
|
|
profit: values[`profit${x.id}`], |
|
|
|
|
profit_rate: values[`profit_rate${x.id}`], |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
params.fliter_condition = [] |
|
|
|
|
} |
|
|
|
|
// 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> |
|
|
|
|
/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
8 months ago