feat:新增告警配置功能，refractor:重构设备配值第二步,feat:新增设备列表跳转设备配置分页查询

+import { defHttp } from '/@/utils/http/axios';
+import type {
+  ContactPageParams,
+  ContactModal,
+  ContactParams,
+  ContactInfo,
+  ConfigPageParams,
+} from './model/alarmContactModal';
+import { getPageData } from '../../base';
+import { DeviceModel, DeviceQueryParam } from '../../device/model/deviceModel';
+enum API {
+  alarmContact = '/alarmContact',
+  updateAlarmContact = '/alarm/profile',
+  devicePage = '/device',
+  deleteAlarmConfig = '/alarm/profile',
+  getAlarmConfig = '/alarm/profile',
+  getAlarmConfigStatus = '/alarm/profile',
+}
+
+// 获取
+export const getAlarmContact = (params: ContactPageParams) => {
+  return getPageData<ContactModal>(params, API.alarmContact);
+};
+
+// 新增
+export const addAlarmContact = (params: ContactParams) => {
+  return defHttp.post({
+    url: API.alarmContact,
+    data: params,
+  });
+};
+
+// 更新
+export const updateAlarmContact = (params: ContactParams) => {
+  return defHttp.post({
+    url: API.updateAlarmContact,
+    data: params,
+  });
+};
+
+// 删除
+export const deleteAlarmContact = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.alarmContact,
+    data: ids,
+  });
+};
+
+// 查询设备分页数据
+export const devicePage = (params: DeviceQueryParam) => {
+  return defHttp.get<DeviceModel>({
+    url: API.devicePage,
+    params,
+  });
+};
+
+// 新增或者编辑告警配置
+export const saveOrEditAlarmConfig = (params: ContactInfo) => {
+  return defHttp.post({
+    url: API.updateAlarmContact,
+    data: params,
+  });
+};
+
+/**
+ * 删除告警配置
+ */
+export const deleteAlarmConfig = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.deleteAlarmConfig,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+/**
+ * 告警配置分页
+ */
+
+export const queryAlarmConfig = (params: ConfigPageParams) => {
+  return defHttp.get<ConfigPageParams>({
+    url: API.getAlarmConfig,
+    params,
+  });
+};
+
+/**
+ * 告警配置状态
+ */
+export const putAlarmConfigStatus = (status?: number, alarmProfileId?: string) =>
+  defHttp.get({
+    url: API.getAlarmConfigStatus + '/' + alarmProfileId + '/' + status,
+  });

