pbl-teacher-table/src/components/pages/evaluation.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="addED"
              >添加目标</el-button
            >
          </div>
        </div>
        <div class="student_head">
          <div class="student_search">
            <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%">
        <el-table
          ref="table"
          :data="dataArray"
          border
          :fit="true"
          v-loading="isLoading"
          style="width: 100%"
          :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            label="目标名称"
            min-width="15"
            align="center"
            prop="title"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="负责人"
            min-width="15"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="创建时间"
            min-width="15"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="250px">
            <template slot-scope="scope">
              <div class="btnBox">
                <el-button
                  class="de_button"
                  type="primary"
                  size="small"
                  @click="checkE(scope.row)"
                  >查看</el-button
                >
                <el-button
                  class="de_button"
                  type="primary"
                  size="small"
                  @click="copyEva(scope.row.id)"
                  >复制</el-button
                >
                <el-button
                  v-if="$route.query.userid == scope.row.userid"
                  class="de_button"
                  type="primary"
                  size="small"
                  @click="deleteE(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <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="100%"
      :before-close="handleClose1"
      class="dialog_diy mubiao_diy fullStyle"
    >
      <div style="width: 100%; height: calc(100% - 80px)">
        <div class="e_add_top">
          <div class="e_add_title">
            <span>目标管理名称</span>
            <el-input
              v-model="eTitle"
              placeholder="请输入名称"
              @change="setMindData"
            ></el-input>
          </div>
          <div>
            <el-button v-show="false" type="primary" @click="addTemplate">新增模板</el-button>
            <el-button type="primary" @click="openTemplate">资源</el-button>
            <el-button @click="addEJson" type="primary" v-if="!update"
              >保存</el-button
            >
            <el-button @click="updateEJson" type="primary" v-else
              >保存</el-button
            >
            <el-button @click="clearAll()" type="primary">不保存</el-button>
          </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"
              >
                <div
                  v-if="evaObject.isFInput != '0-' + index"
                  style="width: 100%"
                >
                  <span
                    :class="{ active: item.id == fid }"
                    v-if="item.name.length < 8"
                    @click="checkF(item.id)"
                    >{{ item.name }}</span
                  >
                  <el-tooltip
                    v-else
                    class="item"
                    effect="dark"
                    :content="item.name"
                    placement="top-start"
                    popper-class="text_tooltip2"
                  >
                    <span
                      :class="{ active: item.id == fid }"
                      @click="checkF(item.id)"
                      >{{ item.name }}</span
                    >
                  </el-tooltip>
                  <img
                    style="right: 40px"
                    src="../../assets/autorUp.png"
                    @click="
                      (evaObject.isFInput = '0-' + index),
                        (evaObject.fName1 = item.name)
                    "
                    alt
                  />
                  <!-- @click="updateF(item.id, item.name, 1)" -->
                </div>
                <div v-else>
                  <textarea
                    rows="2"
                    v-autoHeight="30"
                    v-model="evaObject.fName1"
                    class="binfo_textarea"
                    @change="noInput(item.id, evaObject.fName1, 1)"
                  ></textarea>
                </div>
                <img
                  style="width: 24px"
                  src="../../assets/delete.png"
                  @click="deleteF(item.id)"
                  alt
                />
              </div>
              <div class="e_add_input">
                <textarea
                  rows="2"
                  v-autoHeight="30"
                  v-model="evaObject.fName"
                  class="binfo_textarea"
                  placeholder="请添加内容.."
                  @focus="setDetail(1)"
                ></textarea>
                <img
                  src="../../assets/icon/new/addInput.png"
                  @click="addInputName(1)"
                  alt
                />
              </div>
            </div>
            <div class="e_add_list_detail" v-if="isFold">
              <textarea
                placeholder="添加目标描述"
                v-model="isFoldDetail"
              ></textarea>
            </div>
            <div class="e_add_list_detail" v-if="fid && !isFold">
              <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"
              >
                <div
                  v-if="evaObject.isSInput != '1-' + index"
                  style="width: 100%"
                >
                  <span
                    :class="{ active: item.id == sid }"
                    v-if="item.name.length < 8"
                    @click="checkS(item.id)"
                    >{{ item.name }}</span
                  >
                  <el-tooltip
                    v-else
                    class="item"
                    effect="dark"
                    :content="item.name"
                    placement="top-start"
                    popper-class="text_tooltip2"
                  >
                    <span
                      :class="{ active: item.id == sid }"
                      @click="checkS(item.id)"
                      >{{ item.name }}</span
                    >
                  </el-tooltip>
                  <img
                    style="right: 40px"
                    src="../../assets/autorUp.png"
                    @click="
                      (evaObject.isSInput = '1-' + index),
                        (evaObject.sName1 = item.name)
                    "
                    alt
                  />
                </div>
                <div v-else>
                  <textarea
                    rows="2"
                    v-autoHeight="30"
                    v-model="evaObject.sName1"
                    class="binfo_textarea"
                    @change="noInput(item.id, evaObject.sName1, 2)"
                  ></textarea>
                </div>
                <img
                  style="width: 24px"
                  src="../../assets/delete.png"
                  @click="deleteS(item.id)"
                  alt
                />
              </div>
              <div class="e_add_input" v-if="fid != ''">
                <textarea
                  rows="2"
                  v-autoHeight="30"
                  v-model="evaObject.sName"
                  class="binfo_textarea"
                  placeholder="请添加内容.."
                  @focus="setDetail(2)"
                ></textarea>
                <img
                  src="../../assets/icon/new/addInput.png"
                  @click="addInputName(2)"
                  alt
                />
              </div>
            </div>
            <div class="e_add_list_detail" v-if="isSold">
              <textarea
                placeholder="添加目标描述"
                v-model="isSoldDetail"
              ></textarea>
            </div>
            <div class="e_add_list_detail" v-if="sid && !isSold">
              <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"
              >
                <div
                  v-if="evaObject.isTInput != '2-' + index"
                  style="width: 100%"
                >
                  <span
                    :class="{ active: item.id == tid }"
                    v-if="item.name.length < 8"
                    @click="checkT(item.id)"
                    >{{ item.name }}</span
                  >
                  <el-tooltip
                    v-else
                    class="item"
                    effect="dark"
                    :content="item.name"
                    placement="top-start"
                    popper-class="text_tooltip2"
                  >
                    <span
                      :class="{ active: item.id == tid }"
                      @click="checkT(item.id)"
                      >{{ item.name }}</span
                    >
                  </el-tooltip>
                  <img
                    style="right: 40px"
                    src="../../assets/autorUp.png"
                    @click="
                      (evaObject.isTInput = '2-' + index),
                        (evaObject.tName1 = item.name)
                    "
                    alt
                  />
                </div>
                <div v-else>
                  <textarea
                    rows="2"
                    v-autoHeight="30"
                    v-model="evaObject.tName1"
                    class="binfo_textarea"
                    @change="noInput(item.id, evaObject.tName1, 3)"
                  ></textarea>
                </div>
                <img
                  style="width: 24px"
                  src="../../assets/delete.png"
                  @click="deleteT(item.id)"
                  alt
                />
              </div>
              <div class="e_add_input" v-if="sid != ''">
                <textarea
                  rows="2"
                  v-autoHeight="30"
                  v-model="evaObject.tName"
                  class="binfo_textarea"
                  placeholder="请添加内容.."
                  @focus="setDetail(3)"
                ></textarea>
                <img
                  src="../../assets/icon/new/addInput.png"
                  @click="addInputName(3)"
                  alt
                />
              </div>
            </div>
            <div class="e_add_list_detail" v-if="isTold">
              <textarea
                placeholder="添加目标描述"
                v-model="isToldDetail"
              ></textarea>
            </div>
            <div class="e_add_list_detail" v-if="tid && !isTold">
              <textarea
                placeholder="添加目标描述"
                v-model="eJson[fid].child[sid].child[tid].detail"
              ></textarea>
            </div>
            <!-- <div class="e_add_list_btn">添加二级标题</div> -->
          </div>
          <div class="e_add_list_pbox">
            <div class="e_add_list_pbox_title">
              <span class="type_title">切换模式</span>
              <div class="type_content">
                <span :class="{ active: typeMode == 1 }" @click="typeMode = 1"
                  >目标树</span
                >
                <span :class="{ active: typeMode == 2 }" @click="typeMode = 2"
                  >目标罗盘</span
                >
                <span
                  :class="{ active: typeMode == 3 }"
                  @click="typeMode = 3"
                  v-if="!update"
                  >目标看板</span
                >
              </div>
            </div>
            <div class="e_add_list_pbox_content">
              <Mind
                :showBar="false"
                :mindData="data"
                v-show="typeMode == 1"
              ></Mind>
              <Sunburst
                :Josn="eJson"
                :num="eJSONNum"
                v-if="typeMode == 2"
              ></Sunburst>
              <SeeBoard
                :Josn="eJson"
                :num="eJSONNum"
                :ename="eTitle"
                v-if="typeMode == 3"
              ></SeeBoard>
            </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> -->
        <!-- <el-button @click="dialogVisible = false">关 闭</el-button> -->
      </span>
    </el-dialog>
    <el-dialog
      title="选择目标模板"
      :visible.sync="temDialogVisible"
      :append-to-body="true"
      width="600px"
      :before-close="handleClose"
      class="look_evaTem"
    >
      <div class="evaTemBox">
        <div
          v-for="(item, index) in templateArray"
          :key="index"
          class="evaTemItem"
          @click="chooseEva(item.id)"
        >
          <div class="evaItem">
            <div class="evaItemImg">
              <img src="../../assets/icon/new/evaTemItem.png" alt="" />
            </div>
            <div class="evaItemTitle">{{ item.title }}</div>
          </div>
          <div v-if="cEvaId == item.id" class="evaIsChoose">
            <img src="../../assets/icon/new/evaIsChoose.png" alt="" />
          </div>
          <div class="evaNoChoose" v-else></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEvaTem">取 消</el-button>
        <el-button @click="addEvaByTem" 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 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>
    <el-dialog
      title="修改子级"
      :visible.sync="dialogVisible4"
      :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="eName1" placeholder="请输入名称"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">关 闭</el-button>
        <el-button @click="addEName1" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Mind from "../tools/jsmind";
