|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-dialog :visible.sync="addStuVisible" width="700px">
|
|
|
+ <el-dialog class="addstudia" :visible.sync="addStuVisible" width="800px">
|
|
|
<template #title>
|
|
|
<div class="title_box">
|
|
|
<div class="title_box_item">
|
|
|
@@ -25,7 +25,7 @@
|
|
|
<!-- 手动添加学生 -->
|
|
|
<div class="addcla_box" v-if="addStuType == 1">
|
|
|
<div class="addcla_box_item" v-if="boxType != 2">
|
|
|
- <span class="addcla_box_item_span">所属班级:</span>
|
|
|
+ <span class="addcla_box_item_span">所属班级：</span>
|
|
|
<el-input
|
|
|
v-model.trim="classInfo.name"
|
|
|
disabled
|
|
|
@@ -33,7 +33,7 @@
|
|
|
></el-input>
|
|
|
</div>
|
|
|
<div class="addcla_box_item" v-if="boxType == 2">
|
|
|
- <span class="addcla_box_item_span">所属年级:</span>
|
|
|
+ <span class="addcla_box_item_span">所属班级：</span>
|
|
|
<el-cascader
|
|
|
:options="cascaderData"
|
|
|
v-model="cascaderDataPath"
|
|
|
@@ -59,7 +59,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="addcla_box_item" style="position: relative">
|
|
|
- <span class="addcla_box_item_span">学生姓名:</span>
|
|
|
+ <span class="addcla_box_item_span">学生姓名：</span>
|
|
|
<el-input
|
|
|
v-model.trim="searchStuName"
|
|
|
placeholder="请输入学生姓名，多个姓名请用中文逗号(，)分隔"
|
|
|
@@ -69,7 +69,8 @@
|
|
|
></el-input>
|
|
|
<div class="search_stu_box" v-if="popoverVisible">
|
|
|
<div class="search_stu_box_content">
|
|
|
- <el-tag
|
|
|
+
|
|
|
+ <!-- <el-tag
|
|
|
v-for="(item, index) in searchStuData"
|
|
|
:key="index"
|
|
|
closable
|
|
|
@@ -77,7 +78,23 @@
|
|
|
@close="handleClose(index)"
|
|
|
>
|
|
|
<span>{{ item }}</span>
|
|
|
- </el-tag>
|
|
|
+ </el-tag> -->
|
|
|
+ <div class="tagL" v-for="(item, index) in searchStuData" :key="index">
|
|
|
+ <div class="tagtit" v-if="stuname2(item) == 'danger'">
|
|
|
+ <div class="poptag">
|
|
|
+ <img src="../../../../assets/stuImg/tishi.svg" alt=""/>
|
|
|
+ <div>您添加的学生“{{ item }}”存在重复姓名。 是否继续添加？</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: flex-end;gap: 10px;">
|
|
|
+ <!-- <span>添加</span> -->
|
|
|
+ <span style="cursor: pointer;" @click="addpopStu(item)">添加</span>
|
|
|
+
|
|
|
+ <span style="cursor: pointer;color: #0052D9;" @click="delSeaStu(index)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tagitem" :class="stuname2(item) == 'danger' ? 'tagitem2' :''">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="search_stu_box_footer">
|
|
|
<div>输入学生共{{ searchStuData.length }}人</div>
|
|
|
@@ -93,9 +110,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="addcla_box_item">
|
|
|
- <span class="addcla_box_item_span">已选择学生:</span>
|
|
|
+ <span class="addcla_box_item_span">已输入：</span>
|
|
|
<div class="selected_stu_box">
|
|
|
- <el-tag
|
|
|
+ <!-- <el-tag
|
|
|
v-for="(item, index) in selectedStuData"
|
|
|
:key="index"
|
|
|
closable
|
|
|
@@ -103,7 +120,21 @@
|
|
|
@close="handleSelectedStuClose(index)"
|
|
|
>
|
|
|
<span>{{ item }}</span>
|
|
|
- </el-tag>
|
|
|
+ </el-tag> -->
|
|
|
+ <div class="tagL" v-for="(item, index) in selectedStuData" :key="index">
|
|
|
+ <div class="tagtit" v-if="stuname(item) == 'danger'">
|
|
|
+ <div class="poptag">
|
|
|
+ <img src="../../../../assets/stuImg/tishi.svg" alt=""/>
|
|
|
+ <div>您添加的学生“{{ item }}”存在重复姓名。 是否继续添加？</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: flex-end;gap: 10px;">
|
|
|
+ <!-- <span>添加</span> -->
|
|
|
+ <span style="cursor: pointer;" @click="addpopStu(item)">添加</span>
|
|
|
+ <span style="cursor: pointer;color: #0052D9;" @click="handleSelectedStuClose(index)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tagitem" :class="stuname(item) == 'danger' ? 'tagitem2' :''">{{ item }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -117,20 +148,24 @@
|
|
|
action="#"
|
|
|
:show-file-list="false"
|
|
|
accept=".xlsx,.xls"
|
|
|
+ v-loading="uploadfileLoading"
|
|
|
>
|
|
|
<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 style="margin-top: 10px">
|
|
|
+ 学生列表批量上传需表格需添加“班级”列
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 从已有学生中添加 -->
|
|
|
@@ -152,6 +187,25 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <div class="pop-upBox">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="popBoxdia"
|
|
|
+ width="480px"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <div class="msgCon">
|
|
|
+ <img style="width: 20px;" src="../../../../assets/stuImg/duil.svg" alt="">
|
|
|
+ <div class="msgContxt">
|
|
|
+ <div>{{impbox.length ? impbox[0].name : ''}}等{{impbox.length}} 名同学已添加成功</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="confirmDelStu"
|
|
|
+ >确 认</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -199,6 +253,10 @@ export default {
|
|
|
role: this.$route.query.role,
|
|
|
cascaderDataPath: [],
|
|
|
|
|
|
+ impbox:[],
|
|
|
+ addpopStuList:[],
|
|
|
+ popBoxdia:false,
|
|
|
+ uploadfileLoading:false,
|
|
|
addStuType: 1,
|
|
|
schoolChar: "",
|
|
|
userSuffix: "",
|
|
|
@@ -233,19 +291,20 @@ export default {
|
|
|
searchStuData: [],
|
|
|
selectedStuData: [],
|
|
|
popoverVisible: false,
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
stuname() {
|
|
|
return (item) => {
|
|
|
- let box = this.selectedStuData.filter((e) => e === item);
|
|
|
+ let box = this.selectedStuData.filter((e) => (e === item && this.addpopStuList.indexOf(item) == -1));
|
|
|
// console.log(box);
|
|
|
return box.length > 1 ? "danger" : "";
|
|
|
};
|
|
|
},
|
|
|
stuname2() {
|
|
|
return (item) => {
|
|
|
- let box = this.searchStuData.filter((e) => e === item);
|
|
|
+ let box = this.searchStuData.filter((e) => (e === item && this.addpopStuList.indexOf(item) == -1));
|
|
|
// console.log(box);
|
|
|
return box.length > 1 ? "danger" : "";
|
|
|
};
|
|
|
@@ -256,6 +315,34 @@ export default {
|
|
|
this.getSchoolName();
|
|
|
},
|
|
|
methods: {
|
|
|
+ stardop(){
|
|
|
+ this.addStuVisible = true;
|
|
|
+ this.searchStuName= "";
|
|
|
+ console.log('666');
|
|
|
+ // this.addStuType=1
|
|
|
+ if (this.boxType == 1) {
|
|
|
+ this.stuListTypeList = [];
|
|
|
+ this.addStuType = 3;
|
|
|
+ } else if (this.boxType == 0) {
|
|
|
+ this.stuListTypeList = this.tab1;
|
|
|
+ this.addStuType = 1;
|
|
|
+ } else if (this.boxType == 2) {
|
|
|
+ this.stuListTypeList = this.tab2;
|
|
|
+ this.addStuType = 1;
|
|
|
+ }
|
|
|
+ this.searchStuData= [];
|
|
|
+ this.selectedStuData= [];
|
|
|
+ this.cascaderDataPath=[];
|
|
|
+ this.impbox=[];
|
|
|
+ this.addpopStuList=[];
|
|
|
+
|
|
|
+ },
|
|
|
+ addpopStu(val){
|
|
|
+ this.addpopStuList.push(val)
|
|
|
+ },
|
|
|
+ delSeaStu(ind){
|
|
|
+ this.searchStuData.splice(ind,1)
|
|
|
+ },
|
|
|
handleChangecascader(val) {
|
|
|
console.log(val);
|
|
|
// 更新级联选择器的选中数据路径
|
|
|
@@ -298,6 +385,7 @@ export default {
|
|
|
);
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
// 上传Excel添加学生
|
|
|
handleChange(file) {
|
|
|
let _this = this;
|
|
|
@@ -381,8 +469,10 @@ export default {
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
}).then(() => {
|
|
|
+ _this.uploadfileLoading = true;
|
|
|
_this.accUpdate(arr);
|
|
|
}).catch(() => {
|
|
|
+ _this.uploadfileLoading = false;
|
|
|
_this.$message.info('已取消');
|
|
|
});
|
|
|
};
|
|
|
@@ -442,7 +532,7 @@ export default {
|
|
|
},
|
|
|
accUpdate(box) {
|
|
|
console.log(box, "box");
|
|
|
-
|
|
|
+ this.impbox = box;
|
|
|
let z = 2;
|
|
|
let newArr = JSON.stringify(box);
|
|
|
let params = [
|
|
|
@@ -476,16 +566,25 @@ export default {
|
|
|
message: "添加成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
- this.addStuVisible = false;
|
|
|
- this.selectedStuData = [];
|
|
|
+ this.popBoxdia= true;
|
|
|
+ // this.addStuVisible = false;
|
|
|
+ console.log('this.selectedStuData',this.selectedStuData);
|
|
|
+
|
|
|
+ // this.selectedStuData = [];
|
|
|
this.$emit("getCascaderData");
|
|
|
}
|
|
|
+ this.uploadfileLoading = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+ confirmDelStu(){
|
|
|
+ // this.addStuVisible = false;
|
|
|
+ this.popBoxdia= false;
|
|
|
+ this.impbox = []
|
|
|
+ this.selectedStuData = [];
|
|
|
+ },
|
|
|
// 修改账号
|
|
|
updateAccount(arr) {
|
|
|
let params = {
|
|
|
@@ -588,6 +687,26 @@ export default {
|
|
|
.el-checkbox {
|
|
|
display: none !important;
|
|
|
}
|
|
|
+.seaStutxt {
|
|
|
+ width: 360px !important;
|
|
|
+ min-width: 60px !important;
|
|
|
+ padding: 16px !important;
|
|
|
+}
|
|
|
+.seaStuBtn{
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+/* .seaStutxt .action_box > div {
|
|
|
+ padding: 8px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.seaStutxt .action_box > div:hover {
|
|
|
+ background: #e8f3ff;
|
|
|
+ color: #0052d9;
|
|
|
+} */
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.bar_box {
|
|
|
@@ -633,7 +752,7 @@ export default {
|
|
|
text-align: right;
|
|
|
}
|
|
|
.search_stu_box {
|
|
|
- width: 570px;
|
|
|
+ width: 670px;
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -644,12 +763,16 @@ export default {
|
|
|
background: #fff;
|
|
|
border: 1px solid #e8f3ff;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 10px;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05);
|
|
|
}
|
|
|
.search_stu_box_content {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
flex: 1;
|
|
|
+ padding: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.selected_stu_box_item {
|
|
|
background: #e8f3ff;
|
|
|
@@ -662,9 +785,12 @@ export default {
|
|
|
.search_stu_box_footer {
|
|
|
display: flex;
|
|
|
height: 40px;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
+ border-top: 1px #e7e7e7 solid;
|
|
|
}
|
|
|
.selected_stu_box {
|
|
|
display: flex;
|
|
|
@@ -714,4 +840,83 @@ export default {
|
|
|
cursor: pointer;
|
|
|
border-bottom: 1px solid #0052d9;
|
|
|
}
|
|
|
+.msgCon{
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.msgContxt{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.tagL{
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #E7F3FF;
|
|
|
+ border: 1px #DDE4E5 solid;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.tagitem{
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.tagtit{
|
|
|
+ position: absolute;
|
|
|
+ top: -116px;
|
|
|
+ right: 0;
|
|
|
+ background: #999;
|
|
|
+ display: none;
|
|
|
+ width: 304px;
|
|
|
+ height: 116px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ padding: 10px;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.poptag{
|
|
|
+ display: flex !important;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+.tagtit img{
|
|
|
+ width: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+/* tagtit 与 tagitem 是兄弟关系，需通过父元素 tagL 来联动 */
|
|
|
+.tagL:hover .tagtit{
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+.tagitem2{
|
|
|
+ background: #FEF0F0;
|
|
|
+ border: 1px #FEF0F0 solid;
|
|
|
+}
|
|
|
+.pop-upBox >>> .el-dialog{
|
|
|
+ border-radius: 8px !important;
|
|
|
+ margin-top: 30vh !important;
|
|
|
+}
|
|
|
+.pop-upBox >>> .el-dialog__body{
|
|
|
+ padding: 12px 23px;
|
|
|
+}
|
|
|
+.msgCon{
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.msgContxt{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
</style>
|
