pbl-teacher-table/src/components/pages/studentManageNew/index.vue

<template>
  <div class="box">
    <div class="rigbox">
      <div class="centerCss">
        <img src="../../../assets/stuImg/riqi.svg" alt="" />
        <span style="color: #86909c; font-size: 12px">年级管理</span>
      </div>
      <!-- v-if="orglist.includes(org)" -->

      <template v-loading="boxLoading">
      <div style="display: flex; gap: 10px;">
        <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>
      </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" style="font-weight: normal;" @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>

      <div class="line"></div>
      <div class="centerCss">
        <img src="../../../assets/stuImg/inf.svg" alt="" />
        <span style="color: #86909c; font-size: 12px">兴趣班管理</span>
      </div>
      <div
        class="por"
        :class="{ active: boxType == 1 }"
        @click="handleClick('1', 1)"
      >
        兴趣班列表
      </div>
      <div class="line"></div>
      <div class="centerCss">
        <img src="../../../assets/stuImg/per.svg" alt="" />
        <span style="color: #86909c; font-size: 12px">学生管理</span>
      </div>
      <div
        class="por"
        :class="{ active: boxType == 2 }"
        @click="handleClick('2', 2)"
      >
        学生列表
      </div>
    </div>

    <!-- 右侧table区域 -->
    <div class="leftbox">
      <tableL
        :activeIdL="activeId"
        :boxType="boxType"
        :GrapTableData="cascaderData"
        :activeinfoData="activeinfo"
        @getGrade="getGrade"
      ></tableL>
    </div>

    <!-- 新增班级  -->
    <el-dialog
      title="添加班级"
      :visible.sync="addClassVisible"
      width="427px"
      :show-close="false"
      class="addClassDialog"
    >
      <div class="addcla_box">
        <div class="addcla_box_item">
          <span>所属年级:</span>
          <el-select v-model="addclaGrade" placeholder="请选择年级">
            <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="addcla_box_item">
          <span>班级名称:</span>
          <el-input
            v-model="addclaName"
            placeholder="请输入班级名称"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div @click="addClassVisible = false">取消</div>
        <div @click="addClass" style="background: #3681FC; color: #E3EDFF;">确认</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" style="color: #363636;">取消</div>
        <div @click="addgra" style="background: #3681FC; color: #E6FFFFFF;">确认</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableL from "./component/table.vue";
