edu_train_web_new/user_web/src/view/admin/ManageCourse.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({
//     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": 6,
    // 是否弹出添加UI
    "showDialog": false,
    // 当前分页列表，多选的数据
    "ids": [],
    // 批量删除模态框
    "showDel": false,
    // 详情模态框
    "showDetails": false,
});

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

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

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


/**
 * 详情数据
 */
let detailsDb = ref({
    name: '',
});

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

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

    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 val
 */
const selectClass = (val) => {
    addParams.value.orgId = val;
}

/**
 * 添加 点击提交
 * @param formEl
 */
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            
            console.log(
                "addParams", addParams.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);

    detailsDb.value = {
        name: res.name,
    }

    state.value.showDetails = true;

}

</script>

<template>
    <div class="ManageCourse">
        
        <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="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>
                <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="detailsDb">
                    <el-form-item label="课程" prop="name">
                        <el-input v-model="detailsDb.name" clearable disabled ></el-input>
                    </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';

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

.ManageCourse {

    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>