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

<template>
  <div>
    <el-dialog
      title="评价资源"
      :visible.sync="dialogVisibleEva"
      :append-to-body="true"
      width="1000px"
      :before-close="handleClose"
      class="addNewPP2"
    >
      <div slot="title" class="header-title">
        <div class="titleNav">评价资源</div>
      </div>
      <div class="evaBox">
        <div class="evaTop">
          <div :class="type == 0 ? 'isTypeNav' : 'typeNav'" @click="setType(0)">
            公共资源
          </div>
          <div :class="type == 1 ? 'isTypeNav' : 'typeNav'" @click="setType(1)">
            个人资源
          </div>
          <div :class="type == 2 ? 'isTypeNav' : 'typeNav'" @click="setType(2)">
            组织资源
          </div>
          <div class="search">
            <el-input
              v-model="evaName"
              placeholder="搜索资源"
              @change="getSource"
            ></el-input>
          </div>
        </div>
        <div class="choose">
          <div
            class="all_choose"
            v-for="(item, index) in CourseType[0]"
            :key="index"
            :style="{ margin: !CourseTypeJson[item.id].length && 0 }"
            v-if="
              item.name != '二级分类' ||
              typea != '' ||
              typeE.indexOf('3c73702a-aba9-11ee-b534-005056b86db5') != -1
            "
          >
            <span>{{ item.name }}:</span>
            <div class="typeCss">
              <div
                class="cName"
                @click="getCourse2(item.name, '', item.id, 1)"
                :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''"
              >
                全部
              </div>
              <div
                v-for="(item1, index1) in ctype(item.id)"
                :key="index + '-' + index1"
                :label="item1.id"
                @click="getCourse2(item.name, item.id, item1.id, 2)"
                v-if="CourseTypeJson[item.id].length"
              >
                <div
                  class="cName"
                  :class="
                    typea == item1.id || typeb == item1.id ? 'isCType' : ''
                  "
                >
                  {{ item1.name }}
                </div>
              </div>
              <div class="addType" @click="openAddDia(item.id)" v-show="false">
                <img
                  src="../../../assets/icon/courseEvaTemplate/add.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>

        <div v-loading="loading" :class="isHalf ? 'halfCEvaAllBox' : ''">
          <div :class="isHalf ? 'halfCEvaBox' : 'cEvaBox'">
            <div
              v-for="(item, index) in res"
              :key="index"
              v-show="res.length > 0"
              style="width: 100%; height: 100%"
            >
              <div
                class="cEvaItem"
                @click="getDetail(item.id, item.json)"
                :style="{
                  backgroundColor:
                    isHalf && isHoverId == item.id ? '#e7e7e7' : '',
                }"
              >
                <div class="cEvaTBox">
                  <div v-if="type == 0" class="titleIcon">
                    <img
                      src="../../../assets/icon/courseEvaTemplate/one.png"
                      alt=""
                    />
                  </div>
                  <div v-if="type == 1" class="titleIcon">
                    <img
                      src="../../../assets/icon/courseEvaTemplate/two.png"
                      alt=""
                    />
                  </div>
                  <div v-if="type == 2" class="titleIcon">
                    <img
                      src="../../../assets/icon/courseEvaTemplate/three.png"
                      alt=""
                    />
                  </div>
                  <div class="cEvaTitle">
                    {{ item.name }}
                  </div>
                </div>

                <div :class="isHoverId == item.id ? 'iscEvaIcon' : 'cEvaIcon'">
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="重命名"
                    placement="bottom"
                  >
                    <div
                      class="reName"
                      @click.stop="reName(item.id, item.name)"
                    ></div>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="设置分类"
                    placement="bottom"
                  >
                    <div class="grouping" @click.stop="grouping(item.id)"></div>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="删除"
                    placement="bottom"
                  >
                    <div class="delete" @click.stop="dCET(item.id)"></div>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="分享"
                    placement="bottom"
                  >
                    <div class="share" @click.stop="share(item)"></div>
                  </el-tooltip>
                </div>
              </div>
            </div>

            <div
              v-show="res.length == 0"
              class="cEvaItemBox"
              style="padding: 15px 30px; font-size: 18px"
            >
              暂无内容
            </div>
          </div>

          <div :class="isHalf ? 'isHalfDiv1' : ''" v-if="isHalf">
            <div
              v-for="(eItem, eIndex) in json"
              :key="eIndex"
              class="elist_input_box"
            >
              <div class="elist_inptu_text">
                <span>评价维度：</span>
                <span>{{ eItem.value }}</span>
              </div>
              <div class="elist_inptu_text">
                <span>维度描述：</span>
                <span>{{ eItem.detail }}</span>
              </div>
            </div>
            <div style="width: 100%">
              <el-button type="primary" style="float: right" @click="confirm()"
                >使用</el-button
              >
            </div>
          </div>
        </div>

        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pageSize"
          layout=" prev, pager, next"
          background
          :total="total"
          style="padding: 20px 10px; box-sizing: border-box"
        >
        </el-pagination>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close()">确 认</el-button>
        <el-button @click="close()">关 闭</el-button>
      </span> -->
    </el-dialog>

    <el-dialog
      title="重命名"
      :visible.sync="uNamedialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose1"
      class="addNewPP2"
    >
      <div slot="title" class="header-title">
        <div class="titleNav">重命名</div>
      </div>
      <div class="addTypeChoose" style="justify-content: center">
        <div style="min-width: 100px">模板名称：</div>
        <el-input v-model="upNJson.name" style="width: 200px"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upCETName()">确 认</el-button>
        <el-button @click="close1()">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="添加分类"
      :visible.sync="addTypeDialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose2"
      class="addNewPP2"
    >
      <div slot="title" class="header-title">
        <div class="titleNav">添加分类</div>
      </div>
      <div class="addTypeBox">
        <div
          class="addTypeChoose"
          v-if="addTypefId == '3f8eed32-aba9-11ee-b534-005056b86db5'"
        >
          <div style="min-width: 100px; margin-right: 15px">选择一级分类：</div>
          <el-select v-model="ftId" placeholder="请选择">
            <el-option
              v-for="(item, index) in ctype(
                '3c73702a-aba9-11ee-b534-005056b86db5'
              )"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="addTypeChoose">
          <div style="min-width: 100px">分类名称：</div>
          <el-input v-model="typeName"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addType">确 认</el-button>
        <el-button @click="close2()">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置分类"
      :visible.sync="groupDialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose2"
      class="addNewPP2"
    >
      <div slot="title" class="header-title">
        <div class="titleNav">设置分类</div>
      </div>
      <div class="addTypeBox">
        <div class="addTypeChoose">
          <div style="min-width: 100px">选择一级分类：</div>
          <el-select
            v-model="setTypeJson.one"
            placeholder="请选择"
            @change="getTwoType(setTypeJson.one)"
          >
            <el-option
              v-for="(item, index) in ctype(
                '3c73702a-aba9-11ee-b534-005056b86db5'
              )"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="addTypeChoose" v-if="setTypeJson.one != ''">
          <div style="min-width: 100px">选择二级分类：</div>
          <el-select v-model="setTypeJson.two" placeholder="请选择">
            <el-option
              v-for="(item1, index1) in twoJson"
              :key="index1"
              :label="item1.name"
              :value="item1.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTypeByCET">确 认</el-button>
        <el-button @click="close3()">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="分享"
      :visible.sync="shareDialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose2"
      class="addNewPP2"
    >
      <div slot="title" class="header-title">
        <div class="titleNav">分享</div>
      </div>
      <div class="addTypeBox">
        <div class="addTypeChoose">
          <div style="min-width: 100px">选择资源：</div>
          <el-checkbox-group v-model="shareType" class="checkBoxCss">
            <el-checkbox label="0" v-if="type != 0">公共资源</el-checkbox>
            <el-checkbox label="1" v-if="type != 1">个人资源</el-checkbox>
            <el-checkbox label="2" v-if="type != 2">组织资源</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="shareTemplate">确 认</el-button>
        <el-button @click="close4()">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
