seecoder-devcloud-frontend/src/views/Project/CodeReviewDetail.vue

<template>
  <div class="container">
    <h2>{{codeReviewDetail.title}}</h2>
    <el-divider/>
    <div class="title-line">
      <el-tag type="success" effect="dark" v-if="codeReviewDetail.status === 'Opened'">Open</el-tag>
      <el-tag type="danger" effect="dark" v-if="codeReviewDetail.status === 'Closed'">Closed</el-tag>
      <el-tag type="info" effect="dark" v-if="codeReviewDetail.status === 'Merged'">Merged</el-tag>
      <div>opened on {{codeReviewDetail.createTime.split('T')[0]}} by {{getCreatorName(codeReviewDetail.creatorId)}}</div>
      <el-button type="warning" plain size="medium" v-if="codeReviewDetail.status === 'Opened'">Close merge request</el-button>
    </div>
    <el-divider/>
    <div>Request to merge <span class="branch-name">{{codeReviewDetail.sourceBranch}}</span> into <span class="branch-name">{{codeReviewDetail.targetBranch}}</span></div>
    <div class="operation-line">
      <el-button type="success" size="medium" plain :disabled="!codeReviewDetail.status === 'Opened'">Merge</el-button>
      <el-switch v-model="codeReviewDetail.deleteSourceBranch" active-text="合并后删除源分支"></el-switch>
    </div>
    <el-divider/>
    <ElTabs v-model="activeTab">
      <ElTabPane :label="'评审意见'" name="comments">
        <div v-for="comment in commentList" :key="comment.id" class="comment-line">
          <div>
            <i class="el-icon-plus"/>{{comment.creatorName}}
            <span class="vice-comment"> @ {{comment.creatorName}} {{comment.commentType}}ed at {{comment.time}}</span>
          </div>
          <div class="comment-content">{{comment.content}}</div>
        </div>
        <div class="text-container">
          <div>创建新的评审意见</div>
          <el-input type="textarea" :rows="5" v-model="newComment.content"/>
          <el-button type="success" size="medium" plain :disabled="newComment.length === 0" @click="submitComment">创建</el-button>
        </div>
      </ElTabPane>
      <ElTabPane :label="'代码差异'" name="codeDiff">
        <CodeDifferencePlate :data="codeDiffMsg.res"/>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<script>
import CodeDifferencePlate from '../../components/CodeDifferencePlate.vue';
import { CodeReviewAPI } from '../../api';

export default {
  name: 'CodeResviewDetail.vue',
  components: { CodeDifferencePlate },
  data() {
    return {
      activeTab: 'comments',
      codeReviewId: 0,
      codeReviewDetail: {
        creatorId: 0,
        createTime: '',
      },
      commentList: [
        {
          id: 0,
          codeReviewId: 1,
          creatorId: 1479,
          creatorName: 'Shanshan',
          content: '4893310c - feat: commit message',
          time: '2022-02-25',
          commentType: 'Commit',
        },
        {
          id: 1,
          codeReviewId: 1,
          creatorId: 1479,
          creatorName: 'Shanshan',
          content: 'Commene Content, Point out some flaws',
          time: '2022-02-26',
          commentType: 'Comment',
        },
        {
          id: 2,
          codeReviewId: 1,
          creatorId: 1479,
          creatorName: 'Shanshan',
          content: 'bd308312 - feat: fix some flaws',
          time: '2022-02-27',
          commentType: 'Commit',
        },
      ],
      codeDiffMsg: {},
      newComment: {
        codeReviewId: 0,
        creatorId: 0,
        creatorName: '',
        content: '',
        commentType: 'Comment',
        replyId: 0,
      },
    };
  },
  methods: {
    getCreatorName(creatorId) {
      const members = this.projectMemberList;
      let creatorName = 'Unknown User';
      Object.keys(members).forEach((key) => {
        if (members[key].value === creatorId) creatorName = members[key].label;
        return true;
      });
      return creatorName;
    },
    submitComment() {
      CodeReviewAPI.createComment(this.newComment).then(
        (res) => {
          this.commentList.push(JSON.parse(JSON.stringify(this.newComment)));
          this.newComment.content = '';
        },
      );
    },
  },
  computed: {
    projectMemberList() {
      return this.$store.getters.userOptions;
    },
    currentUser() {
      return this.$store.state.user;
    },
  },
  async mounted() {
    this.codeReviewId = this.$route.query.codeReviewId;
    this.newComment.codeReviewId = this.codeReviewId;
    this.newComment.creatorId = this.currentUser.id;
    this.newComment.creatorName = this.currentUser.username;
    this.codeReviewDetail = await CodeReviewAPI.getCodeReviewDetail(this.codeReviewId);
    this.commentList = await CodeReviewAPI.getComment(this.codeReviewId);
    this.codeDiffMsg = await CodeReviewAPI.compareBranch(this.codeReviewDetail.projectId, this.codeReviewDetail.targetBranch, this.codeReviewDetail.sourceBranch);
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-tabs__item{
    font-size: 16px;
  }
}
.container {
  margin: 20px 50px;
  .el-divider {
    width: 90%;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .el-tabs {
    width: 90%;
    font-size: 2em;
  }
}
.title-line {
  .el-tag {
    display: inline-block;
    font-size: 0.95em;
  }
  div {
    display: inline-block;
    margin-left: 10px;
  }
  .el-button {
    position: absolute;
    right: 10%;
  }
}
.operation-line {
  margin-top: 8px;
  .el-switch {
    margin-left: 10px;
  }
}
.branch-name {
  color: #1b69b6;
  font-weight: 600;
}
.comment-line {
  border-bottom: gainsboro solid 1px;
  font-size: 16px;
  padding: 7px 10px;
}
.vice-comment {
  color: #707070;
}
.comment-content {
  margin-top: 7px;
  margin-left: 50px;
}
.text-container {
  font-size: 16px;
  border: solid gainsboro 1px;
  border-radius: 5px;
  margin-top: 20px;
  padding: 12px 20px;
  div {
    margin-bottom: 8px;;
  }
  .el-input {
    font-size: 13px;
  }
}
</style>