/**
? * 根據(jù)關(guān)聯(lián)id獲取評(píng)論信息
? * @param relationId 關(guān)聯(lián)id
? * @param type 類型
? * @return: com.harvey.result.ResultSupport<java.lang.Object>
? * @date: 2020/12/10 14:37
? */
?@GetMapping("findList")
?public ResultSupport<Object> findList(@RequestParam("relationId") String relationId, @RequestParam("type") String type){
? ? ?log.debug("接口[findList]的參數(shù)：relationId={}, type={}", relationId, type);
? ? ?ResultSupport<Object> result = ResultSupport.createMisResp();
? ? ?try {
? ? ? ? ?List<Comment> commentList = commentService.findList(relationId, type);
? ? ? ? ?ResultSupportUtils.fillResultSupport(result, commentList);
? ? ?} catch (Exception e) {
? ? ? ? ?log.error("[findList]接口執(zhí)行異常", e);
? ? ? ? ?ResultSupportUtils.fillError(result,"系統(tǒng)出現(xiàn)異常！");
? ? ?}
? ? ?log.debug("接口[findList]的結(jié)果：result={}", result);
? ? ?return result;
?}

?/**
? * 保存評(píng)論
? * @param comment 參數(shù)
? * @return: com.tortoise.common.result.ResultSupport<java.lang.Object>
? * @date: 2020/12/10 14:37
? */
?@PostMapping("save")
?public ResultSupport<Object> save(@RequestBody Comment comment, HttpServletRequest request){
? ? ?log.debug("接口[save]的參數(shù)：comment={}", comment);
? ? ?ResultSupport<Object> result = ResultSupport.createMisResp();
? ? ?String token = request.getHeader("authorization");
? ? ?if (StrUtil.isEmpty(token)) {
? ? ? ? ?result.setSuccess(false);
? ? ? ? ?result.setMessage("token無(wú)效！");
? ? ? ? ?return result;
? ? ?}
? ? ?if (BeanUtil.isEmpty(comment)){
? ? ? ? ?result.setSuccess(false);
? ? ? ? ?result.setMessage("參數(shù)無(wú)效！");
? ? ? ? ?return result;
? ? ?}
? ? ?try {
? ? ? ? ?commentService.save(comment, token);
? ? ?} catch (Exception e) {
? ? ? ? ?log.error("[save]接口執(zhí)行異常", e);
? ? ? ? ?ResultSupportUtils.fillError(result,"系統(tǒng)出現(xiàn)異常！");
? ? ?}
? ? ?log.debug("接口[save]的結(jié)果：result={}", result);
? ? ?return result;
?}

/**
? * 根據(jù)關(guān)聯(lián)id獲取績(jī)效信息
? */
?public List<Comment> findList(String relationId, String type) {
? ? ?return commentMapper.findList(relationId, type);
?}

?/**
? * 保存評(píng)論
? * @param comment 參數(shù)
? * @param token 用戶token
? * @return:
? * @date: 2020/12/10 14:37
? */
?@Transactional(rollbackFor = Exception.class)
?public void save(Comment comment, String token) {
? ? ?SysUser user = UserUtils.getUser(token);
? ? ?comment.preInsert(user.getId());
? ? ?comment.setDelFlag("0");
? ? ?commentMapper.save(comment);
?}

/**
?* 根據(jù)關(guān)聯(lián)id獲取績(jī)效信息
?*/
List<Comment> findList(@Param("relationId") String relationId, @Param("type") String type);

/**
?* 根據(jù)id獲取子評(píng)論內(nèi)容
?*/
List<Comment> selectByParentId(@Param("parentId") String parentId);

/**
?* 保存評(píng)論
?*/
void save(Comment comment);

