dy-admin-manager/src/views/teamBuild/components/forecast-list.vue

<template>
    <div class="forecastName">

        <div class="m-core">
            <save-form
                :inline="true"
                @reset="onReSet"
                @submit="search"
                :model="searchForm"
                ref="searchForm"
            >
                <el-form-item>
                    <el-input
                        v-model.trim="searchForm.name"
                        clearable
                        @keyup.enter.native="search"
                        placeholder="学生编号/姓名/手机号"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="isAllowAdjust">
                    <el-select
                        v-model.trim="searchForm.isAllowAdjust"
                        clearable
                        placeholder="是否允许调剂"
                    >
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select clearable v-model="searchForm.subjectId" placeholder="所选专业">
                        <el-option v-for="item in selects.subjects" :value="item.id" :label="item.name" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" native-type="seach">搜索</el-button>
                    <el-button native-type="reset" type="primary">重置</el-button>
                </el-form-item>
            </save-form>
            <div class="tableWrap">
                <el-table
                style="width: 100%"
                :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
                :data="tableList"
                >
                    <el-table-column
                        align="center"
                        prop="userId"
                        label="学员编号"
                    >
                        <template slot-scope="scope">
                            <copy-text>{{ scope.row.userId }}</copy-text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="userName"
                        label="学员姓名"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="gender"
                        label="性别"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.gender ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="phone"
                        label="联系电话"
                    >
                        <template slot-scope="scope">
                            <copy-text>{{ scope.row.phone }}</copy-text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="年级班级"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.currentGrade }}{{ scope.row.currentClass }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="subjectFirstName"
                        label="选报声部"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.subjectFirstName ? scope.row.subjectFirstName : null }}
                            {{ !scope.row.subjectFirstName && scope.row.subjectFirst == 999 ? '听从老师安排' : null }}，
                            {{ scope.row.subjectSecondName ? scope.row.subjectSecondName : null }}
                            {{ !scope.row.subjectSecondName && scope.row.subjectSecond == 999 ? '听从老师安排' : null }}
                            <!-- {{ scope.row.subjectFirstName }}，{{ scope.row.subjectSecondName }} -->
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="isAllowAdjust"
                        label="是否服从调剂"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.isAllowAdjust ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="realName"
                        label="乐器准备方式"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.kitPurchaseMethod == 1 ? '参与团购' : '自行准备' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="isRegistered"
                        label="是否已报名"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.isRegistered ? '是' : '否' }}
                        </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>
        </div>

    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { queryPreApplyList } from '../api'
export default {
    name: 'forecastName',
    components: { pagination },
    data() {
        const query = this.$route.query
        return {
            musicGroupId: query.id,
            searchForm: {
                name: null,
                subjectId: null,
                isAllowAdjust: null,
            },
            tableList: [],
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 0, // 总条数
                page_size: [10, 20, 40, 50], // 选择限制显示条数
            },
        }
    },
    mounted() {
        this.$store.dispatch('setSubjects')
        this.getList()
    },
    methods: {
        onReSet() {
            this.$refs['searchForm'].resetFields()
            this.search()
        },
        search() {
            this.pageInfo.page = 1
            this.getList()
        },
        async getList() {
            try {
                const result = await queryPreApplyList({
                    ...this.searchForm,
                    musicGroupId: this.musicGroupId,
                    page: this.pageInfo.page,
                    rows: this.pageInfo.limit
                })
                this.tableList = result.data.rows
                this.pageInfo.total = result.data.total
            } catch (error) {}
        }
    }
}
</script>

<style lang="less" scoped>

</style>