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();

import { schoolTree, schoolAdd, schoolItem, schoolUpdate, schoolDelete } from "../../api/admin/school";
import { courseList, courseAdd, courseDetail, courseUpdate, courseDelete } from "../../api/admin/course";

// 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 ruleFormRef = ref();

// 父子级的学校到班级的数据参数
let options = [
    // {
    //     id: 1,
    //     name: 'Asia',
    //     children: [
    //         {
    //             id: 2,
    //             name: 'China',
    //             children: [
    //                 { id: 3, name: 'Beijing' },
    //                 { id: 4, name: 'Shanghai' },
    //                 { id: 5, name: 'Hangzhou' },
    //             ],
    //         },
    //         {
    //             id: 6,
    //             name: 'Japan',
    //             children: [
    //                 { id: 7, name: 'Tokyo' },
    //                 { id: 8, name: 'Osaka' },
    //                 { id: 9, name: 'Kyoto' },
    //             ],
    //         },
    //         {
    //             id: 10,
    //             name: 'Korea',
    //             children: [
    //                 { id: 11, name: 'Seoul' },
    //                 { id: 12, name: 'Busan' },
    //                 { id: 13, name: 'Taegu' },
    //             ],
    //         },
    //     ],
    // },
    // {
    //     id: 14,
    //     name: 'Europe',
    //     children: [
    //         {
    //             id: 15,
    //             name: 'France',
    //             children: [
    //                 { id: 16, name: 'Paris' },
    //                 { id: 17, name: 'Marseille' },
    //                 { id: 18, name: 'Lyon' },
    //             ],
    //         },
    //         {
    //             id: 19,
    //             name: 'UK',
    //             children: [
    //                 { id: 20, name: 'London' },
    //                 { id: 21, name: 'Birmingham' },
    //                 { id: 22, name: 'Manchester' },
    //             ],
    //         },
    //     ],
    // },
    // {
    //     id: 23,
    //     name: 'North America',
    //     children: [
    //         {
    //             id: 24,
    //             name: 'US',
    //             children: [
    //                 { id: 25, name: 'New York' },
    //                 { id: 26, name: 'Los Angeles' },
    //                 { id: 27, name: 'Washington' },
    //             ],
    //         },
    //         {
    //             id: 28,
    //             name: 'Canada',
    //             children: [
    //                 { id: 29, name: 'Toronto' },
    //                 { id: 30, name: 'Montreal' },
    //                 { id: 31, name: 'Ottawa' },
    //             ],
    //         },
    //     ],
    // },
]

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

/**
 * 初始化添加的数据
 */
const addParamsInit = () => {
    addParams.value = {
        name: '',
        classIds: 
        [
            // 29,
            // 30,
            // 31
        ],
    }
}

/**
 * 添加，字段相关验证规则
 */
let addRules = ref({
    name: [
        { required: true, message: '请填写课程', trigger: 'blur' },
    ],
    classIds: [
        {
            required: true,
            message: '请选择班级',
            trigger: 'change',
        },
        // {
        //     required: true,
        //     validator: (rule, value, callback) => {
        //         if (value && value.length > 0) {
        //             callback()
        //         } else {
        //             callback(new Error('请选择班级'))
        //         }
        //     },
        //     trigger: 'change'
        // }
    ],
});

/**
 * 详情数据
 */
