From fe905721bd955b1dd6ed92b3a3ead2ecbbf7b842 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 15:05:13 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=91=E4=BF=AE=E5=A4=8D=20jsonEditor=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=9B=9E=E6=98=BE=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JsonEditor/src/JsonEditor.vue  |  6 +--
 .../device/detail/DeviceDetailConfig.vue      | 37 ++++++-------------
 2 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/components/JsonEditor/src/JsonEditor.vue b/src/components/JsonEditor/src/JsonEditor.vue
index 19077aeb..ef14a106 100644
--- a/src/components/JsonEditor/src/JsonEditor.vue
+++ b/src/components/JsonEditor/src/JsonEditor.vue
@@ -41,9 +41,9 @@ const initJsonEditor = () => {
     navigationBar: props.showNavigationBar,
     statusBar: props.showStatusBar,
     mainMenuBar: props.showMainMenuBar,
-    onChangeJSON: (json: any) => {
-      jsonObj.value = json
-      emits('change', json)
+    onChange: () => {
+      jsonObj.value = jsonEditor?.get()
+      emits('change', jsonEditor?.get())
     },
     onValidationError: (errors: any) => {
       emits('error', errors)
diff --git a/src/views/iot/device/device/detail/DeviceDetailConfig.vue b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
index 13906b57..431a1150 100644
--- a/src/views/iot/device/device/detail/DeviceDetailConfig.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
@@ -8,24 +8,10 @@
       class="my-4"
       description="如需编辑文件，请点击下方编辑按钮"
     />
-
-    <!-- JSON 编辑器：读模式 -->
-    <Vue3Jsoneditor
-      v-if="isEditing"
+    <JsonEditor
       v-model="config"
-      :options="editorOptions"
-      height="500px"
-      currentMode="code"
-      @error="onError"
-    />
-    <!-- JSON 编辑器：写模式 -->
-    <Vue3Jsoneditor
-      v-else
-      v-model="config"
-      :options="editorOptions"
-      height="500px"
-      currentMode="view"
-      v-loading.fullscreen.lock="loading"
+      :mode="isEditing ? 'code' : 'view'"
+      height="600px"
       @error="onError"
     />
     <div class="mt-5 text-center">
@@ -40,9 +26,11 @@
 </template>
 
 <script lang="ts" setup>
-import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
 import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { jsonParse } from '@/utils'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'DeviceDetailConfig' })
 
 const props = defineProps<{
   device: DeviceVO
@@ -63,12 +51,6 @@ watchEffect(() => {
 })
 
 const isEditing = ref(false) // 编辑状态
-const editorOptions = computed(() => ({
-  mainMenuBar: false,
-  navigationBar: false,
-  statusBar: false
-})) // JSON 编辑器的选项
-
 /** 启用编辑模式的函数 */
 const enableEdit = () => {
   isEditing.value = true
@@ -112,8 +94,11 @@ const updateDeviceConfig = async () => {
 }
 
 /** 处理 JSON 编辑器错误的函数 */
-const onError = (e: any) => {
-  console.log('onError', e)
+const onError = (errors: any) => {
+  if (isEmpty(errors)) {
+    hasJsonError.value = false
+    return
+  }
   hasJsonError.value = true
 }
 </script>