feat: 封装json editor组件

package.json

@@ -58,6 +58,7 @@
     "vue-cookie": "^1.1.4",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-i18n": "^8.15.5",
+    "vue-json-editor": "^1.4.3",
     "vue-moment": "^4.1.0",
     "vue-password-strength-meter": "^1.7.2",
     "vue-router": "3.0.6",

src/components/FormFields/JsonEditor.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="json-editor">
+    <JsonEditor
+      v-model="resultInfo"
+      :show-btns="false"
+      :mode="'code'"
+      @json-change="onJsonChange"
+      @json-save="onJsonSave"
+      @has-error="onError"
+    />
+  </div>
+</template>
+
+<script>
+import JsonEditor from 'vue-json-editor'
+
+export default {
+  components: { JsonEditor },
+  props: {
+    value: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      hasJsonFlag: true, // json是否验证通过
+      resultInfo: {}
+    }
+  },
+  created() {
+    this.resultInfo = JSON.parse(this.value)
+  },
+  methods: {
+    // 数据改变
+    onJsonChange(value) {
+      this.onJsonSave(value)
+    },
+    // 保存
+    onJsonSave(value) {
+      this.resultInfo = value
+      this.hasJsonFlag = true
+      setTimeout(() => {
+        this.$emit('change', JSON.stringify(this.resultInfo))
+      }, 500)
+    },
+    onError: _.debounce(function(value) {
+      this.$message.error(this.$t('common.FormatError'))
+    }, 1100)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .json-editor {
+    &>>> .jsoneditor {
+      border: 1px solid #e5e6e7;
+    }
+    &>>> .jsoneditor-compact {
+      display: none;
+    }
+    &>>> .jsoneditor-modes {
+      display: none;
+    }
+    &>>> .jsoneditor-poweredBy {
+      display: none;
+    }
+    &>>> .jsoneditor-menu {
+      background: #1ab394;
+      border-bottom: 1px solid #1ab394;
+    }
+  }
+</style>

src/components/FormFields/index.js

@@ -8,6 +8,7 @@ import UploadKey from './UploadKey'
 import UserPassword from './UserPassword'
 import WeekCronSelect from './WeekCronSelect'
 import UpdateToken from './UpdateToken'
+import JsonEditor from './JsonEditor'
 
 export default {
   DatetimeRangePicker,
@@ -19,7 +20,8 @@ export default {
   UploadField,
   UserPassword,
   WeekCronSelect,
-  UpdateToken
+  UpdateToken,
+  JsonEditor
 }
 
 export {
@@ -32,5 +34,6 @@ export {
   UploadField,
   UserPassword,
   WeekCronSelect,
-  UpdateToken
+  UpdateToken,
+  JsonEditor
 }

src/i18n/langs/cn.json

@@ -445,6 +445,7 @@
     "lastCannotBeDeleteMsg": "最后一项，不能被删除",
     "InvalidJson": "不是合法 JSON",
     "time_period": "时段",
+    "FormatError": "格式错误",
     "WeekCronSelect": {
       "Monday": "星期一",
       "Tuesday": "星期二",

src/i18n/langs/en.json

@@ -468,6 +468,7 @@
       "failedConditions": "cron expression error"
     },
     "Cycle": "Cycle",
+    "FormatError": "Format error",
     "WeekCronSelect": {
       "Monday": "Monday",
       "Tuesday": "Tuesday",

src/views/settings/Auth/CAS.vue

@@ -11,6 +11,8 @@
 <script>
 import BaseAuth from './Base'
 import { JsonRequired } from '@/components/DataForm/rules'
+import { JsonEditor } from '@/components/FormFields'
+
 export default {
   name: 'Cas',
   components: {
@@ -36,10 +38,7 @@ export default {
         ],
         fieldsMeta: {
           CAS_RENAME_ATTRIBUTES: {
-            component: 'el-input',
-            el: {
-              type: 'textarea'
-            },
+            component: JsonEditor,
             label: this.$t('setting.authUserAttrMap'),
             rules: [JsonRequired]
           }

src/views/settings/Auth/SAML2.vue

@@ -12,6 +12,8 @@
 import BaseAuth from './Base'
 import { JsonRequired } from '@/components/DataForm/rules'
 import { UploadKey } from '@/components'
+import { JsonEditor } from '@/components/FormFields'
+
 export default {
   name: 'SAML2',
   components: {
@@ -54,11 +56,7 @@ export default {
             label: this.$t('setting.authSAML2Xml')
           },
           SAML2_SP_ADVANCED_SETTINGS: {
-            component: 'el-input',
-            el: {
-              type: 'textarea',
-              rows: 3
-            },
+            component: JsonEditor,
             label: this.$t('setting.authSAML2AdvancedSettings'),
             rules: [JsonRequired]
           },
@@ -69,10 +67,7 @@ export default {
             component: UploadKey
           },
           SAML2_RENAME_ATTRIBUTES: {
-            component: 'el-input',
-            el: {
-              type: 'textarea'
-            },
+            component: JsonEditor,
             label: this.$t('setting.authUserAttrMap'),
             rules: [JsonRequired],
             helpText: this.$t('setting.authUserAttrMapHelpText')

src/views/settings/Ldap/index.vue

@@ -13,7 +13,7 @@ import TestLoginDialog from './TestLoginDialog'
 import { IBox } from '@/components'
 import rules from '@/components/DataForm/rules'
 import { JsonRequired } from '@/components/DataForm/rules'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken, JsonEditor } from '@/components/FormFields'
 
 export default {
   name: 'Ldap',
@@ -62,10 +62,7 @@ export default {
           ]
         },
         AUTH_LDAP_USER_ATTR_MAP: {
-          component: 'el-input',
-          el: {
-            type: 'textarea'
-          },
+          component: JsonEditor,
           label: this.$t('setting.authLdapUserAttrMap'),
           rules: [JsonRequired]
         }