From f416cfa435b4e6eefa41685f7ec9f19259e4e11b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C=E6=80=80=E7=A3=8A=E2=80=9D?= <2280131253@qq.com>
Date: Tue, 14 Dec 2021 11:30:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85json=20editor?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |  1 +
 src/components/FormFields/JsonEditor.vue | 73 ++++++++++++++++++++++++
 src/components/FormFields/index.js       |  7 ++-
 src/i18n/langs/cn.json                   |  1 +
 src/i18n/langs/en.json                   |  1 +
 src/views/settings/Auth/CAS.vue          |  7 +--
 src/views/settings/Auth/SAML2.vue        | 13 ++---
 src/views/settings/Ldap/index.vue        |  7 +--
 8 files changed, 90 insertions(+), 20 deletions(-)
 create mode 100644 src/components/FormFields/JsonEditor.vue

diff --git a/package.json b/package.json
index 617ce96ed..bb5f32208 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/FormFields/JsonEditor.vue b/src/components/FormFields/JsonEditor.vue
new file mode 100644
index 000000000..c6fa8d167
--- /dev/null
+++ b/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>
diff --git a/src/components/FormFields/index.js b/src/components/FormFields/index.js
index d7b0744be..fa49bde31 100644
--- a/src/components/FormFields/index.js
+++ b/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
 }
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index c4406a959..c4e174f46 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -445,6 +445,7 @@
     "lastCannotBeDeleteMsg": "最后一项，不能被删除",
     "InvalidJson": "不是合法 JSON",
     "time_period": "时段",
+    "FormatError": "格式错误",
     "WeekCronSelect": {
       "Monday": "星期一",
       "Tuesday": "星期二",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 1dcf4072e..b50a2c49c 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -468,6 +468,7 @@
       "failedConditions": "cron expression error"
     },
     "Cycle": "Cycle",
+    "FormatError": "Format error",
     "WeekCronSelect": {
       "Monday": "Monday",
       "Tuesday": "Tuesday",
diff --git a/src/views/settings/Auth/CAS.vue b/src/views/settings/Auth/CAS.vue
index 07c4cd260..3d99d0501 100644
--- a/src/views/settings/Auth/CAS.vue
+++ b/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]
           }
diff --git a/src/views/settings/Auth/SAML2.vue b/src/views/settings/Auth/SAML2.vue
index a3f5f9334..7df33edd2 100644
--- a/src/views/settings/Auth/SAML2.vue
+++ b/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')
diff --git a/src/views/settings/Ldap/index.vue b/src/views/settings/Ldap/index.vue
index 2ac70b483..aa887a478 100644
--- a/src/views/settings/Ldap/index.vue
+++ b/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]
         }