edu_train_web_new/user_web/src/view/admin/ManageUser.vue

<script setup>
import { computed, onMounted, onUnmounted, watch, ref } from "vue";
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
const router = useRouter();

// let state = ref({
//     organizationList: [],
//     userListParams: {
//         keyword: '',
//         page: 1,
//         limit: 5,
//     },
//     userList: [],
//     userTotal: 0,
//     showDialog: false,
//     ids: [],
//     showDel: false,
// });

let state = ref({
    // 全部班级列表
    "organizationList": [
        {
            "orgType": {
                "code": "class",
                "name": "专业班级"
            },
            "id": 656845035987013,
            "name": "2025级通讯班",
            "pid": 656843881177157,
            "code": null,
            "type": "class",
            "weigh": 0
        }
    ],
    // 用户提交分页查询数据
    "userListParams": {
        // 搜索的内容
        "keyword": "",
        // 第几页
        "page": 1,
        // 每页显示多少数据
        "limit": 5
    },
    // 具体分页的数据
    "userList": [
        {
            "id": 661434193309765,
            "level": 0,
            "orgName": "信息论与编码基础教研组",
            "zoneName": null,
            "rolesName": [
                "教师"
            ],
            "createTime": "2025-04-03 10:42:39",
            "name": "教师测试账号",
            "code": null,
            "username": "teacher",
            "phone": null,
            "duty": null,
            "photo": null,
            "orgId": 656844968038469,
            "roles": [
                661429664665669
            ],
            "email": null,
            "status": 1,
            "type": 1
        },
        {
            "id": 668917601919045,
            "level": 0,
            "orgName": "2025级通讯班",
            "zoneName": null,
            "rolesName": [
                "学生"
            ],
            "createTime": "2025-04-24 14:12:43",
            "name": "刘瑾见",
            "code": "110220",
            "username": "14367845673",
            "phone": null,
            "duty": null,
            "photo": null,
            "orgId": 656845035987013,
            "roles": [
                661441664479301
            ],
            "email": null,
            "status": 1,
            "type": 0
        },
        {
            "id": 668916601290821,
            "level": 0,
            "orgName": "2025级通讯班",
            "zoneName": null,
            "rolesName": [
                "学生"
            ],
            "createTime": "2025-04-24 14:08:39",
            "name": "王伟",
            "code": "1234525",
            "username": "13234367546",
            "phone": null,
            "duty": null,
            "photo": null,
            "orgId": 656845035987013,
            "roles": [
                661441664479301
            ],
            "email": null,
            "status": 1,
            "type": 0
        },
        {
            "id": 668923933716550,
            "level": 0,
            "orgName": "2025级通讯班",
            "zoneName": null,
            "rolesName": [
                "学生"
            ],
            "createTime": "2025-04-24 14:38:29",
            "name": "威威",
            "code": "25242345",
            "username": "1431163",
            "phone": null,
            "duty": null,
            "photo": null,
            "orgId": 656845035987013,
            "roles": [
                661441664479301
            ],
            "email": null,
            "status": 1,
            "type": 0
        },
        {
            "id": 661442553135174,
            "level": 0,
            "orgName": "2025级通讯班",
            "zoneName": null,
            "rolesName": [
                "学生"
            ],
            "createTime": "2025-04-03 11:16:40",
            "name": "学生测试账号",
            "code": null,
            "username": "student",
            "phone": null,
            "duty": null,
            "photo": {
                "name": "sl.jpg",
                "url": "/upload/Files/2025/04/28/0b326e2784ba73f56ef9f40aae86695c.jpg"
            },
            "orgId": 656845035987013,
            "roles": [
                661441664479301
            ],
            "email": null,
            "status": 1,
            "type": 2
        }
    ],
    // 用户总数量
    "userTotal": 6,
    // 是否弹出添加账号UI
    "showDialog": false,
    // 当前分页列表，多选的数据
    "ids": [],
    // 批量删除模态框
    "showDel": false,
    // 详情模态框
    "showDetails": false,
});

