supermarkpp/src/views/match/notice.vue

<template>
    <section class="content">
        <h4>赛事公告</h4>
        <el-divider></el-divider>
        <el-form label-width="80px" class="filter-form">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="公告名称">
                        <el-input @clear="getData()" clearable v-model="queryParams.name" placeholder="请输入公告名称" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label-width="10" style='margin-left:10px'>
                        <el-button type="primary" @click="getData" size="mini">筛选</el-button>
                        <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        >新增公告</el-button>
                    </el-form-item>
                </el-col>
            </el-row>   
        </el-form>
        <el-table v-loading='loading' :data="list" style="width: 100%;margin-top:10px;" height="50vh">
                <el-table-column align="center" prop="name" label="公告名称"/>
                <el-table-column align="center"  prop="ctime" label="创建时间"/>
                <el-table-column align="center"  prop="date" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==1">编辑中</span>
                        <span v-if="scope.row.status==2">上线</span>
                        <span v-if="scope.row.status==-1">下线</span>
                    </template>
                </el-table-column>
                <el-table-column align="center"  prop="date" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" size="mini" type="warning">编辑</el-button>
                        <el-button @click="del(scope.row.id)" size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <Page
            ref="pageButton"
            :current="form.page"
            :page_size="form.page_size"
            :total="total"
            @pageChange="gopage"
        />
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="比赛名称" prop="name">
                    <el-input clearable v-model="form.name" placeholder="请输入比赛名称"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="start_time">
                    <el-date-picker
                    v-model="form.start_time"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="end_time">
                    <el-date-picker
                    v-model="form.end_time"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="open=false">取 消</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
import Page from "../../components/Page";
export default {
    components: {
        Page,
    },
    data(){
        return{
            loading:false,
            queryParams:{
                page:1
            },
            form:{},
            list:[{},{}],
            total:0,
            title:'新增赛事',
            open:false,
            rules:{
                name: [
                    { required: true, message: '请输入比赛名称', trigger: 'blur' }
                ],
                start_time: [
                    { required: true, message: '请输入开始时间', trigger: 'blur' }
                ],
                end_time: [
                    { required: true, message: '请输入结束时间', trigger: 'blur' }
                ]
            },
            matchList:[],
            groupList:[],
            userList:[]
        }
    },
    methods:{
        del(id) {
        this.$confirm("确定删除吗?", "提示", {
            type: "warning",
        }).then(() => {
            this.$api.delArticle({ id: id }).then((res) => {
            this.$message({
                message: "删除成功",
                type: "success",
            });
            this.getData();
            });
        });
        },
        gopage(size) {
            if (size) {
                this.queryParams.page_size = size;
            }
            this.queryParams.page = this.$refs.pageButton.page;
            this.getData();
        },
        getData(){
            this.loading = true;
            // 
            this.$api.getArticleList(this.queryParams).then(res=>{
                this.list=res.data.data.list
                this.total = res.data.data.total;
                this.loading = false;
            })
        },
        handleAdd(){
            this.open=true;
            this.title='新增赛事';
            this.form={}
            this.$router.push({path:'/addNotice'})
        },
        handleEdit(row){
            this.open=true;
            this.title='新增赛事';
            // this.form={}
            this.$router.push({path:'/addNotice',query:{id:row.id}})
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                if (this.form.id != null) {
                    this.$api.updateMatch(this.form).then(response => {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getData();
                    });
                } else {
                    this.$api.addMatch(this.form).then(response => {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getData();
                    });
                }
        }
      });
    },
    },
    created(){
       this.getData() 
    }
}
</script>