pbl-teacher-table/src/components/pages/note.vue

<template>
  <div class="pb_content" style="background: unset">
    <div
      class="pb_content_body"
      style="
        background: #fff;
        padding: 0px 25px;
        box-sizing: border-box;
        border-radius: 5px;
        max-width: 500px !important;
      "
    >
      <div class="pb_head">
        <span>便签</span>
        <div class="addNote" @click="addNote">添加便签</div>
      </div>
      <div class="searchNote">
        <span style="width: 100%">
          <el-input placeholder="搜索..." v-model="noteC" clearable> </el-input>
        </span>
        <el-button type="primary" @click="selectContent">查询</el-button>
      </div>
      <div class="noteList">
        <div class="noteBg" v-for="(item, index) in noteList" :key="index">
          <!-- @change="saveNote(item.nid, item.content,type = 1)"  边写边保存 @blur点击旁边保存-->
          <el-input
            type="textarea"
            autosize
            v-model="item.content"
            @blur="saveNote(item.nid, item.content, (type = 1))"
            resize="none"
          >
          </el-input>
          <div class="ellipsis" @click="openTc(index)">
            <img src="../../assets/icon/ellipsis.png" alt="" />
          </div>
          <div class="noteHorn">
            <img src="../../assets/icon/noteHorn.png" alt="" />
          </div>
          <div class="tc" v-if="isNone == index + 1">
            <div class="first" @click="saveNote(item.nid, item.content)">
              <div class="save">
                <img src="../../assets/icon/save.png" alt="" />
              </div>
              <div>保存笔记</div>
            </div>
            <div class="first" @click="deleteNote(item.nid)">
              <div class="delete">
                <img src="../../assets/icon/deleteN.png" alt="" />
              </div>
              <div>删除笔记</div>
            </div>
          </div>
        </div>
      </div>
      <div class="noneDiv" @click="isNone = 0" v-if="isNone != 0"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: "500px",
      page: 1,
      total: 0,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      noteC: "",
      noteContent: "",
      noteList: [],
      isNone: 0,
      type: 0,
    };
  },
  methods: {
    openTc(i) {
      this.isNone = i + 1;
    },
    getNote() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectNote", params)
        .then((res) => {
          this.noteList = res.data[0];
          if (this.noteList.length == 0) {
            this.addNote();
          }
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    selectContent() {
      let params = {
        cn: this.noteC,
      };
      this.ajax
        .get(this.$store.state.api + "selectNoteContent", params)
        .then((res) => {
          this.noteList = res.data[0];
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
    addNote() {
      let params = {
        uid: this.userid,
        c: "",
      };
      this.ajax
        .get(this.$store.state.api + "insertNote", params)
        .then((res) => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.getNote();
        })
        .catch((err) => {
          this.$message.error("新增失败");
          console.error(err);
        });
    },
    saveNote(nid, c, type) {
      let params = {
        nid: nid,
        c: c,
      };
      this.ajax
        .get(this.$store.state.api + "updateNote", params)
        .then((res) => {
          if (type == 0) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
          this.getNote();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    deleteNote(nid) {
      let params = {
        nid: nid,
      };
      this.ajax
        .get(this.$store.state.api + "deleteNote", params)
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getNote();
        })
        .catch((err) => {
          this.$message.error("删除失败");
          console.error(err);
        });
    },
  },
  created() {
    this.getNote();
  },
};
</script>

<style scoped>
.pb_head {
  display: flex;
  justify-content: space-between;
}

.pb_head {
  margin: 0 !important;
  width: 100% !important;
  border-bottom: 1px solid #ebebeb;
  padding: 10px 0;
}
.addNote {
  background: #458bdf;
  color: #fff;
  font-size: 16px;
  width: 110px;
  text-align: center;
  line-height: 40px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.searchNote {
  display: flex;
  margin: 20px 0;
}
.searchNote >>> .el-input__inner {
  background: #f1f1f1;
}
.searchNote >>> .el-button--primary {
  margin-left: 20px;
  background-color: #2268bc !important;
}
.noteList {
  padding: 5px 0;
}
.noteBg {
  background: #fff7d1;
  min-height: 100px;
  position: relative;
  border-radius: 5px;
  margin-bottom: 15px;
}
.noteHorn {
  width: 1rem;
  position: absolute;
  bottom: -5px;
  right: 0;
}
.ellipsis {
  width: 2rem;
  position: absolute;
  top: 5px;
  right: 20px;
  cursor: pointer;
  z-index: 99;
}
.noteHorn > img,
.ellipsis > img,
.save > img,
.delete > img {
  width: 100%;
  height: 100%;
}
.noteBg >>> .el-textarea__inner {
  background: transparent;
  border: none;
  min-height: 100px !important;
  padding-top: 10px;
}
.tc {
  position: absolute;
  top: 30px;
  width: 110px;
  background: #fffffb;
  right: -35px;
  box-shadow: 1px 2px 4px 0px #e8e8e8;
  z-index: 99;
}
.first {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  cursor: pointer;
}
.save,
.delete {
  width: 1.5rem;
}
.noneDiv {
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 9;
  width: 100%;
}
.first > div:nth-child(2) {
  margin-left: 5px;
  margin-top: -5px;
}
</style>