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

<template>
  <div class="container">
    <CodeReviewAddDrawer ref="addDrawer"/>
    <FileReviewAddDrawer ref="fileReviewAddDrawer"/>
<!--    <el-row>-->
<!--      <h2>代码评审列表</h2>-->
<!--    </el-row>-->
<!--    <div class = "tabs">-->
<!--      <div class="tab-pane" :active="tabActive[0]" @click="changeTab(0)">-->
<!--        Opened <div class="tab-pane-inline-circle">{{tabCount[0]}}</div>-->
<!--      </div>-->
<!--      <div class="tab-pane" :active="tabActive[1]" @click="changeTab(1)">-->
<!--        Merged <div class="tab-pane-inline-circle">{{tabCount[1]}}</div>-->
<!--      </div>-->
<!--      <div class="tab-pane" :active="tabActive[2]" @click="changeTab(2)">-->
<!--        Closed <div class="tab-pane-inline-circle">{{tabCount[2]}}</div>-->
<!--      </div>-->
<!--      <div class="tab-pane" :active="tabActive[3]" @click="changeTab(3)">-->
<!--        All <div class="tab-pane-inline-circle">{{tabCount[3]}}</div>-->
<!--      </div>-->
<!--    </div>-->
    <el-row>
      <h2>代码评审列表</h2>
      <div class="button-plate">
        <el-button type="success" size="medium" @click="addCodeReview">新建分支评审</el-button>
        <el-button type="primary" size="medium" @click="addFileReview">新建文件评审</el-button>
      </div>
      <!-- <el-button type="success" id="addButton" size="medium" @click="add">
        新建代码评审
      </el-button>
      <el-button type="success" id="addFileReviewButton" size="medium">
        新建文件评审
      </el-button> -->
    </el-row>
    <ElTabs class="tabs" v-model="activeTab">
      <ElTabPane :label="'Opened(' + codeReviewList.opened.length + ')'" name="Opened">
        <div class="code-review-line" v-for="item in codeReviewList.opened" :key="item.id">
          <div class="code-review-titleline" @click="directToDetail(item.id)">{{item.title}}</div>
          <div class="code-review-timeline">opened at {{item.createTime.split('T')[0]}}</div>
        </div>
      </ElTabPane>
      <ElTabPane :label="'Merged(' + codeReviewList.merged.length + ')'" name="Merged">
        <div class="code-review-line" v-for="item in codeReviewList.merged" :key="item.id">
          <div class="code-review-titleline" @click="directToDetail(item.id)">{{item.title}}</div>
          <div class="code-review-timeline">opened at {{item.createTime.split('T')[0]}}</div>
        </div>
      </ElTabPane>
      <ElTabPane :label="'Closed(' + codeReviewList.closed.length + ')'" name="Closed">
        <div class="code-review-line" v-for="item in codeReviewList.closed" :key="item.id">
          <div class="code-review-titleline" @click="directToDetail(item.id)">{{item.title}}</div>
          <div class="code-review-timeline">opened at {{item.createTime.split('T')[0]}}</div>
        </div>
      </ElTabPane>
      <ElTabPane :label="'FileReview(' + codeReviewList.fileReview.length + ')'" name="FileReview">
        <div class="code-review-line" v-for="item in codeReviewList.fileReview" :key="item.id">
          <div class="code-review-titleline" @click="directToFileReviewDetail(item.id)">{{item.title}}</div>
          <div class="code-review-timeline">opened at {{item.createTime.split('T')[0]}}</div>
        </div>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<script>
import CodeReviewAddDrawer from '@/components/CodeReviewAddDrawer.vue';
import FileReviewAddDrawer from '@/components/FileReviewAddDrawer.vue';
import { useRouter } from 'vue-router';
import { CodeReviewAPI } from '../../api';

export default {
  components: { CodeReviewAddDrawer, FileReviewAddDrawer },
  name: 'CodeReview.vue',
  data() {
    return {
      activeTab: 'Opened',
      codeReviewList: {
        opened: [{
          id: 1,
          projectId: -1,
          sourceBranch: '',
          targetBranch: '',
          creatorId: '',
          reviewerId: '',
          status: '',
          title: 'frontEndTest',
          description: '',
          createTime: '2022.1.26',
        }, {
          id: 1,
          projectId: -1,
          sourceBranch: '',
          targetBranch: '',
          creatorId: '',
          reviewerId: '',
          status: '',
          title: 'frontEndTest',
          description: '',
          createTime: '2022.1.26',
        }],
        closed: [],
        merged: [],
        fileReview: [],
      },
    };
  },
  computed: {
    currentProjectInfo() {
      return this.$store.getters.currentProjectInfo;
    },
  },
  methods: {
    // changeTab(index) {
    //   if (this.tabActive[index]) return null;
    //   this.tabActive = [false, false, false, false];
    //   this.tabActive[index] = true;
    //   return null;
    // },
    addCodeReview() {
      this.$refs.addDrawer.show();
    },
    addFileReview() {
      this.$refs.fileReviewAddDrawer.show();
    },
    directToDetail(id) {
      this.$router.push(`codereviewdetail?codeReviewId=${id}`);
    },
    directToFileReviewDetail(id) {
      this.$router.push(`filereviewdetail?fileReviewId=${id}`);
    },
  },
  async mounted() {
    this.codeReviewList = await CodeReviewAPI.getCodeReviewList(this.currentProjectInfo.id);
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tabs__item{
    font-size: 1em;
  }
}
.container {
  margin: 50px 100px;
  & .tabs {
    width: 90%;
    margin: 10px 0px;
  }
}
.button-plate {
  position: absolute;
  top: 100%;
  right: 10%;
  margin-top: 10px;
  z-index: 10;
}
#addButton {
  position: absolute;
  top: 100%;
  right: 10%;
  margin-top: 10px;
  z-index: 10;
}
#addFileReviewButton {
  position: absolute;
  top: 100%;
  right: 30%;
  margin-top: 10px;
  z-index: 10;
}
.code-review-line {
  border-bottom: 1px solid gainsboro;
  padding: 5px 10px;
}
.code-review-titleline {
  cursor: pointer;
}
.code-review-titleline:hover {
  text-decoration: underline;
}
.code-review-timeline {
  color: #909090;
  font-size: 0.9em;
  margin-top: 5px;
}
</style>