wanzb_admin/src/views/player/index.vue

<template>
    <section class="content">
        <h4>选手管理</h4>
        <el-divider></el-divider>
        <el-form label-width="80px" class="filter-form">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="用户">
                        <el-input clearable v-model="queryParams.username" placeholder="请输入用户名/代码" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="比赛名称" prop="match_id">
                        <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="比赛分组">
                        <el-select v-model="queryParams.groupId" placeholder="请选择比赛分组" size="mini">
                        <el-option v-for="item in groupList" :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>
                        <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="usercode" label="选手代码"/>
                <el-table-column align="center"  prop="username" label="选手名称"/>
                <el-table-column align="center"  prop="match_name" label="比赛名称"/>
                <el-table-column align="center"  prop="match_group" label="比赛分组"/>
                <el-table-column align="center"  prop="fund" label="参赛资金"/>
                <el-table-column align="center"  prop="date" label="参赛状态">
                    <template slot-scope="scope">
                        <span v-if='scope.row.match_status==1'>参赛中</span>
                        <span v-if='scope.row.match_status==0'>暂停</span>
                        <span v-if='scope.row.match_status==-1'>退赛</span>
                    </template>
                </el-table-column>
                <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>
                    </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="user_id">
                    <el-select filterable v-model="form.user_id" placeholder="请选择用户代码">
                        <el-option v-for="item in userList" :key='item.id' :label="item.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="比赛资金" prop="fund">
                    <el-input clearable v-model="form.fund" placeholder="请输入比赛资金">
                        <template slot="append">万元</template>
                    </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-item label="比赛分组" prop="match_group">
                    <el-select v-model="form.match_group" placeholder="请选择比赛分组">
                        <el-option v-for="item in groupList" :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="参数状态" prop="match_status">
                    <el-select v-model="form.match_status" placeholder="请选择参数状态">
                        <el-option key='1' label="参赛中" :value="1"></el-option>
                        <el-option key='0' label="暂停" :value="0"></el-option>
                        <el-option key='-1' label="已退赛" :value="-1"></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:{
                match_status:1
            },
            list:[{},{}],
            total:0,
            title:'新增选手',
            open:false,
            rules:{
                user_id: [
                    { required: true, message: '请选择选手', trigger: 'change' }
                ],
                fund: [
                    { required: true, message: '请输入比赛资金', trigger: 'blur' }
                ],
                match_id: [
                    { required: true, message: '请选择比赛', trigger: 'change' }
                ],
                usercode: [
                    { required: true, message: '请输入用户代码', trigger: 'blur' }
                ],
                match_group: [
                    { required: true, message: '请选择分组', trigger: 'change' }
                ],
                match_status: [
                    { required: true, message: '请选择参数状态', trigger: 'change' }
                ],
            },
            matchList:[],
            groupList:[],
            userList:[]
        }
    },
    methods:{
        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.getPlayers(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.updatePlayer(this.form).then(response => {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getData();
                    });
                } else {
                    this.$api.addPlayer(this.form).then(response => {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getData();
                    });
                }
        }
      });
    },
    },
    created(){
       this.getData() 
    }
}
</script>