MQTTConfiguration.vue 3.94 KB
<script lang="ts" setup>
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import { useDescription, Description } from '/@/components/Description';
  import { Input } from 'ant-design-vue';
  import { h } from 'vue';
  import { TransportPayloadTypeEnum } from './const';
  import { useI18n } from '/@/hooks/web/useI18n';

  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
  const props = defineProps<{
    record: TransportConfiguration;
  }>();

  const { t } = useI18n();

  const [register] = useDescription({
    layout: 'vertical',
    column: 2,
    data: props.record,
    schema: [
      {
        field: 'type',
        label: t('deviceManagement.product.accessProtocolText'),
        span: 2,
      },
      {
        field: 'deviceTelemetryTopic',
        label: t('deviceManagement.product.telemetryDataSubjectFilterText'),
      },
      {
        field: 'deviceAttributesTopic',
        label: t('deviceManagement.product.attributeTopicFilterText'),
      },
      {
        field: 'transportPayloadType',
        label: t('deviceManagement.product.deviceMessagePayloadText', { deviceType: 'MQTT' }),
        render(_, data: TransportConfiguration) {
          return data.transportPayloadTypeConfiguration.transportPayloadType;
        },
      },
      {
        field: 'enableCompatibilityWithJsonPayloadFormat',
        label: t('deviceManagement.product.enablePayloadCompatibilityText'),
        render(_, data: TransportConfiguration) {
          return data.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat
            ? t('deviceManagement.product.enableText')
            : t('deviceManagement.product.closeText');
        },
      },
      {
        field: 'deviceTelemetryProtoSchema',
        label: t('deviceManagement.product.deviceTelemetryProtoSchemaText'),
        span: 2,
        show: (data: TransportConfiguration) =>
          data.transportPayloadTypeConfiguration.transportPayloadType ===
          TransportPayloadTypeEnum.PROTOBUF,
        render(_, data: TransportConfiguration) {
          return h(Input.TextArea, {
            autoSize: true,
            value: data.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema,
          });
        },
      },
      {
        field: 'deviceAttributesProtoSchema',
        label: t('deviceManagement.product.deviceAttributesProtoSchemaText'),
        span: 2,
        show: (data: TransportConfiguration) =>
          data.transportPayloadTypeConfiguration.transportPayloadType ===
          TransportPayloadTypeEnum.PROTOBUF,
        render(_, data: TransportConfiguration) {
          return h(Input.TextArea, {
            autoSize: true,
            value: data.transportPayloadTypeConfiguration.deviceAttributesProtoSchema,
          });
        },
      },
      {
        field: 'deviceRpcRequestProtoSchema',
        label: t('deviceManagement.product.deviceRpcRequestProtoSchemaText'),
        span: 2,
        show: (data: TransportConfiguration) =>
          data.transportPayloadTypeConfiguration.transportPayloadType ===
          TransportPayloadTypeEnum.PROTOBUF,
        render(_, data: TransportConfiguration) {
          return h(Input.TextArea, {
            autoSize: true,
            value: data.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema,
          });
        },
      },
      {
        field: 'deviceRpcResponseProtoSchema',
        label: t('deviceManagement.product.deviceRpcResponseProtoSchemaText'),
        span: 2,
        show: (data: TransportConfiguration) =>
          data.transportPayloadTypeConfiguration.transportPayloadType ===
          TransportPayloadTypeEnum.PROTOBUF,
        render(_, data: TransportConfiguration) {
          return h(Input.TextArea, {
            autoSize: true,
            value: data.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema,
          });
        },
      },
    ],
  });
</script>

<template>
  <Description @register="register" />
</template>