evalutation

src/components/pages/evaluation copy.vue

@@ -0,0 +1,449 @@
+<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>

src/components/pages/evaluation.vue

@@ -9,17 +9,7 @@
       box-sizing: border-box;
     "
   >
-    <div
-      style="
-        position: absolute;
-        width: 95%;
-        top: 0;
-        height: 100%;
-        overflow: auto;
-        left: 50%;
-        transform: translateX(-50%);
-      "
-    >
+    <div>
       <div
         class="pb_content_body"
         style="
@@ -32,29 +22,477 @@
         <div class="pb_head top">
           <span>评价体系设置</span>
           <div class="student_button">
-            <el-button type="primary" class="bgColor">添加评价体系</el-button>
+            <el-button type="primary" class="bgColor" @click="addED">添加评价体系</el-button>
           </div>
         </div>
         <div class="student_head">
           <div class="student_search">
-            <el-input placeholder="筛选项目名称"></el-input>
-            <el-button type="primary" >查询</el-button>
+            <el-input placeholder="请输入名称" v-model="sn"></el-input>
+            <el-button type="primary" class="btn" @click="search">查询</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 dataArray" :key="index">
+            <div class="e_card_picture">
+              <img src="../../assets/e_picture.png" />
+            </div>
+            <div class="e_card_name">
+              <span>{{item.title}}</span>
+            </div>
+            <div class="e_card_time">
+              <span>{{item.time}}</span>
+            </div>
+            <div class="e_card_btn">
+              <span @click="checkE(item)">查看</span>
+              <span @click="deleteE(item.id)">删除</span>
+            </div>
           </div>
