wangmingchuan
/
yanzong_vue_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

西

Browse Source
main
fanfan 10 months ago
parent 4e6cf6a3ee
commit f5b87fb608
1 changed files with 320 additions and 327 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 647
      src/views/goods/distributionPrice/Index.vue

647
src/views/goods/distributionPrice/Index.vue
Unescape View File

@ -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%;

Write Preview
Loading…
Cancel
Save