|
|
@@ -5,36 +5,49 @@
|
|
|
<img src="../../../assets/stuImg/riqi.svg" alt="" />
|
|
|
<span style="color: #86909c; font-size: 12px">年级管理</span>
|
|
|
</div>
|
|
|
- <div class="Clabtn" @click="openaddClass">
|
|
|
- <img src="../../../assets/stuImg/jia.svg" alt="" />
|
|
|
- <span>新班级</span>
|
|
|
- </div>
|
|
|
+ <!-- v-if="orglist.includes(org)" -->
|
|
|
+
|
|
|
+ <template v-loading="boxLoading">
|
|
|
+ <div v-if="orglist.includes(org)" class="Clabtn" @click="openaddClass(1)">
|
|
|
+ <img src="../../../assets/stuImg/jia.svg" alt="" />
|
|
|
+ <span>新年级</span>
|
|
|
+ </div>
|
|
|
+ <div class="Clabtn" @click="openaddClass(0)">
|
|
|
+ <img src="../../../assets/stuImg/jia.svg" alt="" />
|
|
|
+ <span>新班级</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-menu
|
|
|
+ :default-active="activeId"
|
|
|
+ class="el-menu-vertical-demo"
|
|
|
+ >
|
|
|
+ <el-submenu v-for="item in tableData" :index="item.id" :key="item.id">
|
|
|
+ <template slot="title">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <img
|
|
|
+ class="grade-submenu-arrow"
|
|
|
+ src="../../../assets/stuImg/zankai.svg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <el-menu-item-group
|
|
|
+ v-for="k in item.children"
|
|
|
+ :key="k.id"
|
|
|
+ :title="k.name"
|
|
|
+ >
|
|
|
+ <el-menu-item :index="k.id" @click="handleClick(k.id, 0,k)">
|
|
|
+ <span>{{ k.name }}</span>
|
|
|
+ <span>（{{ k.pnum }}人）</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu-item-group>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
+ </template>
|
|
|
|
|
|
- <el-menu
|
|
|
- :default-active="activeId"
|
|
|
- class="el-menu-vertical-demo"
|
|
|
- v-loading="boxLoading"
|
|
|
- >
|
|
|
- <el-submenu v-for="item in tableData" :index="item.id" :key="item.id">
|
|
|
- <template slot="title">
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </template>
|
|
|
- <el-menu-item-group
|
|
|
- v-for="k in item.children"
|
|
|
- :key="k.id"
|
|
|
- :title="k.name"
|
|
|
- >
|
|
|
- <el-menu-item :index="k.id" @click="handleClick(k.id, 0,k)">
|
|
|
- <span>{{ k.name }}</span>
|
|
|
- <span>（{{ k.pnum }}人）</span>
|
|
|
- </el-menu-item>
|
|
|
- </el-menu-item-group>
|
|
|
- </el-submenu>
|
|
|
- </el-menu>
|
|
|
<div class="line"></div>
|
|
|
<div class="centerCss">
|
|
|
<img src="../../../assets/stuImg/inf.svg" alt="" />
|
|
|
- <span style="color: #86909c; font-size: 12px">年级管理</span>
|
|
|
+ <span style="color: #86909c; font-size: 12px">兴趣班管理</span>
|
|
|
</div>
|
|
|
<div
|
|
|
class="por"
|
|
|
@@ -56,6 +69,8 @@
|
|
|
学生列表
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 右侧table区域 -->
|
|
|
<div class="leftbox">
|
|
|
<tableL
|
|
|
:activeIdL="activeId"
|
|
|
@@ -71,12 +86,13 @@
|
|
|
title="添加班级"
|
|
|
:visible.sync="addClassVisible"
|
|
|
width="500px"
|
|
|
+ :show-close="false"
|
|
|
class="addClassDialog"
|
|
|
>
|
|
|
<div class="addcla_box">
|
|
|
<div class="addcla_box_item">
|
|
|
- <span>所属年级:</span>
|
|
|
- <el-select v-model="addclaGrade" placeholder="请选择年级">
|
|
|
+ <span>所属班级:</span>
|
|
|
+ <el-select v-model="addclaGrade" placeholder="请选择班级">
|
|
|
<el-option
|
|
|
v-for="item in tableData"
|
|
|
:key="item.id"
|
|
|
@@ -94,8 +110,27 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="addClassVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="addClass">确 定</el-button>
|
|
|
+ <div @click="addClassVisible = false">取 消</div>
|
|
|
+ <div @click="addClass" style="background: #3681FC; color: #fff;">确 定</div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="添加年级"
|
|
|
+ :visible.sync="addgraVisible"
|
|
|
+ width="500px"
|
|
|
+ :show-close="false"
|
|
|
+ class="addClassDialog"
|
|
|
+ >
|
|
|
+ <div class="addcla_box">
|
|
|
+ <div class="addcla_box_item">
|
|
|
+ <span>年级:</span>
|
|
|
+ <el-input v-model.trim="addgraName" placeholder="请输入年级"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <div @click="addgraVisible = false">取 消</div>
|
|
|
+ <div @click="addgra" style="background: #3681FC; color: #fff;">确 定</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -113,14 +148,23 @@ export default {
|
|
|
org: this.$route.query.org,
|
|
|
oid: this.$route.query.oid,
|
|
|
role: this.$route.query.role,
|
|
|
- boxLoading: false,
|
|
|
- addClassVisible: false,
|
|
|
|
|
|
+ boxLoading: false, //年级区域loading
|
|
|
+ addClassVisible: false,
|
|
|
+ addgraVisible:false,
|
|
|
addclaName: "", // 新增班级名称
|
|
|
addclaGrade: "", // 新增班级所属年级
|
|
|
|
|
|
- tableData: [],
|
|
|
- cascaderData: [],
|
|
|
+ addgraName:'',
|
|
|
+
|
|
|
+ orglist:[
|
|
|
+ "1973f6c7-1561-11ee-91d8-005056b86db5",
|
|
|
+ "16ace517-b5c7-4168-a9bb-a9e0035df840"
|
|
|
+ ],
|
|
|
+
|
|
|
+
|
|
|
+ tableData: [], //年级列表
|
|
|
+ cascaderData: [], //年级列表加兴趣班列表
|
|
|
|
|
|
activeId: "", // 当前选中的班级id
|
|
|
activeinfo: {}, // 当前选中的班级信息
|
|
|
@@ -129,8 +173,49 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 添加年级
|
|
|
+ addgra(){
|
|
|
+ if (!this.addgraName) {
|
|
|
+ this.$message.error('请输入年级名称')
|
|
|
+ }
|
|
|
+ this.boxLoading = true;
|
|
|
+ let params = {
|
|
|
+ name: this.addgraName,
|
|
|
+ oid: this.oid,
|
|
|
+ uid: this.userid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "insertGrade", params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0] && res.data[0][0].classname == 1) {
|
|
|
+ this.$message({
|
|
|
+ message: this.lang.Cannotsameother,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ this.boxLoading = false;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: this.lang.AddSuccessful,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.addgraVisible = false;
|
|
|
+ this.addgraName = "";
|
|
|
+ this.getGrade()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ message: this.lang.Additionfailed,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ this.boxLoading = false;
|
|
|
+
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
//获取年级列表
|
|
|
- getGrade() {
|
|
|
+ getGrade(val = 0) {
|
|
|
this.boxLoading = true;
|
|
|
let params = {
|
|
|
oid: this.oid,
|
|
|
@@ -149,16 +234,11 @@ export default {
|
|
|
e.children = box2.filter((item) => item.pid == e.id);
|
|
|
});
|
|
|
if (box2.length) {
|
|
|
- // console.log('this.activeId',this.activeId);
|
|
|
- // console.log('box2',box2);
|
|
|
- // console.log('box2.indexOf(this.activeId)',box2.indexOf(this.activeId));
|
|
|
- // || (this.activeId && this.boxType == 1 && box2.filter(item => item.id == this.activeId).length == 0)
|
|
|
- if(this.activeId == ''){
|
|
|
+ if(this.activeId == '' || val ==1){
|
|
|
console.log('111');
|
|
|
-
|
|
|
this.activeId = box2[0].id;
|
|
|
- this.activeinfo = box2[0];
|
|
|
}
|
|
|
+ this.activeinfo = box2[0];
|
|
|
}
|
|
|
|
|
|
box3.push({id:0,name:"兴趣班",children:[]});
|
|
|
@@ -181,8 +261,12 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- openaddClass() {
|
|
|
- this.addClassVisible = true;
|
|
|
+ openaddClass(val) {
|
|
|
+ if (val) {
|
|
|
+ this.addgraVisible = true;
|
|
|
+ }else{
|
|
|
+ this.addClassVisible = true;
|
|
|
+ }
|
|
|
},
|
|
|
// 新增班级
|
|
|
addClass() {
|
|
|
@@ -299,6 +383,9 @@ export default {
|
|
|
}
|
|
|
.rigbox >>> .el-menu li {
|
|
|
padding: 0 !important;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: PingFang SC, PingFang SC !important;
|
|
|
+ /* color: rgba(0,0,0,0.9) !important; */
|
|
|
}
|
|
|
.rigbox >>> .el-submenu .el-menu-item {
|
|
|
min-width: 146px !important;
|
|
|
@@ -317,6 +404,19 @@ export default {
|
|
|
height: 35px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.rigbox >>> .grade-submenu-arrow {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: transform 0.2s;
|
|
|
+}
|
|
|
+.rigbox >>> .el-submenu.is-opened > .el-submenu__title .grade-submenu-arrow {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+.rigbox >>> .el-submenu__icon-arrow {
|
|
|
+ display: none;
|
|
|
}
|
|
|
.el-menu-item:focus,
|
|
|
.el-menu-item:hover {
|
|
|
@@ -329,7 +429,7 @@ export default {
|
|
|
}
|
|
|
.por {
|
|
|
cursor: pointer;
|
|
|
- padding: 5px;
|
|
|
+ padding: 8px 5px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.active {
|
|
|
@@ -351,11 +451,32 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
.addcla_box_item span {
|
|
|
- width: 80px;
|
|
|
+ /* width: 80px; */
|
|
|
flex-shrink: 0;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.addClassDialog >>> .el-dialog {
|
|
|
border-radius: 10px !important;
|
|
|
+ height: 427px !important;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.addClassDialog >>> .el-dialog__body {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.dialog-footer div{
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 7px 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
11wqe1