+          <div v-if="dataArray.length === 0" style="margin:0 auto;color:#6e6e6e">暂无数据</div>
+        </div>
+        <div class="student_page">
+          <el-pagination
+            v-if="dataArray.length"
+            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>
+        <div class="e_add_content">
+          <div class="e_add_list">
+            <div class="e_add_list_title">
+              <span>一级目录</span>
+              <img src="../../assets/add.png" @click="addE(1)" alt />
+            </div>
+            <div class="e_add_list_body">
+              <div class="e_add_list_child" v-for="(item,index) in eJson" :key="index">
+                <span
+                  :class="{active:item.id == fid}"
+                  v-if="item.name.length<11"
+                  @click="checkF(item.id)"
+                >{{item.name}}</span>
+                <el-tooltip
+                  v-else
+                  class="item"
+                  effect="dark"
+                  :content="item.name"
+                  placement="top-start"
+                >
+                  <span :class="{active:item.id == fid}" @click="checkF(item.id)">{{item.name}}</span>
+                </el-tooltip>
+                <img src="../../assets/delete.png" @click="deleteF(item.id)" alt />
+              </div>
+            </div>
+            <div class="e_add_list_detail" v-if="fid">
+              <textarea placeholder="添加目标描述" v-model="eJson[fid].detail"></textarea>
+            </div>
+            <!-- <div class="e_add_list_btn">添加二级标题</div> -->
+          </div>
+          <div class="e_add_list">
+            <div class="e_add_list_title">
+              <span>二级目录</span>
+              <img src="../../assets/add.png" @click="addE(2)" v-if="fid != ''" alt />
+            </div>
+            <div class="e_add_list_body">
+              <div
+                class="e_add_list_child"
+                v-for="(item,index) in fid && eJson[fid].child"
+                :key="index"
+              >
+                <span
+                  :class="{active:item.id == sid}"
+                  v-if="item.name.length<11"
+                  @click="checkS(item.id)"
+                >{{item.name}}</span>
+                <el-tooltip
+                  v-else
+                  class="item"
+                  effect="dark"
+                  :content="item.name"
+                  placement="top-start"
+                >
+                  <span :class="{active:item.id == sid}" @click="checkS(item.id)">{{item.name}}</span>
+                </el-tooltip>
+                <img src="../../assets/delete.png" @click="deleteS(item.id)" alt />
+              </div>
+            </div>
+            <div class="e_add_list_detail" v-if="sid">
+              <textarea placeholder="添加目标描述" v-model="eJson[fid].child[sid].detail"></textarea>
+            </div>
+            <!-- <div class="e_add_list_btn">添加二级标题</div> -->
+          </div>
+          <div class="e_add_list">
+            <div class="e_add_list_title">
+              <span>三级目录</span>
+              <img src="../../assets/add.png" @click="addE(3)" v-if="sid != ''" alt />
+            </div>
+            <div class="e_add_list_body">
+              <div
+                class="e_add_list_child"
+                v-for="(item,index) in fid && sid && eJson[fid].child[sid].child"
+                :key="index"
+              >
+                <span
+                  :class="{active:item.id == tid}"
+                  v-if="item.name.length<11"
+                  @click="checkT(item.id)"
+                >{{item.name}}</span>
+                <el-tooltip
+                  v-else
+                  class="item"
+                  effect="dark"
+                  :content="item.name"
+                  placement="top-start"
+                >
+                  <span :class="{active:item.id == tid}" @click="checkT(item.id)">{{item.name}}</span>
+                </el-tooltip>
+                <img src="../../assets/delete.png" @click="deleteT(item.id)" alt />
+              </div>
+            </div>
+            <div class="e_add_list_detail" v-if="tid">
+              <textarea placeholder="添加目标描述" v-model="eJson[fid].child[sid].child[tid].detail"></textarea>
+            </div>
+            <!-- <div class="e_add_list_btn">添加二级标题</div> -->
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+        <el-button @click="addEJson" type="primary" v-if="!update">确 定</el-button>
+        <el-button @click="updateEJson" type="primary" v-else>修 改</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="添加子级"
+      :visible.sync="dialogVisible3"
+      :append-to-body="true"
+      width="400px"
+      :before-close="handleClose"
+      class="dialog_diy tips_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="dialogVisible3 = false">关 闭</el-button>
+        <el-button @click="addEName" type="primary">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
+      page: 1,
+      total: 0,
+      dialogVisible: false,
+      dialogVisible2: false,
+      dialogVisible3: false,
+      eTitle: "",
+      eName: "",
+      eJson: {},
+      fid: "", //一级
+      sid: "", //二级
+      tid: "", //二级
+      type: 1,
+      sn: "",
+      dataArray: [],
+      update: false,
+      eid: "",
+    };
+  },
+  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();
+    },
+    addE(type) {
+      this.type = type;
+      this.dialogVisible3 = true;
+    },
+    addEName() {
+      if (this.eName == "") {
+        this.$message.error("请输入目标");
+        return;
+      }
+      let _id = this.guid();
+      if (this.type == 1) {
+        this.eJson[_id] = {
+          id: _id,
+          name: this.eName,
+          detail: "",
+          child: {},
+        };
+        this.dialogVisible3 = false;
+        this.eName = "";
+      } else if (this.type == 2) {
+        this.eJson[this.fid].child[_id] = {
+          id: _id,
+          name: this.eName,
+          detail: "",
+          child: {},
+        };
+        this.dialogVisible3 = false;
+        this.eName = "";
+      } else if (this.type == 3) {
+        this.eJson[this.fid].child[this.sid].child[_id] = {
+          id: _id,
+          name: this.eName,
+          detail: "",
+          child: [],
+        };
+        this.dialogVisible3 = false;
+        this.eName = "";
+      }
+    },
+    checkF(id) {
+      if (this.fid == id) {
+        this.fid = "";
+      } else {
+        this.fid = id;
+      }
+      this.sid = "";
+      this.tid = "";
+    },
+    checkS(id) {
+      if (this.sid == id) {
+        this.sid = "";
+      } else {
+        this.sid = id;
+      }
+      this.tid = "";
+    },
+    checkT(id) {
+      if (this.tid == id) {
+        this.tid = "";
+      } else {
+        this.tid = id;
+      }
+    },
+    deleteF(id) {
+      console.log(this.eJson);
+      if (JSON.stringify(this.eJson[id].child) != "{}") {
+        this.$message.error("请把所有子集删完才可以删除");
+        return;
+      }
+      if (this.fid == id) {
+        this.fid = "";
+      }
+      delete this.eJson[id];
+      this.$forceUpdate();
+    },
+    deleteS(id) {
+      if (JSON.stringify(this.eJson[this.fid].child[id].child) != "{}") {
+        this.$message.error("请把所有子集删完才可以删除");
+        return;
+      }
+      if (this.sid == id) {
+        this.sid = "";
+      }
+      delete this.eJson[this.fid].child[id];
+      this.$forceUpdate();
+    },
+    deleteT(id) {
+      if (this.tid == id) {
+        this.tid = "";
+      }
+      delete this.eJson[this.fid].child[this.sid].child[id];
+      this.$forceUpdate();
+    },
+    addEJson() {
+      if (this.eTitle == "") {
+        this.$message.error("请填写评价体系标题");
+        return;
+      }
+      let params = [
+        {
+          uid: this.$route.query.userid,
+          t: this.eTitle,
+          c: JSON.stringify(this.eJson),
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addEvaluation", params)
+        .then((res) => {
+          this.$message.success("添加成功");
+          this.init();
+          this.dialogVisible = false;
+          this.getData();
+        })
+        .catch((err) => {
+          this.$message.success("添加失败");
+          console.error(err);
+        });
+    },
+    updateEJson() {
+      if (this.eTitle == "") {
+        this.$message.error("请填写评价体系标题");
+        return;
+      }
+      let params = [
+        {
+          c: JSON.stringify(this.eJson),
+          t: this.eTitle,
+          id: this.eid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updateEvaluation", params)
+        .then((res) => {
+          this.$message.success("修改成功");
+          this.init();
+          this.dialogVisible = false;
+          this.getData();
+        })
+        .catch((err) => {
+          this.$message.success("修改失败");
+          console.error(err);
+        });
+    },
+    search() {
+      this.page = 1;
+      this.getData();
+    },
+    getData() {
+      let params = {
+        n: this.sn,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getEvaluation", params)
+        .then((res) => {
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.dataArray = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    deleteE(id) {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let params = [
+            {
+              id: id,
+            },
+          ];
+          this.ajax
+            .post(this.$store.state.api + "deleteEvaluation", params)
+            .then((res) => {
+              this.$message.success("删除成功");
+              if (this.page != 1 && this.tableData.length == 1) {
+                this.page--;
+              }
+              this.getData();
+            })
+            .catch((err) => {
+              this.$message.success("添加失败");
+              console.error(err);
+            });
+        })
+        .catch(() => {});
+    },
+    init() {
+      this.eJson = {};
+      this.fid = "";
+      this.sid = "";
+      this.tid = "";
+      this.eTitle = "";
+    },
+    addED() {
+      this.update = false;
+      this.init();
+      this.dialogVisible = true;
+    },
+    checkE(res) {
+      this.init();
+      this.eJson = JSON.parse(res.content);
+      this.eTitle = res.title;
+      this.eid = res.id;
+      this.update = true;
+      this.dialogVisible = true;
+    },
+  },
+  created() {
+    this.getData();
   },
 };
 </script>
 
 <style scoped>
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #e6eaf0;
+}
+
+.tips_diy >>> .el-dialog__body,
+.tips_diy >>> .el-dialog__footer {
+  background: #fff;
+}
+
 .pb_head > span:nth-child(2) {
   font-size: 16px;
   margin-left: 80px;
@@ -68,7 +506,7 @@ export default {
   margin-top: 10px;
   padding-bottom: 15px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 .student_search {
   display: flex;
@@ -80,8 +518,12 @@ export default {
 }
 .student_search >>> .el-input__inner {
   width: 190px;
-  height: 35px;
-  margin-left: 10px;
+  /* height: 35px; */
+  margin-right: 10px;
+}
+.student_search .btn {
+  background: rgb(34, 104, 189);
+  border: none;
 }
 .student_button {
   display: flex;
@@ -96,4 +538,198 @@ export default {
   background: #466b99;
   border: none;
 }
+.e_box {
+  display: flex;
+  flex-wrap: wrap;
+  height: 500px;
+  align-items: flex-start;
+}
+.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;
+  cursor: pointer;
+}
+.student_page {
+  margin-top: 10px;
+}
+
+.e_add_top {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 20px;
+  border-radius: 3px;
+  background: #fff;
+}
+.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_title >>> .el-input__inner {
+  width: 400px;
+}
+
+
+.e_add_btn {
+}
+.e_add_content {
+  display: flex;
+  width: 100%;
+  overflow: auto;
+  height: 550px;
+}
+.e_add_list {
+  background: #fff;
+  height: 500px;
+  width: 240px;
+  position: relative;
+  margin: 15px 5px 0 0;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+.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;
+  height: 57px;
+}
+.e_add_list_title span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.e_add_list_title img {
+  position: absolute;
+  right: 15px;
+  width: 25px;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.e_add_list_body {
+  height: calc(100% - 187px);
+  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;
+  cursor: pointer;
+}
+.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_child .active {
+  color: #409eff;
+}
+.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;
+}
+.e_add_list_detail {
+  position: absolute;
+  bottom: 0;
+  height: 130px;
+  background: rgb(120, 120, 254);
+  width: 100%;
+  color: #fff;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.e_add_list_detail textarea {
+  height: 90%;
+  width: 95%;
+  border: none;
+  resize: none;
+  outline: none;
+  padding: 5px;
+  box-sizing: border-box;
+}
 </style>