<sql id="commentColumns">
?? ??? ?a.id AS "id",
?? ??? ?a.user_id AS "userId",
?? ??? ?u.name AS "userName",
?? ??? ?a.relation_id AS "relationId",
?? ??? ?a.type AS "type",
?? ??? ?a.reply_user_id AS "replyUserId",
?? ??? ?r.name AS "replyUserName",
?? ??? ?a.parent_id AS "parentId",
?? ??? ?a.content AS "content",
?? ??? ?u.photo AS "photo",
?? ??? ?a.del_flag AS "delFlag",
?? ??? ?a.create_by AS "createBy",
?? ??? ?a.create_date AS "createDate"
?? ?</sql>

?? ?<sql id="commentJoins">
?? ??? ?LEFT JOIN sys_user u ON a.user_id = u.id AND u.del_flag = '0'
?? ??? ?LEFT JOIN sys_user r ON a.reply_user_id = r.id AND r.del_flag = '0'
? ? </sql>
?? ?<!-- 保存評(píng)論 -->
?? ?<insert id="save">
?? ??? ?INSERT INTO comment(
?? ??? ??? ?id,
?? ??? ??? ?user_id,
?? ??? ??? ?relation_id,
?? ??? ??? ?type,
?? ??? ??? ?reply_user_id,
?? ??? ??? ?parent_id,
?? ??? ??? ?content,
?? ??? ??? ?del_flag,
?? ??? ??? ?create_by,
?? ??? ??? ?create_date
?? ??? ?) VALUES (
?? ??? ??? ?#{id},
?? ??? ??? ?#{userId},
?? ??? ??? ?#{relationId},
?? ??? ??? ?#{type},
?? ??? ??? ?#{replyUserId},
?? ??? ??? ?#{parentId},
?? ??? ??? ?#{content},
?? ??? ??? ?#{delFlag},
?? ??? ??? ?#{createBy},
?? ??? ??? ?#{createDate}
?? ??? ?)
?? ?</insert>

?? ?<resultMap id="commentResultMap" type="com.harvey.entity.Comment">
?? ??? ?<id column="id" property="id" />
?? ??? ?<result column="userId" property="userId" />
?? ??? ?<result column="userName" property="userName" />
?? ??? ?<result column="relationId" property="relationId" />
?? ??? ?<result column="type" property="type" />
?? ??? ?<result column="replyUserId" property="replyUserId" />
?? ??? ?<result column="replyUserName" property="replyUserName" />
?? ??? ?<result column="parentId" property="parentId" />
?? ??? ?<result column="content" property="content" />
?? ??? ?<collection property="children" column="{parentId=id}" select="selectByParentId" ofType="com.harvey.Comment"/>
?? ?</resultMap>

?? ?<!-- 根據(jù)關(guān)聯(lián)id獲取評(píng)論信息 -->
?? ?<select id="findList" resultMap="commentResultMap">
?? ??? ?SELECT
?? ??? ?<include refid="commentColumns"/>
?? ??? ?FROM
?? ??? ??? ?comment a
?? ??? ?<include refid="commentJoins"/>
?? ??? ?WHERE
?? ??? ??? ?a.relation_id = #{relationId}
?? ??? ??? ?AND a.type = #{type}
?? ??? ??? ?AND a.parent_id = '0'
?? ??? ?ORDER BY
?? ??? ??? ?a.create_date DESC
?? ?</select>

?? ?<!-- 根據(jù)id獲取子評(píng)論內(nèi)容 -->
?? ?<select id="selectByParentId" resultType="com.harvey.entity.Comment">
?? ??? ?SELECT
?? ??? ?<include refid="commentColumns"/>
?? ??? ?FROM
?? ??? ?comment a
?? ??? ?<include refid="commentJoins"/>
?? ??? ?WHERE
?? ??? ?a.parent_id = #{parentId}
?? ??? ?ORDER BY
?? ??? ?a.create_date DESC
?? ?</select>

