|
|
@@ -0,0 +1,238 @@
|
|
|
+<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>
|
|
|
+ <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="300px"
|
|
|
+ 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="1"> </el-col>
|
|
|
+ <el-col :span="15">
|
|
|
+ <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',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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>
|
claws