// 用于表单验证规则必须要的对象
const ruleFormRef = ref();

/**
 * 添加账号，最后提交的数据
 */
const userAddParams = ref({
    name: '',
    username: '',
    password: '123456',
    orgId: '',
    roles: [],
});

/**
 * 添加账号，字段相关验证规则
 */
const userAddRules = ref({
    name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
    username: [{ required: true, message: '请填写学号', trigger: 'blur' }],
    orgId: [
        {
            required: true,
            message: '请选择班级',
            trigger: 'change',
        },
    ],
});

/**
 * 查找分页数据
 */
const pageUpdateEvent = () => {
    console.log(
        "查找分页数据 pageUpdateEvent", state.value.userListParams
    );

}

/**
 * 弹出添加账号UI
 */
const btnAddStudent = (formEl) => {

    state.value.showDialog = true;
    if (!formEl) {
        return;
    }

    formEl.resetFields();
}

/**
 * 触发搜索账号逻辑
 */
const btnSearchName = () => {
    pageUpdateEvent();
}

/**
 * 更新选中的班级逻辑
 * @param val 
 */
const classChange = (val) => {
    state.value.userListParams.orgId = val;
    pageUpdateEvent();
}

/**
 * 上一页，下一页改变
 */
const handleSizeChange = (val) => {
    // 重新查找分页数据
    pageUpdateEvent();
}
/**
 * 上一页，下一页改变
 */
const handleCurrentChange = (val) => {
    // 重新查找分页数据
    pageUpdateEvent();
}

/**
 * 分页多选，更新多选的相关数据
 * @param res 
 */
const selectionChange = (res) => {
    state.value.ids = [];
    res.forEach((item) => {
        // state.value.ids.push(item.id);
        state.value.ids.push(item);
    });
    console.log("分页多选，更新多选的相关数据", state.value.ids);
}

/**
 * 添加账号的时候，选中的班级的时候
 * @param val
 */
const selectClass = (val) => {
    userAddParams.value.orgId = val;
}

/**
 * 添加账号 点击提交
 * @param formEl
 */
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            
            console.log(
                "userAddParams", userAddParams.value
            );

            // 接口请求完成，隐藏模态框
            state.value.showDialog = false;

        } else {
            // console.log('error submit!', fields)
        }
    })
}

/**
 * 删除选中分页的某个数据
 * @param res 
 */
const btnDel = (res) => {

    console.log(
        "删除选中分页的某个数据", res
    );

    ElMessage({
        type: 'success',
        message: '删除成功',
    });

    // 重新查找分页数据
    pageUpdateEvent();
    
}

/**
 * 弹出批量删除模态框逻辑
 */
const btnShowDel = () => {
    if (state.value.ids && state.value.ids.length > 0) {
        state.value.showDel = true
    }
}

/**
 * 开始批量删除处理
 */
const btnBatchDel = () => {

    console.log(
        "开始批量删除处理", state.value.ids
    );

    ElMessage({
        type: 'success',
        message: '删除成功',
    });

    // 重新查找分页数据
    pageUpdateEvent();

    // 批量选中的列表重置
    state.value.ids = [];
    // 隐藏模态框
    state.value.showDel = false;
        
}

/**
 * 弹出指定分页详情
 * @param res 
 */
const btnDetail = (res) => {
    console.log('弹出指定分页详情', res);

    userAddParams.value = {
        name: '名字',
        username: '账号',
        password: '123456',
        orgId: '11111111',
        roles: [],
    }

    state.value.showDetails = true;

}

</script>

