<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" :multipleSelected="multipleSelected">
|
<template slot="condition">
|
<el-button type="primary" size="mini" @click="handleFilter">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</template>
|
<template 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?getArrayLable(formLabel[0].opts,scope.row.promotionType):'限时抢购'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="活动状态" width="100px" show-overflow-tooltip
|
v-if="isShowPromotionStatus">
|
<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"></el-table-column>
|
<slot></slot>
|
</template>
|
</filter-dialog>
|
</template>
|
<script>
|
import filterDialog from '@/components/filterDialog/filterDialog.vue'
|
import proActivityApi from '@/api/promotion/proActivity'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
import timeLimitBuyApi from '@/api/promotion/timeLimitBuy'
|
export default {
|
components: { filterDialog },
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: null
|
},
|
multipleSelected: {
|
type: Boolean,
|
default: true
|
},
|
// 是否展示活动状态
|
isShowPromotionStatus: {
|
type: Boolean,
|
default: false
|
},
|
// 查询指定活动状态的数据
|
promotionStatusList: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
showDialog: false,
|
listQuery: {
|
promotionType: null,
|
promotionName: null,
|
promotionStatusList: ['00'],
|
promotionStartTime: null,
|
promotionEndTime: null
|
},
|
tableData: [],
|
total: 0,
|
loading: false,
|
formLabel: [
|
{
|
model: 'promotionType',
|
label: '活动类型',
|
type: 'select',
|
sm: 9,
|
opts: [
|
{
|
id: '1',
|
name: '满减'
|
},
|
{
|
id: '2',
|
name: '满赠'
|
},
|
{
|
id: '3',
|
name: '盲盒抽奖'
|
},
|
{
|
id: '4',
|
name: '限时抢购'
|
},
|
{
|
id: '6',
|
name: '拼团活动'
|
}
|
],
|
clearable: false
|
},
|
{
|
model: 'promotionName',
|
label: '活动名称',
|
type: 'input',
|
sm: 9
|
},
|
{
|
model: 'promotionStartTime',
|
label: '活动开始时间',
|
type: 'date',
|
labelWidth: '100px',
|
sm: 9
|
},
|
{
|
model: 'promotionEndTime',
|
label: '活动结束时间',
|
type: 'date',
|
valueFormat: 'yyyy-MM-dd 23:59:59',
|
labelWidth: '100px',
|
sm: 9
|
}
|
],
|
selectedRows: null
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.showDialog = this.show
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
showDialog: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
if (!newDialogShow) {
|
this.$nextTick(() => {
|
this.initForm() // 初始化表单
|
})
|
}
|
},
|
'listQuery.promotionType': {
|
handler: function (newValue, oldValue) {
|
if (newValue) {
|
this.$nextTick(() => {
|
this.$refs.table.changeCondition()
|
})
|
}
|
}
|
}
|
},
|
methods: {
|
/**
|
* 获取活动状态
|
*/
|
getStatusText(promotionStatus) {
|
switch (promotionStatus) {
|
case '00':
|
return '未开始'
|
case '02':
|
return '进行中'
|
case '08':
|
return '已暂停'
|
default:
|
break
|
}
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* '获取选中的数据
|
*/
|
handSelected(rows) {
|
this.selectedRows = rows
|
},
|
/**
|
* 弹出框关闭事件处理
|
*/
|
handleDialogClose() {
|
if (this.selectedRows) {
|
this.$emit('hand-selected-row-data', this.selectedRows)
|
}
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 搜索条件变更处理
|
*/
|
handleFilter() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 初始化表单
|
*/
|
initForm() {
|
for (const key in this.listQuery) {
|
this.listQuery[key] = null
|
}
|
},
|
/**
|
* 分页信息改变时,列表查询
|
*/
|
handPageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 限时秒杀
|
*/
|
limitTimegetList(pageInfo) {
|
timeLimitBuyApi.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
|
})
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo) {
|
this.loading = true
|
if (this.promotionStatusList && this.promotionStatusList.length) {
|
this.listQuery.promotionStatusList = [...this.promotionStatusList]
|
}
|
if (this.listQuery.promotionType !== '4') {
|
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
|
})
|
} else {
|
this.limitTimegetList(pageInfo)
|
}
|
}
|
}
|
}
|
</script>
|
