edu_train_web_new/user_web/src/view/admin/ManageSchool.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';
import ManageCollege from './components/ManageSchool/ManageCollege.vue';
const router = useRouter();

import { schoolTree, schoolAdd, schoolItem, schoolUpdate, schoolDelete } from "../../api/admin/school";

// let state = ref({
//     listParams: {
//         keyword: '',
//         page: 1,
//         limit: 5,
//     },
//     list: [],
//     total: 0,
//     showDialog: false,
//     ids: [],
//     showDel: false,
// });

let state = ref({
    // 提交分页查询数据
    "listParams": {
        // 搜索的内容
        "keyword": "",
        // 第几页
        "page": 1,
        // 每页显示多少数据
        "limit": 5
    },
    // 具体分页的数据
    "list": [
        // {
        //     "id": 661434193309765,
        //     "createTime": "2025-04-03 10:42:39",
        //     "name": "学校_1",
        // },
        // {
        //     "id": 661434193309766,
        //     "createTime": "2025-04-03 10:42:39",
        //     "name": "学校_2",
        // },
        // {
        //     "id": 661434193309767,
        //     "createTime": "2025-04-03 10:42:39",
        //     "name": "学校_3",
        // },
        // {
        //     "id": 661434193309768,
        //     "createTime": "2025-04-03 10:42:39",
        //     "name": "学校_4",
        // },
        // {
        //     "id": 661434193309769,
        //     "createTime": "2025-04-03 10:42:39",
        //     "name": "学校_5",
        // },
        // {
        //     "id": 661434193309770,
        //     "createTime": "2025-04-03 10:42:39",
        //     "name": "学校_6",
        // },
    ],
    // 用户总数量
    "total": 0,
    // 是否弹出添加UI
    "showDialog": false,
    // 当前分页列表，多选的数据
    "ids": [],
    // 批量删除模态框
    "showDel": false,
    // 详情模态框
    "showDetails": false,
});

// 是否弹出新的分页窗口
let newPageOpen = ref(false);
// 新的分页窗口的数据
let newPageConfigDb = ref();
const callbackExitManageCollege = () => {
    newPageOpen.value = false;
}

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

/**
 * 添加，最后提交的数据
 */
let addParams = ref({
    name: '',
    remark: '',
});

/**
 * 初始化添加的数据
 */
const addParamsInit = () => {
    addParams.value = {
        name: '',
        remark: '',
    }
}

/**
 * 添加，字段相关验证规则
 */
let addRules = ref({
    name: [{ required: true, message: '请填写学校', trigger: 'blur' }],
    remark: [{ required: true, message: '请填写备注', trigger: 'blur' }],
});


/**
 * 详情数据,同时用于更新使用
 */
let detailsDb = ref({
    "id": null,
    "name": null,
    "type": null,
    "remark": null,
    "parentId": null,
    "schoolId": null
});

/**
 * 因为这里的接口返回的不是分页的接口，是全部数据，所以这里就记录全部数据
 * 后面通过逻辑，来控制分页的显示
 */
let pageDb = [];

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

    let submit = {
        // 默认优先去顶级所有，传 0 。 否则你要看到 学院， 专业 ，班级 的列表，这里固定就传 学院这个的id值
        "schoolId" : 0,
    };

    schoolTree(submit)
    .then(response => {

        let data = response?.data?.data;
        // console.log(
        //     "schoolTreeEvent response", response, data
        // );

        pageDb = data;
        pageDbUpdateEvent();

    }).catch(error => {
        
    });
    
}

/**
 * 因为接口不是标准的分页接口，是直接返回所有数据的
 * 这里进行单独处理，来展示第几页的数据
 */
const pageDbUpdateEvent = () => {

    // console.log(
    //     "查找分页数据 pageDbUpdateEvent", state.value.listParams, pageDb
    // );

    state.value.total = pageDb.length;
    state.value.list = [];

    let page = state.value.listParams.page;
    let limit = state.value.listParams.limit;

    // 从第几个数组下标开始
    let indexStart = (page - 1) * limit;
    // 到第几个数组下标结束
    let indexEnd = indexStart + limit - 1;

    for (let i = 0; i < pageDb.length; i++) {

        // 在范围内
        if (i >= indexStart && i <= indexEnd) {
            let thisPageDb = pageDb[i];
            state.value.list.push(thisPageDb);
        }
        
    }
    
}


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

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

    formEl.resetFields();
}

/**
 * 触发搜索逻辑
 */
const btnSearchName = () => {
    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 formEl
 */
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            
            // console.log(
            //     "addParams", addParams.value
            // );
            
            let submit = {
                // 名称
                "name": addParams.value.name,
                // 0 表示学校 1 表示学院 2表示专业，3 表示班级
                "type": 0,
                // 备注
                "remark": addParams.value.remark,
                // 上级id，默认顶级是 0
                "parentId": 0,
                // 新增时传入0即可，修改则传入原始值。如果新增父级，则该参数传跟 parentId 一样的参数
                "schoolId": 0,
            };

            schoolAdd(submit)
            .then(response => {

                let data = response?.data?.data;
                // console.log(
                //     "schoolAddEvent response", response, data
                // );

                // 重新查找分页数据
                pageUpdateEvent();
                
                // 接口请求完成，隐藏模态框
                state.value.showDialog = false;

            }).catch(error => {
                
            });
            
        } else {
            // console.log('error submit!', fields)
        }
    })
}

