hvac-web/src/views/setup-protocol/SelectDeviceType.vue

<script setup lang="ts">
import { onMounted } from 'vue';

import { t } from '@/i18n';

import type { SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';

const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();

const deviceTypes = ['离心空压机', '冷水主机'];
const currentStep = props.steps[props.stepIndex];

onMounted(() => {
  currentStep.title = t('setupProtocol.selectDeviceType');
  props.form.deviceType = undefined;

  Object.assign(props.form.protocolInfo, {
    id: undefined,
    protocolName: '',
    protocolType: undefined,
    deviceType: undefined,
    dataBit: 5,
    parityBit: 'N',
    stopBit: '1',
    baudRate: undefined,
    dataSendInterval: undefined,
    highFreqSendInterval: undefined,
    readTimeout: undefined,
    nextDataReadDelay: undefined,
    nextRoundDataReadDelay: undefined,
    readContinuousAddr: undefined,
    readContinuousAddrCode: undefined,
    readContinuousAddrLength: undefined,
    byteOrder: undefined,
    byteOrderCode: undefined,
    addrOrder: undefined,
    addrOrderCode: undefined,
  });
});

const finish = () => {
  const { protocolType, deviceType, protocolInfo } = props.form;
  currentStep.title = deviceType as string;
  protocolInfo.protocolType = protocolType;
  protocolInfo.deviceType = deviceType;
};

defineExpose<UseGuideStepItemExpose>({
  finish,
});
</script>

<template>
  <div>
    <div class="use-guide-title">{{ $t('setupProtocol.selectDeviceType') }}</div>
    <div class="use-guide-description">{{ $t('setupProtocol.selectDeviceTypeTip') }}</div>
    <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceType">
      <ASelect v-model:value="form.deviceType" class="device-select" :placeholder="$t('common.plzSelect')">
        <ASelectOption v-for="item in deviceTypes" :key="item" :value="item">
          {{ item }}
        </ASelectOption>
      </ASelect>
    </AFormItem>
  </div>
</template>

<style lang="scss" scoped>
.device-select {
  width: 224px;
}
</style>