feat: product profile view details transport protocol panel modify to description

@@ -10,6 +10,7 @@
     "EFENTO",
     "inited",
     "MQTT",
+    "notif",
     "PROTOBUF",
     "SNMP",
     "unref",

@@ -69,18 +69,69 @@ export interface ClientSettings {
   pagingTransmissionWindow: string;
   powerMode: string;
   psmActivityTimer: number;
+
+  clientOnlyObserveAfterConnect: string;
+  fwUpdateResource: string;
+  fwUpdateStrategy: number;
+  swUpdateResource: string;
+  swUpdateStrategy: number;
+}
+
+export interface Bootstrap {
+  securityMode: string;
+  shortServerId: number;
+  bootstrapServerIs: boolean;
+  host: string;
+  port: number;
+  clientHoldOffTime: number;
+  serverPublicKey?: any;
+  serverCertificate?: any;
+  bootstrapServerAccountTimeout: number;
+  lifetime: number;
+  defaultMinPeriod: number;
+  notifIfDisabled: boolean;
+  binding: string;
+}
+
+export interface Mapping {
+  dataType: string;
+  key: string;
+  oid: string;
+}
+
+export interface CommunicationConfigs {
+  spec: string;
+  mappings: Mapping[];
+  queryingFrequencyMs: number;
 }
 
 export interface TransportConfiguration {
   type: string;
   deviceTelemetryTopic: string;
   deviceAttributesTopic: string;
+
+  // MQTT
   transportPayloadTypeConfiguration: TransportPayloadTypeConfiguration;
+
+  // COAP
   clientSettings: ClientSettings;
   coapDeviceTypeConfiguration: {
     coapDeviceType: string;
     transportPayloadTypeConfiguration: TransportPayloadTypeConfiguration;
   };
+
+  // LWM2M
+  bootstrapServerUpdateEnable: boolean;
+  bootstrap: Bootstrap[];
+  clientLwM2mSettings: ClientSettings;
+
+  // SNMP
+  retries: number;
+  timeoutMs: number;
+  communicationConfigs: CommunicationConfigs[];
+
+  // TCP
+  scriptId: string;
 }
 
 export interface ProvisionConfiguration {

@@ -24,12 +24,11 @@ export interface ScriptRecord {
   id: string;
   creator: string;
   createTime: string;
-  updater: string;
-  updateTime: string;
   name: string;
-  convertJs: string;
-  enabled: boolean;
   tenantId: string;
   description: string;
-  status: boolean;
+  convertJs: string;
+  status: number;
+  dataType: string;
+  saveOriginalData: boolean;
 }

@@ -54,7 +54,7 @@ export const getScriptManageDetail = (id: string) => {
 
 // 获取脚本选项列表
 export const getScriptManageMeList = () => {
-  return defHttp.get({
+  return defHttp.get<ScriptRecord[]>({
     url: ScriptManagerApi.SCRIPT_MELIST_URL,
   });
 };

@@ -27,6 +27,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import productDefault from '/@/assets/icons/product-default.svg';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { useRoute } from 'vue-router';
 
   defineProps<{
     mode: EnumTableCardMode;
@@ -43,7 +44,7 @@
   const { createMessage } = useMessage();
   const { createSyncConfirm } = useSyncConfirm();
 
-  const [register, { getFieldsValue }] = useForm({
+  const [register, { getFieldsValue, setFieldsValue }] = useForm({
     showAdvancedButton: true,
     labelWidth: 100,
     compact: true,
@@ -83,14 +84,18 @@
       .map((item) => item.id);
   });
 
-  const getDataSource = async () => {
+  const getDataSource = async (otherParams: Recordable = {}) => {
     try {
       loading.value = true;
+      if (otherParams) {
+        setFieldsValue(otherParams);
+      }
       const params = getFieldsValue();
       const { items, total } = await deviceConfigGetQuery({
         page: pagination.current,
         pageSize: unref(colNumber) * 2,
         ...params,
+        ...otherParams,
       });
       pagination.total = total;
       dataSource.value = items.map((item) => ({ ...item, checked: false }));
@@ -192,9 +197,9 @@
       throw error;
     }
   };
-
+  const { query: routeParams } = useRoute();
   onMounted(() => {
-    getDataSource();
+    getDataSource(routeParams);
   });
 </script>
 
@@ -255,7 +260,7 @@
                   <Image
                     @click.stop
                     :height="144"
-                    :src="item.image"
+                    :src="item.image || IMAGE_FALLBACK"
                     placeholder
                     :fallback="IMAGE_FALLBACK"
                   />

@@ -3,7 +3,12 @@
   import { useDescription, Description } from '/@/components/Description';
   import { Input } from 'ant-design-vue';
   import { h } from 'vue';
-  import { COAPDeviceTypeEnum, PowerModeNameEnum, TransportPayloadTypeEnum } from './const';
+  import {
+    COAPDeviceTypeEnum,
+    PowerModeEnum,
+    PowerModeNameEnum,
+    TransportPayloadTypeEnum,
+  } from './const';
 
   type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
   const props = defineProps<{
@@ -23,7 +28,7 @@
   };
 
   const showPowerModeIsEDRX = (data: TransportConfiguration) => {
-    return data.clientSettings.powerMode === PowerModeNameEnum.E_DRX;
+    return data.clientSettings.powerMode === PowerModeEnum.E_DRX;
   };
 
   const [register] = useDescription({

+<script lang="ts" setup>
+  import { Input, Tabs } from 'ant-design-vue';
+  import { computed, h, unref } from 'vue';
+  import {
+    BindingNameEnum,
+    FirmwareUpdateStrategyNameEnum,
+    PowerModeNameEnum,
+    SecurityModeNameEnum,
+  } from './const';
+  import { Bootstrap, ClientSettings, DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { CollapseContainer } from '/@/components/Container';
+  import { useDescription, Description, DescItem } from '/@/components/Description';
+
+  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
+  const props = defineProps<{
+    record: TransportConfiguration;
+  }>();
+
+  enum TabKeyEnum {
+    LWM2M_MODEL = 'LWM2M Model',
+    BOOTSTRAP = 'Bootstrap',
+    OTHER_SETTINGS = 'Other settings',
+    JSON_CONFIG_PROFILE_DEVICE = 'JSON Config Profile Device',
+  }
+
+  const getBootstrapSetting = computed(() => {
+    const { record } = props;
+    return record.bootstrap;
+  });
+
+  const getOtherSetting = computed(() => {
+    const { record } = props;
+    return record.clientLwM2mSettings;
+  });
+
+  const [registerLWM2MModel] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: {},
+    schema: [
+      {
+        field: 'objectList',
+        label: '对象列表',
+        render: () => h('div', { class: 'min-h-6' }),
+      },
+    ],
+  });
+
+  const getCollapseTitle = (item: Bootstrap) => {
+    return `LwM2M Server        Short server ID: ${item.shortServerId}        Security config mode: ${item.securityMode}`;
+  };
+
+  const bootstrapDescriptionSchema: DescItem[] = [
+    {
+      label: '安全配置',
+      field: 'securityMode',
+      render: (_, data: Bootstrap) => SecurityModeNameEnum[data.securityMode],
+    },
+    {
+      label: '短服务器ID',
+      field: 'shortServerId',
+    },
+    {
+      label: '主机',
+      field: 'host',
+    },
+    {
+      label: '端口',
+      field: 'port',
+    },
+    {
+      label: '延迟时间',
+      field: 'clientHoldOffTime',
+    },
+    {
+      label: '超时后的账户',
+      field: 'bootstrapServerAccountTimeout',
+    },
+    {
+      label: '注册生存期',
+      field: 'lifetime',
+    },
+    {
+      label: '两次通知之间的最小周期',
+      field: 'defaultMinPeriod',
+    },
+    {
+      label: 'Binding',
+      field: 'binding',
+      span: 2,
+      render: (_, data: Bootstrap) => BindingNameEnum[data.binding],
+    },
+    {
+      label: '禁用或脱机时的通知存储',
+      field: 'notifIfDisabled',
+      render: (_, data: Bootstrap) => (data.notifIfDisabled ? '启用' : '禁用'),
+    },
+  ];
+  console.log(unref(getOtherSetting));
+  const [registerOtherSettings] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: unref(getOtherSetting),
+    schema: [
+      {
+        label: '固件更新策略',
+        field: 'fwUpdateStrategy',
+        span: 2,
+        render: (_, data: ClientSettings) => FirmwareUpdateStrategyNameEnum[data.fwUpdateStrategy],
+      },
+      {
+        label: '固件更新COAP资源',
+        field: 'fwUpdateResource',
+        span: 2,
+      },
+      {
+        label: '软件更新策略',
+        field: 'swUpdateStrategy',
+        span: 2,
+        render: (_, data: ClientSettings) => FirmwareUpdateStrategyNameEnum[data.swUpdateStrategy],
+      },
+      {
+        label: '软件更新COAP资源',
+        field: 'swUpdateResource',
+        span: 2,
+      },
+      {
+        label: '节能模式',
+        field: 'powerMode',
+        render: (_, data: ClientSettings) => PowerModeNameEnum[data.powerMode],
+      },
+      {
+        label: 'PSM活动计时器',
+        field: 'edrxCycle',
+      },
+      {
+        label: 'PSM活动计时器单位',
+        field: 'edrxCycleTimeUnit',
+        render: () => '秒',
+      },
+      {
+        label: '支持复合读/写观察操作',
+        field: '',
+        render: () => '禁用',
+      },
+    ],
+  });
+
+  const [registerJSONConfig] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        field: 'json',
+        label: 'LWM2M',
+        render: (_, data: TransportConfiguration) => {
+          return h(Input.TextArea, { value: JSON.stringify(data, null, 2), autoSize: true });
+        },
+      },
+    ],
+  });
+</script>
+
+<template>
+  <Tabs>
+    <Tabs.TabPane :tab="TabKeyEnum.LWM2M_MODEL" :key="TabKeyEnum.LWM2M_MODEL">
+      <Description @register="registerLWM2MModel" />
+    </Tabs.TabPane>
+    <Tabs.TabPane :tab="TabKeyEnum.BOOTSTRAP" :key="TabKeyEnum.BOOTSTRAP">
+      <CollapseContainer
+        v-for="(item, index) in getBootstrapSetting"
+        :key="index"
+        :title="getCollapseTitle(item)"
+        class="mt-4"
+      >
+        <Description
+          layout="vertical"
+          :column="2"
+          :schema="bootstrapDescriptionSchema"
+          :data="item"
+        />
+      </CollapseContainer>
+    </Tabs.TabPane>
+    <Tabs.TabPane :tab="TabKeyEnum.OTHER_SETTINGS" :key="TabKeyEnum.OTHER_SETTINGS">
+      <Description @register="registerOtherSettings" />
+    </Tabs.TabPane>
+    <Tabs.TabPane
+      :tab="TabKeyEnum.JSON_CONFIG_PROFILE_DEVICE"
+      :key="TabKeyEnum.JSON_CONFIG_PROFILE_DEVICE"
+    >
+      <Description @register="registerJSONConfig" />
+    </Tabs.TabPane>
+  </Tabs>
+</template>

+<script lang="ts" setup>
+  import { Table } from 'ant-design-vue';
+  import { computed, h } from 'vue';
+  import { SNMPDataTypeEnum, SNMPRangeNameEnum } from './const';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { CollapseContainer } from '/@/components/Container';
+  import { DescItem, Description, useDescription } from '/@/components/Description';
+
+  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
+
+  const props = defineProps<{
+    record: TransportConfiguration;
+  }>();
+
+  const getSNMPList = computed(() => {
+    const { record } = props;
+    return record.communicationConfigs;
+  });
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        label: '接入协议',
+        field: 'type',
+        span: 2,
+      },
+      {
+        label: '超时毫秒',
+        field: 'timeoutMs',
+      },
+      {
+        label: '重试次数',
+        field: 'retries',
+      },
+    ],
+  });
+
+  const schema: DescItem[] = [
+    {
+      label: '范围',
+      field: 'spec',
+      render: (val: string) => getTitle(val),
+    },
+    {
+      label: '查询频率(毫秒)',
+      field: 'queryingFrequencyMs',
+    },
+    {
+      label: 'Mapping',
+      field: 'mappings',
+      render: (val) => {
+        return h(Table, {
+          size: 'small',
+          bordered: true,
+          pagination: false,
+          columns: [
+            {
+              title: '数据类型',
+              dataIndex: 'dataType',
+              customRender: ({ text }) => SNMPDataTypeEnum[text],
+            },
+            {
+              title: 'DataKey',
+              dataIndex: 'key',
+            },
+            {
+              title: 'OID',
+              dataIndex: 'oid',
+            },
+          ],
+          dataSource: val,
+        });
+      },
+    },
+  ];
+
+  const getTitle = (range: string) => {
+    return SNMPRangeNameEnum[range];
+  };
+</script>
+
+<template>
+  <Description @register="register" />
+  <CollapseContainer
+    v-for="(item, index) in getSNMPList"
+    :key="index"
+    class="mt-4"
+    :title="getTitle(item.spec)"
+  >
+    <Description :data="item" layout="vertical" :column="2" :schema="schema" />
+  </CollapseContainer>
+</template>