export default {
  props: {
    dialogVisibleEva: {
      type: Boolean,
      default: false,
    },
    userid: {
      type: String,
    },
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  watch: {
    dialogVisibleEva(newVal) {
      if (newVal) {
        this.getSource();
      }
    },
  },
  directives: {},
  data() {
    return {
      type: 0,
      evaName: "",
      CourseType: [],
      CourseTypeJson: {},
      courseTypeId: {},
      typea: "",
      typeb: "",
      typeE: [],
      page: 1,
      pageSize: 10,
      total: 0,
      array: [],
      loading: false,
      ppid: "",
      res: [],
      isHalf: false,
      json: [],
      uNamedialogVisible: false,
      upNJson: {
        id: "",
        name: "",
      },
      isHoverId: "",
      addTypeDialogVisible: false,
      addTypefId: "",
      typeName: "",
      ftId: "",
      setTypeJson: {
        one: "",
        two: "",
      },
      groupDialogVisible: false,
      twoJson: [],
      templateId: "",
      courseItem: {},
      shareDialogVisible: false,
      shareType: [],
    };
  },
  computed: {
    ctype() {
      return function (tid) {
        if (tid == "3c73702a-aba9-11ee-b534-005056b86db5") {
          return this.CourseTypeJson[tid];
        } else {
          if (this.ppid == "") {
            return this.CourseTypeJson[tid];
          } else {
            return this.CourseTypeJson[tid].filter((e) => {
              return e.ppid == this.ppid;
            });
          }
        }
      };
    },
  },
  methods: {
    handleCurrentChange(val) {
      //当页数发生改变的时候调用获取列表数据请求
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getSource();
    },
    getTwoType(id) {
      this.twoJson = [];
      var array = this.CourseTypeJson[
        "3f8eed32-aba9-11ee-b534-005056b86db5"
      ].filter((e) => {
        return e.ppid == id;
      });
      this.twoJson = array;
      this.$forceUpdate();
    },
    handleClose(done) {
      this.close();
      done();
    },
    handleClose1(done) {
      this.close1();
      done();
    },
    handleClose2(done) {
      done();
    },
    close() {
      this.type = 0;
      this.typea = "";
      this.typeb = "";
      this.typeE = [];
      this.$emit("update:dialogVisibleEva", false);
    },
    close1() {
      this.upNJson.id = "";
      this.upNJson.name = "";
      this.uNamedialogVisible = false;
    },
    close2() {
      this.ftId = "";
      this.typeName = "";
      this.addTypeDialogVisible = false;
    },
    close3() {
      this.setTypeJson.one = "";
      this.setTypeJson.two = "";
      this.groupDialogVisible = false;
    },
    close4() {
      this.courseItem = {};
      this.shareType = [];
      this.shareDialogVisible = false;
    },
    setType(t) {
      this.typea = "";
      this.typeb = "";
      this.typeE = [];
      this.type = t;
      this.getSource();
    },
    confirm() {
      if (this.json.length == 0) {
        this.$message.error("请选择评价模板！");
      }
      this.$confirm("是否使用此评价模板？将会覆盖掉现有的评价！", "提示", {
        confirmButtonText: "保存",
        cancelButtonText: "不保存",
        type: "warning",
      }).then(() => {
        this.$emit("updateEvaJson", this.json);
        this.close();
      });
    },
    selectAllType() {
      this.CourseType = [];
      this.CourseTypeJson = {};
      this.courseTypeId = {};
      this.$forceUpdate();
      let params = {
        org: this.org && this.org != "" ? this.org : "",
        oid: this.oid && this.oid != "" ? this.oid : "",
      };
      this.ajax
        .get(this.$store.state.api + "selectAllEvaType", params)
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (res.data[0][i].id == "3c73702a-aba9-11ee-b534-005056b86db5") {
              res.data[0][i].name = "一级分类";
            } else if (
              res.data[0][i].id == "3f8eed32-aba9-11ee-b534-005056b86db5"
            ) {
              res.data[0][i].name = "二级分类";
            }
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = [];
            }
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }

            // if (res.data[2].length == 0 && res.data[3].length == 0) {
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
              }
            }
            // } else {
            if (res.data[2].length > 0) {
              for (var j = 0; j < res.data[2].length; j++) {
                if (res.data[0][i].id == res.data[2][j].pid) {
                  this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                }
              }
            }
            if (res.data[3].length > 0) {
              for (var j = 0; j < res.data[3].length; j++) {
                if (res.data[0][i].id == res.data[3][j].pid) {
                  this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                }
              }
            }
            // }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getCourse2(typeName, ftypeId, typeid, type) {
      this.isHalf = false;
      this.isHoverId = "";
      this.json = [];
      this.page = 1;
      if (
        typeid == "3c73702a-aba9-11ee-b534-005056b86db5" ||
        ftypeId == "3c73702a-aba9-11ee-b534-005056b86db5"
      ) {
        this.typeb = "";
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typea != "") {
              this.typea = "";
            }
          }
          this.ppid = "";
        } else {
          if (this.typea == typeid) {
            this.typea = "";
          } else {
            this.typea = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
          this.ppid = typeid;
        }
      } else if (
        typeid == "3f8eed32-aba9-11ee-b534-005056b86db5" ||
        ftypeId == "3f8eed32-aba9-11ee-b534-005056b86db5"
      ) {
        if (type == 1) {
          if (this.typeE.indexOf(typeid) != -1) {
            this.typeE.splice(this.typeE.indexOf(typeid), 1);
          } else {
            this.typeE.push(typeid);
            if (this.typeb != "") {
              this.typeb = "";
            }
          }
        } else {
          if (this.typeb == typeid) {
            this.typeb = "";
          } else {
            this.typeb = typeid;
            if (this.typeE.indexOf(ftypeId) != -1) {
              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
            }
          }
        }
      }
      if (
        this.typea == "" &&
        this.typeE.indexOf("3c73702a-aba9-11ee-b534-005056b86db5") == -1
      ) {
        this.typeE = [];
      }
      this.getSource();
    },
    getSource() {
      this.loading = true;
      let params = {
        uid: this.userid,
        oid: this.oid,
        org: this.org,
        typea: this.typea != undefined ? this.typea : "",
        typeb: this.typeb != undefined ? this.typeb : "",
        typeE: this.typeE.join(","),
        cn: this.evaName,
        type: this.type,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseEvaT", params)
        .then((res) => {
          this.loading = false;
          this.res = res.data[0];
          this.total = res.data[0].length ? res.data[0][0].num : 0;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getDetail(id, json) {
      if (this.isHalf == false) {
        this.isHalf = true;
        this.isHoverId = id;
        this.json = JSON.parse(json);
      } else {
        this.isHalf = false;
        this.isHoverId = "";
        this.json = [];
      }
    },
    reName(id, name) {
      this.upNJson.id = id;
      this.upNJson.name = name;
      this.uNamedialogVisible = true;
    },
    grouping(id) {
      this.templateId = id;
      this.groupDialogVisible = true;
    },
    upCETName() {
      let params = {
        id: this.upNJson.id,
        n: this.upNJson.name,
      };
      this.ajax
        .get(this.$store.state.api + "updateCourseET", params)
        .then((res) => {
          this.$message.success("修改成功!");
          this.getSource();
          this.close1();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    dCET(id) {
      let params = {
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "deleteCourseET", params)
        .then((res) => {
          this.$message.success("删除成功!");
          this.getSource();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    openAddDia(fid) {
      this.addTypefId = fid;
      this.addTypeDialogVisible = true;
    },
    addType() {
      let params = {
        pid: this.addTypefId,
        ppid:
          this.addTypefId == "3c73702a-aba9-11ee-b534-005056b86db5"
            ? ""
            : this.ftId,
        n: this.typeName,
        uid: "0",
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "addCETType", params)
        .then((res) => {
          this.$message.success("添加成功!");
          this.selectAllType();
          this.addTypeDialogVisible = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addTypeByCET() {
      if (this.setTypeJson.two == "") {
        this.$message.warning("请选择二级分类，如没有二级分类请前往添加!");
        return;
      }
      let params = {
        cid: this.templateId,
      };
      this.ajax
        .get(this.$store.state.api + "deleteCETLabel", params)
        .then((res) => {
          for (var i = 0; i < 2; i++) {
            let tid = "";
            if (i == 0) {
              tid = this.setTypeJson.one;
            } else {
              tid = this.setTypeJson.two;
            }
            let params = [
              {
                cid: this.templateId,
                tid: tid,
                uid: this.userid,
              },
            ];
            this.ajax
              .post(this.$store.state.api + "addCETLabel", params)
              .then((res) => {
                this.$message({
                  message: "设置成功",
                  type: "success",
                });
                this.groupDialogVisible = false;
                this.getSource();
              })
              .catch((err) => {
                this.$message.error("网络不佳");
                console.error(err);
              });
          }
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
    share(item) {
      this.courseItem = item;
      this.shareDialogVisible = true;
    },
    shareTemplate() {
      if (this.shareType.length == 2) {
        for (var i = 0; i < this.shareType.length; i++) {
          this.addCETShare(parseInt(this.shareType[i]));
        }
      } else {
        this.addCETShare(parseInt(this.shareType[0]));
      }
    },
    addCETShare(t) {
      let params = [
        {
          uid: this.userid,
          n: this.courseItem.name,
          json: this.courseItem.json,
          t: t,
          oid: this.courseItem.oid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addCETShare", params)
        .then((res) => {
          this.$message({
            message: "分享成功",
            type: "success",
          });
          this.close4();
          this.getSource();
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
  },
  mounted() {
    this.selectAllType();
    this.getSource();
  },
};
</script>
  
<style scoped>
.addNewPP2 >>> .el-dialog__body {
  padding: 5px 0;
}

.addNewPP2 >>> .el-dialog {
  margin-top: 5vh !important;
}

.addNewPP2 >>> .el-dialog__header {
  background: #0061ff;
}

.addNewPP2 >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
  font-size: 20px;
}

.titleNav {
  text-align: center;
  color: #fff;
  line-height: 25px;
  font-size: 20px;
}

.evaTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 15px 0;
  justify-content: center;
  border-bottom: 1px solid #c6c6c6;
  box-sizing: border-box;
  position: relative;
}

.typeNav,
.isTypeNav {
  margin: 0 15px;
  font-size: 20px;
  cursor: pointer;
}

.isTypeNav {
  color: #0061ff;
}

.search {
  position: absolute;
  top: 5px;
  right: 5px;
}

.typeCss {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.choose {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #c6c6c6;
}

.all_choose {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin: 10px 0;
  width: calc(100% - 40px);
  padding: 0 0 0 40px;
}

.all_choose > span {
  min-width: 150px;
  display: block;
  letter-spacing: 14px;
}

.all_choose > span:nth-child(1) {
  font-weight: bold;
  font-size: 16px;
}

.cName {
  cursor: pointer;
  margin: 0 10px 5px 0;
  color: #b9b6b9;
  min-width: 90px;
  width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

.isCType {
  color: #6282c2;
}

.halfCEvaAllBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  background: #f5f6f7;
}

.cEvaBox,
.halfCEvaBox {
  background: #f5f6f7;
}

.halfCEvaBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  width: 50% !important;
  border-right: 1px solid #e9eaea;
}

.cEvaItemBox,
.isHalfDiv,
.isHalfDiv1 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.isHalfDiv {
  width: 50% !important;
  border-right: 1px solid #e9eaea;
}

.isHalfDiv1 {
  width: 50% !important;
  border-left: 1px solid #e9eaea;
  padding: 30px;
  max-height: 500px;
  overflow: auto;
  height: 100%;
}

.cEvaItem {
  width: 100%;
  padding: 15px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #e9eaea;
}

.cEvaItem:hover {
  background: #e7e7e7;
}

.cEvaItem:hover > .cEvaIcon,
.iscEvaIcon {
  display: flex !important;
}

.cEvaTBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.titleIcon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin-right: 5px;
}

.titleIcon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cEvaTitle {
  font-size: 16px;
}

.cEvaIcon,
.iscEvaIcon {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  display: none;
}

.reName,
.grouping,
.delete,
.share {
  width: 20px;
  height: 20px;
  margin: 0 5px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

.reName {
  background-image: url("../../../assets/icon/courseEvaTemplate/reName.png");
}

.reName:hover {
  background-image: url("../../../assets/icon/courseEvaTemplate/reNameHover.png") !important;
}

.grouping {
  background-image: url("../../../assets/icon/courseEvaTemplate/grouping.png");
}

.grouping:hover {
  background-image: url("../../../assets/icon/courseEvaTemplate/groupingHover.png") !important;
}

.delete {
  background-image: url("../../../assets/icon/courseEvaTemplate/delete.png");
}

.delete:hover {
  background-image: url("../../../assets/icon/courseEvaTemplate/deleteHover.png") !important;
}

.share {
  background-image: url("../../../assets/icon/courseEvaTemplate/share.png");
}

.share:hover {
  background-image: url("../../../assets/icon/courseEvaTemplate/shareHover.png") !important;
}

.elist_input_box {
  margin: 0 0 20px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
}

.elist_input_box + .elist_input_box {
  padding-top: 10px;
}

.elist_inptu_text {
  font-size: 15px;
  display: flex;
  align-items: flex-start;
}

.elist_inptu_text + .elist_inptu_text {
  margin-top: 5px;
}

.elist_inptu_text > span:nth-child(1) {
  min-width: fit-content;
  font-weight: 600;
}

.addType {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 0 5px 0;
}

.addType > img {
  width: 100%;
  height: 100%;
}

.addTypeBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.addTypeChoose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 15px 0;
}

.checkBoxCss,
.checkBoxCss >>> .el-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.checkBoxCss >>> .el-checkbox__label {
  line-height: 0 !important;
}
</style>