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

<template>
  <div>
<!--    <el-row-->
<!--      style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">-->
<!--      <el-button plain icon="el-icon-arrow-left" @click="goBack">上一页</el-button>-->
<!--    </el-row>-->
    <el-card shadow="never" class="description-card">
<!--      <el-button plain icon="el-icon-arrow-left" @click="goBack" style="margin-right: 20px">返回</el-button>-->
      <el-link
        target="_blank"
        class="commit-id description-card-text"
        @click.stop.prevent="copy(commitId.id)"
      >
        <span>{{ commitId }}</span>
        <i class="el-icon-document-copy"></i>
      </el-link>
<!--      <div class="description-card-text commit-title">标题：-->
<!--        <span>{{ commitInfo.title }}</span>-->
<!--      </div>-->
      <div class="description-card-text">信息：
        <span>{{ commitInfo.message }}</span>
      </div>
      <div class="description-card-text">时间：
        <span>{{ commitInfo.timestamp }}</span>
      </div>
      <div class="description-card-text">提交人：
        <span>{{ commitInfo.gitlabUsername }}</span>
      </div>
      <div class="description-card-text">
        <el-row>
          parents:
          <span><el-tag v-for="(parent, index) in commitInfo.parents"
                        :key="index"
                        @click="onParentTagClick(parent)"
          >{{ parent }}</el-tag></span>
        </el-row>

      </div>
    </el-card>
    <el-divider content-position="left">
      变更详情
    </el-divider>
    <div v-if="parentsCount > 0">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content">
                <el-select v-model="currentParentIndex" style="width: 100%">
                  <el-option
                    v-for="(item, index)  in commitInfo.parents"
                    :key="index"
                    :label="'相比于 parent ' + item.substring(0,8)"
                    :value="index">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <el-input
                v-model="fileNameKeyword"
                class="w-50 m-2"
                placeholder="检索文件名"
                :prefix-icon="Search"
              >
                <template #append>
                  <el-button :icon="Search" @click="searchFileName">搜索</el-button>
                </template>
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-table :data="displayDiff[currentParentIndex]"
                      max-height="350px"
                      style="width: 100%"
                      highlight-current-row
                      @current-change="handleCurrentChange">
              <el-table-column prop="newPath" label="文件"/>
              <el-table-column prop="state" label="状态" width="100">
                <template #default="scope">
                  <el-tag
                    :type="scope.row.state < 0 ? 'danger' : (scope.row.state === 0 ? 'success' : '')"
                    disable-transitions>
                    {{ scope.row.stateDes }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="16" style="height: 400px">
          <el-empty v-if="diffHtml === ''" description="请在左侧选择文件查看" />
          <div v-html="diffHtml" v-cloak ></div>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <el-empty description="本次提交为首次提交，无法比较" />
    </div>

  </div>

  <!--  {{commitInfo}}-->
</template>

<script>
import { ProjectAPI } from '@/api';
import * as Diff2Html from 'diff2html';
import 'diff2html/bundles/css/diff2html.min.css';
import { copy } from '@/utils/clipboard';
import { ref } from 'vue';
import { formatter } from '../../utils/time';

export default {
  name: 'CommitDetials.vue',
  data() {
    return {
      commitInfo: {},
      originAllDiffs: [],
      diffString: '',
      parentsCount: 0,
      currentParentIndex: 0,
      diffHtml: '',
      fileNameKeyword: '',
      displayDiff: [],
      currentFileRow: ref(),
    };
  },
  computed: {
    projectId() {
      return this.$route.params.projectId;
    },
    commitId() {
      return this.$route.query.id;
    },
  },
  async mounted() {
    await this.loadCommitInfo();
  },
  methods: {
    copy,
    async loadCommitInfo() {
      this.commitInfo = await ProjectAPI.getCommitByHash(this.$store.state.workspace.currentProjectId, this.commitId);
      this.commitInfo.timestamp = formatter(this.commitInfo.timestamp);
      this.parentsCount = this.commitInfo.parents.length;
      for (let i = 0; i < this.parentsCount; i += 1) {
        const parentHash = this.commitInfo.parents[i];
        // eslint-disable-next-line no-await-in-loop
        const diffFiles = await ProjectAPI.getCommitsDiff(this.$store.state.workspace.currentProjectId, parentHash, this.commitId);
        for (let j = 0; j < diffFiles.length; j += 1) {
          const diffFile = diffFiles[j];
          if (diffFile.deletedFile) {
            diffFile.state = -1;
            diffFile.stateDes = '删除';
          } else if (diffFile.newFile) {
            diffFile.state = 0;
            diffFile.stateDes = '新增';
          } else if (diffFile.renamedFile) {
            diffFile.state = 1;
            diffFile.stateDes = '改名';
          } else {
            diffFile.state = 2;
            diffFile.stateDes = '修改';
          }
        }
        this.originAllDiffs.push(diffFiles);
      }
      this.displayDiff = this.originAllDiffs;
    },
    drawDiffHtml() {
      // this.diffString = this.diff[this.currentParentIndex][0].diff;
      this.diffString = this.currentFileRow.diff;
      this.diffHtml = Diff2Html.html(this.diffString, {
        drawFileList: false,
        matching: 'lines',
        outputFormat: 'line-by-line',
        // maxLineSizeInBlockForComparison: 10,
      });
    },
    goBack() {
      this.$router.go(-1);
      this.loadCommitInfo();
    },
    handleCurrentChange(val) {
      this.currentFileRow = val;
      this.drawDiffHtml();
    },
    onParentTagClick(id) {
      console.log(id);
      // this.$router.push({
      //   path: `/project/${this.$store.state.workspace.currentProjectId}/commit-detail`,
      //   query: {
      //     id,
      //   },
      // });
      // this.loadCommitInfo();
    },
    searchFileName() {
      this.displayDiff = [];
      for (let i = 0; i < this.parentsCount; i += 1) {
        this.displayDiff.push(this.originAllDiffs[i]
          .filter((diffFile) => diffFile.newPath.indexOf(this.fileNameKeyword) >= 0));
      }
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

[v-cloak] {
  display: none;
}

.description-card {
  margin: 10px 0;
}

.description-card-text {
  margin: 5px 0;
}

.commit-id {
  font-size: 18px;
  font-weight: bold;
}

.commit-title {
  font-weight: bold;
}

.el-tag {
  margin: 3px 10px;
}
</style>