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'" @click="closeCodeReview()">Close merge request</el-button>
      <el-button type="success" plain size="medium" v-if="codeReviewDetail.status === 'Closed'" @click="reopenCodeReview()">Reopen 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="disableMergeButton()"
      @click="mergeCodeReview()">
        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>
        <el-timeline reverse = "true">
          <el-timeline-item v-for="(item, index) in commentList" :key="index" :timestamp="formatTime(item.time)" class="comment-item">
            <el-row>
              <el-tag size="small" type="primary" v-if="item.commentType==='Commit'">Commited</el-tag>
              <el-tag size="small" type="info" v-if="item.commentType==='Comment'">Commented</el-tag>
              <el-tag size="small" type="success" v-if="item.commentType==='Reopen'">Reopened</el-tag>
              <el-tag size="small" type="danger" v-if="item.commentType==='Close'">Closed</el-tag>
              <el-tag size="small" type="success" v-if="item.commentType==='Merge'">Merged</el-tag>
              <span class="creator-name-plate">by {{item.creatorName}}</span>
            </el-row>
            <el-row>{{item.content}}</el-row>
          </el-timeline-item>
        </el-timeline>
        <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">
        <el-row v-if="codeDiffMsg.length === 0" class="codeDiffHint">
          <i class="el-icon-info"></i>
          源分支与目标分支间的代码无差异，无法进行代码评审以及合并操作。
        </el-row>
        <CodeDifferencePlate :data="codeDiffMsg"/>
      </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: '',
        reviewerId: 0,
      },
      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(
        async (res) => {
          this.commentList = await CodeReviewAPI.getComment(this.codeReviewId);
          this.newComment.content = '';
        },
      );
    },
    formatTime(timestamp) {
      return new Date(timestamp).toLocaleString();
    },
    closeCodeReview() {
      CodeReviewAPI.closeCodeReview(this.codeReviewId).then(
        async (res) => {
          this.codeReviewDetail.status = 'Closed';
          this.$message('代码评审任务已关闭');
          this.commentList = await CodeReviewAPI.getComment(this.codeReviewId);
        },
      );
    },
    reopenCodeReview() {
      CodeReviewAPI.reopenCodeReview(this.codeReviewId).then(
        async (res) => {
          this.codeReviewDetail.status = 'Opened';
          this.$message('代码评审任务已重新开启');
          this.commentList = await CodeReviewAPI.getComment(this.codeReviewId);
        },
      );
    },
    disableMergeButton() {
      if (this.codeReviewDetail.status !== 'Opened') return true;
      if (this.currentUser.id !== this.codeReviewDetail.reviewerId) return true;
      if (this.codeDiffMsg.length === 0) return true;
      return false;
    },
    mergeCodeReview() {
      CodeReviewAPI.mergeCodeReview(this.codeReviewId).then(
        async (res) => {
          if (res === null) {
            this.codeReviewDetail.status = 'Merged';
            this.$message('代码评审任务已合并分支');
            this.commentList = await CodeReviewAPI.getComment(this.codeReviewId);
          }
        },
      );
    },
  },
  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-item {
  .el-row {
    padding: 3px;
  }
}
.creator-name-plate {
  margin-left: 6px;
}
.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;
  }
}
.codeDiffHint {
  font-size: 16px;
  color: grey;
  .el-icon-info {
    color: #ff4444;
    margin-right: 4px;
  }
}
</style>