health.admin/src/pages/login.vue

<script setup lang="ts">
import type { AccountFormState }                      from '@/model';
import { accountMethod, getMenusMethod, loginMethod } from '@/request/api/account.api';
import router                                         from '@/router';
import { useAccountStore }                            from '@/stores';
import { LockOutlined, UserOutlined }                 from '@ant-design/icons-vue';
import { invalidateCache }                            from 'alova';
import { useSerialRequest }                           from 'alova/client';
import { Form }                                       from 'ant-design-vue';
import { h }                                          from 'vue';


const formState = reactive<AccountFormState>({
  username: '',
  password: '',
  remember: false,
});
const rulesRef = reactive({
  username: [ { required: true, message: '请输入账号' } ],
  password: [ { required: true, message: '请输入密码' } ],
});

const { validate, validateInfos } = Form.useForm(formState, rulesRef);

const formWrapper = ref<HTMLElement>();

const { loading, error, send } = useSerialRequest([
  () => loginMethod(formState),
  token => accountMethod(token),
  data => getMenusMethod(data),
], { immediate: false }).onSuccess(
  ({ data }) => {
    // console.log(data,"登录成功");
    localStorage.setItem("deptId",data?.user?.deptId);
    const path = useAccountStore().$init(data);
    nextTick(() => router.replace({ path }));
  },
);

async function handle() {
  loading.value = true;
  try {
    await validate();
    await invalidateCache()
    await send();
  } catch ( error: any ) {
    const field = error?.errorFields?.[ 0 ];
    if ( field ) formWrapper.value?.querySelector<HTMLInputElement>(`#${ field.name }`)?.focus();
  }
  loading.value = false;
}
</script>
<template>
  <div class="page-container flex flex-col h-vh w-vw">
    <header class="flex-none h-60px text-center">
      <img src="@/assets/images/name.png" alt="中医健康管家" class="h-full">
    </header>
    <main class="flex-auto flex justify-center items-center">
      <div ref="formWrapper" class="form-wrapper flex flex-col justify-center">
        <a-form layout="vertical" @submit="handle">
          <a-form-item label="账号" html-for="username" v-bind="validateInfos.username">
            <a-input id="username" size="large" :prefix="h(UserOutlined)" :disabled="loading"
                     v-model:value="formState.username"
            />
          </a-form-item>
          <a-form-item label="密码" html-for="password" v-bind="validateInfos.password">
            <a-input-password id="password" size="large" :prefix="h(LockOutlined)" :disabled="loading"
                              v-model:value="formState.password"
            />
          </a-form-item>
          <a-form-item style="margin-top: 38px;" :help="error?.message" validate-status="error">
            <a-button type="primary" block html-type="submit" :loading="loading">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </main>
  </div>
</template>
<style scoped lang="scss">
.page-container {
  background: #000 url("@/assets/images/page-login.bg.jpg") no-repeat center center / cover;
}

.form-wrapper {
  width: calc(100vmin - 60px * 2);
  height: calc(100vmin - 60px * 2);
  max-width: 800px;
  max-height: 800px;
  padding: 10%;
  background: url("@/assets/images/page-login-form.bg.png") no-repeat center / contain;

  :deep(.ant-form-item-label) {
    color: #fff;
    font-size: 18px;

    label {
      color: inherit;
      font-size: inherit;
    }
  }
}
</style>