|  |  | 
 |  |  | <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> |