|
|
@@ -0,0 +1,769 @@
|
|
|
+<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();
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+
|
|
|
+ configDb : {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ let json = {
|
|
|
+ "name" : "",
|
|
|
+ }
|
|
|
+ return json;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+// 定义发射给父组件的方法
|
|
|
+const emits = defineEmits([
|
|
|
+ 'callbackExit',
|
|
|
+])
|
|
|
+
|
|
|
+/**
|
|
|
+ * 触发退出当前组件
|
|
|
+ */
|
|
|
+const callbackExitEvent = () => {
|
|
|
+ emits('callbackExit', 'yes');
|
|
|
+}
|
|
|
+
|
|
|
+// 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;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 弹出管理
|
|
|
+ */
|
|
|
+const btnManage = (res) => {
|
|
|
+ console.log('弹出管理', res);
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="ManageCollege">
|
|
|
+
|
|
|
+ <div class="content commonsScrollbar">
|
|
|
+ <div class="contentTitle">
|
|
|
+ <div class="contentTitle-Img" v-on:click="callbackExitEvent()" >
|
|
|
+ <img src="../../assets/img/manageUser/return.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="contentTitle-line"></div>
|
|
|
+ <div class="contentTitle-text"> {{ props.configDb.name }} <span class="symbol">|</span> 管理专业</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>
|
|
|
+ <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';
|
|
|
+
|
|
|
+.ManageCollege * {
|
|
|
+ -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 */
|
|
|
+}
|
|
|
+
|
|
|
+.ManageCollege {
|
|
|
+
|
|
|
+ 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-Img {
|
|
|
+ width: 3rem;
|
|
|
+ height: 3rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ margin: 0px 1rem 0px 0px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* 链接选中 一个手势【常用】 */
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ .symbol {
|
|
|
+ color: #a7a7a7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
