Blame view

src/components/JsonEditors/index.vue 3.82 KB
xiaomiao committed
1 2 3
<template>
  <div>
    <i class="icon-tubiao-242 iconfont" :title="title" @click="openDialog" />
任超 committed
4 5 6 7 8
    <el-dialog :key="key" :title="title" :inner-dialog="true" :visible.sync="dialogVisible" width="600px"
      :close-on-click-modal="false" append-to-body @cancel="cancel">
      <vue-json-editor id="minejson" v-model="resultInfo" :mode="'code'" lang="zh" @json-change="onJsonChange"
        @json-save="onJsonSave" @has-error="onError" />
      <el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen class="fullScreen">
xiaomiao committed
9 10 11 12
        <i class="el-icon-full-screen" @click="enLarge" />
      </el-tooltip>
      <template slot="footer">
        <div class="dialog-footer flex flex-pack-center">
任超 committed
13 14
          <el-button type="primary" class="confirmBtn" @click="onJsonSave">保存</el-button>
          <el-button type="primary" class="cancelBtn" @click="cancel">关闭</el-button>
xiaomiao committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  components: {
    vueJsonEditor
  },
  props: {
    title: {
      type: String,
      default: '配置参数'
    },
    resultInfos: {
      type: String,
      default: ''
    }
  },
任超 committed
36
  data () {
xiaomiao committed
37 38 39 40 41 42 43 44 45 46 47 48
    return {
      activeNames: [],
      resultInfo: {},
      tmpResultInfo: {},
      dialogVisible: false,
      hasJsonFlag: true,
      key: 0,
      isEnlarge: false
    }
  },
  watch: {
    resultInfos: {
任超 committed
49
      handler: function (val) {
xiaomiao committed
50 51 52 53 54 55 56 57 58 59
        ++this.key
        this.resultInfo =
          this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
        this.tmpResultInfo = this.resultInfo
      },
      deep: true,
      immediate: true
    }
  },

任超 committed
60
  mounted () {
xiaomiao committed
61 62 63 64 65
    this.resultInfo =
      this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
  },

  methods: {
任超 committed
66
    onJsonChange (value) {
xiaomiao committed
67 68 69
      // 只有在格式正确的时候进入此事件
      this.hasJsonFlag = true
    },
任超 committed
70
    onJsonSave () {
xiaomiao committed
71 72 73 74 75 76 77 78 79 80 81 82
      const value = this.resultInfo
      console.log(this.resultInfo, 'resultInfo')
      if (this.hasJsonFlag === false) {
        this.$message.error({ message: 'json格式验证失败', showClose: true })
        // alert("json验证失败")
        return false
      } else {
        this.dialogVisible = false
        this.$emit('getJsonString', JSON.stringify(value))
        return true
      }
    },
任超 committed
83
    onError (value) {
xiaomiao committed
84 85
      this.hasJsonFlag = false
    },
任超 committed
86
    openDialog () {
xiaomiao committed
87 88
      this.dialogVisible = true
    },
任超 committed
89
    cancel () {
xiaomiao committed
90 91 92 93 94
      console.log(this.tmpResultInfo, 'tmpResultInfo')
      this.resultInfo = this.tmpResultInfo
      this.dialogVisible = false
    },
    // 放大
任超 committed
95
    enLarge () {
xiaomiao committed
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
      const fullarea = document.getElementById('minejson')
      if (fullarea.requestFullscreen) {
        fullarea.requestFullscreen()
      } else if (fullarea.webkitRequestFullScreen) {
        fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等)
      } else if (fullarea.mozRequestFullScreen) {
        fullarea.mozRequestFullScreen() // moz内核(firefox)
      } else if (fullarea.msRequestFullscreen) {
        fullarea.msRequestFullscreen() // IE11、edge
      }
      this.isEnlarge = true
    }
  }
}
</script>

<style scoped lang="scss">
/* jsoneditor右上角默认有一个链接,加css去掉了 */
.iconfont {
  cursor: pointer;
  position: relative;
  top: 1px;
  color: #349af3;
}
任超 committed
120

xiaomiao committed
121 122 123
::v-deep .jsoneditor-vue {
  height: 100%;
}
任超 committed
124

xiaomiao committed
125 126 127 128 129 130 131
.fullScreen {
  position: absolute;
  right: 5%;
  top: 22%;
  cursor: pointer;
  color: #fff;
}
任超 committed
132

xiaomiao committed
133 134 135
::v-deep .jsoneditor-modes {
  display: none !important;
}
任超 committed
136

xiaomiao committed
137 138 139
.jsoneditor-poweredBy {
  display: none !important;
}
任超 committed
140

xiaomiao committed
141 142 143 144
.jsoneditor-menu {
  background-color: #9c9e9f !important;
  border-bottom: 1px solid #9c9e9f !important;
}
任超 committed
145

xiaomiao committed
146 147 148
.jsoneditor {
  border: 1px solid #9c9e9f !important;
}
任超 committed
149

xiaomiao committed
150 151 152
.el-collapse {
  border: 0;
}
任超 committed
153

xiaomiao committed
154 155 156 157
.el-collapse-item__header {
  height: 44px;
}
</style>