<template>
|
<div>
|
<list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
|
:tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="24" :offset="0" class="buttonPosition">
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="活动名称" prop="promotionName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="活动时间" width="400px">
|
<template slot-scope="scope">
|
<span>{{scope.row.promotionStartTime}} ~ {{scope.row.promotionEndTime}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="250px"></el-table-column>
|
<el-table-column label="活动状态" width="200px">
|
<template slot-scope="scope">
|
{{getArrayLable(formLabel[1].opts,scope.row.promotionStatus)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${4 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<div ref="actionCol">
|
<wly-btn @click="detailsInfo(scope.row,scope.$index)">详情</wly-btn>
|
<wly-btn v-if="scope.row.promotionStatus === '02' || scope.row.promotionStatus === '08'"
|
:type="scope.row.promotionStatus === '02' ? 'primary':'success'"
|
@click="updateStatus(scope.row,scope.$index)">
|
{{scope.row.promotionStatus === '02' ? '暂停':'启用'}}
|
</wly-btn>
|
<wly-btn v-if="scope.row.promotionStatus === '02'" type="primary"
|
@click="updateInactiveStatus(scope.row,scope.$index)">
|
停用
|
</wly-btn>
|
<wly-btn type="primary"
|
v-if="scope.row.promotionStatus === '00'||scope.row.promotionStatus === '08'"
|
@click="editItem(scope.row,scope.$index)">编辑</wly-btn>
|
<wly-btn type="primary" @click="editItem(scope.row,scope.$index,'copy')">复制</wly-btn>
|
<wly-btn type="danger" v-if="scope.row.promotionStatus !== '02'"
|
@click="deleteItem(scope.row,scope.$index)">删除</wly-btn>
|
</div>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<el-dialog :visible.sync="dialogVisible" title="活动详情" class="proActivity"
|
:close-on-click-modal="false" :modal-append-to-body="false" width="50%">
|
<pro-activity-info :form="form" :isShowSpuStorage="isShowSpuStorage"></pro-activity-info>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import proActivityApi from '@/api/promotion/proActivity'
|
import proActivityInfo from '@/views/proActivity/components/proActivityInfo.vue'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
var _this = null
|
export default {
|
components: {
|
proActivityInfo
|
},
|
props: ['promotionType', 'addProActivityInfo', 'editProActivityInfo', 'page', 'isShowSpuStorage'],
|
data() {
|
return {
|
tableData: [],
|
total: 0,
|
dialogVisible: false,
|
listQuery: {
|
promotionName: null,
|
promotionStatus: null,
|
promotionStartTime: null,
|
promotionEndTime: null
|
},
|
form: {},
|
formLabel: [
|
{
|
model: 'promotionName',
|
label: '活动名称',
|
type: 'input'
|
},
|
{
|
model: 'promotionStatus',
|
label: '活动状态',
|
type: 'select',
|
opts: [
|
{
|
id: '00',
|
name: '未开始'
|
},
|
{
|
id: '02',
|
name: '进行中'
|
},
|
{
|
id: '07',
|
name: '已停用'
|
},
|
{
|
id: '08',
|
name: '已暂停'
|
},
|
{
|
id: '06',
|
name: '已结束'
|
}
|
]
|
},
|
{
|
model: 'promotionStartTime',
|
label: '活动开始时间',
|
labelWidth: '100px',
|
type: 'date',
|
pickerOptions: {
|
disabledDate(time) {
|
return _this.listQuery.promotionEndTime && time.getTime() >= new Date(_this.listQuery.promotionEndTime).getTime() + 86400000
|
}
|
}
|
},
|
{
|
model: 'promotionEndTime',
|
label: '活动结束时间',
|
labelWidth: '100px',
|
type: 'date',
|
valueFormat: 'yyyy-MM-dd 23:59:59',
|
pickerOptions: {
|
disabledDate(time) {
|
return _this.listQuery.promotionStartTime && time.getTime() <= new Date(_this.listQuery.promotionStartTime).getTime() - 86400000
|
}
|
}
|
}
|
]
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
created() {
|
_this = this
|
},
|
methods: {
|
/**
|
* 修改活动状态
|
*/
|
async updateStatus(row, index) {
|
try {
|
const promotionStatus = row.promotionStatus === '02' ? '08' : '00'
|
const res = await proActivityApi.updateStartOrStop({ promotionId: row.promotionId, promotionStatus })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 修改活动状态为已停用
|
*/
|
async updateInactiveStatus(row, index) {
|
this.$confirm('停用后活动不可在开启，确定要停用吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
try {
|
const res = await proActivityApi.updateStartInactive({ promotionId: row.promotionId })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
}).catch(() => { })
|
},
|
/**
|
* 查看详情
|
*/
|
detailsInfo(row, index) {
|
proActivityApi.detailsInfo({ promotionId: row.promotionId }).then(res => {
|
if (res.data) {
|
this.form = res.data
|
this.form.preferentialWay = res.data.preferentialInfo[0].preferentialWay
|
this.form.avtivityTypeText = res.data.promotionType === '1' ? '满减' : '满赠'
|
if (this.form.promoPic.length > 32) {
|
this.form.promoPic = JSON.parse(this.form.promoPic).map(item => { return item.url })
|
}
|
this.dialogVisible = true
|
}
|
})
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.$router.push({ name: this.addProActivityInfo })
|
},
|
/**
|
*编辑
|
*/
|
editItem(row, index, f) {
|
const query = {
|
id: row.promotionId
|
}
|
if (f === 'copy') {
|
query.isCopy = true
|
}
|
this.$router.push({ name: this.editProActivityInfo, query })
|
},
|
/**
|
* 删除
|
*/
|
deleteItem(row, index) {
|
this.$confirm('确认删除该数据？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
proActivityApi.deleteItem({ promotionId: row.promotionId }).then(res => {
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryData()
|
}
|
})
|
}).catch(() => { })
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
this.listQuery.promotionType = this.promotionType
|
proActivityApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.proActivity {
|
.el-dialog__body {
|
padding: 15px 20px;
|
height: 600px;
|
max-height: 800px;
|
position: relative;
|
overflow: hidden;
|
.proActivityInfo {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: -17px;
|
bottom: 0;
|
overflow-y: scroll;
|
padding: 5px 10px;
|
}
|
}
|
}
|
</style>
|