<template>
    <div class="ManageUser">
        
        <div class="content commonsScrollbar">
            <div class="contentTitle">
                <div class="contentTitle-line"></div>
                <div class="contentTitle-text">账号管理</div>
            </div>
            <div class="contentRow">
                <div class="rowLeft">
                    <div class="rowSelect">
                        <el-select
                            v-model="state.userListParams.orgId"
                            clearable
                            placeholder="全部班级"
                            size="large"
                            style="width: 15rem"
                            @change="classChange"
                        >
                            <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </div>
                    <div class="rowBtn rowBtn1" @click="btnAddStudent(ruleFormRef)">
                        <img src="./assets/img/manageUser/add.svg" alt="" />
                        <span class="rowBtn-text rowBtn-text1">添加账号</span>
                    </div>
                    <div class="rowBtn rowBtn2">
                        <img src="./assets/img/manageUser/download.svg" alt="" />
                        <span class="rowBtn-text rowBtn-text2">模板下载</span>
                    </div>
                    <div class="rowBtn rowBtn1">
                        <img src="./assets/img/manageUser/import.svg" alt="" />
                        <span class="rowBtn-text rowBtn-text1">批量导入</span>
                    </div>
                    <div class="rowBtn rowBtn1">
                        <img src="./assets/img/manageUser/export.svg" alt="" />
                        <span class="rowBtn-text rowBtn-text1">批量导出</span>
                    </div>
                    <div class="rowBtn rowBtn3" @click="btnShowDel">
                        <img src="./assets/img/manageUser/delete.svg" alt="" />
                        <span class="rowBtn-text rowBtn-text3">批量删除</span>
                    </div>
                </div>
                <div class="rowRight">
                    <el-input
                        v-model="state.userListParams.keyword"
                        :prefix-icon="Search"
                        clearable
                        style="width: 17rem; height: 3rem"
                        placeholder="搜索账号/姓名"
                        @clear="btnSearchName"
                    />
                    <div class="rowSearch" @click="btnSearchName">搜索</div>
                </div>
            </div>
            <div class="contentTable commonsScrollbar">
                <el-table :data="state.userList" style="width: 100%" @selection-change="selectionChange">
                    <el-table-column align="center" type="selection" width="110" />
                    <el-table-column prop="name" label="账号" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="orgName" label="班级" />
                    <el-table-column prop="orgName" label="状态" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="primary" @click="btnDetail(scope.row)">详情</el-button>
                            <el-popconfirm :title="`你确定删除${scope.row.name}吗?`" @confirm="btnDel(scope.row)">
                                <template #reference>
                                    <el-button link type="danger" style="margin-left: 3rem">移除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                class="classPagination"
                v-model:current-page="state.userListParams.page"
                v-model:page-size="state.userListParams.limit"
                :page-sizes="[10, 20, 50, 100]"
                background
                :layout="' ->, total,prev, pager, next, jumper'"
                :total="state.userTotal"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>

        <!-- 添加账号模态框 -->
        <el-dialog v-model="state.showDialog" class="dialog">
            <template #header>
                <div class="dialog-title">添加账号</div>
            </template>
            <div class="dialogBody">
                <el-form ref="ruleFormRef" :model="userAddParams" :rules="userAddRules">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="userAddParams.name" clearable placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="学号" prop="username">
                        <el-input v-model="userAddParams.username" type="number" clearable placeholder="请填写学号"></el-input>
                    </el-form-item>
                    <el-form-item label="学校" prop="orgId">
                        <el-select v-model="userAddParams.orgId" clearable placeholder="请选择学校" @change="selectClass">
                            <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级" prop="orgId">
                        <el-select v-model="userAddParams.orgId" clearable placeholder="请选择班级" @change="selectClass">
                            <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="dialogFoot">
                    <el-button color="#EAEAEA" @click="state.showDialog = false" style="margin-right: 0.6rem">取消</el-button>
                    <el-button color="#2C68FF" @click="submitForm(ruleFormRef)">确认</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 账号详情模态框 -->
        <!-- <el-dialog v-model="state.showDetails" class="dialog">
            <template #header>
                <div class="dialog-title">账号详情</div>
            </template>
            <div class="dialogBody">
                <el-form :model="userAddParams">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="userAddParams.name" clearable disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="学号" prop="username">
                        <el-input v-model="userAddParams.username" type="number" clearable disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="学校" prop="orgId">
                        <el-select v-model="userAddParams.orgId" clearable disabled="true" >
                            <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级" prop="orgId">
                        <el-select v-model="userAddParams.orgId" clearable disabled="true" >
                            <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog> -->

        <!-- 用于批量删除模态框 -->
        <el-dialog v-model="state.showDel" width="600" class="del">
            <template #header>
                <div style="display: flex; align-items: center">
                    <img class="del-img" src="./assets/img/manageUser/error-line.svg" alt="" />
                    <div class="del-name">批量删除</div>
                </div>
            </template>
            <span class="delBody">是否确认删除学生信息？删除后不可恢复！</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.showDel = false">取消</el-button>
                    <el-button type="primary" @click="btnBatchDel">删除</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<style lang="scss" scoped>
