Coap.vue 5.45 KB
<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,
    deviceTelemetryProtoSchemaData,
    deviceAttributesProtoSchemaData,
    deviceRpcRequestProtoSchemaData,
    deviceRpcResponseProtoSchemaData,
  } 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: 100,
        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 == null
              ? deviceTelemetryProtoSchemaData
              : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
                  ?.deviceTelemetryProtoSchema,
          deviceAttributesProtoSchema:
            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
              ?.deviceAttributesProtoSchema == null
              ? deviceAttributesProtoSchemaData
              : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
                  ?.deviceAttributesProtoSchema,
          deviceRpcRequestProtoSchema:
            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
              ?.deviceRpcRequestProtoSchema == null
              ? deviceRpcRequestProtoSchemaData
              : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
                  ?.deviceRpcRequestProtoSchema,
          deviceRpcResponseProtoSchema:
            v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
              ?.deviceRpcResponseProtoSchema == null
              ? deviceRpcResponseProtoSchemaData
              : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration
                  ?.deviceRpcResponseProtoSchema,
        });
      };
      const resetStepFieldsValueFunc = () => {
        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,
        resetStepFieldsValueFunc,
        getDataFunc,
        setStepFieldsValueFunc,
      };
    },
  });
</script>
<style lang="less" scoped></style>