<template>
<div>
<h1
style=
"margin:0;padding:10px 10px;font-size:20px;color:#333333;background-color:rgb(243,243,243);"
>创建满赠促销活动
</h1>
<div
class=
"lit"
>
<template>
<el-tabs
v-model="activeName2"
type=
"card"
@tab-click="handleClick"
>
<el-tab-pane
label=
"单品促销"
name=
"first"
></el-tab-pane>
<el-tab-pane
label=
"类目促销"
name=
"second"
></el-tab-pane>
<el-tab-pane
label=
"品牌促销"
name=
"third"
></el-tab-pane>
</el-tabs>
<el-form
:model="ruleForm"
:rules="rules"
ref=
"ruleForm"
label-width=
"120px"
class=
"demo-ruleForm"
>
<el-form-item
label=
"促销名称："
prop=
"name"
>
<el-input
style=
"width:50%;"
v-model="ruleForm.name"
></el-input>
</el-form-item>
<el-form-item
label=
"促销规则："
required
>
<el-radio
v-model="ruleForm.radio"
label=
"1"
>备选项
</el-radio>
<el-radio
v-model="ruleForm.radio"
label=
"2"
>备选项
</el-radio>
</el-form-item>
<el-form-item
>
<div
v-if="ruleForm.radio==
1"
style=
"display:inline-block;"
>
满
<el-input
style=
"width:80px;margin:0 10px;"
v-model="ruleForm.number"
></el-input>元
</div>
<div
v-else-if="ruleForm.radio==
2"
style=
"display:inline-block;"
>
满
<el-input
style=
"width:80px;margin:0 10px;"
v-model="ruleForm.number"
></el-input>件
</div>
<el-button
style=
"margin:0 10px;"
type=
"primary"
@click="addshop"
>添加赠品
</el-button>
</el-form-item>
<el-form-item>
<el-table
:data="
this.$store.state.mad.addgoodslist"
key=
'aTable'
style=
"width: 100%"
>
<el-table-column
label=
"商品图片"
width=
"180"
>
<template
slot-scope=
"scope"
>
<img
:src="scope.row.dataPic"
class=
"imagelit"
alt=
""
>
</template>
</el-table-column>
<el-table-column
label=
"商品编号"
prop=
"goodsCode"
width=
"180"
>
</el-table-column>
<el-table-column
label=
"商品名称"
prop=
"goodsName"
width=
"180"
>
</el-table-column>
<el-table-column
label=
"操作"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item
v-if="command==
'first'"
label=
"选择货品："
required
>
<el-button
style=
"margin:0 10px;"
type=
"primary"
@click="goodssubmit"
>选择参加促销的货品
</el-button>
<el-checkbox
v-model="ruleForm.checked1"
>全场促销（全场促销可不指定货品）
</el-checkbox>
</el-form-item>
<el-form-item
v-else-if="command==
'second'"
label=
"选择类目："
required
>
<el-button
style=
"margin:0 10px;"
@click="categorysubmit"
type=
"primary"
>选择参加促销的类目
</el-button>
<el-checkbox
v-model="ruleForm.checked2"
>全场促销（全场促销可不指定货品）
</el-checkbox>
</el-form-item>
<el-form-item
v-else-if="command==
'third'"
label=
"选择品牌："
required
>
<el-button
style=
"margin:0 10px;"
@click="brandsubmit"
type=
"primary"
>选择参加促销的品牌
</el-button>
<el-checkbox
v-model="ruleForm.checked3"
>全场促销（全场促销可不指定货品）
</el-checkbox>
</el-form-item>
<el-form-item
v-if="command==
'first'"
label=
"已选择货品："
required
>
<el-table
:data="
this.$store.state.mad.goodslist"
key=
'firstTable'
style=
"width:800"
>
<el-table-column
label=
"商品图片"
width=
"180"
>
<template
slot-scope=
"scope"
>
<img
:src="scope.row.dataPic"
class=
"imagelit"
alt=
""
>
</template>
</el-table-column>
<el-table-column
label=
"商品编号"
prop=
"goodsCode"
width=
"180"
>
</el-table-column>
<el-table-column
label=
"商品名称"
prop=
"goodseName"
width=
"180"
>
</el-table-column>
<el-table-column
label=
"操作"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item
v-else-if="command==
'second'"
label=
"已选择类目："
required
>
<div>123
</div>
<template>
<el-table
:data="
this.$store.state.mad.categorylist"
key=
'secondTable'
style=
"width: 100%"
>
<el-table-column
label=
"分类编号"
prop=
"classtreeCode"
width=
"180"
>
</el-table-column>
<el-table-column
label=
""
prop=
""
width=
"180"
>
</el-table-column>
<el-table-column
label=
"分类名称"
prop=
"classtreeName"
width=
"180"
>
</el-table-column>
<el-table-column
label=
"操作"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-form-item>
<el-form-item
v-else-if="command==
'third'"
label=
"已选择品牌："
required
>
<el-table
:data="
this.$store.state.mad.brandslist"
key=
'thirdTable'
style=
"width: 100%"
>
<el-table-column
label=
"品牌编号"
prop=
"brandCode"
width=
"180"
>
</el-table-column>
<el-table-column
width=
"180"
>
</el-table-column>
<el-table-column
label=
"品牌名称"
prop=
"brandName"
width=
"180"
>
</el-table-column>
<el-table-column
label=
"操作"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item
label=
"开始时间："
required
>
<el-date-picker
v-model="ruleForm.value1"
type=
"datetime"
prop=
"date1"
placeholder=
"选择开始时间"
>
</el-date-picker>
</el-form-item>
<el-form-item
label=
"结束时间："
required
>
<el-date-picker
v-model="ruleForm.value2"
type=
"datetime"
prop=
"date2"
placeholder=
"选择结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item
label=
"活动站点"
>
<el-checkbox
v-model="ruleForm.checkeds"
>WAP
</el-checkbox>
</el-form-item>
<el-form-item
label=
"促销描述"
prop=
"type"
>
<!-- //富文本选择器 -->
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@click="submitForm(
'ruleForm')"
>立即创建
</el-button>
<el-button
@click="resetForm(
'ruleForm')"
>重置
</el-button>
</el-form-item>
</el-form>
</template>
<div>
<!-- 添加赠品 -->
<addshop></addshop>
<!-- 选择货品 -->
<shoppinggoods></shoppinggoods>
<!-- 选择类目 -->
<shoppingcategory></shoppingcategory>
<!-- 选择品牌 -->
<shoppingbrand></shoppingbrand>
</div>
</div>
</div>
</template>
<script>
import shoppinggoods
from
"./shoppinggoods";
import shoppingcategory
from
"./shoppingcategory";
import shoppingbrand
from
"./shoppingbrand";
import addshop
from
"./addshop";
export
default {
components: {
shoppinggoods,
shoppingbrand,
shoppingcategory,
addshop
},
data() {
return {
tableData: [{
date:
'2016-05-02',
name:
'王小虎',
address:
'上海市普陀区金沙江路 1518 弄'
}, {
date:
'2016-05-04',
name:
'王小虎',
address:
'上海市普陀区金沙江路 1517 弄'
}, {
date:
'2016-05-01',
name:
'王小虎',
address:
'上海市普陀区金沙江路 1519 弄'
}, {
date:
'2016-05-03',
name:
'王小虎',
address:
'上海市普陀区金沙江路 1516 弄'
}],
activeName2:
'first',
command:
"first",
ruleForm: {
name:
'',
value1:
"",
value2:
"",
region:
'',
date1:
'',
date2:
'',
delivery:
false,
type: [],
resource:
'',
desc:
'',
radio:
"1",
checked1:
false,
checked2:
false,
checked3:
false,
checkeds:
true
//活动站点
},
rules: {
name: [
{ required:
true, message:
'请输入活动名称', trigger:
'blur' },
{ min:
3, max:
5, message:
'长度在 3 到 5 个字符', trigger:
'blur' }
],
date1: [
{ type:
'date', required:
true, message:
'请选择开始时间', trigger:
'change' }
],
date2: [
{ type:
'date', required:
true, message:
'请选择结束时间', trigger:
'change' }
],
type: [
{ type:
'array', required:
true, message:
'请至少选择一个活动性质', trigger:
'change' }
],
resource: [
{ required:
true, message:
'请选择活动资源', trigger:
'change' }
],
desc: [
{ required:
true, message:
'请填写活动形式', trigger:
'blur' }
]
}
};
},
methods: {
addshop(){
//添加赠品
this.$store.commit(
'addgoods',
true);
console.log(
1);
console.log(
this.$store.state.mad.addgoodsdialogTableVisible);
},
handleClick(tab, event) {
//头部点击切换
console.log(tab.name, event);
this.command=tab.name;
console.log(
"error");
},
submitForm(formName) {
//立即创建
this.$refs[formName].validate((valid)
=> {
if (valid) {
alert(
'submit!');
}
else {
console.log(
'error submit!!');
return
false;
}
});
},
resetForm(formName) {
//重置
this.$refs[formName].resetFields();
},
handleDelete(index, row) {
//删除
console.log(index, row);
},
goodssubmit(){
//打开促销货品列表
this.$store.commit(
'goodschange',
true);
console.log(
1);
console.log(
this.$store.state.mad.goodsdialogTableVisible);
},
categorysubmit(){
//打开促销类目列表
this.$store.commit(
'categorychange',
true);
console.log(
2);
console.log(
this.$store.state.mad.categorydialogTableVisible);
},
brandsubmit(){
//打开促销品牌列表
this.$store.commit(
'brandchange',
true);
console.log(
3);
console.log(
this.$store.state.mad.branddialogTableVisible);
}
}
};
</script>
<style
scoped
>
.lit{
padding:
10px;
}
.imagelit{
width:
100px;
height:
100px;
}
</style>
本文主要设置到多个el-table报错_self.$scopedSlots.default is not a function,此时的解决办法是设置key=""
确保每一个el-table具有唯一性<
el-table key='firstTable' v-if="first"></el-table>