let detailsDb = ref({
    id: null,
    name: null,
    classIds: [],
});


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

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

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

    // schoolTree(submit)
    // .then(response => {

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

    //     pageDb = [];
        
    //     // 重新拼接合理要展示的分页数据
    //     for (let i = 0; i < data.length; i++) {
    //         let thisData = data[i];
    //         if (typeof keyword == 'string' && keyword != '' && keyword != ' ') {
    //             if (typeof thisData.name == 'string' && thisData.name.indexOf(keyword) >= 0) {
    //                 pageDb.push(thisData);
    //             }

    //         } else {
    //             pageDb.push(thisData);
    //         }
    //     }

    //     pageDbUpdateEvent();

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

    /**
     * 看起来像是分页的接口，实际有bug
     * 不管如何传参，都是全部数据返回
     */
    let submit = {
        // "dto" : JSON.stringify({
        //     // 第几页
        //     "pageNum": 1,
        //     // 每页显示多少数据
        //     "pageSize": 3,
        //     // 搜索的名称
        //     "name": ""
        // })
        // 第几页
        "pageNum": 1,
        // 每页显示多少数据
        "pageSize": 5,
        // 搜索的名称
        "name": ""
    };

    courseList(submit)
    .then(response => {

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

        let data = dataOld?.list;
        
        pageDb = [];

        // 重新拼接合理要展示的分页数据
        for (let i = 0; i < data.length; i++) {
            let thisData = data[i];
            if (typeof keyword == 'string' && keyword != '' && keyword != ' ') {
                if (typeof thisData.name == 'string' && thisData.name.indexOf(keyword) >= 0) {
                    pageDb.push(thisData);
                }

            } else {
                pageDb.push(thisData);
            }
        }

        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 keyword = state.value.listParams.keyword;

    // 从第几个数组下标开始
    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,
                // 可以传多个班级的id
                "classIds": addParams.value.classIds,
                // "classIds": [
                //     "1385288575779737600",
                //     "1385288584269008896",
                // ],
            };
            
            courseAdd(submit)
            .then(response => {

                // let data = response?.data?.data;
                // console.log(
                //     "courseAddEvent 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 = {
                "id": detailsDb.value.id,
                "name": detailsDb.value.name,
                "classIds": detailsDb.value.classIds,
            };
            
            courseUpdate(submit)
            .then(response => {

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

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

                // 接口请求完成，隐藏模态框
                state.value.showDetails = false;
                
            }).catch(error => {
                
            });

            // 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": thisDelIdArray.id,
        };
        
        courseDelete(submit)
        .then(response => {

            // let data = response?.data?.data;
            // console.log(
            //     "courseDeleteEvent 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
    // );

    let delIdArray = [];
    for (let i = 0; i < state.value.ids.length; i++) {

        let thisIds = state.value.ids[i];
        let addJson = { "id" : thisIds.id };
        delIdArray.push(addJson);

    }

    idDelAll(
        delIdArray,
        function() {

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

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

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

/**
 * 弹出指定分页详情
 * @param res 
 */
const btnDetail = (res) => {

    console.log('弹出指定分页详情', res);
    
    let submit = {
        id : res.id,
    };

    courseDetail(submit)
    .then(response => {

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

        detailsDb.value = {
            id: data.id,
            name: data.name,
            classIds: data.classIds,
        }

        state.value.showDetails = true;
        
    }).catch(error => {
        
    });

}

/**
 * 获取父子级的树形结构数据
 */
const optionsUpdate = () => {

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

    schoolTree(submit)
    .then(response => {

        options = [];

        let data = response?.data?.data;

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

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

            let thisOptions = options[i];
            // console.log(
            //     "thisOptions", thisOptions
            // );
            optionsChildrenUpdate(i, thisOptions.id);

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

}

/**
 * 将对应子级的数据获取
 * optionsIndex     options 对应的数组下标
 * id               当前父级 的id值
 */
const optionsChildrenUpdate = (optionsIndex, id) => {

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

    schoolTree(submit)
    .then(response => {
        
        let data = response?.data?.data;
        
        // console.log(
        //     "optionsChildrenUpdate response", data
        // );

        options[optionsIndex] = data[0];
        
    }).catch(error => {
        
    });

}

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

</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-item label="班级" prop="classIds">
                        <el-cascader v-model="addParams.classIds"
                        :options="options"
                        :props="{
                            children: 'children',
                            label: 'name',
                            value: 'id',
                            checkStrictly: false,
                            expandTrigger: 'hover',
                            emitPath: false,
                            multiple: true,
                        }"
                        clearable placeholder="请选择班级" />
                    </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-item label="班级" prop="classIds">
                        <el-cascader v-model="detailsDb.classIds"
                        :options="options"
                        :props="{
                            children: 'children',
                            label: 'name',
                            value: 'id',
                            checkStrictly: false,
                            expandTrigger: 'hover',
                            emitPath: false,
                            multiple: true,
                        }"
                        clearable placeholder="请选择班级" />
                    </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>
</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;
                // 这里不要限制高度，否则，多级联动多选的时候，样式会有问题，可以限制，最小高度
                min-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;
                }
            }
            .el-cascader {
                width: 100%;
            }
        }
    }
    :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>