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

@ -1,78 +1,49 @@
<template> <template>
<a-card :bordered="false"> <a-card :bordered="false">
<div class="card-title">{{ $route.meta.title }}</div> <div class="card-title">{{ $route.meta.title }}</div>
<a-spin :spinning="isLoading"> <a-spin :spinning="isLoading">
<a-form :form="form" @submit="handleSubmit"> <a-form :form="form" @submit="handleSubmit">
<a-form-item v-bind="formItemLayoutWithOutLabel"> <a-form-item v-bind="formItemLayoutWithOutLabel">
<div class="msg"> <div class="msg">
<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 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-form-item <a-tree-select style="width: 100%; margin-right: 8px; margin-top: 3px" placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable allowClear treeCheckStrictly
v-for="(k, index) in form.getFieldValue('fliter_condition')" @select="onSelect(index, $event)" @focus="handleSelectChange(index)" v-decorator="[`category${index}`, { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"></a-tree-select>
:key="k.id" <div style="width: 100%">
:label="index === 0 ? '分销模版' : ''" <div class="fan" v-for="(k, index) in form.getFieldValue('fliter_condition')" :key="k.id">
:labelCol="labelCol" <a-form-item style="margin-right: 15px; width: 33%">
v-bind="index === 0 ? { wrapperCol } : formItemLayoutWithOutLabel" <a-input placeholder="利润值" suffix="元" v-decorator="[`profit${index}`, { rules: [{ required: true, message: '请输入利润值' }] }]" style="width: 100%; margin-right: 8px; text-align: center" />
required </a-form-item>
> <a-form-item style="margin-right: 15px; width: 33%">
<a-tree-select <a-input placeholder="利润率" suffix="%" v-decorator="[`profit_rate${index}`, { rules: [{ required: true, message: '请输入利润率' }] }]" style="width: 100%; margin-right: 8px; text-align: center" />
style="width: 100%; margin-right: 8px; margin-top: 3px" </a-form-item>
placeholder="请选择商品分类" <div style="width: 33%; text-align: center"><span>0</span>~<span>90</span></div>
:dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" </div>
:treeData="formData.categoryList" <div style="width: 100%">
treeCheckable <a-button type="dashed" style="width: calc(40% + 8px); margin-right: 50px" @click="handleAddPriceRate(index)">
allowClear <a-icon type="plus-circle" /> 新增价格区间 </a-button><a-button type="dashed" style="width: calc(40% + 8px)" @click="handleRemovePriceRate(index)">
treeCheckStrictly <a-icon type="minus-circle-o" /> 删除价格区间
@select="onSelect(index, $event)" </a-button>
@focus="handleSelectChange(index)" </div>
v-decorator="[`category${index}`, { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]" </div>
></a-tree-select> </a-form-item>
<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-form-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> <a-form-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
<a-button type="primary" html-type="submit">提交</a-button> <a-button type="primary" html-type="submit">提交</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-spin> </a-spin>
</a-card> </a-card>
</template> </template>
<script> <script>
@ -82,273 +53,295 @@ import * as GoodsApi from '@/api/goods'
import GoodsModel from '@/common/model/goods/Index' import GoodsModel from '@/common/model/goods/Index'
import { isEmpty } from '@/utils/util' import { isEmpty } from '@/utils/util'
export default { export default {
data() { data() {
return { return {
// //
labelCol: { span: 3 }, labelCol: { span: 3 },
// //
wrapperCol: { span: 10 }, wrapperCol: { span: 10 },
// loading // loading
isLoading: false, isLoading: false,
// //
form: this.$form.createForm(this), form: this.$form.createForm(this),
// //
formData: GoodsModel.formData, formData: GoodsModel.formData,
record: {}, record: {},
checkList: [], checkList: [],
formItemLayoutWithOutLabel: { formItemLayoutWithOutLabel: {
wrapperCol: { span: 10, offset: 3 }, wrapperCol: { span: 10, offset: 3 },
}, },
} }
}, },
// //
created() { created() {
this.isLoading = true this.isLoading = true
// form // form
GoodsModel.getFromData().then(() => { GoodsModel.getFromData().then(() => {
this.isLoading = false this.isLoading = false
}) })
this.form.getFieldDecorator('fliter_condition', { initialValue: [], preserve: true }) this.form.getFieldDecorator('fliter_condition', { initialValue: [], preserve: true })
this.getDataList() // this.getDataList() //
// //
this.getDetail() this.getDetail()
}, },
methods: { methods: {
onSelect(index, event) { onSelect(index, event) {
const { form, $nextTick } = this const { form, $nextTick } = this
const key = form.getFieldValue('fliter_condition') const key = form.getFieldValue('fliter_condition')
for (let i = 0; i < key.length; i++) { for (let i = 0; i < key.length; i++) {
if (i == index) { if (i == index) {
key[i].category.push(event.value) key[i].category.push(event.value)
} }
} }
$nextTick(() => { $nextTick(() => {
form.setFieldsValue({ form.setFieldsValue({
fliter_condition: key, fliter_condition: key,
}) })
this.$forceUpdate() this.$forceUpdate()
}) })
}, },
deleteNodeById(nodes, ids) { deleteNodeById(nodes, ids) {
let that = this let that = this
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
nodes[i].disabled = false nodes[i].disabled = false
if (ids.includes(nodes[i].value) == true) { if (ids.includes(nodes[i].value) == true) {
nodes[i].disabled = true nodes[i].disabled = true
} }
if (nodes[i].children && nodes[i].children.length > 0) { if (nodes[i].children && nodes[i].children.length > 0) {
that.deleteNodeById(nodes[i].children, ids) // that.deleteNodeById(nodes[i].children, ids) //
} }
} }
return nodes return nodes
}, },
handleSelectChange(index, event) { handleSelectChange(index, event) {
const { form, $nextTick } = this const { form, $nextTick } = this
const key = form.getFieldValue('fliter_condition') const key = form.getFieldValue('fliter_condition')
let category = [] let category = []
for (let i = 0; i < key.length; i++) { for (let i = 0; i < key.length; i++) {
if (i !== index) { if (i !== index) {
key[i].category.forEach((item) => { key[i].category.forEach((item) => {
//forEach //forEach
category.push(item) category.push(item)
}) })
} }
} }
$nextTick(() => { $nextTick(() => {
this.formData.categoryList = this.deleteNodeById(this.formData.categoryList, category) this.formData.categoryList = this.deleteNodeById(this.formData.categoryList, category)
this.formData = this.formData this.formData = this.formData
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({
form.setFieldsValue({ fliter_condition: nextKeys,
fliter_condition: nextKeys, })
}) },
}, //
generateRandomString(length) { handleRemovePriceRate() {
let result = '' const { form } = this
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' const keys = form.getFieldValue('fliter_condition')
const charactersLength = characters.length if (keys.length === 0) {
for (let i = 0; i < length; i++) { return
result += characters.charAt(Math.floor(Math.random() * charactersLength)) }
} keys.pop()
return result form.setFieldsValue({
}, fliter_condition: keys,
// })
getDataList() { this.$forceUpdate()
return GoodsApi.getDataList().then((result) => { },
const obj = result.data //
Object.keys(obj).forEach((item) => { handleAddPriceRate() {
this.checkList.push({ id: item, name: obj[item] }) 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) }])
formatCategoryIds(categoryIds) { form.setFieldsValue({
return categoryIds.map((id) => { fliter_condition: nextKeys,
return { value: id } })
}) },
}, generateRandomString(length) {
// let result = ''
setFieldsValue() { const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
const { record, form, $nextTick } = this const charactersLength = characters.length
const profitAry = [] for (let i = 0; i < length; i++) {
const profitRateAry = [] result += characters.charAt(Math.floor(Math.random() * charactersLength))
const categoryAry = [] }
if (record.fliter_condition) { return result
record.fliter_condition = JSON.parse(record.fliter_condition) },
record.fliter_condition = record.fliter_condition.map((x) => { //
x.id = this.generateRandomString(8) getDataList() {
return x return GoodsApi.getDataList().then((result) => {
}) const obj = result.data
record.fliter_condition.forEach((x, i) => { Object.keys(obj).forEach((item) => {
record[`profit${i}`] = x.profit this.checkList.push({ id: item, name: obj[item] })
record[`profit_rate${i}`] = x.profit_rate })
record[`category${i}`] = this.formatCategoryIds(x.category) })
categoryAry.push(`category${i}`) },
profitAry.push(`profit${i}`) formatCategoryIds(categoryIds) {
profitRateAry.push(`profit_rate${i}`) return categoryIds.map((id) => {
this.form.getFieldDecorator(`category${i}`, { initialValue: '', preserve: true }) return { value: id }
this.form.getFieldDecorator(`profit${i}`, { initialValue: '', preserve: true }) })
this.form.getFieldDecorator(`profit_rate${i}`, { initialValue: '', preserve: true }) },
}) //
} setFieldsValue() {
if (record.open_channel) { const { record, form, $nextTick } = this
const list = record.open_channel const profitAry = []
const channelAry = [] const profitRateAry = []
this.checkList.map((item) => { const categoryAry = []
if (list.indexOf(item.id) != -1) { if (record.fliter_condition) {
channelAry.push(item.name) record.fliter_condition = JSON.parse(record.fliter_condition)
} record.fliter_condition = record.fliter_condition.map((x) => {
}) x.id = this.generateRandomString(8)
this.form.open_channel = channelAry return x
} })
// record.fliter_condition.forEach((x, i) => {
!isEmpty(form.getFieldsValue()) && record[`profit${i}`] = x.profit
$nextTick(() => { record[`profit_rate${i}`] = x.profit_rate
form.setFieldsValue( record[`category${i}`] = this.formatCategoryIds(x.category)
pick(record, ['open_channel', 'fliter_condition', ...profitAry, ...profitRateAry, ...categoryAry]) categoryAry.push(`category${i}`)
) profitAry.push(`profit${i}`)
this.$forceUpdate() profitRateAry.push(`profit_rate${i}`)
}) this.form.getFieldDecorator(`category${i}`, { initialValue: '', preserve: true })
}, this.form.getFieldDecorator(`profit${i}`, { initialValue: '', preserve: true })
formatCategoryIds(categoryIds) { this.form.getFieldDecorator(`profit_rate${i}`, { initialValue: '', preserve: true })
return categoryIds.map((id) => { })
return { value: id } }
}) if (record.open_channel) {
}, const list = record.open_channel
// const channelAry = []
getDetail() { this.checkList.map((item) => {
this.isLoading = true if (list.indexOf(item.id) != -1) {
Api.info() channelAry.push(item.name)
.then((result) => { }
// })
result.data.storeInfo.open_channel = result.data.storeInfo.open_channel this.form.open_channel = channelAry
? result.data.storeInfo.open_channel.split(',') }
: undefined //
this.record = result.data.storeInfo !isEmpty(form.getFieldsValue()) &&
// $nextTick(() => {
this.setFieldsValue() form.setFieldsValue(
}) pick(record, ['open_channel', 'fliter_condition', ...profitAry, ...profitRateAry, ...categoryAry])
.finally(() => (this.isLoading = false)) )
}, this.$forceUpdate()
getChannel(val) { })
this.form.open_channel = val },
}, formatCategoryIds(categoryIds) {
// return categoryIds.map((id) => {
handleSubmit(e) { return { value: id }
e.preventDefault() })
// },
const { //
form: { validateFields }, getDetail() {
onFormSubmit, this.isLoading = true
} = this Api.info()
validateFields((errors, values) => { .then((result) => {
!errors && onFormSubmit(values) //
}) 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 // api
onFormSubmit(values) { onFormSubmit(values) {
const params = {} const params = {}
params.fliter_condition = values.fliter_condition.map((x, i) => { params.fliter_condition = values.fliter_condition.map((x, i) => {
return { return {
category: values[`category${i}`], category: values[`category${i}`],
profit: values[`profit${i}`], profit: values[`profit${i}`],
profit_rate: values[`profit_rate${i}`], profit_rate: values[`profit_rate${i}`],
} }
}) })
if (params.fliter_condition.length > 0) { if (params.fliter_condition.length > 0) {
params.fliter_condition.forEach((item) => { params.fliter_condition.forEach((item) => {
item.category = Array.from(item.category, ({ value }) => value) item.category = Array.from(item.category, ({ value }) => value)
}) })
} }
params.open_channel = values.open_channel ? values.open_channel.join(',') : '' params.open_channel = values.open_channel ? values.open_channel.join(',') : ''
params.fliter_condition = params.fliter_condition.length > 0 ? params.fliter_condition : [] params.fliter_condition = params.fliter_condition.length > 0 ? params.fliter_condition : []
this.isLoading = true this.isLoading = true
Api.update({ form: params }) Api.update({ form: params })
.then((result) => { .then((result) => {
// //
this.$message.success(result.message, 1.5) this.$message.success(result.message, 1.5)
this.getDetail() this.getDetail()
}) })
.catch(() => { .catch(() => {
this.isLoading = false this.isLoading = false
}) })
.finally(() => (this.isLoading = false)) .finally(() => (this.isLoading = false))
}, },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.msg { .msg {
width: 100%; width: 100%;
background: #ffe7e7; background: #ffe7e7;
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
padding: 5px 25px; padding: 5px 25px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 16px; font-size: 16px;
span { span {
width: 33%; width: 33%;
text-align: center; text-align: center;
} }
} }
/deep/.ant-form-item-control { /deep/.ant-form-item-control {
padding-left: 10px; padding-left: 10px;
.ant-form-item-control { .ant-form-item-control {
padding-left: 0; padding-left: 0;
} }
} }
/deep/.ant-input-prefix { /deep/.ant-input-prefix {
font-weight: bold; font-weight: bold;
} }
.fan { .fan {
display: flex; display: flex;
align-items: top; align-items: top;
} }
.fan /deep/ .ant-form-item { .fan /deep/ .ant-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
// .fan /deep/ .ant-select-search__field__placeholder{ // .fan /deep/ .ant-select-search__field__placeholder{
// top: 30%; // top: 30%;

Loading…
Cancel
Save