最新版本

jiangping

2024-06-11 c3c67ee9e88c579e8ac784821ab41f58d0372ebb

 admin/src/components/business/OperaInterfaceLogWindow.vue

@@ -1,33 +1,51 @@
<template>
    <GlobalWindow
    <el-dialog
        :title="title"
        width="60%"
        :withFooter="false"
        :visible.sync="visible"
        :confirm-working="isWorking"
        append-to-body
        @confirm="confirm"
    >
        <div class="box">
            {{form.content}}
      <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>
    </GlobalWindow>
    </el-dialog>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
import JsonViewer from 'vue-json-viewer'

  export default {
    name: 'OperaInterfaceLogWindow',
    extends: BaseOpera,
    components: { GlobalWindow },
  components: { JsonViewer },
    data () {
      return {
        // 表单数据
        form: {
          content: ''
        content: '',
        formatContent: {}
        },
        // 验证规则
        rules: {
        }
      },
      copyable: { copyText: 'copy', copiedText: 'copied' }
      }
    },
    created () {
@@ -35,15 +53,50 @@
        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>
    .box {
    .codeEditBox {
        width: 100%;
        font-size: 15px;
        color: #222222;
        word-wrap: break-word;
      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>