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

<template>
  <div>
    <el-button type="text" size="small" @click="goBack">
      <i class="el-icon-back">返回上一页</i>
    </el-button>
    <el-card shadow="never" class="description-card">
      <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>
      <el-row :gutter="20">
        <el-col :span="commitInfo.checkResult === 'none' ? 24:16">
          <div class="description-card-text">
            <el-row style="height: 25px; line-height: 25px">
              <el-col :span="2">
                <b>类型：</b>
              </el-col>
              <el-col :span="22">
            <span v-if="!typeEditMode">
              <el-tag v-if="commitInfo.relatedType === 'bug_id'" class="type-line type-tag" color="chocolate" size="medium">缺陷</el-tag>
              <el-tag v-else-if="commitInfo.relatedType === 'none'" class="type-line type-tag" color="#ccc" size="medium">无类型</el-tag>
              <el-tag v-else class="type-line type-tag" color="#42b983" size="medium">需求</el-tag>
              <span v-if="commitInfo.relatedType !== 'none'" class="type-line">关联节点ID: {{commitInfo.relatedId}}</span>
              <el-button type="primary" size="mini" class="type-line" @click="typeEditMode = true">修改关联</el-button>
            </span>
                <span v-if="typeEditMode">
              <el-radio v-model="relatedTypeEdit" label="TREE_ID" size="large">需求</el-radio>
              <el-radio v-model="relatedTypeEdit" label="BUG_ID" size="large">缺陷</el-radio>
              <el-radio v-model="relatedTypeEdit" label="NONE" size="large">空</el-radio>
              <el-select v-if="relatedTypeEdit!='NONE'" v-model="relatedIdEdit" class="m-2 type-line" size="small" placeholder="Select">
                <el-option
                  v-for="item in (relatedTypeEdit === 'TREE_ID'?treeList:bugList)"
                  :key="item.id"
                  :label="item.id + ' ' +(item.title === ''?'默认节点':item.title)"
                  :value="item.id"
                />
              </el-select>
              <el-button type="info" size="mini" class="type-line" @click="typeEditMode = false">取消</el-button>
              <el-button type="primary" size="mini" class="type-line" @click="saveRelated">保存</el-button>
            </span>
              </el-col>
            </el-row>
          </div>
          <div class="description-card-text">
            <el-row>
              <el-col :span="2">
                <b>信息：</b>
              </el-col>
              <el-col :span="22">
                <span>{{ commitInfo.message }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="description-card-text">
            <el-row>
              <el-col :span="2">
                <b>时间：</b>
              </el-col>
              <el-col :span="22">
                <span>{{ commitInfo.timestamp }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="description-card-text">
            <el-row>
              <el-col :span="2">
                <b>提交人：</b>
              </el-col>
              <el-col :span="22">
                <span>{{ commitInfo.gitlabUsername }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="description-card-text">
            <el-row style="height: 35px; line-height: 35px">
              <el-col :span="2">
                <b>parent:</b>
              </el-col>
              <el-col :span="22">
                <el-tag v-for="(parent, index) in commitInfo.parents"
                        :key="index"
                        @click="onParentTagClick(parent)"
                >{{parent}}</el-tag>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col v-if="commitInfo.checkResult !== 'none'" :span="8" class="left-line">
          <i v-if="commitInfo.checkResult === 'pass'" class="el-icon-circle-check check-pass">质量检查通过</i>
          <i v-else-if="commitInfo.checkResult === 'fail'" class="el-icon-circle-close check-fail">质量检查失败</i>
        </el-col>
      </el-row>
    </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: 500px">
          <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 { BugListAPI, ProjectAPI, RequirementAPI } from '@/api';
import * as Diff2Html from 'diff2html';
import 'diff2html/bundles/css/diff2html.min.css';
import { copy } from '@/utils/clipboard';
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatter } from '../../utils/time';

export default {
  name: 'CommitDetials.vue',
  data() {
    return {
      commitInfo: {},
      originAllDiffs: [],
      diffString: '',
      parentsCount: 0,
      currentParentIndex: 0,
      diffHtml: '',
      fileNameKeyword: '',
      displayDiff: [],
      currentFileRow: ref(),
      typeEditMode: false,
      relatedTypeEdit: 'TREE_ID',
      relatedIdEdit: 1,
      bugList: [],
      treeList: [],
    };
  },
  computed: {
    projectId() {
      return this.$route.params.projectId;
    },
    commitId() {
      return this.$route.query.id;
    },
  },
  async mounted() {
    await this.loadCommitInfo();
    await this.loadRelatedLists();
  },
  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;
    },
    async loadRelatedLists() {
      this.bugList = await BugListAPI.getBugListByProjectId(this.$store.state.workspace.currentProjectId);
      this.treeList = await RequirementAPI.getTasksByProjectId(this.$store.state.workspace.currentProjectId);
    },
    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));
      }
    },
    async saveRelated() {
      const response = ProjectAPI.linkCommit(this.projectId, this.commitId, this.relatedTypeEdit, this.relatedIdEdit);
      ElMessage('success');
      await this.loadCommitInfo();
      this.typeEditMode = false;
    },
  },
};
</script>

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

[v-cloak] {
  display: none;
}

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

.description-card-text {
  margin-top: 8px;
}

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

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

.el-tag {
  margin: 3px 10px;
}

.bug {
  background-color: chocolate;
}
.none{
  background-color: #ccc;
}
.requirement {
  background-color: #42b983;
}
.check-pass {
  color: green;
}
.check-fail {
  color: red;
}
.left-line {
  border-left-style: solid;
  border-left-color: lightgrey;
}
.type-line{
  margin: 0;
  margin-right: 20px;
  /*color: #ffffff;*/
}
.type-tag{
  color: #ffffff;
}
</style>