+<script lang="ts" setup>
+  import { Button, Tag } from 'ant-design-vue';
+  import { h, onMounted, ref, unref } from 'vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { ScriptRecord } from '/@/api/scriptmanage/model/scriptModel';
+  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
+  import { Description, useDescription } from '/@/components/Description';
+  import { useModal } from '/@/components/Modal';
+  import CoverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
+
+  const props = defineProps<{
+    record: DeviceRecord['profileData']['transportConfiguration'];
+  }>();
+
+  const scriptInfo = ref<ScriptRecord>({} as unknown as ScriptRecord);
+
+  const [register, { setDescProps }] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        field: 'type',
+        label: '接入协议',
+        span: 2,
+      },
+      {
+        field: 'scriptName',
+        label: '转换脚本',
+        render: (value: string) => {
+          return h('div', [
+            h(Tag, { color: 'blue' }, () => value),
+            h(Button, { type: 'link', onClick: handleTestScript }, () => '测试脚本'),
+          ]);
+        },
+      },
+    ],
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleTestScript = () => {
+    openModal(true, {
+      isUpdate: false,
+      isTest: true,
+      record: unref(scriptInfo).id,
+      isText: 'test',
+      isTitle: 'test',
+    });
+  };
+
+  onMounted(() => {
+    getTransforScriptInfo();
+  });
+
+  const getTransforScriptInfo = async () => {
+    try {
+      const list = await getScriptManageMeList();
+      const record = list.find((item) => item.id === props.record.scriptId);
+      scriptInfo.value = record!;
+      setDescProps({
+        data: Object.assign(props.record, record, { scriptName: record?.name || '' }),
+      });
+    } catch (error) {}
+  };
+</script>
+
+<template>
+  <section>
+    <Description @register="register" />
+    <CoverScriptModal @register="registerModal" />
+  </section>
+</template>

