perf: DEFECT-1219 优化命令下发界面

@@ -3,24 +3,32 @@ import { Rule } from '/@/components/Form';
 export { default as JSONEditor } from './index.vue';
 
 export const parseStringToJSON = <T = Recordable>(value: string) => {
+  let valid = false;
   try {
     const json = JSON.parse(value) as T;
-    return { json, valid: true };
+    typeof json === 'object' ? (valid = true) : (valid = false);
+    return { json, valid };
   } catch (error) {
-    return { json: null, valid: false };
+    return { json: null, valid };
   }
 };
 
-export const JSONEditorValidator = (message = 'json格式校验失败'): Rule[] => {
+export const JSONEditorValidator = (
+  message = 'JSON格式校验失败',
+  noEmpty = false,
+  emptyMessage = 'JSON不能为空对象'
+): Rule[] => {
   return [
     {
       validateTrigger: 'blur',
       validator(_rule: Rule, value: any, _callback: Fn) {
-        const { valid } = parseStringToJSON(value);
+        const { valid, json } = parseStringToJSON(value);
         if (valid) {
+          if (noEmpty && json && !Object.keys(json).length) return Promise.reject(emptyMessage);
           return Promise.resolve();
+        } else {
+          return Promise.reject(message);
         }
-        return Promise.reject(message);
       },
     },
   ];

@@ -18,6 +18,7 @@
     defineProps<{
       value?: string;
       options?: JSONEditorOptions;
+      height?: number;
     }>(),
     {
       options: () =>
@@ -26,6 +27,7 @@
           mainMenuBar: false,
           statusBar: false,
         } as JSONEditorOptions),
+      height: 150,
     }
   );
 
@@ -106,7 +108,7 @@
 </script>
 
 <template>
-  <div class="p-2 bg-gray-200">
+  <div class="p-2 bg-gray-200" :style="{ height: `${height - 16}px` }">
     <div ref="jsonEditorElRef" class="jsoneditor"></div>
   </div>
 </template>

-import { FormSchema } from '/@/components/Form';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { deviceProfile, getGatewayDevice } from '/@/api/device/deviceManager';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { TransportTypeEnum } from '../../profiles/components/TransportDescript/const';
+import { JSONEditorValidator } from '/@/components/CodeEditor/src/JSONEditor';
+import { JSONEditor } from '/@/components/CodeEditor';
+useComponentRegister('JSONEditor', JSONEditor);
 
 export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
@@ -762,6 +765,7 @@ export const CommandSchemas = (transportType: TransportTypeEnum): FormSchema[] =
           minRows: 6,
         },
       },
