|
|
@@ -0,0 +1,717 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog :visible.sync="addStuVisible" width="700px">
|
|
|
+ <template #title>
|
|
|
+ <div class="title_box">
|
|
|
+ <div class="title_box_item">
|
|
|
+ <span>添加学生</span>
|
|
|
+ <span v-if="boxType == 1" style="font-size: 13px"
|
|
|
+ >(从已有学生中添加)</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="addStuBox">
|
|
|
+ <div class="bar_box" v-if="boxType != 1">
|
|
|
+ <div
|
|
|
+ v-for="item in stuListTypeList"
|
|
|
+ :key="item.value"
|
|
|
+ :class="{ active_bar: addStuType == item.value }"
|
|
|
+ @click="changeStuListType(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 手动添加学生 -->
|
|
|
+ <div class="addcla_box" v-if="addStuType == 1">
|
|
|
+ <div class="addcla_box_item" v-if="boxType != 2">
|
|
|
+ <span class="addcla_box_item_span">所属班级:</span>
|
|
|
+ <el-input
|
|
|
+ v-model.trim="classInfo.name"
|
|
|
+ disabled
|
|
|
+ placeholder="请输入所属班级"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="addcla_box_item" v-if="boxType == 2">
|
|
|
+ <span class="addcla_box_item_span">所属年级:</span>
|
|
|
+ <el-cascader
|
|
|
+ :options="cascaderData"
|
|
|
+ v-model="cascaderDataPath"
|
|
|
+ @change="handleChangecascader"
|
|
|
+ popper-class="myCascader"
|
|
|
+ :props="{
|
|
|
+ label: 'name',
|
|
|
+ value: 'id',
|
|
|
+ children: 'children',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ data, node }">
|
|
|
+ <!-- 一级选项（年级） -->
|
|
|
+ <span v-if="node.level === 1">{{ data.name }}</span>
|
|
|
+ <!-- 二级选项（班级）- 可以自定义显示 -->
|
|
|
+ <span v-else-if="node.level === 2" class="cascader-class-item">
|
|
|
+ <span>{{ data.name }}</span>
|
|
|
+ </span>
|
|
|
+ <!-- 其他级别（兜底） -->
|
|
|
+ <span v-else>{{ data.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-cascader>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addcla_box_item" style="position: relative">
|
|
|
+ <span class="addcla_box_item_span">学生姓名:</span>
|
|
|
+ <el-input
|
|
|
+ v-model.trim="searchStuName"
|
|
|
+ placeholder="请输入学生姓名，多个姓名请用中文逗号(，)分隔"
|
|
|
+ slot="reference"
|
|
|
+ @change="searchStu"
|
|
|
+ @focus="popoverVisible = true"
|
|
|
+ ></el-input>
|
|
|
+ <div class="search_stu_box" v-if="popoverVisible">
|
|
|
+ <div class="search_stu_box_content">
|
|
|
+ <el-tag
|
|
|
+ v-for="(item, index) in searchStuData"
|
|
|
+ :key="index"
|
|
|
+ closable
|
|
|
+ :type="stuname2(item)"
|
|
|
+ @close="handleClose(index)"
|
|
|
+ >
|
|
|
+ <span>{{ item }}</span>
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="search_stu_box_footer">
|
|
|
+ <div>输入学生共{{ searchStuData.length }}人</div>
|
|
|
+ <div>
|
|
|
+ <el-button size="small" @click="selectNoneStu"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" @click="selectStu"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addcla_box_item">
|
|
|
+ <span class="addcla_box_item_span">已选择学生:</span>
|
|
|
+ <div class="selected_stu_box">
|
|
|
+ <el-tag
|
|
|
+ v-for="(item, index) in selectedStuData"
|
|
|
+ :key="index"
|
|
|
+ closable
|
|
|
+ :type="stuname(item)"
|
|
|
+ @close="handleSelectedStuClose(index)"
|
|
|
+ >
|
|
|
+ <span>{{ item }}</span>
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 批量上传学生 -->
|
|
|
+ <div v-if="addStuType == 2">
|
|
|
+ <div>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ :http-request="handleChange"
|
|
|
+ action="#"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept=".xlsx,.xls"
|
|
|
+ >
|
|
|
+ <img src="@/assets/stuImg/uploadfile.svg" alt="upload" />
|
|
|
+ <div style="color: #000">点击或拖拽文件到此处上传</div>
|
|
|
+ <div class="upload-demo-tip">支持格式:xlsx、xls,最多添加70人</div>
|
|
|
+ </el-upload>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 上传模板:
|
|
|
+ <span class="download-template" @click="downloadTemplate"
|
|
|
+ >下载模板</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 注意:请按照模板格式填写学生信息,避免导入失败
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 从已有学生中添加 -->
|
|
|
+ <div v-if="addStuType == 3">
|
|
|
+ <allClaAddStu
|
|
|
+ ref="allClaAddStu"
|
|
|
+ @closeAllClaAddStu="closeAllClaAddStu"
|
|
|
+ @getStudent="allClaAddStuGetStudent"
|
|
|
+ :classInfo="classInfo"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <template v-if="addStuType == 1">
|
|
|
+ <el-button size="small" @click="closeAllClaAddStu">取消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="addStu"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import pinyin from "../../../../../node_modules/js-pinyin/index";
|
|
|
+import allClaAddStu from "./allClaAddStu.vue";
|
|
|
+export default {
|
|
|
+ name: "addStu",
|
|
|
+ props: {
|
|
|
+ boxType: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ cascaderData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ boxType: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal == 1) {
|
|
|
+ this.stuListTypeList = [];
|
|
|
+ this.addStuType = 3;
|
|
|
+ } else if (newVal == 0) {
|
|
|
+ this.stuListTypeList = this.tab1;
|
|
|
+ this.addStuType = 1;
|
|
|
+ } else if (newVal == 2) {
|
|
|
+ this.stuListTypeList = this.tab2;
|
|
|
+ this.addStuType = 1;
|
|
|
+ }
|
|
|
+ this.clearData();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ allClaAddStu,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ role: this.$route.query.role,
|
|
|
+ cascaderDataPath: [],
|
|
|
+
|
|
|
+ addStuType: 1,
|
|
|
+ schoolChar: "",
|
|
|
+ userSuffix: "",
|
|
|
+ addStuVisible: false,
|
|
|
+ classInfo: {},
|
|
|
+ stuListTypeList: [],
|
|
|
+ tab1: [
|
|
|
+ {
|
|
|
+ label: "手动输入",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "批量上传",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "从已有学生中添加",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tab2: [
|
|
|
+ {
|
|
|
+ label: "手动输入",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "批量上传",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ searchStuName: "",
|
|
|
+ searchStuData: [],
|
|
|
+ selectedStuData: [],
|
|
|
+ popoverVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ stuname() {
|
|
|
+ return (item) => {
|
|
|
+ let box = this.selectedStuData.filter((e) => e === item);
|
|
|
+ // console.log(box);
|
|
|
+ return box.length > 1 ? "danger" : "";
|
|
|
+ };
|
|
|
+ },
|
|
|
+ stuname2() {
|
|
|
+ return (item) => {
|
|
|
+ let box = this.searchStuData.filter((e) => e === item);
|
|
|
+ // console.log(box);
|
|
|
+ return box.length > 1 ? "danger" : "";
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUser();
|
|
|
+ this.getSchoolName();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChangecascader(val) {
|
|
|
+ console.log(val);
|
|
|
+ // 更新级联选择器的选中数据路径
|
|
|
+ this.cascaderDataPath = val || [];
|
|
|
+ let box = this.cascaderData.flatMap((item) => item.children).filter((item) => this.cascaderDataPath[1]==item.id);
|
|
|
+ console.log(box, "box");
|
|
|
+ this.classInfo = box;
|
|
|
+ },
|
|
|
+ clearData() {
|
|
|
+ this.searchStuName = "";
|
|
|
+ this.searchStuData = [];
|
|
|
+ this.selectedStuData = [];
|
|
|
+ this.popoverVisible = false;
|
|
|
+ },
|
|
|
+ allClaAddStuGetStudent() {
|
|
|
+ this.$emit("getStudent");
|
|
|
+ },
|
|
|
+ closeAllClaAddStu() {
|
|
|
+ this.addStuVisible = false;
|
|
|
+ },
|
|
|
+ // 下载Excel模板
|
|
|
+ downloadTemplate() {
|
|
|
+ require.ensure([], () => {
|
|
|
+ const {
|
|
|
+ export_json_to_excel,
|
|
|
+ } = require("../../../../common/Export2Excel");
|
|
|
+ // 增加 colWidths 参数以调整列宽，例如调整为 [20, 35, 20]
|
|
|
+ let tHeader = [this.lang.StudentName];
|
|
|
+
|
|
|
+ if (this.boxType == 2) {
|
|
|
+ tHeader = [this.lang.StudentName,this.lang.Class];
|
|
|
+ }
|
|
|
+ const data = [];
|
|
|
+ const colWidths = [35]; // 设置每一列的宽度
|
|
|
+ export_json_to_excel(
|
|
|
+ tHeader,
|
|
|
+ data,
|
|
|
+ this.lang.Uploadstusamples,
|
|
|
+ colWidths
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传Excel添加学生
|
|
|
+ handleChange(file) {
|
|
|
+ let _this = this;
|
|
|
+ // 通过DOM取文件数据
|
|
|
+ var rABS = false; //是否将文件读取为二进制字符串
|
|
|
+ var f = file.file;
|
|
|
+ var reader = new FileReader();
|
|
|
+ //if (!FileReader.prototype.readAsBinaryString) {
|
|
|
+ FileReader.prototype.readAsBinaryString = function (f) {
|
|
|
+ var binary = "";
|
|
|
+ var rABS = false; //是否将文件读取为二进制字符串
|
|
|
+ var wb; //读取完成的数据
|
|
|
+ var outdata;
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.onload = function (e) {
|
|
|
+ var bytes = new Uint8Array(reader.result);
|
|
|
+ var length = bytes.byteLength;
|
|
|
+ for (var i = 0; i < length; i++) {
|
|
|
+ binary += String.fromCharCode(bytes[i]);
|
|
|
+ }
|
|
|
+ var XLSX = require("xlsx");
|
|
|
+ if (rABS) {
|
|
|
+ wb = XLSX.read(btoa(fixdata(binary)), {
|
|
|
+ //手动转化
|
|
|
+ type: "base64",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ wb = XLSX.read(binary, {
|
|
|
+ type: "binary",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
|
|
|
+ let da = [...outdata];
|
|
|
+ // console.log(da, "da");
|
|
|
+ let arr = [];
|
|
|
+ da.map((v) => {
|
|
|
+ let obj = {};
|
|
|
+ if (
|
|
|
+ v[_this.lang.StudentName] !== undefined &&
|
|
|
+ v[_this.lang.StudentName] !== ""
|
|
|
+ ) {
|
|
|
+ obj.name = v[_this.lang.StudentName];
|
|
|
+ if (
|
|
|
+ _this.org != "" &&
|
|
|
+ _this.org != "null" &&
|
|
|
+ _this.org != undefined &&
|
|
|
+ _this.org &&
|
|
|
+ _this.schoolChar
|
|
|
+ ) {
|
|
|
+ obj.mail =
|
|
|
+ uuidv4() + "@" + _this.schoolChar + "." + _this.userSuffix;
|
|
|
+ } else {
|
|
|
+ obj.mail = uuidv4() + "@" + _this.userSuffix;
|
|
|
+ }
|
|
|
+ obj.class = _this.boxType == 2 ? v[_this.lang.Class] : _this.classInfo.name;
|
|
|
+ arr.push(obj);
|
|
|
+ }else{
|
|
|
+ _this.$message.error('请检查上传文件学生姓名列是否填写正确');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(arr);
|
|
|
+ if (arr.length > 70) {
|
|
|
+ _this.$message.error(_this.lang.Limitmore);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.boxType == 2 && arr.filter(e => e.class) != arr.length) {
|
|
|
+ _this.$message.error('请检查上传文件班级列是否填写正确');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!arr.length) {
|
|
|
+ _this.$message.error(
|
|
|
+ "未能提取上传学生信息，请检查数据格式，使用模板文件格式上传"
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _this.$confirm('是否确认上传？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }).then(() => {
|
|
|
+ _this.accUpdate(arr);
|
|
|
+ }).catch(() => {
|
|
|
+ _this.$message.info('已取消');
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.readAsArrayBuffer(f);
|
|
|
+ };
|
|
|
+
|
|
|
+ if (rABS) {
|
|
|
+ reader.readAsArrayBuffer(f);
|
|
|
+ } else {
|
|
|
+ reader.readAsBinaryString(f);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 手动输入添加学生
|
|
|
+ addStu() {
|
|
|
+ this.selectedStuData = this.selectedStuData.filter((item) => item != "");
|
|
|
+ if (this.selectedStuData.length == 0) {
|
|
|
+ this.$message.error("请输入学生");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.selectedStuData.length > 70) {
|
|
|
+ this.$message.error("一次最多添加70人");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if ((this.boxType == 2 && this.cascaderDataPath.length == 0) || this.classInfo.name == "") {
|
|
|
+ this.$message.error("请选择所属班级");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let mail = "";
|
|
|
+ if (
|
|
|
+ this.org != "" &&
|
|
|
+ this.org != "null" &&
|
|
|
+ this.org != undefined &&
|
|
|
+ this.org &&
|
|
|
+ this.schoolChar
|
|
|
+ ) {
|
|
|
+ mail = "@" + this.schoolChar + "." + this.userSuffix;
|
|
|
+ } else {
|
|
|
+ mail = "@" + this.userSuffix;
|
|
|
+ }
|
|
|
+ let classInfo = this.classInfo;
|
|
|
+ if (this.boxType == 2) {
|
|
|
+ classInfo = this.cascaderData.flatMap((item) => item.children).filter((item) => this.cascaderDataPath[1]==item.id)[0];
|
|
|
+ }
|
|
|
+ // console.log(classInfo, "classInfo");
|
|
|
+ let box = this.selectedStuData.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ mail: uuidv4() + mail,
|
|
|
+ class: classInfo.name,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ // console.log(box, "box");
|
|
|
+
|
|
|
+ this.accUpdate(box);
|
|
|
+ },
|
|
|
+ accUpdate(box) {
|
|
|
+ console.log(box, "box");
|
|
|
+
|
|
|
+ let z = 2;
|
|
|
+ let newArr = JSON.stringify(box);
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ arr: newArr,
|
|
|
+ userpassword: "Coco1234",
|
|
|
+ oid: this.oid,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ console.log(params, "batchRegistrationMoreCopy");
|
|
|
+ // batchRegistrationMoreCopy
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "batchRegistrationMoreCopy", params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, "res");
|
|
|
+ if (res.data.type == 1) {
|
|
|
+ this.$message.error("有学生手机号码已被注册");
|
|
|
+ z = 1;
|
|
|
+ }
|
|
|
+ if (res.data.type == 2) {
|
|
|
+ this.$message.error("有学生账号已被注册");
|
|
|
+ z = 1;
|
|
|
+ }
|
|
|
+ if (res.data.type == 3) {
|
|
|
+ this.$message.error("有学生学号重复");
|
|
|
+ z = 1;
|
|
|
+ }
|
|
|
+ if (z == 2) {
|
|
|
+ console.log("添加成功");
|
|
|
+ this.$message({
|
|
|
+ message: "添加成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.addStuVisible = false;
|
|
|
+ this.selectedStuData = [];
|
|
|
+ this.$emit("getCascaderData");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 修改账号
|
|
|
+ updateAccount(arr) {
|
|
|
+ let params = {
|
|
|
+ oid: this.oid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "updateAccount", params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, "res");
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClose(index) {
|
|
|
+ this.searchStuData.splice(index, 1);
|
|
|
+ },
|
|
|
+ changeStuListType(value) {
|
|
|
+ this.addStuType = value;
|
|
|
+ this.clearData();
|
|
|
+ },
|
|
|
+ searchStu() {
|
|
|
+ this.searchStuData.push(
|
|
|
+ ...this.searchStuName
|
|
|
+ .split("，")
|
|
|
+ .map((item) => item.trim())
|
|
|
+ .filter((item) => item)
|
|
|
+ );
|
|
|
+ this.searchStuName = "";
|
|
|
+ },
|
|
|
+ selectNoneStu() {
|
|
|
+ this.popoverVisible = false;
|
|
|
+ this.searchStuData = [];
|
|
|
+ this.searchStuName = "";
|
|
|
+ },
|
|
|
+ selectStu() {
|
|
|
+ this.popoverVisible = false;
|
|
|
+ this.selectedStuData.push(...this.searchStuData);
|
|
|
+ this.searchStuData = [];
|
|
|
+ this.searchStuName = "";
|
|
|
+ },
|
|
|
+ handleSelectedStuClose(index) {
|
|
|
+ this.selectedStuData.splice(index, 1);
|
|
|
+ },
|
|
|
+ getSchoolName() {
|
|
|
+ let params = {
|
|
|
+ oid: this.oid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectSchoolName2", params)
|
|
|
+ .then((res) => {
|
|
|
+ // this.schoolName = res.data[0][0].name;
|
|
|
+ console.log(res.data[0][0].name, "res.data[0][0].name");
|
|
|
+
|
|
|
+ const cleanedSchoolName = res.data[0][0].name.replace(
|
|
|
+ /[，。；：！“”‘’（）()]/g,
|
|
|
+ ""
|
|
|
+ ); // 去掉标点符号
|
|
|
+ // console.log(pinyin);
|
|
|
+ // console.log(pinyin.getFullChars(cleanedSchoolName));
|
|
|
+ // console.log(pinyin.getCamelChars(cleanedSchoolName));
|
|
|
+ this.schoolChar = pinyin
|
|
|
+ .getCamelChars(cleanedSchoolName)
|
|
|
+ .toLowerCase();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUser() {
|
|
|
+ let params = {
|
|
|
+ userid: this.userid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectUser", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.userSuffix = res.data[0][0].accountNumber.split("@")[1];
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.myCascader
|
|
|
+ .el-cascader-panel
|
|
|
+ .el-cascader-menu:first-child
|
|
|
+ .el-scrollbar__wrap
|
|
|
+ ul
|
|
|
+ li
|
|
|
+ label,
|
|
|
+.myCascader
|
|
|
+ .el-cascader-panel
|
|
|
+ .el-cascader-menu:first-child
|
|
|
+ .el-scrollbar__wrap
|
|
|
+ ul
|
|
|
+ li
|
|
|
+ .el-checkbox {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.bar_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ gap: 20px;
|
|
|
+ border-bottom: 0.5px solid #e7e7e7;
|
|
|
+}
|
|
|
+.bar_box div {
|
|
|
+ cursor: pointer;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.active_bar {
|
|
|
+ border-bottom: 2px solid #0052d9 !important;
|
|
|
+}
|
|
|
+.addcla_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 25px;
|
|
|
+ margin-top: 30px;
|
|
|
+ min-height: 300px;
|
|
|
+}
|
|
|
+.addcla_box_item {
|
|
|
+ min-height: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.addcla_box_item >>> .el-cascader {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.addcla_box_item >>> .el-input__inner {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.addcla_box_item >>> .el-input__icon {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.addcla_box_item > .addcla_box_item_span {
|
|
|
+ width: 80px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.search_stu_box {
|
|
|
+ width: 570px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ top: 100%;
|
|
|
+ left: 90px;
|
|
|
+ z-index: 1000;
|
|
|
+ min-height: 110px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e8f3ff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.search_stu_box_content {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.selected_stu_box_item {
|
|
|
+ background: #e8f3ff;
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.search_stu_box_footer {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.selected_stu_box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.upload-demo {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 25px;
|
|
|
+ border: 0.5px dashed #e7e7e7;
|
|
|
+}
|
|
|
+.upload-demo:hover {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0.5px dashed #0052d9;
|
|
|
+}
|
|
|
+.upload-demo >>> .el-upload {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.upload-demo >>> .el-upload-dragger {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 200px;
|
|
|
+ border: none;
|
|
|
+ background: #f2f4f5;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-demo-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.download-template {
|
|
|
+ color: #0052d9;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #0052d9;
|
|
|
+}
|
|
|
+</style>
|