+import { BasicPageParams } from '/@/api/model/baseModel';
+
+interface ContactItemsModal {
+  id: string;
+  createTime: string;
+  enabled: boolean;
+  username: string;
+  department: string;
+  phone: string;
+}
+export type ContactPageParams = BasicPageParams & { username: string; organizationId: string };
+export type ConfigPageParams = BasicPageParams & {
+  status: number;
+  organizationId: string;
+  name: string;
+  orderFiled: string;
+  orderType: string;
+};
+
+export interface ContactModal {
+  items: ContactItemsModal[];
+  total: number;
+}
+
+export interface ContactParams {
+  alarmContactId: string;
+  messageMode: string;
+  name: string;
+  organizationId: string;
+  remark?: string;
+}
+
+export type ContactInfo = ContactParams;

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref, reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { saveOrEditAlarmConfig } from '/@/api/alarm/config/alarmConfig';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'ContactDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+      let allData: any = reactive({});
+      const editId = ref('');
+
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (data.record?.id) {
+          editId.value = data.record?.id;
+        }
+        if (unref(isUpdate)) {
+          if (data.record.organizationDTO) {
+            await setFieldsValue(data.record);
+          } else {
+            await setFieldsValue(data.record);
+            await setFieldsValue({
+              alarmContactId: data.record?.alarmContactId.split(','),
+              messageMode: data.record?.messageMode.split(','),
+            });
+          }
+        } else {
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增告警配置' : '编辑告警配置'));
+
+      async function handleSubmit() {
+        try {
+          const { createMessage } = useMessage();
+          const values = await validate();
+          if (!values) return;
+          const alarmContactIdD = {
+            alarmContactId: values.alarmContactId.join(','),
+          };
+          const messageModeD = {
+            messageMode: values.messageMode.join(','),
+          };
+          const editIdVal = !unref(isUpdate) ? '' : editId.value;
+
+          allData = {
+            ...{ id: editIdVal },
+            ...values,
+            ...alarmContactIdD,
+            ...messageModeD,
+          };
+          if (!unref(isUpdate)) {
+            delete allData.id;
+          }
+          setDrawerProps({ confirmLoading: true });
+          let saveMessage = '添加成功';
+          let updateMessage = '修改成功';
+          await saveOrEditAlarmConfig(allData);
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        getTitle,
+        registerDrawer,
+        registerForm,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
+import { Switch } from 'ant-design-vue';
+import { h } from 'vue';
+import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '告警配置名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationName',
+    width: 160,
+  },
+  {
+    title: '告警通知联系人',
+    dataIndex: 'alarmContactId',
+    width: 160,
+    slots: { customRender: 'alarmContact' },
+  },
+  {
+    title: '告警联系方式',
+    dataIndex: 'messageMode',
+    width: 160,
+    slots: { customRender: 'messageMode' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.status === 1,
+        checkedChildren: '配置',
+        unCheckedChildren: '未配置',
+        loading: record.pendingStatus,
+        onChange(checked: boolean) {
+          record.pendingStatus = true;
+          const newStatus = checked ? 1 : 0;
+          const { createMessage } = useMessage();
+          putAlarmConfigStatus(newStatus, record.id)
+            .then(() => {
+              record.status = newStatus;
+              if (record.status == 1) {
+                createMessage.success(`配置成功`);
+              } else {
+                createMessage.error('未配置成功');
+              }
+            })
+            .finally(() => {
+              record.pendingStatus = false;
+            });
+        },
+      });
+    },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 180,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '告警配置名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入告警配置名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '告警配置状态',
+    component: 'Select',
+    colProps: { span: 8 },
+    componentProps: {
+      options: [
+        {
+          label: '已配置',
+          value: 1,
+        },
+        {
+          label: '未配置',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择告警配置状态',
+    },
+  },
+];
+
+// 弹框配置项
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '告警配置名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入告警配置名称',
+      maxLength: 30,
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    component: 'ApiTreeSelect',
+    // required: true,
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    field: 'alarmContactId',
+    label: '告警通知联系人',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: {
+      mode: 'multiple',
+      placeholder: '请选择告警通知联系人',
+      api: alarmContactGetPage,
+      labelField: 'username',
+      valueField: 'id',
+      resultField: 'items',
+    },
+  },
+  {
+    field: 'messageMode',
+    label: '告警通知方式',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: {
+      mode: 'multiple',
+      placeholder: '请选择告警通知方式',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'message_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+      maxLength: 255,
+    },
+  },
+];

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree
+        class="w-1/4 xl:w-1/5"
+        @select="handleSelect"
+        ref="organizationIdTreeRef"
+      />
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-3/4 xl:w-4/5">
+        <template #toolbar>
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增告警配置 </a-button>
+          <a-button
+            type="primary"
+            color="error"
+            @click="handleDeleteOrBatchDelete(null)"
+            :disabled="hasBatchDelete"
+          >
+            批量删除
+          </a-button>
+        </template>
+        <template #alarmContact="{ record }">
+          <a-button type="link" class="ml-2" @click="showAlarmContact(record)">
+            查看告警联系人
+          </a-button>
+        </template>
+        <template #messageMode="{ record }">
+          <a-button type="link" class="ml-2" @click="showMessageMode(record)">
+            查看告警联系方式
+          </a-button>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                icon: 'clarity:note-edit-line',
+                onClick: handleCreateOrEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed, h } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { PageWrapper } from '/@/components/Page';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDrawer } from '/@/components/Drawer';
+  import ContactDrawer from './ContactDrawer.vue';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { deleteAlarmConfig, queryAlarmConfig } from '/@/api/alarm/config/alarmConfig';
+  import { searchFormSchema, columns } from './config.data';
+  import { Modal } from 'ant-design-vue';
+  import { JsonPreview } from '/@/components/CodeEditor';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
+
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      OrganizationIdTree,
+      BasicTable,
+      TableAction,
+      ContactDrawer,
+    },
+    setup() {
+      let selectedRowIds = ref<string[]>([]);
+      const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
+      // 复选框事件
+      const onSelectRowChange = (selectedRowKeys: string[]) => {
+        selectedRowIds.value = selectedRowKeys;
+      };
+      const searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      // 表格hooks
+      const [registerTable, { reload }] = useTable({
+        title: '告警配置列表',
+        api: queryAlarmConfig,
+        columns,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          resetFunc: resetFn,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowSelection: {
+          onChange: onSelectRowChange,
+          type: 'checkbox',
+        },
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+      // 删除或批量删除
+      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
+        if (record) {
+          try {
+            await deleteAlarmConfig([record.id]);
+            createMessage.success('删除成功');
+            handleSuccess();
+          } catch (e) {
+            createMessage.error('删除失败');
+          }
+        } else {
+          try {
+            await deleteAlarmConfig(selectedRowIds.value);
+            createMessage.success('批量删除成功');
+            selectedRowIds.value = [];
+            handleSuccess();
+          } catch (e) {
+            createMessage.info('删除失败');
+          }
+        }
+      };
+
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+      const showAlarmContact = async (record) => {
+        const { items } = await alarmContactGetPage();
+        const joinArray = record.alarmContactId.split(',');
+        let findName = [];
+        findName = items.map((m) => {
+          return {
+            username: m.username,
+            id: m.id,
+          };
+        });
+        let arr3 = findName.filter((obj: any) => joinArray.some((obj1) => obj1 == obj.id));
+        let arr4 = arr3
+          .map((m: any) => {
+            return m.username;
+          })
+          .join();
+        Modal.info({
+          title: '当前告警通知联系人',
+          width: 600,
+          content: h(JsonPreview, { data: JSON.parse(JSON.stringify(arr4)) }),
+        });
+      };
+      const showMessageMode = async (record) => {
+        const data1: any = await findDictItemByCode({ dictCode: 'message_type' });
+        const joinArray = record.messageMode.split(',');
+        let findName = [];
+        findName = data1.map((m: any) => {
+          return {
+            itemValue: m.itemValue,
+            itemText: m.itemText,
+          };
+        });
+        let arr3 = findName.filter((obj: any) => joinArray.some((obj1) => obj1 == obj.itemValue));
+        let arr4 = arr3
+          .map((m: any) => {
+            return m.itemText;
+          })
+          .join();
+        Modal.info({
+          title: '当前告警联系方式',
+          width: 600,
+          content: h(JsonPreview, { data: JSON.parse(JSON.stringify(arr4)) }),
+        });
+      };
+      return {
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        registerTable,
+        registerDrawer,
+        organizationIdTreeRef,
+        showAlarmContact,
+        showMessageMode,
+      };
+    },
+  });
+</script>

