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

<template>
  <div class="container">
    <el-row class="row-item title">
      <h2>commit记录</h2>
    </el-row>
<!--    {{currentBranch}}-->
<!--    {{currentAuthors}}-->
<!--    {{displayCommits}}-->
    <div>
      <div v-if="originCommits.length === 0">
        <el-empty description="暂无commit记录！"></el-empty>
      </div>
      <div v-else>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select v-model="currentBranch" class="m-2" placeholder="Select" size="large">
              <el-option
                v-for="(branch, index) in branches"
                :key="index"
                :label="branch.name"
                :value="branch.name"
                @change="onSearch"
              />
            </el-select>
          </el-col>

          <el-col :span="6">
              <el-select
                v-model="currentAuthors"
                multiple
                collapse-tags
                placeholder="选择处理人"
              >
                <el-option
                  v-for="(author, index) in authors"
                  :key="index"
                  :label="author"
                  :value="author"
                />
              </el-select>
          </el-col>

          <el-col :span="10">
<!--            <el-date-picker-->
<!--              v-model="value1"-->
<!--              type="daterange"-->
<!--              range-separator="To"-->
<!--              start-placeholder="Start date"-->
<!--              end-placeholder="End date"-->
<!--            />-->
<!--            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />-->
            <el-input v-model="keyword" placeholder="输入检索message内容或Hash" clearable />
          </el-col>

          <el-col :span="2">
            <el-button type="primary" @click="onSearch">过滤</el-button>
          </el-col>

        </el-row>
        <ElTimeline>
          <ElTimelineItem
            v-for="(git, index) in displayCommits"
            :key="index"
            :timestamp="git.timestamp"
            placement="top"
            :color="git.relatedType === 'bug_id' ? 'chocolate' : (git.relatedType === 'none' ? '#ccc': '#42b983')"
            size="large">
            <ElCard shadow="hover"
                    @click="clickCommitCard(git.id)">
              <h3 class="view-text">{{git.title}}</h3>
<!--              <h3 class="id">{{git.id}}</h3>-->
<!--              <div class="view-text" style="margin-top: 10px; font-size: 16px; color: #444">{{git.message}}</div>-->
              <div style="margin-top: 10px">
                <el-row>
                  <el-col :span="6">
                    <el-link
                      target="_blank"
                      type="info"
                      @click.stop.prevent="copy(git.id)"
                    >
                      <span style="color: #888">{{git.id.substring(0, 8)}}</span>
                      <i class="el-icon-document-copy"></i>
                    </el-link>
                  </el-col>
                  <el-col :span="12">
                    处理人：<span style="font-weight: bold">{{git.gitlabUsername}}</span>
                  </el-col>
                  <el-col :span="6">
                    类型：
                    <span v-if="git.relatedType === 'bug_id'" class="node bug">缺陷</span>
                    <span v-else-if="git.relatedType === 'none'" class="node none">无类型</span>
                    <span v-else class="node requirement">需求</span></el-col>
                </el-row>
              </div>
            </ElCard>
          </ElTimelineItem>
        </ElTimeline>
      </div>
    </div>
  </div>
</template>

<script>
import { ProjectAPI } from '@/api';
import { useRouter } from 'vue-router';
import { copy } from '@/utils/clipboard';
import { formatter } from '../../utils/time';

export default {
  name: 'Commit.vue',
  data() {
    return {
      branches: [],
      originCommits: [],
      displayCommits: [],
      authors: [],
      lastBranch: '',
      currentBranch: '',
      currentAuthors: [],
      keyword: '',
    };
  },
  async mounted() {
    this.branches = await ProjectAPI.getAllBranches(this.$store.state.workspace.currentProjectId);
    if (this.branches.length !== 0) {
      this.currentBranch = this.branches[0].name;
      this.lastBranch = this.currentBranch;
      await this.loadBranch();
    }
  },
  methods: {
    copy,
    async loadBranch() {
      this.originCommits = await ProjectAPI.getCommitsByBranch(this.$store.state.workspace.currentProjectId, this.currentBranch);
      this.authors = [];
      for (let i = 0; i < this.originCommits.length; i += 1) {
        this.originCommits[i].timestamp = formatter(this.originCommits[i].timestamp);
        const author = this.originCommits[i].gitlabUsername;
        if (this.authors.indexOf(author) === -1) {
          this.authors.push(author);
        }
      }
      this.displayCommits = this.originCommits;
    },
    clickCommitCard(id) {
      console.log(id);
      this.$router.push({
        path: `/project/${this.$store.state.workspace.currentProjectId}/commit-detail`,
        query: {
          id,
        },
      });
    },
    async onSearch() {
      if (this.currentBranch !== this.lastBranch) {
        await this.loadBranch();
      }
      this.displayCommits = this.originCommits
        .filter((commit) => (this.currentAuthors.length === 0 || this.currentAuthors.indexOf(commit.gitlabUsername) >= 0)
          && (commit.id.startsWith(this.keyword) || commit.title.indexOf(this.keyword) >= 0));
      console.log('search');
    },
  },
};
</script>

<style scoped>
.container {
  margin: 50px 100px;
  width: 50%;
}
.row-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.id {
  width: fit-content;
  height: 20px;
  background-color: #2185d0;
  color: #fff;
  border: 0 solid transparent;
  border-radius: .28571429rem;
}
.node {
  width: 15px;
  color: #FFFFFF;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
}
.bug {
  background-color: chocolate;
}
.none{
  background-color: #ccc;
}
.requirement {
  background-color: #42b983;
}
.view-text{
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
}
.el-row{
  margin-bottom: 20px;
}
</style>