CEES-manage/src/views/modules/h5/student.vue

<template>
    <div class="mod-user">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.userName" placeholder="用户身份码" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
<!--                <el-button v-if="isAuth('stu:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
                <el-button v-if="isAuth('stu:user:delete')" type="danger" @click="deleteHandle()"
                           :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
                <template slot-scope="scope">
                    {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="userId" header-align="center" align="center" width="100" label="用户身份码">
            </el-table-column>
            <el-table-column prop="userName" header-align="center" align="center" label="学生名">
            </el-table-column>
            <el-table-column prop="studentId" header-align="center" align="center" label="学号">
            </el-table-column>
            <el-table-column prop="phone" header-align="center" align="center" label="手机号">
            </el-table-column>
            <!--            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">-->
            <!--            </el-table-column>-->
<!--            <el-table-column prop="identity" header-align="center" align="center" label="身份">-->
<!--                <template slot-scope="scope">-->
<!--                    {{ isIdentity(scope.row.identity) }}-->
<!--                </template>-->
<!--            </el-table-column>-->

            <el-table-column
                header-align="center"
                align="center"
                prop="groupId"
                label="所属分组"
                :filters="groupIdes"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    {{ getgroups(scope.row.groupId) }}
                </template>
            </el-table-column>
            <el-table-column prop="status" header-align="center" align="center" label="是否第一次阅卷">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 1" size="small" >是</el-tag>
                    <el-tag v-else size="small" type="danger">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button v-if="isAuth('stu:user:update')" type="text" size="small"
                               @click="addOrUpdateHandle(scope.row.id)">修改
                    </el-button>
                    <el-button v-if="isAuth('stu:user:delete')" type="text" size="small"
                               @click="deleteHandle(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                       :page-sizes="[5,10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
import AddOrUpdate from './student-add-or-update'
import {isAuth} from "@/utils";
import myRequest from "@/views/modules/h5/myRequest";

export default {
    data() {
        return {
            dataForm: {
                userName: ''
            },
            temp:0,
            dataList: [],
            pageIndex: 1,
            pageSize: 5,
            totalCount: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false,
            groupIdes: [],
        }
    },
    components: {
        AddOrUpdate
    },
    activated() {
        this.getDataList()
        this.groupIdes=[]
        // 获取分组
        myRequest.getGroupList(this)
    },
    computed: {},
    methods: {
        // isAuth,
        // 分组过滤
        filterTag(value, row) {
            return row.groupId === value;
        },
        getgroups(id) {
            try {
                let groupIdes = this.groupIdes
                return groupIdes[id - 1].text
            }catch (e) {
                // console.log(e)
                return "未分组"
            }

        },
        // 获取数据列表
        getDataList() {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/stu/list'),
                method: 'get',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'userId': this.dataForm.userName
                })
            }).then(({data}) => {
                if (data && data.code === 200) {
                    this.dataList = data.page.list
                    this.totalCount = data.page.totalCount
                } else {
                    this.dataList = []
                    this.totalCount = 0
                }
                this.dataListLoading = false
            })
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },
        // 新增 / 修改
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },
        // 删除
        deleteHandle(userid) {
            var userIds = userid ? [userid] : this.dataListSelections.map(item => item.id)
            this.$confirm(`确定对[userid=${userIds.join(',')}]进行[${userid ? '删除' : '批量删除'}]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: this.$http.adornUrl('/stu/delete'),
                    method: 'post',
                    data: this.$http.adornData(userIds, false)
                }).then(({data}) => {
                    if (data && data.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => this.getDataList()
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            }).catch(() => {
            })
        }
    }
}
</script>