@@ -133,13 +133,9 @@
         }
         current.value++;
         if (isUpdate.value == 2) {
-          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(
-            editData.value?.profileData.transportConfiguration
-          );
+          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
         } else if (isUpdate.value == 3) {
-          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(
-            editData.value?.profileData.transportConfiguration
-          );
+          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
         }
       }
       const handleSubmit = async () => {

@@ -19,7 +19,7 @@
         <TableAction
           :actions="[
             {
-              label: '设置为默认',
+              label: '设置默认',
               icon: 'ant-design:profile-outlined',
               onClick: handleSetDefault.bind(null, record),
               ifShow: () => {
@@ -62,7 +62,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, reactive } from 'vue';
+  import { defineComponent, ref, reactive, nextTick, onUnmounted } from 'vue';
   import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
   import { columns, searchFormSchema } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -85,11 +85,12 @@
       const getPathUrl = ref('');
       const getPathUrlName = ref('');
       const disabled = ref(true);
+      const onCloseVal = ref(0);
 
       const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerModalDetail] = useModal();
-      const [registerTable, { reload, getSelectRowKeys }] = useTable({
+      const [registerTable, { reload, getSelectRowKeys, setTableData, getForm }] = useTable({
         title: '设备配置列表',
         clickToRowSelect: false,
         api: deviceConfigGetQuery,
@@ -131,12 +132,33 @@
       const getName = getParam(getPathUrl.value, name);
       getPathUrlName.value = decodeURIComponent(getName);
 
-      // const setRowClassName = (record) => {
-      //   if (record.name === getPathUrlName.value) {
-      //     return 'rowcolor2';
-      //   }
-      // };
+      const setRowClassName = async () => {
+        if (getPathUrlName.value !== '') {
+          const { items } = await deviceConfigGetQuery({
+            page: 1,
+            pageSize: 10,
+            name: getPathUrlName.value,
+          });
+          nextTick(() => {
+            setTableData(items);
+            const { setFieldsValue, resetFields } = getForm();
+            setFieldsValue({
+              name: getPathUrlName.value,
+            });
+            if (onCloseVal.value == 1) {
+              resetFields();
+            }
+          });
+        }
+      };
+      setTimeout(() => {
+        setRowClassName();
+      }, 500);
 
+      onUnmounted(() => {
+        getPathUrlName.value = '';
+        onCloseVal.value = 1;
+      });
       const tableListRef = ref<
         {
           title: string;
@@ -263,7 +285,6 @@
         handleSetDefault,
         disabled,
         deviceDetailRef,
-        // setRowClassName,
         registerModalDetail,
         // register1,
         // defaultHeader,

 <template>
-  <div class="step2">
-    <div class="step2-style">
-      <div style="margin-top: 0.8vh; margin-left: 2.8vw; overflow: scroll">
-        <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
-        <div
-          style="
-            display: flex;
-            width: 11vw;
-            height: 8vh;
-            flex-direction: row;
-            justify-content: space-between;
-            margin-left: 17vw;
-            margin-top: -4vh;
-          "
-        >
-          <div style="display: flex; width: 4vw; height: 4vh; margin-top: -2.35vh">
-            <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
-              >上一步</Button
-            >
-          </div>
+  <div class="step2-style">
+    <div style="margin-top: 0.1vh; overflow: scroll">
+      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
+      <div v-if="isMqttType == 'MQTT'">
+        <MqttCpns ref="mqttRef" />
+      </div>
+      <div v-else-if="isMqttType == 'COAP'">
+        <CoapCpns ref="coapRef" />
+      </div>
+      <div
+        style="
+          display: flex;
+          width: 11vw;
+          height: 8vh;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-left: 19vw;
+          margin-top: -0.35vh;
+        "
+      >
+        <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh">
+          <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
+            >上一步</Button
+          >
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive } from 'vue';
+  import { defineComponent, watch, reactive, ref, getCurrentInstance } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step2Schemas } from './data';
+  import { step2Schemas, isChangeType } from './data';
   import { Alert, Divider, Descriptions } from 'ant-design-vue';
   import { Button } from '/@/components/Button';
+  import MqttCpns from '../step/cpns/mqtt/Mqtt.vue';
+  import CoapCpns from '../step/cpns/coap/Coap.vue';
 
   export default defineComponent({
     components: {
@@ -39,36 +45,19 @@
       [Descriptions.name]: Descriptions,
       [Descriptions.Item.name]: Descriptions.Item,
       Button,
+      MqttCpns,
+      CoapCpns,
     },
     emits: ['next', 'prev', 'register'],
     setup(_, { emit }) {
-      const transportData: any = reactive({
-        transportConfiguration: {
-          clientSettings: {
-            powerMode: null,
-            edrxCycle: null,
-            pagingTransmissionWindow: null,
-            psmActivityTimer: null,
-          },
-          coapDeviceTypeConfiguration: {
-            coapDeviceType: null,
-          },
-          deviceTelemetryTopic: null,
-          deviceAttributesTopic: null,
-          transportPayloadTypeConfiguration: {
-            transportPayloadType: null,
-            enableCompatibilityWithJsonPayloadFormat: false,
-            useJsonPayloadFormatForDefaultDownlinkTopics: false,
-            deviceAttributesProtoSchema: null,
-            deviceRpcRequestProtoSchema: null,
-            deviceRpcResponseProtoSchema: null,
-            deviceTelemetryProtoSchema: null,
-          },
-          type: null,
-        },
+      const { proxy } = getCurrentInstance() as any;
+      const mqttRef = ref(null);
+      const coapRef = ref(null);
+      const isMqttType = ref('');
+      let step2Data = reactive({
+        transportConfiguration: {},
       });
-
-      const [register, { validate, setFieldsValue, resetFields }] = useForm({
+      const [register, { validate, resetFields, setFieldsValue }] = useForm({
         labelWidth: 80,
         schemas: step2Schemas,
         actionColOptions: {
@@ -76,69 +65,35 @@
         },
       });
       const setStepTwoFieldsValueFunc = (v) => {
-        console.log(v);
         setFieldsValue({
-          transportType: v?.type || v?.transportConfiguration.type,
-          transportPayloadType:
-            v?.transportPayloadTypeConfiguration?.transportPayloadType ||
-            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration?.transportPayloadType,
-          deviceTelemetryTopic: v?.deviceTelemetryTopic,
-          deviceAttributesTopic: v?.deviceAttributesTopic,
-          enableCompatibilityWithJsonPayloadFormat:
-            v?.transportPayloadTypeConfiguration?.enableCompatibilityWithJsonPayloadFormat,
-          useJsonPayloadFormatForDefaultDownlinkTopics:
-            v?.transportPayloadTypeConfiguration?.useJsonPayloadFormatForDefaultDownlinkTopics,
-          deviceAttributesProtoSchema:
-            v?.transportPayloadTypeConfiguration?.deviceAttributesProtoSchema,
-          deviceRpcRequestProtoSchema:
-            v?.transportPayloadTypeConfiguration?.deviceRpcRequestProtoSchema,
-          deviceRpcResponseProtoSchema:
-            v?.transportPayloadTypeConfiguration?.deviceRpcResponseProtoSchema,
-          deviceTelemetryProtoSchema:
-            v?.transportPayloadTypeConfiguration?.deviceTelemetryProtoSchema,
-          powerMode: v?.clientSettings?.powerMode,
-          edrxCycle: v?.clientSettings?.edrxCycle,
-          pagingTransmissionWindow: v?.clientSettings?.pagingTransmissionWindow,
-          psmActivityTimer: v?.clientSettings?.psmActivityTimer,
-          coapDeviceType: v?.coapDeviceTypeConfiguration?.coapDeviceType,
+          transportType: v?.profileData?.transportConfiguration?.type,
         });
+        isMqttType.value = v?.profileData?.transportConfiguration?.type;
+        setTimeout(() => {
+          proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
+          proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
+        }, 100);
       };
       const customClearStepTwoValueFunc = () => {
+        isMqttType.value = 'other';
         resetFields();
       };
       async function customResetFunc() {
         emit('prev');
       }
+      watch(isChangeType, async (v) => {
+        isMqttType.value = v;
+      });
       const getStep2DataFunc = async () => {
         const val = await validate();
         if (!val) return;
-        transportData.transportConfiguration.deviceTelemetryTopic = val.deviceTelemetryTopic;
-        transportData.transportConfiguration.deviceAttributesTopic = val.deviceAttributesTopic;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.transportPayloadType =
-          val.transportPayloadType;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
-          val.enableCompatibilityWithJsonPayloadFormat;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =
-          val.useJsonPayloadFormatForDefaultDownlinkTopics;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
-          val.enableCompatibilityWithJsonPayloadFormat;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
-          val.deviceAttributesProtoSchema;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
-          val.deviceRpcRequestProtoSchema;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
-          val.deviceRpcResponseProtoSchema;
-        transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
-          val.deviceTelemetryProtoSchema;
-        transportData.transportConfiguration.type = val.transportType;
-        transportData.transportConfiguration.clientSettings.powerMode = val.powerMode;
-        transportData.transportConfiguration.clientSettings.edrxCycle = val.edrxCycle;
-        transportData.transportConfiguration.clientSettings.psmActivityTimer = val.psmActivityTimer;
-        transportData.transportConfiguration.clientSettings.pagingTransmissionWindow =
-          val.pagingTransmissionWindow;
-        transportData.transportConfiguration.coapDeviceTypeConfiguration.coapDeviceType =
-          val.coapDeviceType;
-        return transportData;
+        const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();
+        const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();
+        step2Data.transportConfiguration = {
+          ...getMqttVal,
+          ...getCoapVal,
+        };
+        return step2Data;
       };
       return {
         customResetFunc,
@@ -146,21 +101,19 @@
         setStepTwoFieldsValueFunc,
         customClearStepTwoValueFunc,
         getStep2DataFunc,
+        isMqttType,
+        mqttRef,
+        coapRef,
       };
     },
   });
 </script>
 <style lang="less" scoped>
-  .step2 {
-    width: 100%;
-    .step2-style {
-      width: 43vw;
-      // height: 50vh;
-      border: 1px solid gray;
-      margin: 0vh 0.6vw;
-      border-radius: 4px;
-    }
+  .step2-style {
+    margin: 0vh 0.6vw;
+    border-radius: 4px;
   }
+
   ::-webkit-scrollbar {
     display: none;
   }

+import { FormSchema } from '/@/components/Form';
+
+enum EnumType {
+  IS_DEFAULT = 'DEFAULT',
+  IS_MQTT = 'MQTT',
+  IS_PROTOBUF = 'PROTOBUF',
+  IS_COAP = 'COAP',
+  IS_LWM2M = 'LWM2M',
+  IS_SNMP = 'SNMP',
+  IS_PSM = 'PSM',
+  IS_DRX = 'E_DRX',
+  IS_EFENTO_NBIOT = 'EFENTO',
+}
+
+const isProtobuf = (type: string) => {
+  return type === EnumType.IS_PROTOBUF;
+};
+
+const isPsm = (type: string) => {
+  return type === EnumType.IS_PSM;
+};
+
+const isDrx = (type: string) => {
+  return type === EnumType.IS_DRX;
+};
+
+const isEfentoNb = (type: string) => {
+  return type === EnumType.IS_EFENTO_NBIOT;
+};
+
+export const CoapSchemas: FormSchema[] = [
+  {
+    field: 'coapDeviceType',
+    component: 'Select',
+    label: 'CoAP类型',
+    defaultValue: 'DEFAULT',
+    componentProps: {
+      options: [
+        { label: '默认', value: 'DEFAULT' },
+        { label: 'Efento NB-IoT', value: 'EFENTO' },
+      ],
+    },
+    colProps: { span: 11 },
+  },
+  {
+    field: 'transportPayloadType',
+    component: 'Select',
+    label: '设备消息',
+    defaultValue: 'JSON',
+    componentProps: {
+      options: [
+        { label: 'JSON', value: 'JSON' },
+        { label: 'PROTOBUF', value: 'PROTOBUF' },
+      ],
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => !isEfentoNb(values.coapDeviceType),
+  },
+  {
+    field: 'powerMode',
+    component: 'Select',
+    label: 'Power Mode',
+    defaultValue: 'DRX',
+    componentProps: {
+      options: [
+        { label: 'Power Saving Mode', value: 'PSM' },
+        { label: 'Discontinuous Reception', value: 'DRX' },
+        {
+          label: 'Extended Discontinuous Reception',
+          value: 'E_DRX',
+        },
+      ],
+    },
+    colProps: { span: 22 },
+  },
+  {
+    field: 'psmActivityTimer',
+    component: 'InputNumber',
+    label: 'Timer',
+    required: true,
+    defaultValue: '10',
+    componentProps: {
+      placeholder: '请输入PSM Activity Timer',
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => isPsm(values.powerMode),
+  },
+  {
+    field: 'unit1',
+    component: 'Select',
+    label: '时间单位',
+    defaultValue: 'second',
+    componentProps: {
+      options: [
+        { label: 'Milliseconds', value: 'Milliseconds' },
+        { label: '秒', value: 'second' },
+        { label: '分钟', value: 'minute' },
+        { label: '小时', value: 'hour' },
+      ],
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => isPsm(values.powerMode),
+  },
+  {
+    field: 'edrxCycle',
+    component: 'InputNumber',
+    label: 'eDRX cycle',
+    required: true,
+    defaultValue: '81',
+    componentProps: {
+      placeholder: '请输入PSM Activity Timer',
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => isDrx(values.powerMode),
+  },
+  {
+    field: 'unit2',
+    component: 'Select',
+    label: '时间单位',
+    defaultValue: 'second',
+    componentProps: {
+      options: [
+        { label: 'Milliseconds', value: 'Milliseconds' },
+        { label: '秒', value: 'second' },
+        { label: '分钟', value: 'minute' },
+        { label: '小时', value: 'hour' },
+      ],
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => isDrx(values.powerMode),
+  },
+  {
+    field: 'pagingTransmissionWindow',
+    component: 'InputNumber',
+    label: 'Paging',
+    required: true,
+    defaultValue: '10',
+    componentProps: {
+      placeholder: '请输入Paging Transmission Window',
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => isDrx(values.powerMode),
+  },
+  {
+    field: 'unit',
+    component: 'Select',
+    label: '时间单位',
+    defaultValue: 'second',
+    componentProps: {
+      options: [
+        { label: 'Milliseconds', value: 'Milliseconds' },
+        { label: '秒', value: 'second' },
+        { label: '分钟', value: 'minute' },
+        { label: '小时', value: 'hour' },
+      ],
+    },
+    colProps: { span: 11 },
+    ifShow: ({ values }) => isDrx(values.powerMode),
+  },
+  {
+    field: 'deviceTelemetryProtoSchema',
+    label: '遥测数据',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package telemetry;
+
+    message SensorDataReading {
+      optional double temperature = 1;
+      optional double humidity = 2;
+      InnerObject innerObject = 3;
+      message InnerObject {
+        optional string key1 = 1;
+        optional bool key2 = 2;
+        optional double key3 = 3;
+        optional int32 key4 = 4;
+        optional string key5 = 5;
+      }
+    }
+    `,
+    ifShow: ({ values }) =>
+      isProtobuf(values.transportPayloadType) && !isEfentoNb(values.coapDeviceType),
+  },
+  {
+    field: 'deviceAttributesProtoSchema',
+    label: 'Attributes',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package attributes;
+
+    message SensorConfiguration {
+      optional string firmwareVersion = 1;
+      optional string serialNumber = 2;
+    }
+    `,
+    ifShow: ({ values }) =>
+      isProtobuf(values.transportPayloadType) && !isEfentoNb(values.coapDeviceType),
+  },
+  {
+    field: 'deviceRpcRequestProtoSchema',
+    label: 'RPC 请求 ',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package rpc;
+    
+    message RpcRequestMsg {
+      optional string method = 1;
+      optional int32 requestId = 2;
+      optional string params = 3;
+    }
+    `,
+    ifShow: ({ values }) =>
+      isProtobuf(values.transportPayloadType) && !isEfentoNb(values.coapDeviceType),
+  },
+  {
+    field: 'deviceRpcResponseProtoSchema',
+    label: 'RPC 响应',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package rpc;
+    
+    message RpcResponseMsg {
+      optional string payload = 1;
+    }
+    `,
+    ifShow: ({ values }) =>
+      isProtobuf(values.transportPayloadType) && !isEfentoNb(values.coapDeviceType),
+  },
+];

+<template>
+  <div
+    style="
+      margin-top: -5vh;
+      padding-left: 1.5vw;
+      border: 1px solid gray;
+      margin-left: 0.1vw;
+      border-radius: 5px;
+    "
+  >
+    <div style="margin-top: 1.2vh">
+      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { CoapSchemas } from './Coap';
+  import { Alert, Divider, Descriptions } from 'ant-design-vue';
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+
+    emits: ['next', 'prev', 'register'],
+    setup(_, { emit }) {
+      let coapAllData = reactive({});
+      const transportCoapData: any = reactive({
+        coapDeviceTypeConfiguration: {
+          coapDeviceType: null,
+          transportPayloadTypeConfiguration: {
+            transportPayloadType: null,
+            deviceTelemetryProtoSchema: null,
+            deviceAttributesProtoSchema: null,
+            deviceRpcRequestProtoSchema: null,
+            deviceRpcResponseProtoSchema: null,
+          },
+        },
+        clientSettings: {
+          powerMode: null,
+          edrxCycle: null,
+          pagingTransmissionWindow: null,
+          psmActivityTimer: null,
+        },
+        type: 'COAP',
+      });
+
+      const [register, { validate, resetFields, setFieldsValue }] = useForm({
+        labelWidth: 80,
+        schemas: CoapSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+      const setStepFieldsValueFunc = (v) => {
+        setFieldsValue({
+          coapDeviceType: v?.coapDeviceTypeConfiguration?.coapDeviceType,
+          transportPayloadType:
+            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration?.transportPayloadType,
+          powerMode: v?.clientSettings.powerMode,
+          psmActivityTimer: v.clientSettings?.psmActivityTimer,
+          edrxCycle: v?.clientSettings.edrxCycle,
+          pagingTransmissionWindow: v.clientSettings?.pagingTransmissionWindow,
+          deviceTelemetryProtoSchema:
+            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
+              ?.deviceTelemetryProtoSchema,
+          deviceAttributesProtoSchema:
+            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
+              ?.deviceAttributesProtoSchema,
+          deviceRpcRequestProtoSchema:
+            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
+              ?.deviceRpcRequestProtoSchema,
+          deviceRpcResponseProtoSchema:
+            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
+              ?.deviceRpcResponseProtoSchema,
+        });
+      };
+      const customClearStepTwoValueFunc = () => {
+        resetFields();
+      };
+      async function customResetFunc() {
+        emit('prev');
+      }
+      const getDataFunc = async () => {
+        const val = await validate();
+        if (!val) return;
+        transportCoapData.coapDeviceTypeConfiguration.coapDeviceType = val.coapDeviceType;
+        transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.transportPayloadType =
+          val.transportPayloadType;
+        transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
+          val.deviceTelemetryProtoSchema;
+        transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
+          val.deviceAttributesProtoSchema;
+        transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
+          val.deviceRpcRequestProtoSchema;
+        transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
+          val.deviceRpcResponseProtoSchema;
+        transportCoapData.clientSettings.powerMode = val.powerMode;
+        transportCoapData.clientSettings.edrxCycle = val.edrxCycle;
+        transportCoapData.clientSettings.pagingTransmissionWindow = val.pagingTransmissionWindow;
+        transportCoapData.clientSettings.psmActivityTimer = val.psmActivityTimer;
+        coapAllData = {
+          ...transportCoapData,
+        };
+        return coapAllData;
+      };
+      return {
+        customResetFunc,
+        register,
+        customClearStepTwoValueFunc,
+        getDataFunc,
+        setStepFieldsValueFunc,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+
+enum EnumMQTT {
+  IS_DEFAULT = 'DEFAULT',
+  IS_MQTT = 'MQTT',
+  IS_PROTOBUF = 'PROTOBUF',
+  IS_COAP = 'COAP',
+  IS_LWM2M = 'LWM2M',
+  IS_SNMP = 'SNMP',
+  IS_PSM = 'PSM',
+  IS_DRX = 'E_DRX',
+  IS_EFENTO_NBIOT = 'EFENTO',
+}
+
+const isProtobuf = (type: string) => {
+  return type === EnumMQTT.IS_PROTOBUF;
+};
+
+export const MqttSchemas: FormSchema[] = [
+  {
+    field: 'deviceTelemetryTopic',
+    component: 'Input',
+    label: '筛选器',
+    required: true,
+    defaultValue: 'v1/devices/me/telemetry',
+    componentProps: {
+      placeholder: '请输入遥测数据 topic 筛选器',
+    },
+    colProps: { span: 11 },
+  },
+  {
+    field: 'deviceAttributesTopic',
+    component: 'Input',
+    required: true,
+    label: 'topic filter',
+    defaultValue: 'v1/devices/me/attributes',
+    componentProps: {
+      placeholder: '请输入Attributes topic 筛选器',
+    },
+    colProps: { span: 11 },
+  },
+  {
+    field: 'desc',
+    component: 'InputTextArea',
+    label: '描述',
+    defaultValue: `支持单[+]和多级[#]通配符。[+] is suitable for any topic filter level。例如：
+    v1/devices/+/telemetry or
+     +/devices/+/attributes。[#]可以替换 topic filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。
+    `,
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    colProps: { span: 22 },
+  },
+  {
+    field: 'transportPayloadType',
+    component: 'Select',
+    label: '设备Payload',
+    defaultValue: 'JSON',
+    componentProps: {
+      options: [
+        { label: 'JSON', value: 'JSON' },
+        { label: 'PROTOBUF', value: 'PROTOBUF' },
+      ],
+    },
+    colProps: { span: 11 },
+  },
+  {
+    field: 'useJsonPayloadFormatForDefaultDownlinkTopics',
+    label: '',
+    colProps: { span: 22 },
+    defaultValue: false,
+    component: 'Checkbox',
+    renderComponentContent: `启用后，平台将默认使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON有效负载格式。用于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能轻微下降，因此建议在所有设备更新后禁用此模式。`,
+    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
+  },
+  {
+    field: 'enableCompatibilityWithJsonPayloadFormat',
+    label: '',
+    colProps: { span: 22 },
+    defaultValue: false,
+    component: 'Checkbox',
+    renderComponentContent: `启用后，平台将使用Json有效负载格式通过以下主题推送属性和RPC：v1/devices/me/attributes/response/$request_id, v1/devices/me/attributes, v1/devices/me/rpc/request/$request_id,v1/devices/me/rpc/response/$request_id.此设置不会影响使用新（v2）主题发送的属性和rpc订阅：v2/a/res/$request_id, v2/a, v2/r/req/$request_id, v2/r/res/$request_id. Where $request_id是一个整数请求标识符。`,
+    ifShow: ({ values }) =>
+      isProtobuf(values.transportPayloadType) &&
+      !!values.useJsonPayloadFormatForDefaultDownlinkTopics,
+  },
+  {
+    field: 'deviceTelemetryProtoSchema',
+    label: '遥测数据',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package telemetry;
+
+    message SensorDataReading {
+      optional double temperature = 1;
+      optional double humidity = 2;
+      InnerObject innerObject = 3;
+      message InnerObject {
+        optional string key1 = 1;
+        optional bool key2 = 2;
+        optional double key3 = 3;
+        optional int32 key4 = 4;
+        optional string key5 = 5;
+      }
+    }
+    `,
+    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
+  },
+  {
+    field: 'deviceAttributesProtoSchema',
+    label: 'Attributes',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package attributes;
+
+    message SensorConfiguration {
+      optional string firmwareVersion = 1;
+      optional string serialNumber = 2;
+    }
+    `,
+    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
+  },
+  {
+    field: 'deviceRpcRequestProtoSchema',
+    label: 'RPC 请求 ',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package rpc;
+    
+    message RpcRequestMsg {
+      optional string method = 1;
+      optional int32 requestId = 2;
+      optional string params = 3;
+    }
+    `,
+    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
+  },
+  {
+    field: 'deviceRpcResponseProtoSchema',
+    label: 'RPC 响应',
+    colProps: { span: 22 },
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+      },
+    },
+    defaultValue: `
+    syntax ="proto3";
+    package rpc;
+    
+    message RpcResponseMsg {
+      optional string payload = 1;
+    }
+    `,
+    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
+  },
+];

+<template>
+  <div
+    style="
+      margin-top: -5vh;
+      border: 1px solid gray;
+      margin-left: 0.1vw;
+      border-radius: 5px;
+      padding-left: 1.5vw;
+    "
+  >
+    <div style="margin-top: 1.2vh">
+      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { MqttSchemas } from './Mqtt';
+  import { Alert, Divider, Descriptions } from 'ant-design-vue';
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+
+    emits: ['next', 'prev', 'register'],
+    setup(_, { emit }) {
+      let allMqttData: any = reactive({});
+      const transportMqttData: any = reactive({
+        transportPayloadTypeConfiguration: {
+          transportPayloadType: null,
+          enableCompatibilityWithJsonPayloadFormat: false,
+          useJsonPayloadFormatForDefaultDownlinkTopics: false,
+          deviceAttributesProtoSchema: null,
+          deviceRpcRequestProtoSchema: null,
+          deviceRpcResponseProtoSchema: null,
+          deviceTelemetryProtoSchema: null,
+        },
+        type: 'MQTT',
+      });
+
+      const [register, { validate, resetFields, setFieldsValue }] = useForm({
+        labelWidth: 80,
+        schemas: MqttSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+      const setStepFieldsValueFunc = (v) => {
+        setFieldsValue(v);
+        setFieldsValue({
+          transportPayloadType: v?.transportPayloadTypeConfiguration?.transportPayloadType,
+          deviceTelemetryProtoSchema:
+            v?.transportPayloadTypeConfiguration?.deviceTelemetryProtoSchema,
+          deviceAttributesProtoSchema:
+            v?.transportPayloadTypeConfiguration?.deviceAttributesProtoSchema,
+          deviceRpcRequestProtoSchema:
+            v?.transportPayloadTypeConfiguration?.deviceRpcRequestProtoSchema,
+          deviceRpcResponseProtoSchema:
+            v?.transportPayloadTypeConfiguration?.deviceRpcResponseProtoSchema,
+          enableCompatibilityWithJsonPayloadFormat:
+            v?.transportPayloadTypeConfiguration?.enableCompatibilityWithJsonPayloadFormat,
+          useJsonPayloadFormatForDefaultDownlinkTopics:
+            v?.transportPayloadTypeConfiguration?.useJsonPayloadFormatForDefaultDownlinkTopics,
+        });
+      };
+      const customClearStepTwoValueFunc = () => {
+        resetFields();
+      };
+      async function customResetFunc() {
+        emit('prev');
+      }
+      const getDataFunc = async () => {
+        let val = await validate();
+        if (!val) return;
+        delete val.desc;
+        transportMqttData.transportPayloadTypeConfiguration.transportPayloadType =
+          val.transportPayloadType;
+        transportMqttData.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
+          val.enableCompatibilityWithJsonPayloadFormat;
+        transportMqttData.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =
+          val.useJsonPayloadFormatForDefaultDownlinkTopics;
+        transportMqttData.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
+          val.deviceAttributesProtoSchema;
+        transportMqttData.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
+          val.deviceRpcRequestProtoSchema;
+        transportMqttData.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
+          val.deviceRpcResponseProtoSchema;
+        transportMqttData.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
+          val.deviceTelemetryProtoSchema;
+        allMqttData = {
+          ...val,
+          ...transportMqttData,
+        };
+        delete allMqttData.deviceTelemetryProtoSchema;
+        delete allMqttData.deviceAttributesProtoSchema;
+        delete allMqttData.deviceRpcRequestProtoSchema;
+        delete allMqttData.deviceRpcResponseProtoSchema;
+        delete allMqttData.useJsonPayloadFormatForDefaultDownlinkTopics;
+        delete allMqttData.enableCompatibilityWithJsonPayloadFormat;
+        delete allMqttData.transportPayloadType;
+        return allMqttData;
+      };
+      return {
+        customResetFunc,
+        register,
+        customClearStepTwoValueFunc,
+        getDataFunc,
+        setStepFieldsValueFunc,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>

 import { FormSchema } from '/@/components/Form';
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 import { findDictItemByCode } from '/@/api/system/dict';
-
-enum EnumMQTT {
-  IS_DEFAULT = 'DEFAULT',
-  IS_MQTT = 'MQTT',
-  IS_PROTOBUF = 'PROTOBUF',
-  IS_COAP = 'COAP',
-  IS_LWM2M = 'LWM2M',
-  IS_SNMP = 'SNMP',
-  IS_PSM = 'PSM',
-  IS_DRX = 'E_DRX',
-  IS_EFENTO_NBIOT = 'EFENTO',
-}
-
-const isMqtt = (type: string) => {
-  return type === EnumMQTT.IS_MQTT;
-};
-const isProtobuf = (type: string) => {
-  return type === EnumMQTT.IS_PROTOBUF;
-};
-
-const isNBIOt = (type: string) => {
-  return type === EnumMQTT.IS_COAP;
-};
-
-const isPsm = (type: string) => {
-  return type === EnumMQTT.IS_PSM;
-};
-
-const isDrx = (type: string) => {
-  return type === EnumMQTT.IS_DRX;
-};
-
-const isEfentoNb = (type: string) => {
-  return type === EnumMQTT.IS_EFENTO_NBIOT;
-};
+import { ref } from 'vue';
 
 export const step1Schemas: FormSchema[] = [
   {
@@ -100,6 +66,7 @@ export const step1Schemas: FormSchema[] = [
   },
 ];
 
+export const isChangeType = ref('');
 export const step2Schemas: FormSchema[] = [
   {
     field: 'transportType',
@@ -112,304 +79,10 @@ export const step2Schemas: FormSchema[] = [
         { label: 'MQTT', value: 'MQTT' },
         { label: 'CoAP', value: 'COAP' },
       ],
-    },
-    colProps: { span: 11 },
-  },
-  {
-    field: 'deviceTelemetryTopic',
-    component: 'Input',
-    label: '筛选器',
-    required: true,
-    defaultValue: 'v1/devices/me/telemetry',
-    componentProps: {
-      placeholder: '请输入遥测数据 topic 筛选器',
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isMqtt(values.transportType),
-  },
-  {
-    field: 'deviceAttributesTopic',
-    component: 'Input',
-    required: true,
-    label: 'topic filter',
-    defaultValue: 'v1/devices/me/attributes',
-    componentProps: {
-      placeholder: '请输入Attributes topic 筛选器',
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isMqtt(values.transportType),
-  },
-  {
-    field: 'desc',
-    component: 'InputTextArea',
-    label: '描述',
-    defaultValue: `支持单[+]和多级[#]通配符。[+] is suitable for any topic filter level。例如：v1/devices/+/telemetry or +/devices/+/attributes。[#]可以替换 topic filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。
-    `,
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
+      onChange(e) {
+        isChangeType.value = e;
       },
-      placeholder: '请输入Attributes topic 筛选器',
-    },
-    colProps: { span: 24 },
-    ifShow: ({ values }) => isMqtt(values.transportType),
-  },
-  {
-    field: 'transportPayloadType',
-    component: 'Select',
-    label: '设备Payload',
-    defaultValue: 'JSON',
-    componentProps: {
-      options: [
-        { label: 'JSON', value: 'JSON' },
-        { label: 'PROTOBUF', value: 'PROTOBUF' },
-      ],
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isMqtt(values.transportType),
-  },
-  {
-    field: 'useJsonPayloadFormatForDefaultDownlinkTopics',
-    label: '',
-    colProps: { span: 14 },
-    defaultValue: false,
-    component: 'Checkbox',
-    renderComponentContent: `启用后，平台将默认使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON有效负载格式。用于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能轻微下降，因此建议在所有设备更新后禁用此模式。`,
-    ifShow: ({ values }) =>
-      isProtobuf(values.transportPayloadType) && !isNBIOt(values.transportType),
-  },
-  {
-    field: 'enableCompatibilityWithJsonPayloadFormat',
-    label: '',
-    colProps: { span: 14 },
-    defaultValue: false,
-    component: 'Checkbox',
-    renderComponentContent: `启用后，平台将使用Json有效负载格式通过以下主题推送属性和RPC：v1/devices/me/attributes/response/$request_id、v1/devices/me/attributes、v1/devices/me/RPC/request/$request_id、，v1/devices/me/rpc/response/$request id。此设置不影响使用新（v2）主题发送的属性和rpc订阅：v2/a/res/$request id、v2/a、v2/r/req/$request id、v2/r/res/$request id。其中，$request id是整数请求标识符。`,
-    ifShow: ({ values }) =>
-      isProtobuf(values.transportPayloadType) &&
-      !!values.useJsonPayloadFormatForDefaultDownlinkTopics &&
-      !isNBIOt(values.transportType),
-  },
-  {
-    field: 'coapDeviceType',
-    component: 'Select',
-    label: 'CoAP类型',
-    defaultValue: 'DEFAULT',
-    componentProps: {
-      options: [
-        { label: '默认', value: 'DEFAULT' },
-        { label: 'Efento NB-IoT', value: 'EFENTO' },
-      ],
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType),
-  },
-  {
-    field: 'transportPayloadType',
-    component: 'Select',
-    label: 'Payload',
-    defaultValue: 'JSON',
-    componentProps: {
-      options: [
-        { label: 'JSON', value: 'JSON' },
-        { label: 'PROTOBUF', value: 'PROTOBUF' },
-      ],
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && !isEfentoNb(values.coapDeviceType),
-  },
-  {
-    field: 'powerMode',
-    component: 'Select',
-    label: 'Power Mode',
-    defaultValue: 'DRX',
-    componentProps: {
-      options: [
-        { label: 'Power Saving Mode', value: 'PSM' },
-        { label: 'Discontinuous Reception', value: 'DRX' },
-        {
-          label: 'Extended Discontinuous Reception',
-          value: 'E_DRX',
-        },
-      ],
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType),
-  },
-  {
-    field: 'psmActivityTimer',
-    component: 'InputNumber',
-    label: 'Timer',
-    required: true,
-    defaultValue: '10',
-    componentProps: {
-      placeholder: '请输入PSM Activity Timer',
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && isPsm(values.powerMode),
-  },
-  {
-    field: 'unit',
-    component: 'Select',
-    label: '时间单位',
-    defaultValue: 'second',
-    componentProps: {
-      options: [
-        { label: 'Milliseconds', value: 'Milliseconds' },
-        { label: '秒', value: 'second' },
-        { label: '分钟', value: 'minute' },
-        { label: '小时', value: 'hour' },
-      ],
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && isPsm(values.powerMode),
-  },
-  {
-    field: 'edrxCycle',
-    component: 'InputNumber',
-    label: 'eDRX cycle',
-    required: true,
-    defaultValue: '81',
-    componentProps: {
-      placeholder: '请输入PSM Activity Timer',
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && isDrx(values.powerMode),
-  },
-  {
-    field: 'unit',
-    component: 'Select',
-    label: '时间单位',
-    defaultValue: 'second',
-    componentProps: {
-      options: [
-        { label: 'Milliseconds', value: 'Milliseconds' },
-        { label: '秒', value: 'second' },
-        { label: '分钟', value: 'minute' },
-        { label: '小时', value: 'hour' },
-      ],
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && isDrx(values.powerMode),
-  },
-  {
-    field: 'pagingTransmissionWindow',
-    component: 'InputNumber',
-    label: 'Paging',
-    required: true,
-    defaultValue: '10',
-    componentProps: {
-      placeholder: '请输入Paging Transmission Window',
-    },
-    colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && isDrx(values.powerMode),
-  },
-  {
-    field: 'unit',
-    component: 'Select',
-    label: '时间单位',
-    defaultValue: 'second',
-    componentProps: {
-      options: [
-        { label: 'Milliseconds', value: 'Milliseconds' },
-        { label: '秒', value: 'second' },
-        { label: '分钟', value: 'minute' },
-        { label: '小时', value: 'hour' },
-      ],
     },
     colProps: { span: 11 },
-    ifShow: ({ values }) => isNBIOt(values.transportType) && isDrx(values.powerMode),
-  },
-  {
-    field: 'deviceTelemetryProtoSchema',
-    label: '遥测数据',
-    colProps: { span: 22 },
-    component: 'InputTextArea',
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    defaultValue: `
-    syntax ="proto3";
-    package telemetry;
-
-    message SensorDataReading {
-      optional double temperature = 1;
-      optional double humidity = 2;
-      InnerObject innerObject = 3;
-      message InnerObject {
-        optional string key1 = 1;
-        optional bool key2 = 2;
-        optional double key3 = 3;
-        optional int32 key4 = 4;
-        optional string key5 = 5;
-      }
-    }
-    `,
-    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
-  },
-  {
-    field: 'deviceAttributesProtoSchema',
-    label: 'Attributes',
-    colProps: { span: 22 },
-    component: 'InputTextArea',
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    defaultValue: `
-    syntax ="proto3";
-    package attributes;
-
-    message SensorConfiguration {
-      optional string firmwareVersion = 1;
-      optional string serialNumber = 2;
-    }
-    `,
-    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
-  },
-  {
-    field: 'deviceRpcRequestProtoSchema',
-    label: 'RPC 请求 ',
-    colProps: { span: 22 },
-    component: 'InputTextArea',
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    defaultValue: `
-    syntax ="proto3";
-    package rpc;
-    
-    message RpcRequestMsg {
-      optional string method = 1;
-      optional int32 requestId = 2;
-      optional string params = 3;
-    }
-    `,
-    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
-  },
-  {
-    field: 'deviceRpcResponseProtoSchema',
-    label: 'RPC 响应',
-    colProps: { span: 22 },
-    component: 'InputTextArea',
-    componentProps: {
-      autoSize: {
-        maxRows: 10,
-      },
-    },
-    defaultValue: `
-    syntax ="proto3";
-    package rpc;
-    
-    message RpcResponseMsg {
-      optional string payload = 1;
-    }
-    `,
-    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
   },
 ];