perf(views): 优化“选择设备类型”步骤，支持获取设备类型列表

src/views/setup-protocol/SelectDeviceType.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 
+import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
+import { groupList } from '@/api';
 
-import type { SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';
+import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
+import type { EquipmentTypeItem, SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';
 
 const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();
 
-const deviceTypes = ['离心空压机', '冷水主机'];
+const { handleRequest } = useRequest();
+const deviceTypes = ref<EquipmentTypeItem[]>([]);
 const currentStep = props.steps[props.stepIndex];
 
 onMounted(() => {
@@ -19,6 +23,7 @@ onMounted(() => {
     protocolName: '',
     protocolType: undefined,
     deviceType: undefined,
+    deviceTypeId: undefined,
     dataBit: 5,
     parityBit: 'N',
     stopBit: '1',
@@ -36,13 +41,26 @@ onMounted(() => {
     addrOrder: undefined,
     addrOrderCode: undefined,
   });
+
+  handleRequest(async () => {
+    deviceTypes.value = await groupList({
+      dataType: 1,
+    });
+  });
 });
 
+let deviceTypeId: number;
+
+const handleDeviceTypeChange = (_value: SelectValue, option: DefaultOptionType) => {
+  deviceTypeId = option.key;
+};
+
 const finish = () => {
   const { protocolType, deviceType, protocolInfo } = props.form;
   currentStep.title = deviceType as string;
   protocolInfo.protocolType = protocolType;
   protocolInfo.deviceType = deviceType;
+  protocolInfo.deviceTypeId = deviceTypeId;
 };
 
 defineExpose<UseGuideStepItemExpose>({
@@ -53,9 +71,14 @@ defineExpose<UseGuideStepItemExpose>({
 <template>
   <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 }}
+      <ASelect
+        v-model:value="form.deviceType"
+        class="device-select"
+        :placeholder="$t('common.plzSelect')"
+        @change="handleDeviceTypeChange"
+      >
+        <ASelectOption v-for="item in deviceTypes" :key="item.id" :value="item.dataName">
+          {{ item.dataName }}
         </ASelectOption>
       </ASelect>
     </AFormItem>