<!--評(píng)論模塊-->
<template>
? <el-drawer
? ? title="評(píng)論"
? ? :visible.sync="drawer"
? ? direction="rtl"
? ? :before-close="handleClose"
? ? :modal="false"
? ? :withHeader="true"
? ? @open="getCommentList"
? ? @close="close"
? ? size="320px"
? >
? ? <div class="container">
? ? ? <div class="write-reply" @click="showCommentInputMajor()">
? ? ? ? <div style="margin-top: 10px;">
? ? ? ? ? <el-input
? ? ? ? ? ? class="gray-bg-input"
? ? ? ? ? ? v-model="majorComment"
? ? ? ? ? ? type="textarea"
? ? ? ? ? ? :rows="3"
? ? ? ? ? ? autofocus
? ? ? ? ? ? placeholder="寫下你的評(píng)論"
? ? ? ? ? >
? ? ? ? ? </el-input>
? ? ? ? ? <div style="text-align: right;margin-top: 10px;">
? ? ? ? ? ? <el-button @click="reset" size="small" round>重置</el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? round
? ? ? ? ? ? ? @click="commitMajorComment"
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? >確定</el-button
? ? ? ? ? ? >
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="comment" v-for="item in commentList" :key="item.id">
? ? ? ? <div class="info">
? ? ? ? ? <img
? ? ? ? ? ? class="avatar"
? ? ? ? ? ? :src="fileUrl + item.photo"
? ? ? ? ? ? width="36"
? ? ? ? ? ? height="36"
? ? ? ? ? />
? ? ? ? ? <div class="right">
? ? ? ? ? ? <div class="name">{{ item.userName }}</div>
? ? ? ? ? ? <div class="date">{{ formatDate(item.createDate) }}</div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="content">{{ item.content }}</div>
? ? ? ? <div class="control">
? ? ? ? ? <!-- <span
? ? ? ? ? class="like"
? ? ? ? ? :class="{ active: item.isLike }"
? ? ? ? ? @click="likeClick(item)"
? ? ? ? >
? ? ? ? ? <i class="iconfont icon-like"></i>
? ? ? ? ? <span class="like-num">{{
? ? ? ? ? ? item.likeNum > 0 ? item.likeNum + "人贊" : "贊"
? ? ? ? ? }}</span>
? ? ? ? </span> -->
? ? ? ? ? <span
? ? ? ? ? ? class="comment-reply"
? ? ? ? ? ? @click="showCommentInput(item, item, 'major')"
? ? ? ? ? >
? ? ? ? ? ? <i class="iconfont icon-iconcomment"></i>
? ? ? ? ? ? <span>回復(fù)</span>
? ? ? ? ? </span>
? ? ? ? </div>
? ? ? ? <div class="reply">
? ? ? ? ? <div class="item" v-for="reply in item.children" :key="reply.id">
? ? ? ? ? ? <div class="reply-content">
? ? ? ? ? ? ? <span class="from-name">{{ reply.userName }}</span
? ? ? ? ? ? ? ><span>: </span>
? ? ? ? ? ? ? <span class="to-name">@{{ reply.replyUserName }}</span>
? ? ? ? ? ? ? <span>{{ reply.content }}</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="reply-bottom">
? ? ? ? ? ? ? <span>{{ formatDate(reply.createDate) }}</span>
? ? ? ? ? ? ? <span
? ? ? ? ? ? ? ? class="reply-text"
? ? ? ? ? ? ? ? @click="showCommentInput(item, reply, 'child')"
? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <i class="iconfont icon-iconcomment"></i>
? ? ? ? ? ? ? ? <span>回復(fù)</span>
? ? ? ? ? ? ? </span>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? <transition name="fade">
? ? ? ? ? ? <div class="input-wrapper" v-if="showItemId === item.id">
? ? ? ? ? ? ? <el-tag
? ? ? ? ? ? ? ? type="info"
? ? ? ? ? ? ? ? effect="dark"
? ? ? ? ? ? ? ? v-if="inputLabel != undefined && inputLabel"
? ? ? ? ? ? ? ? >{{ inputLabel }}</el-tag
? ? ? ? ? ? ? >
? ? ? ? ? ? ? <el-input
? ? ? ? ? ? ? ? class="gray-bg-input"
? ? ? ? ? ? ? ? v-model="inputComment"
? ? ? ? ? ? ? ? type="textarea"
? ? ? ? ? ? ? ? :rows="3"
? ? ? ? ? ? ? ? autofocus
? ? ? ? ? ? ? ? placeholder="寫下你的評(píng)論"
? ? ? ? ? ? ? >
? ? ? ? ? ? ? </el-input>
? ? ? ? ? ? ? <div class="btn-control">
? ? ? ? ? ? ? ? <el-button @click="cancel" size="small" round>取消</el-button>
? ? ? ? ? ? ? ? <el-button
? ? ? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? ? ? round
? ? ? ? ? ? ? ? ? @click="commitComment"
? ? ? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? ? ? >確定</el-button
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? </transition>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </el-drawer>
</template>