+      colProps: { span: 20 },
       dynamicRules: () => {
         return [
           {
@@ -781,11 +785,17 @@ export const CommandSchemas = (transportType: TransportTypeEnum): FormSchema[] =
     {
       field: 'commandValue',
       label: '请输入命令内容',
-      slot: 'commandSlot',
-      component: 'InputTextArea',
-      show: ({ model }) => {
+      component: 'JSONEditor',
+      colProps: { span: 20 },
+      changeEvent: 'update:value',
+      valueField: 'value',
+      rules: [...JSONEditorValidator()],
+      ifShow: ({ model }) => {
         return model['valueType'] === 'json';
       },
+      componentProps: {
+        height: 250,
+      },
     },
   ];
 };

 <template>
   <div class="tabs-detail">
-    <div class="mt-4">
-      <BasicForm @register="registerForm">
-        <template #commandSlot>
-          <div class="flex">
-            <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
-            <a-button style="margin: -5px 0" type="text" @click="handlePremitter">格式化</a-button>
-            <Tooltip title='{"method":"methodThingskit","params":{"pin":7,"value":1}}' class="ml-2">
-              <QuestionCircleOutlined style="font-size: 1rem" />
-            </Tooltip>
-          </div>
-        </template>
-      </BasicForm>
-      <Space class="w-full justify-end" justify="end">
-        <Button :disabled="disable" type="primary" @click="handleOk" class="mr-2">确定</Button>
+    <div>
+      <BasicForm @register="registerForm" />
+      <Space class="w-full justify-end py-2" justify="end">
+        <Button :loading="loading" type="primary" @click="handleOk" class="mr-2">确定</Button>
         <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
       </Space>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, onMounted, unref, nextTick } from 'vue';
+  import { defineComponent, ref } 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 jsoneditor from 'jsoneditor';
-  import 'jsoneditor/dist/jsoneditor.min.css';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-  import { Space, Tooltip } from 'ant-design-vue';
+  import { Space } from 'ant-design-vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { TransportTypeEnum } from '../../../profiles/components/TransportDescript/const';
-
-  interface CommandParams {
-    additionalInfo: Recordable;
-    cmdType: string;
-    method: string;
-    params: string | Recordable;
-    persistent: boolean;
-  }
+  import { parseStringToJSON } from '/@/components/CodeEditor/src/JSONEditor';
 
   export default defineComponent({
-    components: { BasicForm, Button, QuestionCircleOutlined, Tooltip, Space },
+    components: { BasicForm, Button, Space },
     props: {
       deviceDetail: {
         type: Object as PropType<DeviceRecord>,
@@ -52,8 +32,7 @@
     emits: ['register'],
     setup(props) {
       const { createMessage } = useMessage();
-      const jsonData = ref<CommandParams>({} as unknown as CommandParams);
-      const disable = ref(false);
+      const loading = ref(false);
 
       const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
         labelWidth: 120,
@@ -63,78 +42,35 @@
         labelAlign: 'right',
         showSubmitButton: false,
         showResetButton: false,
-        wrapperCol: {
-          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 handlePremitter = () => {
-        const value = unref(jsonInstance).get();
-        if (!value) return;
-        return unref(jsonInstance).set(value);
-      };
+
       const handleCancel = () => {
         resetFields();
-        unref(jsonInstance).set({});
       };
+
       const handleOk = async () => {
-        disable.value = true;
+        loading.value = true;
         try {
           // 验证
           const valid = await validate();
           if (!valid) return;
           // 收集表单数据
           const field = getFieldsValue();
-          let passStatus = false;
+          let command = {
+            persistent: true,
+            method: 'methodThingskit',
+            params: field.commandText,
+          };
           if (field.valueType === 'json') {
-            const getJson = unref(jsonInstance).get();
-            if (Object.prototype.isPrototypeOf(getJson) && Object.keys(getJson).length === 0) {
-              createMessage.error('命令内容不能为空');
-              passStatus = true;
-            }
-            if (getJson === '') {
-              passStatus = true;
-              createMessage.error('命令内容不能为空');
-            }
-            jsonData.value.params = getJson;
-          } else {
-            jsonData.value.params = field.commandText;
-            if (!jsonData.value.params) {
-              createMessage.error('命令内容不能为空');
-              passStatus = true;
-            }
-            if (
-              jsonData.value.params == '""' ||
-              jsonData.value.params == "''" ||
-              jsonData.value.params == '“”'
-            ) {
-              createMessage.error('命令内容不能为空');
-              passStatus = true;
-            }
+            const { json } = parseStringToJSON(field.commandValue);
+            command.params = json;
           }
-          jsonData.value.persistent = true;
-          jsonData.value.method = 'methodThingskit';
-          if (passStatus) return;
-          commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, jsonData.value)
+
+          commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, command)
             .then((res) => {
               if (!res) return;
               createMessage.success('命令下发成功');
-              disable.value = true;
+              loading.value = true;
               // 请求
               handleCancel();
             })
@@ -146,25 +82,20 @@
             })
             .finally(() => {
               setTimeout(() => {
-                disable.value = false;
+                loading.value = false;
               }, 300);
             });
         } catch (e) {
+          throw e;
         } finally {
-          //这里捕获json插件的错误
-          disable.value = false;
+          loading.value = false;
         }
       };
       return {
         registerForm,
         handleCancel,
         handleOk,
-        disable,
-        jsonData,
-        jsoneditorRef,
-        jsonValue,
-        jsonInstance,
-        handlePremitter,
+        loading,
       };
     },
   });

@@ -21,11 +21,11 @@
 
   <BasicModal
     @register="registerCommandIssuanceModal"
-    width="600px"
+    width="700px"
     title="命令下发"
     :showOkBtn="false"
     cancelText="关闭"
-    :footer="h('div')"
+    :footer="null"
   >
     <CommandIssuance :deviceDetail="deviceDetail" />
   </BasicModal>