pbl-teacher-table/src/components/pages/evaluation copy.vue

<template>
  <div
    class="pb_content"
    style="
      background: unset;
      overflow: auto;
      padding: 20px;
      margin: 0;
      box-sizing: border-box;
    "
  >
    <div>
      <div
        class="pb_content_body"
        style="
          background: #fff;
          padding: 0px 25px;
          box-sizing: border-box;
          border-radius: 5px;
        "
      >
        <div class="pb_head top">
          <span>评价体系设置</span>
          <div class="student_button">
            <el-button type="primary" class="bgColor" @click="dialogVisible = true">添加评价体系</el-button>
          </div>
        </div>
        <div class="student_head">
          <div class="student_search">
            <el-input placeholder="请输入名称"></el-input>
            <el-button type="primary" class="btn">查询</el-button>
          </div>
        </div>
      </div>
      <div class="pb_content_body" style="height: 100%">
        <div class="e_box">
          <div class="e_card" v-for="(item,index) in 10" :key="index">
            <div class="e_card_picture">
              <img src="../../assets/e_picture.png" />
            </div>
            <div class="e_card_name">
              <span>教学课堂评价体系</span>
            </div>
            <div class="e_card_time">
              <span>2022-06-23 17:33:29</span>
            </div>
            <div class="e_card_btn">
              <span>查看</span>
              <span>删除</span>
            </div>
          </div>
        </div>
        <div class="student_page">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="total"
            style="padding-bottom: 20px"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加评价体系"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="1000px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="e_add_top">
          <div class="e_add_title">
            <span>评价体系名称</span>
            <el-input v-model="eTitle" placeholder="请输入名称"></el-input>
          </div>
          <div class="e_add_btn">
            <el-button type="primary" @click="dialogVisible2 = true">添加一级标题</el-button>
          </div>
        </div>
        <div class="e_add_content">
          <div class="e_add_list" v-for="(item,index) in eJson" :key="index">
            <div class="e_add_list_title">
              <span v-if="item.name.length < 8">{{item.name}}</span>
              <el-tooltip
                v-else
                class="item"
                effect="dark"
                :content="item.name"
                placement="top-start"
              >
                <span>{{item.name}}</span>
              </el-tooltip>
              <img src="../../assets/delete.png" @click="deleteF(index)" alt />
            </div>
            <div class="e_add_list_body">
              <div class="e_add_list_child" v-for="(cItem,cIndex) in item.child" :key="cIndex">
                <span v-if="cItem.name.length<11">{{cItem.name}}</span>
                <el-tooltip
                  v-else
                  class="item"
                  effect="dark"
                  content="一级目录内容"
                  placement="top-start"
                >
                  <span>{{cItem.name}}</span>
                </el-tooltip>
                <img src="../../assets/delete.png" @click="deleteS(index,cIndex)" alt />
              </div>
            </div>
            <div class="e_add_list_btn" @click="addSDia(index)">添加二级标题</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button @click="dialogVisible = false" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加一级标题"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="400px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="e_add_title2">
          <span>名称</span>
          <el-input v-model="eName" placeholder="请输入一级标题名称"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">关 闭</el-button>
        <el-button @click="addFTitle" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加二级标题"
      :visible.sync="dialogVisible3"
      :append-to-body="true"
      width="400px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="e_add_title2">
          <span>名称</span>
          <el-input v-model="esName" placeholder="请输入二级标题名称"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">关 闭</el-button>
        <el-button @click="addSName" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 0,
      total: 0,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      eTitle: "",
      eName: "",
      esName: "",
      eJson: [],
    };
  },
  methods: {
    guid() {
      var _num,
        i,
        _guid = "";
      for (i = 0; i < 32; i++) {
        _guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
        _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
        if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
          //会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
          _guid += "-";
        }
      }
      return _guid;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handleClose(done) {
      done();
    },
    addFTitle() {
      this.eJson.push({ id: this.guid(), child: [], name: this.eName });
      this.dialogVisible2 = false;
      this.eName = "";
    },
    addSDia(index) {
      this.sindex = index;
      this.dialogVisible3 = true;
    },
    addSName() {
      this.eJson[this.sindex].child.push({
        id: this.guid(),
        name: this.esName,
      });
      this.dialogVisible3 = false;
      this.esName = "";
    },
    deleteF(index) {
      if (this.eJson[index].child.length) {
        this.$message.error("请把所有子集删除了才可以删除!");
        return;
      }

      this.eJson.splice(index, 1);
    },
    deleteS(index, cIndex) {
      this.eJson[index].child.splice(cIndex, 1);
    },
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.pb_head > span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}
.pb_head {
  margin: 0 !important;
  width: 100% !important;
}
.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}
.student_search {
  display: flex;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
  min-width: 60px;
}
.student_search >>> .el-input__inner {
  width: 190px;
  /* height: 35px; */
  margin-right: 10px;
}
.student_search .btn {
  background: rgb(34, 104, 189);
  border: none;
}
.student_button {
  display: flex;
  overflow: hidden;
  height: 40px;
}
.top {
  display: flex;
  justify-content: space-between;
}
.bgColor {
  background: #466b99;
  border: none;
}
.e_box {
  display: flex;
  flex-wrap: wrap;
}
.e_card {
  background: #fff;
  margin-right: 20px;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  margin-top: 10px;
}
.e_card_picture {
  margin: 20px 0;
}
.e_card_name {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.e_card_time {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 15px;
  color: #c3c3c3;
  margin-bottom: 10px;
}
.e_card_btn {
  height: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  background: rgb(244, 244, 244);
}
.e_card_btn span {
  flex: 1 1 auto;
  text-align: center;
}
.student_page {
  margin-top: 10px;
}

.e_add_top {
  display: flex;
  justify-content: space-between;
}
.e_add_title2 {
  display: flex;
  align-items: center;
}

.e_add_title2 span {
  width: 40px;
}

.e_add_title {
  display: flex;
  align-items: center;
}
.e_add_title span {
  width: 135px;
}
.e_add_title .el_input {
  width: 300px;
}

.e_add_btn {
}
.e_add_content {
  display: flex;
  width: 100%;
  overflow: auto;
  height: 750px;
}
.e_add_list {
  background: #f6f7fc;
  height: 700px;
  width: 240px;
  position: relative;
  margin: 20px 5px 0 0;
  flex-shrink: 0;
}
.e_add_list_title {
  font-size: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 40px;
  text-align: center;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.e_add_list_title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.e_add_list_title img {
  position: absolute;
  right: 15px;
  width: 21px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}
.e_add_list_body {
  height: calc(100% - 107px);
  overflow: auto;
}
.e_add_list_child {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  padding: 15px 40px;
  text-align: center;
}
.e_add_list_child span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.e_add_list_child img {
  position: absolute;
  right: 10px;
  width: 21px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}
.e_add_list_child + .e_add_list_child {
  border-top: 1px solid #eaeaea;
}
.e_add_list_btn {
  position: absolute;
  bottom: 0;
  height: 50px;
  background: rgb(120, 120, 254);
  width: 100%;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
</style>