fix: 登录校验调整

lib/saas/view/system/login.vue

@@ -19,33 +19,51 @@
           <h1 class="lg_card_title">{{ configStore.projectName }}</h1>
           <p v-show="!errorShow" style="height: 8px"></p>
           <p v-show="errorShow" class="lg_card_error">{{ errorMsg }}</p>
-          <!-- <p class="lg_card_tip">用户名/手机号</p> -->
+          <a-form name="basic" :model="formState" @finish="submit">
-          <a-input class="loginInfo" placeholder="用户名" v-model:value="userName">
+            <a-form-item name="userName" :rules="[{ required: true, message: '请输入用户名' }]">
-            <template #prefix>
+              <!-- <p class="lg_card_tip">用户名/手机号</p> -->
-              <ns-icon class="loginIcon" name="userName" size="19" style="margin-right: 20px" />
+              <a-input class="loginInfo" placeholder="用户名" v-model:value="userName">
-            </template>
+                <template #prefix>
-          </a-input>
+                  <ns-icon class="loginIcon" name="userName" size="19" style="margin-right: 20px" />
-          <!-- <p class="lg_card_tip">密码</p> -->
+                </template>
-          <a-input-password class="loginInfo" placeholder="密码" v-model:value="password">
+              </a-input>
-            <template #prefix>
+            </a-form-item>
-              <ns-icon class="loginIcon" name="passWord" size="19" style="margin-right: 20px" />
-            </template>
-          </a-input-password>
-          <!-- 验证码 -->
 
-          <a-input v-model:value="code" placeholder="验证码" class="loginInfo">
+            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
-            <template #prefix>
+              <!-- <p class="lg_card_tip">密码</p> -->
-              <ns-icon class="loginIcon" name="verifyIcon" size="19" style="margin-right: 20px" />
+              <a-input-password class="loginInfo" placeholder="密码" v-model:value="password">
-            </template>
+                <template #prefix>
-            <template #addonAfter>
+                  <ns-icon class="loginIcon" name="passWord" size="19" style="margin-right: 20px" />
-              <ns-verify @get-code="onGetCode" />
+                </template>
-            </template>
+              </a-input-password>
-          </a-input>
+            </a-form-item>
-          <!-- 记住密码 -->
+
-          <a-checkbox v-model:checked="isRemember" class="loginInfo">记住密码</a-checkbox>
+            <a-form-item name="code" :rules="[{ validator }]">
-          <a-button @click="submit" :loading="loading" type="primary" class="loginInfo"
+              <!-- 验证码 -->
-            >登录</a-button
+              <a-input v-model:value="code" placeholder="验证码" class="loginInfo">
-          >
+                <template #prefix>
+                  <ns-icon
+                    class="loginIcon"
+                    name="verifyIcon"
+                    size="19"
+                    style="margin-right: 20px" />
+                </template>
+                <template #addonAfter>
+                  <ns-verify @get-code="onGetCode" />
+                </template>
+              </a-input>
+            </a-form-item>
+            <!-- <a-form-item name="remember"> -->
+            <!-- 记住密码 -->
+            <a-checkbox v-model:checked="isRemember" class="loginInfo">记住密码</a-checkbox>
+            <!-- </a-form-item> -->
+
+            <a-form-item>
+              <a-button html-type="submit" :loading="loading" type="primary" class="loginInfo">
+                登录
+              </a-button>
+            </a-form-item>
+          </a-form>
         </div>
       </a-layout-content>
       <!-- <a-layout-footer>Copyright 2021 xu科技 All Rights Reserved</a-layout-footer> -->
@@ -54,7 +72,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { defineComponent, onMounted, reactive, ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
   import { authorizationService } from '/nerv-base/store/modules/authorization-service';
@@ -81,11 +99,12 @@
       // title.value = appConfig.title ? appConfig.title : '账号登录';
       const loading = ref<boolean>(false);
       const configStore = appConfigStore();
-      console.log(configStore);
+      const formState = reactive({ userName, password, code });
 
       const { getThemeConfig: themeConfig, projectName } = storeToRefs(configStore);
 
       const useAuthorization = authorizationService();
+
       const rememberFunc = (data) => {
         console.log(isRemember.value);
         if (!isRemember.value) return;
@@ -97,29 +116,33 @@
           const { accountNo, password: pwd } = JSON.parse(data);
           userName.value = accountNo;
           password.value = pwd;
+          formState.userName = userName.value;
+          formState.password = password.value;
         }
       });
-      const submit = (): void => {
+      const submit = (value): void => {
-        if (password.value === '') {
+        console.log(value);
-          errorMsg.value = '请输入密码';
+
-          errorShow.value = true;
+        // if (password.value === '') {
-          return;
+        //   errorMsg.value = '请输入密码';
-        }
+        //   errorShow.value = true;
-        if (userName.value === '') {
+        //   return;
-          errorMsg.value = '请输入账号';
+        // }
-          errorShow.value = true;
+        // if (userName.value === '') {
-          return;
+        //   errorMsg.value = '请输入账号';
-        }
+        //   errorShow.value = true;
-        if (!code.value) {
+        //   return;
-          errorMsg.value = '请输入验证码';
+        // }
-          errorShow.value = true;
+        // if (!code.value) {
-          return;
+        //   // errorMsg.value = '请输入验证码';
-        }
+        //   // errorShow.value = true;
-        if (code.value.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase()) {
+        //   return;
-          errorMsg.value = '请输入正确的验证码';
+        // }
-          errorShow.value = true;
+        // if (code.value.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase()) {
-          return;
+        //   errorMsg.value = '请输入正确的验证码';
-        }
+        //   errorShow.value = true;
+        //   return;
+        // }
         if (userName.value !== '' && password.value !== '') {
           errorShow.value = false;
           let data = JSON.stringify({
@@ -208,7 +231,15 @@
       const onGetCode = (res) => {
         verifyCode.value = res;
       };
+
+      const validator = async (rule, value) => {
+        if (!value) return Promise.reject('请输入验证码');
+        if (value?.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase())
+          return Promise.reject('请输入正确的验证码');
+      };
       return {
+        validator,
+        formState,
         projectName,
         onGetCode,
         code,
@@ -323,7 +354,7 @@
     .loginInfo {
       height: 48px;
       width: 100%;
-      margin-bottom: 24px;
+      // margin-bottom: 24px;
       font-size: 16px !important;
 
       :deep(.ant-input) {
@@ -340,10 +371,12 @@
       }
     }
     .loginInfo:last-child {
-      margin-bottom: 16px;
+      // margin-bottom: 16px;
     }
-    .loginInfo:nth-child(5n + 2) {
+    .loginInfo:nth-child(4) {
-      margin-bottom: 0px;
+      width: fit-content;
+      // margin-bottom: 0px;
+      // height: 20px !important;
     }
   }