<script>
import * as commentApi from "@/api/comment-api";
import { DateUtil } from "@/utils/DateUtils";
import { UserUtil } from "@/utils/UserUtils";
import "@/assets/css/iconfont/iconfont.css";

export default {
? props: {
? ? drawer: {
? ? ? type: Boolean,
? ? ? required: true,
? ? ? default: false
? ? },
? ? relationId: {
? ? ? type: String,
? ? ? required: true,
? ? ? default: ""
? ? },
? ? commentType: {
? ? ? type: String,
? ? ? required: true,
? ? ? default: ""
? ? }
? },
? data() {
? ? return {
? ? ? fileUrl: process.env.VUE_APP_FDFST_FILE_URL,
? ? ? commentList: [],
? ? ? inputComment: "",
? ? ? showItemId: "",
? ? ? replyUserId: "",
? ? ? parentId: "",
? ? ? userInfo: UserUtil.getUserByStorage(),
? ? ? inputLabel: "",
? ? ? majorComment: ""
? ? };
? },
? methods: {
? ? formatDate(date) {
? ? ? return DateUtil.formatDate(date, "yyyy-MM-dd hh:mm");
? ? },
? ? handleClose(done) {
? ? ? done();
? ? },
? ? /**
? ? ?* 點(diǎn)贊
? ? ?*/
? ? /* likeClick(item) {
? ? ? if (item.isLike === null) {
? ? ? ? item.likeNum++;
? ? ? } else {
? ? ? ? if (item.isLike) {
? ? ? ? ? item.likeNum--;
? ? ? ? } else {
? ? ? ? ? item.likeNum++;
? ? ? ? }
? ? ? ? item.isLike = !item.isLike;
? ? ? }
? ? }, */
? ? // 獲取評(píng)論內(nèi)容
? ? getCommentList() {
? ? ? commentApi.findList(this.relationId, this.commentType).then(res => {
? ? ? ? this.commentList = res.data;
? ? ? });
? ? },
? ? /**
? ? ?* 點(diǎn)擊取消按鈕
? ? ?*/
? ? cancel() {
? ? ? this.showItemId = "";
? ? },

? ? /**
? ? ?* 提交評(píng)論
? ? ?*/
? ? commitComment() {
? ? ? // 封裝參數(shù)
? ? ? let param = {
? ? ? ? userId: this.userInfo.userId,
? ? ? ? relationId: this.relationId,
? ? ? ? type: this.commentType,
? ? ? ? replyUserId: this.replyUserId,
? ? ? ? parentId: this.parentId,
? ? ? ? content: this.inputComment
? ? ? };
? ? ? commentApi.saveComment(param).then(res => {
? ? ? ? if (res.success) {
? ? ? ? ? this.$message({
? ? ? ? ? ? message: "評(píng)論成功",
? ? ? ? ? ? type: "success"
? ? ? ? ? });
? ? ? ? ? this.getCommentList();
? ? ? ? ? this.inputComment = "";
? ? ? ? } else {
? ? ? ? ? this.$message.error("評(píng)論失敗");
? ? ? ? }
? ? ? });
? ? },

? ? /**
? ? ?* 提交評(píng)論
? ? ?*/
? ? commitMajorComment() {
? ? ? // 封裝參數(shù)
? ? ? let param = {
? ? ? ? userId: this.userInfo.userId,
? ? ? ? relationId: this.relationId,
? ? ? ? type: this.commentType,
? ? ? ? replyUserId: this.replyUserId,
? ? ? ? parentId: this.parentId,
? ? ? ? content: this.majorComment
? ? ? };
? ? ? commentApi.saveComment(param).then(res => {
? ? ? ? if (res.success) {
? ? ? ? ? this.$message({
? ? ? ? ? ? message: "評(píng)論成功",
? ? ? ? ? ? type: "success"
? ? ? ? ? });
? ? ? ? ? this.getCommentList();
? ? ? ? ? this.majorComment = "";
? ? ? ? } else {
? ? ? ? ? this.$message.error("評(píng)論失敗");
? ? ? ? }
? ? ? });
? ? },

? ? /**
? ? ?* 點(diǎn)擊評(píng)論按鈕顯示輸入框
? ? ?* item: 當(dāng)前大評(píng)論
? ? ?* reply: 當(dāng)前回復(fù)的評(píng)論
? ? ?*/
? ? showCommentInput(item, reply, type) {
? ? ? if (reply) {
? ? ? ? this.inputLabel = "@" + reply.userName + " ";
? ? ? ? if (type === "major") {
? ? ? ? ? this.parentId = reply.id;
? ? ? ? }
? ? ? ? if (type === "child") {
? ? ? ? ? this.parentId = reply.parentId;
? ? ? ? }
? ? ? ? this.replyUserId = reply.userId;
? ? ? ? debugger;
? ? ? } else {
? ? ? ? this.inputLabel = "";
? ? ? ? this.parentId = "0";
? ? ? ? this.replyUserId = "";
? ? ? }
? ? ? this.inputComment = "";
? ? ? this.showItemId = item.id;
? ? },
? ? showCommentInputMajor() {
? ? ? this.inputLabel = "";
? ? ? this.parentId = "0";
? ? ? this.replyUserId = "";
? ? },
? ? reset() {
? ? ? this.inputComment = "";
? ? ? this.majorComment = "";
? ? },
? ? close() {
? ? ? this.$emit("commentClose", "0");
? ? }
? }
};
</script>

