<template>
|
<el-dialog
|
:title="title"
|
width="60%"
|
:withFooter="false"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
append-to-body
|
@confirm="confirm"
|
>
|
<div class="codeEditBox">
|
<json-viewer
|
:value="form.formatContent"
|
:expand-depth="5"
|
copyable
|
boxed
|
:expanded="false"
|
@copied="copyText"
|
sort
|
:show-array-index="false"
|
class="w-100%">
|
<template slot="copy">
|
<i class="el-icon-document-copy" title="复制">复制代码</i>
|
</template>
|
</json-viewer>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import JsonViewer from 'vue-json-viewer'
|
|
export default {
|
name: 'OperaInterfaceLogWindow',
|
extends: BaseOpera,
|
components: { JsonViewer },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
content: '',
|
formatContent: {}
|
},
|
// 验证规则
|
rules: {
|
},
|
copyable: { copyText: 'copy', copiedText: 'copied' }
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/interfaceLog',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
copyText (val) {
|
this.$message.success('内容已成功复制到剪切板！')
|
},
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
try {
|
this.form.formatContent = JSON.parse(this.form.content)
|
} catch (e) {
|
this.form.formatContent = this.form.content
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.codeEditBox {
|
width: 100%;
|
height: 90%;
|
overflow:auto;
|
display: block;
|
border: 1px solid #dcdee2;
|
overflow-y: auto;
|
}
|
::v-deep .el-dialog__body{height:70vh;overflow-y: auto}
|
::v-deep .el-dialog{height:78vh;overflow: hidden}
|
.jv-container {
|
//height: 60vh;
|
}
|
</style>
|
