<template>
|
<a-modal width="100%" :visible="visible" :title="title" @cancel="visible=false" :footer="null" :maskClosable="false">
|
<a-row>
|
<a-col :span="12"><span class="file-version-text">版本号：{{fileVersionArray[0]}}</span></a-col>
|
<a-col :span="12"><span class="file-version-text">版本号：{{fileVersionArray[1]}}</span></a-col>
|
</a-row>
|
<div class="code-diff-container">
|
<CodeDiff :old-string="oldVersionContent" :new-string="newVersionContent" outputFormat="side-by-side"/>
|
</div>
|
</a-modal>
|
</template>
|
|
<script>
|
import CodeDiff from 'vue-code-diff'
|
|
export default {
|
name: 'FileCompareModal',
|
components: { CodeDiff },
|
props: {
|
fileDiffObject: {
|
type: Object
|
},
|
fileVersionArray: {
|
type: Array
|
}
|
},
|
watch: {
|
visible: {
|
handler(value) {
|
if (value) {
|
const { fileDiffObject } = this
|
let fileContent = ''
|
for (let key in fileDiffObject) {
|
if (fileDiffObject.hasOwnProperty(key)) {
|
fileDiffObject[key].forEach((content, index) => {
|
fileContent += content
|
if (index !== fileDiffObject[key].length - 1) {
|
fileContent += '\n'
|
}
|
})
|
if (key === 'first') {
|
this.oldVersionContent = fileContent
|
fileContent = ''
|
}
|
else this.newVersionContent = fileContent
|
}
|
}
|
}
|
else this.newVersionContent = this.oldVersionContent = ''
|
}
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
title: '',
|
oldVersionContent: '',
|
newVersionContent: ''
|
}
|
},
|
methods: {}
|
}
|
</script>
|
|
<style scoped>
|
.file-version-text {
|
font-weight: bold;
|
font-size: 16px;
|
margin-left: 5%;
|
}
|
|
.code-diff-container {
|
height: 500px;
|
overflow: auto;
|
margin-top: 20px
|
}
|
</style>
|