<style scoped lang="less">
/deep/.el-drawer__body {
? overflow: auto;
}
/deep/.el-drawer__header span:focus {
? outline: 0 !important;
}
.container {
? padding: 0 10px;
? box-sizing: border-box;
? .comment {
? ? display: flex;
? ? flex-direction: column;
? ? padding: 10px;
? ? border-bottom: 1px solid #f2f6fc;
? ? .info {
? ? ? display: flex;
? ? ? align-items: center;
? ? ? .avatar {
? ? ? ? border-radius: 50%;
? ? ? }
? ? ? .right {
? ? ? ? display: flex;
? ? ? ? flex-direction: column;
? ? ? ? margin-left: 10px;
? ? ? ? .name {
? ? ? ? ? font-size: 16px;
? ? ? ? ? color: #303133;
? ? ? ? ? margin-bottom: 5px;
? ? ? ? ? font-weight: 500;
? ? ? ? }
? ? ? ? .date {
? ? ? ? ? font-size: 12px;
? ? ? ? ? color: #909399;
? ? ? ? }
? ? ? }
? ? }
? ? .content {
? ? ? font-size: 16px;
? ? ? color: #303133;
? ? ? line-height: 20px;
? ? ? padding: 10px 0;
? ? }
? ? .control {
? ? ? display: flex;
? ? ? align-items: center;
? ? ? font-size: 14px;
? ? ? color: #909399;
? ? ? .like {
? ? ? ? display: flex;
? ? ? ? align-items: center;
? ? ? ? margin-right: 20px;
? ? ? ? cursor: pointer;
? ? ? ? &.active,
? ? ? ? &:hover {
? ? ? ? ? color: #409eff;
? ? ? ? }
? ? ? ? .iconfont {
? ? ? ? ? font-size: 14px;
? ? ? ? ? margin-right: 5px;
? ? ? ? }
? ? ? }
? ? ? .comment-reply {
? ? ? ? display: flex;
? ? ? ? align-items: center;
? ? ? ? cursor: pointer;
? ? ? ? &:hover {
? ? ? ? ? color: #333;
? ? ? ? }
? ? ? ? .iconfont {
? ? ? ? ? font-size: 16px;
? ? ? ? ? margin-right: 5px;
? ? ? ? ? margin-top: 4px;
? ? ? ? }
? ? ? }
? ? }
? ? .reply {
? ? ? margin: 10px 0;
? ? ? border-left: 2px solid #dcdfe6;
? ? ? .item {
? ? ? ? margin: 0 10px;
? ? ? ? padding: 10px 0;
? ? ? ? border-bottom: 1px dashed #ebeef5;
? ? ? ? .reply-content {
? ? ? ? ? display: flex;
? ? ? ? ? align-items: center;
? ? ? ? ? font-size: 14px;
? ? ? ? ? color: #303133;
? ? ? ? ? .from-name {
? ? ? ? ? ? color: #409eff;
? ? ? ? ? }
? ? ? ? ? .to-name {
? ? ? ? ? ? color: #409eff;
? ? ? ? ? ? margin-left: 5px;
? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? }
? ? ? ? }
? ? ? ? .reply-bottom {
? ? ? ? ? display: flex;
? ? ? ? ? align-items: center;
? ? ? ? ? margin-top: 6px;
? ? ? ? ? font-size: 12px;
? ? ? ? ? color: #909399;
? ? ? ? ? .reply-text {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? margin-left: 10px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? &:hover {
? ? ? ? ? ? ? color: #333;
? ? ? ? ? ? }
? ? ? ? ? ? .icon-iconcomment {
? ? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? ? ? margin-top: 4px;
? ? ? ? ? ? ? font-size: 13px;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? .write-reply {
? ? ? ? display: flex;
? ? ? ? align-items: center;
? ? ? ? font-size: 14px;
? ? ? ? color: #909399;
? ? ? ? padding: 10px;
? ? ? ? cursor: pointer;
? ? ? ? &:hover {
? ? ? ? ? color: #303133;
? ? ? ? }
? ? ? ? .el-icon-edit {
? ? ? ? ? margin-right: 5px;
? ? ? ? }
? ? ? }
? ? ? .fade-enter-active,
? ? ? fade-leave-active {
? ? ? ? transition: opacity 0.5s;
? ? ? }
? ? ? .fade-enter,
? ? ? .fade-leave-to {
? ? ? ? opacity: 0;
? ? ? }
? ? ? .input-wrapper {
? ? ? ? padding: 10px;
? ? ? ? .gray-bg-input,
? ? ? ? .el-input__inner {
? ? ? ? ? /*background-color: #67C23A;*/
? ? ? ? }
? ? ? ? .btn-control {
? ? ? ? ? display: flex;
? ? ? ? ? justify-content: flex-end;
? ? ? ? ? align-items: center;
? ? ? ? ? padding-top: 10px;
? ? ? ? ? .cancel {
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? color: #606266;
? ? ? ? ? ? margin-right: 20px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? &:hover {
? ? ? ? ? ? ? color: #333;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? .confirm {
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>

<template>
?? ?<Comment
? ? ? :relationId="kpiPerformance.id"
? ? ? :commentType="'1'"
? ? ? :drawer="isComment"
? ? ? @commentClose="commentClick('0')"
? ? ></Comment>
</template>

<script>
import Comment from "@/components/Comment";

export default {
?? ?components: {
?? ? ? Comment
?? ?}
}
</script>