<template>
|
<filter-dialog ref="table" :show.sync="showDialog" :title="title" :tableData="tableData"
|
:total="total" :form="listQuery" :formLabel="formLabel"
|
@page-info-change="handPageInfoChange" @selected="handSelected"
|
@close="handleDialogClose" :loading="loading" :emptyText='setEmptyText()'
|
dialogWidth="1200px" class="proActivity_Sel_style"
|
:multipleSelected='listQuery.promotionType==="5" || listQuery.promotionType==="4" || listQuery.promotionType==="7"?true:false'
|
:isShowPage='listQuery.promotionType!=="5"&&listQuery.promotionType!=="4"&&listQuery.promotionType!=="7"'>
|
<template v-if='listQuery.promotionType !=="5" && listQuery.promotionType !=="4" && listQuery.promotionType !=="7"'
|
slot="condition">
|
<el-col :span="8" :offset="0">
|
<el-form-item>
|
<el-button type="primary" size="mini" @click="handleFilter">查询</el-button>
|
<el-button size="mini" v-show="!type" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</template>
|
<template v-if='listQuery.promotionType ==="5"' slot="columns">
|
<el-table-column label="把用户引导到优惠券领取界面"></el-table-column>
|
</template>
|
<template v-if='listQuery.promotionType ==="4"' slot="columns">
|
<el-table-column label="把用户引导到限时秒杀界面"></el-table-column>
|
</template>
|
<template v-if='listQuery.promotionType ==="7"' slot="columns">
|
<el-table-column label="把用户引导到活动中心界面"></el-table-column>
|
</template>
|
<template v-if='listQuery.promotionType !=="5" && listQuery.promotionType !=="4" && listQuery.promotionType !=="7"'
|
slot="columns">
|
<el-table-column label="活动名称" prop="promotionName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="活动类型" prop="promotionType" width="80px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.promotionType?getLabel(formLabel[0].opts,scope.row.promotionType):'限时抢购'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="活动状态" width="100px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{getStatusText(scope.row.promotionStatus)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="活动时间" width="300px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span>{{scope.row.promotionStartTime}} ~ {{scope.row.promotionEndTime}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" show-overflow-tooltip></el-table-column>
|
<slot></slot>
|
</template>
|
</filter-dialog>
|
</template>
|
<script>
|
import filterDialog from '@/components/filterDialog/filterDialog.vue'
|
import proActivityApi from '@/api/proActivity'
|
|
export default {
|
components: { filterDialog },
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: null
|
},
|
multipleSelected: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* 外部活动类型
|
*/
|
type: {
|
type: String,
|
default: null
|
}
|
},
|
data() {
|
return {
|
showDialog: false,
|
listQuery: {
|
promotionType: '1',
|
promotionName: null,
|
promotionStartTime: null,
|
promotionEndTime: null
|
},
|
tableData: [],
|
total: 0,
|
loading: false,
|
formLabel: [],
|
selectedRows: null,
|
formData: [
|
{
|
model: 'promotionType',
|
label: '活动类型',
|
type: 'select',
|
labelWidth: '100px',
|
sm: 8,
|
opts: [
|
{
|
id: '1',
|
name: '满减'
|
},
|
{
|
id: '2',
|
name: '满赠'
|
},
|
{
|
id: '3',
|
name: '盲盒抽奖'
|
},
|
{
|
id: '4',
|
name: '限时抢购'
|
},
|
{
|
id: '5',
|
name: '优惠券'
|
},
|
{
|
id: '6',
|
name: '拼团活动'
|
},
|
{
|
id: '7',
|
name: '活动中心'
|
}
|
],
|
clearable: false,
|
disabled: this.type
|
},
|
{
|
model: 'promotionName',
|
label: '活动名称',
|
type: 'input',
|
sm: 8,
|
labelWidth: '100px',
|
},
|
{
|
model: 'promotionStartTime',
|
label: '活动开始时间',
|
type: 'date',
|
sm: 8,
|
labelWidth: '140px',
|
},
|
{
|
model: 'promotionEndTime',
|
label: '活动结束时间',
|
type: 'date',
|
valueFormat: 'yyyy-MM-dd 23:59:59',
|
sm: 8,
|
labelWidth: '140px',
|
}
|
]
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.showDialog = this.show
|
if (newShow && this.type) {
|
this.listQuery.promotionType = this.type // 把外部活动类型传给弹出层
|
}
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
showDialog: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
if (!newDialogShow) {
|
this.$nextTick(() => {
|
this.initForm() // 初始化表单
|
})
|
}
|
},
|
'listQuery.promotionType': {
|
handler: function (newValue, oldValue) {
|
if (newValue === '5' || newValue === '4' || newValue === '7') {
|
this.formLabel = JSON.parse(JSON.stringify(this.formData)).splice(0, 1)
|
this.tableData = []
|
} else {
|
this.formLabel = JSON.parse(JSON.stringify(this.formData))
|
if (newValue && this.showDialog && !this.type) {
|
this.$nextTick(() => {
|
this.$refs.table.changeCondition()
|
})
|
}
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
methods: {
|
/**
|
* 获取活动状态
|
*/
|
getStatusText(promotionStatus) {
|
switch (promotionStatus) {
|
case '00':
|
return '未开始'
|
case '02':
|
return '进行中'
|
case '08':
|
return '已暂停'
|
default:
|
break
|
}
|
},
|
/**
|
* 当表格数据为空时设置文字显示
|
*/
|
setEmptyText() {
|
switch (this.listQuery.promotionType) {
|
case '4':
|
return '把用户引导到限时秒杀界面'
|
case '5':
|
return '把用户引导到优惠券领取界面'
|
case '7':
|
return '把用户引导到活动中心界面'
|
default:
|
return '暂无数据'
|
}
|
},
|
/**
|
* 获取数组的label
|
*/
|
getLabel(array, id) {
|
var lableText = array.find((item) => {
|
return item.id === id
|
})
|
if (lableText) {
|
return lableText.name
|
}
|
return ''
|
},
|
/**
|
* '获取选中的数据
|
*/
|
handSelected(rows) {
|
this.selectedRows = rows
|
},
|
/**
|
* 弹出框关闭事件处理
|
*/
|
handleDialogClose() {
|
if (this.selectedRows) {
|
this.$emit('hand-selected-row-data', this.selectedRows)
|
}
|
if (this.listQuery.promotionType === '5' || this.listQuery.promotionType === '4' || this.listQuery.promotionType === '7') {
|
this.$emit('selected-coupon', this.listQuery.promotionType)
|
}
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 搜索条件变更处理
|
*/
|
handleFilter() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 初始化表单
|
*/
|
initForm() {
|
for (const key in this.listQuery) {
|
this.listQuery[key] = null
|
}
|
this.listQuery.promotionType = '1'
|
},
|
/**
|
* 分页信息改变时,列表查询
|
*/
|
handPageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo) {
|
this.loading = true
|
this.listQuery.promotionStatusList = ['00', '02', '08']
|
proActivityApi.getList({ ...this.listQuery, ...pageInfo }, false).then((res) => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
this.loading = false
|
} else {
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.proActivity_Sel_style {
|
.el-form-item__content {
|
margin-left: 0!important;
|
}
|
}
|
</style>
|