import Sunburst from "../tools/sunburst";
import SeeBoard from "../tools/seeBoard";
export default {
  components: {
    Mind,
    Sunburst,
    SeeBoard,
  },
  data() {
    return {
      data: {
        isLoading: false,
        meta: {
          name: "example",
          author: "dd@163.com",
          version: "0.2",
        },
        format: "node_array",
        data: [
          { id: "root", isroot: true, topic: "" },
          // { id: "easy", parentid: "root", topic: "Easy" },
          // { id: "easy1", parentid: "easy", topic: "Easy to show" },
          // { id: "easy2", parentid: "easy", topic: "Easy to edit" },
          // { id: "easy3", parentid: "easy", topic: "Easy to store" },
          // { id: "easy4", parentid: "easy", topic: "Easy to embed" },
          // { id: "open", parentid: "root", topic: "Open Source" },
          // { id: "open1", parentid: "open", topic: "on GitHub" },
          // { id: "open2", parentid: "open", topic: "BSD License" },
          // { id: "powerful", parentid: "root", topic: "Powerful" },
          // {
          //   id: "powerful1",
          //   parentid: "powerful",
          //   topic: "Base on Javascript",
          // },
          // { id: "powerful2", parentid: "powerful", topic: "Base on HTML5" },
          // { id: "powerful3", parentid: "powerful", topic: "Depends on you" },
        ],
      },
      page: 1,
      total: 0,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      temDialogVisible: false,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      eTitle: "",
      eTitle1: "",
      eName: "",
      eName1: "",
      mid: "",
      eJson: {},
      eJson1: {},
      fid: "", //一级
      sid: "", //二级
      tid: "", //二级
      type: 1,
      sn: "",
      dataArray: [],
      templateArray: [],
      update: false,
      eid: "",
      typeMode: 1,
      eJSONNum: 0,
      evaObject: {
        fName: "",
        fName1: "",
        isFInput: "",
        sName: "",
        sName1: "",
        isSInput: "",
        tName: "",
        tName1: "",
        isTInput: "",
      },
      isFold: false,
      isFoldDetail: "",
      isSold: false,
      isSoldDetail: "",
      isTold: false,
      isToldDetail: "",
      cEvaId: "",
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    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;
      this.getData();
    },
    handleClose(done) {
      done();
    },
    handleClose1(done) {
      if (
        JSON.stringify(this.eJson) === JSON.stringify(this.eJson1) &&
        this.eTitle === this.eTitle1
      ) {
        done();
      } else {
        this.$confirm("是否保存该目标？", "提示", {
          confirmButtonText: "保存并关闭",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (!this.update) {
              this.addEJson();
            } else {
              this.updateEJson();
            }
            done();
          })
          .catch(() => {});
      }
    },
    addE(type) {
      this.type = type;
      this.dialogVisible3 = true;
    },
    setDetail(t) {
      if (t == 1) {
        this.isFold = true;
      } else if (t == 2) {
        this.isSold = true;
      } else if (t == 3) {
        this.isTold = true;
      }
    },
    clearAll() {
      this.dialogVisible = false;
      this.isFold = false;
      this.isSold = false;
      this.isTold = false;
      this.isFoldDetail = "";
      this.isSoldDetail = "";
      this.isToldDetail = "";
    },
    addInputName(t) {
      let _id = this.guid();
      if (t == 1) {
        if (this.evaObject.fName == "") {
          this.$message.error("请输入目标");
          return;
        }
        this.eJson[_id] = {
          id: _id,
          name: this.evaObject.fName,
          detail: this.isFoldDetail ? this.isFoldDetail : "",
          child: {},
        };
        this.evaObject.fName = "";
        this.isFold = false;
        this.isFoldDetail = "";
        this.checkF(_id);
      } else if (t == 2) {
        if (this.evaObject.sName == "") {
          this.$message.error("请输入目标");
          return;
        }
        this.eJson[this.fid].child[_id] = {
          id: _id,
          name: this.evaObject.sName,
          detail: this.isSoldDetail ? this.isSoldDetail : "",
          child: {},
        };
        this.evaObject.sName = "";
        this.isSold = false;
        this.isSoldDetail = "";
        this.checkS(_id);
      } else if (t == 3) {
        this.eJson[this.fid].child[this.sid].child[_id] = {
          id: _id,
          name: this.evaObject.tName,
          detail: this.isToldDetail ? this.isToldDetail : "",
          child: [],
        };
        this.evaObject.tName = "";
        this.isTold = false;
        this.isToldDetail = "";
        this.checkT(_id);
      }
      this.eJSONNum++;
      this.setMindData();
    },
    noInput(id, n, t) {
      if (t == 1) {
        this.eJson[id].name = n;
        this.evaObject.isFInput = "";
      } else if (t == 2) {
        this.eJson[this.fid].child[id].name = n;
        this.evaObject.isSInput = "";
      } else if (t == 3) {
        this.eJson[this.fid].child[this.sid].child[id].name = n;
        this.evaObject.isTInput = "";
      }
      this.eJSONNum++;
      this.setMindData();
    },
    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 = "";
      }
      this.eJSONNum++;
      this.setMindData();
    },
    addEName1() {
      if (this.eName1 == "") {
        this.$message.error("请输入目标");
        return;
      }
      if (this.type == 1) {
        this.eJson[this.mid].name = this.eName1;
        this.dialogVisible4 = false;
        this.eName1 = "";
        this.mid = "";
      } else if (this.type == 2) {
        this.eJson[this.fid].child[this.mid].name = this.eName1;
        this.dialogVisible4 = false;
        this.eName1 = "";
        this.mid = "";
      } else if (this.type == 3) {
        this.eJson[this.fid].child[this.sid].child[this.mid].name = this.eName1;
        this.dialogVisible4 = false;
        this.eName1 = "";
        this.mid = "";
      }
      this.eJSONNum++;
      this.setMindData();
    },
    checkF(id) {
      if (this.fid == id) {
        this.fid = "";
      } else {
        this.fid = id;
      }
      this.sid = "";
      this.tid = "";
      this.isFold = false;
    },
    checkS(id) {
      if (this.sid == id) {
        this.sid = "";
      } else {
        this.sid = id;
      }
      this.tid = "";
      this.isSold = false;
    },
    checkT(id) {
      if (this.tid == id) {
        this.tid = "";
      } else {
        this.tid = id;
      }
      this.isTold = false;
    },

    updateF(id, n, t) {
      this.eName1 = n;
      this.mid = id;
      this.type = t;
      this.dialogVisible4 = true;
    },
    deleteF(id) {
      // if (JSON.stringify(this.eJson[id].child) != "{}") {
      //   this.$message.error(
      //     "删除该目标将会同步删除该目标下所有内容，请先删除该目标底下子集!"
      //   );
      //   return;
      // }
      this.$confirm(
        "删除该目标将会同步删除该目标下所有内容，是否继续操作?",
        "提示",
        {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (this.fid == id) {
            this.fid = "";
          }
          var a = JSON.parse(JSON.stringify(this.eJson));
          delete a[id];
          this.eJson = a;
          this.eJSONNum++;
          this.$forceUpdate();
          this.setMindData();
        })
        .catch(() => {});
    },
    deleteS(id) {
      // if (JSON.stringify(this.eJson[this.fid].child[id].child) != "{}") {
      //   this.$message.error(
      //     "删除该目标将会同步删除该目标下所有内容，请先删除该目标底下子集!"
      //   );
      //   return;
      // }
      this.$confirm(
        "删除该目标将会同步删除该目标下所有内容，是否继续操作?",
        "提示",
        {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (this.sid == id) {
            this.sid = "";
          }
          var a = JSON.parse(JSON.stringify(this.eJson));
          delete a[this.fid].child[id];
          this.eJson = a;
          this.eJSONNum++;
          this.$forceUpdate();
          this.setMindData();
        })
        .catch(() => {});
    },
    deleteT(id) {
      this.$confirm("是否删除该子级？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.tid == id) {
            this.tid = "";
          }
          var a = JSON.parse(JSON.stringify(this.eJson));
          delete a[this.fid].child[this.sid].child[id];
          this.eJson = a;
          this.eJSONNum++;
          this.$forceUpdate();
          this.setMindData();
        })
        .catch(() => {});
    },
    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.clearAll();
          this.getData();
        })
        .catch((err) => {
          this.$message.success("添加失败");
          console.error(err);
        });
    },
    addTemplate() {
      if (this.eTitle == "") {
        this.$message.error("请填写目标管理标题");
        return;
      }
      let params = {
        t: this.eTitle,
        c: JSON.stringify(this.eJson),
        uid: this.$route.query.userid,
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "addEvaTemplate", params)
        .then((res) => {
          this.$message.success("新增模板成功");
          this.init();
          this.clearAll();
          this.getData();
        })
        .catch((err) => {
          this.isLoading = false;
          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.clearAll();
          this.getData();
        })
        .catch((err) => {
          this.$message.success("修改失败");
          console.error(err);
        });
    },
    search() {
      this.page = 1;
      this.getData();
    },
    getData() {
      this.isLoading = true;
      let params = {
        oid: this.oid,
        n: this.sn,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getEvaluation", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.dataArray = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    deleteEva(id) {
      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);
        });
    },
    deleteE(id) {
      let params = {
        eid: id,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseEva", params)
        .then((res) => {
          if (res.data[0].length == 0) {
            this.$confirm("是否删除此目标?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.deleteEva(id);
              })
              .catch(() => {});
          } else {
            this.$confirm("此目标已被引用，是否继续删除操作?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.deleteEva(id);
              })
              .catch(() => {});
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    init() {
      this.eJson = {};
      this.eJson1 = {};
      this.fid = "";
      this.sid = "";
      this.tid = "";
      this.eTitle = "";
      this.eTitle1 = "";
    },
    addED() {
      this.update = false;
      this.init();
      this.setMindData();
      this.typeMode = 1;
      this.clearAll();
      this.dialogVisible = true;
    },
    openTemplate() {
      this.templateArray = [];
      this.selectEvaTem("1", () => {
        this.selectEvaTem(this.oid, () => {
          this.selectEvaTem(this.org);
        });
      });
      this.temDialogVisible = true;
    },
    selectEvaTem(oid, callback) {
      let params = {
        oid: oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectEvaTemplate", params)
        .then((res) => {
          if (res.data[0].length) {
            this.templateArray = [...res.data[0], ...this.templateArray];
          }
          this.templateArray.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          );
          this.$forceUpdate();
          callback ? callback() : "";
        })
        .catch((err) => {});
    },
    checkE(res) {
      this.init();
      this.eJson = JSON.parse(res.content);
      this.eJson1 = JSON.parse(res.content);
      this.eTitle1 = res.title;
      this.eTitle = res.title;
      this.eid = res.id;
      this.update = true;
      this.typeMode = 1;
      this.dialogVisible = true;
      this.$forceUpdate();
      setTimeout(() => {
        this.setMindData();
      }, 0);
    },
    checkE1(res) {
      this.init();
      this.eJson = JSON.parse(res.chapters);
      this.eJson1 = JSON.parse(res.chapters);
      this.eTitle1 = res.title;
      this.eTitle = res.title;
      if(this.update == false){
        this.eid = res.courseId;
      }
      this.typeMode = 1;
      this.$forceUpdate();
      setTimeout(() => {
        this.setMindData();
      }, 0);
    },
    setMindData() {
      this.data.data = [];
      this.data.data.push({ id: "root", isroot: true, topic: this.eTitle });
      let _eJson = Object.keys(this.eJson);
      let _e = this.eJson;
      for (let i = 0; i < _eJson.length; i++) {
        let element = _e[_eJson[i]];
        this.data.data.push({
          id: element.id,
          parentid: "root",
          topic: element.name,
        });
        let _eJsonc = Object.keys(element.child);
        let _e2 = element.child;
        for (let j = 0; j < _eJsonc.length; j++) {
          let _ec = _e2[_eJsonc[j]];
          this.data.data.push({
            id: _ec.id,
            parentid: element.id,
            topic: _ec.name,
          });
          let _eJsonz = Object.keys(_ec.child);
          let _e3 = _ec.child;
          for (let z = 0; z < _eJsonz.length; z++) {
            let _ez = _e3[_eJsonz[z]];
            this.data.data.push({
              id: _ez.id,
              parentid: _ec.id,
              topic: _ez.name,
            });
          }
        }
      }
      this.$forceUpdate();
    },
    chooseEva(id) {
      this.cEvaId = "";
      this.cEvaId = id;
    },
    closeEvaTem() {
      this.temDialogVisible = false;
      this.cEvaId = "";
    },
    addEvaByTem() {
      this.temDialogVisible = false;
      for (var i = 0; i < this.templateArray.length; i++) {
        if (this.cEvaId == this.templateArray[i].id) {
          this.checkE1(this.templateArray[i]);
        }
      }
    },
    copyEva(eid) {
      let params = [
        {
          eid: eid,
          uid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "copyEva", params)
        .then((res) => {
          this.page = 1;
          this.$message.success("复制成功");
          this.getData();
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  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 {
  padding: 15px 20px 0;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #e6eaf0;
}

.look_evaTem >>> .el-dialog {
  border-radius: 5px;
}

.look_evaTem >>> .el-dialog__header {
  background: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.look_evaTem >>> .el-dialog__headerbtn .el-dialog__close {
  color: #000;
}
.look_evaTem >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #000;
}

.tips_diy >>> .el-dialog__body,
.tips_diy >>> .el-dialog__footer {
  background: #fff;
}

.mubiao_diy >>> .el-dialog {
  max-width: 1200px;
}

.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;
}
.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%;
  height: 100%;
}
.e_add_list {
  background: #fff;
  height: 100%;
  width: calc(50% / 3);
  position: relative;
  margin: 15px 10px 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;
  background: #f6f6f6;
}
.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_input {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.e_add_input > .el-input {
  width: 300px;
}
.e_add_input > .el-button {
  margin-left: 10px;
}
.e_add_input > img {
  width: 35px;
  height: 35px;
  margin: 0 5px;
  cursor: pointer;
}
.e_add_list_child {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  padding: 15px 62px 15px 30px;
  text-align: center;
}
.e_add_list_child span {
  cursor: pointer;
  word-break: break-word;
  min-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.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;
  font-weight: bold;
}
.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;
}

.e_add_list_pbox {
  margin: 15px 0 0 0;
  width: 50%;
  min-width: 500px;
  height: 100%;
  min-height: 500px;
}
.e_add_list_pbox_title {
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.type_title {
  font-size: 18px;
  font-weight: 700;
}
.type_content {
  font-size: 16px;
  margin-left: 30px;
}
.type_content span + span {
  margin-left: 20px;
}
.type_content span {
  cursor: pointer;
  padding-bottom: 5px;
  box-sizing: border-box;
}

.type_content .active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.e_add_list_pbox_content {
  height: calc(100% - 50px);
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
}

.el-table >>> .even_row {
  background-color: #f1f1f1 !important;
}

.fullStyle >>> .el-dialog__body {
  height: calc(100% - 125px) !important;
  box-sizing: border-box;
  min-height: 500px;
}

.fullStyle >>> .el-dialog {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
}
.binfo_textarea {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 48px;
  border: 1.5px solid #cad1dc;
}

.binfo_textarea:focus-visible {
  border: 1.5px solid #3681fc !important;
}

.binfo_textarea::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.text_tooltip2 {
  max-width: 400px;
}

.evaTemBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.evaTemItem {
  width: 100px;
  height: 100px;
  background: #f0f4fa;
  border-radius: 6px;
  border: 1px solid #cad1dc;
  cursor: pointer;
  position: relative;
  margin: 0 10px 10px 0;
}

.evaItem {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.evaItemImg {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}

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

.evaItemTitle {
  margin-top: 10px;
  max-width: 85px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.evaNoChoose {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  background: #ffffff;
  border: 1px solid #3681fc;
  border-radius: 50%;
  cursor: pointer;
}

.evaIsChoose {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.evaIsChoose > img {
  width: 100%;
  height: 100%;
}
</style>