|
|
@@ -1,13 +1,570 @@
|
|
|
<script setup>
|
|
|
import { computed, onMounted, onUnmounted, watch, ref } from "vue";
|
|
|
import { useRouter } from 'vue-router';
|
|
|
+import { Search } from '@element-plus/icons-vue';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
const router = useRouter();
|
|
|
|
|
|
+
|
|
|
+// let state = ref({
|
|
|
+// organizationList: [],
|
|
|
+// userListParams: {
|
|
|
+// keyword: '',
|
|
|
+// page: 1,
|
|
|
+// limit: 5,
|
|
|
+// },
|
|
|
+// userList: [],
|
|
|
+// userTotal: 0,
|
|
|
+// showDialog: false,
|
|
|
+// ids: [],
|
|
|
+// showDel: false,
|
|
|
+// });
|
|
|
+
|
|
|
+let state = ref({
|
|
|
+ // 全部班级列表
|
|
|
+ "organizationList": [
|
|
|
+ {
|
|
|
+ "orgType": {
|
|
|
+ "code": "class",
|
|
|
+ "name": "专业班级"
|
|
|
+ },
|
|
|
+ "id": 656845035987013,
|
|
|
+ "name": "2025级通讯班",
|
|
|
+ "pid": 656843881177157,
|
|
|
+ "code": null,
|
|
|
+ "type": "class",
|
|
|
+ "weigh": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "orgType": {
|
|
|
+ "code": "class",
|
|
|
+ "name": "专业班级"
|
|
|
+ },
|
|
|
+ "id": 6568450359870132,
|
|
|
+ "name": "2025级通讯班2",
|
|
|
+ "pid": 6568438811771572,
|
|
|
+ "code": null,
|
|
|
+ "type": "class",
|
|
|
+ "weigh": 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 用户提交分页查询数据
|
|
|
+ "userListParams": {
|
|
|
+ // 搜索的内容
|
|
|
+ "keyword": "",
|
|
|
+ // 第几页
|
|
|
+ "page": 1,
|
|
|
+ // 每页显示多少数据
|
|
|
+ "limit": 5
|
|
|
+ },
|
|
|
+ // 具体分页的数据
|
|
|
+ "userList": [
|
|
|
+ {
|
|
|
+ "id": 661434193309765,
|
|
|
+ "level": 0,
|
|
|
+ "orgName": "信息论与编码基础教研组",
|
|
|
+ "zoneName": null,
|
|
|
+ "rolesName": [
|
|
|
+ "教师"
|
|
|
+ ],
|
|
|
+ "createTime": "2025-04-03 10:42:39",
|
|
|
+ "name": "教师测试账号",
|
|
|
+ "code": null,
|
|
|
+ "username": "teacher",
|
|
|
+ "phone": null,
|
|
|
+ "duty": null,
|
|
|
+ "photo": null,
|
|
|
+ "orgId": 656844968038469,
|
|
|
+ "roles": [
|
|
|
+ 661429664665669
|
|
|
+ ],
|
|
|
+ "email": null,
|
|
|
+ "status": 1,
|
|
|
+ "type": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 668917601919045,
|
|
|
+ "level": 0,
|
|
|
+ "orgName": "2025级通讯班",
|
|
|
+ "zoneName": null,
|
|
|
+ "rolesName": [
|
|
|
+ "学生"
|
|
|
+ ],
|
|
|
+ "createTime": "2025-04-24 14:12:43",
|
|
|
+ "name": "刘瑾见",
|
|
|
+ "code": "110220",
|
|
|
+ "username": "14367845673",
|
|
|
+ "phone": null,
|
|
|
+ "duty": null,
|
|
|
+ "photo": null,
|
|
|
+ "orgId": 656845035987013,
|
|
|
+ "roles": [
|
|
|
+ 661441664479301
|
|
|
+ ],
|
|
|
+ "email": null,
|
|
|
+ "status": 1,
|
|
|
+ "type": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 668916601290821,
|
|
|
+ "level": 0,
|
|
|
+ "orgName": "2025级通讯班",
|
|
|
+ "zoneName": null,
|
|
|
+ "rolesName": [
|
|
|
+ "学生"
|
|
|
+ ],
|
|
|
+ "createTime": "2025-04-24 14:08:39",
|
|
|
+ "name": "王伟",
|
|
|
+ "code": "1234525",
|
|
|
+ "username": "13234367546",
|
|
|
+ "phone": null,
|
|
|
+ "duty": null,
|
|
|
+ "photo": null,
|
|
|
+ "orgId": 656845035987013,
|
|
|
+ "roles": [
|
|
|
+ 661441664479301
|
|
|
+ ],
|
|
|
+ "email": null,
|
|
|
+ "status": 1,
|
|
|
+ "type": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 668923933716550,
|
|
|
+ "level": 0,
|
|
|
+ "orgName": "2025级通讯班",
|
|
|
+ "zoneName": null,
|
|
|
+ "rolesName": [
|
|
|
+ "学生"
|
|
|
+ ],
|
|
|
+ "createTime": "2025-04-24 14:38:29",
|
|
|
+ "name": "威威",
|
|
|
+ "code": "25242345",
|
|
|
+ "username": "1431163",
|
|
|
+ "phone": null,
|
|
|
+ "duty": null,
|
|
|
+ "photo": null,
|
|
|
+ "orgId": 656845035987013,
|
|
|
+ "roles": [
|
|
|
+ 661441664479301
|
|
|
+ ],
|
|
|
+ "email": null,
|
|
|
+ "status": 1,
|
|
|
+ "type": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 661442553135174,
|
|
|
+ "level": 0,
|
|
|
+ "orgName": "2025级通讯班",
|
|
|
+ "zoneName": null,
|
|
|
+ "rolesName": [
|
|
|
+ "学生"
|
|
|
+ ],
|
|
|
+ "createTime": "2025-04-03 11:16:40",
|
|
|
+ "name": "学生测试账号",
|
|
|
+ "code": null,
|
|
|
+ "username": "student",
|
|
|
+ "phone": null,
|
|
|
+ "duty": null,
|
|
|
+ "photo": {
|
|
|
+ "name": "sl.jpg",
|
|
|
+ "url": "/upload/Files/2025/04/28/0b326e2784ba73f56ef9f40aae86695c.jpg"
|
|
|
+ },
|
|
|
+ "orgId": 656845035987013,
|
|
|
+ "roles": [
|
|
|
+ 661441664479301
|
|
|
+ ],
|
|
|
+ "email": null,
|
|
|
+ "status": 1,
|
|
|
+ "type": 2
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 用户总数量
|
|
|
+ "userTotal": 6,
|
|
|
+ // 是否弹出添加账号UI
|
|
|
+ "showDialog": false,
|
|
|
+ // 当前分页列表，多选的数据
|
|
|
+ "ids": [],
|
|
|
+ // 批量删除模态框
|
|
|
+ "showDel": false,
|
|
|
+ // 详情模态框
|
|
|
+ "showDetails": false,
|
|
|
+});
|
|
|
+
|
|
|
+// 用于表单验证规则必须要的对象
|
|
|
+let ruleFormRef = ref();
|
|
|
+
|
|
|
+/**
|
|
|
+ * 添加账号，最后提交的数据
|
|
|
+ */
|
|
|
+let userAddParams = ref({
|
|
|
+ name: '',
|
|
|
+ username: '',
|
|
|
+ password: '123456',
|
|
|
+ orgId: '',
|
|
|
+ roles: [],
|
|
|
+});
|
|
|
+
|
|
|
+/**
|
|
|
+ * 添加账号，字段相关验证规则
|
|
|
+ */
|
|
|
+let userAddRules = ref({
|
|
|
+ name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
|
|
|
+ username: [{ required: true, message: '请填写学号', trigger: 'blur' }],
|
|
|
+ orgId: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择班级',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 详情数据
|
|
|
+ */
|
|
|
+let detailsDb = ref({
|
|
|
+ name: '',
|
|
|
+ username: '',
|
|
|
+ password: '123456',
|
|
|
+ orgId: '',
|
|
|
+ roles: [],
|
|
|
+});
|
|
|
+
|
|
|
+/**
|
|
|
+ * 查找分页数据
|
|
|
+ */
|
|
|
+const pageUpdateEvent = () => {
|
|
|
+ console.log(
|
|
|
+ "查找分页数据 pageUpdateEvent", state.value.userListParams
|
|
|
+ );
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 弹出添加账号UI
|
|
|
+ */
|
|
|
+const btnAddStudent = (formEl) => {
|
|
|
+
|
|
|
+ state.value.showDialog = true;
|
|
|
+ if (!formEl) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ formEl.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 触发搜索账号逻辑
|
|
|
+ */
|
|
|
+const btnSearchName = () => {
|
|
|
+ pageUpdateEvent();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 更新选中的班级逻辑
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const classChange = (val) => {
|
|
|
+ state.value.userListParams.orgId = val;
|
|
|
+ pageUpdateEvent();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 上一页，下一页改变
|
|
|
+ */
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ // 重新查找分页数据
|
|
|
+ pageUpdateEvent();
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 上一页，下一页改变
|
|
|
+ */
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ // 重新查找分页数据
|
|
|
+ pageUpdateEvent();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 分页多选，更新多选的相关数据
|
|
|
+ * @param res
|
|
|
+ */
|
|
|
+const selectionChange = (res) => {
|
|
|
+ state.value.ids = [];
|
|
|
+ res.forEach((item) => {
|
|
|
+ // state.value.ids.push(item.id);
|
|
|
+ state.value.ids.push(item);
|
|
|
+ });
|
|
|
+ console.log("分页多选，更新多选的相关数据", state.value.ids);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 添加账号的时候，选中的班级的时候
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const selectClass = (val) => {
|
|
|
+ userAddParams.value.orgId = val;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 添加账号 点击提交
|
|
|
+ * @param formEl
|
|
|
+ */
|
|
|
+const submitForm = async (formEl) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+
|
|
|
+ console.log(
|
|
|
+ "userAddParams", userAddParams.value
|
|
|
+ );
|
|
|
+
|
|
|
+ // 接口请求完成，隐藏模态框
|
|
|
+ state.value.showDialog = false;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 删除选中分页的某个数据
|
|
|
+ * @param res
|
|
|
+ */
|
|
|
+const btnDel = (res) => {
|
|
|
+
|
|
|
+ console.log(
|
|
|
+ "删除选中分页的某个数据", res
|
|
|
+ );
|
|
|
+
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重新查找分页数据
|
|
|
+ pageUpdateEvent();
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 弹出批量删除模态框逻辑
|
|
|
+ */
|
|
|
+const btnShowDel = () => {
|
|
|
+ if (state.value.ids && state.value.ids.length > 0) {
|
|
|
+ state.value.showDel = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 开始批量删除处理
|
|
|
+ */
|
|
|
+const btnBatchDel = () => {
|
|
|
+
|
|
|
+ console.log(
|
|
|
+ "开始批量删除处理", state.value.ids
|
|
|
+ );
|
|
|
+
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功',
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重新查找分页数据
|
|
|
+ pageUpdateEvent();
|
|
|
+
|
|
|
+ // 批量选中的列表重置
|
|
|
+ state.value.ids = [];
|
|
|
+ // 隐藏模态框
|
|
|
+ state.value.showDel = false;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 弹出指定分页详情
|
|
|
+ * @param res
|
|
|
+ */
|
|
|
+const btnDetail = (res) => {
|
|
|
+ console.log('弹出指定分页详情', res);
|
|
|
+
|
|
|
+ detailsDb.value = {
|
|
|
+ name: '名字',
|
|
|
+ username: '账号',
|
|
|
+ password: '123456',
|
|
|
+ orgId: 6568450359870132,
|
|
|
+ roles: [],
|
|
|
+ }
|
|
|
+
|
|
|
+ state.value.showDetails = true;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
</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="rowSelect">
|
|
|
+ <el-select
|
|
|
+ v-model="state.userListParams.orgId"
|
|
|
+ clearable
|
|
|
+ placeholder="全部班级"
|
|
|
+ size="large"
|
|
|
+ style="width: 15rem"
|
|
|
+ @change="classChange"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn1" @click="btnAddStudent(ruleFormRef)">
|
|
|
+ <img src="./assets/img/manageUser/add.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text1">添加账号</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn2">
|
|
|
+ <img src="./assets/img/manageUser/download.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text2">模板下载</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn1">
|
|
|
+ <img src="./assets/img/manageUser/import.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text1">批量导入</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn1">
|
|
|
+ <img src="./assets/img/manageUser/export.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text1">批量导出</span>
|
|
|
+ </div>
|
|
|
+ <div class="rowBtn rowBtn3" @click="btnShowDel">
|
|
|
+ <img src="./assets/img/manageUser/delete.svg" alt="" />
|
|
|
+ <span class="rowBtn-text rowBtn-text3">批量删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rowRight">
|
|
|
+ <el-input
|
|
|
+ v-model="state.userListParams.keyword"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ clearable
|
|
|
+ style="width: 17rem; height: 3rem"
|
|
|
+ placeholder="搜索账号/姓名"
|
|
|
+ @clear="btnSearchName"
|
|
|
+ />
|
|
|
+ <div class="rowSearch" @click="btnSearchName">搜索</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contentTable commonsScrollbar">
|
|
|
+ <el-table :data="state.userList" style="width: 100%" @selection-change="selectionChange">
|
|
|
+ <el-table-column align="center" type="selection" width="110" />
|
|
|
+ <el-table-column prop="name" label="账号" />
|
|
|
+ <el-table-column prop="name" label="姓名" />
|
|
|
+ <el-table-column prop="orgName" label="班级" />
|
|
|
+ <el-table-column prop="orgName" label="状态" />
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="btnDetail(scope.row)">详情</el-button>
|
|
|
+ <el-popconfirm :title="`你确定删除${scope.row.name}吗?`" @confirm="btnDel(scope.row)">
|
|
|
+ <template #reference>
|
|
|
+ <el-button link type="danger" style="margin-left: 3rem">移除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ class="classPagination"
|
|
|
+ v-model:current-page="state.userListParams.page"
|
|
|
+ v-model:page-size="state.userListParams.limit"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ background
|
|
|
+ :layout="' ->, total,prev, pager, next, jumper'"
|
|
|
+ :total="state.userTotal"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加账号模态框 -->
|
|
|
+ <el-dialog v-model="state.showDialog" class="dialog">
|
|
|
+ <template #header>
|
|
|
+ <div class="dialog-title">添加账号</div>
|
|
|
+ </template>
|
|
|
+ <div class="dialogBody">
|
|
|
+ <el-form ref="ruleFormRef" :model="userAddParams" :rules="userAddRules">
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="userAddParams.name" clearable placeholder="请填写姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学号" prop="username">
|
|
|
+ <el-input v-model="userAddParams.username" type="number" clearable placeholder="请填写学号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学校" prop="orgId">
|
|
|
+ <el-select v-model="userAddParams.orgId" clearable placeholder="请选择学校" @change="selectClass">
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级" prop="orgId">
|
|
|
+ <el-select v-model="userAddParams.orgId" clearable placeholder="请选择班级" @change="selectClass">
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="dialogFoot">
|
|
|
+ <el-button color="#EAEAEA" @click="state.showDialog = false" style="margin-right: 0.6rem">取消</el-button>
|
|
|
+ <el-button color="#2C68FF" @click="submitForm(ruleFormRef)">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 账号详情模态框 -->
|
|
|
+ <el-dialog v-model="state.showDetails" class="dialog">
|
|
|
+ <template #header>
|
|
|
+ <div class="dialog-title">账号详情</div>
|
|
|
+ </template>
|
|
|
+ <div class="dialogBody">
|
|
|
+ <el-form :model="detailsDb">
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="detailsDb.name" clearable disabled ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学号" prop="username">
|
|
|
+ <el-input v-model="detailsDb.username" type="number" clearable disabled ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学校" prop="orgId">
|
|
|
+ <el-select v-model="detailsDb.orgId" clearable disabled >
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级" prop="orgId">
|
|
|
+ <el-select v-model="detailsDb.orgId" clearable disabled >
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 用于批量删除模态框 -->
|
|
|
+ <el-dialog v-model="state.showDel" width="600" class="del">
|
|
|
+ <template #header>
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <img class="del-img" src="./assets/img/manageUser/error-line.svg" alt="" />
|
|
|
+ <div class="del-name">批量删除</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <span class="delBody">是否确认删除学生信息？删除后不可恢复！</span>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="state.showDel = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="btnBatchDel">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -35,6 +592,306 @@ const router = useRouter();
|
|
|
top: 0px;
|
|
|
left: 0px;
|
|
|
background-color: #ffffff;
|
|
|
+
|
|
|
+
|
|
|
+ .content {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ border-radius: 1rem;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 2rem 4rem 2rem 3rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .contentTitle {
|
|
|
+ padding: 0 0.5rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .contentTitle-line {
|
|
|
+ width: 0.35rem;
|
|
|
+ height: 2rem;
|
|
|
+ background: #2c68ff;
|
|
|
+ border-radius: 0.85rem;
|
|
|
+ }
|
|
|
+ .contentTitle-text {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: #373737;
|
|
|
+ margin-left: 1.4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentRow {
|
|
|
+ margin-top: 2.8rem;
|
|
|
+ padding: 0 1.5rem 0 1rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .rowLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .rowSelect {
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ height: 3rem;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ min-height: 0;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 8.8rem;
|
|
|
+ height: 3rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 2rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ }
|
|
|
+ .rowBtn-text {
|
|
|
+ font-size: 1.15rem;
|
|
|
+ margin-left: 0.7rem;
|
|
|
+ }
|
|
|
+ .rowBtn-text1 {
|
|
|
+ color: #3d7cff;
|
|
|
+ }
|
|
|
+ .rowBtn-text2 {
|
|
|
+ color: #d8a216;
|
|
|
+ }
|
|
|
+ .rowBtn-text3 {
|
|
|
+ color: #e84d4d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn1 {
|
|
|
+ background: #e5eeff;
|
|
|
+ &:hover {
|
|
|
+ background: #edf3ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn2 {
|
|
|
+ background: rgba(214, 154, 1, 0.1);
|
|
|
+ &:hover {
|
|
|
+ background: #f4e5bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowBtn3 {
|
|
|
+ background: rgba(232, 77, 77, 0.05);
|
|
|
+ &:hover {
|
|
|
+ background: #fad4d4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowRight {
|
|
|
+ display: flex;
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ font-size: 1rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ }
|
|
|
+ .rowSearch {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 3.9rem;
|
|
|
+ height: 3rem;
|
|
|
+ background: #3d7cff;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 0.7rem;
|
|
|
+ &:hover {
|
|
|
+ background: #77a3ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentTable {
|
|
|
+ margin-top: 2.3rem;
|
|
|
+ height: 36rem;
|
|
|
+
|
|
|
+ :deep(tr) {
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ }
|
|
|
+ :deep(th) {
|
|
|
+ background: #f5f7fa;
|
|
|
+ height: 5rem;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: #333746;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ :deep(td) {
|
|
|
+ height: 5rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ :deep(.cell) {
|
|
|
+ height: 2rem;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox) {
|
|
|
+ --el-checkbox-input-height: 2rem;
|
|
|
+ --el-checkbox-input-width: 2rem;
|
|
|
+ --el-checkbox-border-radius: 0.28rem;
|
|
|
+ // border: 1px solid #cad2d8;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox__inner:after) {
|
|
|
+ height: 1.07rem;
|
|
|
+ left: 0.64rem;
|
|
|
+ top: 0.21rem;
|
|
|
+ width: 0.5rem;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox__inner::before) {
|
|
|
+ top: 0.85rem;
|
|
|
+ }
|
|
|
+ :deep(.el-button) {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.classPagination) {
|
|
|
+ .el-pagination__rightwrapper {
|
|
|
+ justify-content: center;
|
|
|
+ .el-pagination__total {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .btn-prev,
|
|
|
+ .btn-next {
|
|
|
+ background: #f7f7f7;
|
|
|
+ color: #000000;
|
|
|
+ border-radius: 1rem;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ background: #f7f7f7;
|
|
|
+ color: #000000;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ background: #2c68ff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .el-pagination__jump {
|
|
|
+ color: #000000;
|
|
|
+ .el-pagination__editor.el-input {
|
|
|
+ width: 4.57rem;
|
|
|
+ .el-input__wrapper {
|
|
|
+ border-radius: 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.dialog) {
|
|
|
+ width: 55rem;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 1.1rem;
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 0px;
|
|
|
+ margin: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-title {
|
|
|
+
|
|
|
+ // width: 55rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 5.9rem;
|
|
|
+ background: #2c68ff;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 1.1rem 1.1rem 0 0;
|
|
|
+ padding-left: 4rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .el-dialog__headerbtn {
|
|
|
+ font-size: 1.7rem;
|
|
|
+ width: 3.57rem;
|
|
|
+ height: 3.57rem;
|
|
|
+ top: 1rem;
|
|
|
+ right: 1rem;
|
|
|
+ .el-dialog__close {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 3.7rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialogBody {
|
|
|
+ padding: 0.8rem 8rem 3.5rem 6.7rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .el-form-item {
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #000000;
|
|
|
+ padding-right: 2rem;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ height: 3.7rem;
|
|
|
+ --el-input-bg-color: #efefef;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ --el-input-border-radius: 0.57rem;
|
|
|
+ --el-input-border-color: #efefef;
|
|
|
+ --el-input-focus-border-color: #efefef;
|
|
|
+ --el-input-hover-border-color: #efefef;
|
|
|
+ .el-input__wrapper {
|
|
|
+ padding: 0 2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ .el-select__wrapper {
|
|
|
+ height: 3.7rem;
|
|
|
+ background-color: #efefef;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ // box-shadow: 0 0 0 1px #efefef inset;
|
|
|
+ padding: 0 2rem;
|
|
|
+ .el-select__caret {
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialogFoot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ margin-top: 4rem;
|
|
|
+ .el-button {
|
|
|
+ width: 8.5rem;
|
|
|
+ height: 3.2rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.del) {
|
|
|
+ .del-img {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ margin-right: 0.3rem;
|
|
|
+ }
|
|
|
+ .del-name {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #e84d4d;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ width: 100%;
|
|
|
+ height: 10rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 3rem;
|
|
|
+ color: #000000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
</style>
|
