ll

liukangdong

2024-12-06 86baa8ff948d2e79588e0dd7efa16f6b8ac3b157

 admin/src/components/business/OperaInterfaceLogWindow.vue

@@ -1,49 +1,102 @@
<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>
    </GlobalWindow>
      <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 GlobalWindow from '@/components/common/GlobalWindow'
  export default {
    name: 'OperaInterfaceLogWindow',
    extends: BaseOpera,
    components: { GlobalWindow },
    data () {
      return {
        // 表单数据
        form: {
          content: ''
        },
        // 验证规则
        rules: {
        }
      }
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('内容已成功复制到剪切板！')
    },
    created () {
      this.config({
        api: '/business/interfaceLog',
        'field.id': 'id'
    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 {
        width: 100%;
        font-size: 15px;
        color: #222222;
        word-wrap: break-word;
    .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>