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

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

import { useDictData } from '@/hooks/dict-data';
import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { DictCode } from '@/constants';

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

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

const { handleRequest } = useRequest();
const { dictData: protocolTypes, getDictData: getProtocolTypes } = useDictData(DictCode.AllProtocolType);
const currentStep = props.steps[props.stepIndex];

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

  handleRequest(async () => {
    await getProtocolTypes();
  });
});

const finish = () => {
  currentStep.title = t('setupProtocol.protocolDisplayName', { name: props.form.protocolType });
};

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

<template>
  <div>
    <AFormItem :label="$t('setupProtocol.protocolType')" name="protocolType">
      <ASelect v-model:value="form.protocolType" class="protocol-select" :placeholder="$t('common.plzSelect')">
        <ASelectOption v-for="item in protocolTypes" :key="item.dictValueId" :value="item.dictValue">
          {{ item.dictValue }}
        </ASelectOption>
      </ASelect>
    </AFormItem>
    <div class="protocol-help">{{ $t('common.needHelp') }}</div>
    <AButton>{{ $t('setupProtocol.howToJudgeProtocolType') }}</AButton>
    <AButton>{{ $t('setupProtocol.canNotFindProtocolType') }}</AButton>
  </div>
</template>

<style lang="scss" scoped>
.protocol-select {
  width: 256px;
}

.protocol-help {
  margin-top: 128px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--antd-color-text);
}

button + button {
  margin-left: 12px;
}
</style>