pbl-teacher-table/src/components/pages/studentManageNew/component/editInterstcla.vue

<template>
  <div class="edit_interest_cla_box">
    <!-- 编辑兴趣班弹框 -->
    <el-dialog :visible.sync="InterestClaEditvisible" width="442px">
      <template slot="title">
        <div class="dia_title_box">
          <span>{{ lang.ssInterestClass }}</span>
        </div>
      </template>

      <div class="dia_box_item" v-loading="isLoading">
        <div class="addcla_box_item">
          <span class="addcla_box_item_span">{{ lang.ssInterClaNameColon }}</span>
          <el-input
            v-model.trim="clainfo.name"
            :placeholder="lang.ssEnterInterClaNm"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAllSelection">{{ lang.Cancel }}</el-button>
        <el-button type="primary" @click="confirmInterestClaEdit"
          >{{ lang.Confirm }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { myMixin } from "@/mixins/mixin.js"
export default {
  mixins: [ myMixin ],
  name: "editInterstcla",
  props: {
    interestClaEditInfo: {
      type: Object,
      default: () => {},
    }
  },
  watch: {
    interestClaEditInfo: {
      handler(newVal) {
        this.clainfo = newVal;
      },
      immediate: true,
    },
  },
  data() {
    return {
      userid: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      role: this.$route.query.role,
      clainfo: {}, // 班级信息
      InterestClaEditvisible: false, // 兴趣班编辑信息
      isLoading: false, // 是否加载中
    };
  },
  methods: {
    // 取消编辑兴趣班
    cancelAllSelection() {
      this.InterestClaEditvisible = false;
    },
    // 编辑兴趣班确定
    confirmInterestClaEdit() {
      if (this.clainfo.name == "") {
        this.$message({
          message: this.lang.ssEnterInterClaNm,
          type: "error",
        });
        return;
      }
      if (this.isLoading) {
        this.$message.warning(this.lang.ssEditing);
        return;
      }
      this.isLoading = true;
      this.confirmClaEdit();
    },
    // 修改班级名称确定
    confirmClaEdit() {
      let params = {
        id: this.clainfo.id,
        n: this.clainfo.name,
        pid: this.clainfo.pid,
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "updateClassNew", params)
        .then((res) => {
          this.isLoading = false;
          if (res.data[0] && res.data[0][0].classname == 1) {
            this.$message({
              message: this.lang.Cannotsameothercla,
              type: "error",
            });
            this.addOp3('1', "", { type: "interest_class_edit" }, err)
          } else {
            this.$message({
              message: this.lang.Editsuccessful,
              type: "success",
            });
            // this.$emit("getInterestClass"); 
            this.$emit("getCascaderData");
            this.InterestClaEditvisible = false;

            this.addOp3('1', "", { type: "interest_class_edit" }, "success")
          }
        })
        .catch((err) => {
          this.isLoading = false;
          this.$message({
            message: this.lang.Modificationfailed,
            type: "error",
          });
          this.InterestClaEditvisible = false;

          console.error(err);
          this.addOp3('1', "", { type: "interest_class_edit" }, err)
        });
    },
  },
};
</script>

<style scoped>
.dia_box_item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.addcla_box_item {
  min-height: 35px;
  /* line-height: 30px; */
  display: flex;
  align-items: center;
  gap: 10px;
}
.addcla_box_item >>> .el-cascader {
  width: 100%;
}
.addcla_box_item >>> .el-select {
  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;
}
.tableList >>> .el-table__body-wrapper {
  height: 500px;
}
.cla_span {
  background: #e8f3ff;
  color: #0052d9;
  padding: 0px 10px;
  border-radius: 5px;
  box-sizing: border-box;
}
.search_stu_box {
  width: 670px;
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 100%;
  left: 90px;
  z-index: 1000;
  min-height: 160px;
  background: #fff;
  border: 1px solid #e8f3ff;
  box-sizing: border-box;
  padding: 10px;
}
.search_stu_box_content {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  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;
}
.page_box {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cla_box {
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>