export default {
  components: {
    tableL,
  },
  data() {
    return {
      userid: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      role: this.$route.query.role,

      boxLoading: false, //年级区域loading
      addClassVisible: false,
      addgraVisible:false,
      addclaName: "", // 新增班级名称
      addclaGrade: "", // 新增班级所属年级

      addgraName:'',

      orglist:[
        "1973f6c7-1561-11ee-91d8-005056b86db5",
        "16ace517-b5c7-4168-a9bb-a9e0035df840"
      ],


      tableData: [], //年级列表
      cascaderData: [], //年级列表加兴趣班列表

      activeId: "", // 当前选中的班级id
      activeinfo: {}, // 当前选中的班级信息

      boxType: 0, // 0:年级, 1:兴趣班, 2:学生
    };
  },
  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(val = 0) {
      this.boxLoading = true;
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectGradeNew", params)
        .then((res) => {
          this.boxLoading = false;
          let box1 = JSON.parse(JSON.stringify(res.data[0]));
          let box2 = JSON.parse(JSON.stringify(res.data[1]));
          let box3 = JSON.parse(JSON.stringify(res.data[0]));
          let box4 = JSON.parse(JSON.stringify(res.data[1]));

          box1.forEach((e) => {
            e.children = [];
            e.children = box2.filter((item) => item.pid == e.id);
          });
          if (box2.length) {
            if(this.activeId == '' || val ==1){
              console.log('111');
              this.activeId = box2[0].id;
              this.activeinfo = box2[0];
            } else {
              const activeItem = box2.find((item) => item.id === this.activeId);
              if (activeItem) {
                this.activeinfo = activeItem;
              }
            }
          }

          box3.push({id:0,name:"兴趣班",children:[]});
          // 获取所有年级的id列表（不包括兴趣班id:0）
          const gradeIds = box3.filter(e => e.id !== 0).map(e => e.id);
          box3.forEach((e) => {
            e.children = [];
            e.children = box4.filter((item) => item.pid == e.id);
            if (e.id === 0) {
              e.children = box4.filter((item) => !gradeIds.includes(item.pid));
            }
          });

          this.cascaderData = box3;
          this.tableData = box1;
        })
        .catch((err) => {
          this.boxLoading = false;
          console.error(err);
        });
    },

    openaddClass(val) {
      if (val) {
        this.addgraVisible = true;
      }else{
        this.addClassVisible = true;
      }
    },
    // 新增班级
    addClass() {
      if (!this.addclaName) {
        this.$message({
          message: "请输入班级名称",
          type: "error",
        });
        return;
      }
      //新增班级
      let params = [
        {
          claName: this.addclaName,
          gid: this.addclaGrade,
          oid: this.oid,
          uid: this.userid,
        },
      ];
      console.log(params);

      this.ajax
        .post(this.$store.state.api + "addClassgra", params)
        .then((res) => {
          if (res.data[0] && res.data[0][0].classname == 1) {
            this.$message({
              message: this.lang.Cannotsameothercla,
              type: "error",
            });
          } else {
            this.$message({
              message: this.lang.AddSuccessful,
              type: "success",
            });
            this.addClassVisible = false;
            this.addclaName = "";
            this.addclaGrade = "";
            this.getGrade();
          }
        })
        .catch((err) => {
          this.$message({
            message: this.lang.Additionfailed,
            type: "error",
          });
          console.error(err);
        });
    },

    // 切换班级
    handleClick(id, index,item = {}) {
      this.boxType = index;
      this.activeId = id;
      this.activeinfo = item;
    },
  },
  mounted() {
    this.getGrade();
  },
};
</script>

<style scoped>
.box {
  padding: 15px;
  box-sizing: border-box;
  background: #e7eaf0;
  display: flex;
  gap: 15px;
  width: 100%;
  height: 100%;
  font-family: PingFang SC, PingFang SC;
}
.rigbox {
  background: #fff;
  height: 100%;
  width: 176px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
}

.leftbox {
  flex: 1;
}
.centerCss {
  display: flex;
  align-items: center;
  gap: 5px;
}
.Clabtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #0052d9;
  background: #e8f3ff;
  border-radius: 3px;
  padding: 5px 4px;
  flex: 1;
  box-sizing: border-box;
  font-size: 14px;
  cursor: pointer;
}
.rigbox >>> .el-menu {
  border: none;
}
.rigbox >>> .el-menu-item-group__title {
  display: none;
}
.rigbox >>> .el-menu li {
  padding: 0 !important;
  font-weight: 600;
  margin-top: 5px;
  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;
  max-width: 146px;
  height: 35px;
  display: flex;
  align-items: center;
  padding-left: 30px !important;
}
.rigbox >>> .el-menu-item.is-active {
  color: #fff;
  background: #0052d9;
  border-radius: 5px;
}
.rigbox >>> .el-submenu__title {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rigbox >>> .el-submenu__title:hover{
  border-radius: 5px;
}
.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 {
  background: none;
}
.line {
  height: 1px;
  background: #e6eaf0;
  margin: 5px 0;
}
.por {
  cursor: pointer;
  padding: 8px 5px;
  font-size: 14px;
  box-sizing: border-box;
}
.active {
  background: #0052d9;
  border-radius: 5px;
  color: #fff;
}
.addcla_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.addcla_box_item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.addcla_box_item >>> .el-select {
  width: 100%;
}
.addcla_box_item span {
  /* 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: 80px; */
  text-align: center;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 14px;
}

</style>