perf(views): 优化“选择协议类型”步骤的逻辑

src/i18n/locales/zh.json

@@ -231,7 +231,7 @@
     "selectDeviceType": "选择设备类型",
     "selectDeviceTypeTip": "推荐使用模板导入，支持语义识别、自动填充序号、自动填充非必填项；参数较少的协议可选择手动创建",
     "selectProtocolType": "选择协议类型",
-    "selectProtocolTypeTip": "目前仅支持 modbusRTU 和 S7 协议，协议类型在完成配置后无法修改，请谨慎选择",
+    "selectProtocolTypeTip": "目前仅支持 ModbusRTU、ModbusTCP 和 S7 协议，协议类型在完成配置后无法修改，请谨慎选择",
     "selectStandardParams": "选择标准参数",
     "selectedParams": "已选",
     "setupProtocol": "配置协议",

src/types/index.ts

@@ -97,7 +97,7 @@ export type UseGuideStepItemExpose = {
 export type UseGuideStepItemInstance = ComponentPublicInstance<unknown, UseGuideStepItemExpose>;
 
 export interface SetupProtocolForm {
-  protocolType: string;
+  protocolType?: string;
   protocolInfo: ProtocolBaseInfo;
   protocolFile: UploadProps['fileList'];
   configMethod: ProtocolConfigMethod;

src/views/setup-protocol/SelectProtocolType.vue

@@ -16,6 +16,7 @@ const currentStep = props.steps[props.stepIndex];
 
 onMounted(() => {
   currentStep.title = t('setupProtocol.selectProtocolType');
+  props.form.protocolType = undefined;
 
   handleRequest(async () => {
     await getProtocolTypes();

src/views/setup-protocol/SetupProtocol.vue

@@ -23,7 +23,7 @@ const steps = ref<UseGuideStepItem[]>([
 ]);
 
 const setupProtocolForm = reactive<SetupProtocolForm>({
-  protocolType: 'ModbusRTU',
+  protocolType: undefined,
   protocolInfo: {
     id: 37,
     protocolName: '',
@@ -58,7 +58,7 @@ const rules = computed<FormRules<SetupProtocolForm>>(() => {
       {
         required: true,
         message: t('setupProtocol.plzSelectProtocolType'),
-        trigger: 'change',
+        trigger: 'blur',
       },
     ],
     protocolFile: [

src/views/setup-protocol/UploadProtocolFile.vue

@@ -25,11 +25,11 @@ onMounted(() => {
       const { protocolType } = props.form;
       const fileNameList = data[0].dictTypeDataList.map((item) => item.dictValue);
 
-      if (protocolType.includes(ProtocolType.ModbusRTU)) {
+      if (protocolType?.includes(ProtocolType.ModbusRTU)) {
         fileName = fileNameList.find((item) => item.includes(ProtocolType.ModbusRTU));
-      } else if (protocolType.includes(ProtocolType.ModbusTCP)) {
+      } else if (protocolType?.includes(ProtocolType.ModbusTCP)) {
         fileName = fileNameList.find((item) => item.includes(ProtocolType.ModbusTCP));
-      } else if (protocolType.includes(ProtocolType.S7)) {
+      } else if (protocolType?.includes(ProtocolType.S7)) {
         fileName = fileNameList.find((item) => item.includes(ProtocolType.S7));
       }
     }

src/views/setup-protocol/WaitingRecognition.vue

@@ -17,7 +17,7 @@ onMounted(() => {
   handleRequest(async () => {
     const { protocolType, protocolFile } = props.form;
     const file = protocolFile?.[0].originFileObj;
-    const data = await uploadUserProtocol(protocolType, file as File);
+    const data = await uploadUserProtocol(protocolType as string, file as File);
     Object.assign(props.form.protocolInfo, data);
 
     await waitTime(1000);