/**
 * 更新
 * @param formEl
 */
const updateForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            
            // console.log(
            //     "detailsDb", detailsDb.value
            // );

            let submit = {
                // 通过 schoolItem 接口得到的 id 值，是什么就传什么
                "id" : detailsDb.value.id,
                // 名称
                "name": detailsDb.value.name,
                // 0 表示学校 1 表示学院 2表示专业，3 表示班级， 通过 schoolItem 接口得到的 type 值，是什么就传什么
                "type": detailsDb.value.type,
                // 备注
                "remark": detailsDb.value.remark,
                // 上级id，默认顶级是 0， 通过 schoolItem 接口得到的 parentId 值，是什么就传什么
                "parentId": detailsDb.value.parentId,
                // 新增时传入0即可，修改则传入原始值， 通过 schoolItem 接口得到的 schoolId 值，是什么就传什么
                "schoolId": detailsDb.value.schoolId,
            };
            
            schoolUpdate(submit)
            .then(response => {

                let data = response?.data?.data;
                // console.log(
                //     "schoolUpdateEvent response", response, data
                // );

                 // 重新查找分页数据
                pageUpdateEvent();
                
                // 接口请求完成，隐藏模态框
                state.value.showDetails = false;

            }).catch(error => {
                
            });
            
        } else {
            // console.log('error submit!', fields)
        }
    })
}

/**
 * 批量删除
 * delIdArray       批量删除的id值
 *                  例如
 *                  [ { "id" : "1" }, { "id" : "2" } ]
 * callback         全部删除完成，回调
 * 
 */
const idDelAll = (delIdArray, callback) => {

    // 删除完成次数
    let okNum = 0;

    for (let i = 0; i < delIdArray.length; i++) {

        let thisDelIdArray = delIdArray[i];
        // console.log(
        //     "thisDelIdArray", thisDelIdArray
        // );

        let submit = {
            // 选校全部结构返回里面的id值
            "id" : thisDelIdArray.id,
        };

        schoolDelete(submit)
        .then(response => {

            // let data = response?.data?.data;
            // console.log(
            //     "schoolDeleteEvent response", response, data
            // );

            okNum += 1;

            if (okNum >= delIdArray.length) {
                callback("yes");
            }
            
        }).catch(error => {
            
        });

    }

}

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

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

    let delIdArray = [
        { "id" : res.id }
    ];

    idDelAll(
        delIdArray,
        function() {

            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);
    
    let submit = {
        // 选校全部结构返回里面的id值
        "id" : "" + res.id,
    };

    schoolItem(submit)
    .then(response => {

        let data = response?.data?.data;
        // console.log(
        //     "schoolItemEvent response", response, data
        // );

        detailsDb.value = {
            "id": data.id,
            "name": data.name,
            "type": data.type,
            "remark": data.remark,
            "parentId": data.parentId,
            "schoolId": data.schoolId
        };
        
        state.value.showDetails = true;

    }).catch(error => {
        
    });
    
}

/**
 * 弹出管理
 */
const btnManage = (res) => {
    console.log('弹出管理', res);

    newPageConfigDb.value = res;
    newPageOpen.value = true;

}

onMounted(function() {
    pageUpdateEvent();
});

</script>

<template>
    <div class="ManageSchool">
        
        <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="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.listParams.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.list" style="width: 100%" @selection-change="selectionChange">
                    <el-table-column align="center" type="selection" width="110" />
                    <el-table-column prop="name" label="学校" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="success" @click="btnManage(scope.row)">管理学院</el-button>
                            <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.listParams.page"
                v-model:page-size="state.listParams.limit"
                :page-sizes="[10, 20, 50, 100]"
                background
                :layout="' ->, total,prev, pager, next, jumper'"
                :total="state.total"
                @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="addParams" :rules="addRules">
                    <el-form-item label="学校" prop="name">
                        <el-input v-model="addParams.name" clearable placeholder="请填写学校"></el-input>
                    </el-form-item>
                </el-form>
                <el-form ref="ruleFormRef" :model="addParams" :rules="addRules">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="addParams.remark" clearable placeholder="请填写备注"></el-input>
                    </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 ref="ruleFormRef" :model="detailsDb" :rules="addRules">
                    <el-form-item label="学校" prop="name">
                        <el-input v-model="detailsDb.name" clearable placeholder="请填写学校"></el-input>
                    </el-form-item>
                </el-form>
                <el-form ref="ruleFormRef" :model="detailsDb" :rules="addRules">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="detailsDb.remark" clearable placeholder="请填写备注"></el-input>
                    </el-form-item>
                </el-form>
                <div class="dialogFoot">
                    <el-button color="#EAEAEA" @click="state.showDetails = false" style="margin-right: 0.6rem">取消</el-button>
                    <el-button color="#2C68FF" @click="updateForm(ruleFormRef)">更新</el-button>
                </div>
            </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 class="newPage" v-if="newPageOpen == true" >
            <ManageCollege :configDb="newPageConfigDb" @callbackExit="callbackExitManageCollege" ></ManageCollege>
        </div>

    </div>
</template>

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

.ManageSchool * {
    -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 */
}

.ManageSchool {

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

    .newPage {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .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(.el-table__inner-wrapper::before) {
                height: 0px;
            }
        }
        :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>