perf(views): 优化“协议结果”步骤的逻辑

1. 添加字段校验
2. 点击重新识别回到“上传文件”步骤

src/api/index.ts

@@ -395,7 +395,7 @@ export const getProtocolBaseInfo = async (id: number) => {
   return data;
 };
 
-export const updateProtocolBaseInfo = async (params: ProtocolBaseInfo) => {
+export const updateProtocolBaseInfo = async (params: Partial<ProtocolBaseInfo>) => {
   await request(apiBiz('/protocolBaseInfo/update'), {
     method: 'POST',
     body: JSON.stringify(params),

src/i18n/locales/zh.json

@@ -22,8 +22,8 @@
     "operation": "操作",
     "pageTotal": "共 {total} 条",
     "pleaseEnter": "请输入",
-    "plzEnter": "请输入",
-    "plzSelect": "请选择",
+    "plzEnter": "请输入{name}",
+    "plzSelect": "请选择{name}",
     "reLogin": "你已被登出，请重新登录",
     "requestTimedOut": "请求超时",
     "return": "返回",

src/layout/UseGuidance.vue

@@ -86,21 +86,19 @@ const exportStepContent = async () => {
   await stepRef.value?.exportData?.();
 };
 
-const finishCurrentStep = () => {
-  formRef.value
-    ?.validate()
-    .then(async () => {
-      await stepRef.value?.finish?.();
-
-      if (isLastStep.value) {
-        router.replace('/first-usage');
-      } else {
-        goNextStep();
-      }
-    })
-    .catch((err) => {
-      console.error(err);
-    });
+const finishCurrentStep = async () => {
+  try {
+    await formRef.value?.validate();
+    await stepRef.value?.finish?.();
+
+    if (isLastStep.value) {
+      router.replace('/first-usage');
+    } else {
+      goNextStep();
+    }
+  } catch (err) {
+    console.error(err);
+  }
 };
 </script>
 

src/types/index.ts

@@ -100,7 +100,7 @@ export type UseGuideStepItemInstance = ComponentPublicInstance<unknown, UseGuide
 
 export interface SetupProtocolForm {
   protocolType?: string;
-  protocolInfo: ProtocolBaseInfo;
+  protocolInfo: Partial<ProtocolBaseInfo>;
   protocolFile: UploadProps['fileList'];
   configMethod: ProtocolConfigMethod;
   deviceType: string;
@@ -126,7 +126,7 @@ export interface CustomParamsForm {
 }
 
 export interface ProtocolBaseInfo {
-  id?: number;
+  id: number;
   protocolName: string;
   protocolType: string;
   deviceType: string;

src/views/setup-protocol/ProtocolContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { message, Modal } from 'ant-design-vue';
 import { debounce } from 'lodash-es';
 
@@ -12,12 +12,13 @@ import { DictCode } from '@/constants';
 import CustomParams from './CustomParams.vue';
 import SelectStandardParams from './SelectStandardParams.vue';
 
+import type { FormInstance } from 'ant-design-vue';
 import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
 import type { Key } from 'ant-design-vue/es/table/interface';
-import type { CheckedType, PageParams, ProtocolBaseInfo, ProtocolParamInfo } from '@/types';
+import type { CheckedType, FormRules, PageParams, ProtocolBaseInfo, ProtocolParamInfo } from '@/types';
 
 interface Props {
-  info: ProtocolBaseInfo;
+  info: Partial<ProtocolBaseInfo>;
 }
 
 const props = defineProps<Props>();
@@ -29,6 +30,115 @@ const { dictData: readContinuousAddr, getDictData: getReadContinuousAddr } = use
 const { dictData: byteOrderList, getDictData: getByteOrderList } = useDictData(DictCode.ByteOrder);
 const { dictData: addrOrderList, getDictData: getAddrOrderList } = useDictData(DictCode.AddrOrder);
 
+const formRef = ref<FormInstance>();
+
+const rules = computed<FormRules<ProtocolBaseInfo>>(() => {
+  return {
+    protocolName: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolName') }),
+        trigger: 'blur',
+      },
+    ],
+    protocolType: [
+      {
+        required: true,
+        message: t('setupProtocol.plzSelectProtocolType'),
+        trigger: 'blur',
+      },
+    ],
+    deviceType: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.deviceType') }),
+        trigger: 'blur',
+      },
+    ],
+    dataBit: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.dataBit') }),
+        trigger: 'blur',
+      },
+    ],
+    parityBit: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.parityBit') }),
+        trigger: 'blur',
+      },
+    ],
+    stopBit: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.stopBit') }),
+        trigger: 'blur',
+      },
+    ],
+    baudRate: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.baudRate') }),
+        trigger: 'blur',
+      },
+    ],
+    dataSendInterval: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.dataSendInterval') }),
+        trigger: 'blur',
+      },
+    ],
+    highFreqSendInterval: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.highFreqSendInterval') }),
+        trigger: 'blur',
+      },
+    ],
+    readTimeout: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.readTimeout') }),
+        trigger: 'blur',
+      },
+    ],
+    nextDataReadDelay: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.nextDataReadDelay') }),
+        trigger: 'blur',
+      },
+    ],
+    nextRoundDataReadDelay: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.nextRoundDataReadDelay') }),
+        trigger: 'blur',
+      },
+    ],
+    byteOrder: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.byteOrder') }),
+        trigger: 'blur',
+      },
+    ],
+    addrOrder: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.addrOrder') }),
+        trigger: 'blur',
+      },
+    ],
+  };
+});
+
+const validateProtocolInfo = async () => {
+  await formRef.value?.validate();
+};
+
 onMounted(() => {
   handleRequest(async () => {
     await getProtocolTypes();
@@ -130,11 +240,15 @@ const deleteSelectedParams = () => {
 
 const customParamsRef = useTemplateRef('customParams');
 const selectStandardParamsRef = useTemplateRef('selectStandardParams');
+
+defineExpose({
+  validateProtocolInfo,
+});
 </script>
 
 <template>
   <div>
-    <AForm class="protocol-container" layout="vertical">
+    <AForm class="protocol-container" ref="formRef" :model="info" :rules="rules" layout="vertical">
       <div class="protocol-label">{{ $t('common.basicInfo') }}</div>
       <ARow>
         <ACol :span="6">
@@ -210,6 +324,7 @@ const selectStandardParamsRef = useTemplateRef('selectStandardParams');
             <AInputNumber
               v-model:value="info.dataSendInterval"
               class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
               addon-after="s"
               :min="0"
               :precision="0"
@@ -221,6 +336,7 @@ const selectStandardParamsRef = useTemplateRef('selectStandardParams');
             <AInputNumber
               v-model:value="info.highFreqSendInterval"
               class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
               addon-after="s"
               :min="0"
               :precision="0"
@@ -232,6 +348,7 @@ const selectStandardParamsRef = useTemplateRef('selectStandardParams');
             <AInputNumber
               v-model:value="info.readTimeout"
               class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
               addon-after="ms"
               :min="0"
               :precision="0"
@@ -243,6 +360,7 @@ const selectStandardParamsRef = useTemplateRef('selectStandardParams');
             <AInputNumber
               v-model:value="info.nextDataReadDelay"
               class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
               addon-after="ms"
               :min="0"
               :precision="0"
@@ -254,6 +372,7 @@ const selectStandardParamsRef = useTemplateRef('selectStandardParams');
             <AInputNumber
               v-model:value="info.nextRoundDataReadDelay"
               class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
               addon-after="ms"
               :min="0"
               :precision="0"
@@ -277,6 +396,7 @@ const selectStandardParamsRef = useTemplateRef('selectStandardParams');
             <AInputNumber
               v-model:value="info.readContinuousAddrLength"
               class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
               :min="0"
               :precision="0"
             />

src/views/setup-protocol/RecognitionResult.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, useTemplateRef } from 'vue';
 import { message } from 'ant-design-vue';
 
 import { useRequest } from '@/hooks/request';
@@ -28,6 +28,10 @@ onMounted(() => {
   });
 });
 
+const reRecognize = () => {
+  props.goToStep(props.stepIndex - 2);
+};
+
 const exportData = () => {
   handleRequest(async () => {
     const file = await downloadUserProtocol(protocolType, protocolName);
@@ -36,7 +40,10 @@ const exportData = () => {
   });
 };
 
+const protocolContentRef = useTemplateRef('protocolContent');
+
 const finish = async () => {
+  await protocolContentRef.value?.validateProtocolInfo();
   await updateProtocolBaseInfo(props.form.protocolInfo);
 };
 
@@ -50,9 +57,9 @@ defineExpose<UseGuideStepItemExpose>({
   <div>
     <div class="result-header">
       <div class="use-guide-title">{{ $t('setupProtocol.recognitionResult') }}</div>
-      <AButton>{{ $t('setupProtocol.reRecognize') }}</AButton>
+      <AButton @click="reRecognize">{{ $t('setupProtocol.reRecognize') }}</AButton>
     </div>
-    <ProtocolContent class="result-protocol" :info="form.protocolInfo" />
+    <ProtocolContent class="result-protocol" ref="protocolContent" :info="form.protocolInfo" />
   </div>
 </template>
 

src/views/setup-protocol/SetupProtocol.vue

@@ -27,25 +27,24 @@ const setupProtocolForm = reactive<SetupProtocolForm>({
   protocolInfo: {
     id: 37,
     protocolName: '',
-    protocolType: '',
-    deviceType: '',
-    deviceTypeId: null,
+    protocolType: undefined,
+    deviceType: undefined,
     dataBit: 5,
     parityBit: 'N',
     stopBit: '1',
-    baudRate: 0,
-    dataSendInterval: 0,
-    highFreqSendInterval: 0,
-    readTimeout: 0,
-    nextDataReadDelay: 0,
-    nextRoundDataReadDelay: 0,
-    readContinuousAddr: '',
-    readContinuousAddrCode: 0,
-    readContinuousAddrLength: 0,
-    byteOrder: '',
-    byteOrderCode: '',
-    addrOrder: '',
-    addrOrderCode: '',
+    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,
   },
   protocolFile: [],
   configMethod: ProtocolConfigMethod.ImportFromTemplate,