refractor：重构设备配置里的LWM2M TB修改了数据格式

+<template>
+  <div style="margin-left: -5vw">
+    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerServer" />
+  </div>
+</template>
+<script setup lang="ts">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { serverSchemas } from '../index';
+
+  const [registerServer, { getFieldsValue, setFieldsValue }] = useForm({
+    labelWidth: 180,
+    schemas: serverSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+  });
+  //回显表单值
+  const editBootStrapFormFunc = (v) => {
+    setFieldsValue(v);
+  };
+
+  const getBootStrapFormFunc = () => {
+    const value = getFieldsValue();
+    if (!value) return;
+    return value;
+  };
+  defineExpose({
+    getBootStrapFormFunc,
+    editBootStrapFormFunc,
+  });
+</script>
+<style lang="less" scoped></style>

@@ -45,268 +45,6 @@ export const modelSchemas: FormSchema[] = [
   },
 ];
 
-export const serverSchemas: FormSchema[] = [
-  //servers
-  {
-    field: 'shortId',
-    component: 'InputNumber',
-    label: 'Short ID',
-    required: true,
-    defaultValue: 123,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'lifetime',
-    component: 'InputNumber',
-    label: '客户端注册生存期',
-    required: true,
-    defaultValue: 300,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'defaultMinPeriod',
-    component: 'InputNumber',
-    label: '两次通知之间的最短期限',
-    required: true,
-    defaultValue: 1,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'binding',
-    component: 'Select',
-    label: 'Binding',
-    defaultValue: 'UQ',
-    componentProps: {
-      options: [
-        {
-          label: 'U: UDP connection in standard mode',
-          value: 'U',
-        },
-        {
-          label: 'UQ: UDP connection in queue mode',
-          value: 'UQ',
-        },
-        {
-          label: 'T: TCP connection in standard mode',
-          value: 'T',
-        },
-        {
-          label: 'TQ: TCP connection in queue mode',
-          value: 'TQ',
-        },
-        {
-          label: 'S: SMS connection in standard mode',
-          value: 'S',
-        },
-        {
-          label: 'SQ: SMS connection in queue mode',
-          value: 'SQ',
-        },
-        {
-          label: 'US: both UDP and SMS connections active, both in standard mode',
-          value: 'US',
-        },
-        {
-          label: 'TS: both TCP and SMS connections active, both in standard mode',
-          value: 'TS',
-        },
-        {
-          label:
-            'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode',
-          value: 'UQS',
-        },
-        {
-          label:
-            'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode',
-          value: 'TQS',
-        },
-      ],
-    },
-    colProps: { span: 11 },
-  },
-  {
-    field: 'notifIfDisabled',
-    label: '启用',
-    colProps: { span: 22 },
-    component: 'Checkbox',
-    defaultValue: true,
-    renderComponentContent: '禁用或脱机时的通知存储',
-  },
-  //servers
-  //Bootstrap Server
-  {
-    field: 'securityMode',
-    component: 'Select',
-    label: '配置模式',
-    defaultValue: 'NO_SEC',
-    componentProps: {
-      options: [
-        {
-          label: 'No Security',
-          value: 'NO_SEC',
-        },
-        {
-          label: 'Pre-Shared Key',
-          value: 'PSK',
-        },
-        {
-          label: 'Raw Public Key',
-          value: 'RPK',
-        },
-        {
-          label: 'X.509 Certificate',
-          value: 'X509',
-        },
-      ],
-    },
-    colProps: { span: 8 },
-  },
-  {
-    field: 'host',
-    component: 'Input',
-    label: 'Host',
-    required: true,
-    defaultValue: 'localhost',
-    colProps: { span: 8 },
-  },
-  {
-    field: 'port',
-    component: 'InputNumber',
-    label: 'Port',
-    required: true,
-    defaultValue: 5687,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverId',
-    component: 'InputNumber',
-    label: 'Short ID',
-    required: true,
-    defaultValue: 111,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'clientHoldOffTime',
-    component: 'InputNumber',
-    label: '拖延时间',
-    required: true,
-    defaultValue: 1,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'bootstrapServerAccountTimeout2',
-    component: 'InputNumber',
-    label: '超时后的帐户',
-    required: true,
-    defaultValue: 0,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverPublicKey',
-    component: 'InputTextArea',
-    label: '服务器公钥',
-    required: true,
-    defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
-    39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
-    colProps: { span: 22 },
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    ifShow: ({ values }) =>
-      isCertificate(Reflect.get(values, 'securityMode')) ||
-      isPawPublicKey(Reflect.get(values, 'securityMode')),
-  },
-  //Bootstrap Server
-  //LwM2M Server
-  {
-    field: 'securityMode1',
-    component: 'Select',
-    label: '配置模式',
-    defaultValue: 'NO_SEC',
-    componentProps: {
-      options: [
-        {
-          label: 'No Security',
-          value: 'NO_SEC',
-        },
-        {
-          label: 'Pre-Shared Key',
-          value: 'PSK',
-        },
-        {
-          label: 'Raw Public Key',
-          value: 'RPK',
-        },
-        {
-          label: 'X.509 Certificate',
-          value: 'X509',
-        },
-      ],
-    },
-    colProps: { span: 8 },
-  },
-  {
-    field: 'host1',
-    component: 'Input',
-    label: 'Host',
-    required: true,
-    defaultValue: 'localhost',
-    colProps: { span: 8 },
-  },
-  {
-    field: 'port1',
-    component: 'InputNumber',
-    label: 'Port',
-    required: true,
-    defaultValue: 5685,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverId1',
-    component: 'InputNumber',
-    label: 'Short ID',
-    required: true,
-    defaultValue: 123,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'clientHoldOffTime1',
-    component: 'InputNumber',
-    label: '拖延时间',
-    required: true,
-    defaultValue: 1,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'bootstrapServerAccountTimeout1',
-    component: 'InputNumber',
-    label: '超时后的帐户',
-    required: true,
-    defaultValue: 0,
-    colProps: { span: 8 },
-  },
-  {
-    field: 'serverPublicKey1',
-    component: 'InputTextArea',
-    label: '服务器公钥',
-    required: true,
-    defaultValue: `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0
-    c39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`,
-    colProps: { span: 22 },
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    ifShow: ({ values }) =>
-      isCertificate(Reflect.get(values, 'securityMode1')) ||
-      isPawPublicKey(Reflect.get(values, 'securityMode1')),
-  },
-  //LwM2M Server
-];
-
 export const settingsSchemas: FormSchema[] = [
   {
     field: 'fwUpdateStrategy',
@@ -556,3 +294,169 @@ export const deviceSchemas: FormSchema[] = [
     `,
   },
 ];
+
+export const serverSchemas: FormSchema[] = [
+  {
+    field: 'securityMode',
+    component: 'Select',
+    label: '安全配置模式',
+    defaultValue: 'NO_SEC',
+    componentProps: {
+      options: [
+        {
+          label: 'No Security',
+          value: 'NO_SEC',
+        },
+        {
+          label: 'Pre-Shared Key',
+          value: 'PSK',
+        },
+        {
+          label: 'Raw Public Key',
+          value: 'RPK',
+        },
+        {
+          label: 'X.509 Certificate',
+          value: 'X509',
+        },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'shortServerId',
+    component: 'InputNumber',
+    label: '短服务器ID',
+    required: true,
+    defaultValue: 123,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'host',
+    component: 'Input',
+    label: '主机',
+    required: true,
+    defaultValue: '0.0.0.0',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'port',
+    component: 'Input',
+    label: '端口',
+    required: true,
+    defaultValue: 5685,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'clientHoldOffTime',
+    component: 'InputNumber',
+    label: '延迟时间',
+    required: true,
+    defaultValue: 1,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'bootstrapServerAccountTimeout',
+    component: 'InputNumber',
+    label: '超时后的帐户',
+    required: true,
+    defaultValue: 0,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'lifetime',
+    component: 'InputNumber',
+    label: '注册生存期',
+    required: true,
+    defaultValue: 300,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'defaultMinPeriod',
+    component: 'InputNumber',
+    label: '两次通知之间的最小周期',
+    required: true,
+    defaultValue: 1,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'binding',
+    component: 'Select',
+    label: 'Binding',
+    defaultValue: 'UQ',
+    componentProps: {
+      options: [
+        {
+          label: 'U: Client is reachable via the UDP binding at any time.',
+          value: 'U',
+        },
+        {
+          label: 'M: Client is reachable via the MQTT binding at any time.',
+          value: 'M',
+        },
+        {
+          label: 'H: Client is reachable via the HTTP binding at any time.',
+          value: 'H',
+        },
+        {
+          label: 'T: Client is reachable via the TCP binding at any time.',
+          value: 'T',
+        },
+        {
+          label: 'S: Client is reachable via the SMS binding at any time.',
+          value: 'S',
+        },
+        {
+          label:
+            'N: Client MUST send the response to such a request over the Non-IP binding (is supported since LWM',
+          value: 'N',
+        },
+        {
+          label: 'UQ: UDP connection in queue mode (is not supported since LWM2M 1.1)',
+          value: 'UQ',
+        },
+        {
+          label:
+            'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)',
+          value: 'UQS',
+        },
+        {
+          label: 'TQ: TCP connection in queue mode (is not supported since LWM2M 1.1)',
+          value: 'TQ:',
+        },
+        {
+          label:
+            'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)	',
+          value: 'TQS',
+        },
+        {
+          label: 'SQ: SMS connection in queue mode (is not supported since LWM2M 1.1)',
+          value: 'SQ',
+        },
+      ],
+    },
+    colProps: { span: 11 },
+  },
+  {
+    field: 'notifIfDisabled',
+    label: '是否启用',
+    colProps: { span: 22 },
+    component: 'Checkbox',
+    defaultValue: true,
+    renderComponentContent: '禁用或脱机时的通知存储',
+  },
+  {
+    field: 'serverPublicKey',
+    component: 'InputTextArea',
+    label: '服务器公钥',
+    required: true,
+    colProps: { span: 22 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入服务器公钥',
+    },
+    ifShow: ({ values }) =>
+      isCertificate(Reflect.get(values, 'securityMode')) ||
+      isPawPublicKey(Reflect.get(values, 'securityMode')),
+  },
+];

@@ -6,21 +6,39 @@
       :animated="true"
       @change="handleChange"
     >
-      <TabPane key="1" tab="LWM2M Model">
+      <TabPane forceRender key="1" tab="LWM2M Model">
         <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerModel" />
       </TabPane>
-      <TabPane key="2" tab="Servers">
-        <div style="display: flex; width: 43vw; border: 1px solid gray; border-radius: 5px">
-          <div style="margin-left: -4.6vw; margin-top: 1.5vh">
-            <BasicForm
-              :showResetButton="false"
-              :showSubmitButton="false"
-              @register="registerServer"
-            />
+      <TabPane forceRender key="2" tab="Bootstrap">
+        <div>
+          <Checkbox v-model:checked="bootstrapServerUpdateEnable">包括引导服务器更新</Checkbox>
+          <Card
+            v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
+            :key="item"
+            title="LwM2M Server"
+            style="width: 99%; margin-top: 2vh"
+          >
+            <template #extra>
+              <Button size="small" type="dashed" @click="handleRemove(index)">
+                <template #icon>
+                  <MinusCircleOutlined />
+                </template>
+              </Button>
+            </template>
+            <!-- BootStrapForm表单项 -->
+            <BootStrapForm :ref="dynamicBindRef.BootStrapFormItemRef" :index="index" :item="item" />
+          </Card>
+          <div style="margin-top: 2vh">
+            <Button size="middle" type="dashed" @click="handleAdd">
+              <template #icon>
+                <PlusCircleOutlined />
+              </template>
+              Add LwM2M Server
+            </Button>
           </div>
         </div>
       </TabPane>
-      <TabPane key="3" tab="Other settings">
+      <TabPane forceRender key="3" tab="Other settings">
         <div
           style="
             display: flex;
@@ -39,7 +57,7 @@
           </div>
         </div>
       </TabPane>
-      <TabPane key="4" tab="Json Config Profile Device">
+      <TabPane forceRender key="4" tab="Json Config Profile Device">
         <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerDevice" />
       </TabPane>
     </Tabs>
@@ -47,10 +65,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
-  import { Tabs } from 'ant-design-vue';
+  import { defineComponent, ref, reactive, nextTick, unref } from 'vue';
+  import { Tabs, Card } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modelSchemas, serverSchemas, settingsSchemas, deviceSchemas } from './index';
+  import { modelSchemas, settingsSchemas, deviceSchemas } from './index';
+  import BootStrapForm from './cpns/BootStrapForm.vue';
+  import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
+  import { Button, Checkbox } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'index',
@@ -58,18 +79,26 @@
       Tabs,
       TabPane: Tabs.TabPane,
       BasicForm,
+      BootStrapForm,
+      MinusCircleOutlined,
+      Card,
+      PlusCircleOutlined,
+      Button,
+      Checkbox,
     },
     setup() {
+      const bootstrapServerUpdateEnable = ref(false);
+      const dynamicBOOTSTRAP: any = reactive({
+        bootstrap: [{}],
+      });
+      const dynamicBindRef: any = {
+        BootStrapFormItemRef: ref([]),
+      };
       const currentKey = ref('1');
       const currentSize = ref('large');
       let allObj: any = reactive({});
       let allEchoObj: any = reactive({});
       let allEchoStatus = ref(false);
-      let bootstrapObj = reactive({
-        servers: {},
-        bootstrapServer: {},
-        lwm2mServer: {},
-      });
       let clientLwM2mSettingsObj = reactive({});
       let observeAttrObj = reactive({
         attribute: [],
@@ -90,20 +119,6 @@
         },
       });
       const [
-        registerServer,
-        {
-          resetFields: resetServerValue,
-          validate: serverValidate,
-          setFieldsValue: serverSetFieldsValueFunc,
-        },
-      ] = useForm({
-        labelWidth: 180,
-        schemas: serverSchemas,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-      const [
         registerSettings,
         {
           resetFields: resetSettingsValue,
@@ -126,6 +141,12 @@
           },
         });
 
+      const handleAdd = () => {
+        dynamicBOOTSTRAP.bootstrap.push({});
+      };
+      const handleRemove = (index) => {
+        dynamicBOOTSTRAP.bootstrap.splice(index, 1);
+      };
       const handleChange = (e) => {
         if (allEchoStatus.value) {
           switch (e) {
@@ -133,36 +154,14 @@
               break;
             case '2':
               nextTick(() => {
-                serverSetFieldsValueFunc({
-                  //servers
-                  binding: allEchoObj?.bootstrap?.servers?.binding,
-                  shortId: allEchoObj?.bootstrap?.servers?.shortId,
-                  lifetime: allEchoObj?.bootstrap?.servers?.lifetime,
-                  notifIfDisabled: allEchoObj?.bootstrap?.servers?.notifIfDisabled,
-                  defaultMinPeriod: allEchoObj?.bootstrap?.servers?.defaultMinPeriod,
-                  bootstrapServerAccountTimeout:
-                    allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
-                  //servers
-                  //lwm2mServer
-                  host1: allEchoObj?.bootstrap?.lwm2mServer?.host,
-                  port1: allEchoObj?.bootstrap?.lwm2mServer?.port,
-                  serverId1: allEchoObj?.bootstrap?.lwm2mServer?.serverId,
-                  securityMode1: allEchoObj?.bootstrap?.lwm2mServer?.securityMode,
-                  serverPublicKey1: allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey,
-                  clientHoldOffTime1: allEchoObj?.bootstrap?.lwm2mServer?.clientHoldOffTime,
-                  bootstrapServerAccountTimeout1:
-                    allEchoObj?.bootstrap?.lwm2mServer?.bootstrapServerAccountTimeout,
-                  //lwm2mServer
-                  //bootstrapServer
-                  host: allEchoObj?.bootstrap?.bootstrapServer?.host,
-                  port: allEchoObj?.bootstrap?.bootstrapServer?.port,
-                  serverId: allEchoObj?.bootstrap?.bootstrapServer?.serverId,
-                  securityMode: allEchoObj?.bootstrap?.bootstrapServer?.securityMode,
-                  serverPublicKey: allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey,
-                  clientHoldOffTime: allEchoObj?.bootstrap?.bootstrapServer?.clientHoldOffTime,
-                  bootstrapServerAccountTimeout2:
-                    allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
-                  //bootstrapServer
+                bootstrapServerUpdateEnable.value = allEchoObj.bootstrapServerUpdateEnable;
+                dynamicBOOTSTRAP.bootstrap = allEchoObj.bootstrap;
+                dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => {
+                  nextTick(() => {
+                    unref(dynamicBindRef.BootStrapFormItemRef)[index]?.editBootStrapFormFunc(
+                      bootstrap
+                    );
+                  });
                 });
               });
               break;
@@ -196,43 +195,22 @@
           allEchoStatus.value = true;
         }
       };
+      const tempBootStrap: any = [];
+      const getBootStrapFormValue = () => {
+        //获取BootStrap的值
+        unref(dynamicBindRef.BootStrapFormItemRef)?.map((item: any) =>
+          tempBootStrap.push(item.getBootStrapFormFunc())
+        );
+      };
 
       const getDataFunc = async () => {
         const objectListVal = getObjectListValue();
         const deviceVal = getDeviceValue();
         console.log('第一个tab', objectListVal);
         console.log('第四个tab', deviceVal);
-        const serverVal = await serverValidate();
+        getBootStrapFormValue();
         const settingsVal = await settingsValidate();
-        if (!serverVal) return;
         if (!settingsVal) return;
-        Reflect.set(bootstrapObj.servers, 'binding', serverVal.binding);
-        Reflect.set(bootstrapObj.servers, 'shortId', serverVal.shortId);
-        Reflect.set(bootstrapObj.servers, 'lifetime', serverVal.lifetime);
-        Reflect.set(bootstrapObj.servers, 'notifIfDisabled', serverVal.notifIfDisabled);
-        Reflect.set(bootstrapObj.servers, 'defaultMinPeriod', serverVal.defaultMinPeriod);
-        Reflect.set(bootstrapObj.bootstrapServer, 'serverId', serverVal.serverId);
-        Reflect.set(bootstrapObj.bootstrapServer, 'host', serverVal.host);
-        Reflect.set(bootstrapObj.bootstrapServer, 'port', serverVal.port);
-        Reflect.set(bootstrapObj.bootstrapServer, 'securityMode', serverVal.securityMode);
-        Reflect.set(bootstrapObj.bootstrapServer, 'serverPublicKey', serverVal.serverPublicKey);
-        Reflect.set(bootstrapObj.bootstrapServer, 'clientHoldOffTime', serverVal.clientHoldOffTime);
-        Reflect.set(
-          bootstrapObj.servers,
-          'bootstrapServerAccountTimeout',
-          serverVal.bootstrapServerAccountTimeout2
-        );
-        Reflect.set(bootstrapObj.lwm2mServer, 'serverId', serverVal.serverId1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'host', serverVal.host1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'port', serverVal.port1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'securityMode', serverVal.securityMode1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'serverPublicKey', serverVal.serverPublicKey1);
-        Reflect.set(bootstrapObj.lwm2mServer, 'clientHoldOffTime', serverVal.clientHoldOffTime1);
-        Reflect.set(
-          bootstrapObj.lwm2mServer,
-          'bootstrapServerAccountTimeout',
-          serverVal.bootstrapServerAccountTimeout1
-        );
         delete settingsVal.unit;
         delete settingsVal.unit2;
         clientLwM2mSettingsObj = {
@@ -243,8 +221,9 @@
             clientLwM2mSettings: clientLwM2mSettingsObj,
           },
           ...{
-            bootstrap: bootstrapObj,
+            bootstrap: tempBootStrap,
           },
+          ...{ bootstrapServerUpdateEnable: bootstrapServerUpdateEnable.value },
           ...{
             observeAttr: observeAttrObj,
           },
@@ -257,7 +236,6 @@
         allEchoStatus.value = false;
         nextTick(() => {
           resetObjectListValue();
-          resetServerValue();
           resetSettingsValue();
           resetDeviceValue();
         });
@@ -267,13 +245,17 @@
         currentKey,
         currentSize,
         registerModel,
-        registerServer,
         registerSettings,
         registerDevice,
         getDataFunc,
         setStepFieldsValueFunc,
         handleChange,
         resetStepFieldsValueFunc,
+        dynamicBOOTSTRAP,
+        dynamicBindRef,
+        handleAdd,
+        handleRemove,
+        bootstrapServerUpdateEnable,
       };
     },
   });