supermarkpp/src/views/match/group.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-select v-model="queryParams.match_id" placeholder="请选择比赛" size="mini">
                            <el-option v-for="item in matchList" :key='item.id' :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </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="match_name" label="比赛名称"/>
                <el-table-column align="center"  prop="join_count" label="参赛人数"/>
                <el-table-column align="center"  prop="out_count" label="退赛人数"/>
                <el-table-column align="center"  prop="date" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="title='编辑分组',open=true,form=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="match_id">
                    <el-select v-model="form.match_id" placeholder="请选择比赛">
                        <el-option v-for="item in matchList" :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </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' }
                ],
                match_id: [
                    { required: true, message: '请选择比赛', trigger: 'blur' }
                ],
            },
            matchList:[],
            groupList:[],
            userList:[]
        }
    },
    methods:{
        del(id) {
        this.$confirm("确定删除吗?", "提示", {
            type: "warning",
        }).then(() => {
            this.$api.delGroup({ 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.getMatchList().then(res=>{
                this.matchList=res.data.data
            })
            this.$api.getGroupList().then(res=>{
                this.groupList=res.data.data
            })
            this.$api.getUserSearch().then(res=>{
                this.userList=res.data.data
            })
            // 
            this.$api.getGroups(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={}
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                if (this.form.id != null) {
                    this.$api.updateGroup(this.form).then(response => {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getData();
                    });
                } else {
                    this.$api.addGroup(this.form).then(response => {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getData();
                    });
                }
        }
      });
    },
    },
    created(){
       this.getData() 
    }
}
</script>