feat：pc端 设备新增命令下发

@@ -3,7 +3,12 @@
     <div class="mt-4">
       <BasicForm @register="registerForm">
         <template #commandSlot>
-          <JsonEditorVue class="editor" v-model="jsonData" @blur="jsonValidate" language="zh" />
+          <div class="flex">
+            <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
+            <Tooltip title='{"method":"setGpio","params":{"pin":7,"value":1}}' class="ml-2">
+              <QuestionCircleOutlined style="font-size: 1rem" />
+            </Tooltip>
+          </div>
         </template>
       </BasicForm>
       <div>
@@ -14,16 +19,19 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, onMounted, unref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { CommandSchemas } from '../../config/data';
   import { commandIssuanceApi } from '/@/api/device/deviceManager';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Button } from '/@/components/Button';
-  import JsonEditorVue from 'json-editor-vue3';
+  import jsoneditor from 'jsoneditor';
+  import 'jsoneditor/dist/jsoneditor.min.css';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
 
   export default defineComponent({
-    components: { BasicForm, Button, JsonEditorVue },
+    components: { BasicForm, Button, QuestionCircleOutlined, Tooltip },
     props: {
       deviceDetail: {
         type: Object,
@@ -33,19 +41,7 @@
     emits: ['register'],
     setup(props) {
       const { createMessage } = useMessage();
-      const jsonData: any = ref({
-        method: 'setGpio',
-        params: {
-          pin: 7,
-          value: 1,
-        },
-      });
-      const jsonValidate = async (editor) => {
-        const res = await editor.validate();
-        // res 是错误列表，如果是空数组，则表示检测没有错误
-        // console.log(res);
-        if (res.length !== 0) createMessage.error('请填写正确的命令下发json数据格式');
-      };
+      const jsonData: any = ref({});
       const disable = ref(false);
       const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
         labelWidth: 100,
@@ -57,6 +53,23 @@
           span: 12,
         },
       });
+      // json 以及初始化JSON
+      const jsoneditorRef = ref();
+      const jsonValue = ref({});
+      const jsonInstance = ref();
+      onMounted(() => {
+        nextTick(() => {
+          let options = {
+            mode: 'code',
+            mainMenuBar: false,
+            statusBar: false,
+          };
+          let editor = new jsoneditor(jsoneditorRef.value, options);
+          editor.set(jsonValue.value);
+          jsonInstance.value = editor;
+        });
+      });
+
       const handleCancel = () => {
         resetFields();
       };
@@ -67,6 +80,7 @@
         if (!valid) return;
         // 收集表单数据
         const field = getFieldsValue();
+        jsonData.value = unref(jsonInstance).get();
         jsonData.value.persistent = true;
         jsonData.value.additionalInfo = {
           cmdType: 'API',
@@ -96,9 +110,16 @@
         handleOk,
         disable,
         jsonData,
-        jsonValidate,
+        jsoneditorRef,
+        jsonValue,
+        jsonInstance,
       };
     },
   });
 </script>
-<style lang="less" scoped></style>
+<style scoped>
+  .jsoneditor-transform {
+    background-position: -144px -96px;
+    display: none !important;
+  }
+</style>