<template>
|
<div class="addActivity">
|
<el-button type="success" size="mini" @click="addActivity">添加活动</el-button>
|
<el-button size="mini" @click="clearTable">清空</el-button>
|
<el-table :data="tableData" border>
|
<el-table-column label="活动名称" prop="promotionName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="活动类型" prop="promotionType" width="120px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.promotionType?getArrayLable(promotionTypeList,scope.row.promotionType):'限时抢购'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="活动状态" width="120px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{getStatusText(scope.row.promotionStatus)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="活动时间" width="300px">
|
<template slot-scope="scope">
|
<span>{{scope.row.promotionStartTime}} ~ {{scope.row.promotionEndTime}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
|
<slot name="activityTableRow"></slot>
|
<el-table-column width="100px" label="操作">
|
<template slot-scope="scope">
|
<el-form-item>
|
<el-button type="danger" size="mini" @click="deleteItem(scope.row,scope.$index)">删除
|
</el-button>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
<proActivity-selected :show.sync='selectedActivityDialog.show'
|
:title="selectedActivityDialog.title"
|
@hand-selected-row-data="handSelectedRowData"
|
:isShowPromotionStatus="true" :promotionStatusList="promotionStatusList">
|
</proActivity-selected>
|
</div>
|
</template>
|
<script>
|
import proActivitySelected from '@/views/proActivity/components/proActivitySelected.vue'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
export default {
|
components: { proActivitySelected },
|
props: {
|
activityData: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
formRules: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
},
|
// 查询指定活动状态的数据
|
promotionStatusList: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
selectedActivityDialog: {
|
show: false,
|
title: '选择活动'
|
},
|
tableData: [],
|
promotionTypeList: [
|
{
|
id: '1',
|
name: '满减'
|
},
|
{
|
id: '2',
|
name: '满赠'
|
},
|
{
|
id: '3',
|
name: '盲盒抽奖'
|
},
|
{
|
id: '4',
|
name: '限时抢购'
|
},
|
{
|
id: '6',
|
name: '拼团活动'
|
}
|
]
|
}
|
},
|
watch: {
|
activityData: {
|
immediate: true, // immediate选项可以开启首次赋值监听
|
handler: function (newValue, oldValue) {
|
this.tableData = newValue
|
}
|
},
|
tableData(newValue, oldValue) {
|
this.$emit('update:activityData', newValue)
|
}
|
},
|
methods: {
|
/**
|
* 获取活动状态
|
*/
|
getStatusText(promotionStatus) {
|
switch (promotionStatus) {
|
case '00':
|
return '未开始'
|
case '02':
|
return '进行中'
|
case '06':
|
return '已结束'
|
case '07':
|
return '已停用'
|
case '08':
|
return '已暂停'
|
default:
|
break
|
}
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* 清空表格数据
|
*/
|
clearTable() {
|
this.tableData = []
|
},
|
/**
|
* 删除表格数据
|
*/
|
deleteItem(row, index) {
|
this.tableData.splice(index, 1)
|
},
|
/**
|
* 打开添加活动弹窗
|
*/
|
addActivity() {
|
this.selectedActivityDialog.show = true
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
handSelectedRowData(rows) {
|
rows.forEach(rowItem => {
|
if (!this.tableData.find(item => {
|
return rowItem.promotionId === item.promotionId
|
})) {
|
this.tableData.push(rowItem)
|
}
|
})
|
this.$emit('hand-selected', rows)
|
}
|
}
|
}
|
</script>
|
<style>
|
.addActivity .el-table {
|
margin-top: 20px;
|
}
|
</style>
|
