sl-sfy-safety/src/views/login/LoginForm2.vue

<template>
  <el-form
    ref="formRef"
    :show-label="false"
    :show-require-mark="false"
    size="large"
    :model="formInline"
    :rules="rules"
    class="login-form"
  >
    <el-form-item prop="tenantId">
      <el-select
        v-model="formInline.tenantId"
        placeholder="请选择租户"
        @chnage="tenantIdChange"
        class="w-full"
      >
        <el-option
          v-for="item in tenantOptions"
          :key="item.tenantId"
          :label="item.tenantName"
          :value="item.tenantId"
        />

        <template #prefix>
          <el-icon size="18" color="#808695">
            <PersonOutline />
          </el-icon>
        </template>
      </el-select>
    </el-form-item>

    <el-form-item prop="username">
      <el-input v-model="formInline.username" placeholder="请输入用户名">
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <PersonOutline />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="formInline.password"
        type="password"
        show-password
        placeholder="请输入密码"
        @keyup.enter="handleSubmit"
      >
        <template #prefix>
          <el-icon class="el-input__icon" size="18" color="#808695">
            <LockClosedOutline />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item prop="verCode" v-if="isEnableCode">
      <div class="flex w-full">
        <el-input
          class="order-first mr-3"
          v-model="formInline.verCode"
          :input-props="{ autocomplete: 'new-password' }"
          placeholder="请输入图形验证码"
        >
          <template #prefix>
            <el-icon class="el-input__icon" size="18" color="#808695">
              <CodeOutlined />
            </el-icon>
          </template>
        </el-input>

        <el-button
          text
          :loading="captchaLoading"
          style="height: 40px; width: 40%; overflow: hidden"
          class="order-last"
          @click="getCaptchaImg"
        >
          <img :src="captchaImgUrl" style="height: 40px" />
        </el-button>
      </div>
    </el-form-item>

    <div class="flex items-center justify-between forget">
      <div class="flex-initial">
        <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
      </div>
      <div class="flex-initial order-last">
        <a href="javascript:">忘记密码</a>
      </div>
    </div>

    <el-form-item :show-label="false">
      <el-button
        class="w-full"
        type="primary"
        @click="handleSubmit"
        size="large"
        :loading="loading"
        round
      >
        登录
      </el-button>
    </el-form-item>
    <div class="mb-4 default-color">
      <div class="flex view-account-other">
        <div class="flex-initial">
          <span>其它登录方式</span>
        </div>
        <div class="flex-initial mx-2">
          <a href="javascript:">
            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
              <LogoGithub />
            </el-icon>
          </a>
        </div>
        <div class="flex-initial mx-2">
          <a href="javascript:">
            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
              <LogoFacebook />
            </el-icon>
          </a>
        </div>
        <div class="flex-initial" style="margin-left: auto">
          <a href="javascript:" @click="goRegister">注册账号</a>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { ElMessage, FormRules } from 'element-plus';
  import { ResultEnum } from '@/enums/httpEnum';
  import { initData, captchaBase64, tentantList } from '@/api/common/index';
  import { CodeOutlined } from '@vicons/antd';
  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
  import { PageEnum } from '@/enums/pageEnum';

  interface FormState {
    username: string;
    password: string;
    verCode: string;
    vercodeType: number;
    tenantId: number | undefined;
  }

  const formRef = ref();

  const loading = ref(false);
  const autoLogin = ref(true);
  const isEnableCode = ref(false);
  const captchaLoading = ref(false);
  const captchaImgUrl = ref();
  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;

  const tenantOptions = ref<{ tenantCode: string; tenantId: number; tenantName: string }[]>([]);
  const tenantAccounts = [
    { username: 'bj', password: '123456' },
    { username: 'sz', password: '123456' },
    { username: 'gz', password: '123456' },
    { username: 'sh', password: '123456' },
  ];

  const formInline = reactive({
    username: 'test',
    password: '123456',
    verCode: '',
    vercodeType: 5,
    tenantId: undefined,
  });

  const rules: FormRules = {
    username: { required: true, message: '请输入用户名', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
    tenantId: { required: true, message: '请选择租户', type: 'number', trigger: 'change' },
  };
  const emit = defineEmits(['goRegister']);
  const userStore = useUserStore();

  const router = useRouter();
  const route = useRoute();

  function tenantIdChange() {
    const tenantId = formInline.tenantId;
    const index = tenantOptions.value.findIndex((item) => item.tenantId === tenantId);
    if (index >= 0) {
      const info = tenantAccounts[index];
      formInline.username = info.username;
      formInline.password = info.password;
    }
  }

  function getTentantList() {
    tentantList().then((res) => {
      tenantOptions.value = res;
      if (res.length) {
        formInline.tenantId = res[0].tenantId;
      }
    });
  }

  //获取验证码
  function getCaptcha() {
    const vercodeType = formInline.vercodeType;
    captchaBase64({ type: vercodeType }).then((res) => {
      captchaImgUrl.value = res.img;
    });
  }

  function getCaptchaImg() {
    getCaptcha();
  }

  const handleSubmit = () => {
    if (!formRef.value) return;
    formRef.value.validate(async (valid) => {
      if (valid) {
        const { username, password, verCode, vercodeType, tenantId } = formInline;
        loading.value = true;

        const params: FormState = {
          username,
          password,
          verCode,
          vercodeType,
          tenantId,
        };

        try {
          const { code, msg } = await userStore.login(params);
          if (code == ResultEnum.SUCCESS) {
            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
            ElMessage.success('登录成功，即将进入系统');
            if (route.name === LOGIN_NAME) {
              router.replace('/');
            } else router.replace(toPath);
          } else {
            formInline.verCode = '';
            getCaptcha();
            ElMessage.error(msg || '登录失败');
          }
        } finally {
          loading.value = false;
        }
      } else {
        ElMessage({
          message: '请填写完整信息',
          type: 'error',
        });
      }
    });
  };

  function goRegister() {
    emit('goRegister');
  }

  function getInitData() {
    initData().then((res) => {
      if (res.isEnableCode === true) {
        isEnableCode.value = res.isEnableCode;
        getCaptcha();
      }
    });
  }

  onMounted(() => {
    getInitData();
    getTentantList();
  });
</script>

<style lang="scss" scoped>
  .forget {
    margin-bottom: 16px;
    margin-top: -10px;
  }
  .login-form {
    .el-input {
      --el-input-border-radius: 20px !important;
    }
    .el-select {
      .el-input {
        --el-input-border-radius: 20px !important;
      }
    }
  }
</style>