pbl-student-table/src/components/classRoomHelper/component/reviewArea.vue

<template>
  <div class="reviewArea" v-loading="loading">
		<div class="pzTop2">
 
        <div class="checkbox">

					<div class="cb-tabList">
						<div :class="[commentTagShow==0?'cb-tabItem':'']" @click="commentTagShow=0">评论</div>

						<div :class="[commentTagShow==2?'cb-tabItem':'']" @click="commentTagShow=2">总评</div>
					</div>
          <el-select v-model="pzStype" @change="selectPz" class="selectBox" v-show="commentTagShow == 0">
            <el-option label="时间降序" :value="1"></el-option>
            <el-option label="时间升序" :value="2"></el-option>
            <el-option label="我的评课" :value="3"></el-option>
          </el-select>
        </div>
      </div>
			<div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'" v-if="commentTagShow==0">
        <div class="pzListBox" v-if="pzList && pzList.length">
          <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
            <div class="pzNavTop">
              <div>评</div>
              <div>
                {{
                  pz.username && pz.username.length > 5
                    ? pz.username.substring(0, 5) + "..."
                    : pz.username
                }}的评论
              </div>
              <div
                class="pzDelete"
                v-if="pz.userid == userid"
                @click="deletePz(pz.id)"
              >
                删除
              </div>
            </div>
            <div
              @click="checkImg(getImgList(pz.content))"
              class="pzContent cont"
              v-html="pz.content"
              v-if="pz.type == '1'"
            ></div>
            <div class="pzContent" v-if="pz.type == '2'">
              <audio :src="pz.content" controls="controls" ref="audio">
                Your browser does not support the audio element.
              </audio>
            </div>
            <div class="pzContent" v-if="pz.type == '3'">
              <img
                :src="pz.content"
                style="width: 90%; margin: 0 auto; display: block"
                @click="previewImg(pz.content)"
              />
            </div>
            <div class="timeAndReply">
              <div class="time">
                {{ pz.time }}
              </div>
              <div @click="setReplyIndex(pz.id, pzIndex)">回复</div>
            </div>

            <div v-if="pz.hfList && pz.hfList.length > 0" class="hfBox">
              <div
                v-for="(h, hIndex) in pz.hfList"
                :key="hIndex"
                class="hfItem"
              >
                <div class="whoReplyWho">
                  <div class="hfName">{{ h.username }}</div>
                  <div class="hfImg">
                    <img src="../../../assets/icon/newIcons/right.png" alt="" />
                  </div>
                  <div class="hfName">{{ pz.username }}</div>
                </div>
                <div class="hfContent" v-html="h.content"></div>
                <div class="hfBottom">
                  <div class="hfTime">{{ h.time }}</div>
                  <div
                    class="deleteHfItem"
                    @click="deleteReply(h.id)"
                    v-if="userid == h.userid"
                  >
                    <img src="../../../assets/icon/newIcons/delete.png" alt="" />
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="replyBox" v-if="replyIndex[pzIndex] && replyIndex[pzIndex] == true">
              <div class="replyInput">
                <el-input v-model="reply[pzIndex]"></el-input>
              </div>
              <el-button @click="addHf(pz.id, pzIndex)">回复</el-button>
            </div> -->
          </div>
        </div>
        <div class="noPz" v-else>
          <img src="../../../assets/icon/noPz.png" alt="" />
        </div>
        <div class="addPzButton">
          <div class="addPz" @click="(addPzDialog = true), (pzType = 1)">
            添加评论
          </div>
          <!-- <div class="img1">
            <div @click="(addPzDialog = true), (pzType = 2)">
              <img src="../assets/audio.png" /><span>音频</span>
            </div>
          </div> -->
        </div>
      </div>
			<div class="scoreList" v-if="commentTagShow==1">
				<scoreItem v-for="item in scoreList.datalist" @refresh="getScoreList" :data="item" :isScore="scoreList.isScoreList.filter(i=>(i.userid==item.userid && i.courseid == item.courseId))" :key="item.courseId"/>
			</div>
			<div class="scoreList" v-if="commentTagShow==2" style="position: relative">
        <scoreZong :courseid="id" :userid="userid" @insertMemorandum="insertMemorandum"></scoreZong>
			</div>
			<div v-if="addPzDialog == true" class="addDialogCss" v-el-drag-dialog>
      <div class="pzTop">
        <div class="teacherPz">
          <div class="teacherPzImg">
            <img src="../../../assets/icon/teacherPz.png" alt="" />
          </div>
          <div style="margin-left: 10px; height: 25px">教师评论</div>
        </div>
        <div @click="addPzDialog = false">
          <img src="../../../assets/close1.png" class="pzClose" alt="" />
        </div>
      </div>
      <div class="addPzBox">
        <div class="addPzCheck">
          <span :class="{ isChooseActive: pzType == 1 }" @click="pzType = 1"
            >文本</span
          >
          <!-- <span :class="{isChooseActive:pzType==3}" @click="pzType = 3">图片</span> -->
          <span :class="{ isChooseActive: pzType == 2 }" @click="pzType = 2"
            >音频</span
          >
        </div>
        <div style="height: calc(100% - 95px)">
          <!-- <textarea class="binfo_input pzConText" cols placeholder="请填写项目课程关键问题...." v-model="pzConText"
            v-if="pzType == 1"></textarea> -->
          <editor-bar
            class="binfo_input pzConText"
            style="width: 100% !important"
            placeholder="请输入任务描述"
            v-model="pzConText"
            @change="change"
            v-if="pzType == 1"
          ></editor-bar>
          <Audio @addPz="addPz" class="pzAudioClass" v-if="pzType == 2"></Audio>
          <!-- <div class="pzAudioClass" v-if="pzType == 3">
            <div @click="addImg($event)">
              <el-button type="primary">上传图片</el-button>
              <input type="file" accept="image/png, image/gif, image/jpeg" style="display: none"
                @change="beforeUpload1($event, 4)" />
            </div>
          </div> -->
        </div>
        <div class="addTextCss" @click="addPz('1')" v-if="pzType == 1">
          确定
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scoreItem from '../../scoreList/scoreItem.vue'
import scoreZong from '../../scoreZong/index.vue'
import EditorBar from "../../tools/wangEnduit.vue";
import Audio from "../../components/audio.vue";
export default {
	components:{
		scoreItem,
		scoreZong,
		EditorBar,
		Audio
	},	
	props:{
		taskCount:{
			type:Number,
			default:0
		},
		courseType:{
			type:Number,
			default:0
		},
		
	},
	watch:{
		taskCount(){
			this.selectPz();
		},
		courseType(){
			this.selectPz();
		}
	},
  data() {
    return {
      commentTagShow: 0,
      pzStype: 1,
      pzList: [],
			loading:false,
			pzDialog:false,
      id: this.$route.query.courseId,
      userid: this.$route.query.userid,
			addPzDialog:false,
			pzType:0,
			pzConText:"",
			scoreList:{
				datalist:[],
				isScoreList:[]
			},
    };
  },
  methods: {
		insertMemorandum(_html) {
      //保存行为操作
      //variable
      //btn
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId+(this.tcid2?this.tcid2:""),
          content: _html
        }
      ];

      this.ajax
        .post(
          this.$store.state.api + "insert_systemOperation_countdownBehavior",
          params
        )
        .then(res => {
          if (res.data == 1) {
            console.log("保存操作成功");
          } else {
            console.log("保存操作失败");
          }
        })
        .catch(e => {
          console.log("保存操作失败");
          console.log(e);
        });
    },
    selectPz() {
      let params = {
        cid: this.id,
        s: this.courseType,
        t: this.taskCount,
        type: this.pzStype,
        uid: this.userid
      };
      this.ajax
        .get(this.$store.state.api + "selectPzListType", params)
        .then(res => {
          this.pzList = res.data[0];
          var a = res.data[1];
          for (var i = 0; i < a.length; i++) {
            for (var j = 0; j < this.pzList.length; j++) {
              if (!this.pzList[j].hfList) {
                this.pzList[j].hfList = [];
              }
              if (a[i].pid == this.pzList[j].id) {
                this.pzList[j].hfList.push(a[i]);
              }
            }
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
		getScoreList(){
			let params = {
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectTestCourseByCid", params)
        .then((res) => {
					let result = res.data;
					this.scoreList.datalist = result[0];
					this.scoreList.isScoreList = result[1];
        })
        .catch((err) => {
          console.error(err);
        });
		},
		addPz(type, content) {
      if (type == "1" && this.pzConText == "") {
        this.$message.error("评论不能为空！");
        return;
      }
      let params = [
        {
          cid: this.id,
          uid: this.userid,
          s: this.courseType,
          t: this.taskCount,
          c: type == "1" ? this.pzConText : content,
          type: type,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addPz2", params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.pzConText = "";
          this.addPzDialog = false;
          this.selectPz();
					this.insertMemorandum(`使用<span class="btn">评论</span>功能，添加评论`)
        })
        .catch((err) => {
          this.$message.error("添加失败");
          console.error(err);
        });
				
    },
		change(val){
			console.log(val);
		}
  },
	mounted() {
		this.selectPz();
		this.getScoreList();
	},
};
</script>

<style scoped>
.reviewArea {
  width: 100%;
  height: 100%;
	
}

.pzTop2 .check {
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
}

.pzTop2 img {
  width: 25px;
  cursor: pointer;
}

.pzTop2 .checkbox {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  flex: 0 0 auto;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
}

.checkbox>.cb-tabList{
	height:40px;
	display:flex;
	align-items:center;
}

.cb-tabList>div{
	margin-right:20px;
	font-weight:400;
	cursor:pointer;
}

.cb-tabList>.cb-tabItem{
	color:#1684FC;
	position:relative;
}

.cb-tabItem::after{
	content:"";
	width:100%;
	height:2px;
	background:#1684FC;
	position:absolute;
	bottom:-5px;
	left:0
}

.pzBox,
.noPzBox {
  height: calc(100% - 60px);
  /* background: #ededed; */
  background: #fff;
  /* border-radius: 0 0 15px 15px; */
}

.noPzBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.pzList {
  background: #f7f7f7;
  width: 90%;
  margin: 0 auto 15px;
  border-radius: 5px;
}

.pzNavTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 10px 0 10px;
  align-items: center;
}

.pzDelete {
  cursor: pointer;
  margin-left: auto;
  font-size: 14px;
  color: #afafaf;
}

.pzNavTop > div:nth-child(1) {
  background: #3760af;
  width: 35px;
  height: 35px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 14px;
}

.pzNavTop > div:nth-child(2) {
  font-size: 18px;
  color: #959595;
  margin-left: 5px;
}

.pzContent {
  padding: 10px;
  word-break: break-word;
}

.pzContent audio {
  width: 100%;
}

.pzContent audio::-webkit-media-controls-panel {
  background: #fff;
}

.pzContent >>> img {
  max-width: 100%;
}

.pzListBox {
  padding-top: 15px;
  height: calc(100% - 110px);
  overflow: auto;
}

.addPzButton {
  position: relative;
  margin-top: 3px;
  width: 100%;
}

.addPzButton .img1 {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  height: 100%;
  display: flex;
  align-items: center;
}

.addPzButton .img1 div {
  display: flex;
}

.addPzButton .img1 div img {
  width: 28px;
  margin-left: 10px;
  cursor: pointer;
}

.addPzButton .img1 div span {
  font-size: 14px;
  margin: 4px 0 0 3px;
  color: #afafaf;
}

.addPz {
  background: #4b79ce;
  width: 100px;
  color: #fff;
  font-size: 12px;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
  cursor: pointer;
}

.addDialogCss {
  position: fixed;
  width: 600px;
  height: 70%;
  min-height: 450px;
  box-shadow: 0px 0 8px 0px #555555;
  border-radius: 15px;
  z-index: 999;
  left: 50%;
  top: 50%;
  margin: -18% 0 0 -300px;
}

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

.teacherPzImg {
  width: 30px;
  height: 30px;
}

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

.addPzBox {
  height: calc(100% - 40px);
  background: #ededed;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.pzAudioClass {
  margin: 15px 14px;
  background: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pzConText {
  width: 95%;
  height: 100%;
  margin: 10px auto 0;
  border: none;
  background: #fff;
  border-radius: 0px;
}

.pzConText >>> .text {
  height: calc(100% - 82px);
}

.whoReplyWho > .hfImg {
  width: 12px;
  height: 12px;
  margin: 0 5px;
}
.whoReplyWho > .hfImg > img {
  width: 100%;
  height: 100%;
}
.hfContent {
  padding-top: 10px;
  box-sizing: border-box;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
}

.hfTime {
  text-align: left;
  box-sizing: border-box;
  padding: 10px 0 10px 0px;
  color: #bfbfbf;
  font-size: 14px;
}

.timeAndReply {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 10px 10px 0px;
}
.timeAndReply .time {
  color: #bfbfbf;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}
.timeAndReply > div:last-child {
  cursor: pointer;
  color: #777;
}

.hfBox {
  padding: 10px;
  box-sizing: border-box;
}

.whoReplyWho {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
}
.hfBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.deleteHfItem {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

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

.addPzCheck {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 15px 0;
}

.addPzCheck span {
  cursor: pointer;
  padding-bottom: 5px;
  font-weight: bold;
}

.addPzCheck span + span {
  margin-left: 10px;
}

.addPzCheck .isChooseActive {
  color: #3e88f4;
  border-bottom: 2px solid #2f80f3;
}
.pzTop {
  color: #fff;
  background: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  border-radius: 15px 15px 0 0;
  user-select: none;
}

.pzTop > div:nth-child(1) {
  padding-left: 10px;
}

.pzTop > div:nth-child(2) {
  width: 15px;
  height: 15px;
  padding-right: 10px;
  cursor: pointer;
}

.pzTop > div:nth-child(2) > img {
  width: 100%;
  height: 100%;
}


.addTextCss {
  background: #4b79ce;
  width: 80px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  border-radius: 10px;
  margin: 10px auto 0;
  cursor: pointer;
}

.scoreList{
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:10px 15px;
	overflow:auto;
	padding-bottom:80px;
}
</style>