supermarkpp/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="5">
                    <el-form-item label="用户">
                        <el-input clearable @clear="getData()" v-model="queryParams.username" placeholder="请输入用户名/代码" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="比赛名称" prop="match_id">
                        <el-select clearable v-model="queryParams.match_id" placeholder="请选择比赛" size="mini" @change="getData()">
                            <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="5">
                    <el-form-item label="比赛分组">
                        <el-select clearable v-model="queryParams.groupId" placeholder="请选择比赛分组" size="mini" @change="getData()">
                        <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 label-width="10" style='margin-left:10px'>
                        <el-button type="primary" @click="getData" size="mini">筛选</el-button>
                        <el-button type="nomal" @click="queryParams={},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-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="nomal" @click="queryParams={},getData()" size="mini">重置</el-button>
                        <el-button
                        type="danger"
                        plain
                        size="mini"
                        icon="el-icon-warning"
                        @click="resetInitFund"
                        >重置初始资金</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_name" label="比赛分组"/>
                <el-table-column align="center"  prop="fund" label="初始资金(万元)"/>
                <!-- <el-table-column align="center"  prop="badge" 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="edit(scope.row.id)" 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="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,
                page_size:10
            },
            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:{
        del(id) {
            this.$confirm("删除选手会删除相关数据,确定删除吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.delPlayer({ 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.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={}
        },
        edit(id){
            this.title = "编辑选手"
            this.$api.getPlayerInfo({id:id}).then(res=>{
                this.form = res.data.data
                this.open = true
            })
        },
        resetInitFund(){
            if(!this.queryParams.match_id){
                this.$message.error("请先选择比赛!")
                return
            }
            this.$confirm("该操作会将指定比赛所有选手的初始资金清空，您确认要重置选手的初始资金?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.resetInitFund(this.queryParams).then(res=>{
                    this.getData();
                })
            });
        },
        /** 提交按钮 */
        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>