perf(views): “创建设备”步骤

1.修复SN码与设备密码未校验问题
2.优化设备验证支持二次验证

src/views/register-gateway/RegisterGateway.vue

@@ -16,7 +16,6 @@ const steps = ref<UseGuideStepItem[]>([
     component: shallowRef(VerifyDevice),
     nextStepButtonDisabled: true,
     labelAlign: 'left',
-    labelCol: { span: 6 },
     stepDescription: t('registerGateway.tip'),
   },
   {
@@ -64,20 +63,6 @@ const registerGatewayForm = reactive<RegisterGatewayForm>({
 
 const rules = computed<FormRules<RegisterGatewayForm>>(() => {
   return {
-    snCode: [
-      {
-        required: true,
-        message: t('registerGateway.pleaseSnCode'),
-        trigger: 'change',
-      },
-    ],
-    password: [
-      {
-        required: true,
-        message: t('registerGateway.pleasePassword'),
-        trigger: 'change',
-      },
-    ],
     interfaceId: [
       {
         required: true,

src/views/register-gateway/VerifyDevice.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
@@ -13,11 +13,29 @@ import deviceCard4 from '@/assets/img/device-card4.png';
 import deviceLabel from '@/assets/img/device-label.png';
 import deviceManual from '@/assets/img/device-manual.png';
 
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { InterfaceNum, RegisterGatewayForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';
 
 const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
 
 const currentStep = props.steps[props.stepIndex];
+const formRef = ref<FormInstance>();
+const rules: Record<string, Rule[]> = {
+  snCode: [
+    {
+      required: true,
+      message: t('registerGateway.pleaseSnCode'),
+      trigger: 'change',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: t('registerGateway.pleasePassword'),
+      trigger: 'change',
+    },
+  ],
+};
 
 const { handleRequest } = useRequest();
 
@@ -28,39 +46,45 @@ const interfaceNum = computed<InterfaceNum | undefined>(() => {
 });
 
 const verificationGateway = () => {
-  handleRequest(async () => {
-    const { modelId, state, id } = await validateGatewayInfo({
-      snCode: props.form.snCode,
-      password: props.form.password,
-    });
-
-    props.form.modelId = modelId;
-    props.form.id = id;
-
-    Object.assign(props.form, {
-      modelId,
-      state,
-      id,
-    });
-
-    props.form.show = true;
-    currentStep.nextStepButtonDisabled = false;
-
-    if (props.form.modelId) {
-      const { docUrl, iconUrl, interfaceNum, modelName, surfMode, surfModeEn } = await getGatewayModelInfo(
-        props.form.modelId,
-      );
-
-      Object.assign(props.form, {
-        docUrl,
-        iconUrl,
-        interfaceNum,
-        modelName,
-        surfMode: JSON.parse(surfMode),
-        surfModeEn,
+  formRef.value
+    ?.validate()
+    .then(() => {
+      handleRequest(async () => {
+        const { modelId, state, id } = await validateGatewayInfo({
+          snCode: props.form.snCode,
+          password: props.form.password,
+        });
+
+        props.form.modelId = modelId;
+        props.form.id = id;
+
+        Object.assign(props.form, {
+          modelId,
+          state,
+          id,
+        });
+
+        props.form.show = true;
+        currentStep.nextStepButtonDisabled = false;
+
+        if (props.form.modelId) {
+          const { docUrl, iconUrl, interfaceNum, modelName, surfMode, surfModeEn } = await getGatewayModelInfo(
+            props.form.modelId,
+          );
+
+          Object.assign(props.form, {
+            docUrl,
+            iconUrl,
+            interfaceNum,
+            modelName,
+            surfMode: JSON.parse(surfMode),
+            surfModeEn,
+          });
+        }
       });
-    }
-  });
+      props.form.show = false;
+    })
+    .catch(() => {});
 };
 
 const productManual = () => {
@@ -88,25 +112,51 @@ const finish = () => {
 defineExpose<UseGuideStepItemExpose>({
   finish,
 });
+
+watch(
+  () => props.form.snCode,
+  (count) => {
+    if (count) {
+      if (props.form.show) {
+        currentStep.nextStepButtonDisabled = true;
+        props.form.show = false;
+      }
+    }
+  },
+);
+
+watch(
+  () => props.form.password,
+  (count) => {
+    if (count) {
+      if (props.form.show) {
+        currentStep.nextStepButtonDisabled = true;
+        props.form.show = false;
+      }
+    }
+  },
+);
 </script>
 
 <template>
   <div>
     <ARow>
       <ACol :span="5">
-        <AFormItem :label="$t('registerGateway.snCode')" name="snCode">
-          <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.snCode" />
-        </AFormItem>
-        <AFormItem :label="$t('registerGateway.devicePassword')" name="password">
-          <AInput v-model:value="form.password" :placeholder="$t('common.pleaseEnter')" />
-        </AFormItem>
-        <AFormItem>
-          <AButton class="dev-but icon-button" type="primary" @click="verificationGateway">
-            <SvgIcon v-if="form.show" name="check-circle-o" />
-            <SvgIcon v-else name="shield-o" />
-            {{ form.show ? $t('registerGateway.verificationSuccessful') : $t('common.verification') }}
-          </AButton>
-        </AFormItem>
+        <AForm ref="formRef" :model="form" label-align="left" :rules="rules" :label-col="{ span: 6 }">
+          <AFormItem :label="$t('registerGateway.snCode')" name="snCode">
+            <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.snCode" />
+          </AFormItem>
+          <AFormItem :label="$t('registerGateway.devicePassword')" name="password">
+            <AInput v-model:value="form.password" :placeholder="$t('common.pleaseEnter')" />
+          </AFormItem>
+          <AFormItem>
+            <AButton class="dev-but icon-button" type="primary" @click="verificationGateway">
+              <SvgIcon v-if="form.show" name="check-circle-o" />
+              <SvgIcon v-else name="shield-o" />
+              {{ form.show ? $t('registerGateway.verificationSuccessful') : $t('common.verification') }}
+            </AButton>
+          </AFormItem>
+        </AForm>
       </ACol>
       <ACol :span="17">
         <div>