feat：pc端 设备新增命令下发和引入json-editor-vue3

@@ -48,6 +48,7 @@
     "echarts": "^5.1.2",
     "hls.js": "^1.0.10",
     "intro.js": "^4.1.0",
+    "json-editor-vue3": "^1.0.6",
     "jsoneditor": "^9.7.2",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",

@@ -655,19 +655,7 @@ export const CommandSchemas: FormSchema[] = [
   {
     field: 'commandValue',
     label: '请输入命令内容',
-    defaultValue: `{
-        method: 'setGpio',
-        params: {
-        pin: 7,
-        value: 1
-        }
-}`,
+    slot: 'commandSlot',
     component: 'InputTextArea',
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-        autoSize: true,
-      },
-    },
   },
 ];

 <template>
   <div class="tabs-detail">
     <div class="mt-4">
-      <BasicForm @register="registerForm" />
+      <BasicForm @register="registerForm">
+        <template #commandSlot>
+          <JsonEditorVue class="editor" v-model="jsonData" @blur="jsonValidate" />
+        </template>
+      </BasicForm>
       <div>
         <Button :disabled="disable" type="primary" @click="handleOk" class="mr-2">确定</Button>
         <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
@@ -16,9 +20,10 @@
   import { commandIssuanceApi } from '/@/api/device/deviceManager';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Button } from '/@/components/Button';
+  import JsonEditorVue from 'json-editor-vue3';
 
   export default defineComponent({
-    components: { BasicForm, Button },
+    components: { BasicForm, Button, JsonEditorVue },
     props: {
       deviceDetail: {
         type: Object,
@@ -27,14 +32,21 @@
     },
     emits: ['register'],
     setup(props) {
-      const disable = ref(false);
-      const commandValueStr = JSON.stringify({
+      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) return createMessage.error('请填写正确的命令下发json数据格式');
+      };
+      const disable = ref(false);
       const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
         labelWidth: 100,
         schemas: CommandSchemas,
@@ -50,18 +62,16 @@
       };
       const handleOk = async () => {
         disable.value = true;
-        const { createMessage } = useMessage();
         // 验证
         const valid = await validate();
         if (!valid) return;
         // 收集表单数据
         const field = getFieldsValue();
-        const commandValue = JSON.parse(commandValueStr);
-        commandValue.persistent = true;
-        commandValue.additionalInfo = {
+        jsonData.value.persistent = true;
+        jsonData.value.additionalInfo = {
           cmdType: 'API',
         };
-        commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, commandValue)
+        commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, jsonData.value)
           .then((res) => {
             if (!res) return;
             createMessage.success('命令下发成功');
@@ -85,6 +95,8 @@
         handleCancel,
         handleOk,
         disable,
+        jsonData,
+        jsonValidate,
       };
     },
   });