dy-admin-manager/src/views/luckyDraw/lotteryManager.vue

<!--  -->
<template>
    <div class="m-container">
        <h2>
            <div class="squrt"></div>抽奖活动管理
        </h2>
        <!-- <div class="newBand" v-permission="'luckDrawGroup/add'" @click="onOperationLottery('create')">添加</div> -->
        <!-- 搜索标题 -->
        <save-form :inline="true"
                class="searchForm"
                @submit="getList"
                :model="searchForm">
        <el-form-item >
            <el-input v-model.trim="searchForm.search" clearable
                    placeholder="请输入活动名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button native-type="submit"
                    type="danger">搜索</el-button>
        </el-form-item>
        </save-form>
        <el-button
            v-permission="'luckDrawGroup/add'" @click="onOperationLottery('create')"
            type="primary"
            style="margin-bottom:20px"
        >
            添加
        </el-button>
        <!-- 列表 -->
        <div class="tableWrap">
            <el-table :data="tableList"
                        :header-cell-style="{background:'#EDEEF0',color:'#444'}">
                <el-table-column align="center"
                                prop="name"
                                label="活动名称"></el-table-column>
                <el-table-column align="center"
                                prop="startTime"
                                label="活动开始时间">
                </el-table-column>
                <el-table-column align="center"
                                prop="endTime"
                                label="活动结束时间">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="onOperationLottery('update', scope.row)" v-permission="'luckDrawGroup/update'" type="text">修改</el-button>
                        <el-button @click="onLook(scope.row)" v-permission="'/trophyManager'" type="text">奖品设置</el-button>
                        <el-button @click="onLottery(scope.row)"  v-permission="'/lotteryRecord'"  type="text">抽奖记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination sync :total.sync="pageInfo.total"
                        :page.sync="pageInfo.page"
                        :limit.sync="pageInfo.limit"
                        :page-sizes="pageInfo.page_size"
                        @pagination="getList" />
        </div>

        <el-dialog :title="formTitle[formActionTitle]"
                :visible.sync="lotteryStatus"
                @close="onFormClose('ruleForm')"
                width="550px">
            <el-form :model="form"
                    :rules="rules"
                    label-width="100PX"
                    ref="ruleForm">
                <el-form-item label="活动名称"
                            prop="name">
                <el-input v-model.trim="form.name"
                            autocomplete="off"
                            placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item label="活动时间"
                            prop="time">
                    <el-date-picker
                        style="width: 100%"
                        v-model="form.time"
                        :picker-options="{ firstDayOfWeek: 1 }"
                        type="datetimerange"
                        :default-time="['00:00:00', '23:59:59']"
                        range-separator="至"
                        start-placeholder="活动开始日期"
                        end-placeholder="活动结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer"
                    class="dialog-footer">
                <el-button @click="lotteryStatus = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import dayjs from 'dayjs';
import cleanDeep from 'clean-deep';
import { luckDrawGroupList, luckDrawGroupAdd, luckDrawGroupUpdate } from './api'
export default {
    components: { pagination },
    data () {
        return {
            searchForm: {
                search: null,
            },
            formTitle: {
                create: "添加活动",
                update: "修改活动"
            },
            formActionTitle: 'create',
            lotteryStatus: false,
            tableList: [],
            form: {
                name: null,
                time: null
            },
            rules: {
                name: [{required: true, message:'请输入活动名称', trigger: 'blur'}],
                time: [{required: true, message:'请选择活动时间', trigger: 'change'}]
            },
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 1, // 总条数
                page_size: [10, 20, 40, 50] // 选择限制显示条数
            }
        };
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        // 设置默认为当前周
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        this.getList()
    },
    methods: {
        onOperationLottery(type, data) {
            this.formActionTitle = type
            if(type == 'update') {
                this.$nextTick(() => {
                    this.form = {
                        id: data.id,
                        name: data.name,
                        time: [data.startTime, data.endTime]
                    }
                })
            }
            this.lotteryStatus = true
        },
        onSubmit(formName) {
            this.$refs[formName].validate(item => {
                if(item) {
                    console.log(this.form)
                    let form = Object.assign({}, this.form)
                    let params = {
                        name: form.name,
                        consumeType: 'TIMES',
                        consumeValue: 1,
                        startTime: dayjs(form.time[0]).format('YYYY-MM-DD HH:mm:ss'),
                        endTime: dayjs(form.time[1]).format('YYYY-MM-DD HH:mm:ss'),
                    }
                    if(this.formActionTitle == 'create') {
                        luckDrawGroupAdd(params).then(res => {
                            this.messageTips('添加', res)
                        })
                    } else if(this.formActionTitle == 'update') {
                        params.id = form.id
                        luckDrawGroupUpdate(params).then(res => {
                            this.messageTips('修改', res)
                        })
                    }
                }
            })
        },
        onFormClose(formName) {
            this.$refs[formName].resetFields()
        },
        messageTips (title, res) {
            if (res.code == 200) {
                this.$message.success(title + '成功')
                this.lotteryStatus = false
                this.getList()
            } else {
                this.$message.error(res.msg)
            }
        },
        getList() {
            let params = Object.assign({}, this.searchForm)
            params.rows = this.pageInfo.limit
            params.page = this.pageInfo.page
            luckDrawGroupList(cleanDeep(params)).then(res => {
                if (res.code == 200 && res.data) {
                    this.tableList = res.data.rows
                    this.pageInfo.total = res.data.total
                }
            })
        },
        onLook(row) {
            this.$router.push({
                path: '/trophyManager',
                query: {
                    groupId: row.id
                }
            })
        },
        onLottery(row){
             this.$router.push({
                path: '/luckyDraw/lotteryRecord',
                query: {
                    groupId: row.id
                }
            })

        }
    }
};
</script>