@@ -3,7 +3,10 @@
   import COAPDescription from './COAPDescription.vue';
   import { TransportTypeEnum } from './const';
   import DefaultConfiguration from './DefaultConfiguration.vue';
+  import LWM2MDescription from './LWM2MDescription.vue';
   import MQTTConfiguration from './MQTTConfiguration.vue';
+  import SNMPDescription from './SNMPDescription.vue';
+  import TCPDescription from './TCPDescription.vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
 
   const props = defineProps<{
@@ -32,5 +35,20 @@
       :record="getTransportInfo"
       v-if="getTransportInfo.type === TransportTypeEnum.COAP"
     />
+
+    <LWM2MDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.LWM2M"
+    />
+
+    <SNMPDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.SNMP"
+    />
+
+    <TCPDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.TCP"
+    />
   </section>
 </template>

@@ -4,6 +4,7 @@ export enum TransportTypeEnum {
   COAP = 'COAP',
   LWM2M = 'LWM2M',
   SNMP = 'SNMP',
+  TCP = 'TCP',
 }
 
 export enum TransportPayloadTypeEnum {
@@ -21,6 +22,12 @@ export enum COAPDeviceTypeNameEnum {
   EFENTO = 'Efento NB-IoT',
 }
 
+export enum PowerModeEnum {
+  PSM = 'PSM',
+  DRX = 'DRX',
+  E_DRX = 'E_DRX',
+}
+
 export enum PowerModeNameEnum {
   PSM = 'Power Saving Mode (PSM)',
   DRX = 'Discontinuous Reception (DRX)',
@@ -33,3 +40,50 @@ export enum TimeUnitEnum {
   MINUTE = 'minute',
   HOUR = 'hour',
 }
+
+export enum SecurityModeNameEnum {
+  NO_SEC = 'No Security',
+  PSK = 'Pre-Shared Key',
+  RPK = 'Raw Public Key',
+  X509 = 'X.509 Certificate',
+}
+
+export enum BindingNameEnum {
+  U = 'U: Client is reachable via the UDP binding at any time.',
+  M = 'M: Client is reachable via the MQTT binding at any time.',
+  H = 'H: Client is reachable via the HTTP binding at any time.',
+  T = 'T: Client is reachable via the TCP binding at any time.',
+  S = 'S: Client is reachable via the SMS binding at any time.',
+  N = 'N: Client MUST send the response to such a request over the Non-IP binding (is supported since LWM',
+  UQ = 'UQ: UDP connection in queue mode (is not supported since LWM2M 1.1)',
+  UQS = 'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)',
+  TQ = 'TQ: TCP connection in queue mode (is not supported since LWM2M 1.1)',
+  TQS = 'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)\t',
+  SQ = 'SQ: SMS connection in queue mode (is not supported since LWM2M 1.1)',
+}
+
+export const FirmwareUpdateStrategyNameEnum = {
+  1: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
+  2: 'Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and',
+  3: 'Push firmware update as binary file using Object 19 and Resource 0 (Data)',
+};
+
+export const SoftwareUpdateStrategyNameEnum = {
+  1: 'Push binary file using Object 9 and Resource 2 (Package)',
+  2: 'Auto-generate unique CoAP URL to download the package and push software update using Object 9 and',
+};
+
+export enum SNMPRangeNameEnum {
+  TELEMETRY_QUERYING = 'Telemetry',
+  CLIENT_ATTRIBUTES_QUERYING = 'Client attributes',
+  SHARED_ATTRIBUTES_SETTING = 'Shared attributes',
+  TO_DEVICE_RPC_REQUEST = 'RPC request',
+}
+
+export enum SNMPDataTypeEnum {
+  STRING = '字符串',
+  LONG = '数字',
+  BOOLEAN = '布尔值',
+  DOUBLE = '双精度小数',
+  JSON = 'JSON',
+}

@@ -9,17 +9,33 @@
     </div>
     <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
       <div style="margin-left: 1vw">
-        <h3 v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" style="color: gray">
-          查询频率（毫秒*）</h3>
-        <InputNumber v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
-          v-model:value="queryingFrequencyMs" :min="0" :max="99999999999999999999" style="margin-top: 0.25vh" />
+        <h3
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          style="color: gray"
+        >
+          查询频率（毫秒*）</h3
+        >
+        <InputNumber
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          v-model:value="queryingFrequencyMs"
+          :min="0"
+          :max="99999999999999999999"
+          style="margin-top: 0.25vh"
+        />
         <div style="margin-top: 0.65vh"></div>
-        <MappingsForm :value="item.mappings" @change="handleMappingsChange" @dynamicAddHeight="dynamicHeight += 4"
-          @dynamicReduceHeight="dynamicHeight -= 4" />
+        <MappingsForm
+          :value="item.mappings"
+          @change="handleMappingsChange"
+          @dynamicAddHeight="dynamicHeight += 4"
+          @dynamicReduceHeight="dynamicHeight -= 4"
+        />
       </div>
     </div>
     <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }">
-      <div style="text-align: center; line-height: 20vh" :style="{ lineHeight: dynamicHeight + 'vh' }">
+      <div
+        style="text-align: center; line-height: 20vh"
+        :style="{ lineHeight: dynamicHeight + 'vh' }"
+      >
         <Button size="small" type="default" @click="handleRemove(item, index)">
           <template #icon>
             <MinusCircleOutlined />
@@ -30,105 +46,105 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Button, InputNumber } from 'ant-design-vue';
-import { MinusCircleOutlined } from '@ant-design/icons-vue';
-import MappingsForm from './MappingsForm.vue';
-import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref } from 'vue';
+  import { Button, InputNumber } from 'ant-design-vue';
+  import { MinusCircleOutlined } from '@ant-design/icons-vue';
+  import MappingsForm from './MappingsForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    default: () => { },
-  },
-  index: {
-    type: Number,
-  },
-});
-const emit = defineEmits(['removeItem']);
-const dynamicHeight = ref(25);
-const queryingFrequencyMs = ref(5000);
-const { createMessage } = useMessage();
-const handleMappingsChange = (e) => {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.item.mappings = e;
-};
-const handleRemove = (item, index) => {
-  emit('removeItem', item, index);
-};
-//设置回显的高度
-const setFieldsValueFunc = () => {
-  dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
-  queryingFrequencyMs.value = props.item.queryingFrequencyMs;
-};
-//获取表单的值
-const getSnmpFormFunc = () => {
-  if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) {
-    return createMessage.error('请选择范围');
-  }
-  if (
-    props.item.spec == 'TELEMETRY_QUERYING' ||
-    props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
-  ) {
-    if (queryingFrequencyMs.value == null) {
-      return createMessage.error('请填写查询频率');
-    }
-  }
-  let obj: any = {};
-  obj = {
-    ...{ spec: props.item.spec },
-    ...{ mappings: props.item.mappings },
-    ...{
-      queryingFrequencyMs:
-        props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
-          ? queryingFrequencyMs.value
-          : null,
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: () => {},
     },
+    index: {
+      type: Number,
+    },
+  });
+  const emit = defineEmits(['removeItem']);
+  const dynamicHeight = ref(25);
+  const queryingFrequencyMs = ref(5000);
+  const { createMessage } = useMessage();
+  const handleMappingsChange = (e) => {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.item.mappings = e;
+  };
+  const handleRemove = (item, index) => {
+    emit('removeItem', item, index);
+  };
+  //设置回显的高度
+  const setFieldsValueFunc = () => {
+    dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
+    queryingFrequencyMs.value = props.item.queryingFrequencyMs;
   };