@use './css/commonsScrollbar.scss';

.ManageUser * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;

    user-select: none;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.ManageUser {

    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #ffffff;
    
    .content {

        position: relative;
        width: 100%;
        height: 100%;

        border-radius: 1rem;
        background: #ffffff;
        padding: 2rem 4rem 2rem 3rem;
        box-sizing: border-box;
        .contentTitle {
            padding: 0 0.5rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .contentTitle-line {
                width: 0.35rem;
                height: 2rem;
                background: #2c68ff;
                border-radius: 0.85rem;
            }
            .contentTitle-text {
                font-weight: bold;
                font-size: 1.8rem;
                color: #373737;
                margin-left: 1.4rem;
            }
        }
        .contentRow {
            margin-top: 2.8rem;
            padding: 0 1.5rem 0 1rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .rowLeft {
                display: flex;
                align-items: center;
                .rowSelect {
                    :deep(.el-select__wrapper) {
                        height: 3rem;
                        font-size: 1.1rem;
                        min-height: 0;
                        border-radius: 0.57rem;
                    }
                }
                .rowBtn {
                    cursor: pointer;
                    width: 8.8rem;
                    height: 3rem;
                    border-radius: 0.57rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 2rem;

                    img {
                        width: 1.5rem;
                        height: 1.5rem;
                    }
                    .rowBtn-text {
                        font-size: 1.15rem;
                        margin-left: 0.7rem;
                    }
                    .rowBtn-text1 {
                        color: #3d7cff;
                    }
                    .rowBtn-text2 {
                        color: #d8a216;
                    }
                    .rowBtn-text3 {
                        color: #e84d4d;
                    }
                }
                .rowBtn1 {
                    background: #e5eeff;
                    &:hover {
                        background: #edf3ff;
                    }
                }
                .rowBtn2 {
                    background: rgba(214, 154, 1, 0.1);
                    &:hover {
                        background: #f4e5bd;
                    }
                }
                .rowBtn3 {
                    background: rgba(232, 77, 77, 0.05);
                    &:hover {
                        background: #fad4d4;
                    }
                }
            }
            .rowRight {
                display: flex;
                :deep(.el-input__wrapper) {
                    font-size: 1rem;
                    border-radius: 0.57rem;
                }
                .rowSearch {
                    cursor: pointer;
                    width: 3.9rem;
                    height: 3rem;
                    background: #3d7cff;
                    border-radius: 0.57rem;
                    font-size: 1.1rem;
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 0.7rem;
                    &:hover {
                        background: #77a3ff;
                    }
                }
            }
        }
        .contentTable {
            margin-top: 2.3rem;
            height: 36rem;
            
            :deep(tr) {
                border-radius: 0.57rem;
            }
            :deep(th) {
                background: #f5f7fa;
                height: 5rem;
                font-size: 1.4rem;
                color: #333746;
                font-weight: 500;
            }
            :deep(td) {
                height: 5rem;
                font-size: 1.2rem;
                color: #333333;
            }
            :deep(.cell) {
                height: 2rem;
            }
            :deep(.el-checkbox) {
                --el-checkbox-input-height: 2rem;
                --el-checkbox-input-width: 2rem;
                --el-checkbox-border-radius: 0.28rem;
                // border: 1px solid #cad2d8;
            }
            :deep(.el-checkbox__inner:after) {
                height: 1.07rem;
                left: 0.64rem;
                top: 0.21rem;
                width: 0.5rem;
            }
            :deep(.el-checkbox__inner::before) {
                top: 0.85rem;
            }
            :deep(.el-button) {
                font-size: 1.2rem;
            }
        }
        :deep(.classPagination) {
            .el-pagination__rightwrapper {
                justify-content: center;
                .el-pagination__total {
                    color: #000000;
                }
                .btn-prev,
                .btn-next {
                    background: #f7f7f7;
                    color: #000000;
                    border-radius: 1rem;
                }
                .number {
                    background: #f7f7f7;
                    color: #000000;
                    border-radius: 0.5rem;
                }
                .is-active {
                    background: #2c68ff;
                    color: #ffffff;
                }
                .el-pagination__jump {
                    color: #000000;
                    .el-pagination__editor.el-input {
                        width: 4.57rem;
                        .el-input__wrapper {
                            border-radius: 1rem;
                        }
                    }
                }
            }
        }
    }

    :deep(.dialog) {
        width: 55rem;
        padding: 0;
        border-radius: 1.1rem;

        .el-dialog__header {
            padding: 0px;
            margin: 0px;
        }

        .dialog-title {
        
            // width: 55rem;
            width: 100%;
            height: 5.9rem;
            background: #2c68ff;
            font-size: 1.8rem;
            color: #ffffff;
            display: flex;
            align-items: center;
            border-radius: 1.1rem 1.1rem 0 0;
            padding-left: 4rem;
            box-sizing: border-box;
        }
        .el-dialog__headerbtn {
            font-size: 1.7rem;
            width: 3.57rem;
            height: 3.57rem;
            top: 1rem;
            right: 1rem;
            .el-dialog__close {
                color: #ffffff;
                font-size: 3.7rem;
            }
        }
        .dialogBody {
            padding: 0.8rem 8rem 3.5rem 6.7rem;
            box-sizing: border-box;
            .el-form-item {
                align-items: center;
                margin-bottom: 2rem;
            }
            .el-form-item__label {
                font-size: 1.2rem;
                color: #000000;
                padding-right: 2rem;
            }
            .el-input {
                height: 3.7rem;
                --el-input-bg-color: #efefef;
                font-size: 1.2rem;
                --el-input-border-radius: 0.57rem;
                --el-input-border-color: #efefef;
                --el-input-focus-border-color: #efefef;
                --el-input-hover-border-color: #efefef;
                .el-input__wrapper {
                    padding: 0 2rem;
                }
            }
            .el-select {
                .el-select__wrapper {
                    height: 3.7rem;
                    background-color: #efefef;
                    font-size: 1.2rem;
                    border-radius: 0.57rem;
                    // box-shadow: 0 0 0 1px #efefef inset;
                    padding: 0 2rem;
                    .el-select__caret {
                        color: #555555;
                    }
                }
            }
            .dialogFoot {
                display: flex;
                justify-content: end;
                margin-top: 4rem;
                .el-button {
                    width: 8.5rem;
                    height: 3.2rem;
                    border-radius: 0.57rem;
                    font-size: 1.2rem;
                }
            }
        }
    }
    :deep(.del) {
        .del-img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.3rem;
        }
        .del-name {
            font-size: 1.2rem;
            color: #e84d4d;
        }
        .el-dialog__body {
            width: 100%;
            height: 10rem;
            display: flex;
            justify-content: center;
            padding-top: 3rem;
            color: #000000;
            box-sizing: border-box;
            font-size: 1.2rem;
        }
    }
    
}
</style>