-  return obj;
-};
-defineExpose({
-  getSnmpFormFunc,
-  setFieldsValueFunc,
-  handleMappingsChange,
-});
+  //获取表单的值
+  const getSnmpFormFunc = () => {
+    if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) {
+      return createMessage.error('请选择范围');
+    }
+    if (
+      props.item.spec == 'TELEMETRY_QUERYING' ||
+      props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
+    ) {
+      if (queryingFrequencyMs.value == null) {
+        return createMessage.error('请填写查询频率');
+      }
+    }
+    let obj: any = {};
+    obj = {
+      ...{ spec: props.item.spec },
+      ...{ mappings: props.item.mappings },
+      ...{
+        queryingFrequencyMs:
+          props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
+            ? queryingFrequencyMs.value
+            : null,
+      },
+    };
+    return obj;
+  };
+  defineExpose({
+    getSnmpFormFunc,
+    setFieldsValueFunc,
+    handleMappingsChange,
+  });
 </script>
 <style lang="less" scoped>
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
-
-.snmp-form {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 40vw;
-  height: 20vh;
-  border: 0.1px solid #bfbfbf;
-  margin-top: 2vh;
-
-  .form-item1 {
-    width: 9vw;
-    height: 20vh;
-    border: 0.1px solid #bfbfbf;
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
   }
 
-  .form-item2 {
-    width: 28vw;
+  .snmp-form {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 40vw;
     height: 20vh;
     border: 0.1px solid #bfbfbf;
-    overflow: hidden;
-    overflow-y: scroll;
-  }
+    margin-top: 2vh;
 
-  .form-item3 {
-    width: 2vw;
-    height: 20vh;
-    border: 0.1px solid #bfbfbf;
+    .form-item1 {
+      width: 9vw;
+      height: 20vh;
+      border: 0.1px solid #bfbfbf;
+    }
+
+    .form-item2 {
+      width: 28vw;
+      height: 20vh;
+      border: 0.1px solid #bfbfbf;
+      overflow: hidden;
+      overflow-y: scroll;
+    }
+
+    .form-item3 {
+      width: 2vw;
+      height: 20vh;
+      border: 0.1px solid #bfbfbf;
+    }
   }
-}
 </style>

@@ -86,6 +86,7 @@
         isTitle: 'add',
       });
     } else {
+      console.log(selectScript);
       openModal(true, {
         isUpdate: false,
         isTest: true,